fix: 시도, 시군구 하드코딩 -> 알에스원 API로 변경 (이후 Store로 변경 필요)

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]"