✨ feat: 알림 모달창 구현

.gitignore

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

package.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": {

src/components/common/NotificationModal/NotificationCard.tsx

@@ -0,0 +1,35 @@
+import type { NotificationCardProps } from '@/types/notification';
+import calculateTimeDifference from '@/utils/calculateTimeDefference';
+import formatWorkTime from '@/utils/formatWorkTime';
+
+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-1 md:w-[328px] py-4 px-3 bg-white border border-gray-20 rounded-[5px] ">
+      {status === 'accepted' ? (
+        <div className="w-[5px] h-[5px] rounded-full bg-blue-20"></div>
+      ) : (
+        <div className="w-[5px] h-[5px] rounded-full bg-red-20"></div>
+      )}
+      <h2 className="text-body2/[22px] font-regular">
+        {restaurantName} ({formattedTime}) 공고 지원이{' '}
+        <span className={formattedStatusClass}>{formattedStatus}</span>
+        되었어요.
+      </h2>
+      <p className="text-caption/4 text-gray-40">{formattedCreatedAt}</p>
+    </div>
+  );
+}

src/components/common/NotificationModal/NotificationModal.tsx

@@ -0,0 +1,30 @@
+import { useNavigate } from 'react-router-dom';
+import NotificationCard from './NotificationCard';
+import type { NotificationModalProps } from '@/types/notification';
+import close from '@/assets/icons/ic_close.svg';
+
+export default function NotificationModal({ data, count }: NotificationModalProps) {
+  const navigate = useNavigate();
+  return (
+    <div className="flex flex-col px-5 py-10 bg-red-10 gap-4 h-screen md:py-6 md:border-1 md:border-gray-30 md:rounded-[10px] md:shadow-custom md:h-[420px] md:w-[368px]">
+      <div className="flex justify-between items-center">
+        <h1 className="text-h3 font-bold">알림 {count}개</h1>
+        <button onClick={()=> navigate(-1)} className="cursor-pointer md:hidden">
+          <img src={close} alt="닫기" />
+        </button>
+      </div>
+      <div className="flex flex-col gap-2 overflow-y-auto scrollbar-hide">
+        {data.map((data, index) => (
+          <NotificationCard
+            key={index}
+            status={data.item.result}
+            restaurantName={data.item.shop.item.name}
+            startsAt={data.item.notice.item.startsAt}
+            workHour={data.item.notice.item.workhour}
+            createdAt={data.item.createdAt}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/index.css

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

src/types/notification.ts

@@ -0,0 +1,31 @@
+export interface NotificationItem {
+  item: {
+    createdAt: string;
+    result: 'accepted' | 'rejected';
+    read: boolean;
+    shop: {
+      item: {
+        name: string;
+      };
+    };
+    notice: {
+      item: {
+        startsAt: string;
+        workhour: number;
+      };
+    };
+  };
+}
+
+export interface NotificationModalProps {
+  data: NotificationItem[];
+  count: number;
+}
+
+export interface NotificationCardProps {
+  status: 'accepted' | 'rejected';
+  restaurantName: string;
+  startsAt: string;
+  workHour: number;
+  createdAt: string;
+}

src/utils/calculateTimeDefference.ts

@@ -0,0 +1,25 @@
+export default function calculateTimeDifference(createdAt: string): string {
+  const currentDate = new Date();
+  const createdDate = new Date(createdAt);
+
+  const timeDifference = currentDate.getTime() - createdDate.getTime();
+  const minutes = Math.floor(timeDifference / (1000 * 60));
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(months / 12);
+
+  if (minutes < 1) {
+    return '방금';
+  } else if (minutes <= 59) {
+    return `${minutes}분 전`;
+  } else if (hours <= 23) {
+    return `${hours}시간 전`;
+  } else if (days <= 30) {
+    return `${days}일 전`;
+  } else if (months <= 11) {
+    return `${months}달 전`;
+  } else {
+    return `${years}년 전`;
+  }
+}

src/utils/formatWorkTime.ts

@@ -0,0 +1,22 @@
+interface workTime {
+  startsAt: string;
+  workHour: number;
+}
+
+export default function formatWorkTime({
+  startsAt,
+  workHour,
+}: workTime): string {
+  const date = new Date(startsAt);
+
+  const kstDate = new Date(date.getTime() + 9 * 60 * 60 * 1000);
+
+  const year = kstDate.getFullYear();
+  const month = String(kstDate.getMonth() + 1).padStart(2, '0');
+  const day = String(kstDate.getDate()).padStart(2, '0');
+  const hours = String(kstDate.getHours()).padStart(2, '0');
+  const afterhours = String(kstDate.getHours() + workHour).padStart(2, '0');
+  const minutes = String(kstDate.getMinutes()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}~${afterhours}:${minutes} `;
+}