style : 지도 편지 페이지 스타일 수정 (#329)

* style : 편지 마커 수정 * style : 편지 클릭 시 나타나는 info 수정
prgrms-web-devcourse-final-project · Dec 8, 2024 · 42ea75d · 42ea75d
1 parent eb19fd0
commit 42ea75d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx b/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx
@@ -1,3 +1,4 @@
+import { BottleLetter } from '@/components/Common/BottleLetter/BottleLetter';
 import { NavLink } from 'react-router-dom';
 
 type LetterInfoContainerProps = {
@@ -8,6 +9,7 @@ type LetterInfoContainerProps = {
     daysLeft: number;
     lat: number;
     lot: number;
+    label: string;
 };
 
 export const LetterInfoContainer = ({
@@ -17,15 +19,17 @@ export const LetterInfoContainer = ({
     date,
     daysLeft,
     lat,
-    lot
+    lot,
+    label
 }: LetterInfoContainerProps) => {
     const limitDistance = parseFloat(distance) <= 15;
+    const Letter = { label };
 
     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 className="p-2 bg-gray-300 rounded-md w-20 h-20">
+                    <BottleLetter Letter={Letter} />
                 </div>
                 <div className="flex flex-col h-20">
                     <div className="gap-2 flex-center">

diff --git a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx
@@ -13,6 +13,7 @@ import { useCurrentLocation } from '@/hooks/useCurrentLocation';
 import { useNearbyLetters } from '@/hooks/useNearbyLetters';
 import { NearbyLettersResponseType } from '@/types/letter';
 import { useLocationState } from '@/hooks/useLocationState';
+import { BottleLetter } from '@/components/Common/BottleLetter/BottleLetter';
 
 type MaplibreWithSearchProps = {
     onFocus: () => void;
@@ -92,16 +93,18 @@ export const MaplibreWithSearch = ({
                             latitude={letter.latitude}
                         >
                             <div
-                                className="bg-gray-100 p-1 rounded-sm"
+                                className="relative flex items-center justify-center w-8 h-8 bg-white rounded-full cursor-pointer transform"
                                 onClick={(e) => {
                                     e.stopPropagation();
                                     toggleSelectedLetter(letter);
                                 }}
                             >
-                                <img
-                                    src="/bottle.png"
-                                    className="w-full h-5 rounded-lg"
-                                />
+                                <div className="absolute top-1/2 left-1/2 w-10 h-10 bg-white rounded-full transform -translate-x-1/2 -translate-y-1/2">
+                                    <BottleLetter
+                                        Letter={{ label: letter.label }}
+                                    />
+                                </div>
+                                <div className="absolute bottom-[-10px] left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[6px] border-t-white"></div>
                             </div>
                         </Marker>
                     )

diff --git a/src/pages/Map/MapExplorerPage.tsx b/src/pages/Map/MapExplorerPage.tsx
@@ -105,6 +105,7 @@ export const MapExplorerPage = () => {
                                     daysLeft={daysLeft}
                                     lat={selectedLetter.latitude}
                                     lot={selectedLetter.longitude}
+                                    label={selectedLetter.label}
                                 />
                             </>
                         ) : (