109 lines
5.4 KiB
TypeScript
109 lines
5.4 KiB
TypeScript
"use client"
|
|
import { SelectBox } from '@common/business_components/ui';
|
|
import { Button, Input } from '@common/components/ui';
|
|
import React, { useState, useId } from 'react'
|
|
import type { HttpResponse, Upload } from "tus-js-client";
|
|
import { FileUploader } from "@common/components";
|
|
import { handleUpload } from "@utils";
|
|
import { set } from 'react-hook-form';
|
|
|
|
interface FileUploadFormProps {
|
|
onSubmit: (files: string, year: string, quarter: string, code: string, id: string) => void;
|
|
showButton?: boolean; // 버튼 표시 여부 (기본값 true)
|
|
showPreview?: boolean; // 파일명 프리뷰 표시 여부
|
|
accept?: string; // 파일 형식 지정
|
|
}
|
|
|
|
const FileUploadForm = ({ onSubmit, showButton = true, showPreview = false, accept = ".jpeg,.jpg,.png", }: FileUploadFormProps) => {
|
|
const [atflCd, setAtflCd] = useState<string | null>(null);
|
|
const [atflId, setAtflId] = useState<string | null>(null);
|
|
const [fileName, setFileName] = useState<string>('');
|
|
const handleUploadResponse = (file: File) => async (res: HttpResponse) => {
|
|
const fileInfo = res.getHeader("X-File-Info");
|
|
if (!fileInfo) return;
|
|
const { atflCd, atflId } = JSON.parse(fileInfo) ?? {};
|
|
const orgnlFileNm = file.name;
|
|
setFileName(orgnlFileNm);
|
|
setAtflCd(atflCd);
|
|
setAtflId(atflId);
|
|
};
|
|
|
|
// 현재 년도부터 10년 전까지의 년도 옵션 생성
|
|
const yearOptions = Array.from({ length: 10 }, (_, i) => {
|
|
const year = new Date().getFullYear() - i;
|
|
return { text: `${year}년`, val: year.toString() };
|
|
});
|
|
const quater = [{ text: '1분기', val: '1' }, { text: '2분기', val: '2' }, { text: '3분기', val: '3' }, { text: '4분기', val: '4' }]
|
|
const [files, setFiles] = useState<FileList | null>(null);
|
|
const [selectedYear, setSelectedYear] = useState<string>(yearOptions[0]?.val || '');
|
|
const [selectedQuarter, setSelectedQuarter] = useState<string>(quater[0]?.val || '');
|
|
const [upload, setUpload] = useState<Upload | null>(null);
|
|
const uniqueId = useId(); // 각 FileUploadForm 인스턴스에 대한 고유 ID 생성
|
|
|
|
return (
|
|
<div> {/* 컴포넌트 루트 div */}
|
|
<div className="card p-6"> {/* 카드 스타일링 */}
|
|
<div className='flex items-center gap-2'> {/* FileUploader와 Button을 정렬하는 메인 flex 컨테이너 */}
|
|
<div className="w-[300px] mr-4"> {/* FileUploader의 너비와 오른쪽 여백을 제어하는 컨테이너 */}
|
|
<FileUploader
|
|
id={uniqueId}
|
|
className="!h-auto !max-w-none flex-row items-center gap-2"
|
|
accept={accept}
|
|
onUpload={(e) => {
|
|
const selectedFiles = e.target.files;
|
|
if (!selectedFiles) return;
|
|
|
|
setFiles(selectedFiles);
|
|
if (selectedFiles[0]) {
|
|
handleUpload(selectedFiles, {
|
|
handleUploadStart: setUpload,
|
|
handleSuccess: setUpload,
|
|
handleResponse: handleUploadResponse(selectedFiles[0]),
|
|
});
|
|
}
|
|
}}
|
|
customPreview={
|
|
showPreview ? (
|
|
<div className="file-uploader-preview">
|
|
{files && files.length > 0
|
|
? fileName
|
|
: "파일을 선택하세요."}
|
|
</div>
|
|
) : null
|
|
}
|
|
/>
|
|
</div>
|
|
{showButton ? (
|
|
<Button
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
|
|
size="sm"
|
|
onClick={() => {
|
|
console.log(files?.[0]?.name)
|
|
if (!files) {
|
|
alert('파일을 선택해주세요.');
|
|
return;
|
|
}
|
|
if (!selectedYear) {
|
|
alert('등록년도를 선택해주세요.');
|
|
return;
|
|
}
|
|
if (!selectedQuarter) {
|
|
alert('분기를 선택해주세요.');
|
|
return;
|
|
}
|
|
const fileNm = files?.[0]?.name || '';
|
|
onSubmit(fileNm, selectedYear, selectedQuarter, atflCd || '', atflId || '');
|
|
setFiles(null); // 파일 업로드 후 파일 목록 초기화
|
|
setFileName(''); // 파일명 초기화
|
|
}}
|
|
>
|
|
등록
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FileUploadForm |