55 lines
2.8 KiB
TypeScript
55 lines
2.8 KiB
TypeScript
import { useRef, useState } from 'react';
|
|
import { ImagePlus, Loader2, Trash2 } from 'lucide-react';
|
|
import { deleteCurriculumReference, uploadCurriculumReference, type CurriculumReference } from '../lib/curriculum';
|
|
|
|
type Props = {
|
|
accessToken: string;
|
|
courseId: string;
|
|
week: number;
|
|
cover: CurriculumReference | null;
|
|
onChange: (cover: CurriculumReference | null) => void;
|
|
};
|
|
|
|
export function WeekCoverEditor({ accessToken, courseId, week, cover, onChange }: Props) {
|
|
const input = useRef<HTMLInputElement>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState('');
|
|
async function save(file?: File) {
|
|
if (busy || (!file && !cover)) return;
|
|
if (file && (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type) || file.size > 8 * 1024 * 1024)) {
|
|
setError('8MB 이하의 PNG, JPEG, WebP 이미지를 선택해주세요.');
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
setError('');
|
|
try {
|
|
const result = file
|
|
? await uploadCurriculumReference(accessToken, { courseId, week, file, kind: 'cover-image' })
|
|
: await deleteCurriculumReference(accessToken, cover!.id, courseId);
|
|
onChange(result.weeks.find((item) => item.week === week)?.detail.coverImage ?? null);
|
|
} catch (reason) {
|
|
setError(reason instanceof Error ? reason.message : '대표이미지를 저장하지 못했습니다.');
|
|
} finally { setBusy(false); }
|
|
}
|
|
return (
|
|
<section>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h3 className="text-[15px] font-black text-[#111827]">대표이미지</h3>
|
|
<div className="flex gap-2">
|
|
<button type="button" disabled={busy} onClick={() => input.current?.click()}
|
|
className="inline-flex h-8 items-center gap-1.5 rounded-md border border-[#d1d9e6] bg-white px-3 text-[12px] font-bold disabled:opacity-50">
|
|
{busy ? <Loader2 size={14} className="animate-spin" /> : <ImagePlus size={14} />}
|
|
{busy ? '저장 중' : cover ? '이미지 변경' : '이미지 업로드'}
|
|
</button>
|
|
{cover && <button type="button" title="대표이미지 삭제" aria-label="대표이미지 삭제" disabled={busy}
|
|
onClick={() => void save()} className="grid h-8 w-8 place-items-center rounded-md border border-[#d1d9e6] bg-white text-red-600 disabled:opacity-50"><Trash2 size={14} /></button>}
|
|
</div>
|
|
</div>
|
|
<input ref={input} type="file" accept="image/png,image/jpeg,image/webp" className="hidden"
|
|
onChange={(event) => { const file = event.target.files?.[0]; event.target.value = ''; if (file) void save(file); }} />
|
|
{cover && <img src={cover.downloadUrl} alt={`${week}주차 대표이미지`} className="mt-3 h-[240px] w-full rounded-md object-cover object-center" />}
|
|
{error && <p role="alert" className="mt-2 text-[13px] text-red-600">{error}</p>}
|
|
</section>
|
|
);
|
|
}
|