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

feat, refactor:

Browse Source 
- 수용가-맨홀 매칭결과 양식 파일 다운로드 기능 추가
- 파일 다운로드 버튼 색상 green으로 변경
This commit is contained in:
swcho
2025-08-19 18:23:47 +09:00
parent 40e0dde0e0
commit 4845450ea5
7 changed files with 70 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/(map-layout)/map/searchModal/searchModal.tsx
+3 -3
View File
@@ -1084,7 +1084,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
resetPageNo={isResetPage}
resetSelection={isResetSelection}
headButton={
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={BasicExcelDownload}>파일 다운로드</Button>
<Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={BasicExcelDownload}>파일 다운로드</Button>
}
/>
</div>
@@ -1112,7 +1112,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
resetPageNo={isResetPage}
resetSelection={isResetSelection}
headButton={
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={OperationExcelDownload}>파일 다운로드</Button>
<Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-sm font-medium green" size="sm" onClick={OperationExcelDownload}>파일 다운로드</Button>
}
/>
</div>
@@ -1138,7 +1138,7 @@ const SearchModal: React.FC<SearchModalProps> = ({
resetPageNo={isResetDetailPage}
resetSelection={isResetDetailSelection}
headButton={
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={OperationResultExcelDownload}>파일 다운로드</Button>
<Button className="px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={OperationResultExcelDownload}>파일 다운로드</Button>
}
/>
</div>
apps/sn/app/(with-base-layout)/ii/irsetting/page.tsx
+45 -38
View File
@@ -2,11 +2,11 @@
import { postData } from '@/components/lib/api'
import FileUploadForm from '@/components/ui/fileUploadForm'
import FormSection from '@/components/ui/formSection'
import { DateMonthPicker, filePicked } from '@common/business_components/ui'
import { DateMonthPicker, filePicked, downloadExcel } from '@common/business_components/ui'
import ListDiv from '@common/business_components/ui/list_div'
import { Input } from '@common/components/ui'
import { Input, Button } from '@common/components/ui'
import { zodResolver } from '@hookform/resolvers/zod'
import { useState } from 'react'
import { useState, useCallback } from 'react'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { excelToFlowRateData, excelToMatchingResultData, excelToTimePatternData, excelToRcptrInfoData } from '@/components/lib/utils'
@@ -306,7 +306,7 @@ const IrSetting = () => {
: null;
const rcptrInfoData = file5?.file
? parsedResults.find(r => r && r.fileName === file5.file?.name)?.parsedData
: null;
: null;
// 새로운 JSON 데이터 생성
const combinedAnalysisData = {
@@ -342,9 +342,8 @@ const IrSetting = () => {
return;
}
}
// const handleAnalysisClick = () => {
// }
//const rcptrInfoShow = true;
return (
<>
<LoadingOverlay isLoading={isLoadingResult} />
@@ -368,34 +367,7 @@ const IrSetting = () => {
onAnalysis={handleAnalysisClick}
>
{[<div key="irsetting-layout-key" className="grid gap-4">
<FormSection name='suyeongaPlace' form={form} titleNm='▷ 오수관망도'>
<FileUploadForm
key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(0, file, cd, id)}
showButton={false}
showPreview={true}
accept={".inp"}
fileIdx={0} />
</FormSection>
<FormSection name='suyeonga' form={form} titleNm='▷ 수용가-맨홀 매칭결과'>
<FileUploadForm
key={`file-upload-1-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(1, file, cd, id)}
showButton={false}
showPreview={true}
accept={".xls, .xlsx, .xlsm, .xltx"}
fileIdx={1} />
</FormSection>
<FormSection name='pattern' form={form} titleNm='▷ 오수량 시간패턴'>
<FileUploadForm
key={`file-upload-2-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(2, file, cd, id)}
showButton={false}
showPreview={true}
accept={".xls, .xlsx, .xlsm, .xltx"}
fileIdx={2} />
</FormSection>
<FormSection name='inputdate' form={form} titleNm='▷ 상수사용량 적용월'>
<FormSection name='inputdate' form={form} titleNm='▷ 상수사용량 적용월' required={true}>
{/* 연월 선택 라이브러리로 수정 필요 */}
<DateMonthPicker
field={{
@@ -408,7 +380,7 @@ const IrSetting = () => {
startYear={1900} // 시작 연도 설정
/>
</FormSection>
<FormSection name='rcptrInfo' form={form} titleNm='▷ 수용가 상수사용량'>
<FormSection name='rcptrInfo' form={form} titleNm='▷ 수용가 상수사용량' required={true}>
<FileUploadForm
key={`file-upload-4-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(4, file, cd, id)}
@@ -417,7 +389,42 @@ const IrSetting = () => {
accept={".xls, .xlsx, .xlsm, .xltx"}
fileIdx={4} />
</FormSection>
<FormSection name='rtkSource' form={form} titleNm='▷ 오수전환율'>
<FormSection name='suyeongaPlace' form={form} titleNm='▷ 오수관망도' required={true}>
<FileUploadForm
key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(0, file, cd, id)}
showButton={false}
showPreview={true}
accept={".inp"}
fileIdx={0} />
</FormSection>
<FormSection name='suyeonga' form={form} titleNm='▷ 수용가-맨홀 매칭결과' required={true}>
<div className="flex items-center">
<FileUploadForm
key={`file-upload-1-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(1, file, cd, id)}
showButton={false}
showPreview={true}
accept={".xls, .xlsx, .xlsm, .xltx"}
fileIdx={1} />
<Button
size={"sm"}
className={`text-white rounded-sm text-lg font-medium green`}
>
<a href="/samples/manhole-consumer-matching-template.xlsx" download="수용가-맨홀 매칭결과 파일 양식.xlsx">양식 받기</a>
</Button>
</div>
</FormSection>
<FormSection name='pattern' form={form} titleNm='▷ 오수량 시간패턴' required={true}>
<FileUploadForm
key={`file-upload-2-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(2, file, cd, id)}
showButton={false}
showPreview={true}
accept={".xls, .xlsx, .xlsm, .xltx"}
fileIdx={2} />
</FormSection>
<FormSection name='rtkSource' form={form} titleNm='▷ 오수전환율' required={true}>
<Input
value={input1}
onChange={(e) => {
@@ -445,7 +452,7 @@ const IrSetting = () => {
placeholder="예: 0.75"
/>
</FormSection>
<FormSection name='analysis information' form={form} titleNm='▷ 분석 정보'>
<FormSection name='analysis information' form={form} titleNm='▷ 분석 정보' required={true}>
<Input
value={input2}
onChange={(e) => setInput2(e.target.value)}
apps/sn/app/(with-base-layout)/ii/rdii/page.tsx
+17 -9
View File
@@ -5,7 +5,7 @@ import FileUploadForm from "@/components/ui/fileUploadForm"
import FormSection from "@/components/ui/formSection"
import BaseLayout from "../BaseLayout"
import { DateMonthPicker, filePicked } from "@common/business_components/ui"
import { Input } from "@common/components/ui"
import { Input, Button } from "@common/components/ui"
import { zodResolver } from "@hookform/resolvers/zod"
import { Label } from '@radix-ui/react-label'
import { useState } from "react"
@@ -392,15 +392,16 @@ export default function RTKForm() {
>
{[<div className="space-y-[1.2rem] overflow-x-auto pt-4 pb-4 px-2" key="form-section">
<div className="grid grid-cols-2 gap-4">
<FormSection name="rtkSource" form={form} titleNm="○ RTK계수 출처">
<FormSection name="rtkSource" form={form} titleNm="○ RTK계수 출처" required={true}>
<Input {...form.register("rtkSource")} className="h-12 text-center text-xl w-[225px]" />
</FormSection>
<FormSection name="rdiiArea" form={form} titleNm="○ RDII 기여면적(ha)">
<FormSection name="rdiiArea" form={form} titleNm="○ RDII 기여면적(ha)" required={true}>
<Input {...form.register("rdiiArea")} className="h-12 text-center text-xl w-[225px]" />
</FormSection></div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label className="mb-2 text-xl font-medium">○ 단위도 계수</Label>
<span className="text-2xl text-red-500">*</span>
<EditableFormTable
form={form}
name="unitFactors"
@@ -411,6 +412,7 @@ export default function RTKForm() {
</div>
<div>
<Label className="mb-[1.2rem] text-xl font-medium">○ 초기 차단 깊이</Label>
<span className="text-2xl text-red-500">*</span>
<EditableFormTable
form={form}
name="initialDepths"
@@ -421,7 +423,7 @@ export default function RTKForm() {
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<FormSection name="suyeonga" form={form} titleNm="○ 오수관망도"><div className="w-[350px]">
<FormSection name="suyeonga" form={form} titleNm="○ 오수관망도" required={true}><div className="w-[350px]">
<FileUploadForm
key={`file-upload-0-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(0, file, cd, id)}
@@ -430,7 +432,7 @@ export default function RTKForm() {
accept={".inp"}
fileIdx={0} />
</div></FormSection>
<FormSection name="regopm" form={form} titleNm="○ 수용가-맨홀 매칭결과"><div className="w-[350px]">
<FormSection name="regopm" form={form} titleNm="○ 수용가-맨홀 매칭결과" required={true}><div className="flex items-center">
<FileUploadForm
key={`file-upload-1-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(1, file, cd, id)}
@@ -438,8 +440,14 @@ export default function RTKForm() {
showPreview={true}
accept={".xls, .xlsx, .xlsm, .xltx"}
fileIdx={1} />
<Button
size={"sm"}
className={`text-white rounded-sm text-lg font-medium green`}
>
<a href="/samples/manhole-consumer-matching-template.xlsx" download="수용가-맨홀 매칭결과 파일 양식.xlsx">양식 받기</a>
</Button>
</div></FormSection>
<FormSection name="rain" form={form} titleNm="○ 강우자료"><div className="w-[350px]">
<FormSection name="rain" form={form} titleNm="○ 강우자료" required={true}><div className="w-[350px]">
<FileUploadForm
key={`file-upload-2-${formResetKey}`} // 폼 초기화를 위한 key
onFileSelect={(file, cd, id) => handleFileSelection(2, file, cd, id)}
@@ -448,7 +456,7 @@ export default function RTKForm() {
accept={".xls, .xlsx, .xlsm, .xltx"}
fileIdx={2} />
</div></FormSection>
<FormSection name='rate' form={form} titleNm='○ 오수전환율'>
<FormSection name='rate' form={form} titleNm='○ 오수전환율' required={true}>
<Input
value={form.watch("rate")} // form의 rate 값을 가져옴
onChange={(e) => {
@@ -478,7 +486,7 @@ export default function RTKForm() {
placeholder="0 ~ 1 사이의 값 입력"
/>
</FormSection>
<FormSection name='date' form={form} titleNm='○ 상수사용량 적용월'>
<FormSection name='date' form={form} titleNm='○ 상수사용량 적용월' required={true}>
<DateMonthPicker
field={{
value: form.watch("date"), // form의 date 값을 직접 사용
@@ -490,7 +498,7 @@ export default function RTKForm() {
startYear={1900} // 시작 연도 설정
/>
</FormSection>
<FormSection name='rate' form={form} titleNm='○ 분석 정보'>
<FormSection name='rate' form={form} titleNm='○ 분석 정보' required={true}>
<Input
{...form.register("analysisInfo")}
className="h-12 text-center text-xl w-[225px] ml-5"
apps/sn/app/(with-base-layout)/oper/floodPre/page.tsx
+1 -1
View File
@@ -211,7 +211,7 @@ const Page = () => {
<div className="card-header flex items-center justify-between">
<h3 className="text-2xl font-medium">사업정보 등록현황</h3>
<div>
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={isChckFile} >파일 다운로드</Button>
<Button className="px-4 py-2 !mr-[1.2rem] px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={isChckFile} >파일 다운로드</Button>
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile} >삭제</Button>
</div>
</div>
apps/sn/app/(with-base-layout)/oper/oldPp/page.tsx
+1 -1
View File
@@ -205,7 +205,7 @@ const Page = () => {
<div className="card-header flex items-center justify-between">
<h3 className="text-2xl font-medium">사업정보 등록현황</h3>
<div>
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" onClick={isChckFile}>파일 다운로드</Button>
<Button className="px-4 py-2 !mr-[1.2rem] px-4 py-2 !mr-[1.2rem] text-white rounded-sm text-lg font-medium green" size="sm" onClick={isChckFile}>파일 다운로드</Button>
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" onClick={isDeleteFile}>삭제</Button>
</div>
</div>
apps/sn/app/components/ui/formSection.tsx
+3 -2
View File
@@ -6,12 +6,13 @@ interface FormSectionProps {
titleNm: string
form: any
name: string
required?: boolean
}
const FormSection = ({ children, titleNm, form, name }: FormSectionProps) => {
const FormSection = ({ children, titleNm, form, name, required }: FormSectionProps) => {
return (
<div className="grid grid-cols-[200px_1fr] items-center">
<div className="text-xl font-medium">{titleNm}</div>
<div className="text-xl font-medium">{titleNm}{required && <span className="text-2xl text-red-500">*</span>}</div>
<FormField
control={form.control}
name={name}
apps/sn/public/samples/manhole-consumer-matching-template.xlsx
BIN
View File
Binary file not shown.