From 81d589acb05174d8ff8de34c9aeedd32ef4d77de Mon Sep 17 00:00:00 2001
From: swcho <swcho@mind-one.co.kr>
Date: Tue, 29 Jul 2025 20:15:21 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=EC=A1=B0=EA=B1=B4=EC=B0=BD=EC=97=90?=
 =?UTF-8?q?=20=ED=85=8D=EC=8A=A4=ED=8A=B8=EC=99=80=20=EC=9E=85=EB=A0=A5?=
 =?UTF-8?q?=EC=B0=BD=20=EA=B0=84=EA=B2=A9=20=EB=93=B1=20=EC=9D=BC=EC=A0=95?=
 =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(map-layout)/map/searchModal/basicTab.tsx |  3 ++-
 .../map/searchModal/operationTab.tsx          | 12 +++++-----
 .../map/searchModal/reportTab.tsx             | 22 ++++++++-----------
 .../(map-layout)/map/searchModal/swageMhl.tsx |  7 +++---
 .../map/searchModal/swagePmstn.tsx            |  6 ++---
 .../(map-layout)/map/searchModal/swagePpl.tsx | 12 +++++-----
 .../map/searchModal/swagePrcsFclt.tsx         |  6 ++---
 .../map/searchModal/swagePrcsZone.tsx         |  4 ++--
 .../components/ui/SidoSigunguSelectBox.tsx    |  9 +++++---
 .../app/components/ui/YearRangeSelectBox.tsx  |  6 ++---
 10 files changed, 45 insertions(+), 42 deletions(-)

