swcho
d898121764
- searchModal Store 패턴을 사용하여 상태 관리 및 UI, 비즈니스로직 분리 - tsconfig.json에 import paths 추가
56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { SelectBox } from '@common/business_components/ui';
|
|
import { Label } from '@common/components';
|
|
import SwagePpl from './swagePpl';
|
|
import SwagePrcsFclt from './swagePrcsFclt';
|
|
import SwagePrcsZone from './swagePrcsZone';
|
|
import SwageMhl from './swageMhl';
|
|
import SwagePmstn from './swagePmstn';
|
|
import Stofcbr from './stofcbr';
|
|
import useSearchModalStore from '@/store/useSearchModalStore';
|
|
|
|
|
|
// 기본정보 '구분' 선택 목록
|
|
export 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 BasicTab: React.FC = () => {
|
|
const { basicType, setBasicType } = useSearchModalStore();
|
|
|
|
return (
|
|
<div className="relative border rounded-lg p-5 w-full h-[10vh]">
|
|
{/* 구분 */}
|
|
<div className="mb-3 flex items-center justify-between gap-4">
|
|
<div className="flex items-center">
|
|
<Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구분</Label>
|
|
<SelectBox
|
|
className="w-[150px] mr-3"
|
|
selectClass="rounded-lg bg-white"
|
|
label=""
|
|
selectArray={BASIC_TYPES}
|
|
onSelectValue={(value: string | number) =>
|
|
setBasicType(String(value))
|
|
}
|
|
value={basicType}
|
|
selectContentClass="z-[101]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* 조회 조건 */}
|
|
{basicType === "tb_ms_swage_ppl" && (<SwagePpl />)} {/* 하수관로 */}
|
|
{basicType === "tb_il_swage_prcs_fclt" && (<SwagePrcsFclt />)} {/* 하수처리시설 */}
|
|
{basicType === "tb_ms_swage_prcs_zone" && (<SwagePrcsZone />)} {/* 하수처리구역 */}
|
|
{basicType === "tb_ms_swage_mhl" && (<SwageMhl />)} {/* 하수맨홀 */}
|
|
{basicType === "tb_ms_swage_pmstn" && (<SwagePmstn />)} {/* 하수펌프장 */}
|
|
{basicType === "tb_ms_stofcbr" && (<Stofcbr />)} {/* 우수토실 */}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(BasicTab); |