feat: 퀴즈셋 상세페이지에서 tested에 따라 수정 버튼 표시 기능 추가
This commit is contained in:
parent
99e3cb5248
commit
b6604426cd
@ -3,20 +3,39 @@ import { Link } from 'react-router-dom';
|
||||
import styles from './QuizsetDetail.module.css';
|
||||
import { QuizDetailCard } from '../QuizForm';
|
||||
|
||||
export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, onEdit }) {
|
||||
export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, onEdit, tested = false }) {
|
||||
console.log('topic', topic, 'title', title, 'quizzes', quizzes);
|
||||
return (
|
||||
<div className={styles.quizsetDetail}>
|
||||
<header className={styles.header}>
|
||||
<Link
|
||||
to={'..'}
|
||||
className={styles.goBack}
|
||||
>
|
||||
<BackIcon />
|
||||
<span>{topic}</span>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className={styles.title}>{title}</h1>
|
||||
<div className={styles.headerInside}>
|
||||
<Link
|
||||
to={'..'}
|
||||
className={styles.goBack}
|
||||
>
|
||||
<BackIcon />
|
||||
<span>{topic}</span>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className={styles.title}>{title}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.actionGroup}>
|
||||
{!tested && (
|
||||
<button
|
||||
className={styles.edit}
|
||||
onClick={onEdit}
|
||||
>
|
||||
수정
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className={styles.delete}
|
||||
onClick={onDelete}
|
||||
>
|
||||
삭제
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div className={styles.grid}>
|
||||
@ -31,18 +50,7 @@ export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, on
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDelete}
|
||||
>
|
||||
퀴즈셋 삭제
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onEdit}
|
||||
>
|
||||
퀴즈셋 수정
|
||||
</button>
|
||||
{tested && <div className={styles.tested}>이미 진행된 퀴즈는 수정이 불가능합니다.</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -11,12 +11,25 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.headerInside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.actionGroup {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 20px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.goBack {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -52,3 +65,20 @@
|
||||
justify-content: start;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.edit,
|
||||
.delete {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background-color: var(--background);
|
||||
color: var(--text-color-tertiary);
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
@ -9,7 +9,8 @@ export default function QuizsetDetailPage() {
|
||||
const { quizsetDelete } = useQuizsetDelete();
|
||||
const { data } = useTeacherQuizsetDetail(quizsetId);
|
||||
const quizset = data.data;
|
||||
console.log(quizset);
|
||||
const tested = quizset.tested;
|
||||
console.log(tested);
|
||||
const handleEdit = () => {
|
||||
navigate('edit', { state: { initialValue: quizset } });
|
||||
};
|
||||
@ -25,6 +26,7 @@ export default function QuizsetDetailPage() {
|
||||
quizzes={quizset.quizzes}
|
||||
onDelete={handleDelete}
|
||||
onEdit={handleEdit}
|
||||
tested={tested}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user