Merge pull request #123 from billilge/feat/#121-notice-pop-up

[Feat/#121] 공지사항 팝업 구현

Author: tnals0924

src/app/mobile/main/page.tsx

@@ -11,6 +11,7 @@ import { WelfareItemData, Item } from '@/types/welfareItemType';
 import IconSearch from 'public/assets/icons/icon-search.svg';
 import { useRouter } from 'next/navigation';
 import { requestNotificationPermission } from '@/utils/pushNotification';
+import PopUp from '@/components/mobile/PopUp';
 
 export default function MobileMain() {
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
@@ -19,6 +20,7 @@ export default function MobileMain() {
     items: [],
   });
   const [searchQuery, setSearchQuery] = useState('');
+  const [showPopUp, setShowPopUp] = useState<boolean>(false);
   const router = useRouter();
 
   const fetchWelfareItems = async () => {
@@ -47,6 +49,11 @@ export default function MobileMain() {
     fetchWelfareItems();
 
     requestNotificationPermission();
+
+    // "다시 보지 않기" 플래그가 없으면 팝업 표시
+    if (!localStorage.getItem('popUpDismissed')) {
+      setShowPopUp(true);
+    }
   }, []);
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -103,6 +110,19 @@ export default function MobileMain() {
         </section>
       </div>
 
+      {showPopUp && (
+        <PopUp
+          title="🚨 변경사항 안내 🚨"
+          content={`물품 대여 신청은 현재 시간으로부터
+        5분 후에 가능합니다.\n(16시 55분부터는 즉시 신청이 가능합니다.)`}
+          onClickCta={() => setShowPopUp(false)}
+          onClickOther={() => {
+            localStorage.setItem('popUpDismissed', 'true');
+            setShowPopUp(false);
+          }}
+        />
+      )}
+
       {/* Bottom Sheet */}
       <BottomSheet
         isOpen={isBottomSheetOpen}

src/components/mobile/BottomSheet/index.tsx

@@ -119,11 +119,32 @@ export default function BottomSheet({
       0,
     );
 
+    // 점심 시간
+    const lunchOpenTime = new Date(
+      now.getFullYear(),
+      now.getMonth(),
+      now.getDate(),
+      12,
+      0,
+    );
+    const lunchCloseTime = new Date(
+      now.getFullYear(),
+      now.getMonth(),
+      now.getDate(),
+      12,
+      59,
+    );
+
     // 운영시간: 10:00 ~ 17:00
     if (inputTime < openTime || inputTime > closeTime) {
       return '대여 가능한 시간은 10:00 ~ 17:00입니다.';
     }
 
+    // 점심시간: 12:00 ~ 12:59
+    if (inputTime >= lunchOpenTime && inputTime < lunchCloseTime) {
+      return '12:00 ~ 12:59은 점심시간입니다.';
+    }
+
     // 입력 시간이 현재 시간보다 이후인지 체크
     if (inputTime <= now) {
       return '대여는 현재 시간 이후로만 가능합니다.';

src/components/mobile/PopUp/index.tsx

@@ -0,0 +1,66 @@
+import { handleTouchStart, handleTouchEnd } from '@/utils/handleTouch';
+
+interface PopUpProps {
+  title: string; // PopUp창 제목
+  content: string; // PopUp창 내용
+  ctaButtonText?: string; // 오른쪽 버튼에 들어갈 문구
+  otherButtonText?: string; // 왼쪽 버튼에 들어갈 문구
+  onClickCta?: () => void; // 오른쪽 버튼을 눌렀을 때 실행될 함수
+  onClickOther?: () => void; // 왼쪽 버튼을 눌렀을 때 실행될 함수
+}
+
+export default function PopUp({
+  title,
+  content,
+  ctaButtonText = '확인',
+  otherButtonText = '다시 보지 않기',
+  onClickCta,
+  onClickOther,
+}: PopUpProps) {
+  const defalutButtonClass =
+    'text-body-1-normal_semi w-[108px] rounded-[10px] py-[9px] font-medium outline-none ';
+
+  return (
+    <div className="fixed inset-0 z-20 flex items-center justify-center">
+      {/* 반투명한 검정 배경 */}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <div
+        className="absolute inset-0 bg-black bg-opacity-50"
+        onClick={onClickCta} // 배경 클릭 시 닫히도록 설정
+      />
+
+      <div className="relative flex w-[275px] flex-col gap-2.5 rounded-[20px] bg-white-primary p-5">
+        <div className="flex flex-col gap-2.5 py-5 text-center">
+          {/* 제목 */}
+          <div className="text-body-1-normal_semi font-semibold">{title}</div>
+          {/* 문구 */}
+          <div className="whitespace-pre-line text-caption-1_midi font-medium text-gray-primary">
+            {content}
+          </div>
+        </div>
+
+        {/* 버튼 2개(서브 버튼 / 메인 버튼) */}
+        <div className="flex justify-between gap-5">
+          <button
+            type="button"
+            onClick={onClickOther}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+            className={`${defalutButtonClass} bg-gray-tertiary text-gray-secondary transition-all`}
+          >
+            {otherButtonText}
+          </button>
+          <button
+            type="button"
+            onClick={onClickCta}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+            className={` ${defalutButtonClass} bg-return-blue text-white-primary`}
+          >
+            {ctaButtonText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}