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

fix : 조건창에 텍스트와 입력창 간격 등 일정하게 처리

Browse Source
This commit is contained in:
swcho
2025-07-29 20:15:21 +09:00
parent 97b0a2e5bf
commit 81d589acb0
10 changed files with 45 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/searchModal/basicTab.tsx
+2 -1
View File
@@ -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))
apps/sn/app/(map-layout)/map/searchModal/operationTab.tsx
+7 -5
View File
@@ -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) => {
apps/sn/app/(map-layout)/map/searchModal/reportTab.tsx
+9 -13
View File
@@ -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'
/>
apps/sn/app/(map-layout)/map/searchModal/swageMhl.tsx
+4 -3
View File
@@ -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="입력"
apps/sn/app/(map-layout)/map/searchModal/swagePmstn.tsx
+2 -4
View File
@@ -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="입력"
apps/sn/app/(map-layout)/map/searchModal/swagePpl.tsx
+7 -5
View File
@@ -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="입력"
apps/sn/app/(map-layout)/map/searchModal/swagePrcsFclt.tsx
+3 -3
View File
@@ -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="입력"
apps/sn/app/(map-layout)/map/searchModal/swagePrcsZone.tsx
+2 -2
View File
@@ -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="입력"
apps/sn/app/components/ui/SidoSigunguSelectBox.tsx
+6 -3
View File
@@ -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))}
apps/sn/app/components/ui/YearRangeSelectBox.tsx
+3 -3
View File
@@ -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()}