From b5c7f09bc94b48e6ca193db0719f98b62d2a4190 Mon Sep 17 00:00:00 2001 From: swcho Date: Wed, 30 Jul 2025 20:55:57 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=8B=9C=EB=8F=84,=20=EC=8B=9C?= =?UTF-8?q?=EA=B5=B0=EA=B5=AC=20zustand=20Store=EB=A1=9C=20=EB=A9=94?= =?UTF-8?q?=EC=9D=B8=20=ED=99=94=EB=A9=B4=EC=97=90=EC=84=9C=20=ED=98=B8?= =?UTF-8?q?=EC=B6=9C=20=ED=9B=84=20SearchModal.tsx=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sn/app/(map-layout)/map/page.tsx | 7 +++ .../map/searchModal/swagePrcsFclt.tsx | 57 ------------------- .../map/searchModal/swagePrcsZone.tsx | 16 +++--- .../components/ui/SidoSigunguSelectBox.tsx | 40 ++----------- apps/sn/app/store/useStore.ts | 41 +++++++++++++ 5 files changed, 62 insertions(+), 99 deletions(-) create mode 100644 apps/sn/app/store/useStore.ts diff --git a/apps/sn/app/(map-layout)/map/page.tsx b/apps/sn/app/(map-layout)/map/page.tsx index b2ed8ecd2..367bf421e 100644 --- a/apps/sn/app/(map-layout)/map/page.tsx +++ b/apps/sn/app/(map-layout)/map/page.tsx @@ -6,6 +6,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; import GisApp from "@common/business_components/ui/map/lib/gis.core"; import SearchModal from "./searchModal/searchModal"; import FeatureClickEventPopup from "./components/popupComponent/featureClickEventPopup"; +import useStore from "../../store/useStore"; // 타입 정의 추가 export type LyrStngProps = { @@ -38,6 +39,12 @@ const Map = () => { const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태 const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태 const [featureData, setFeatureData] = useState(null); // 선택된 피쳐 데이터 + const { fetchCtpvData, fetchSggData } = useStore(); + + useEffect(() => { + fetchCtpvData(); + fetchSggData(); + }, [fetchCtpvData, fetchSggData]); const fetchData = async () => { try { diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx index 85b32c9ef..53fd312dc 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx @@ -29,19 +29,13 @@ interface SwagePrcsFcltProps { } const SwagePrcsFclt: React.FC = ({ - var1, start1, - start2, end1, - end2, city, sgg, yearFilter, - setVar1, setStart1, - setStart2, setEnd1, - setEnd2, setCity, setCtpvName, setSgg, @@ -114,57 +108,6 @@ const SwagePrcsFclt: React.FC = ({ } }} /> - {/* 처리구역 면적 */} - {/* - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ""); - setStart2(val); - }} - onKeyDown={(e) => { - if (e.key === 'Enter') { - e.preventDefault(); // Enter 키 기본 동작 방지 - handleSearch(); - } - }} - /> - ~ - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ""); - setEnd2(val); - }} - onKeyDown={(e) => { - if (e.key === 'Enter') { - e.preventDefault(); // Enter 키 기본 동작 방지 - handleSearch(); - } - }} - /> */} - {/* 하수처리시설명 */} - {/* - { - setVar1(e.target.value); - }} - onKeyDown={(e) => { - if (e.key === 'Enter') { - e.preventDefault(); // Enter 키 기본 동작 방지 - handleSearch(); - } - }} - /> */} {/* 조회 버튼 */}
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx index a9065fb35..abeec54b9 100644 --- a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx +++ b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx @@ -40,13 +40,13 @@ const swagePrcsZone: React.FC = ({ }} onSigunguChange={setSgg} /> - + { - setVar1(e.target.value); + setVar2(e.target.value); }} onKeyDown={(e) => { if (e.key === 'Enter') { @@ -55,13 +55,13 @@ const swagePrcsZone: React.FC = ({ } }} /> - + { - setVar2(e.target.value); + setVar1(e.target.value); }} onKeyDown={(e) => { if (e.key === 'Enter') { diff --git a/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx index 96f7841b4..a3a138259 100644 --- a/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx +++ b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx @@ -1,7 +1,7 @@ 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'; +import useStore from '../../store/useStore'; interface Option { id: number; @@ -28,38 +28,10 @@ export function SidoSigunguSelectBox({ className = "", }: SidoSigunguSelectBoxProps) { - const [ctpvList, setCtpvList] = useState([]); - const [sggList, setSggList] = useState([]); - - // 선택된 시도에 따라 시군구 리스트를 가져옴 - 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); - } - ), []); + const { ctpv, sgg} = useStore(); useEffect(() => { (async () => { - await fetchCtpvData(); - await fetchSggData(); onSidoChange(0); onSigunguChange(0); if (setCtpvName && setSggName) { @@ -79,13 +51,13 @@ export function SidoSigunguSelectBox({ label="" selectArray={ [{ val: 0, text: '전체' }, - ...ctpvList.map(opt => ({ val: opt.id, text: opt.name })) + ...ctpv.map(opt => ({ val: opt.id, text: opt.name })) ] } value={sido} onSelectValue={val => { onSidoChange(Number(val)); - if (setCtpvName) setCtpvName(ctpvList.find(opt => Number(opt.id) === Number(val))?.name || ""); + if (setCtpvName) setCtpvName(ctpv.find(opt => Number(opt.id) === Number(val))?.name || ""); }} selectContentClass="z-[101]" /> @@ -96,7 +68,7 @@ export function SidoSigunguSelectBox({ label="" selectArray={ [{ val: 0, text: '전체' }, - ...sggList + ...sgg .filter(opt => String(opt.id).slice(0, 2) === String(sido)) .map(opt => ({ val: opt.id, text: opt.name })) ] @@ -104,7 +76,7 @@ export function SidoSigunguSelectBox({ value={sigungu} onSelectValue={val => { onSigunguChange(Number(val)) - if (setSggName) setSggName(sggList.find(opt => Number(opt.id) === Number(val))?.name || ""); + if (setSggName) setSggName(sgg.find(opt => Number(opt.id) === Number(val))?.name || ""); }} selectContentClass="z-[101]" /> diff --git a/apps/sn/app/store/useStore.ts b/apps/sn/app/store/useStore.ts new file mode 100644 index 000000000..518cce66b --- /dev/null +++ b/apps/sn/app/store/useStore.ts @@ -0,0 +1,41 @@ +import { useMemo } from "react"; +import { create } from "zustand"; +import { getGeoData } from "@/components/lib/api"; +import { get } from "http"; + +interface Option { id: number, name: string } + +interface SnStoreState { + ctpv: Option[]; + sgg: Option[]; + fetchCtpvData: () => Promise; + fetchSggData: () => Promise; +} + +const useStore = create((set) => ({ + // Define your store state and actions here + ctpv: [], + sgg: [], + fetchCtpvData: 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')); + set({ ctpv: ctpvList }); + }, + fetchSggData: 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')); + set({ sgg: sggList }); + } +})); + +export default useStore; \ No newline at end of file