From c89c588487632650abb4e7be3c53a08fab4e12ab Mon Sep 17 00:00:00 2001
From: swcho <swcho@mind-one.co.kr>
Date: Wed, 30 Jul 2025 16:25:09 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=8B=9C=EB=8F=84,=20=EC=8B=9C=EA=B5=B0?=
 =?UTF-8?q?=EA=B5=AC=20=ED=95=98=EB=93=9C=EC=BD=94=EB=94=A9=20->=20?=
 =?UTF-8?q?=EC=95=8C=EC=97=90=EC=8A=A4=EC=9B=90=20API=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20(=EC=9D=B4=ED=9B=84=20Store=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=ED=95=84=EC=9A=94)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ui/SidoSigunguSelectBox.tsx    | 81 +++++++++++++++----
 1 file changed, 65 insertions(+), 16 deletions(-)

diff --git a/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx
index 00f8f1dbb..e32875d42 100644
--- a/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx
+++ b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx
@@ -1,6 +1,7 @@
-import React, { useMemo } from "react";
+import React, { useState, useMemo, useEffect } from "react";
 import { SelectBox } from '@common/business_components/ui'
 import { Label } from '@common/components';
+import { getGeoData } from '@/components/lib/api';
 
 interface Option {
   id: number;
@@ -15,19 +16,19 @@ interface SidoSigunguSelectBoxProps {
   className?: string;
 }
 
-const sidoList: { id: number, name: string }[] = [
-  { id: 0, name: '전체' },
-  { id: 26, name: '부산광역시' },
-  { id: 28, name: '인천광역시' },
-  { id: 30, name: '대전광역시' },
-  { id: 41, name: '경기도' },
-  { id: 42, name: '강원도' },
-  { id: 44, name: '충청남도' },
-  { id: 45, name: '전라북도' },
-  { id: 46, name: '전라남도' },
-  { id: 47, name: '경상북도' },
-  { id: 48, name: '경상남도' },
-];
+// const sidoList: { id: number, name: string }[] = [
+//   { id: 0, name: '전체' },
+//   { id: 26, name: '부산광역시' },
+//   { id: 28, name: '인천광역시' },
+//   { id: 30, name: '대전광역시' },
+//   { id: 41, name: '경기도' },
+//   { id: 42, name: '강원도' },
+//   { id: 44, name: '충청남도' },
+//   { id: 45, name: '전라북도' },
+//   { id: 46, name: '전라남도' },
+//   { id: 47, name: '경상북도' },
+//   { id: 48, name: '경상남도' },
+// ];
 const sigunguMap: Record<number, { id: number; name: string }[]> = {
   26: [
     { id: 0, name: '전체' },
@@ -134,9 +135,47 @@ export function SidoSigunguSelectBox({
   onSigunguChange,
   className = "",
 }: SidoSigunguSelectBoxProps) {
+
+  const [ctpvList, setCtpvList] = useState<Option[]>([]);
+  const [sggList, setSggList] = useState<Option[]>([]);
+
   // 선택된 시도에 따라 시군구 리스트를 가져옴
+  const fetchCtpvData = useMemo(() => (
+    async () => {
+      const ctpvData = await getGeoData('/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo%3Atb_ms_ctpv&outputFormat=application%2Fjson');
+      const ctpvList: Option[] = ctpvData.features
+        .map((feature: any) => ({
+          id: feature.properties.mctpv_cd.trim(),
+          name: feature.properties.mctpv_korn_nm
+        }))
+        .sort((a: Option, b: Option) => a.name.localeCompare(b.name, 'ko')); // 가나다순 정렬
+      setCtpvList(ctpvList);
+    }
+  ), []);
+
+  // 선택된 시도에 따라 시군구 리스트를 가져옴
+  const fetchSggData = useMemo(() => (
+    async () => {
+      const sggData = await getGeoData('/hasudo/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=hasudo%3Atb_ms_sgg&outputFormat=application%2Fjson');
+      const sggList: Option[] = sggData.features
+      .map((feature: any) => ({ id: feature.properties.sgg_cd, name: feature.properties.sgg_korn_nm }))
+      .sort((a: Option, b: Option) => a.name.localeCompare(b.name, 'ko')); // 가나다순 정렬
+      setSggList(sggList);
+    }
+  ), []);
+
+  useEffect(() => {
+    (async () => {
+      await fetchCtpvData();
+      await fetchSggData();
+      onSidoChange(0);
+      onSigunguChange(0);
+    })();
+  }, []);
+
   const sigunguList = useMemo(() => sigunguMap[sido] || [{ id: 0, name: '전체' }], [sido]);
 
+
   return (
     <div className={`flex items-center justify-center ${className} mr-8`}>
       <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
@@ -144,7 +183,11 @@ export function SidoSigunguSelectBox({
         className="w-60 mr-8"
         selectClass="rounded-lg bg-white"
         label=""
-        selectArray={sidoList.map(opt => ({ val: opt.id, text: opt.name }))}
+        selectArray={
+          [{ val: 0, text: '전체' },
+          ...ctpvList.map(opt => ({ val: opt.id, text: opt.name }))
+          ]
+        }
         value={sido}
         onSelectValue={val => onSidoChange(Number(val))}
         selectContentClass="z-[101]"
@@ -154,7 +197,13 @@ export function SidoSigunguSelectBox({
         className="w-48"
         selectClass="w-48 rounded-lg bg-white truncate"
         label=""
-        selectArray={sigunguList.map(opt => ({ val: opt.id, text: opt.name }))}
+        selectArray={
+          [{ val: 0, text: '전체' },
+          ...sggList
+            .filter(opt => String(opt.id).slice(0, 2) === String(sido))
+            .map(opt => ({ val: opt.id, text: opt.name }))
+          ]
+        }
         value={sigungu}
         onSelectValue={val => onSigunguChange(Number(val))}
         selectContentClass="z-[101]"