From aa8e297cbf7fab714480017b5b1cee9f7f810b0b Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Thu, 22 Feb 2024 01:08:47 +0900
Subject: [PATCH 1/5] =?UTF-8?q?assets:=20marker=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/marker.png | Bin 0 -> 1919 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 public/assets/marker.png

diff --git a/public/assets/marker.png b/public/assets/marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..d34034feda80b853e05c0d6fb2073e01ed5bc4dc
GIT binary patch
literal 1919
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
FV1l-(i7fyC

literal 0
HcmV?d00001


From 0841f1c8cf3220d8a819dfeabf159883be34f722 Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Thu, 22 Feb 2024 01:09:41 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20map=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/map/page.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx
index 9509ee89..866e1245 100644
--- a/src/app/map/page.tsx
+++ b/src/app/map/page.tsx
@@ -1,19 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+'use client';
+
+import { useState } from 'react';
+
 import classNames from 'classnames/bind';
 
+import Markers from '@/components/map/markers/Markers';
+import KakaoMap from '@components/map/kakao-map/KakaoMap';
+import useMarkers from '@remote/queries/map/useMarkers';
 import BottomNav from '@shared/bottom-nav/BottomNav';
-import KakaoMap from '@shared/map/KakaoMap';
 import SearchBar from '@shared/search-bar/SearchBar';
 
 import styles from './page.module.scss';
 
 const cx = classNames.bind(styles);
 function MapPage() {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { data: carWashMarkers } = useMarkers({
+    minX: 36.12,
+    maxX: 36.88,
+    minY: 127.1,
+    maxY: 127.8,
+    level: 2,
+  });
+  const [map, setMap] = useState<any>(null);
+
   return (
     <div className={cx('layout')}>
       <div className={cx('searchWrapper')}>
         <SearchBar isShadow />
       </div>
-      <KakaoMap />
+      <KakaoMap map={map} setMap={setMap} />
+      <Markers map={map} carwashs={carWashMarkers!} />
       <BottomNav />
     </div>
   );

From 927739a41e9bdba492bf5b8747eaaad4a96f1511 Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Thu, 22 Feb 2024 01:11:44 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20map=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kakao-map}/CurrentLocationButton.module.scss       |  1 +
 .../map => map/kakao-map}/CurrentLocationButton.tsx    |  0
 .../{shared/map => map/kakao-map}/KakaoMap.tsx         | 10 ++++++----
 3 files changed, 7 insertions(+), 4 deletions(-)
 rename src/components/{shared/map => map/kakao-map}/CurrentLocationButton.module.scss (96%)
 rename src/components/{shared/map => map/kakao-map}/CurrentLocationButton.tsx (100%)
 rename src/components/{shared/map => map/kakao-map}/KakaoMap.tsx (92%)

