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 { FoxBadge } from '@fox/core/components/fox-badge';
import type { FoxListColumn } from '@fox/core/components/fox-list-container';
import {
CONTENT_KIND_LABEL,
formatContentText,
formatKeywordsLabel,
formatQuizLevelLabel,
formatVisibilityLabel,
type GradesBySchool,
type QuizItem,
} from '@/lib/domain/content';
import type { CommonCode } from '@/lib/domain/common-code';
import type { ContentQuery } from '@/lib/domain/content-query';
import { ContentListShell } from '../../_components/content-list-shell';
import { ContentRowActions } from '../../_components/content-row-actions';
import { QuizExcelActions } from './quiz-excel-actions';
interface QuizzesListProps {
items: QuizItem[];
query: ContentQuery;
currentPage: number;
totalPages: number;
totalCount: number;
schools: readonly CommonCode[];
gradesBySchool: GradesBySchool;
}
export function QuizzesList({
items,
query,
currentPage,
totalPages,
totalCount,
schools,
gradesBySchool,
}: QuizzesListProps) {
const columns: FoxListColumn<QuizItem>[] = [
{
key: 'no',
header: '번호',
width: 80,
render: (_row, index) => (currentPage - 1) * query.pageSize + index + 1,
},
{
key: 'type',
header: '퀴즈유형',
width: 110,
// 백엔드에 유형 컬럼이 없다. 이 화면 자체가 O/X 퀴즈 전용이라 고정 문구로 둔다.
render: () => 'O/X 퀴즈',
},
{
key: 'level',
header: '난이도',
width: 100,
render: (row) => formatQuizLevelLabel(row.level),
},
{
key: 'keywords',
header: '키워드',
width: 200,
render: (row) => formatContentText(formatKeywordsLabel(row.keywords)),
},
{
key: 'question',
header: '질문',
width: 360,
emphasis: true,
render: (row) => formatContentText(row.question),
},
{
key: 'answer',
header: '정답',
width: 80,
render: (row) => formatContentText(row.answer),
},
{
key: 'visibility',
header: '비공개',
width: 110,
render: (row) => (
<FoxBadge
type="pastel"
color={row.isVisible ? 'success' : 'neutral'}
size="md"
>
{formatVisibilityLabel(row.isVisible)}
</FoxBadge>
),
},
{
key: 'modifiedAt',
header: '수정일',
width: 140,
render: (row) => formatContentText(row.modifiedAt),
},
{
key: 'actions',
header: '관리',
width: 120,
render: (row) => (
<ContentRowActions
kind="quiz"
id={row.quizId}
name={row.question || CONTENT_KIND_LABEL.quiz}
/>
),
},
];
return (
<ContentListShell<QuizItem>
kind="quiz"
columns={columns}
rows={items}
rowKey={(row) => row.quizId}
query={query}
currentPage={currentPage}
totalPages={totalPages}
totalCount={totalCount}
schools={schools}
gradesBySchool={gradesBySchool}
extraActions={<QuizExcelActions />}
/>
);
}