164 feat 지도 편지 페이지 2차 개발 (#170)

* chore : 스토리북 MemoryRouter 설정 * feat : 선택된 지도 편지 zustand * feat : 지도 편지 페이지 라우팅 및 페이지, 컴포넌트 수정 * chore : package.json * chore : color-name@npm 오류 해결 * chore : 스토리북 오류 해결 * chore : LetterContainer, MapLetterDetail 스토리북 오류 수정
prgrms-web-devcourse-final-project · Dec 2, 2024 · 4a46f1a · 4a46f1a
1 parent 3c253c1
commit 4a46f1a
Show file tree

Hide file tree

Showing 9 changed files with 1,519 additions and 1,435 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/src/components/HomePage/LetterContainer/LetterContainer.stories.tsx b/src/components/HomePage/LetterContainer/LetterContainer.stories.tsx
@@ -1,11 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { LetterContainer } from './LetterContainer';
+import { MemoryRouter } from 'react-router-dom';
 
 const meta: Meta<typeof LetterContainer> = {
     component: LetterContainer,
     title: 'molecule/LetterContainer',
     tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
     argTypes: {},
     parameters: {
         docs: {

diff --git a/src/components/LetterDetailPage/MapLetterDetail.tsx b/src/components/LetterDetailPage/MapLetterDetail.tsx
@@ -19,7 +19,11 @@ export const MapLetterDetail = ({
     return (
         <>
             <div className="absolute bottom-4 translate-x-40">
-                <ProfileImage width="50px" height="50px" />
+                <ProfileImage
+                    imageItem={{ id: '123', name: '가오리', src: '/라밸_샘플' }}
+                    width="50px"
+                    height="50px"
+                />
             </div>
             <p className="absolute left-24 top-60 font-bold">{title}</p>
             <p className="absolute left-24 top-[19rem]">{content}</p>
@@ -35,7 +39,7 @@ export const MapLetterDetail = ({
             </div>
             <div className="absolute bottom-4 translate-x-60 flex-col">
                 <p className="ml-2">{date}</p>
-                <DayCounter width="70px" height="20px" />
+                <DayCounter daysLeft={21} width="70px" height="20px" />
             </div>
         </>
     );

diff --git a/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.stories.tsx b/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.stories.tsx
@@ -1,11 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { LetterInfoContainer } from './LetterInfoContainer';
+import { MemoryRouter } from 'react-router-dom';
 
 const meta: Meta<typeof LetterInfoContainer> = {
     component: LetterInfoContainer,
     title: 'MOLECULE/LetterInfoContainer',
     tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
     argTypes: {}
 };
 export default meta;

diff --git a/src/components/MapPage/Maplibre/Maplibre.tsx b/src/components/MapPage/Maplibre/Maplibre.tsx
@@ -5,6 +5,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 import mapStyle from './map_style.json';
 import { StyleSpecification } from 'maplibre-gl';
 import * as turf from '@turf/turf';
+import { useSelectedLetterStore } from '@/stores/useSelectedLetterStore';
 type Letter = {
     id: number;
     longitude: number;
@@ -42,6 +43,8 @@ const sampleLetters: Letter[] = [
 ];
 
 export const Maplibre = () => {
+    const { toggleSelectedLetter, clearSelectedLetter } =
+        useSelectedLetterStore();
     const [currentLocation, setCurrentLocation] = useState<{
         longitude: number;
         latitude: number;
@@ -111,6 +114,7 @@ export const Maplibre = () => {
                     mapLib={maplibregl}
                     minZoom={6}
                     maxZoom={18}
+                    onClick={() => clearSelectedLetter()}
                 >
                     {currentLocation && (
                         <Marker
@@ -133,14 +137,15 @@ export const Maplibre = () => {
                             latitude={letter.latitude}
                         >
                             <div
-                                className="p-1 bg-gray-100 rounded-sm"
-                                onClick={() =>
-                                    alert(`${letter.title}\n${letter.keyword}`)
-                                }
+                                className="bg-gray-100 p-1 rounded-sm"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    toggleSelectedLetter(letter);
+                                }}
                             >
                                 <img
                                     src="/bottle.png"
-                                    className="w-full h-5 rounded-lg "
+                                    className="w-full h-5 rounded-lg"
                                 />
                             </div>
                         </Marker>

diff --git a/src/pages/Map/MapExplorerPage.stories.tsx b/src/pages/Map/MapExplorerPage.stories.tsx
@@ -1,11 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { MapExplorerPage } from './MapExplorerPage';
-import { HiOutlinePencilAlt } from 'react-icons/hi';
+import { MemoryRouter } from 'react-router-dom';
 
 const meta: Meta<typeof MapExplorerPage> = {
     title: 'Pages/MapExplorerPage',
     component: MapExplorerPage,
     tags: ['autodocs'],
+    decorators: [
+        (Story) => (
+            <MemoryRouter>
+                <Story />
+            </MemoryRouter>
+        )
+    ],
     argTypes: {
         buttonClick: {
             description: '지도를 클릭하여 편지 작성',

diff --git a/src/pages/Map/MapExplorerPage.tsx b/src/pages/Map/MapExplorerPage.tsx
@@ -1,27 +1,51 @@
 import { LetterInfoContainer } from '@/components/MapPage/LetterInfoContainer/LetterInfoContainer';
+import { NavigateContainer } from '@/components/MapPage/NavigateContainer/NavigateContainer';
 import { Maplibre } from '@/components/MapPage/Maplibre/Maplibre';
 import { HiOutlinePencilAlt } from 'react-icons/hi';
+import { useSelectedLetterStore } from '@/stores/useSelectedLetterStore';
+import { NavLink } from 'react-router-dom';
 
 export const MapExplorerPage = () => {
-    const onclick = () => {
-        console.log('Clicked!');
-    };
+    const selectedLetter = useSelectedLetterStore(
+        (state) => state.selectedLetter
+    );
+
     return (
         <div className="">
             <div className="relative">
                 <Maplibre />
             </div>
-            <button className="absolute gap-2 p-2 transform -translate-x-12 flex-center bottom-96 translate-y-7 left-1/2 btn-base w-52 rounded-2xl">
-                <HiOutlinePencilAlt />
-                지도 편지 작성하기
-            </button>
-            <div className="absolute transform -translate-x-1/2 bottom-40 left-1/2">
-                <LetterInfoContainer
-                    title="익명 편지"
-                    keyword="가을 바람"
-                    date="21.11.15"
-                    clickEvent={onclick}
-                />
+
+            <div className="absolute bottom-20 left-1/2 transform -translate-x-1/2">
+                {selectedLetter ? (
+                    <>
+                        <NavLink
+                            to={'/letter/create'}
+                            className="flex-center bottom-60 translate-y-7 absolute left-1/2 transform -translate-x-12 btn-base gap-2 w-52 p-2 rounded-2xl"
+                        >
+                            <HiOutlinePencilAlt />
+                            지도 편지 작성하기
+                        </NavLink>
+                        <LetterInfoContainer
+                            id={123}
+                            title="익명 편지"
+                            distance={400}
+                            date="21.11.15"
+                            daysLeft={21}
+                        />
+                    </>
+                ) : (
+                    <>
+                        <NavLink
+                            to={'/letter/create'}
+                            className="flex-center bottom-24 translate-y-7 absolute left-1/2 transform -translate-x-12 btn-base gap-2 w-52 p-2 rounded-2xl"
+                        >
+                            <HiOutlinePencilAlt />
+                            지도 편지 작성하기
+                        </NavLink>
+                        <NavigateContainer count={5} />
+                    </>
+                )}
             </div>
         </div>
     );

diff --git a/src/stores/useSelectedLetterStore.tsx b/src/stores/useSelectedLetterStore.tsx
@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+
+type Letter = {
+    id: number;
+    longitude: number;
+    latitude: number;
+    title: string;
+    keyword: string;
+    date: string;
+};
+
+type SelectedLetter = {
+    selectedLetter: Letter | null;
+    setSelectedLetter: (letter: Letter) => void;
+    toggleSelectedLetter: (letter: Letter) => void;
+    clearSelectedLetter: () => void;
+};
+
+export const useSelectedLetterStore = create<SelectedLetter>((set) => ({
+    selectedLetter: null,
+    setSelectedLetter: (letter) => set({ selectedLetter: letter }),
+    toggleSelectedLetter: (letter) =>
+        set((state) =>
+            state.selectedLetter?.id === letter.id
+                ? { selectedLetter: null }
+                : { selectedLetter: letter }
+        ),
+    clearSelectedLetter: () => set({ selectedLetter: null })
+}));
diff --git a/yarn.lock b/yarn.lock
@@ -2789,16 +2789,16 @@ __metadata:
   linkType: hard
 
 "@storybook/builder-vite@npm:^8.4.4":
-  version: 8.4.5
-  resolution: "@storybook/builder-vite@npm:8.4.5"
+  version: 8.4.6
+  resolution: "@storybook/builder-vite@npm:8.4.6"
   dependencies:
-    "@storybook/csf-plugin": "npm:8.4.5"
+    "@storybook/csf-plugin": "npm:8.4.6"
     browser-assert: "npm:^1.2.1"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^8.4.5
-    vite: ^4.0.0 || ^5.0.0
-  checksum: 10c0/4588ac40606ac20ae523cda8c0c073e892e19ff5eecba4e39a04f84b7f7986587b3ce8386356bb423994e30903fd8100cd9d163d875c5c1a748854fc63ac3ec9
+    storybook: ^8.4.6
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
+  checksum: 10c0/36998ffea04023a9f634ebbafe0d1ab3bd3e7c7fec8e8e6c4caef3ce0c94ce01fa44f332f40d0053edb788548f95096baf8561cd35c23fe3c9bcfd872f74f631
   languageName: node
   linkType: hard
 
@@ -2846,14 +2846,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf-plugin@npm:8.4.5":
-  version: 8.4.5
-  resolution: "@storybook/csf-plugin@npm:8.4.5"
+"@storybook/csf-plugin@npm:8.4.6":
+  version: 8.4.6
+  resolution: "@storybook/csf-plugin@npm:8.4.6"
   dependencies:
     unplugin: "npm:^1.3.1"
   peerDependencies:
-    storybook: ^8.4.5
-  checksum: 10c0/c23b423740820679a4fcef9df8b077b24a047f250d1710e87a2fd6918b71bfeb513749eb41c0c072f1ac86e5888e666486cd7f58105d44e5e5bd727653ca1401
+    storybook: ^8.4.6
+  checksum: 10c0/d771f36ee768c6ff62ecd930c6ff64a4ba45bdbb7f7fb41e5f4ffd02204e3f54b17ed091049b265a6d371922bf599bfe749eb9deabfcd7e2b4fb5a5444655241
   languageName: node
   linkType: hard