[Feat]: 모임상세 카카오지도 연동 및 UI 작업

package.json

@@ -58,6 +58,7 @@
     "react": "19.2.3",
     "react-daum-postcode": "^3.2.0",
     "react-dom": "19.2.3",
+    "react-kakao-maps-sdk": "^1.2.0",
     "sockjs-client": "^1.6.1",
     "swiper": "^12.0.3",
     "tailwind-merge": "^3.3.1",
@@ -100,6 +101,7 @@
     "husky": "^9.1.7",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
+    "kakao.maps.d.ts": "^0.1.40",
     "lint-staged": "^16.2.4",
     "msw": "^2.11.2",
     "orval": "^7.13.2",

src/components/pages/create-group/modals/location-search-modal/index.tsx

@@ -15,6 +15,7 @@ export const LocationSearchModal = ({ LocationField }: Props) => {
 
   const handleComplete = (data: Address) => {
     const fullAddress = `${data.sido} ${data.sigungu} ${data.bname}`;
+    console.log(data);
     LocationField.handleChange(fullAddress);
     close();
   };

src/components/pages/group/group-buttons/index.tsx

@@ -24,7 +24,7 @@ export const GroupButtons = ({
   const canJoin = !isMember && !isPending && !isFinished;
 
   return (
-    <div className='sticky bottom-[56px] border-t-1 border-gray-200 bg-white px-4 py-3'>
+    <div className='sticky bottom-[56px] z-100 border-t-1 border-gray-200 bg-white px-4 py-3'>
       {canJoin && (
         <JoiningButton
           conditions={{ isGroupFull: status === 'FULL', isFreeGroup: joinPolicy === 'FREE' }}

src/components/pages/group/group-descriptions/description-sections/description-map/index.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Map, MapMarker, useKakaoLoader } from 'react-kakao-maps-sdk';
+
+import { EmptyState } from '@/components/layout/empty-state';
+import { GetGroupDetailsResponse } from '@/types/service/group';
+
+interface Props {
+  location: GetGroupDetailsResponse['address']['location'];
+}
+
+export const DescriptionMap = ({ location }: Props) => {
+  const [coords, setCoords] = useState({ lat: 33.450701, lng: 126.570667 });
+
+  const [loading, error] = useKakaoLoader({
+    appkey: process.env.NEXT_PUBLIC_KAKAOMAP_KEY as string,
+    libraries: ['clusterer', 'drawing', 'services'],
+  });
+
+  useEffect(() => {
+    // 카카오지도 SDK 로딩 끝나면 실행
+    if (loading) return;
+
+    const geocoder = new kakao.maps.services.Geocoder();
+
+    geocoder.addressSearch(location, (result, status) => {
+      if (status === kakao.maps.services.Status.OK) {
+        setCoords({
+          lat: parseFloat(result[0].y),
+          lng: parseFloat(result[0].x),
+        });
+      }
+    });
+  }, [loading]);
+
+  return (
+    <div className='relative mt-6 h-60 w-full overflow-hidden rounded-xl border border-gray-300 bg-gray-100'>
+      {!error ? (
+        <Map id='map' className='h-60 w-full' center={coords} level={3}>
+          <MapMarker position={coords} />
+        </Map>
+      ) : (
+        <EmptyState>지도를 불러올 수 없습니다.</EmptyState>
+      )}
+    </div>
+  );
+};

src/components/pages/group/group-descriptions/description-sections/index.ts

@@ -1,4 +1,5 @@
 export { DescriptionDetail } from './description-detail';
+export { DescriptionMap } from './description-map';
 export { DescriptionProfile } from './description-profile';
 export { DescriptionProgress } from './description-progress';
 export { DescriptionSetting } from './description-setting';

src/components/pages/group/group-descriptions/index.tsx

@@ -1,5 +1,6 @@
 import {
   DescriptionDetail,
+  DescriptionMap,
   DescriptionProfile,
   DescriptionProgress,
   DescriptionSetting,
@@ -57,6 +58,7 @@ export const GroupDescriptions = ({
       <DescriptionTags tags={tags} />
       <DescriptionDetail detail={description} />
       <DescriptionSetting setting={{ address, startTime }} />
+      <DescriptionMap location={address.location} />
       <DescriptionProgress createdAt={createdAt} progress={{ maxParticipants, participantCount }} />
     </section>
   );