103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
/**
|
|
* 📄 Oper File Upload Form Component
|
|
* 운영 파일 업로드 폼 컴포넌트
|
|
*
|
|
* - 년도 및 분기 선택 기능
|
|
* - 파일 업로드 및 등록 처리
|
|
* - 년도 변경 시 분기 옵션 동적 업데이트
|
|
* - 파일 형식 검증 및 미리보기 지원
|
|
* - 콜백 함수를 통한 업로드 결과 전달
|
|
* - TUS 프로토콜을 통한 대용량 파일 업로드
|
|
*/
|
|
"use client";
|
|
import { SelectBox } from "@common/business_components/ui";
|
|
import React, { useState, useEffect } from "react";
|
|
import FileUploadForm from "./fileUploadForm";
|
|
import { yearOptions, getQuarterOptions } from "@/components/lib/utils";
|
|
|
|
const operFileUploadForm = ({
|
|
title,
|
|
onSubmit,
|
|
}: {
|
|
title: string;
|
|
onSubmit: (
|
|
files: string,
|
|
year: string,
|
|
quarter: string,
|
|
code: string,
|
|
id: string,
|
|
) => void;
|
|
}) => {
|
|
const [selectedYear, setSelectedYear] = useState<string>(
|
|
yearOptions[0]?.val || "",
|
|
);
|
|
const [quaterOptions, setQuaterOptions] = useState(() =>
|
|
getQuarterOptions(selectedYear),
|
|
);
|
|
const [selectedQuarter, setSelectedQuarter] = useState<string>(
|
|
quaterOptions[0]?.val || "",
|
|
);
|
|
|
|
// 년도가 변경될 때 분기 옵션 업데이트
|
|
useEffect(() => {
|
|
const updatedQuarterOptions = getQuarterOptions(selectedYear);
|
|
setQuaterOptions(updatedQuarterOptions);
|
|
// 분기 옵션이 변경되면 첫 번째 옵션으로 자동 선택
|
|
setSelectedQuarter(updatedQuarterOptions[0]?.val || "");
|
|
}, [selectedYear]);
|
|
|
|
// 년도 변경 핸들러
|
|
const handleYearChange = (value: string | number) => {
|
|
const yearValue = String(value);
|
|
setSelectedYear(yearValue);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<div className="card-header">
|
|
<h3 className="text-2xl font-medium">{title}</h3>
|
|
</div>
|
|
<div className="card p-6">
|
|
<div className="grid-col-2 grid items-center space-x-4">
|
|
<div className="flex">
|
|
<SelectBox
|
|
className="w-50 ml-4 mr-3"
|
|
selectClass="rounded-lg bg-background"
|
|
label="년도"
|
|
selectArray={yearOptions}
|
|
onSelectValue={handleYearChange}
|
|
value={selectedYear}
|
|
/>
|
|
<SelectBox
|
|
className="w-50"
|
|
selectClass="rounded-lg bg-background"
|
|
label="분기"
|
|
selectArray={quaterOptions}
|
|
onSelectValue={(value: string | number) =>
|
|
setSelectedQuarter(String(value))
|
|
}
|
|
value={selectedQuarter}
|
|
/>
|
|
<FileUploadForm
|
|
onSubmit={(files, year, quarter, code, id) => {
|
|
onSubmit(
|
|
files,
|
|
(selectedYear ?? year) || "",
|
|
(selectedQuarter ?? quarter) || "",
|
|
code,
|
|
id,
|
|
);
|
|
}}
|
|
showButton={true}
|
|
showPreview={true}
|
|
accept={""}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default operFileUploadForm;
|