feat: SelectBox2 컴포넌트 -> SelectBox 컴포넌트로 변경

apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState, useMemo } from 'react';
 import axios from 'axios';
 import { UiModal, UiTable, DatePickerRange, SelectBox, UITab } from '@common/business_components/ui';
 import { Button, Input, Label } from '@common/components';
-import { SelectBox2 } from '@common/business_components/ui/select/index-2';
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { SidoSigunguSelectBox } from '@/components/ui/SidoSigunguSelectBox';
 import { MsSwagePplCol2, SwtrmtFcltCol2, SwtrmtPrcsZoneCol2, MsSwageMhlCol2, ExclnSewagePumpCol2, stofcbrCol2 } from '../components/common/table';
@@ -746,7 +745,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
             {/* 구분 */}
             <div className="mb-3 flex items-center justify-between gap-4">
               <div className="flex items-center">
-                <SelectBox2
+                <SelectBox
                   className="w-[150px] mr-3"
                   selectClass="rounded-lg bg-white"
                   label="구분"
@@ -755,6 +754,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     setBasicType(String(value))
                   }
                   value={basicType}
+                  selectContentClass="z-[101]"
                 />
               </div>
             </div>
@@ -777,7 +777,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     endLabel=""
                   />
                   {/* 용도 */}
-                  <SelectBox2
+                  <SelectBox
                     className="ml-8 w-60 mr-8 z-[102]"
                     selectClass="rounded-lg bg-white text-xl"
                     label="용도"
@@ -786,9 +786,10 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     onSelectValue={(val) => {
                       set변수1(String(val));
                     }}
+                    selectContentClass="z-[101]"
                   />
                   {/* 재질 */}
-                  <SelectBox2
+                  <SelectBox
                     className="w-60 mr-8 z-[102]"
                     selectClass="rounded-lg bg-white text-xl"
                     label="재질"
@@ -797,11 +798,10 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     onSelectValue={(val) => {
                       set변수2(String(val));
                     }}
+                    selectContentClass="z-[101]"
                   />
                   {/* 관경 */}
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    관경(mm)
-                  </Label>
+                  <Label className="mr-2 w-auto text-xl text-gray-600">관경(mm)</Label>
                   <Input
                     className="w-[60px] !text-xl placeholder:text-center"
                     placeholder="입력"
@@ -824,9 +824,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     }}
                   />
                   {/* 연장 */}
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    연장(m)
-                  </Label>
+                  <Label className="mr-2 w-auto text-xl text-gray-600">연장(m)</Label>
                   <Input
                     className="w-[60px] !text-xl placeholder:text-center"
                     placeholder="입력"
@@ -949,9 +947,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     }}
                     onSigunguChange={set시군구}
                   />
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    하수처리구역명
-                  </Label>
+                  <Label className="mr-2 w-auto text-xl text-gray-600">하수처리구역명</Label>
                   <Input
                     className="mr-8 w-[100px] !text-xl placeholder:text-center"
                     placeholder="입력"
@@ -960,9 +956,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                       set변수1(e.target.value);
                     }}
                   />
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    하수처리시설명
-                  </Label>
+                  <Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label>
                   <Input
                     className='!text-xl w-[120px] placeholder:text-center mr-8'
                     placeholder="입력"
@@ -997,7 +991,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     endLabel=""
                   />
                   {/* 용도 */}
-                  <SelectBox2
+                  <SelectBox
                     className="ml-8 w-60 mr-8 z-[102]"
                     selectClass="rounded-lg bg-white text-xl"
                     label="용도"
@@ -1006,11 +1000,10 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     onSelectValue={(val) => {
                       set변수1(String(val));
                     }}
+                    selectContentClass="z-[101]"
                   />
                   {/* 하수맨홀 구경 */}
-                  <Label className="mr-2 w-auto text-xl text-gray-600">
-                    구경(mm)
-                  </Label>
+                  <Label className="mr-2 w-auto text-xl text-gray-600">구경(mm)</Label>
                   <Input
                     className="w-[100px] !text-xl placeholder:text-center"
                     placeholder="입력"
@@ -1052,9 +1045,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                     endLabel=""
                   />
                   {/* 일일처리용량 - 오수맨홀 */}
