ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: searchModal '운영정보' 탭 UI 컴포넌트 분리

Browse Source
This commit is contained in:
swcho
2025-07-24 09:10:30 +09:00
parent 402b9a5539
commit 3a191e8d06
3 changed files with 147 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
+9 -9
View File
@@ -6,7 +6,7 @@ import { SelectBox } from '@common/business_components/ui';
import { Button, Input, Label } from '@common/components';
// 기본정보 '구분' 선택 목록
const BASIC_TYPES = [
export const BASIC_TYPES = [
{ val: "tb_ms_swage_ppl", text: "하수관로" },
{ val: "tb_il_swage_prcs_fclt", text: "하수처리시설" },
{ val: "tb_ms_swage_prcs_zone", text: "하수처리구역" },
@@ -16,7 +16,7 @@ const BASIC_TYPES = [
];
interface BasicTabProps {
open: boolean;
open?: boolean;
basicType: string;
city: number;
sgg: number;
@@ -27,11 +27,11 @@ interface BasicTabProps {
var1: string;
var2: string;
yearFilter: { start: string; end: string; };
onOpenChange: (open: boolean) => void;
onFeatureSelect: (row: any) => void;
handleSearch: () => void;
// setTableData: (data: any[]) => void;
// setTableCount: (count: number) => void;
// onOpenChange?: (open: boolean) => void;
// onFeatureSelect?: (row: any) => void;
// setTableData?: (data: any[]) => void;
// setTableCount?: (count: number) => void;
setBasicType: (type: string) => void;
setCity: (city: number) => void;
setSgg: (sgg: number) => void;
@@ -45,7 +45,7 @@ interface BasicTabProps {
}
const BasicTab: React.FC<BasicTabProps> = ({
open,
// open,
basicType,
city,
sgg,
@@ -56,9 +56,9 @@ const BasicTab: React.FC<BasicTabProps> = ({
var1,
var2,
yearFilter,
onOpenChange,
onFeatureSelect,
handleSearch,
// onOpenChange,
// onFeatureSelect,
// setTableData,
// setTableCount,
setBasicType,
apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
+123
View File
@@ -0,0 +1,123 @@
import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
import { SelectBox } from '@common/business_components/ui';
import { Button, Input, Label } from '@common/components';
import React from 'react';
//import { useDcTree, flattenFolders, useSggCd, useCityCd } from './components/searchModalReportApi';
// import { useBizByFcltStore } from "../../../store/StoreProvider";
// 운영정보 '구분' 선택 목록
// const WORK_TYPES = [
// { val: "maintenance", text: "보수 및 갱신" },
// { val: "cleaning", text: "청소 및 준설" },
// { val: "inspection", text: "점검 및 진단" },
// ];
export const WORK_TYPES = [
{ val: "200", text: "보수 및 갱신(개대체)" },
{ val: "201", text: "보수 및 갱신(유지보수)" },
{ val: "204", text: "보수 및 갱신(단순보수)" },
{ val: "100", text: "점검 및 진단" },
{ val: "203", text: "청소 및 준설" },
];
// const BIZ_SE_CD = useBizByFcltStore(state => state.BIZ_SE_CD);
export const BIZ_SE_CD = [
{ lwpoCd: "100", lwpoCdNm: "관로기술진단" },
{ lwpoCd: "200", lwpoCdNm: "개대체" },
{ lwpoCd: "201", lwpoCdNm: "유지보수" },
{ lwpoCd: "203", lwpoCdNm: "청소, 준설" },
{ lwpoCd: "204", lwpoCdNm: "단순보수" },
];
// const BIZ_TY_CD = useBizByFcltStore(state => state.BIZ_TY_CD);
export const BIZ_TY_CD = [
{ lwpoCd: "0", lwpoCdNm: "전체" },
{ lwpoCd: "SV", lwpoCdNm: "용역" },
{ lwpoCd: "SF", lwpoCdNm: "자체" },
{ lwpoCd: "SC", lwpoCdNm: "공사" },
];
export const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map(item => ({
val: item.lwpoCd,
text: item.lwpoCdNm,
}));
interface OperationTabProps {
open: boolean;
workType: string;
var1: string;
var2: string;
yearFilter: { start: string; end: string; };
handleSearch: () => void;
// onOpenChange: (open: boolean) => void;
// setTableData: (data: any[]) => void;
// setTableCount: (count: number) => void;
setWorkType: (type: string) => void;
setYearFilter: (filter: { start: string; end: string }) => void;
setVar1: (value: string) => void;
setVar2: (value: string) => void;
}
const OperationTab: React.FC<OperationTabProps> = ({
open,
workType,
var1,
var2,
yearFilter,
handleSearch,
// onOpenChange,
// setTableData,
// setTableCount,
setWorkType,
setVar1,
setVar2,
setYearFilter,
}) => {
return (
<div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]">
<div className="flex items-center mb-3">
<SelectBox
className="w-80 mr-8"
selectClass="rounded-lg bg-white text-xl"
label="업무구분"
selectArray={WORK_TYPES.map((w) => ({
val: w.val,
text: w.text,
}))}
onSelectValue={(val) => setWorkType(String(val))}
value={workType}
selectContentClass="z-[101]"
/>
</div>
<div className="flex items-center mb-6">
<Label className="mr-2 w-auto text-xl text-gray-600">사업명</Label>
<Input
className="w-[100px] !text-xl placeholder:text-center mr-4"
placeholder="입력"
value={var1}
onChange={(e) => { setVar1(e.target.value); }}
/>
<YearRangeSelectBox
start={yearFilter.start}
end={yearFilter.end}
onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
startLabel="수행기간"
endLabel=""
/>
<SelectBox
className="ml-8 w-60 mr-8 z-[102]"
selectClass="rounded-lg bg-white text-xl"
label="사업 유형"
selectArray={BIZ_TY_CD_SELECT_ARRAY}
value={var2}
onSelectValue={(val) => {
setVar2(String(val));
}}
selectContentClass="z-[101]"
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
</div>
</div>
</div>
)
};
export default React.memo(OperationTab);
apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
+15 -137
View File
@@ -12,7 +12,8 @@ import { useCityCdStore, type SelectDataType } from '../commonStore';
import { MS_SWAGE_PPL_USE_CODES, MS_SWAGE_PPL_CODES, MS_SWAGE_MHL_USE_CODES } from '../components/common/table';
// import { useBizByFcltStore } from "../../../store/StoreProvider";
import { getData } from "@/components/lib/api";
import BasicTab from './basicTab';
import BasicTab, { BASIC_TYPES } from './basicTab';
import OperationTab, { WORK_TYPES, BIZ_SE_CD, BIZ_TY_CD, BIZ_TY_CD_SELECT_ARRAY } from './operationTab';
const API_URL = `${process.env.NEXT_PUBLIC_SEWERAGE_API_URL}`;
@@ -22,28 +23,6 @@ const TABS = [
{ val: "operation", text: "운영정보" },
{ val: "report", text: "하수도정비기본계획보고서" },
];
// 기본정보 '구분' 선택 목록
const BASIC_TYPES = [
{ val: "tb_ms_swage_ppl", text: "하수관로" },
{ val: "tb_il_swage_prcs_fclt", text: "하수처리시설" },
{ val: "tb_ms_swage_prcs_zone", text: "하수처리구역" },
{ val: "tb_ms_swage_mhl", text: "하수맨홀" },
{ val: "tb_ms_swage_pmstn", text: "하수펌프장" },
{ val: "tb_ms_stofcbr", text: "우수토실" },
];
// 운영정보 '구분' 선택 목록
// const WORK_TYPES = [
// { val: "maintenance", text: "보수 및 갱신" },
// { val: "cleaning", text: "청소 및 준설" },
// { val: "inspection", text: "점검 및 진단" },
// ];
const WORK_TYPES = [
{ val: "200", text: "보수 및 갱신(개대체)" },
{ val: "201", text: "보수 및 갱신(유지보수)" },
{ val: "204", text: "보수 및 갱신(단순보수)" },
{ val: "100", text: "점검 및 진단" },
{ val: "203", text: "청소 및 준설" },
];
// 운영정보 - 사업 현황
const operationTableHeadlist = [
@@ -95,25 +74,7 @@ const reportTableHeadlist = [
{ id: "fileName", title: "파일명" },
{ id: "regDate", title: "등록일자" },
];
// const BIZ_SE_CD = useBizByFcltStore(state => state.BIZ_SE_CD);
const BIZ_SE_CD = [
{ lwpoCd: "100", lwpoCdNm: "관로기술진단" },
{ lwpoCd: "200", lwpoCdNm: "개대체" },
{ lwpoCd: "201", lwpoCdNm: "유지보수" },
{ lwpoCd: "203", lwpoCdNm: "청소, 준설" },
{ lwpoCd: "204", lwpoCdNm: "단순보수" },
];
// const BIZ_TY_CD = useBizByFcltStore(state => state.BIZ_TY_CD);
const BIZ_TY_CD = [
{ lwpoCd: "0", lwpoCdNm: "전체" },
{ lwpoCd: "SV", lwpoCdNm: "용역" },
{ lwpoCd: "SF", lwpoCdNm: "자체" },
{ lwpoCd: "SC", lwpoCdNm: "공사" },
];
const BIZ_TY_CD_SELECT_ARRAY = BIZ_TY_CD.map(item => ({
val: item.lwpoCd,
text: item.lwpoCdNm,
}));
// 날짜 조합 함수
const getDateString = (
@@ -334,52 +295,6 @@ const SearchModal: React.FC<SearchModalProps> = ({
RequestDTO.fromflfmtEndYmd = startDate;
RequestDTO.toflfmtEndYmd = endDate;
// let allContent: any[] = [];
// let totalCount = 0;
// if (workType === 'maintenance') {
// const codes = ['200', '201', '204'];
// for (const code of codes) {
// RequestDTO.bizSeCd = code;
// const params = new URLSearchParams(RequestDTO).toString();
// console.log('API URL:', `/v1/bizInfo?${params}`);
// const res = await getData(`v1/bizInfo?${params}`);
// console.log('필터링된 API 결과(개수):', res.totalElements);
// console.log('필터링된 API 결과(데이터):', res.content);
// const mappedContent = (res.content || []).map((item: any) => {
// const matched = BIZ_TY_CD.find(code => code.lwpoCd === item.bizTyCd);
// return {
// ...item,
// bizTyCd: matched ? matched.lwpoCdNm : item.bizTyCd,
// };
// });
// allContent = allContent.concat(mappedContent);
// totalCount += res.totalElements || 0;
// }
// setTableData(allContent);
// setTableCount(totalCount);
// } else {
// if (workType === 'cleaning') {
// RequestDTO.bizSeCd = '203';
// } else if (workType === 'inspection') {
// RequestDTO.bizSeCd = '100';
// }
// const params = new URLSearchParams(RequestDTO).toString();
// console.log('API URL:', `/v1/bizInfo?${params}`);
// const res = await getData(`v1/bizInfo?${params}`);
// console.log('필터링된 API 결과(개수):', res.totalElements);
// console.log('필터링된 API 결과(데이터):', res.content);
// const mappedContent = (res.content || []).map((item: any) => {
// const matched = BIZ_TY_CD.find(code => code.lwpoCd === item.bizTyCd);
// return {
// ...item,
// bizTyCd: matched ? matched.lwpoCdNm : item.bizTyCd,
// };
// });
// setTableData(mappedContent || []);
// setTableCount(res.totalElements || 0);
// }
RequestDTO.bizSeCd = workType;
@@ -742,8 +657,6 @@ const SearchModal: React.FC<SearchModalProps> = ({
var1={var1}
var2={var2}
yearFilter={yearFilter}
onOpenChange={onOpenChange}
onFeatureSelect={onFeatureSelect}
handleSearch={handleSearch}
setBasicType={setBasicType}
setCity={setCity}
@@ -759,53 +672,18 @@ const SearchModal: React.FC<SearchModalProps> = ({
)}
{/* 운영정보 탭 */}
{activeTab === 'operation' && (
<div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]">
<div className="flex items-center mb-3">
<SelectBox
className="w-80 mr-8"
selectClass="rounded-lg bg-white text-xl"
label="업무구분"
selectArray={WORK_TYPES.map((w) => ({
val: w.val,
text: w.text,
}))}
onSelectValue={(val) => setWorkType(String(val))}
value={workType}
selectContentClass="z-[101]"
/>
</div>
<div className="flex items-center mb-6">
<Label className="mr-2 w-auto text-xl text-gray-600">사업명</Label>
<Input
className="w-[100px] !text-xl placeholder:text-center mr-4"
placeholder="입력"
value={var1}
onChange={(e) => { setVar1(e.target.value); }}
/>
<YearRangeSelectBox
start={yearFilter.start}
end={yearFilter.end}
onChange={range => setYearFilter({ ...yearFilter, start: range.start, end: range.end })}
startLabel="수행기간"
endLabel=""
/>
<SelectBox
className="ml-8 w-60 mr-8 z-[102]"
selectClass="rounded-lg bg-white text-xl"
label="사업 유형"
selectArray={BIZ_TY_CD_SELECT_ARRAY}
value={var2}
onSelectValue={(val) => {
setVar2(String(val));
}}
selectContentClass="z-[101]"
/>
{/* 조회 버튼 */}
<div className="flex-1 flex justify-end">
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
</div>
</div>
</div>
<OperationTab
open={open}
workType={workType}
var1={var1}
var2={var2}
yearFilter={yearFilter}
handleSearch={handleSearch}
setWorkType={setWorkType}
setVar1={setVar1}
setVar2={setVar2}
setYearFilter={setYearFilter}
/>
)}
{/* 하수도정비기본계획보고서 탭 */}
{activeTab === 'report' && (