From 433b8216f8032d1973d200ff8ac1742917416ebc Mon Sep 17 00:00:00 2001
From: 1g2g <wonji126326@gmail.com>
Date: Tue, 28 Nov 2023 01:00:12 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GamesDetailPage/GameLocation.tsx    | 52 +++++++++++++++++++
 src/pages/GamesDetailPage/GamesDetailPage.tsx |  5 ++
 2 files changed, 57 insertions(+)
 create mode 100644 src/pages/GamesDetailPage/GameLocation.tsx

diff --git a/src/pages/GamesDetailPage/GameLocation.tsx b/src/pages/GamesDetailPage/GameLocation.tsx
new file mode 100644
index 00000000..5b300625
--- /dev/null
+++ b/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);
+  }
+};
diff --git a/src/pages/GamesDetailPage/GamesDetailPage.tsx b/src/pages/GamesDetailPage/GamesDetailPage.tsx
index 8bcb61fd..c73de6dd 100644
--- a/src/pages/GamesDetailPage/GamesDetailPage.tsx
+++ b/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

From e84030118c8ab45cd248536547309d948fa6b560 Mon Sep 17 00:00:00 2001
From: 1g2g <wonji126326@gmail.com>
Date: Tue, 28 Nov 2023 01:04:24 +0900
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=ED=95=98=EB=8B=A8=20=ED=94=8C?=
 =?UTF-8?q?=EB=A1=9C=ED=8C=85=20=EB=B2=84=ED=8A=BC=20=EC=A7=80=EB=8F=84?=
 =?UTF-8?q?=EC=97=90=20=EA=B0=80=EB=A6=AC=EC=A7=80=20=EC=95=8A=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20z-index=20=EB=B6=80=EC=97=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GamesDetailPage/GamesDetailPage.styles.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/GamesDetailPage/GamesDetailPage.styles.ts b/src/pages/GamesDetailPage/GamesDetailPage.styles.ts
index b151f87d..17a361b8 100644
--- a/src/pages/GamesDetailPage/GamesDetailPage.styles.ts
+++ b/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`