[기능 구현] 카카오맵 API를 활용한 지도 표시 기능 구현

.github/workflows/deploy.yml

@@ -17,6 +17,10 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@master
 
+      - name: .env setting
+        run: |
+          echo "VITE_KAKAOMAP_API_KEY=${{ secrets.VITE_KAKAOMAP_API_KEY }}" >> .env
+
       - name: Install pnpm
         uses: pnpm/action-setup@v4
         with:

.gitignore

@@ -23,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Environment variables
+.env

package.json

@@ -38,6 +38,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.62.0",
+    "react-kakao-maps-sdk": "^1.2.0",
     "react-router-dom": "^7.8.1",
     "recharts": "^3.1.2",
     "sonner": "^2.0.7",
@@ -66,6 +67,7 @@
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
+    "kakao.maps.d.ts": "^0.1.40",
     "lint-staged": "^16.1.5",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "tw-animate-css": "^1.3.7",

src/features/main/ui/MapSection.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/shared';
+import { Button, KakaoMap } from '@/shared';
 
 import { HOUSE_TYPES } from '../constants';
 
@@ -15,10 +15,7 @@ export const MapSection = () => {
 
       {/* TODO: 추후 지도 (카카오맵, 네이버 지도, 구글 맵 등) 컴포넌트 추가 */}
       <div className='flex flex-1 items-center justify-center bg-gray-100'>
-        <div className='text-center text-gray-500'>
-          <p className='mb-2 text-lg font-medium'>지도가 여기에 표시됩니다</p>
-          <p className='text-sm'>주소를 입력하고 진단하기를 눌러보세요</p>
-        </div>
+        <KakaoMap lat={35.1690637154991} lng={129.136018268316} />
       </div>
     </div>
   );

src/shared/components/features/index.ts

@@ -1,3 +1,4 @@
 export * from './layout';
 export * from './header';
 export * from './optimized-image';
+export * from './kakao-map';

src/shared/components/features/kakao-map/KakaoMap.tsx

@@ -0,0 +1,32 @@
+import { Map, MapMarker, useKakaoLoader } from 'react-kakao-maps-sdk';
+
+type Props = {
+  lat: number;
+  lng: number;
+};
+
+export const KakaoMap = ({ lat, lng }: Props) => {
+  const [loading, error] = useKakaoLoader({
+    appkey: import.meta.env.VITE_KAKAOMAP_API_KEY,
+    libraries: ['clusterer', 'drawing', 'services'],
+  });
+
+  const center = {
+    lat: lat,
+    lng: lng,
+  };
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <Map // 지도를 표시할 Container
+      id='map'
+      center={center}
+      className='h-full w-full'
+      level={3} // 지도의 확대 레벨
+    >
+      <MapMarker position={center} />
+    </Map>
+  );
+};

src/shared/components/features/kakao-map/index.ts

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

tsconfig.app.json

@@ -27,7 +27,9 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+
+    "types": ["kakao.maps.d.ts"]
   },
   "include": ["src"]
 }

tsconfig.json

@@ -1,10 +1,9 @@
 {
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
   "compilerOptions": {
+    "types": ["kakao.maps.d.ts"],
+
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]