feat : 편지 상세보기 페이지 개발 완료 (#107)

src/components/LetterDetailPage/KeywordLetterDetail.tsx

@@ -0,0 +1,26 @@
+type KeywordLetterDetailProps = {
+    content: string;
+    keywords: string[];
+    date: string;
+};
+
+export const KeywordLetterDetail = ({
+    content,
+    keywords,
+    date
+}: KeywordLetterDetailProps) => {
+    return (
+        <>
+            <p className="absolute left-24 top-[19rem]">{content}</p>
+            <div className="absolute bottom-16 rounded-lg w-[580px] h-[100px] bg-gray-300">
+                <p className="font-bold m-4">편지의 키워드</p>
+                <p className="overflow-hidden whitespace-nowrap text-ellipsis m-4">
+                    {keywords.join(' / ')}
+                </p>
+            </div>
+            <div className="absolute bottom-8 translate-x-60 flex-col">
+                <p className="ml-2">{date}</p>
+            </div>
+        </>
+    );
+};

src/components/LetterDetailPage/MapLetterDetail.tsx

@@ -0,0 +1,28 @@
+import { ProfileImage } from '@/components/Common/ProfileImage/ProfileImage';
+import { DayCounter } from '@/components/Common/DayCounter/DayCounter';
+
+type MapLetterDetailProps = {
+    title: string;
+    content: string;
+    date: string;
+};
+
+export const MapLetterDetail = ({
+    title,
+    content,
+    date
+}: MapLetterDetailProps) => {
+    return (
+        <>
+            <div className="absolute bottom-4 translate-x-40">
+                <ProfileImage width="50px" height="50px" />
+            </div>
+            <p className="absolute left-24 top-60">{title}</p>
+            <p className="absolute left-24 top-[19rem]">{content}</p>
+            <div className="absolute bottom-4 translate-x-60 flex-col">
+                <p className="ml-2">{date}</p>
+                <DayCounter width="70px" height="20px" />
+            </div>
+        </>
+    );
+};

src/pages/Letter/Detail/LetterDetailPage.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { LetterDetailPage } from './LetterDetailPage';
+import { Route, Routes, MemoryRouter } from 'react-router-dom';
+
+const meta: Meta<typeof LetterDetailPage> = {
+    component: LetterDetailPage,
+    title: 'Pages/LetterDetailPage',
+    tags: ['autodocs']
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LetterDetailPage>;
+
+export const MapLetter: Story = {
+    args: {},
+    decorators: [
+        (Story) => {
+            return (
+                <MemoryRouter initialEntries={['/letter/map/123']}>
+                    <Routes>
+                        <Route path="/letter/:type/:id" element={<Story />} />
+                    </Routes>
+                </MemoryRouter>
+            );
+        }
+    ]
+};
+
+export const KeywordLetter: Story = {
+    args: {},
+    decorators: [
+        (Story) => {
+            return (
+                <MemoryRouter initialEntries={['/letter/keyword/456']}>
+                    <Routes>
+                        <Route path="/letter/:type/:id" element={<Story />} />
+                    </Routes>
+                </MemoryRouter>
+            );
+        }
+    ]
+};

src/pages/Letter/Detail/LetterDetailPage.tsx

@@ -0,0 +1,79 @@
+import { BackButton } from '@/components/Common/BackButton/BackButton';
+import { useNavigate } from 'react-router-dom';
+import { MapLetterDetail } from '@/components/LetterDetailPage/MapLetterDetail';
+import { KeywordLetterDetail } from '@/components/LetterDetailPage/KeywordLetterDetail';
+import { useParams } from 'react-router-dom';
+
+export const LetterDetailPage = () => {
+    const { type, id } = useParams<{ type: 'map' | 'keyword'; id: string }>();
+    console.log(type, id);
+    const imageItem = {
+        id: '편지지_샘플_1',
+        name: '이미지',
+        src: '/편지지_샘플_1.png'
+    };
+    const labelItem = {
+        id: '라벨_샘플',
+        name: '이미지',
+        src: '/라벨_샘플.png'
+    };
+    const sampleKeywords = [
+        '키워드',
+        '베리 롱 롱 키워드',
+        '베리 롱 키워드',
+        '키워드',
+        '키워드',
+        '베리 롱 키워드',
+        '키워드',
+        '키워드'
+    ];
+    const navigate = useNavigate();
+
+    const handleBackClick = () => {
+        navigate(-1);
+    };
+
+    return (
+        <>
+            <div className="mt-4 mx-auto max-w">
+                <div className="ml-6">
+                    <BackButton onClick={handleBackClick} />
+                </div>
+                <div className="mt-4 flex-center relative">
+                    <img
+                        src={imageItem.src}
+                        alt={imageItem.name}
+                        className="w-[710.72px] h-[900px] relative"
+                    />
+                    <img
+                        src={labelItem.src}
+                        alt={labelItem.name}
+                        className="absolute top-4 translate-x-40 w-[125.32px] h-[201.1px]"
+                    />
+                    {type === 'map' ? (
+                        <MapLetterDetail
+                            title="편지제목"
+                            content="편지내용"
+                            date="24.11.18"
+                        />
+                    ) : (
+                        <KeywordLetterDetail
+                            content="편지내용"
+                            keywords={sampleKeywords}
+                            date="24.11.18"
+                        />
+                    )}
+                </div>
+            </div>
+
+            <div className="mt-4 flex-center mx-auto max-w gap-4">
+                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
+                    보관하기
+                </button>
+                <button className="btn-base rounded-3xl w-[339.82px] h-[80px]">
+                    답장하기
+                </button>
+            </div>
+        </>
+    );
+};

src/pages/index.tsx

@@ -7,7 +7,7 @@ import { LoginPage } from '@/pages/LoginPage';
 import { RegisterPage } from '@/pages/RegisterPage';
 import { ArchivedPage } from '@/pages/ArchivedPage';
 import { LabelCollectionsPage } from '@/pages/LabelCollectionsPage';
-import { LetterDetailPage } from '@/pages/LetterDetailPage';
+import { LetterDetailPage } from '@/pages/Letter/Detail/LetterDetailPage';
 import { NotificationPage } from '@/pages/NotificationPage';
 import { SentPage } from '@/pages/SentPage';
 import { SharePage } from '@/pages/SharePage';

src/router.tsx

@@ -57,10 +57,6 @@ export const router = createBrowserRouter([
                 path: '/labelcollections',
                 element: <LabelCollectionsPage />
             },
-            {
-                path: '/letter/:id',
-                element: <LetterDetailPage />
-            },
             {
                 path: '/notification',
                 element: <NotificationPage />
@@ -82,5 +78,9 @@ export const router = createBrowserRouter([
     {
         path: '/register',
         element: <RegisterPage />
+    },
+    {
+        path: '/letter/:type/:id',
+        element: <LetterDetailPage />
     }
 ]);