diff --git a/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx new file mode 100644 index 000000000..d1f542583 --- /dev/null +++ b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx @@ -0,0 +1,159 @@ +import React, { useMemo } from "react"; +import { SelectBox2 } from "@common/business_components/ui/select/index-2"; + +interface Option { + id: number; + name: string; +} + +interface SidoSigunguSelectBoxProps { + sido: number; + sigungu: number; + onSidoChange: (id: number) => void; + onSigunguChange: (id: number) => void; + 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 sigunguMap: Record = { + 26: [ + { id: 0, name: '선택' }, + // ...부산산광역시의 시군구 추가 + ], + 28: [ + { id: 0, name: '선택' }, + // ...인천광역시의 시군구 추가 + ], + 30: [ + { id: 0, name: '선택' }, + // ...대전광역시의 시군구 추가 + ], + 41: [ + { id: 0, name: '선택' }, + { id: 41820, name: '가평군' }, + { id: 41550, name: '안성시' }, + { id: 41830, name: '양평군' }, + { id: 41670, name: '여주시' }, + { id: 41500, name: '이천시' }, + { id: 41430, name: '의왕시' }, + { id: 41150, name: '의정부시' }, + { id: 41480, name: '파주시' }, + { id: 41650, name: '포천시' }, + // ...경기도의 시군구 추가 + ], + 42: [ + { id: 0, name: '선택' }, + { id: 42170, name: '동해시' }, + { id: 42110, name: '춘천시' }, + { id: 42720, name: '홍천군' }, + // ...강원도의 시군구 추가 + ], + 44: [ + { id: 0, name: '선택' }, + { id: 44770, name: '서천군' }, + // ...충청남도의 시군구 추가 + ], + 45: [ + { id: 0, name: '선택' }, + { id: 45130, name: '군산시' }, + { id: 45190, name: '남원시' }, + { id: 45730, name: '무주군' }, + { id: 45800, name: '부안군' }, + { id: 45770, name: '순창군' }, + { id: 45140, name: '익산시' }, + { id: 45750, name: '임실군' }, + { id: 45710, name: '완주군' }, + { id: 45110, name: '전주시' }, + // ...전라북도의 시군구 추가 + ], + 46: [ + { id: 0, name: '선택' }, + { id: 46810, name: "강진군" }, + { id: 46770, name: "고흥군" }, + { id: 46720, name: "곡성군" }, + { id: 46730, name: "구례군" }, + { id: 46230, name: "광양시" }, + { id: 46170, name: "나주시" }, + { id: 46110, name: "목포시" }, + { id: 46840, name: "무안군" }, + { id: 46150, name: "순천시" }, + { id: 46910, name: "신안군" }, + { id: 46130, name: "여수시" }, + { id: 46890, name: "완도군" }, + // ...전라남도의 시군구 추가 + ], + 47: [ + { id: 0, name: '선택' }, + { id: 47130, name: "경주시" }, + { id: 47830, name: "고령군" }, + { id: 47190, name: "구미시" }, + { id: 47720, name: "군위군" }, + { id: 47150, name: "김천시" }, + { id: 47280, name: "문경시" }, + { id: 47920, name: "봉화군" }, + { id: 47250, name: "상주시" }, + { id: 47770, name: "영덕군" }, + { id: 47760, name: "영양군" }, + { id: 47210, name: "영주시" }, + { id: 47900, name: "예천군" }, + { id: 47930, name: "울진군" }, + { id: 47730, name: "의성군" }, + { id: 47750, name: "청송군" }, + { id: 47850, name: "칠곡군" }, + { id: 47110, name: "포항시" }, + // ...경상북도의 시군구 추가 + ], + 48: [ + { id: 0, name: '선택' }, + { id: 48310, name: "거제시" }, + { id: 48250, name: "김해시" }, + { id: 48270, name: "밀양시" }, + { id: 48220, name: "통영시" }, + // ...경상남도의 시군구 추가 + ], + // ...나머지 시도별 시군구 추가 +}; + +export function SidoSigunguSelectBox({ + sido, + sigungu, + onSidoChange, + onSigunguChange, + className = "", +}: SidoSigunguSelectBoxProps) { + // 선택된 시도에 따라 시군구 리스트를 가져옴 + const sigunguList = useMemo(() => sigunguMap[sido] || [{ id: 0, name: '선택' }], [sido]); + + return ( +
+ ({ val: opt.id, text: opt.name }))} + value={sido} + onSelectValue={val => onSidoChange(Number(val))} + /> + ({ val: opt.id, text: opt.name }))} + value={sigungu} + onSelectValue={val => onSigunguChange(Number(val))} + /> +
+ ); +} \ No newline at end of file diff --git a/apps/sn/app/components/ui/YearRangeSelectBox.tsx b/apps/sn/app/components/ui/YearRangeSelectBox.tsx new file mode 100644 index 000000000..5e9aa0b3e --- /dev/null +++ b/apps/sn/app/components/ui/YearRangeSelectBox.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import { SelectBox2 } from "@common/business_components/ui/select/index-2"; + +interface YearRangeSelectBoxProps { + start: string; + end: string; + onChange: (range: { start: string; end: string }) => void; + startLabel?: string; + endLabel?: string; + minYear?: number; + maxYear?: number; + className?: string; + selectClass?: string; +} + +export function YearRangeSelectBox({ + start, + end, + onChange, + startLabel = "시작년도", + endLabel = "", + minYear = 1900, + maxYear = new Date().getFullYear(), + className = "", + selectClass = "rounded-lg bg-white" +}: YearRangeSelectBoxProps) { + // 시작년도 배열 + const getStartYearArray = () => { + const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) => + (maxYear - i).toString() + ).filter(y => !end || parseInt(y) <= parseInt(end)); + return [ + { val: "0", text: "년" }, + ...years.map(y => ({ val: y, text: y })), + ]; + }; + // 종료년도 배열 + const getEndYearArray = () => { + const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) => + (maxYear - i).toString() + ).filter(y => !start || parseInt(y) >= parseInt(start)); + return [ + { val: "9999", text: "년" }, + ...years.map(y => ({ val: y, text: y })), + ]; + }; + + return ( +
+ onChange({ start: String(val), end })} + value={start} + /> + ~ + onChange({ start, end: String(val) })} + value={end} + /> +
+ ); +} \ No newline at end of file diff --git a/apps/sn/app/map/SearchModal.tsx b/apps/sn/app/map/SearchModal.tsx index b770b9dc2..6dc74eccc 100644 --- a/apps/sn/app/map/SearchModal.tsx +++ b/apps/sn/app/map/SearchModal.tsx @@ -1,11 +1,13 @@ import FeatureClickEventPopup from './featureClickEventPopup'; import React, { useState } from 'react'; import axios from 'axios'; -import { SelectBox, UiModal, UiTable } from '@common/business_components/ui'; -import { Button, Input } from '@common/components'; +import { UiModal, UiTable } from '@common/business_components/ui'; +import { Button, Input, Label } from '@common/components'; import { UiTable2 } from '@common/business_components/ui/table/index-2'; import { UITab2 } from '@common/business_components/ui/tab/index-2'; - +import { SelectBox2 } from '@common/business_components/ui/select/index-2'; +import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox'; +import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox'; @@ -13,9 +15,9 @@ const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`; // 탭 const TABS = [ - { key: 'basic', label: '기본정보' }, - { key: 'operation', label: '운영정보' }, - { key: 'report', label: '하수도정비기본계획보고서' }, + { val: 'basic', text: '기본정보' }, + { val: 'operation', text: '운영정보' }, + { val: 'report', text: '하수도정비기본계획보고서' }, ]; // 기본정보 '구분' 선택 목록 const BASIC_TYPES = [ @@ -29,9 +31,9 @@ const BASIC_TYPES = [ ]; // 운영정보 '구분' 선택 목록 const WORK_TYPES = [ - { key: 'maintenance', label: '보수 및 갱신' }, - { key: 'cleaning', label: '청소 및 준설' }, - { key: 'inspection', label: '점검 및 진단' }, + { val: 'maintenance', text: '보수 및 갱신' }, + { val: 'cleaning', text: '청소 및 준설' }, + { val: 'inspection', text: '점검 및 진단' }, ]; const YEARS = Array.from({ length: 100 }, (_, i) => `${2025 - i}`); @@ -135,119 +137,11 @@ const reportTableHeadlist = [ { id: 'regDate', title: '등록일자' }, ]; -const sidoList = [ - { 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 처리구역List = [ + { val: '0', text: '선택' }, + { val: 'a', text: 'A' }, + { val: 'b', text: 'B' }, ]; -const sigunguMap: Record = { - 26: [ - { id: 0, name: '선택' }, - // ...부산산광역시의 시군구 추가 - ], - 28: [ - { id: 0, name: '선택' }, - // ...인천광역시의 시군구 추가 - ], - 30: [ - { id: 0, name: '선택' }, - // ...대전광역시의 시군구 추가 - ], - 41: [ - { id: 0, name: '선택' }, - { id: 41820, name: '가평군' }, - { id: 41550, name: '안성시' }, - { id: 41830, name: '양평군' }, - { id: 41670, name: '여주시' }, - { id: 41500, name: '이천시' }, - { id: 41430, name: '의왕시' }, - { id: 41150, name: '의정부시' }, - { id: 41480, name: '파주시' }, - { id: 41650, name: '포천시' }, - // ...경기도의 시군구 추가 - ], - 42: [ - { id: 0, name: '선택' }, - { id: 42170, name: '동해시' }, - { id: 42110, name: '춘천시' }, - { id: 42720, name: '홍천군' }, - // ...강원도의 시군구 추가 - ], - 44: [ - { id: 0, name: '선택' }, - { id: 44770, name: '서천군' }, - // ...충청남도의 시군구 추가 - ], - 45: [ - { id: 0, name: '선택' }, - { id: 45130, name: '군산시' }, - { id: 45190, name: '남원시' }, - { id: 45730, name: '무주군' }, - { id: 45800, name: '부안군' }, - { id: 45770, name: '순창군' }, - { id: 45140, name: '익산시' }, - { id: 45750, name: '임실군' }, - { id: 45710, name: '완주군' }, - { id: 45110, name: '전주시' }, - // ...전라북도의 시군구 추가 - ], - 46: [ - { id: 0, name: '선택' }, - { id: 46810, name: "강진군" }, - { id: 46770, name: "고흥군" }, - { id: 46720, name: "곡성군" }, - { id: 46730, name: "구례군" }, - { id: 46230, name: "광양시" }, - { id: 46170, name: "나주시" }, - { id: 46110, name: "목포시" }, - { id: 46840, name: "무안군" }, - { id: 46150, name: "순천시" }, - { id: 46910, name: "신안군" }, - { id: 46130, name: "여수시" }, - { id: 46890, name: "완도군" }, - // ...전라남도의 시군구 추가 - ], - 47: [ - { id: 0, name: '선택' }, - { id: 47130, name: "경주시" }, - { id: 47830, name: "고령군" }, - { id: 47190, name: "구미시" }, - { id: 47720, name: "군위군" }, - { id: 47150, name: "김천시" }, - { id: 47280, name: "문경시" }, - { id: 47920, name: "봉화군" }, - { id: 47250, name: "상주시" }, - { id: 47770, name: "영덕군" }, - { id: 47760, name: "영양군" }, - { id: 47210, name: "영주시" }, - { id: 47900, name: "예천군" }, - { id: 47930, name: "울진군" }, - { id: 47730, name: "의성군" }, - { id: 47750, name: "청송군" }, - { id: 47850, name: "칠곡군" }, - { id: 47110, name: "포항시" }, - // ...경상북도의 시군구 추가 - ], - 48: [ - { id: 0, name: '선택' }, - { id: 48310, name: "거제시" }, - { id: 48250, name: "김해시" }, - { id: 48270, name: "밀양시" }, - { id: 48220, name: "통영시" }, - // ...경상남도의 시군구 추가 - ], - // ...나머지 시도별 시군구 추가 -}; - -const 처리구역List = ['선택', 'A', 'B']; interface SearchModalProps { open: boolean; @@ -265,8 +159,8 @@ const getDateString = (year: string, month: string, day: string, defaultDate: st }; const SearchModal: React.FC = ({ open, onOpenChange, onFeatureSelect }) => { - const [activeTab, setActiveTab] = useState(TABS[0]?.key ?? 'basic'); - const [workType, setWorkType] = useState(WORK_TYPES[0]?.key ?? ''); + const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? 'basic'); + const [workType, setWorkType] = useState(WORK_TYPES[0]?.val ?? ''); const [showTable, setShowTable] = useState(false); const [curPage, setCurPage] = useState(0); const [basicType, setBasicType] = useState(BASIC_TYPES[0]?.val ?? ''); @@ -320,9 +214,6 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature else if (basicType === 'tb_ms_swage_prcs_zone') dynamicHeadlist = swageZoneTableHeadlist; // 하수처리구역 else if (basicType === 'tb_ms_swage_mh') dynamicHeadlist = swageMhTableHeadlist; // 하수맨홀 - // 선택된 시도에 따라 시군구 리스트 가져오기 - const selectedSigunguList = sigunguMap[시도] || [{ id: 0, name: '선택' }]; - // 조회 버튼 클릭 시 1페이지로 이동하도록 수정 const handleSearch = () => { setCurPage(1); // 페이지를 1로 초기화 @@ -389,6 +280,46 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature } }, [activeTab, showTable, curPage, tableData.length]); + // 시작년도 selectArray 생성 함수 + function getStartYearArray({ + minYear = 1900, + maxYear = new Date().getFullYear(), + placeholder = '년', + endYear, + }: { + minYear?: number; + maxYear?: number; + placeholder?: string; + endYear?: string; + } = {}) { + const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) => + (maxYear - i).toString() + ).filter(y => !endYear || parseInt(y) <= parseInt(endYear)); + return [ + { val: '0', text: placeholder }, + ...years.map(y => ({ val: y, text: y })), + ]; + } + // 종료년도 selectArray 생성 함수 + function getEndYearArray({ + minYear = 1900, + maxYear = new Date().getFullYear(), + placeholder = '년', + startYear, + }: { + minYear?: number; + maxYear?: number; + placeholder?: string; + startYear?: string; + } = {}) { + const years = Array.from({ length: maxYear - minYear + 1 }, (_, i) => + (maxYear - i).toString() + ).filter(y => !startYear || parseInt(y) >= parseInt(startYear)); + return [ + { val: '9999', text: placeholder }, + ...years.map(y => ({ val: y, text: y })), + ]; + } // 하수관로용 CQL 필터 생성 const pplCqlFilters = () => { @@ -553,8 +484,8 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature <> {/* 탭 영역 */} ({ value: tab.key, label: tab.label, onClick: () => setActiveTab(tab.key), }))} + defaultValue={TABS[0]?.val} + tabList={TABS.map(tab => ({ value: tab.val, label: tab.text, onClick: () => setActiveTab(tab.val), }))} > {/* 각각의 탭 영역 */} {/* 기본정보 탭 */} @@ -563,24 +494,14 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature {/* 구분 */}
- - {/* setBasicType(String(value))} value={basicType} - /> */} - + />
{/* 분기처리: 하수관로 */} @@ -588,95 +509,71 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature
{/* 설치년도 */}
- - {/* 시작년도 */} - - ~ - {/* 종료년도 */} - - {/* 경과년도 */} - - { - // 숫자만 입력 허용 - const val = e.target.value.replace(/[^0-9]/g, ''); - setYearFilter({ ...yearFilter, 경과년도: val }); - }} + setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} + startLabel="설치년도" + endLabel="" /> + + {/* 경과년도 */} +
+ + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + setYearFilter({ ...yearFilter, 경과년도: val }); + }} + /> +
{/* 관경 */} - - 관경(mm) + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set시작1(val); }} /> ~ - { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set종료1(val); }} /> {/* 연장 */} - - 연장(m) + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set시작2(val); }} /> ~ - { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set종료2(val); @@ -685,42 +582,39 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature
{/* 용도코드 */} - - 용도코드 + { + value={변수1} + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); - set하수관로용도코드(val); + set변수1(val); }} /> {/* 재질코드 */} - - 재질코드 + { + value={변수2} + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); - set하수관로재질코드(val); + set변수2(val); }} /> {/* 행정읍면동코드 */} - - 행정읍면동코드 + { + value={변수3} + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); - set행정읍면동코드(val); + set변수3(val); }} />
@@ -731,63 +625,46 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature
{/* 가동개시일자 */}
- - {/* 시작일자 */} - - ~ - {/* 종료일자 */} - + setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} + startLabel="가동개시일자" + endLabel="" + /> {/* 시설용량 */} - - 시설용량 + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set시작1(val); }} /> - ~ - ~ + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set종료1(val); }} /> {/* 하수처리시설명 */} - - set변수1(e.target.value)} /> + + { + set변수1(e.target.value); + }} + />
)} @@ -795,22 +672,30 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature {basicType === 'tb_ms_swage_prcs_zone' && (
- - - - - - set변수1(e.target.value)} /> - - set변수2(e.target.value)} /> + + + { + set변수1(e.target.value); + }} + /> + + { + set변수2(e.target.value); + }} + />
)} @@ -820,43 +705,20 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature
{/* 설치년도 */}
- - {/* 시작년도 */} - - ~ - {/* 종료년도 */} - + setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} + startLabel="설치년도" + endLabel="" + /> {/* 경과년도 */} - - 경과년도 + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); setYearFilter({ ...yearFilter, 경과년도: val }); @@ -864,40 +726,37 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature />
-
+
{/* 용도코드 */} - - 용도코드 + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set변수1(val); }} /> {/* 하수맨홀 구경 */} - - 구경(mm) + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set시작1(val); }} /> ~ - { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set종료1(val); @@ -912,43 +771,20 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature
{/* 설치년도 */}
- - {/* 시작년도 */} - - ~ - {/* 종료년도 */} - + setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} + startLabel="설치년도" + endLabel="" + /> {/* 경과년도 */} - - 경과년도 + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); setYearFilter({ ...yearFilter, 경과년도: val }); @@ -956,52 +792,48 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature />
-
+
{/* 일일처리용량 - 오수맨홀 */} - - 일일처리용량 + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set시작1(val); }} /> ~ - { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set종료1(val); }} /> {/* 우수양수능력 - 우수맨홀 */} - - 우수양수능력 + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set시작2(val); }} /> ~ - { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set종료2(val); @@ -1016,43 +848,20 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature
{/* 설치년도 */}
- - {/* 시작년도 */} - - ~ - {/* 종료년도 */} - + setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} + startLabel="설치년도" + endLabel="" + /> {/* 경과년도 */} - - 경과년도 + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); setYearFilter({ ...yearFilter, 경과년도: val }); @@ -1060,30 +869,35 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature />
-
+
{/* 하천명 */} - - set변수1(e.target.value)} /> + + { + set변수1(e.target.value); + }} + /> {/* 계획방류량 */} - - 계획방류량 + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set시작1(val); }} /> ~ - { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); set종료1(val); @@ -1103,57 +917,31 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature {activeTab === 'operation' && (
- - + /> {/* 설치년도 */}
- - {/* 시작년도 */} - - ~ - {/* 종료년도 */} - + setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} + startLabel="설치년도" + endLabel="" + /> {/* 경과년도 */} - - 경과년도 + { + onChange={(e) => { // 숫자만 입력 허용 const val = e.target.value.replace(/[^0-9]/g, ''); setYearFilter({ ...yearFilter, 경과년도: val }); @@ -1172,54 +960,37 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature
{/* 시도, 시군구, 하수처리구역 한 줄 */}
- - - - - - - - - {/* 시작일자 */} - - ~ - {/* 종료일자 */} - + + ({ val: opt.val, text: opt.text }))} + onSelectValue={val => set처리구역(String(val))} + value={처리구역} + /> + { + // 숫자만 입력 허용 + const val = e.target.value.replace(/[^0-9]/g, ''); + set변수1(val); + }} + /> + setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })} + startLabel="승인년도" + endLabel="" + />
{/* 조회 버튼 중앙 정렬 */}
@@ -1253,7 +1024,7 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature > {/* 선택된 탭의 label */} < div className="m-2 text-2xl font-bold mb-2" > - {TABS.find(tab => tab.key === activeTab)?.label} + {TABS.find(tab => tab.val === activeTab)?.text} {/* 조회 결과 라벨 및 건수 표시 */} { (() => { @@ -1264,10 +1035,10 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature activeTab === 'basic' ? BASIC_TYPES.find(type => type.val === basicType)?.val : activeTab === 'operation' - ? WORK_TYPES.find(type => type.key === workType)?.label + ? WORK_TYPES.find(type => type.val === workType)?.text : activeTab === 'report' ? '하수도정비기본계획보고서' - : TABS.find(tab => tab.key === activeTab)?.label; + : TABS.find(tab => tab.val === activeTab)?.text; return (
▶ {label} 조회 결과 @@ -1311,7 +1082,7 @@ const SearchModal: React.FC = ({ open, onOpenChange, onFeature w-[60vw] max-w-none max-h-none - overflow-hidden + overflow-visible z-[101] `} body={renderBody()} diff --git a/packages/common/business_components/src/ui/select/index-2.tsx b/packages/common/business_components/src/ui/select/index-2.tsx new file mode 100644 index 000000000..8ff1f4582 --- /dev/null +++ b/packages/common/business_components/src/ui/select/index-2.tsx @@ -0,0 +1,45 @@ +/** + * @remarks + * 이 버전은 SearchModal에서 사용하기 위해 `SelectContent`의 z-index를 `z-[101]`로 수정하였습니다. + */ +import { Label } from "@common/components"; +import React from "react"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./lib/selectBox"; + +/** 차트 기본 스타일 */ +interface SelectBox1 { + text:string, + val:string|number +} + +const SelectBox2 = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & { + label:string, + selectClass:string|undefined, + className:string, + selectArray:SelectBox1[], + onSelectValue:(val:string|number)=>void, + value?: string|number + } +>(({ label, className, selectClass, selectArray, onSelectValue, value }, ref)=>{ + const placeHolder = selectArray?.[0]?.text ?? ""; + + return ( +
+ {label && } + +
+ ) +}) + +export { SelectBox2 };