diff --git a/src/app/(pages)/alba/[formId]/page.tsx b/src/app/(pages)/alba/[formId]/page.tsx index d1d8a2fb..057a316d 100644 --- a/src/app/(pages)/alba/[formId]/page.tsx +++ b/src/app/(pages)/alba/[formId]/page.tsx @@ -8,27 +8,52 @@ import FormDetails from "../components/FormDetail"; import RecruitInformation from "../components/RecruitInfomation"; import ApplicationStatus from "../components/ApplicationStatus"; import { useFormDetail } from "@/hooks/queries/form/detail/useFormDetail"; +import { Map, MapMarker, useKakaoLoader } from "react-kakao-maps-sdk"; +import Script from "next/script"; + +interface Coords { + lat: number; + lng: number; +} export default function AlbaFormDetailPage() { - const { formId } = useParams(); // useParams로 formId 추출 + const { formId } = useParams(); const [formIdState, setFormIdState] = useState(0); const { user } = useUser(); const isOwner = user?.role === "OWNER"; + // 카카오맵 관련 상태 + const [coords, setCoords] = useState({ lat: 37.5665, lng: 126.978 }); + const [loading, error] = useKakaoLoader({ + appkey: process.env.NEXT_PUBLIC_KAKAO_APP_KEY as string, + libraries: ["services"], + }); + useEffect(() => { - // formId가 문자열로 전달되므로 숫자로 변환하여 상태에 저장 if (formId) { - setFormIdState(Number(formId)); // formId를 숫자로 변환하여 상태에 저장 + setFormIdState(Number(formId)); } }, [formId]); - // formId가 설정되면 useFormDetail 호출 - const { albaFormDetailData, isLoading, error } = useFormDetail({ formId: formIdState }); + const { albaFormDetailData, isLoading, error: formError } = useFormDetail({ formId: formIdState }); - if (isLoading) return
Loading...
; + // 주소로 좌표 검색 + useEffect(() => { + if (!albaFormDetailData?.location) return; - if (error) return
Error: 데이터를 불러오는데 문제가 발생했습니다.
; + if (typeof window === "undefined" || !window.kakao?.maps?.services) return; + const geocoder = new window.kakao.maps.services.Geocoder(); + geocoder.addressSearch(albaFormDetailData.location, (result: any[], status: string) => { + if (status === window.kakao.maps.services.Status.OK && result.length > 0) { + const { x, y } = result[0]; + setCoords({ lat: parseFloat(y), lng: parseFloat(x) }); + } + }); + }, [albaFormDetailData?.location]); + + if (isLoading) return
Loading...
; + if (formError) return
Error: 데이터를 불러오는데 문제가 발생했습니다.
; if (!albaFormDetailData) return
데이터가 없습니다.
; return ( @@ -40,9 +65,24 @@ export default function AlbaFormDetailPage() {
+ + {/* 카카오맵 스크립트 */} +