Merge pull request #23 from codeit-6team/feat/notification-modal

✨ feat: 알림 모달창 구현

Author: Yun-Jinwoo

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+mocks
 
 # Editor directories and files
 .vscode/*

package-lock.json

@@ -15,6 +15,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.1",
+    "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss": "^4.1.8"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,48 @@
+import calculateTimeDifference from '@/utils/calculateTimeDefference';
+import formatWorkTime from '@/utils/formatWorkTime';
+
+interface NotificationCardProps {
+  status: 'accepted' | 'rejected';              // 공고 지원 상태
+  restaurantName: string;                       // 음식점 이름 
+  startsAt: string;                             // 공고 시작 시간 (ISO 8601 문자열)
+  workHour: number;                             // 근무 시간 (시간 단위) 
+  createdAt: string;                            // 알림 생성 시간 (ISO 8601 문자열) 
+}
+
+/*
+ * 사용자가 공고에 지원한 결과를 알리는 알림 카드 컴포넌트입니다.
+ * 상태에 따라 '승인' 혹은 '거절'로 표시되며,
+ * 가게 이름과 알바 시간, 생성 시간을 보여줍니다.
+ */
+
+export default function NotificationCard({
+  status,
+  restaurantName,
+  startsAt,
+  workHour,
+  createdAt,
+}: NotificationCardProps) {
+  const formattedTime = formatWorkTime({
+    startsAt,
+    workHour,
+  });
+  const formattedCreatedAt = calculateTimeDifference(createdAt);
+  const formattedStatus = status === 'accepted' ? '승인' : '거절';
+  const formattedStatusClass =
+    status === 'accepted' ? 'text-blue-20' : 'text-red-20';
+  return (
+    <div className="flex flex-col gap-4 md:w-328 py-16 px-12 bg-white border border-gray-20 rounded-5 ">
+      {status === 'accepted' ? (
+        <div className="w-5 h-5 rounded-full bg-blue-20"></div>
+      ) : (
+        <div className="w-5 h-5 rounded-full bg-red-20"></div>
+      )}
+      <h2 className="text-body2/22 font-regular">
+        {restaurantName} ({formattedTime}) 공고 지원이{' '}
+        <span className={formattedStatusClass}>{formattedStatus}</span>
+        되었어요.
+      </h2>
+      <p className="text-caption/16 text-gray-40">{formattedCreatedAt}</p>
+    </div>
+  );
+}

src/assets/icons/.gitkeep

@@ -0,0 +1,57 @@
+import { useNavigate } from 'react-router-dom';
+import NotificationCard from './NotificationCard';
+import close from '@/assets/icons/ic_close.svg';
+
+interface NotificationItem {
+  createdAt: string;                          // 생성 일시 (ISO 8601 문자열) 
+  result: 'accepted' | 'rejected';            // 결과 상태 
+  read: boolean;                              // 읽음 여부 
+  shop: {
+    item: {
+      name: string;                           // 가게 이름
+    };
+  };
+  notice: {
+    item: {
+      startsAt: string;                       // 근무 시작 시간 (ISO 8601 문자열) 
+      workhour: number;                       // 근무 시간 (시간 단위) 
+    };
+  };
+}
+interface NotificationModalProps {
+  data: NotificationItem[];                   // 알림 데이터 배열
+  count: number;                              // 알림 개수
+}
+
+/*
+ * 알림 모달 컴포넌트입니다.
+ * 알림 데이터들을 카드로 표시하며, 스크롤 가능합니다. 
+ * PC/Tablet에서는 모달 형식으로, 바깥을 클릭하거나 esc를 통해 창을 닫을 수 있습니다.
+ * 모바일에서는 닫기 버튼으로 창을 닫을 수 있습니다.
+ */
+
+export default function NotificationModal({ data, count }: NotificationModalProps) {
+  const navigate = useNavigate();
+  return (
+    <div className="flex flex-col px-20 py-40 bg-red-10 gap-16 h-screen md:py-24 md:border-4 md:border-gray-30 md:rounded-10 md:shadow-custom md:h-420 md:w-368">
+      <div className="flex justify-between items-center">
+        <h1 className="text-h3 font-bold">알림 {count}개</h1>
+        <button onClick={()=> navigate(-1)} className="md:hidden">
+          <img src={close} alt="닫기" />
+        </button>
+      </div>
+      <div className="flex flex-col gap-8 overflow-y-auto scrollbar-hide">
+        {data.map((data, index) => (
+          <NotificationCard
+            key={index}
+            status={data.result}
+            restaurantName={data.shop.item.name}
+            startsAt={data.notice.item.startsAt}
+            workHour={data.notice.item.workhour}
+            createdAt={data.createdAt}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/assets/icons/ic_close.svg

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@import 'tailwind-scrollbar-hide/v4';
 
 @font-face {
   font-family: 'SpoqaHanSansNeo-Regular';
@@ -96,5 +97,6 @@
   --text-body1: 16px;
   --text-body2: 14px;
   --text-caption: 12px;
+  --shadow-custom: 0px 2px 8px 0px rgba(120, 116, 134, 0.25);
   --spacing: 0.0625rem;
 }