diff --git a/src/components/shared/map/CurrentLocationButton.module.scss b/src/components/map/kakao-map/CurrentLocationButton.module.scss
similarity index 96%
rename from src/components/shared/map/CurrentLocationButton.module.scss
rename to src/components/map/kakao-map/CurrentLocationButton.module.scss
index acc97bef..909505f0 100644
--- a/src/components/shared/map/CurrentLocationButton.module.scss
+++ b/src/components/map/kakao-map/CurrentLocationButton.module.scss
@@ -1,6 +1,7 @@
 .button {
     position: absolute;
     z-index: var(--header-zindex);
+    right: 7%;
     bottom: 13%;
     box-sizing: border-box;
     margin-left: 24px;
diff --git a/src/components/shared/map/CurrentLocationButton.tsx b/src/components/map/kakao-map/CurrentLocationButton.tsx
similarity index 100%
rename from src/components/shared/map/CurrentLocationButton.tsx
rename to src/components/map/kakao-map/CurrentLocationButton.tsx
diff --git a/src/components/shared/map/KakaoMap.tsx b/src/components/map/kakao-map/KakaoMap.tsx
similarity index 92%
rename from src/components/shared/map/KakaoMap.tsx
rename to src/components/map/kakao-map/KakaoMap.tsx
index 457b01a7..398816f1 100644
--- a/src/components/shared/map/KakaoMap.tsx
+++ b/src/components/map/kakao-map/KakaoMap.tsx
@@ -7,7 +7,7 @@
 
 'use client';
 
-import { useState } from 'react';
+import { SetStateAction, useState } from 'react';
 
 import Script from 'next/script';
 
@@ -25,10 +25,12 @@ interface ILocation {
   lng: number;
 }
 
-function KakaoMap() {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const [map, setMap] = useState<any>(null);
+interface IKakaoProps {
+  map: any
+  setMap: React.Dispatch<SetStateAction<any>>
+}
 
+function KakaoMap({ map, setMap }: IKakaoProps) {
   const loadKakaoMap = () => {
     window.kakao.maps.load(() => {
       const mapContainer = document.getElementById('map');

From 659ad46d4bc410c2ae4a621bc501559141e632b7 Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Thu, 22 Feb 2024 01:12:01 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20Markers=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/markers/Markers.tsx | 67 ++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 src/components/map/markers/Markers.tsx

diff --git a/src/components/map/markers/Markers.tsx b/src/components/map/markers/Markers.tsx
new file mode 100644
index 00000000..e40b2e66
--- /dev/null
+++ b/src/components/map/markers/Markers.tsx
@@ -0,0 +1,67 @@
+/* eslint-disable array-callback-return */
+/* eslint-disable max-len */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { useCallback, useEffect } from 'react';
+
+import { MarkersType } from '@remote/api/types/map';
+
+interface MarkerProps {
+  map: any
+  carwashs: MarkersType
+}
+
+declare global {
+  interface Window {
+    kakao: any
+  }
+}
+
+function Markers({ map, carwashs }: MarkerProps) {
+  const loadKakoMarkers = useCallback(() => {
+    if (map) {
+      // 식당 데이터 마커 띄우기
+      carwashs?.value.map((carwash) => {
+        const imageSrc = '/assets/marker.png';
+        const imageSize = new window.kakao.maps.Size(40, 40); // 마커이미지의 크기입니다
+        const imageOption = { offset: new window.kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
+
+        // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
+        const markerImage = new window.kakao.maps.MarkerImage(
+          imageSrc,
+          imageSize,
+          imageOption,
+        );
+
+        // 마커가 표시될 위치입니다
+        const markerPosition = new window.kakao.maps.LatLng(
+          carwash.latitude,
+          carwash.longitude,
+        );
+
+        // 마커를 생성합니다
+        const marker = new window.kakao.maps.Marker({
+          position: markerPosition,
+          image: markerImage, // 마커이미지 설정
+        });
+
+        // 마커가 지도 위에 표시되도록 설정합니다
+        marker.setMap(map);
+      });
+    }
+  }, [map, carwashs]);
+
+  useEffect(() => {
+    loadKakoMarkers();
+  }, [loadKakoMarkers, map]);
+
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <></>
+  );
+}
+
+export default Markers;

From d4c68c2b2ce643846c7a152e260b1901afa38c2b Mon Sep 17 00:00:00 2001
From: bottlewook <bwlimtony@gmail.com>
Date: Thu, 22 Feb 2024 01:12:14 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20maker=20=EC=BF=BC=EB=A6=AC=ED=9B=85?=
 =?UTF-8?q?=20=EC=A0=9C=EC=9E=91=20=EB=B0=8F=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/remote/api/requests/map/map.get.api.ts | 12 ++++++++++++
 src/remote/api/types/map.ts                | 20 ++++++++++++++++++++
 src/remote/queries/map/useMarkers.tsx      | 19 +++++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 src/remote/api/requests/map/map.get.api.ts
 create mode 100644 src/remote/api/types/map.ts
 create mode 100644 src/remote/queries/map/useMarkers.tsx

diff --git a/src/remote/api/requests/map/map.get.api.ts b/src/remote/api/requests/map/map.get.api.ts
new file mode 100644
index 00000000..7fac0e39
--- /dev/null
+++ b/src/remote/api/requests/map/map.get.api.ts
@@ -0,0 +1,12 @@
+import { IMarkersParameter, MarkersType } from '../../types/map';
+import { getRequest } from '../requests.api';
+
+// 세차장 위치 마커
+
+export const getMarkers = async ({
+  minX, maxX, minY, maxY, level,
+}: IMarkersParameter) => {
+  const response = await getRequest<MarkersType>(`/washzones?minX=${minX}&maxX=${maxX}&minY=${minY}&maxY=${maxY}&&level=${level}`);
+
+  return response;
+};
diff --git a/src/remote/api/types/map.ts b/src/remote/api/types/map.ts
new file mode 100644
index 00000000..58e07b6d
--- /dev/null
+++ b/src/remote/api/types/map.ts
@@ -0,0 +1,20 @@
+import { ICommon } from './common';
+
+export interface IMarkersParameter {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+  level: number
+}
+
+export interface IMarkers {
+  name: string
+  address: string
+  latitude: number
+  longitude: number
+  type: '실내' | '개러지' | null
+  remarks: null
+}
+
+export type MarkersType = ICommon<IMarkers[]>;
diff --git a/src/remote/queries/map/useMarkers.tsx b/src/remote/queries/map/useMarkers.tsx
new file mode 100644
index 00000000..bc87e63c
--- /dev/null
+++ b/src/remote/queries/map/useMarkers.tsx
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getMarkers } from '@/remote/api/requests/map/map.get.api';
+import { IMarkersParameter, MarkersType } from '@/remote/api/types/map';
+
+function useMarkers({
+  minX, maxX, minY, maxY, level,
+}: IMarkersParameter) {
+  return useQuery<MarkersType>({
+    queryKey: ['MarkerType', minX, minY, maxX, maxY, level],
+    queryFn: () => {
+      return getMarkers({
+        minX, maxX, minY, maxY, level,
+      });
+    },
+  });
+}
+
+export default useMarkers;