Merge pull request #38 from erica0321/feature/notifications

[기능] 알림 페이지 추가

src/app/components/(layout)/Header.tsx

@@ -15,9 +15,10 @@ export default function Header() {
   const isNew = path.includes('/new')
   const isComment = path.includes('/comments')
   const isAddRegion = path.includes('/add-region')
+  const isNoti = path.includes('/notifications')
   const [isSearch, setIsSearch] = useState(false)
 
-  if (isLogin || isNew || isComment || isAddRegion) return null
+  if (isLogin || isNew || isComment || isAddRegion || isNoti) return null
 
   return (
     <header className='max-w-[375px] relative bg-white w-full h-[55px] pr-[10px] min-h-[55px] flex justify-between items-center border-b-[1px] border-b-header-line'>

src/app/notifications/components/NotificationItem.tsx

@@ -0,0 +1,67 @@
+import { Notification, NOTIFICATION_TYPE } from '../types'
+import { MessageCircle, UserRound, SquareGanttChart } from 'lucide-react'
+import Image from 'next/image'
+import courseColor from '@images/course_color.png'
+import logo from '@images/logo.png'
+
+export default function NotificationItem({
+  notification,
+}: {
+  notification: Notification
+}) {
+  const iconMap: Record<keyof typeof NOTIFICATION_TYPE, React.ReactNode> = {
+    [NOTIFICATION_TYPE.comment]: (
+      <MessageCircle fill='#5A59F2' stroke='#5A59F2' strokeWidth={1.5} />
+    ),
+    [NOTIFICATION_TYPE.plan_review]: (
+      <SquareGanttChart stroke='#5A59F2' strokeWidth={1.5} />
+    ),
+    [NOTIFICATION_TYPE.plan_writing]: (
+      <UserRound stroke='#5A59F2' strokeWidth={1.5} />
+    ),
+    [NOTIFICATION_TYPE.share_course]: (
+      <Image src={courseColor} alt='course' width={20} height={20} />
+    ),
+    [NOTIFICATION_TYPE.wooco]: (
+      <Image src={logo} alt='logo' width={20} height={20} />
+    ),
+  }
+
+  const messageMap: Record<keyof typeof NOTIFICATION_TYPE, string> = {
+    [NOTIFICATION_TYPE.comment]: '새로운 댓글이 달렸어요.',
+    [NOTIFICATION_TYPE.plan_review]: '코스로 공유할 플랜이 기다리고 있어요.',
+    [NOTIFICATION_TYPE.plan_writing]: '플랜 어떠셨어요? 장소 리뷰 남겨주세요.',
+    [NOTIFICATION_TYPE.share_course]: '혹시 플랜 작성 중이신가요?',
+    [NOTIFICATION_TYPE.wooco]: 'Wooco 메시지',
+  }
+
+  const contentMap: Record<keyof typeof NOTIFICATION_TYPE, string> = {
+    [NOTIFICATION_TYPE.comment]: `[${notification.content}]님이 회원님의 코스에 댓글을 달았어요!`,
+    [NOTIFICATION_TYPE.plan_review]: `[${notification.content}]가 좋았다면 사람들에게 공유해주세요!`,
+    [NOTIFICATION_TYPE.plan_writing]: `[${notification.content}]에 대한 장소 리뷰 기다리고 있어요!`,
+    [NOTIFICATION_TYPE.share_course]: `[${notification.content}]가 아직 완성되지 않았어요!`,
+    [NOTIFICATION_TYPE.wooco]: `${notification.content}`,
+  }
+
+  return (
+    <div className='w-full flex flex-col gap-[5px]'>
+      <div className='w-full flex gap-[9px] items-center'>
+        {iconMap[notification.type]}
+        <p className='text-sub opacity-80 font-semibold'>
+          {messageMap[notification.type]}
+        </p>
+      </div>
+      <div className='flex gap-[30px] items-center text-sub text-black opacity-80 w-full px-[20px] py-[15px] bg-light-gray rounded-[10px]'>
+        <span className='flex-1 break-keep'>
+          {contentMap[notification.type]}
+        </span>
+        <div className='w-[60px] flex flex-col justify-between items-end'>
+          <span className='text-sub text-black opacity-80'>N분전</span>
+          <span className='text-sub text-black opacity-80'>
+            {notification.createdAt}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/notifications/page.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { ChevronLeft } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import Spacer from '@components/(layout)/Spacer'
+import NotificationItem from './components/NotificationItem'
+import { Notification, NOTIFICATION_TYPE } from './types'
+
+const notifications: Notification[] = [
+  {
+    id: 1,
+    createdAt: '2024-01-01',
+    content: '일상 속 어디든지 나만의 경로로, 좋은 공간 함께 나누고 공유해요',
+    type: NOTIFICATION_TYPE.wooco,
+  },
+  {
+    id: 2,
+    createdAt: '2024-01-01',
+    content: '먹고 구경하고 먹고 강남 한바퀴!',
+    type: NOTIFICATION_TYPE.share_course,
+  },
+  {
+    id: 3,
+    createdAt: '2024-01-01',
+    content: '땀땀',
+    type: NOTIFICATION_TYPE.plan_writing,
+  },
+  {
+    id: 4,
+    createdAt: '2024-01-01',
+    content: '먹고 구경하고 먹고 강남 한바퀴!',
+    type: NOTIFICATION_TYPE.plan_review,
+  },
+  {
+    id: 5,
+    createdAt: '2024-01-01',
+    content: '바그준서',
+    type: NOTIFICATION_TYPE.comment,
+  },
+]
+
+export default function Page() {
+  const router = useRouter()
+  return (
+    <>
+      <header className='max-w-[375px] relative bg-white w-full h-[55px] px-[20px] min-h-[55px] flex justify-between items-center border-b-[1px] border-b-header-line'>
+        <button onClick={() => router.back()}>
+          <ChevronLeft size={24} color='black' strokeWidth={1.5} />
+        </button>
+        <p className='font-semibold text-[17px]'>알림</p>
+        <div className='w-[24px] h-[24px]'></div>
+      </header>
+      <Spacer height={20} />
+      <div className='px-[20px] gap-[20px] w-full flex flex-col justify-between'>
+        {[...notifications].reverse().map((notification) => (
+          <NotificationItem key={notification.id} notification={notification} />
+        ))}
+      </div>
+    </>
+  )
+}

src/app/notifications/types.ts

@@ -0,0 +1,14 @@
+export interface Notification {
+  id: number
+  createdAt: string
+  content: string
+  type: keyof typeof NOTIFICATION_TYPE
+}
+
+export const NOTIFICATION_TYPE = {
+  comment: 'comment' as const,
+  plan_review: 'plan_review' as const,
+  plan_writing: 'plan_writing' as const,
+  share_course: 'share_course' as const,
+  wooco: 'wooco' as const,
+}