Merge pull request #211 from themoment-team/feature/infoWindow

[Client] 찾아오는길 infoWindow 제작
themoment-team · Sep 6, 2023 · e1f41d6 · e1f41d6 · vercel · Sep 6, 2023
2 parents 8bbdd82 + d85b6e7
commit e1f41d6
Show file tree

Hide file tree

Showing 15 changed files with 375 additions and 53 deletions.
diff --git a/apps/client/package.json b/apps/client/package.json
@@ -16,13 +16,15 @@
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.2",
     "react-dom": "18.2.0",
+    "react-kakao-maps-sdk": "^1.1.12",
     "types": "workspace:^",
     "typescript": "5.0.4",
     "ui": "workspace:^"
   },
   "devDependencies": {
     "@storybook/react": "^7.0.6",
     "eslint-config-custom": "workspace:^",
+    "kakao.maps.d.ts": "^0.1.38",
     "tsconfig": "workspace:^"
   }
 }
diff --git a/apps/client/public/images/about/Location/Marker.png b/apps/client/public/images/about/Location/Marker.png
diff --git a/apps/client/public/images/about/Location/svg/ChevronIcon.svg b/apps/client/public/images/about/Location/svg/ChevronIcon.svg
diff --git a/apps/client/public/images/about/Location/svg/CloseIcon.svg b/apps/client/public/images/about/Location/svg/CloseIcon.svg
diff --git a/apps/client/public/images/about/Location/svg/CopyLinkIcon.svg b/apps/client/public/images/about/Location/svg/CopyLinkIcon.svg
diff --git a/apps/client/public/images/about/Location/svg/MarkerIcon.svg b/apps/client/public/images/about/Location/svg/MarkerIcon.svg
diff --git a/apps/client/public/images/about/Location/svg/SmallMarkerIcon.svg b/apps/client/public/images/about/Location/svg/SmallMarkerIcon.svg
diff --git a/apps/client/src/app/layout.tsx b/apps/client/src/app/layout.tsx
@@ -88,6 +88,11 @@ export default function RootLayout({
         `,
           }}
         />
+        <Script
+          src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false&libraries=services,clusterer`}
+          type='text/javascript'
+          strategy='beforeInteractive'
+        />
       </head>
 
       <body>

diff --git a/apps/client/src/components/About/Location/Map/InfoWindow.tsx b/apps/client/src/components/About/Location/Map/InfoWindow.tsx
@@ -0,0 +1,81 @@
+import Image from 'next/image';
+
+import * as S from './style';
+interface InfoWindowProps {
+  latitude: number;
+  longitude: number;
+  onClose: () => void;
+}
+
+const InfoWindow: React.FC<InfoWindowProps> = ({
+  latitude,
+  longitude,
+  onClose,
+}) => {
+  const CloseButtonClick = () => {
+    onClose();
+  };
+
+  const copyLinkButtonClick = () => {
+    const linkToCopy = 'http://kko.to/CtKpnV33Dj';
+    navigator.clipboard.writeText(linkToCopy).then(() => {
+      alert('링크가 복사되었습니다');
+    });
+  };
+
+  return (
+    <S.Next>
+      <S.Box>
+        <S.Close>
+          <Image
+            alt='closeIcon'
+            width={20}
+            height={20}
+            src='/images/about/location/svg/CloseIcon.svg'
+            onClick={CloseButtonClick}
+          />
+        </S.Close>
+        <S.ContentBox>
+          <S.Title>광주소프트웨어마이스터고등학교</S.Title>
+          <S.Address>광주 광산구 상무대로 312 </S.Address>
+          <div> (우) 62423&nbsp;&nbsp;(지번) 송정동 710-3</div>
+          <S.Number>062-949-6800</S.Number>
+        </S.ContentBox>
+        <S.BottomBox>
+          <S.IconBox>
+            <a
+              href={`https://map.kakao.com/link/roadview/${latitude},${longitude}`}
+              target='_blank'
+            >
+              <S.Icon>
+                <Image
+                  width={16}
+                  height={16}
+                  alt='smallMarker'
+                  src='/images/about/location/svg/SmallMarkerIcon.svg'
+                />
+              </S.Icon>
+            </a>
+            <S.Icon onClick={copyLinkButtonClick}>
+              <Image
+                width={16}
+                height={16}
+                alt='CopyLinkIcon'
+                src='/images/about/location/svg/CopyLinkIcon.svg'
+              />
+            </S.Icon>
+          </S.IconBox>
+          <a
+            href={`https://map.kakao.com/link/to/광주소프트웨어마이스터고등학교,${latitude},${longitude}`}
+            target='_blank'
+          >
+            <S.LocationBtn>길찾기</S.LocationBtn>
+          </a>
+        </S.BottomBox>
+      </S.Box>
+      <S.Triangle2 />
+    </S.Next>
+  );
+};
+
+export default InfoWindow;
diff --git a/apps/client/src/components/About/Location/Map/Overlay.tsx b/apps/client/src/components/About/Location/Map/Overlay.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+
+import Image from 'next/image';
+
+import InfoWindow from './InfoWindow';
+import * as S from './style';
+
+interface OverlayProps {
+  latitude: number;
+  longitude: number;
+}
+
+const Overlay: React.FC<OverlayProps> = ({ latitude, longitude }) => {
+  const [isInfoWindowVisible, setIsInfoWindowVisible] = useState(false);
+  const [isCustomOverlayVisible, setIsCustomOverlayVisible] = useState(true);
+
+  const isOverlay = () => {
+    setIsInfoWindowVisible(!isInfoWindowVisible);
+    setIsCustomOverlayVisible(!isCustomOverlayVisible);
+  };
+
+  const onCloseInfoWindow = () => {
+    setIsInfoWindowVisible(false);
+    setIsCustomOverlayVisible(true);
+  };
+
+  return (
+    <div>
+      {isCustomOverlayVisible && (
+        <S.CustomOverlay>
+          <S.Default onClick={isOverlay}>
+            <S.MarkerIcon>
+              <Image
+                width={20}
+                height={20}
+                alt='markerIcon'
+                src='/images/about/location/svg/MarkerIcon.svg'
+              />
+            </S.MarkerIcon>
+            <S.Title>광주소프트웨어마이스터고등학교</S.Title>
+            <S.Chevron>
+              <Image
+                width={20}
+                height={20}
+                alt='chevronIcon'
+                src='/images/about/location/svg/ChevronIcon.svg'
+              />
+            </S.Chevron>
+          </S.Default>
+          <S.Triangle />
+        </S.CustomOverlay>
+      )}
+      {isInfoWindowVisible && (
+        <InfoWindow
+          latitude={latitude}
+          longitude={longitude}
+          onClose={onCloseInfoWindow}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Overlay;
diff --git a/apps/client/src/components/About/Location/Map/index.tsx b/apps/client/src/components/About/Location/Map/index.tsx
@@ -1,8 +1,8 @@
-import { useRef } from 'react';
+'use client';
 
-import Script from 'next/script';
+import { CustomOverlayMap, Map, MapMarker } from 'react-kakao-maps-sdk';
 
-import styled from '@emotion/styled';
+import Overlay from './Overlay';
 
 interface MapProps {
   latitude: number;
@@ -15,57 +15,25 @@ declare global {
   }
 }
 
-function Map({ latitude, longitude }: MapProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const onLoadKakaoMap = () => {
-    window.kakao.maps.load(() => {
-      const options = {
-        center: new window.kakao.maps.LatLng(latitude, longitude),
-      };
-
-      const map = new window.kakao.maps.Map(containerRef.current, options);
-
-      const markerPosition = new window.kakao.maps.LatLng(latitude, longitude);
-
-      const marker = new window.kakao.maps.Marker({
-        position: markerPosition,
-      });
-
-      const infoWindow = new window.kakao.maps.InfoWindow({
-        content:
-          '<div style="width: 250px; padding: 10px;">광주소프트웨어마이스터고등학교</div>',
-        removable: true,
-      });
-
-      window.kakao.maps.event.addListener(marker, 'click', function () {
-        infoWindow.open(map, marker);
-      });
-
-      marker.setMap(map);
-    });
-  };
-
+function SchoolMap({ latitude, longitude }: MapProps) {
+  const imageSrc = '/images/about/Location/Marker.png';
+  const markerCoords = { lat: latitude, lng: longitude };
   return (
     <>
-      <Script
-        src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAOMAP_APPKEY}&autoload=false`}
-        onLoad={onLoadKakaoMap}
-      />
-      <MapContainer id='map' ref={containerRef} />
+      <Map center={markerCoords} style={{ width: '100%', height: '100%' }}>
+        <MapMarker
+          position={markerCoords}
+          image={{
+            src: imageSrc,
+            size: { width: 60, height: 60 },
+          }}
+        />
+        <CustomOverlayMap position={markerCoords}>
+          <Overlay latitude={latitude} longitude={longitude} />
+        </CustomOverlayMap>
+      </Map>
     </>
   );
 }
 
-const MapContainer = styled.div`
-  width: 77.5rem;
-  height: 25rem;
-  @media ${({ theme }) => theme.breakPoint['1440']} {
-    width: calc(100vw - 12.5rem);
-  }
-  @media ${({ theme }) => theme.breakPoint['1024']} {
-    width: calc(100vw - 7.5rem);
-  }
-`;
-
-export default Map;
+export default SchoolMap;