From 97b0a2e5bfb75858951f6900c161740705431e6e Mon Sep 17 00:00:00 2001 From: swcho Date: Tue, 29 Jul 2025 16:09:49 +0900 Subject: [PATCH] =?UTF-8?q?fix,=20feat:=20-=20I/I=20=EB=B6=84=EC=84=9D=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20CSS=20=EC=88=98=EC=A0=95=20(=EA=B0=84?= =?UTF-8?q?=EA=B2=A9=20=ED=86=B5=EC=9D=BC=20-=20I/I=20=EB=B6=84=EC=84=9D?= =?UTF-8?q?=20=ED=99=94=EB=A9=B4=20Enter=20=ED=81=B4=EB=A6=AD=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/(with-base-layout)/ii/BaseLayout.tsx | 57 +++++++++---- .../(with-base-layout)/ii/irsetting/page.tsx | 14 +++- .../app/(with-base-layout)/ii/rdii/page.tsx | 25 ++++-- apps/sn/app/components/ui/fileUploadForm.tsx | 2 +- .../ui/govSidoSigunguSearchForm.tsx | 83 ++++++++++++------- 5 files changed, 122 insertions(+), 59 deletions(-) diff --git a/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx b/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx index f0a649ad4..d825b34fa 100644 --- a/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx +++ b/apps/sn/app/(with-base-layout)/ii/BaseLayout.tsx @@ -218,7 +218,7 @@ const BaseLayout = ({
{showDatePicker && ( // showDatePicker 값에 따라 DatePicker 렌더링 <> - + { // aplcnYm이 없으면 현재 연월을 기본값으로 설정 @@ -232,10 +232,10 @@ const BaseLayout = ({ setAplcnYmFrom?.(value); // string 값을 직접 전달 } }} - selectClass="ml-5 w-[100px]" + selectClass="ml-8 w-[100px]" startYear={1900} // 시작 연도 설정 /> - ~ + ~ { // aplcnYm이 없으면 현재 연월을 기본값으로 설정 @@ -248,7 +248,7 @@ const BaseLayout = ({ setAplcnYmTo?.(value); // string 값을 직접 전달 } }} - selectClass="w-[100px]" + selectClass="w-[100px] mr-8" startYear={1900} // 시작 연도 설정 /> @@ -259,21 +259,40 @@ const BaseLayout = ({ setRtnEnvPartSidoValue={(val) => setCtpvCd?.(val)} setRtnEnvPartSigunValue={setSigungu} // 선택된 시군구 값을 받을 콜백 함수 전달 > - onSwageTreatmentPlantChange?.(val)} selectContentClass="z-[101]" /> + + onSwageTreatmentPlantChange?.(val)} + selectContentClass="z-[101]" + /> {/* onSwageProcessingZoneChange?.(val)} selectContentClass="z-[101]" /> */} - {selectBox?.searchChk ? : null} + {selectBox?.searchChk && ( +
+ +
+ )}

{titleName.firstCardTitle}

- {graphBtn ? : null} + {graphBtn && ( + + )} {/* 그래프 있을 시 */} - {graphBtn ? : null} + {graphBtn && ( + + )} {/* 분석 버튼 */} - {analysisBtn ? : null} + {analysisBtn && ( + + )}
@@ -285,19 +304,23 @@ const BaseLayout = ({
- { - children?.[1] != null ? -
+ {children?.[1] != null && ( + +

{titleName?.secondCardTitle}

-
- {graphBtn ? : null} +
+ {graphBtn && ( + + )} {/* 그래프 있을 시 */} - {graphBtn ? : null} + {graphBtn && ( + + )}
{children?.[1]}
- : null - } + + )} ) } diff --git a/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx b/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx index 4e8492f47..3adf8c233 100644 --- a/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx +++ b/apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx @@ -399,7 +399,7 @@ const IrSetting = () => { setSelectedDate(value); } }} - selectClass="ml-5 w-[150px]" + selectClass="ml-5 w-[225px]" startYear={1900} // 시작 연도 설정 /> @@ -430,7 +430,7 @@ const IrSetting = () => { setInput1(newValue); }} - className="ml-5 h-[3.2rem] text-center text-xl w-[150px]" + className="ml-5 h-[3.2rem] text-center text-xl w-[225px]" placeholder="예: 0.75" /> @@ -441,7 +441,15 @@ const IrSetting = () => { setInput2(e.target.value)} - className="ml-5 h-[3.2rem] text-center text-xl w-[150px]" /> + className="ml-5 h-[3.2rem] text-center text-xl w-[225px]" + placeholder='세부 분석정보 입력' + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); // Enter 키 기본 동작 방지 + handleAnalysisClick(); + } + }} + />
diff --git a/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx b/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx index 08aa84e34..9bf381b97 100644 --- a/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx +++ b/apps/sn/app/(with-base-layout)/ii/rdii/page.tsx @@ -61,8 +61,8 @@ const defaultFormValues: FormSchemaType = { sggCd: "", swageTmplntCd: "", swtrmtZoneCd: "", - rtkSource: "출처", - rdiiArea: "123", // 문자열로 기본값 설정 + rtkSource: "", + rdiiArea: "", // 문자열로 기본값 설정 unitFactors: [ { response: "Short-Term", R: "0.040", T: "0.5", K: "1" }, // 문자열로 기본값 설정 { response: "Medium-Term", R: "0.005", T: "1", K: "2" }, @@ -78,7 +78,7 @@ const defaultFormValues: FormSchemaType = { aplcnYm: "", rate: "0.8", // 문자열로 기본값 설정 // rainFile: undefined, - analysisInfo: "test 분석정보", + analysisInfo: "", date: (() => { // 현재 연월을 yyyyMM 형식으로 설정 const now = new Date(); const year = now.getFullYear(); @@ -501,7 +501,7 @@ export default function RTKForm() { form.setValue("rate", newValue, { shouldValidate: true }); // form의 rate 필드에 설정 }} className="h-12 text-center text-xl w-[225px] ml-5" - placeholder="예: 0.75" + placeholder="0 ~ 1 사이의 값 입력" /> @@ -512,17 +512,24 @@ export default function RTKForm() { form.setValue("date", value, { shouldValidate: true }); // form의 date 필드에 직접 설정 } }} - selectClass="ml-5 w-[200px]" + selectClass="ml-5 w-[225px]" startYear={1900} // 시작 연도 설정 /> - + { + if (e.key === 'Enter') { + e.preventDefault(); // Enter 키 기본 동작 방지 + handleAnalysisClick(); + } + }} + />
- {/*
- -
*/}
]} diff --git a/apps/sn/app/components/ui/fileUploadForm.tsx b/apps/sn/app/components/ui/fileUploadForm.tsx index fb626348e..0aed37bc9 100644 --- a/apps/sn/app/components/ui/fileUploadForm.tsx +++ b/apps/sn/app/components/ui/fileUploadForm.tsx @@ -103,7 +103,7 @@ const FileUploadForm = ({ }} customPreview={ showPreview ? ( -
+
{files && files.length > 0 ? fileName : "파일을 선택하세요."} diff --git a/apps/sn/app/components/ui/govSidoSigunguSearchForm.tsx b/apps/sn/app/components/ui/govSidoSigunguSearchForm.tsx index b46f2b481..1fe3d7bae 100644 --- a/apps/sn/app/components/ui/govSidoSigunguSearchForm.tsx +++ b/apps/sn/app/components/ui/govSidoSigunguSearchForm.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState } from 'react'; import { SelectBox } from '@common/business_components/ui/select'; +import { Label } from '@radix-ui/react-label'; export type comCodeState = { code: { @@ -24,9 +25,9 @@ export type comCodeState = { }; type SelectDataType = { - text: string; - val: string; - sido?: string; // 시도 코드 (선택 사항) + text: string; + val: string; + sido?: string; // 시도 코드 (선택 사항) } type EnvPartSelectDataType = SelectDataType & { @@ -73,9 +74,9 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData const [allSigunOptions, setAllSigunOptions] = useState([]); // 조회된 조건에 맞는 환경청 시도 시군 (SelectBox에 실제 사용될 데이터) - const [filteredEnvPartData, setFilteredEnvPartData] = useState([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }]); - const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }]); - const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState([{ text: "전체", val: '0', sido: '0' }]); + const [filteredEnvPartData, setFilteredEnvPartData] = useState([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }]); + const [filteredEnvPartSidoData, setFilteredEnvPartSidoData] = useState([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }]); + const [filteredEnvPartSigunData, setFilteredEnvPartSigunData] = useState([{ text: "전체", val: '0', sido: '0' }]); // 시군구 데이터 const getSggCd = async (): Promise => { @@ -93,7 +94,7 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData return sggCd; } catch (error) { console.error('시군구 데이터를 가져오는데 실패했습니다:', error); - return [{ val: '0', text: '전체', sido: '0' }]; + return [{ val: '0', text: '전체', sido: '0' }]; } }; @@ -112,7 +113,7 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData return cityCd; } catch (error) { console.error('시도 데이터를 가져오는데 실패했습니다:', error); - return [{ val: '0', text: '전체', sido: '0' }]; + return [{ val: '0', text: '전체', sido: '0' }]; } }; @@ -135,7 +136,7 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData return lclgvrnmntCd; } catch (error) { console.error('환경청 데이터를 가져오는데 실패했습니다:', error); - return [{ val: '0', text: '전체', adstDliStrCd: '', sido: '0' }]; + return [{ val: '0', text: '전체', adstDliStrCd: '', sido: '0' }]; } }; @@ -188,8 +189,8 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData const relevantSigunSidos = Array.from( new Set( allSigunOptions - .filter(sigungu => cityCodesInEnvPart.includes(sigungu.val)) - .map(sigungu => sigungu.sido) + .filter(sigungu => cityCodesInEnvPart.includes(sigungu.val)) + .map(sigungu => sigungu.sido) ) ); console.log('relevantSigunTexts:', relevantSigunSidos); @@ -210,8 +211,8 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData // relevantSidos와 relevantSigunsForSidoDerivation은 초기 빈 배열 상태를 유지합니다. setFilteredEnvPartSidoData([ - { text: "전체", val: '0', adstDliStrCd: '', sido: '0' }, - ...relevantSidos.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd: '', sido: '0' })) + { text: "전체", val: '0', adstDliStrCd: '', sido: '0' }, + ...relevantSidos.map((item: SelectDataType) => ({ text: item.text, val: item.val, adstDliStrCd: '', sido: '0' })) ]); setFilteredEnvPartSigunDataSelected(relevantSigunsForSidoDerivation); @@ -246,14 +247,14 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData setEnvPartSigunValue('0'); // 시군구 "전체"로 초기화 // 부모에게도 초기화된 값 전달 (text 포함) if (setRtnEnvPartSidoValue) { - const sidoDefault = filteredEnvPartSidoData.find(item => item.val === '0') || { val: '0', text: '전체' }; - // setRtnEnvPartSidoValue(sidoDefault.val); // 이전 방식: 값만 전달 - // TODO: 만약 시도 값도 객체로 전달해야 한다면 아래와 같이 수정 - // setRtnEnvPartSidoValue({ val: sidoDefault.val, text: sidoDefault.text }); + const sidoDefault = filteredEnvPartSidoData.find(item => item.val === '0') || { val: '0', text: '전체' }; + // setRtnEnvPartSidoValue(sidoDefault.val); // 이전 방식: 값만 전달 + // TODO: 만약 시도 값도 객체로 전달해야 한다면 아래와 같이 수정 + // setRtnEnvPartSidoValue({ val: sidoDefault.val, text: sidoDefault.text }); } if (setRtnEnvPartSigunValue) { - const sigunDefault = filteredEnvPartSigunData.find(item => item.val === '0') || { val: '0', text: '전체' }; - setRtnEnvPartSigunValue({ val: sigunDefault.val, text: sigunDefault.text }); + const sigunDefault = filteredEnvPartSigunData.find(item => item.val === '0') || { val: '0', text: '전체' }; + setRtnEnvPartSigunValue({ val: sigunDefault.val, text: sigunDefault.text }); } break; case 'envPartSido': // 환경청별 - 시도 선택 @@ -262,8 +263,8 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData initializeCityDataByEnvPartSigun(val); setEnvPartSigunValue('0'); // 시군구 "전체"로 초기화 if (setRtnEnvPartSigunValue) { - const sigunDefault = filteredEnvPartSigunData.find(item => item.val === '0') || { val: '0', text: '전체' }; - setRtnEnvPartSigunValue({ val: sigunDefault.val, text: sigunDefault.text }); + const sigunDefault = filteredEnvPartSigunData.find(item => item.val === '0') || { val: '0', text: '전체' }; + setRtnEnvPartSigunValue({ val: sigunDefault.val, text: sigunDefault.text }); } break; case 'envPartSigun': // 환경청별 - 시군구 선택 @@ -286,11 +287,11 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData setEnvPartSigunValue('0'); // 필터링된 목록들도 초기 "전체" 또는 전체 목록으로 리셋 - setFilteredEnvPartSigunData([{ text: "전체", val: '0', sido: '0' }, ...allSigunOptions]); + setFilteredEnvPartSigunData([{ text: "전체", val: '0', sido: '0' }, ...allSigunOptions]); - setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }, ...allEnvPartOptions]); - setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }, ...allSidoOptions.map(s => ({ ...s, adstDliStrCd: '' }))]); - setFilteredEnvPartSigunData([{ text: "전체", val: '0', sido: '0' }, ...allSigunOptions]); + setFilteredEnvPartData([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }, ...allEnvPartOptions]); + setFilteredEnvPartSidoData([{ text: "전체", val: '0', adstDliStrCd: '', sido: '0' }, ...allSidoOptions.map(s => ({ ...s, adstDliStrCd: '' }))]); + setFilteredEnvPartSigunData([{ text: "전체", val: '0', sido: '0' }, ...allSigunOptions]); setFilteredEnvPartSigunDataSelected(allSigunOptions); @@ -316,11 +317,35 @@ function GovSidoSigunguSearchForm({ isShowPart = false, children, selectSidoData return ( isShowPart ? ( -
+
<> - onSelectValue(val.toString(), 'envPart')} value={envPartValue} selectClass={'rounded-lg bg-white truncate'} /> - onSelectValue(val.toString(), 'envPartSido')} value={envPartSidoValue} selectClass={'rounded-lg bg-white truncate'} /> - onSelectValue(val.toString(), 'envPartSigun')} value={envPartSigunValue} selectClass={'rounded-lg bg-white truncate'} /> + + onSelectValue(val.toString(), 'envPart')} + value={envPartValue} + selectClass={'rounded-lg bg-white truncate'} + /> + + onSelectValue(val.toString(), 'envPartSido')} + value={envPartSidoValue} + selectClass={'rounded-lg bg-white truncate'} + /> + + onSelectValue(val.toString(), 'envPartSigun')} + value={envPartSigunValue} + selectClass={'rounded-lg bg-white truncate'} + /> {children}