166 feat 지도 편지 페이지 컴포넌트 수정 및 라우팅 (#167)

* chore : DayCounter 컴포넌트 수정

* chore : LetterInfoContainer 컴포넌트 수정

* chore :NavigateContainer 컴포넌트 수정

src/components/Common/DayCounter/DayCounter.stories.tsx

@@ -13,5 +13,7 @@ export default meta;
 type Story = StoryObj<typeof DayCounter>;
 
 export const Default: Story = {
-    args: {}
+    args: {
+        daysLeft: 21
+    }
 };

src/components/Common/DayCounter/DayCounter.tsx

@@ -1,20 +1,22 @@
 type DayCounterProps = {
     width?: string;
     height?: string;
+    daysLeft: number;
 };
 
 export const DayCounter = ({
     width = '66px',
-    height = '43px'
+    height = '30px',
+    daysLeft
 }: DayCounterProps) => {
-    const daysLeft = 21;
-
     return (
         <div
-            className="flex-center p-4 bg-gray-200 rounded-3xl"
+            className="flex-center p-1 bg-gray-100 rounded-xl"
             style={{ width, height }}
         >
-            <span className="font-bold text-m text-gray-500">D-{daysLeft}</span>
+            <span className="font-bold text-xs text-gray-500 text-nowrap">
+                D-{daysLeft}
+            </span>
         </div>
     );
 };

src/components/MapPage/LetterInfoContainer/LetterInfoContainer.stories.tsx

@@ -14,11 +14,10 @@ type Story = StoryObj<typeof LetterInfoContainer>;
 
 export const Default: Story = {
     args: {
+        id: 123,
         title: '익명 편지',
-        keyword: '가을 바람',
+        distance: 400,
         date: '24.11.15',
-        clickEvent: () => {
-            alert('즐겁다');
-        }
+        daysLeft: 21
     }
 };

src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx

@@ -1,37 +1,47 @@
+import { DayCounter } from '@/components/Common/DayCounter/DayCounter';
 import React from 'react';
+import { NavLink } from 'react-router-dom';
 
 interface LetterInfoContainerProps {
+    id: number;
     title: string;
-    keyword: string;
+    distance: number;
     date: string;
-    clickEvent: () => void;
+    daysLeft: number;
 }
 
 export const LetterInfoContainer = ({
+    id,
     title,
-    keyword,
+    distance,
     date,
-    clickEvent
+    daysLeft
 }: LetterInfoContainerProps) => {
     return (
         <div className="flex flex-col w-[330px] bg-gray-200 rounded-lg p-4 shadow-md">
             <div className="flex gap-4 mb-4">
                 <div className="p-2 bg-gray-300 rounded-md">
                     <img src="/bottle.png" alt="Bottle" className="w-20 h-20" />
                 </div>
-                <div className="flex flex-col justify-between h-20">
+                <div className="flex flex-col h-20">
+                    <div className="flex-center gap-2">
+                        <p className="text-sm text-gray-600">작성일: {date}</p>
+                        <DayCounter width="40px" daysLeft={daysLeft} />
+                    </div>
+
                     <h3 className="text-lg font-semibold">{title}</h3>
-                    <p className="text-sm text-gray-600">키워드: {keyword}</p>
-                    <p className="text-sm text-gray-600">작성일: {date}</p>
+                    <p className="text-sm text-gray-600">
+                        현재 위치에서 {distance}m
+                    </p>
                 </div>
             </div>
 
-            <button
+            <NavLink
+                to={`/letter/map/:${id}`}
                 className="w-full py-2 text-center text-gray-700 bg-gray-300 rounded-lg hover:bg-gray-400"
-                onClick={clickEvent}
             >
                 편지 보러가기
-            </button>
+            </NavLink>
         </div>
     );
 };

src/components/MapPage/NavigateContainer/NavigateContainer.stories.tsx

@@ -14,11 +14,6 @@ type Story = StoryObj<typeof NavigateContainer>;
 
 export const Default: Story = {
     args: {
-        title: '가을 바람',
-        distance: '15km',
-        count: 4,
-        clickEvent: () => {
-            alert('헬로');
-        }
+        count: 4
     }
 };

src/components/MapPage/NavigateContainer/NavigateContainer.tsx

@@ -1,44 +1,17 @@
 import React from 'react';
 
 interface NavigateContainerProps {
-    title: string;
-    distance: string;
     count: number;
-    clickEvent: () => void;
 }
 
 export const NavigateContainer: React.FC<NavigateContainerProps> = ({
-    title,
-    distance,
-    count,
-    clickEvent
+    count
 }) => {
     return (
-        <div className="flex items-center justify-between bg-gray-200 rounded-2xl shadow-md w-[350px] p-4">
-            <div className="flex items-center gap-4 overflow-hidden">
-                <div className="px-6 py-4 text-sm text-gray-700 bg-gray-300 rounded-full w-[120px] text-center overflow-hidden whitespace-nowrap box-border text-ellipsis">
-                    {title}
-                </div>
-                <p className="overflow-hidden text-sm text-gray-700 whitespace-nowrap text-ellipsis  w-[140px]">
-                    반경 {distance} 내 {count}개
-                </p>
-                <button onClick={clickEvent}>
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        strokeWidth={2}
-                        stroke="currentColor"
-                        className="text-gray-700 w-7 h-7"
-                    >
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            d="M9 5l7 7-7 7"
-                        />
-                    </svg>
-                </button>
-            </div>
+        <div className="flex-center bg-gray-200 rounded-2xl shadow-md w-[300px] p-2">
+            <p className="text-lg font-bold text-gray-700  ">
+                반경 500m 내 {count}개
+            </p>
         </div>
     );
 };