feat #18 공구 등록 지도 컴포넌트로 변경

src/components/PreviewMap.tsx

@@ -0,0 +1,64 @@
+import { CustomOverlayMap, Map, MapMarker } from 'react-kakao-maps-sdk';
+import { PositionType } from '@src/types/map';
+import markerPin from '@src/asset/icon/markerPin.svg';
+
+export default function PreviewMap({
+  img,
+  position,
+  markerImg,
+}: {
+  img?: string;
+  markerImg?: string;
+  position?: PositionType;
+}) {
+  return (
+    <div className="relative aspect-[1.9197] w-full rounded-xl bg-gray-300">
+      {position?.lat ? (
+        // <StaticMap
+        //   className="size-full rounded-xl"
+        //   marker={false}
+        //   center={{
+        //     // 마커를 위한 위치 조정
+        //     lat: position.lat + 0.00045,
+        //     lng: position.lng,
+        //   }}
+        //   level={5}
+        // />
+        <Map
+          className="size-full rounded-xl"
+          center={{
+            // 마커를 위한 위치 조정
+            lat: position.lat + 0.00045,
+            lng: position.lng,
+          }}
+          level={5}
+        >
+          <CustomOverlayMap
+            position={{
+              // 마커를 위한 위치 조정
+              lat: position.lat + 0.00045,
+              lng: position.lng,
+            }}
+          >
+            <div className="relative h-20 w-10">
+              <div className="absolute left-[5px] top-[5px] z-50 size-[22px] rounded-full bg-white" />
+              <img
+                className="absolute z-10 max-w-8"
+                src={markerImg}
+                alt="거래 위치"
+              />
+            </div>
+          </CustomOverlayMap>
+        </Map>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
+}
+
+PreviewMap.defaultProps = {
+  img: undefined,
+  markerImg: undefined,
+  position: undefined,
+};

src/pages/Register/components/Place/index.tsx

@@ -12,6 +12,7 @@ import { getPlaces } from '@src/api/register';
 import NextButton from '@src/components/NextButton';
 import MarkerOnStaticMap from '@src/components/MarkerOnStaticMap';
 import RegistMarker from '@src/asset/icon/RegistMarker.svg';
+import PreviewMap from '@src/components/PreviewMap';
 import Postcode from './components/postcode';
 import Selector from './components/Selector';
 
@@ -112,7 +113,21 @@ function Place() {
               <div className="mb-2 align-top text-sm font-thin">
                 픽업 위치 확인
               </div>
-              <MarkerOnStaticMap
+              {/* <MarkerOnStaticMap
+                position={
+                  index >= 0
+                    ? {
+                        lat: places[index].y,
+                        lng: places[index].x,
+                      }
+                    : {
+                        lat: data.goodsDto.mapY as number,
+                        lng: data.goodsDto.mapX as number,
+                      }
+                }
+                markerImg={RegistMarker}
+              /> */}
+              <PreviewMap
                 position={
                   index >= 0
                     ? {