-                  <Label className="ml-8 mr-2 w-auto text-xl text-gray-600">
-                    일일처리용량(㎥)
-                  </Label>
+                  <Label className="ml-8 mr-2 w-auto text-xl text-gray-600">일일처리용량(㎥)</Label>
                   <Input
                     className="w-[100px] !text-xl placeholder:text-center"
                     placeholder="입력"
@@ -1133,7 +1124,7 @@ 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">
-              <SelectBox2
+              <SelectBox
                 className="w-80 mr-8"
                 selectClass="rounded-lg bg-white text-xl"
                 label="업무구분"
@@ -1143,6 +1134,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                 }))}
                 onSelectValue={(val) => setWorkType(String(val))}
                 value={workType}
+                selectContentClass="z-[101]"
               />
             </div>
             <div className="flex items-center mb-6">
@@ -1151,9 +1143,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                 className="w-[100px] !text-xl placeholder:text-center mr-4"
                 placeholder="입력"
                 value={변수1}
-                onChange={(e) => {
-                  set변수1(e.target.value);
-                }}
+                onChange={(e) => { set변수1(e.target.value); }}
               />
               <YearRangeSelectBox
                 start={yearFilter.시작}
@@ -1162,7 +1152,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                 startLabel="수행기간"
                 endLabel=""
               />
-              <SelectBox2
+              <SelectBox
                 className="ml-8 w-60 mr-8 z-[102]"
                 selectClass="rounded-lg bg-white text-xl"
                 label="사업 유형"
@@ -1171,6 +1161,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
                 onSelectValue={(val) => {
                   set변수2(String(val));
                 }}
+                selectContentClass="z-[101]"
               />
               {/* 조회 버튼 */}
               <div className="flex-1 flex justify-end">
