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,
formatQuizLevelLabel,
formatVisibilityLabel,
type QuizItem,
} from '@/lib/domain/content';
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;
}
export function QuizzesList({
items,
query,
currentPage,
totalPages,
totalCount,
}: 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(row.keywordText),
},
{
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.quizSn}
name={row.question || CONTENT_KIND_LABEL.quiz}
/>
),
},
];
return (
<ContentListShell<QuizItem>
kind="quiz"
columns={columns}
rows={items}
rowKey={(row) => row.quizSn}
query={query}
currentPage={currentPage}
totalPages={totalPages}
totalCount={totalCount}
extraActions={<QuizExcelActions />}
/>
);
}