diff --git a/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
index 89d1db591..8ac1b98aa 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
@@ -82,10 +82,11 @@ const BasicTab: React.FC<BasicTabProps> = ({
       {/* 구분 */}
       <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="구분"
+            label=""
             selectArray={BASIC_TYPES}
             onSelectValue={(value: string | number) =>
               setBasicType(String(value))
diff --git a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
index 97c0b4c4c..0ec43f51d 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
@@ -113,10 +113,11 @@ const OperationTab: React.FC<OperationTabProps> = ({
   return (
     <div className="relative flex flex-col border rounded-lg p-6 w-full h-[10vh]">
       <div className="flex items-center mb-3">
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">업무구분</Label>
         <SelectBox
           className="w-80 mr-8"
           selectClass="rounded-lg bg-white text-xl"
-          label="업무구분"
+          label=""
           selectArray={WORK_TYPES.map((w) => ({
             val: w.val,
             text: w.text,
@@ -127,9 +128,9 @@ const OperationTab: React.FC<OperationTabProps> = ({
         />
       </div>
       <div className="flex items-center mb-6">
-        <Label className="mr-2 w-auto text-xl text-gray-600">사업명</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업명</Label>
         <Input
-          className="w-[100px] !text-xl placeholder:text-center mr-4"
+          className="w-[100px] !text-xl placeholder:text-center mr-8"
           placeholder="입력"
           value={var1}
           onChange={(e) => { setVar1(e.target.value); }}
@@ -141,10 +142,11 @@ const OperationTab: React.FC<OperationTabProps> = ({
           startLabel="수행기간"
           endLabel=""
         />
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">사업 유형</Label>
         <SelectBox
-          className="ml-8 w-60 mr-8"
+          className="w-60 mr-8"
           selectClass="rounded-lg bg-white text-xl"
-          label="사업 유형"
+          label=""
           selectArray={BIZ_TY_CD_SELECT_ARRAY}
           value={var2}
           onSelectValue={(val) => {
diff --git a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
index 48399ac22..53dd6d0e0 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React, { useEffect, useState } from 'react';
-import { Button } from '@common/components';
+import { Button, Label } from '@common/components';
 import { YearRangeSelectBox } from '@/components/ui/YearRangeSelectBox';
 import { SelectBox, UiTable } from '@common/business_components/ui';
 import LoadingOverlay from '@/components/ui/LoadingBar';
@@ -167,30 +167,26 @@ const ReportTab: React.FC<BasicTabProps> = ({ open }) => {
     <>
     <div className="relative flex flex-col border rounded-lg p-6 w-full h-[10vh]">
       <div className="flex items-center mb-3">
-        <SelectBox className="w-[150px] mr-8"
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
+        <SelectBox className="w-60 mr-8"
           selectClass="rounded-lg bg-white"
-          label="시도" selectArray={sidos}
+          label="" selectArray={sidos}
           value={ctpvCd} onSelectValue={handleCtpvCdChange}
           selectContentClass="z-[101]"
         />
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시군구</Label>
         <SelectBox className="w-48"
           selectClass="w-48 rounded-lg bg-white truncate"
-          label="시군구" selectArray={filteredSiguns}
+          label="" selectArray={filteredSiguns}
           value={sigungu} onSelectValue={val => setSigungu(String(val))}
           selectContentClass="z-[101]"
         />
       </div>
       <div className="flex items-center mb-6">
-        {/* <label className="inline-block w-auto whitespace-nowrap text-xl text-gray-600 mr-2">구분</label>
-        <Input
-          className='!text-xl w-[100px] placeholder:text-center mr-8'
-          placeholder="입력"
-          value={gubun}
-          onChange={(e) => { setGubun(e.target.value); }}
-        /> */}
-        <SelectBox className="w-[150px] mr-8"
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">보고서 구분</Label>
+        <SelectBox className="w-44 mr-8"
           selectClass="rounded-lg bg-white"
-          label="보고서구분" selectArray={[...reportGubuns]}
+          label="" selectArray={[...reportGubuns]}
           value={reportGubun} onSelectValue={val => setReportGubun(String(val))}
           selectContentClass="z-[101]" labelClass='whitespace-nowrap text-xl text-gray-600 pr-2'
         />
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
index 5d678bf1a..279107a5c 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
@@ -55,10 +55,11 @@ const SwageMhl: React.FC<SwageMhlProps> = ({
           endLabel=""
         />
         {/* 용도 */}
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">용도</Label>
         <SelectBox
-          className="ml-8 w-60 mr-8"
+          className="w-60 mr-8"
           selectClass="rounded-lg bg-white text-xl"
-          label="용도"
+          label=""
           selectArray={MS_SWAGE_MHL_USE_CODES}
           value={var1}
           onSelectValue={(val) => {
@@ -67,7 +68,7 @@ const SwageMhl: React.FC<SwageMhlProps> = ({
           selectContentClass="z-[101]"
         />
         {/* 하수맨홀 구경 */}
-        <Label className="mr-2 w-auto text-xl text-gray-600">구경(mm)</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">구경(mm)</Label>
         <Input
           className="w-[100px] !text-xl placeholder:text-center"
           placeholder="입력"
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx
index 9543cf218..1bb113d7f 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx
@@ -50,7 +50,7 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
           endLabel=""
         />
         {/* 일일처리용량 - 오수맨홀 */}
-        <Label className="ml-8 mr-2 w-auto text-xl text-gray-600">일일처리용량(㎥)</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">일일처리용량(㎥)</Label>
         <Input
           className="w-[100px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -75,9 +75,7 @@ const SwagePmstn: React.FC<SwagePmstnProps> = ({
           onKeyDown={handleEnterKey}
         />
         {/* 양수능력 - 우수맨홀 */}
-        <Label className="mr-2 w-auto text-xl text-gray-600">
-          양수능력(m²/d)
-        </Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">양수능력(m²/d)</Label>
         <Input
           className="w-[100px] !text-xl placeholder:text-center"
           placeholder="입력"
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
index 7a22f3834..38045ad07 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
@@ -58,10 +58,11 @@ const SwagePpl: React.FC<SwagePplProps> = ({
           endLabel=""
         />
         {/* 용도 */}
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">용도</Label>
         <SelectBox
-          className="ml-8 w-60 mr-8"
+          className="w-40 mr-8"
           selectClass="rounded-lg bg-white text-xl"
-          label="용도"
+          label=""
           selectArray={MS_SWAGE_PPL_USE_CODES}
           value={var1}
           onSelectValue={(val) => {
@@ -70,10 +71,11 @@ const SwagePpl: React.FC<SwagePplProps> = ({
           selectContentClass="z-[101]"
         />
         {/* 재질 */}
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">재질</Label>
         <SelectBox
           className="w-60 mr-8"
           selectClass="rounded-lg bg-white text-xl"
-          label="재질"
+          label=""
           selectArray={MS_SWAGE_PPL_CODES}
           value={var2}
           onSelectValue={(val) => {
@@ -82,7 +84,7 @@ const SwagePpl: React.FC<SwagePplProps> = ({
           selectContentClass="z-[101]"
         />
         {/* 관경 */}
-        <Label className="mr-2 w-auto text-xl text-gray-600">관경(mm)</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">관경(mm)</Label>
         <Input
           className="w-[60px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -107,7 +109,7 @@ const SwagePpl: React.FC<SwagePplProps> = ({
           onKeyDown={handleEnterKey}
         />
         {/* 연장 */}
-        <Label className="mr-2 w-auto text-xl text-gray-600">연장(m)</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">연장(m)</Label>
         <Input
           className="w-[60px] !text-xl placeholder:text-center"
           placeholder="입력"
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
index 4adfeb865..dbcaf6e90 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
@@ -61,7 +61,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
           endLabel=""
         />
         {/* 시설용량 */}
-        <Label className="ml-8 mr-2 w-auto text-xl text-gray-600">시설용량(㎥/d)</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시설용량(㎥/d)</Label>
         <Input
           className="w-[60px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -86,7 +86,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
           onKeyDown={handleEnterKey}
         />
         {/* 처리구역 면적 */}
-        <Label className="mr-2 w-auto text-xl text-gray-600">처리구역 면적(m²)</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">처리구역 면적(m²)</Label>
         <Input
           className="w-[60px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -111,7 +111,7 @@ const SwagePrcsFclt: React.FC<SwagePrcsFcltProps> = ({
           onKeyDown={handleEnterKey}
         />
         {/* 하수처리시설명 */}
-        <Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리시설명</Label>
         <Input
           className="mr-8 w-[100px] !text-xl placeholder:text-center"
           placeholder="입력"
diff --git a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
index fd49233bb..ed2c4a4a7 100644
--- a/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
+++ b/apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
@@ -46,7 +46,7 @@ const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
           }}
           onSigunguChange={setSgg}
         />
-        <Label className="mr-2 w-auto text-xl text-gray-600">하수처리구역명</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리구역명</Label>
         <Input
           className="mr-8 w-[100px] !text-xl placeholder:text-center"
           placeholder="입력"
@@ -56,7 +56,7 @@ const swagePrcsZone: React.FC<swagePrcsZoneProps> = ({
           }}
           onKeyDown={handleEnterKey}
         />
-        <Label className="mr-2 w-auto text-xl text-gray-600">하수처리시설명</Label>
+        <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">하수처리시설명</Label>
         <Input
           className='!text-xl w-[120px] placeholder:text-center mr-8'
           placeholder="입력"
diff --git a/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx
index 7414185a6..00f8f1dbb 100644
--- a/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx
+++ b/apps/sn/app/components/ui/SidoSigunguSelectBox.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import { SelectBox } from '@common/business_components/ui'
+import { Label } from '@common/components';
 
 interface Option {
   id: number;
@@ -138,19 +139,21 @@ export function SidoSigunguSelectBox({
 
   return (
     <div className={`flex items-center justify-center ${className} mr-8`}>
+      <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시도</Label>
       <SelectBox
-        className="w-[150px] mr-8"
+        className="w-60 mr-8"
         selectClass="rounded-lg bg-white"
-        label="시도"
+        label=""
         selectArray={sidoList.map(opt => ({ val: opt.id, text: opt.name }))}
         value={sido}
         onSelectValue={val => onSidoChange(Number(val))}
         selectContentClass="z-[101]"
       />
+      <Label className="text-xl text-gray-600 font-medium whitespace-nowrap mr-2">시군구</Label>
       <SelectBox
         className="w-48"
         selectClass="w-48 rounded-lg bg-white truncate"
-        label="시군구"
+        label=""
         selectArray={sigunguList.map(opt => ({ val: opt.id, text: opt.name }))}
         value={sigungu}
         onSelectValue={val => onSigunguChange(Number(val))}
diff --git a/apps/sn/app/components/ui/YearRangeSelectBox.tsx b/apps/sn/app/components/ui/YearRangeSelectBox.tsx
index 3e0318dac..83b21cba5 100644
--- a/apps/sn/app/components/ui/YearRangeSelectBox.tsx
+++ b/apps/sn/app/components/ui/YearRangeSelectBox.tsx
@@ -88,9 +88,9 @@ export function YearRangeSelectBox({
   };
 
   return (
-    <div className={`flex items-center ${className}`}>
+    <div className={`flex items-center mr-8 ${className}`}>
       <SelectBox
-        className="flex-1 mr-3" 
+        className="flex-1" 
         selectClass={selectClass}
         label={startLabel}
         selectArray={getStartYearArray()}
@@ -100,7 +100,7 @@ export function YearRangeSelectBox({
       />
       <span className="font-semibold text-xl mx-2">~</span>
       <SelectBox
-        className="flex-1 ml-1" 
+        className="flex-1"
         selectClass={selectClass}
         label={endLabel}
         selectArray={getEndYearArray()}