From 14bf2f2008ca5db63be91a2f00dcb951cc1778d9 Mon Sep 17 00:00:00 2001
From: AnCha <tory912@gmail.com>
Date: Wed, 4 Dec 2024 15:05:28 +0900
Subject: [PATCH] =?UTF-8?q?feat=20#50=20-=20=EA=B1=B0=EC=A0=90=20=EB=A7=88?=
 =?UTF-8?q?=EC=BB=A4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/images/foothold/locationMarker.svg |  5 +
 src/app/foothold/page.tsx                     |  7 +-
 src/components/map/KakoMap.tsx                | 95 +++++++++++++++++--
 3 files changed, 93 insertions(+), 14 deletions(-)
 create mode 100644 public/assets/images/foothold/locationMarker.svg

diff --git a/public/assets/images/foothold/locationMarker.svg b/public/assets/images/foothold/locationMarker.svg
new file mode 100644
index 0000000..d190b44
--- /dev/null
+++ b/public/assets/images/foothold/locationMarker.svg
@@ -0,0 +1,5 @@
+<svg width="47" height="49" viewBox="0 0 47 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.5337 7.00102H37.5356C45.0202 14.9737 45.0202 27.9016 37.5356 35.8743L27.1798 46.9054C26.3317 47.808 25.1818 48.3151 23.9828 48.3151C22.7839 48.3151 21.634 47.808 20.7858 46.9054L10.4301 35.8743C2.9455 27.9016 2.9455 14.9737 10.4301 7.00102C17.9128 -0.971693 30.0491 -0.971693 37.5337 7.00102ZM12.4618 9.16518C9.40695 12.4197 7.69082 16.8354 7.69082 21.4376C7.69082 26.0398 9.40695 30.4536 12.4618 33.7081L12.5058 33.7571L22.8175 44.7412C23.1262 45.0696 23.5446 45.2541 23.9809 45.2541C24.4172 45.2541 24.8356 45.0696 25.1443 44.7412L35.5001 33.7081C38.5188 30.4457 40.2042 26.0442 40.1888 21.4634C40.1734 16.8827 38.4583 12.4942 35.4177 9.25502C32.377 6.01578 28.2574 4.18853 23.9571 4.1717C19.6568 4.15487 15.5247 5.94983 12.4618 9.16518Z" fill="#3DA2FF"/>
+<path d="M23.9805 27.5627C25.2513 27.5627 26.4701 27.0249 27.3687 26.0677C28.2673 25.1105 28.7722 23.8122 28.7722 22.4585C28.7722 21.1048 28.2673 19.8065 27.3687 18.8493C26.4701 17.8921 25.2513 17.3543 23.9805 17.3543C22.7097 17.3543 21.4909 17.8921 20.5923 18.8493C19.6937 19.8065 19.1888 21.1048 19.1888 22.4585C19.1888 23.8122 19.6937 25.1105 20.5923 26.0677C21.4909 27.0249 22.7097 27.5627 23.9805 27.5627Z" fill="#3DA2FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4618 9.16518C9.40695 12.4197 7.69082 16.8354 7.69082 21.4376C7.69082 26.0398 9.40695 30.4536 12.4618 33.7081L12.5058 33.7571L22.8175 44.7412C23.1262 45.0696 23.5446 45.2541 23.9809 45.2541C24.4172 45.2541 24.8356 45.0696 25.1443 44.7412L35.5001 33.7081C38.5188 30.4457 40.2042 26.0442 40.1888 21.4634C40.1734 16.8827 38.4583 12.4942 35.4177 9.25502C32.377 6.01578 28.2574 4.18853 23.9571 4.1717C19.6568 4.15487 15.5247 5.94983 12.4618 9.16518ZM27.3687 26.0677C26.4701 27.0249 25.2513 27.5627 23.9805 27.5627C22.7097 27.5627 21.4909 27.0249 20.5923 26.0677C19.6937 25.1105 19.1888 23.8122 19.1888 22.4585C19.1888 21.1048 19.6937 19.8065 20.5923 18.8493C21.4909 17.8921 22.7097 17.3543 23.9805 17.3543C25.2513 17.3543 26.4701 17.8921 27.3687 18.8493C28.2673 19.8065 28.7722 21.1048 28.7722 22.4585C28.7722 23.8122 28.2673 25.1105 27.3687 26.0677Z" fill="white"/>
+</svg>
diff --git a/src/app/foothold/page.tsx b/src/app/foothold/page.tsx
index 54dbd86..facd75e 100644
--- a/src/app/foothold/page.tsx
+++ b/src/app/foothold/page.tsx
@@ -12,11 +12,6 @@ export default function FootHoldPage() {
   const mapRef = useRef<{ handleLevel: (type: string) => void } | null>(null);
   const [selectedChips, setSelectedChips] = useState<string[]>([]);
 
-  const onChipSelection = (chips: string[]) => {
-    setSelectedChips(chips);
-    console.log("chips:", selectedChips);
-  };
-
   return (
     <div className="w-full min-h-screen flex flex-col items-center justify-start">
       {/* 상단바 */}
@@ -34,7 +29,7 @@ export default function FootHoldPage() {
         </div>
       </div>
       <div className="w-screen h-screen">
-        <KakaoMap ref={mapRef} onChipSelection={onChipSelection} />
+        <KakaoMap ref={mapRef} />
       </div>
       <BottomSheet />
     </div>
diff --git a/src/components/map/KakoMap.tsx b/src/components/map/KakoMap.tsx
index 688b364..5d293df 100644
--- a/src/components/map/KakoMap.tsx
+++ b/src/components/map/KakoMap.tsx
@@ -4,13 +4,45 @@ import React, {
   useState,
   useEffect,
 } from "react";
-import { Map } from "react-kakao-maps-sdk";
+import { Map, MapMarker } from "react-kakao-maps-sdk";
+import { ChipHeart, ChipPlace, ChipBalloon, ChipCoffee, ChipFood } from ".";
+import MapChip from "../buttons/MapChip";
 
-const KakaoMap = forwardRef(function KakaoMap(
-  { onChipSelection }: { onChipSelection: (chips: string[]) => void },
-  ref
-) {
+interface Center {
+  lat: number;
+  lng: number;
+}
+
+const KakaoMap = forwardRef(function KakaoMap(_, ref) {
+  const ChipList = [
+    {
+      icon: ChipHeart,
+      type: "나의 찜",
+    },
+    {
+      icon: ChipPlace,
+      type: "관광명소",
+    },
+    {
+      icon: ChipBalloon,
+      type: "문화시설",
+    },
+    {
+      icon: ChipCoffee,
+      type: "카페",
+    },
+    {
+      icon: ChipFood,
+      type: "음식점",
+    },
+  ];
+
+  const [center, setCenter] = useState<Center>({
+    lat: 37.764246,
+    lng: 128.90026,
+  });
   const [mapInstance, setMapInstance] = useState<kakao.maps.Map | null>(null);
+  const [selectedChips, setSelectedChips] = useState<string[]>([]);
 
   // 확대/축소 메서드
   const handleLevel = (type: string) => {
@@ -31,14 +63,61 @@ const KakaoMap = forwardRef(function KakaoMap(
     handleLevel,
   }));
 
+  // 지도 중심 업데이트
+  const handleDragEnd = () => {
+    if (!mapInstance) return;
+
+    const newCenter = mapInstance.getCenter();
+    setCenter({
+      lat: newCenter.getLat(),
+      lng: newCenter.getLng(),
+    });
+  };
+  const toggleChip = (type: string): void => {
+    const newSelectedChips = selectedChips.includes(type)
+      ? selectedChips.filter((item) => item !== type)
+      : [...selectedChips, type];
+
+    setSelectedChips(newSelectedChips);
+  };
+
   return (
-    <div style={{ width: "100%", height: "100%", position: "relative" }}>
+    <div style={{ width: "100%", height: "100vh", position: "relative" }}>
       <Map
+        center={center}
         level={4}
         onCreate={(map) => setMapInstance(map)}
-        center={{ lat: 37.764246, lng: 128.90026 }}
+        onDragEnd={handleDragEnd}
+        draggable={true}
         className="w-full h-full"
-      />
+      >
+        <MapMarker // 마커를 생성합니다
+          position={{
+            // 마커가 표시될 위치입니다
+            lat: 37.764246,
+            lng: 128.90026,
+          }}
+          image={{
+            src: "/assets/images/foothold/locationMarker.svg", // 마커이미지의 주소입니다
+            size: {
+              width: 46,
+              height: 49,
+            }, // 마커이미지의 크기입니다
+          }}
+        />
+      </Map>
+      {/* Chip 리스트 */}
+      <div className="absolute top-5 z-10 w-full whitespace-nowrap overflow-x-auto flex gap-x-[8px] scrollbar-hide px-[24px]">
+        {ChipList.map((chip, index) => (
+          <MapChip
+            key={index}
+            icon={chip.icon}
+            label={chip.type}
+            isSelected={selectedChips.includes(chip.type)}
+            onClick={() => toggleChip(chip.type)}
+          />
+        ))}
+      </div>
     </div>
   );
 });