design: 마이페이지 중 내가 올린 게시물 페이지 퍼블리싱

Author: AAminha

src/App.tsx

@@ -31,12 +31,15 @@ const App = () => {
           <Route path=":id" element={<LetterDetailPage />} />
         </Route>
         <Route path="board">
-          <Route path="letter" element={<LetterBoardPage />} />
+          <Route element={<Layout />}>
+            <Route path="rolling/:id" element={<RollingPaperPage />} />
+            <Route path="letter" element={<LetterBoardPage />} />
+          </Route>
           <Route path="letter/:id" element={<LetterBoardDetailPage />} />
-          <Route path="rolling/:id" element={<RollingPaperPage />} />
         </Route>
         <Route path="mypage" element={<Layout />}>
           <Route index element={<MyPage />} />
+          <Route path="board" element={<LetterBoardPage />} />
           <Route path="notifications" element={<NotificationsPage />} />
         </Route>
       </Route>

src/components/NoticeRolling.tsx

@@ -1,3 +1,4 @@
+import { Link } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 
 import { NoticeIcon } from '@/assets/icons';
@@ -7,16 +8,18 @@ const DUMMY_CONTENT =
 
 const NoticeRolling = () => {
   return (
-    <article
-      className={twMerge(
-        'text-gray-60 flex w-full items-center gap-2.5 rounded-lg px-4 py-2',
-        'bg-linear-[275deg,rgba(255,255,255,0.4)_13.74%,rgba(238,238,238,0.4)_67.61%]',
-        'shadow-[0_1px_6px_rgba(218,189,74,0.8)]',
-      )}
-    >
-      <NoticeIcon className="h-6 w-6 text-gray-50" />
-      <p className="body-sb line-clamp-1">{DUMMY_CONTENT}</p>
-    </article>
+    <Link to="/board/rolling/1">
+      <article
+        className={twMerge(
+          'text-gray-60 flex w-full items-center gap-2.5 rounded-lg px-4 py-2',
+          'bg-linear-[275deg,rgba(255,255,255,0.4)_13.74%,rgba(238,238,238,0.4)_67.61%]',
+          'shadow-[0_1px_6px_rgba(218,189,74,0.8)]',
+        )}
+      >
+        <NoticeIcon className="h-6 w-6 text-gray-50" />
+        <p className="body-sb line-clamp-1">{DUMMY_CONTENT}</p>
+      </article>
+    </Link>
   );
 };
 

src/pages/LetterBoard/index.tsx

@@ -1,19 +1,33 @@
+import { twMerge } from 'tailwind-merge';
+
+import BackgroundBottom from '@/components/BackgroundBottom';
 import NoticeRolling from '@/components/NoticeRolling';
 import PageTitle from '@/components/PageTitle';
-import Header from '@/layouts/Header';
 
 import LetterPreview from './components/LetterPreview';
 
 const LetterBoardPage = () => {
+  const isMyBoard = window.location.pathname.includes('/mypage');
+
   return (
     <>
-      <Header />
-      <main className="mt-[-9px] flex grow flex-col items-center px-5 pb-10">
-        <NoticeRolling />
-        <PageTitle className="mt-4">게시판</PageTitle>
-        <p className="text-gray-60 caption-m mt-4.5">
-          따숨이에게 힘이 되었던 다양한 편지들을 모아두었어요
-        </p>
+      <main
+        className={twMerge(
+          'flex grow flex-col items-center px-5 pt-20 pb-10',
+          !isMyBoard && 'mt-[-25px]',
+        )}
+      >
+        {isMyBoard ? (
+          <PageTitle className="mb-11">내가 올린 게시물</PageTitle>
+        ) : (
+          <>
+            <NoticeRolling />
+            <PageTitle className="mt-4">게시판</PageTitle>
+            <p className="text-gray-60 caption-m mt-4.5">
+              따숨이에게 힘이 되었던 다양한 편지들을 모아두었어요
+            </p>
+          </>
+        )}
         <section className="mt-6 grid grid-cols-2 gap-x-5 gap-y-4">
           {Array.from({ length: 10 }).map((_, index) => (
             <LetterPreview
@@ -27,6 +41,7 @@ const LetterBoardPage = () => {
           ))}
         </section>
       </main>
+      <BackgroundBottom />
     </>
   );
 };

src/pages/MyPage/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Link } from 'react-router';
 
 import ConfirmModal from '@/components/ConfirmModal';
 
@@ -55,7 +56,9 @@ const MyPage = () => {
         <section className="flex flex-col gap-8">
           <div className="flex flex-col gap-2">
             <h3 className="text-gray-40 body-sb">활동</h3>
-            <p className="body-sb text-gray-100">내가 올린 게시물</p>
+            <Link to="board">
+              <p className="body-sb text-gray-100">내가 올린 게시물</p>
+            </Link>
           </div>
           <div className="flex flex-col gap-2">
             <h3 className="text-gray-40 body-sb">고객 센터</h3>