[Feat/#20] 사용자 / 관리자 알림 페이지 퍼블리싱

src/app/globals.css

@@ -3,7 +3,6 @@
 @tailwind utilities;
 
 :root {
-
   @media (prefers-color-scheme: dark) {
     :root {
       --background: #0a0a0a;

src/app/mobile/admin/notification/page.tsx

@@ -0,0 +1,53 @@
+import MobileLayout from '@/components/mobile/layout';
+import NotificationItem from '@/components/mobile/NotificationItem';
+import Header from '@/components/mobile/Header';
+import { elapsedTime } from '@/utils/elapsedTime';
+import { NotificationProps } from '@/types/notificationType';
+
+const NotificationDetail: AdminNotificationType[] = [
+  {
+    notificationId: 0,
+    message: '메시지 1입니다',
+    link: '/desktop/login',
+    isRead: false,
+    status: 'ADMIN_RENTAL_APPLY',
+    createdAt: '2025-02-16T08:44:45.476Z',
+  },
+  {
+    notificationId: 1,
+    message: '메시지 2입니다',
+    link: '/mobile',
+    isRead: true,
+    status: 'ADMIN_RENTAL_CANCEL',
+    createdAt: '2025-02-16T06:44:45.476Z',
+  },
+  {
+    notificationId: 2,
+    message:
+      '메시지 두 줄 테스트입니다 두 줄 테스트 두 줄 테스트 두 줄 테스트 두 줄 테스트',
+    link: '/mobile',
+    isRead: true,
+    status: 'ADMIN_RETURN_APPLY',
+    createdAt: '2025-02-12T05:44:45.476Z',
+  },
+];
+
+type AdminNotificationType = NotificationProps;
+
+export default function Notification() {
+  return (
+    <MobileLayout>
+      <Header title="관리자 알림" />
+      {NotificationDetail.map((item) => (
+        <NotificationItem
+          key={item.notificationId}
+          message={item.message}
+          link={item.link}
+          isRead={item.isRead}
+          status={item.status}
+          createdAt={elapsedTime(item.createdAt)}
+        />
+      ))}
+    </MobileLayout>
+  );
+}

src/app/mobile/notification/page.tsx

@@ -0,0 +1,53 @@
+import MobileLayout from '@/components/mobile/layout';
+import NotificationItem from '@/components/mobile/NotificationItem';
+import Header from '@/components/mobile/Header';
+import { elapsedTime } from '@/utils/elapsedTime';
+import { NotificationProps } from '@/types/notificationType';
+
+const NotificationDetail: UserNotificationType[] = [
+  {
+    notificationId: 0,
+    message: '메시지 1입니다',
+    link: '/desktop/login',
+    isRead: false,
+    status: 'USER_RENTAL_APPLY',
+    createdAt: '2025-02-16T08:44:45.476Z',
+  },
+  {
+    notificationId: 1,
+    message: '메시지 2입니다',
+    link: '/mobile',
+    isRead: true,
+    status: 'USER_RENTAL_REJECTED',
+    createdAt: '2025-02-16T06:44:45.476Z',
+  },
+  {
+    notificationId: 2,
+    message:
+      '메시지 두 줄 테스트입니다 두 줄 테스트 두 줄 테스트 두 줄 테스트 두 줄 테스트',
+    link: '/mobile',
+    isRead: true,
+    status: 'USER_RETURN_APPLY',
+    createdAt: '2025-02-12T05:44:45.476Z',
+  },
+];
+
+type UserNotificationType = NotificationProps;
+
+export default function Notification() {
+  return (
+    <MobileLayout>
+      <Header title="알림" />
+      {NotificationDetail.map((item) => (
+        <NotificationItem
+          key={item.notificationId}
+          message={item.message}
+          link={item.link}
+          isRead={item.isRead}
+          status={item.status}
+          createdAt={elapsedTime(item.createdAt)}
+        />
+      ))}
+    </MobileLayout>
+  );
+}

src/components/mobile/Header/index.tsx

@@ -13,15 +13,15 @@ export default function Header({ title, menu = false }: HeaderProps) {
   const router = useRouter();
 
   return (
-    <section className="flex h-8 w-full items-center justify-between px-4 py-1.5">
+    <section className="h-8.5 flex w-full items-center justify-between px-4 py-1.5">
       <button
         className="h-6 w-6 items-center justify-center"
         type="button"
         onClick={() => router.back()}
       >
         <IconArrow />
       </button>
-      <div className="font-medium text-black-primary">{title}</div>
+      <div className="font-medium leading-6 text-black-primary">{title}</div>
       {menu ? (
         <button
           className="h-6 w-6 items-center justify-center"

src/components/mobile/NotificationItem/index.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+import {
+  AdminNotificationText,
+  AdminNotificationTypes,
+  UserNotificationText,
+} from '@/constants/notificationStatus';
+import { NotificationProps } from '@/types/notificationType';
+import IconBell from 'public/assets/icon-bell.svg';
+
+export default function NotificationItem({
+  message,
+  link,
+  isRead,
+  status,
+  createdAt,
+}: NotificationProps) {
+  const isAdminStatus = (
+    notificationStatus: string,
+  ): notificationStatus is AdminNotificationTypes =>
+    notificationStatus.startsWith('ADMIN');
+
+  return (
+    <Link className="w-full" href={link}>
+      <section
+        className={cn(
+          'flex w-full gap-2.5 p-5',
+          isRead ? '' : 'bg-main-tertiary',
+        )}
+      >
+        <div className="flex h-4 w-4">
+          <IconBell />
+        </div>
+
+        <section className="flex w-full flex-col items-start gap-2.5 text-sm font-medium">
+          <section className="flex w-full justify-between text-xs">
+            <div
+              className={cn(
+                'font-medium',
+                /REJECTED|CANCEL/.test(status)
+                  ? 'text-return-red'
+                  : 'text-return-blue',
+              )}
+            >
+              {isAdminStatus(status)
+                ? AdminNotificationText[status]
+                : UserNotificationText[status]}
+            </div>
+            <div className="font-medium text-gray-secondary">{createdAt}</div>
+          </section>
+          {message}
+        </section>
+      </section>
+    </Link>
+  );
+}

src/constants/notificationStatus.ts

@@ -0,0 +1,38 @@
+export const ADMIN_NOTIFICATION_STATUS = {
+  ADMIN_RENTAL_APPLY: 'ADMIN_RENTAL_APPLY',
+  ADMIN_RENTAL_CANCEL: 'ADMIN_RENTAL_CANCEL',
+  ADMIN_RETURN_APPLY: 'ADMIN_RETURN_APPLY',
+  ADMIN_RETURN_CANCEL: 'ADMIN_RETURN_CANCEL',
+} as const;
+
+export const USER_NOTIFICATION_STATUS = {
+  USER_RENTAL_APPLY: 'USER_RENTAL_APPLY',
+  USER_RENTAL_APPROVED: 'USER_RENTAL_APPROVED',
+  USER_RENTAL_REJECTED: 'USER_RENTAL_REJECTED',
+  USER_RETURN_APPLY: 'USER_RETURN_APPLY',
+  USER_RETURN_COMPLETED: 'USER_RETURN_COMPLETED',
+} as const;
+
+export type AdminNotificationStatus =
+  (typeof ADMIN_NOTIFICATION_STATUS)[keyof typeof ADMIN_NOTIFICATION_STATUS];
+
+export type UserNotificationStatus =
+  (typeof USER_NOTIFICATION_STATUS)[keyof typeof USER_NOTIFICATION_STATUS];
+
+export const AdminNotificationText: Record<AdminNotificationStatus, string> = {
+  [ADMIN_NOTIFICATION_STATUS.ADMIN_RENTAL_APPLY]: '대여 신청',
+  [ADMIN_NOTIFICATION_STATUS.ADMIN_RENTAL_CANCEL]: '대여 취소',
+  [ADMIN_NOTIFICATION_STATUS.ADMIN_RETURN_APPLY]: '반납 신청',
+  [ADMIN_NOTIFICATION_STATUS.ADMIN_RETURN_CANCEL]: '반납 취소',
+} as const;
+
+export const UserNotificationText: Record<UserNotificationStatus, string> = {
+  [USER_NOTIFICATION_STATUS.USER_RENTAL_APPLY]: '대여 신청',
+  [USER_NOTIFICATION_STATUS.USER_RENTAL_APPROVED]: '대여 승인',
+  [USER_NOTIFICATION_STATUS.USER_RENTAL_REJECTED]: '대여 반려',
+  [USER_NOTIFICATION_STATUS.USER_RETURN_APPLY]: '반납 신청',
+  [USER_NOTIFICATION_STATUS.USER_RETURN_COMPLETED]: '반납 완료',
+} as const;
+
+export type AdminNotificationTypes = keyof typeof AdminNotificationText;
+export type UserNotificationTypes = keyof typeof UserNotificationText;

src/types/notificationType.ts

@@ -0,0 +1,13 @@
+import {
+  AdminNotificationStatus,
+  UserNotificationStatus,
+} from '@/constants/notificationStatus';
+
+export interface NotificationProps {
+  notificationId?: number;
+  message: string;
+  link: string;
+  isRead: boolean;
+  status: AdminNotificationStatus | UserNotificationStatus;
+  createdAt: string;
+}

src/utils/elapsedTime.ts

@@ -0,0 +1,18 @@
+export const elapsedTime = (date: string): string => {
+  const start = new Date(date);
+  const end = new Date();
+
+  const seconds = Math.floor((end.getTime() - start.getTime()) / 1000);
+  if (seconds < 60) return '방금 전';
+
+  const minutes = seconds / 60;
+  if (minutes < 60) return `${Math.floor(minutes)}분 전`;
+
+  const hours = minutes / 60;
+  if (hours < 24) return `${Math.floor(hours)}시간 전`;
+
+  const days = hours / 24;
+  if (days < 7) return `${Math.floor(days)}일 전`;
+
+  return start.toLocaleDateString(); // 날짜를 'yyyy-MM-dd' 형식으로 반환
+};

tailwind.config.ts

@@ -23,9 +23,9 @@ export default {
         'white-primary': '#FAFAFA',
         'return-red': '#CC2E2E',
         'return-blue': '#5294FF',
-        'main-primary': '#2E5ACC',
-        'main-secondary': '#899FD8',
-        'main-tertiary': '#C0C9E0',
+        'main-primary': '#899FD8',
+        'main-secondary': '#C0C9E0',
+        'main-tertiary': '#ECF4FF',
         'gray-primary': '#37393C',
         'gray-secondary': '#898C8E',
         'gray-tertiary': '#F2F1F1',