From c642615d361794215c5a8505b053904aa07aba97 Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Thu, 12 Dec 2024 13:25:06 +0900
Subject: [PATCH 1/2] =?UTF-8?q?chore:=20SelectProgressModal=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EB=B2=84=ED=8A=BC=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/modal/modals/confirm/SelectProgressModal.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
index e60b208a..1cd71c05 100644
--- a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
+++ b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
@@ -86,14 +86,16 @@ const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModa
               onClick={handleCancel}
               color="gray"
               disabled={isSubmitting}
-              className="h-[58px] w-full text-sm font-medium hover:bg-grayscale-200 md:h-[72px] md:text-base"
+              width="sm"
+              className="h-[48px] text-base font-medium md:h-[62px] md:text-lg"
             >
               취소
             </Button>
             <Button
               type="submit"
               disabled={isSubmitting}
-              className="h-[58px] w-full text-sm font-medium md:h-[72px] md:text-base"
+              width="sm"
+              className="h-[48px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white md:h-[62px] md:text-lg"
             >
               {isSubmitting ? "변경 중..." : "선택하기"}
             </Button>

From e1ce8cf11f81529ec00f0432efc38a0ddcb664f3 Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Thu, 12 Dec 2024 14:07:00 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=95=8C=EB=B0=94=ED=8F=BC=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20kakao=20map?=
 =?UTF-8?q?=20=EC=A7=80=EB=8F=84=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/alba/[formId]/page.tsx        | 56 +++++++++--
 .../modals/confirm/SelectProgressModal.tsx    | 93 ++++++++++---------
 2 files changed, 97 insertions(+), 52 deletions(-)

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<number>(0);
   const { user } = useUser();
   const isOwner = user?.role === "OWNER";
 
+  // 카카오맵 관련 상태
+  const [coords, setCoords] = useState<Coords>({ 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 <div>Loading...</div>;
+  // 주소로 좌표 검색
+  useEffect(() => {
+    if (!albaFormDetailData?.location) return;
 
-  if (error) return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
+    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 <div>Loading...</div>;
+  if (formError) return <div>Error: 데이터를 불러오는데 문제가 발생했습니다.</div>;
   if (!albaFormDetailData) return <div>데이터가 없습니다.</div>;
 
   return (
@@ -40,9 +65,24 @@ export default function AlbaFormDetailPage() {
         <div className="w-full space-y-10 sm:w-[600px] md:w-[770px]">
           <FormHeader albaFormDetailData={albaFormDetailData} />
           <FormDetails albaFormDetailData={albaFormDetailData} />
+
+          {/* 카카오맵 스크립트 */}
+          <Script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js" strategy="afterInteractive" />
+
           {/* 지도 영역 */}
-          <div className="h-[200px] bg-black-100 sm:h-[300px] md:h-[400px]">카카오지도</div>
+          <div className="h-[280px] md:h-[320px]">
+            {error && <div className="text-red-500">Map load error: {String(error)}</div>}
+            {loading && <div className="flex h-full items-center justify-center">Loading map...</div>}
+            {!loading && !error && (
+              <Map center={coords} style={{ width: "100%", height: "100%" }} level={3}>
+                <MapMarker position={coords}>
+                  <div className="p-2">{albaFormDetailData.title}</div>
+                </MapMarker>
+              </Map>
+            )}
+          </div>
         </div>
+
         {/* 오른쪽 영역 */}
         <div className="flex w-full flex-col space-y-12 sm:w-[400px] md:w-[640px]">
           <RecruitInformation albaFormDetailData={albaFormDetailData} />
diff --git a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
index 1cd71c05..a3da87b9 100644
--- a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
+++ b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
@@ -57,52 +57,57 @@ const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModa
   };
 
   return (
-    <div className={cn("h-[454px] w-[375px] rounded-3xl bg-white p-4 shadow-lg md:h-[566px] md:w-[440px]", className)}>
-      <form onSubmit={handleSubmit} className="flex h-full flex-col items-center">
-        <div className="text-center">
-          <h2 className="mb-2 text-lg font-bold md:mb-3 md:text-2xl">진행상태 선택</h2>
-          <p className="text-muted-foreground mb-6 text-sm md:mb-8 md:text-base">현재 진행상태를 알려주세요.</p>
-        </div>
-        <div className="h-auto w-full md:h-[264px] md:w-[360px]">
-          <RadioGroup value={selectedValue} onValueChange={handleValueChange} className="space-y-3">
-            {radioOptions.map((option) => (
-              <RadioBtn
-                key={option.id}
-                label={option.label}
-                name="progress-status"
-                value={option.value}
-                id={option.id}
-                position={positionOptions.POSITION_RIGHT}
-                className="text-sm md:text-base"
+    <>
+      <div className="bg-black fixed inset-0 z-50 bg-opacity-50" onClick={onClose} />
+      <div
+        className={cn("h-[454px] w-[375px] rounded-3xl bg-white p-4 shadow-lg md:h-[566px] md:w-[440px]", className)}
+      >
+        <form onSubmit={handleSubmit} className="flex h-full flex-col items-center">
+          <div className="text-center">
+            <h2 className="mb-2 text-lg font-bold md:mb-3 md:text-2xl">진행상태 선택</h2>
+            <p className="text-muted-foreground mb-6 text-sm md:mb-8 md:text-base">현재 진행상태를 알려주세요.</p>
+          </div>
+          <div className="h-auto w-full md:h-[264px] md:w-[360px]">
+            <RadioGroup value={selectedValue} onValueChange={handleValueChange} className="space-y-3">
+              {radioOptions.map((option) => (
+                <RadioBtn
+                  key={option.id}
+                  label={option.label}
+                  name="progress-status"
+                  value={option.value}
+                  id={option.id}
+                  position={positionOptions.POSITION_RIGHT}
+                  className="text-sm md:text-base"
+                  disabled={isSubmitting}
+                />
+              ))}
+            </RadioGroup>
+          </div>
+          <div className="mt-auto w-full md:w-[360px]">
+            <div className="grid grid-cols-2 gap-4">
+              <Button
+                type="button"
+                onClick={handleCancel}
+                color="gray"
+                disabled={isSubmitting}
+                width="sm"
+                className="h-[48px] text-base font-medium md:h-[62px] md:text-lg"
+              >
+                취소
+              </Button>
+              <Button
+                type="submit"
                 disabled={isSubmitting}
-              />
-            ))}
-          </RadioGroup>
-        </div>
-        <div className="mt-auto w-full md:w-[360px]">
-          <div className="grid grid-cols-2 gap-4">
-            <Button
-              type="button"
-              onClick={handleCancel}
-              color="gray"
-              disabled={isSubmitting}
-              width="sm"
-              className="h-[48px] text-base font-medium md:h-[62px] md:text-lg"
-            >
-              취소
-            </Button>
-            <Button
-              type="submit"
-              disabled={isSubmitting}
-              width="sm"
-              className="h-[48px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white md:h-[62px] md:text-lg"
-            >
-              {isSubmitting ? "변경 중..." : "선택하기"}
-            </Button>
+                width="sm"
+                className="h-[48px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white md:h-[62px] md:text-lg"
+              >
+                {isSubmitting ? "변경 중..." : "선택하기"}
+              </Button>
+            </div>
           </div>
-        </div>
-      </form>
-    </div>
+        </form>
+      </div>
+    </>
   );
 };