design: 알림페이지 퍼블리싱 (#10)

* design: 알림 페이지 에셋 추가

* feat: 알림 아이콘 - 알림 페이지 라우팅 연결

* design: 경고 모달창 퍼블리싱

* design: 알림 페이지 퍼블리싱

* design: 페이지 상단 간격 수정

* refactor: 레이아웃 컴포넌트 구조 수정

Author: AAminha

src/App.tsx

@@ -1,7 +1,7 @@
 import { Route, Routes } from 'react-router';
 
 import useViewport from './hooks/useViewport';
-import Header from './layouts/Header';
+import Layout from './layouts/Layout';
 import Home from './pages/Home';
 import LetterBoardPage from './pages/LetterBoard';
 import LetterBoardDetailPage from './pages/LetterBoardDetail';
@@ -35,7 +35,7 @@ const App = () => {
           <Route path="letter/:id" element={<LetterBoardDetailPage />} />
           <Route path="rolling/:id" element={<RollingPaperPage />} />
         </Route>
-        <Route path="mypage" element={<Header />}>
+        <Route path="mypage" element={<Layout />}>
           <Route index element={<MyPage />} />
           <Route path="notifications" element={<NotificationsPage />} />
         </Route>

src/assets/icons/board.svg

@@ -1,5 +1,8 @@
 import AlarmIcon from './alarm.svg?react';
 import ArrowLeftIcon from './arrow-left.svg?react';
+import BoardIcon from './board.svg?react';
+import EnvelopeIcon from './envelope.svg?react';
 import PersonIcon from './person.svg?react';
+import SirenIcon from './siren.svg?react';
 
-export { AlarmIcon, PersonIcon, ArrowLeftIcon };
+export { AlarmIcon, PersonIcon, ArrowLeftIcon, SirenIcon, EnvelopeIcon, BoardIcon };

src/assets/icons/envelope.svg

@@ -21,7 +21,6 @@ const ConfirmModal = ({
   onCancel,
   onConfirm,
 }: ConfirmModalProps) => {
-  // TODO: 배경 이미지 삽입
   // TODO: 전역 상태로 관리해야하는지 고민
   return (
     <ModalOverlay>

src/assets/icons/index.ts

@@ -1,21 +1,20 @@
-import { Outlet } from 'react-router';
+import { Link } from 'react-router';
 
 import { AlarmIcon, ArrowLeftIcon, PersonIcon } from '@/assets/icons';
 
 const Header = () => {
   // TODO: 뒤로 가기 버튼이 보이는 조건 추가
   // TODO: 스크롤 발생 시, 어떻게 보여져야 하는지
   return (
-    <>
-      <header className="sticky top-0 flex items-center justify-between p-5">
-        <ArrowLeftIcon className="h-6 w-6 text-white" />
-        <div className="flex items-center gap-3">
+    <header className="sticky top-0 flex h-16 items-center justify-between p-5">
+      <ArrowLeftIcon className="h-6 w-6 text-white" />
+      <div className="flex items-center gap-3">
+        <Link to="/mypage/notifications">
           <AlarmIcon className="h-6 w-6 text-white" />
-          <PersonIcon className="h-6 w-6 text-white" />
-        </div>
-      </header>
-      <Outlet />
-    </>
+        </Link>
+        <PersonIcon className="h-6 w-6 text-white" />
+      </div>
+    </header>
   );
 };
 

src/assets/icons/message.svg

@@ -0,0 +1,14 @@
+import { Outlet } from 'react-router';
+
+import Header from './Header';
+
+const Layout = () => {
+  return (
+    <>
+      <Header />
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;