@@ -1182,23 +1173,24 @@ const SearchModal: React.FC<SearchModalProps> = ({
         {/* 하수도정비기본계획보고서 탭 */}
         {activeTab === 'report' && (
           <div className="relative flex flex-col border rounded-lg p-6 mt-4 w-full h-[10vh]">
-            {/* 시도, 시군구, 하수처리구역 한 줄 */}
             <div className="flex items-center mb-3">
-              <SelectBox2
+              <SelectBox
                 className="w-[150px] mr-8"
                 selectClass="rounded-lg bg-white"
                 label="시도"
                 selectArray={sidos}
                 value={ctpvCd}
                 onSelectValue={handleCtpvCdChange}
+                selectContentClass="z-[101]"
               />
-              <SelectBox2
+              <SelectBox
                 className="w-48"
                 selectClass="w-48 rounded-lg bg-white truncate"
                 label="시군구"
                 selectArray={filteredSiguns}
                 value={sigungu}
                 onSelectValue={val => setSigungu(String(val))}
+                selectContentClass="z-[101]"
               />
             </div>
             <div className="flex items-center mb-6">
@@ -1208,7 +1200,6 @@ const SearchModal: React.FC<SearchModalProps> = ({
                 placeholder="입력"
                 value={gubun}
                 onChange={(e) => {
-                  // 숫자만 입력 허용
                   const val = e.target.value;
                   setGubun(val);
                 }}
@@ -1282,10 +1273,11 @@ const SearchModal: React.FC<SearchModalProps> = ({
             <div className="flex-1 px-2 pb-2">
               <LoadingOverlay isLoading={isDetailLoading} />
               <UiTable
-                headName={(() => {
-                  const label = WORK_TYPES.find((type) => type.val === workType)?.text
-                  return (<>{label} 결과표 ({detailTableCount})건</>);
-                })()
+                headName={
+                  (() => {
+                    const label = WORK_TYPES.find((type) => type.val === workType)?.text
+                    return (<>{label} 결과표 ({detailTableCount})건</>);
+                  })()
                 }
                 tableData={detailTableData}
                 headlist={dynamicHeadlist2}
@@ -1309,9 +1301,9 @@ const SearchModal: React.FC<SearchModalProps> = ({
       bodyClass={`
         h-[100vh]
         w-[60vw]
-        max-w-none
-        max-h-none
-        overflow-visible
+        max-w-[60vw]
+        max-h-[100vh]
+        overflow-hidden
         z-[101]
       `}
       body={renderBody()}

apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx

@@ -4,7 +4,6 @@ import ContentLayout from '@/components/ui/contentLayout'
 import { GovSidoSigunguSearchForm } from '@/components/ui/govSidoSigunguSearchForm'
 import { DatePicker, DateMonthPicker, Form, SearchFormRight, SelectBox } from '@common/business_components/ui'
 import ListDiv from '@common/business_components/ui/list_div'
-import { SelectBox2 } from '@common/business_components/ui/select/index-2'
 import { Button, Label } from '@common/components/ui'
 import { useEffect, useState, type ReactNode } from 'react'
 import LoadingOverlay from '@/components/ui/LoadingBar'
@@ -259,8 +258,8 @@ const BaseLayout = ({
             setRtnEnvPartSidoValue={(val) => setCtpvCd?.(val)}
             setRtnEnvPartSigunValue={setSigungu} // 선택된 시군구 값을 받을 콜백 함수 전달
           >
-            <SelectBox2 label={"하수처리장"} value={selectedSwageTreatmentPlant} selectArray={treatmentFacilityOptions} className="col-span-3" selectClass="rounded-lg bg-white truncate" onSelectValue={(val) => onSwageTreatmentPlantChange?.(val)} />
-            {/* <SelectBox2 label={"하수처리구역"} value={selectedSwageProcessingZone} selectArray={processingZoneOptions} className="col-span-3" selectClass="rounded-lg bg-white truncate" onSelectValue={(val) => onSwageProcessingZoneChange?.(val)} /> */}
+            <SelectBox label={"하수처리장"} value={selectedSwageTreatmentPlant} selectArray={treatmentFacilityOptions} className="col-span-3" selectClass="rounded-lg bg-white truncate" onSelectValue={(val) => onSwageTreatmentPlantChange?.(val)} selectContentClass="z-[101]" />
+            {/* <SelectBox label={"하수처리구역"} value={selectedSwageProcessingZone} selectArray={processingZoneOptions} className="col-span-3" selectClass="rounded-lg bg-white truncate" onSelectValue={(val) => onSwageProcessingZoneChange?.(val)} selectContentClass="z-[101]" /> */}
           </GovSidoSigunguSearchForm>
           {selectBox?.searchChk ? <SearchFormRight><Button size="sm" onClick={() => selectBox.onSearchClick?.()}>조회</Button></SearchFormRight> : null}
         </div>

apps/sn/app/components/ui/SidoSigunguSelectBox.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { SelectBox2 } from "@common/business_components/ui/select/index-2";
+import { SelectBox } from '@common/business_components/ui'
 
 interface Option {
   id: number;
@@ -138,21 +138,23 @@ export function SidoSigunguSelectBox({
 
   return (
     <div className={`flex items-center justify-center ${className} mr-8`}>
-      <SelectBox2
+      <SelectBox
         className="w-[150px] mr-8"
         selectClass="rounded-lg bg-white"
         label="시도"
         selectArray={sidoList.map(opt => ({ val: opt.id, text: opt.name }))}
         value={sido}
         onSelectValue={val => onSidoChange(Number(val))}
+        selectContentClass="z-[101]"
       />
-      <SelectBox2
+      <SelectBox
         className="w-48"
         selectClass="w-48 rounded-lg bg-white truncate"
         label="시군구"
         selectArray={sigunguList.map(opt => ({ val: opt.id, text: opt.name }))}
         value={sigungu}
         onSelectValue={val => onSigunguChange(Number(val))}
+        selectContentClass="z-[101]"
       />
     </div>
   );

apps/sn/app/components/ui/YearRangeSelectBox.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { SelectBox2 } from "@common/business_components/ui/select/index-2";
+import { SelectBox } from '@common/business_components/ui'
 
 interface YearRangeSelectBoxProps {
   start: string;
@@ -89,22 +89,24 @@ export function YearRangeSelectBox({
 
   return (
     <div className={`flex items-center ${className}`}>
-      <SelectBox2
+      <SelectBox
         className="flex-1 mr-3" 
         selectClass={selectClass}
         label={startLabel}
         selectArray={getStartYearArray()}
         onSelectValue={val => onChange({ start: String(val), end })}
         value={start}
+        selectContentClass="z-[101]"
       />
       <span className="font-semibold text-xl mx-2">~</span>
-      <SelectBox2
+      <SelectBox
         className="flex-1 ml-1" 
         selectClass={selectClass}
         label={endLabel}
         selectArray={getEndYearArray()}
         onSelectValue={val => onChange({ start, end: String(val) })}
         value={end}
+        selectContentClass="z-[101]"
       />
     </div>
   );