Feat#49 daum address api

package.json

@@ -24,6 +24,7 @@
     "@hookform/resolvers": "^5.2.1",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
@@ -37,6 +38,7 @@
     "next-themes": "^0.4.6",
     "prettier": "^3.6.2",
     "react": "^19.1.1",
+    "react-daum-postcode": "^3.2.0",
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.62.0",
     "react-kakao-maps-sdk": "^1.2.0",
@@ -46,7 +48,8 @@
     "tailwind-merge": "^3.3.1",
     "tailwind-scrollbar-hide": "^4.0.0",
     "tailwindcss": "^4.1.12",
-    "zod": "^4.0.17"
+    "zod": "^4.0.17",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",

src/entities/auth/hooks/useKakaoLogin.ts

@@ -5,12 +5,9 @@ import { BASE_URL } from '@/shared';
 
 import { getTicketApi } from '../apis';
 
-// --- 1. "로그인 시작"을 위한 useMutation ---
-// 이 훅은 API를 호출하지 않아. 오직 카카오 로그인 페이지로 '이동'시키는 액션만 책임져.
 export const useKakaoLogin = () => {
   return useMutation({
     mutationFn: () => {
-      // 실제로는 Promise를 반환할 필요는 없지만, mutationFn은 Promise를 기대해.
       window.location.href = `${BASE_URL}/oauth2/authorization/kakao`;
       return Promise.resolve();
     },
@@ -20,17 +17,14 @@ export const useKakaoLogin = () => {
   });
 };
 
-// --- 2. "콜백 처리"를 위한 useQuery ---
 export const KakaoCallbackQueryKey = {
   callback: (ticket: string) => ['kakaoCallback', ticket],
 };
 
 export const useKakaoCallback = (ticket: string) => {
   return useQuery({
     queryKey: KakaoCallbackQueryKey.callback(ticket),
-    // code가 있을 때만 이 쿼리를 실행해.
     queryFn: () => getTicketApi(ticket),
-    // 이 쿼리는 한 번만 실행되면 되므로, 재시도나 캐시 관련 옵션을 조정할 수 있어.
     retry: 0,
     staleTime: Infinity,
   });

src/entities/index.ts

@@ -1,2 +1,3 @@
 export * from './auth';
 export * from './chart';
+export * from './map';

src/entities/map/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './utils';
+export * from './ui';

src/entities/map/types/index.ts

@@ -0,0 +1 @@
+export * from './map.type';

src/entities/map/types/map.type.ts

@@ -0,0 +1,5 @@
+export type MapAddress = {
+  address: string;
+  latitude: number;
+  longitude: number;
+};

src/shared/components/features/kakao-map/KakaoMap.tsx → src/entities/map/ui/KakaoMap.tsx

@@ -1,5 +1,7 @@
 import { Map, MapMarker, useKakaoLoader } from 'react-kakao-maps-sdk';
 
+import { Spinner } from '@/shared';
+
 type Props = {
   lat: number;
   lng: number;
@@ -16,16 +18,12 @@ export const KakaoMap = ({ lat, lng }: Props) => {
     lng: lng,
   };
 
-  if (loading) return <div>Loading...</div>;
-  if (error) return <div>Error: {error.message}</div>;
+  if (loading) return <Spinner />;
+
+  if (error) return <div>오류 : {error.message}</div>;
 
   return (
-    <Map // 지도를 표시할 Container
-      id='map'
-      center={center}
-      className='h-full w-full'
-      level={3} // 지도의 확대 레벨
-    >
+    <Map id='map' center={center} className='h-full w-full' level={3}>
       <MapMarker position={center} />
     </Map>
   );

src/entities/map/utils/index.ts

@@ -0,0 +1 @@
+export * from './search-coordinates';

src/entities/map/utils/search-coordinates.ts

@@ -0,0 +1,114 @@
+// 카카오맵 API 타입 정의
+declare global {
+  interface Window {
+    kakao: {
+      maps: {
+        services: {
+          Geocoder: new () => {
+            addressSearch: (
+              address: string,
+              callback: (result: KakaoGeocoderResult[], status: string) => void,
+            ) => void;
+          };
+        };
+      };
+    };
+  }
+}
+
+export interface KakaoGeocoderResult {
+  address: {
+    address_name: string;
+    b_code: string;
+    h_code: string;
+    main_address_no: string;
+    mountain_yn: string;
+    region_1depth_name: string;
+    region_2depth_name: string;
+    region_3depth_h_name: string;
+    region_3depth_name: string;
+    sub_address_no: string;
+    x: string;
+    y: string;
+  };
+  road_address: {
+    address_name: string;
+    building_name: string;
+    main_building_no: string;
+    region_1depth_name: string;
+    region_2depth_name: string;
+    region_3depth_name: string;
+    road_name: string;
+    sub_building_no: string;
+    underground_yn: string;
+    x: string;
+    y: string;
+    zone_no: string;
+  } | null;
+  x: string; // 경도
+  y: string; // 위도
+}
+
+export interface AddressSearchResult {
+  success: boolean;
+  data?: {
+    address: string;
+    latitude: number;
+    longitude: number;
+  };
+  error?: string;
+}
+
+/**
+ * 카카오맵 API를 사용하여 주소를 좌표로 변환하는 함수
+ * @param address 검색할 주소
+ * @returns Promise<AddressSearchResult>
+ */
+export const searchAddressToCoordinates = (address: string): Promise<AddressSearchResult> => {
+  return new Promise((resolve) => {
+    // 카카오맵 API가 로드되지 않은 경우
+    if (!window.kakao?.maps?.services?.Geocoder) {
+      resolve({
+        success: false,
+        error: '카카오맵 API가 로드되지 않았습니다.',
+      });
+      return;
+    }
+
+    const geocoder = new window.kakao.maps.services.Geocoder();
+
+    geocoder.addressSearch(address, (result: KakaoGeocoderResult[], status: string) => {
+      if (status === 'OK' && result.length > 0) {
+        const firstResult = result[0];
+        const addressInfo = firstResult.road_address || firstResult.address;
+
+        resolve({
+          success: true,
+          data: {
+            address: addressInfo.address_name,
+            latitude: parseFloat(firstResult.y),
+            longitude: parseFloat(firstResult.x),
+          },
+        });
+      } else if (status === 'ZERO_RESULT') {
+        resolve({
+          success: false,
+          error: '검색 결과가 없습니다.',
+        });
+      } else {
+        resolve({
+          success: false,
+          error: `검색 중 오류가 발생했습니다: ${status}`,
+        });
+      }
+    });
+  });
+};
+
+/**
+ * 카카오맵 API 스크립트가 로드되었는지 확인하는 함수
+ * @returns boolean
+ */
+export const isKakaoMapLoaded = (): boolean => {
+  return !!window.kakao?.maps?.services?.Geocoder;
+};