공지사항, csv 표출 작업1
This commit is contained in:
@@ -37,6 +37,9 @@ export default function LessonEditPage() {
|
||||
const [questionFileObject, setQuestionFileObject] = useState<File | null>(null);
|
||||
const [questionFileKey, setQuestionFileKey] = useState<string | null>(null);
|
||||
const [existingQuestionFile, setExistingQuestionFile] = useState<{fileName: string, fileKey?: string} | null>(null);
|
||||
const [csvData, setCsvData] = useState<string[][]>([]);
|
||||
const [csvHeaders, setCsvHeaders] = useState<string[]>([]);
|
||||
const [csvRows, setCsvRows] = useState<string[][]>([]);
|
||||
|
||||
// 원본 데이터 저장 (변경사항 비교용)
|
||||
const [originalData, setOriginalData] = useState<{
|
||||
@@ -177,7 +180,7 @@ export default function LessonEditPage() {
|
||||
// 기존 평가 문제 파일
|
||||
if (data.csvKey || data.csvUrl) {
|
||||
setExistingQuestionFile({
|
||||
fileName: '평가문제.csv',
|
||||
fileName: data.csvFileName || data.csv_file_name || data.csvName || '평가문제.csv',
|
||||
fileKey: data.csvKey,
|
||||
});
|
||||
setQuestionFileCount(1);
|
||||
@@ -935,68 +938,223 @@ export default function LessonEditPage() {
|
||||
if (!files || files.length === 0) return;
|
||||
|
||||
const file = files[0];
|
||||
if (file.name.toLowerCase().endsWith('.csv')) {
|
||||
try {
|
||||
// 단일 파일 업로드
|
||||
const uploadResponse = await apiService.uploadFile(file);
|
||||
|
||||
// 응답에서 fileKey 추출
|
||||
let fileKey: string | null = null;
|
||||
if (uploadResponse.data?.fileKey) {
|
||||
fileKey = uploadResponse.data.fileKey;
|
||||
} else if (uploadResponse.data?.key) {
|
||||
fileKey = uploadResponse.data.key;
|
||||
} else if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results) && uploadResponse.data.results.length > 0) {
|
||||
const result = uploadResponse.data.results[0];
|
||||
if (result.ok && result.fileKey) {
|
||||
fileKey = result.fileKey;
|
||||
}
|
||||
}
|
||||
|
||||
if (fileKey) {
|
||||
setQuestionFileObject(file);
|
||||
setQuestionFileKey(fileKey);
|
||||
setQuestionFileCount(1);
|
||||
setExistingQuestionFile(null);
|
||||
} else {
|
||||
throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('학습 평가 문제 업로드 실패:', error);
|
||||
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
|
||||
// CSV 파일만 허용
|
||||
if (!file.name.toLowerCase().endsWith('.csv')) {
|
||||
alert('CSV 파일 형식만 첨부할 수 있습니다.');
|
||||
e.target.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// CSV 파일 파싱
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const text = event.target?.result as string;
|
||||
if (!text) return;
|
||||
|
||||
try {
|
||||
// CSV 파싱 함수
|
||||
const parseCsv = (csvText: string): string[][] => {
|
||||
const lines: string[][] = [];
|
||||
let currentLine: string[] = [];
|
||||
let currentField = '';
|
||||
let inQuotes = false;
|
||||
|
||||
for (let i = 0; i < csvText.length; i++) {
|
||||
const char = csvText[i];
|
||||
const nextChar = csvText[i + 1];
|
||||
|
||||
if (char === '"') {
|
||||
if (inQuotes && nextChar === '"') {
|
||||
currentField += '"';
|
||||
i++;
|
||||
} else {
|
||||
inQuotes = !inQuotes;
|
||||
}
|
||||
} else if (char === ',' && !inQuotes) {
|
||||
currentLine.push(currentField.trim());
|
||||
currentField = '';
|
||||
} else if ((char === '\n' || char === '\r') && !inQuotes) {
|
||||
if (char === '\r' && nextChar === '\n') {
|
||||
i++;
|
||||
}
|
||||
if (currentField || currentLine.length > 0) {
|
||||
currentLine.push(currentField.trim());
|
||||
lines.push(currentLine);
|
||||
currentLine = [];
|
||||
currentField = '';
|
||||
}
|
||||
} else {
|
||||
currentField += char;
|
||||
}
|
||||
}
|
||||
|
||||
if (currentField || currentLine.length > 0) {
|
||||
currentLine.push(currentField.trim());
|
||||
lines.push(currentLine);
|
||||
}
|
||||
|
||||
return lines;
|
||||
};
|
||||
|
||||
const parsed = parseCsv(text);
|
||||
|
||||
if (parsed.length === 0) {
|
||||
alert('CSV 파일이 비어있습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 첫 번째 줄을 헤더로 사용
|
||||
const headers = parsed[0];
|
||||
const rows = parsed.slice(1);
|
||||
|
||||
setCsvHeaders(headers);
|
||||
setCsvRows(rows);
|
||||
setCsvData(parsed);
|
||||
} catch (parseError) {
|
||||
console.error('CSV 파싱 오류:', parseError);
|
||||
alert('CSV 파일을 읽는 중 오류가 발생했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
reader.onerror = () => {
|
||||
alert('파일을 읽는 중 오류가 발생했습니다.');
|
||||
};
|
||||
|
||||
reader.readAsText(file, 'UTF-8');
|
||||
|
||||
// 단일 파일 업로드
|
||||
const uploadResponse = await apiService.uploadFile(file);
|
||||
|
||||
// 응답에서 fileKey 추출
|
||||
let fileKey: string | null = null;
|
||||
if (uploadResponse.data?.fileKey) {
|
||||
fileKey = uploadResponse.data.fileKey;
|
||||
} else if (uploadResponse.data?.key) {
|
||||
fileKey = uploadResponse.data.key;
|
||||
} else if (uploadResponse.data?.id) {
|
||||
fileKey = uploadResponse.data.id;
|
||||
} else if (uploadResponse.data?.imageKey) {
|
||||
fileKey = uploadResponse.data.imageKey;
|
||||
} else if (uploadResponse.data?.fileId) {
|
||||
fileKey = uploadResponse.data.fileId;
|
||||
} else if (uploadResponse.data?.data && (uploadResponse.data.data.key || uploadResponse.data.data.fileKey)) {
|
||||
fileKey = uploadResponse.data.data.key || uploadResponse.data.data.fileKey;
|
||||
} else if (uploadResponse.data?.results && Array.isArray(uploadResponse.data.results) && uploadResponse.data.results.length > 0) {
|
||||
const result = uploadResponse.data.results[0];
|
||||
if (result.ok && result.fileKey) {
|
||||
fileKey = result.fileKey;
|
||||
}
|
||||
}
|
||||
|
||||
if (fileKey) {
|
||||
setQuestionFileObject(file);
|
||||
setQuestionFileKey(fileKey);
|
||||
setQuestionFileCount(1);
|
||||
setExistingQuestionFile(null);
|
||||
} else {
|
||||
throw new Error('파일 업로드는 완료되었지만 fileKey를 받지 못했습니다.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('학습 평가 문제 업로드 실패:', error);
|
||||
alert('파일 업로드에 실패했습니다. 다시 시도해주세요.');
|
||||
}
|
||||
// input 초기화 (같은 파일 다시 선택 가능하도록)
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
|
||||
{existingQuestionFile || questionFileObject ? (
|
||||
<div className="h-[64px] px-[20px] flex items-center gap-[12px]">
|
||||
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
|
||||
{existingQuestionFile ? `${existingQuestionFile.fileName} (기존)` : questionFileObject?.name}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setQuestionFileObject(null);
|
||||
setQuestionFileKey(null);
|
||||
setExistingQuestionFile(null);
|
||||
setQuestionFileCount(0);
|
||||
}}
|
||||
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
{csvData.length === 0 ? (
|
||||
<div className="h-[64px] flex items-center justify-center">
|
||||
<p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
|
||||
학습 평가용 문항 파일을 첨부해주세요.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col">
|
||||
{/* 파일 정보 및 삭제 버튼 */}
|
||||
{(existingQuestionFile || questionFileObject) && (
|
||||
<div className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px] bg-white border-b border-[#dee1e6]">
|
||||
<p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
|
||||
{existingQuestionFile ? `${existingQuestionFile.fileName} (기존)` : questionFileObject?.name}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setQuestionFileObject(null);
|
||||
setQuestionFileKey(null);
|
||||
setExistingQuestionFile(null);
|
||||
setQuestionFileCount(0);
|
||||
setCsvData([]);
|
||||
setCsvHeaders([]);
|
||||
setCsvRows([]);
|
||||
}}
|
||||
className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
|
||||
aria-label="파일 삭제"
|
||||
>
|
||||
<CloseXOSvg />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{/* CSV 표 */}
|
||||
<div className="m-[24px] border border-[#dee1e6] border-solid relative bg-white max-h-[400px] overflow-y-auto">
|
||||
<div className="content-stretch flex flex-col items-start justify-center relative size-full">
|
||||
{/* 헤더 */}
|
||||
<div className="bg-[#f1f8ff] content-stretch flex h-[48px] items-center overflow-clip relative shrink-0 w-full sticky top-0 z-10">
|
||||
{csvHeaders.map((header, index) => {
|
||||
const isLast = index === csvHeaders.length - 1;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`border-[#dee1e6] ${
|
||||
isLast ? '' : 'border-[0px_1px_0px_0px]'
|
||||
} border-solid box-border content-stretch flex gap-[10px] h-full items-center justify-center px-[8px] py-[12px] relative shrink-0 ${
|
||||
index === 0 ? 'w-[48px]' : index === 1 ? 'basis-0 grow min-h-px min-w-px' : 'w-[140px]'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col font-['Pretendard:SemiBold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#4c5561] text-[14px] text-nowrap">
|
||||
<p className="leading-[1.5] whitespace-pre">{header || `열 ${index + 1}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 데이터 행 */}
|
||||
{csvRows.map((row, rowIndex) => (
|
||||
<div
|
||||
key={rowIndex}
|
||||
className="border-[#dee1e6] border-[1px_0px_0px] border-solid h-[48px] relative shrink-0 w-full"
|
||||
>
|
||||
<div className="content-stretch flex h-[48px] items-start overflow-clip relative rounded-[inherit] w-full">
|
||||
{csvHeaders.map((_, colIndex) => {
|
||||
const isLast = colIndex === csvHeaders.length - 1;
|
||||
const cellValue = row[colIndex] || '';
|
||||
return (
|
||||
<div
|
||||
key={colIndex}
|
||||
className={`border-[#dee1e6] ${
|
||||
isLast ? '' : 'border-[0px_1px_0px_0px]'
|
||||
} border-solid box-border content-stretch flex flex-col gap-[4px] items-center justify-center px-[8px] py-[12px] relative shrink-0 ${
|
||||
colIndex === 0 ? 'w-[48px]' : colIndex === 1 ? 'basis-0 grow min-h-px min-w-px' : 'w-[140px]'
|
||||
}`}
|
||||
>
|
||||
<p className="font-['Pretendard:Medium',sans-serif] leading-[1.5] not-italic relative shrink-0 text-[#1b2027] text-[15px] text-nowrap whitespace-pre">
|
||||
{cellValue}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user