레이어별 상세 팝업 테이블에 코드명 안보이도록 설정, 시설 조회 검색창 레이아웃 조정

This commit is contained in:
JIeunhuh
2025-05-29 11:02:47 +09:00
parent 8456e1be9f
commit 982c4124bc
4 changed files with 117 additions and 152 deletions
@@ -139,7 +139,7 @@ export function SidoSigunguSelectBox({
return (
<div className={`flex items-center ${className}`}>
<SelectBox2
className="w-50 mr-8"
className="w-[150px] mr-8"
selectClass="rounded-lg bg-white"
label="시도"
selectArray={sidoList.map(opt => ({ val: opt.id, text: opt.name }))}
@@ -147,7 +147,7 @@ export function SidoSigunguSelectBox({
onSelectValue={val => onSidoChange(Number(val))}
/>
<SelectBox2
className="w-50 mr-8"
className="w-[150px] mr-8"
selectClass="rounded-lg bg-white"
label="시군구"
selectArray={sidoList.map(opt => ({ val: opt.id, text: opt.name }))}
@@ -64,7 +64,7 @@ export function YearRangeSelectBox({
minYear = 1900,
maxYear = new Date().getFullYear(),
className = "",
selectClass = "rounded-lg bg-white"
selectClass = "rounded-lg bg-white flex-shrink-0 w-[70px]"
}: YearRangeSelectBoxProps) {
// 시작년도 배열
const getStartYearArray = () => {
@@ -90,7 +90,7 @@ export function YearRangeSelectBox({
return (
<div className={`flex items-center ${className}`}>
<SelectBox2
className="w-50 mr-3"
className="flex-1 mr-3 min-w-[120px] max-w-[170px]"
selectClass={selectClass}
label={startLabel}
selectArray={getStartYearArray()}
@@ -99,7 +99,7 @@ export function YearRangeSelectBox({
/>
<span className="font-semibold text-xl mx-2">~</span>
<SelectBox2
className="w-50 mr-8"
className="flex-1 ml-1 mr-6 min-w-[70px] max-w-[150px]"
selectClass={selectClass}
label={endLabel}
selectArray={getEndYearArray()}
+101 -136
View File
@@ -8,6 +8,7 @@ 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';
import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from './components/common/table';
@@ -64,50 +65,7 @@ const swagePplTableHeadlist = [
{ id: 'startElevation', title: '시점관저고' },
{ id: 'endElevation', title: '종점관저고' },
]
// 하수처리구역
const swageZoneTableHeadlist = [
{ id: 'ctpvNm', title: '시도명' },
{ id: 'sggNm', title: '시군구명' },
{ id: 'swtrmtZoneNm', title: '하수처리구역명' },
{ id: 'swtrmtFcltCd', title: '하수처리시설번호' },
{ id: 'swtrmtFcltNm', title: '하수처리시설명' },
]
// 하수처리시설
const swageFcltTableHeadlist = [
{ id: 'swtrmtFcltCd', title: '하수처리시설코드' },
{ id: 'swtrmtFcltNm', title: '하수처리시설명' },
{ id: 'fcltCpct', title: '시설용량' },
{ id: 'rgnExpln', title: '지역설명' },
{ id: 'cmcnYmd', title: '준공일자' },
{ id: 'oprtngStrtYmd', title: '가동개시일자' },
{ id: 'clsgYmd', title: '폐쇄일자' },
{ id: 'laeNm', title: '지자체명' },
{ id: 'ctpvNm', title: '시도명' },
{ id: 'sggNm', title: '시군구명' },
{ id: 'sareaNm', title: '권역명' },
{ id: 'lrgeSareaNm', title: '대권역명' },
{ id: 'rvrNm', title: '하천명' },
{ id: 'addr', title: '주소' },
{ id: 'daddr', title: '상세주소' },
{ id: 'rdnmAddr', title: '도로명주소' },
{ id: 'dtlRdnmAddr', title: '상세도로명주소' },
{ id: 'dschgWtstNm', title: '방류수계명' },
{ id: 'pllnArea', title: '부지면적' },
{ id: 'mngRprtvBzentyNm', title: '관리대행업제명' },
{ id: 'swtrmtPpltnCnt', title: '하수처리인구수' },
{ id: 'prcsZoneAreaSum', title: '처리구역면적합계' },
{ id: 'geom', title: 'geometry' },
{ id: 'xcrd', title: 'X좌표' },
{ id: 'ycrd', title: 'Y좌표' },
{ id: 'rprsMsrcCn', title: '대표공법내용' },
{ id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량' },
{ id: 'sttyCrtrToc', title: '법정기준TOC' },
{ id: 'sttyCrtrSs', title: '법정기준SS' },
{ id: 'sttyCrtrTn', title: '법정기준총질소' },
{ id: 'sttyCrtrTph', title: '법정기준총인' },
{ id: 'sttyCrtrClbclCnt', title: '법정기준대장균수' },
{ id: 'bsnNm', title: '유역명' },
];
// 하수맨홀 (추후 작성 예정)
const swageMhTableHeadlist = [
{ id: 'swtrmtFcltCd', title: '하수처리시설코드' },
@@ -198,12 +156,12 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
const todayDate = today.getDate().toString().padStart(2, '0');
// UiTable2에 넘길 headlist를 BASIC_TYPES 값에 따라 분기 처리
let dynamicHeadlist = swageZoneTableHeadlist; // default 값
let dynamicHeadlist = SwtrmtPrcsZoneCol; // default 값
if (activeTab === 'operation') dynamicHeadlist = operationTableHeadlist; // 운영정보
else if (activeTab === 'report') dynamicHeadlist = reportTableHeadlist; // 하수도정비기본계획보고서
else if (basicType === 'tb_ms_swage_ppl') dynamicHeadlist = swagePplTableHeadlist; // 하수관로
else if (basicType === 'tb_il_swage_prcs_fclt') dynamicHeadlist = swageFcltTableHeadlist; // 하수처리시설
else if (basicType === 'tb_ms_swage_prcs_zone') dynamicHeadlist = swageZoneTableHeadlist; // 하수처리구역
else if (basicType === 'tb_il_swage_prcs_fclt') dynamicHeadlist = SwtrmtFcltCol; // 하수처리시설
else if (basicType === 'tb_ms_swage_prcs_zone') dynamicHeadlist = SwtrmtPrcsZoneCol; // 하수처리구역
else if (basicType === 'tb_ms_swage_mh') dynamicHeadlist = swageMhTableHeadlist; // 하수맨홀
// 조회 버튼 클릭 시 1페이지로 이동하도록 수정
@@ -433,12 +391,12 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
{/* 각각의 탭 영역 */}
{/* 기본정보 탭 */}
{activeTab === 'basic' && (
<div className="border rounded-lg p-6 mb-4 w-full h-[22vh]">
<div className="relative border rounded-lg p-6 mb-4 w-full h-[23vh]">
{/* 구분 */}
<div className="flex justify-between items-center mb-3 gap-4">
<div className="flex items-center">
<SelectBox2
className="w-auto mr-3"
className="w-[150px] mr-3"
selectClass="rounded-lg bg-white"
label="구분"
selectArray={BASIC_TYPES}
@@ -464,7 +422,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
<div className='flex items-center'>
<Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label>
<Input
className='!text-xl w-[100px] placeholder:text-center mr-8'
className='!text-xl w-[70px] placeholder:text-center mr-8'
placeholder="입력"
value={yearFilter.경과년도}
onChange={(e) => {
@@ -498,6 +456,8 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
set변수2(val);
}}
/>
</div>
<div className="flex items-center mb-2">
{/* 행정읍면동코드 */}
<Label className="w-auto text-xl text-gray-600 mr-2">행정읍면동코드</Label>
<Input
@@ -510,8 +470,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
set변수3(val);
}}
/>
</div>
<div className="flex items-center mb-2">
{/* 관경 */}
<Label className="w-auto text-xl text-gray-600 mr-2">관경(mm)</Label>
<Input
@@ -571,7 +529,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
end={yearFilter.종료}
onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
startLabel="가동개시일자"
endLabel=""
endLabel=" "
/>
{/* 시설용량 */}
<Label className="w-auto text-xl text-gray-600 mr-2">시설용량</Label>
@@ -630,7 +588,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
/>
<Label className="w-auto text-xl text-gray-600 mr-2">하수처리시설명</Label>
<Input
className='!text-xl w-[100px] placeholder:text-center mr-8'
className='!text-xl w-[120px] placeholder:text-center mr-8'
placeholder="입력"
value={변수2}
onChange={(e) => {
@@ -664,6 +622,8 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
setYearFilter({ ...yearFilter, 경과년도: val });
}}
/>
</div>
<div className='flex items-center mb-2'>
{/* 용도코드 */}
<Label className="w-auto text-xl text-gray-600 mr-2">용도코드</Label>
<Input
@@ -705,29 +665,29 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
{/* 분기처리: 하수펌프장 */}
{(basicType === 'tb_ms_swage_psmtn_1' || basicType === 'tb_ms_swage_psmtn_2') && (
<div className="mb-3">
{/* 설치년도 */}
<div className="flex items-center mb-2">
<YearRangeSelectBox
start={yearFilter.시작}
end={yearFilter.종료}
onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
startLabel="설치년도"
endLabel=""
/>
{/* 경과년도 */}
<Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label>
<Input
className='!text-xl w-[100px] placeholder:text-center mr-8'
placeholder="입력"
value={yearFilter.경과년도}
onChange={(e) => {
// 숫자만 입력 허용
const val = e.target.value.replace(/[^0-9]/g, '');
setYearFilter({ ...yearFilter, 경과년도: val });
}}
/>
</div>
<div className="flex items-center mb-2">
{/* 설치년도 */}
<div className="flex items-center mb-2">
<YearRangeSelectBox
start={yearFilter.시작}
end={yearFilter.종료}
onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
startLabel="설치년도"
endLabel=""
/>
{/* 경과년도 */}
<Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label>
<Input
className='!text-xl w-[100px] placeholder:text-center mr-8'
placeholder="입력"
value={yearFilter.경과년도}
onChange={(e) => {
// 숫자만 입력 허용
const val = e.target.value.replace(/[^0-9]/g, '');
setYearFilter({ ...yearFilter, 경과년도: val });
}}
/>
</div>
{/* 일일처리용량 - 오수맨홀 */}
<Label className="w-auto text-xl text-gray-600 mr-2">일일처리용량</Label>
<Input
@@ -780,29 +740,29 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
{/* 분기처리: 우수토실? 토구? */}
{basicType === 'tb_ms_otfl' && (
<div className="mb-3">
{/* 설치년도 */}
<div className="flex items-center mb-2">
<YearRangeSelectBox
start={yearFilter.시작}
end={yearFilter.종료}
onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
startLabel="설치년도"
endLabel=""
/>
{/* 경과년도 */}
<Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label>
<Input
className='!text-xl w-[100px] placeholder:text-center mr-8'
placeholder="입력"
value={yearFilter.경과년도}
onChange={(e) => {
// 숫자만 입력 허용
const val = e.target.value.replace(/[^0-9]/g, '');
setYearFilter({ ...yearFilter, 경과년도: val });
}}
/>
</div>
<div className="flex items-center mb-2">
{/* 설치년도 */}
<div className="flex items-center mb-2">
<YearRangeSelectBox
start={yearFilter.시작}
end={yearFilter.종료}
onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
startLabel="설치년도"
endLabel=""
/>
{/* 경과년도 */}
<Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label>
<Input
className='!text-xl w-[100px] placeholder:text-center mr-8'
placeholder="입력"
value={yearFilter.경과년도}
onChange={(e) => {
// 숫자만 입력 허용
const val = e.target.value.replace(/[^0-9]/g, '');
setYearFilter({ ...yearFilter, 경과년도: val });
}}
/>
</div>
{/* 하천명 */}
<Label className="w-auto text-xl text-gray-600 mr-2">하천명</Label>
<Input
@@ -841,14 +801,14 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
)}
{/* 조회 버튼 중앙 정렬 */}
<div className="flex justify-center">
<Button className="w-40 text-base py-2" onClick={handleSearch}>조회</Button>
<div className="absolute bottom-4 right-4 mr-2">
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
</div>
</div>
)}
{/* 운영정보 탭 */}
{activeTab === 'operation' && (
<div className="border rounded-lg p-6 mb-4 w-full h-[22vh]">
<div className="relative flex flex-col border rounded-lg p-6 mb-4 w-full h-[23vh]">
<div className="flex items-center mb-6">
<SelectBox2
className="w-auto mr-8"
@@ -860,7 +820,6 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
/>
{/* 설치년도 */}
<div className="flex items-center mb-2">
<YearRangeSelectBox
start={yearFilter.시작}
end={yearFilter.종료}
@@ -868,6 +827,7 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
startLabel="설치년도"
endLabel=""
/>
<div className="flex items-center">
{/* 경과년도 */}
<Label className="w-auto text-xl text-gray-600 mr-2">경과년도</Label>
<Input
@@ -880,17 +840,17 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
setYearFilter({ ...yearFilter, 경과년도: val });
}}
/>
</div>
</div>
{/* 조회 버튼 중앙 정렬 */}
<div className="absolute bottom-4 right-4 mr-2">
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
</div>
</div>
{/* 조회 버튼 중앙 정렬 */}
<div className="flex justify-center">
<Button className="w-40 text-base py-2" onClick={handleSearch}>조회</Button>
</div>
</div>
)}
{/* 하수도정비기본계획보고서 탭 */}
{activeTab === 'report' && (
<div className="border rounded-lg p-6 mb-4 w-full h-[22vh]">
<div className="relative flex flex-col border rounded-lg p-6 mb-4 w-full h-[23vh]">
{/* 시도, 시군구, 하수처리구역 한 줄 */}
<div className="flex items-center mb-6">
<SidoSigunguSelectBox
@@ -899,36 +859,41 @@ const SearchModal: React.FC<SearchModalProps> = ({ open, onOpenChange, onFeature
onSidoChange={set시도}
onSigunguChange={set시군구}
/>
<SelectBox2
className="w-auto mr-2"
selectClass="rounded-lg bg-white text-xl"
label="하수처리구역"
selectArray={처리구역List.map(opt => ({ val: opt.val, text: opt.text }))}
onSelectValue={val => set처리구역(String(val))}
value={처리구역}
/>
<Input
className='!text-xl w-[100px] placeholder:text-center mr-8'
placeholder="입력"
value={변수1}
onChange={(e) => {
// 숫자만 입력 허용
const val = e.target.value.replace(/[^0-9]/g, '');
set변수1(val);
}}
/>
<YearRangeSelectBox
start={yearFilter.시작}
end={yearFilter.종료}
onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
startLabel="승인년도"
endLabel=""
/>
</div>
{/* 조회 버튼 중앙 정렬 */}
<div className="flex justify-center">
<Button className="w-40 text-base py-2" onClick={handleSearch}>조회</Button>
<div className="flex justify-between items-center mb-6">
<div className="flex items-center gap-4">
<SelectBox2
className="w-auto mr-2"
selectClass="rounded-lg bg-white text-xl"
label="하수처리구역"
selectArray={처리구역List.map(opt => ({ val: opt.val, text: opt.text }))}
onSelectValue={val => set처리구역(String(val))}
value={처리구역}
/>
<Input
className='!text-xl w-[100px] placeholder:text-center mr-8'
placeholder="입력"
value={변수1}
onChange={(e) => {
// 숫자만 입력 허용
const val = e.target.value.replace(/[^0-9]/g, '');
set변수1(val);
}}
/>
<YearRangeSelectBox
start={yearFilter.시작}
end={yearFilter.종료}
onChange={range => setYearFilter({ ...yearFilter, 시작: range.start, 종료: range.end })}
startLabel="승인년도"
endLabel=""
/>
</div>
{/* 조회 버튼 중앙 정렬 */}
<div className="absolute bottom-4 right-4 mr-2">
<Button className="text-base py-2" onClick={handleSearch}>조회</Button>
</div>
</div>
</div>
)}
</UITab2>
+11 -11
View File
@@ -7,11 +7,11 @@ export const SwtrmtFcltCol = [
{ id: 'oprtngStrtYmd', title: '가동개시일자' },
{ id: 'clsgYmd', title: '폐쇄일자' },
{ id: 'prcsMsrcCd', title: '처리공법코드' },
{ id: 'laeCd', title: '지자체코드' },
// { id: 'laeCd', title: '지자체코드' },
{ id: 'laeNm', title: '지자체명' },
{ id: 'ctpvNm', title: '시도명' },
{ id: 'sggNm', title: '시군구명' },
{ id: 'sareaCd', title: '권역코드' },
// { id: 'sareaCd', title: '권역코드' },
{ id: 'sareaNm', title: '권역명' },
{ id: 'lrgeSareaNm', title: '대권역명' },
{ id: 'rvrNm', title: '하천명' },
@@ -26,7 +26,7 @@ export const SwtrmtFcltCol = [
{ id: 'prcsZoneAreaSum', title: '처리구역면적합계' },
{ id: 'xcrd', title: 'X좌표' },
{ id: 'ycrd', title: 'Y좌표' },
{ id: 'oprtngSttsCd', title: '가동상태코드' },
// { id: 'oprtngSttsCd', title: '가동상태코드' },
{ id: 'rprsMsrcCn', title: '대표공법내용' },
{ id: 'sttyCrtrBod', title: '법정기준생물화학적산소요구량' },
{ id: 'sttyCrtrToc', title: '법정기준TOC' },
@@ -35,17 +35,17 @@ export const SwtrmtFcltCol = [
{ id: 'sttyCrtrTph', title: '법정기준총인' },
{ id: 'sttyCrtrClbclCnt', title: '법정기준대장균수' },
{ id: 'bsnNm', title: '유역명' },
{ id: 'obsrvnSptCd', title: '관측지점코드' },
// { id: 'obsrvnSptCd', title: '관측지점코드' },
];
// 하수처리구역
export const SwtrmtPrcsZoneCol = [
{ id: 'swtrmtZoneSn', title: '하수처리구역 일련번호' },
{ id: 'swtrmtZoneNm', title: '하수처리구역명' },
{ id: 'swtrmtFcltCd', title: '하수처리시설코드' },
{ id: 'ctpvCd', title: '시도코드' },
// { id: 'swtrmtFcltCd', title: '하수처리시설코드' },
// { id: 'ctpvCd', title: '시도코드' },
{ id: 'ctpvNm', title: '시도명' },
{ id: 'sggCd', title: '시군구코드' },
// { id: 'sggCd', title: '시군구코드' },
{ id: 'sggNm', title: '시군구명' },
{ id: 'swtrmtFcltNm', title: '하수처리시설명' },
]
@@ -56,18 +56,18 @@ export const MsSwageMhlCol = [
{ id: 'geom', title: 'geometry' },
{ id: 'ftreSmblCd', title: '지형지물부호코드' },
{ id: 'mngNo', title: '관리번호' },
{ id: 'pbadmsEmdCd', title: '행정읍면동코드' },
// { id: 'pbadmsEmdCd', title: '행정읍면동코드' },
{ id: 'mapshtNo', title: '도엽번호' },
{ id: 'mngInstCd', title: '관리기관코드' },
// { id: 'mngInstCd', title: '관리기관코드' },
{ id: 'instlYmd', title: '설치일자' },
{ id: 'lastDrdgnYmd', title: '최종준설일자' },
{ id: 'usgCd', title: '용도코드' },
{ id: 'fcltyShpCd', title: '시설물형태코드' },
// { id: 'fcltyShpCd', title: '시설물형태코드' },
{ id: 'mhlKndCd', title: '맨홀종류코드' },
{ id: 'swageMhDiam', title: '하수맨홀구경' },
{ id: 'wdthLen', title: '가로길이' },
{ id: 'vrtcLen', title: '세로길이' },
{ id: 'mqltCd', title: '재질코드' },
// { id: 'mqltCd', title: '재질코드' },
{ id: 'altdVl', title: '표고값' },
{ id: 'dpthlVl', title: '심도값' },
{ id: 'instMngNo', title:'기관관리번호'}]