게스트 매치 상세 페이지 지도로 보기 구현

src/pages/GamesDetailPage/GameLocation.tsx

@@ -0,0 +1,52 @@
+import toast from 'react-hot-toast';
+import { Map, MapMarker } from 'react-kakao-maps-sdk';
+
+import { Game } from '@type/models';
+
+import MarkerSvg from '@assets/mapMarker.svg';
+
+type GameLocationProps = {
+  match: Game;
+};
+
+export const GameLocation = ({ match }: GameLocationProps) => {
+  return (
+    <Map
+      center={{ lat: match.latitude, lng: match.longitude }}
+      style={{ width: '100%', height: '300px' }}
+      level={4}
+    >
+      <MapMarker
+        position={{
+          lat: match.latitude,
+          lng: match.longitude,
+        }}
+        image={{
+          src: MarkerSvg,
+          size: {
+            width: 48,
+            height: 68,
+          },
+          options: {
+            offset: {
+              x: 23,
+              y: 55,
+            },
+          },
+        }}
+        onClick={() => copyLocation(match.mainAddress)}
+        clickable={true}
+      ></MapMarker>
+    </Map>
+  );
+};
+
+const copyLocation = async (location: Game['mainAddress']) => {
+  try {
+    await navigator.clipboard.writeText(location);
+
+    toast.success('위치 정보가 복사되었습니다.');
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+};

src/pages/GamesDetailPage/GamesDetailPage.styles.ts

@@ -74,6 +74,7 @@ export const ButtonWrapper = styled.div`
   width: 100dvw;
   bottom: 70px;
   left: 0;
+  z-index: 1;
 `;
 
 export const PositionItemBox = styled.div`

src/pages/GamesDetailPage/GamesDetailPage.tsx

@@ -31,6 +31,7 @@ import Ball from '@assets/ball.svg';
 import GameMember from '@assets/gameMember.svg';
 import Money from '@assets/money.svg';
 
+import { GameLocation } from './GameLocation';
 import {
   ButtonWrapper,
   GrayText,
@@ -255,6 +256,10 @@ export const GamesDetailPage = () => {
             ))}
           </Guests>
         </GuestsContainer>
+        <Text size={20} weight={700}>
+          지도로 보기
+        </Text>
+        <GameLocation match={match} />
         <ButtonWrapper>
           {loginInfo && !isStarted && canParticipate && (
             <ErrorBoundary