File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
'use client';
import { useRef, useState, useTransition } from 'react';
import { FoxAlert } from '@fox/core/components/fox-alert';
import { FoxButton } from '@fox/core/components/fox-button';
import { FoxFileUpload } from '@fox/core/components/fox-file-upload';
import { FoxLinkButton } from '@fox/core/components/fox-link-button';
import { FoxModal } from '@fox/core/components/fox-modal';
import { useFeedback } from '@/app/_hooks/use-feedback';
import { BANNED_WORD_EXCEL_TEMPLATE_PATH } from '@/lib/domain/banned-word-query';
import { uploadBannedWordExcelAction } from '../_actions';
import styles from './banned-word-excel-modal.module.scss';
interface BannedWordExcelModalProps {
onClose: () => void;
}
export function BannedWordExcelModal({ onClose }: BannedWordExcelModalProps) {
const { showToast } = useFeedback();
const formRef = useRef<HTMLFormElement>(null);
const [errors, setErrors] = useState<string[]>([]);
const [isPending, startUpload] = useTransition();
function submit() {
const form = formRef.current;
if (!form) {
return;
}
setErrors([]);
startUpload(async () => {
const result = await uploadBannedWordExcelAction(new FormData(form));
if (result.status === 'error') {
showToast({ variant: 'danger', message: result.message });
return;
}
if (result.result.errors.length > 0) {
setErrors(result.result.errors);
return;
}
showToast({
variant: 'success',
message: `금칙어 ${result.result.successCount}건을 등록했습니다.`,
});
onClose();
});
}
return (
<FoxModal
dismissible={false}
open
size="md"
title="엑셀등록"
onClose={onClose}
actions={
<>
<FoxButton type="default" size="md" label="취소" onAction={onClose} />
<FoxButton
type="primary"
size="md"
label={isPending ? '등록 중...' : '등록'}
disabled={isPending}
onAction={submit}
/>
</>
}
>
<form ref={formRef} className={styles.form}>
<FoxAlert
type="information"
message="양식을 내려받아 금칙어명을 채운 뒤 올려 주세요. 한 줄이라도 형식이 맞지 않으면 전체가 등록되지 않습니다."
/>
<FoxLinkButton
type="secondary"
size="sm"
href={BANNED_WORD_EXCEL_TEMPLATE_PATH}
label="업로드 양식 내려받기"
/>
<FoxFileUpload
mode="default"
name="file"
label="엑셀 파일"
requirement="required"
selectLabel="파일선택"
placeholder="파일을 선택해 주세요."
accept=".xlsx,.xls"
/>
{errors.length > 0 && (
<FoxAlert
type="danger"
urgent
title="엑셀 검증에 실패해 등록되지 않았습니다."
message={
<ul>
{errors.map((error) => (
<li key={error}>{error}</li>
))}
</ul>
}
/>
)}
</form>
</FoxModal>
);
}