feat: 회원가입 동네인증 페이지 완료 (#7)

prgrms-web-devcourse-final-project · Nov 29, 2024 · 8e45c7c · 8e45c7c
1 parent b1ba90d
commit 8e45c7c
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 5 deletions.
diff --git a/src/components/common/KakaoMap.tsx b/src/components/common/KakaoMap.tsx
@@ -5,9 +5,15 @@ type KakaoMapProps = {
   latitude: number;
   longitude: number;
   appKey: string;
+  width: number;
 };
 
-const KakaoMap: React.FC<KakaoMapProps> = ({ latitude, longitude, appKey }) => {
+const KakaoMap: React.FC<KakaoMapProps> = ({
+  latitude,
+  longitude,
+  appKey,
+  width,
+}) => {
   const mapContainer = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -40,7 +46,7 @@ const KakaoMap: React.FC<KakaoMapProps> = ({ latitude, longitude, appKey }) => {
     <div
       ref={mapContainer}
       style={{
-        width: '600px',
+        width: `${width}px`,
         height: '350px',
       }}
     ></div>

diff --git a/src/components/pages/login/SetLocationPage.tsx b/src/components/pages/login/SetLocationPage.tsx
@@ -1,9 +1,50 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import KakaoMap from '../../common/KakaoMap';
 
 function SetLocationPage() {
   const navigate = useNavigate();
+  const [location, setLocation] = useState<{
+    latitude: number;
+    longitude: number;
+  } | null>(null);
+  const [region, setRegion] = useState<string | null>(null);
+  const [called, setCalled] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (navigator.geolocation && !called) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          const { latitude, longitude } = position.coords;
+          setLocation({ latitude, longitude });
+
+          if (window.kakao) {
+            const geocoder = new window.kakao.maps.services.Geocoder();
+
+            geocoder.coord2RegionCode(
+              longitude,
+              latitude,
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              (result: any, status: any) => {
+                if (status === window.kakao.maps.services.Status.OK) {
+                  const primaryRegion = result[0]?.region_3depth_name || '';
+                  setRegion(primaryRegion);
+                  setCalled(true);
+                } else {
+                  console.error('주소를 가져오지 못했습니다.');
+                }
+              }
+            );
+          }
+        },
+        (error) => {
+          console.error('위치 정보를 가져올 수 없습니다:', error);
+        }
+      );
+    }
+  }, [location]);
+
   return (
     <Wrapper>
       <LeftContent>
@@ -13,7 +54,7 @@ function SetLocationPage() {
           style={{
             width: '100%',
             height: '100%',
-            objectFit: 'contain',
+            objectFit: 'cover',
           }}
         />
       </LeftContent>
@@ -25,6 +66,22 @@ function SetLocationPage() {
         </Title>
         <Subtitle>위치서비스를 허용해주세요</Subtitle>
 
+        <KakaoMapWrapper>
+          {location ? (
+            <KakaoMap
+              latitude={location.latitude}
+              longitude={location.longitude}
+              appKey={import.meta.env.VITE_KAKAO_KEY} // 카카오 JavaScript 키
+              width={400}
+            />
+          ) : (
+            <p>위치 정보를 불러오는 중...</p>
+          )}
+          <AddressDesc>
+            현재 위치가 내 동네로 설정한 {region || '00동'}에 있습니다.
+          </AddressDesc>
+        </KakaoMapWrapper>
+
         <LoginButton
           onClick={() => {
             navigate('/setnickname');
@@ -37,6 +94,20 @@ function SetLocationPage() {
   );
 }
 
+const AddressDesc = styled.div`
+  color: #88868c;
+`;
+
+const KakaoMapWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 20px;
+`;
+
 const LoginButton = styled.div`
   background-color: #000;
   color: #fff;
@@ -62,7 +133,6 @@ const Title = styled.div`
 `;
 const LeftContent = styled.div`
   flex: 6;
-  background-color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/src/components/pages/myPage/LocationPage.tsx b/src/components/pages/myPage/LocationPage.tsx
@@ -56,6 +56,7 @@ function LocationPage() {
               latitude={location.latitude}
               longitude={location.longitude}
               appKey={import.meta.env.VITE_KAKAO_KEY} // 카카오 JavaScript 키
+              width={600}
             />
           ) : (
             <p>위치 정보를 불러오는 중...</p>