Merge branch 'FE/QuizDetailCard' into 'frontend'
[Front-End ] feat: StudentReportDetailPage 추가 See merge request s11-webmobile1-sub2/S11P12A701!105
This commit is contained in:
commit
5e8ffc1f8a
@ -2,7 +2,8 @@ import styles from './QuizCard.module.css';
|
||||
import { STATIC_URL } from '../../constants';
|
||||
|
||||
export default function QuizCard({ index, question, answer, image, choices }) {
|
||||
console.log(question, answer, image, choices);
|
||||
// TODO: 정답 / 오답 관련 표현 필요 시 추가
|
||||
console.log(choices);
|
||||
return (
|
||||
<div className={styles.card}>
|
||||
<div className={styles.header}>
|
||||
@ -20,28 +21,17 @@ export default function QuizCard({ index, question, answer, image, choices }) {
|
||||
</div>
|
||||
)}
|
||||
<label className={styles.label}>질문</label>
|
||||
<input
|
||||
type="text"
|
||||
value={question}
|
||||
className={styles.input}
|
||||
/>
|
||||
<div className={styles.input}>{question}</div>
|
||||
<label className={styles.label}>정답</label>
|
||||
<input
|
||||
type="text"
|
||||
value={answer}
|
||||
className={styles.input}
|
||||
/>
|
||||
<div className={styles.input}>{answer}</div>
|
||||
{choices.length > 0 && <label className={styles.label}>선택지</label>}
|
||||
{choices.map?.((choice, idx) => (
|
||||
<div
|
||||
className={styles.choiceDiv}
|
||||
key={idx}
|
||||
>
|
||||
<label>선택지 {choice.num} </label>
|
||||
<input
|
||||
className={`${styles.input} ${styles.choiceInput}`}
|
||||
type="text"
|
||||
value={choice.content}
|
||||
/>
|
||||
<label className={styles.numLabel}>{choice.num} </label>
|
||||
<div className={`${styles.input} ${styles.choiceInput}`}>{choice.content}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
@ -36,12 +36,9 @@
|
||||
height: 220px;
|
||||
margin: 10px auto;
|
||||
border-radius: 8px;
|
||||
object-fit: contain;
|
||||
background-color: var(--background-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hiddenInput {
|
||||
display: none;
|
||||
border: 1px solid var(--background-secondary);
|
||||
}
|
||||
|
||||
.input {
|
||||
@ -62,6 +59,12 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.numLabel {
|
||||
width: 40px;
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.choiceInput {
|
||||
flex-grow: 1;
|
||||
padding: 7px;
|
||||
|
@ -3,11 +3,12 @@ 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}>
|
||||
<div className={styles.headerInside}>
|
||||
<Link
|
||||
to={'..'}
|
||||
className={styles.goBack}
|
||||
@ -18,6 +19,24 @@ export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, on
|
||||
<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}>
|
||||
{quizzes.map?.((quiz, index) => (
|
||||
@ -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);
|
||||
}
|
||||
|
@ -5,6 +5,6 @@ import { API_URL } from '../../constants';
|
||||
export function useStudentReportDetail(reportId) {
|
||||
return useSuspenseQuery({
|
||||
queryKey: ['studentreportdetail', reportId],
|
||||
queryFn: () => instance.get(`${API_URL}/report/myreportdetail/${reportId}`),
|
||||
queryFn: () => instance.get(`${API_URL}/report/reportDetail/${reportId}`),
|
||||
});
|
||||
}
|
||||
|
@ -2,9 +2,9 @@ import { useSuspenseQuery } from '@tanstack/react-query';
|
||||
import instance from '../../utils/axios/instance';
|
||||
import { API_URL } from '../../constants';
|
||||
|
||||
export function useStudentReports() {
|
||||
export function useStudentReports(lectureId) {
|
||||
return useSuspenseQuery({
|
||||
queryKey: ['studentreports'],
|
||||
queryFn: () => instance.get(`${API_URL}/report/myreport`),
|
||||
queryFn: () => instance.get(`${API_URL}/report/student/${lectureId}`),
|
||||
});
|
||||
}
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -1,37 +1,36 @@
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import styles from './StudentReportDetailPage';
|
||||
import styles from './StudentReportDetailPage.module.css';
|
||||
import BackIcon from '/src/assets/icons/back.svg?react';
|
||||
import { useStudentReportDetail } from '../../hooks/api/useStudentReportDetail';
|
||||
// import { useStudentReportDetail } from '../../hooks/api/useStudentReportDetail';
|
||||
import { QuizDetailCard } from '../../components/QuizForm';
|
||||
|
||||
export default function StudentReportDetailPage() {
|
||||
const { reportId } = useParams();
|
||||
console.log(reportId);
|
||||
const { data } = useStudentReportDetail(reportId);
|
||||
console.log(data);
|
||||
// const report = useStudentReportDetail(reportId);
|
||||
// console.log(report);
|
||||
// TODO: API 연결 후 실제 동작 확인 및 QuizDetailCard에 Map 적용
|
||||
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<header className={styles.header}>
|
||||
<div className={styles.headerInside}>
|
||||
<Link
|
||||
to={'..'}
|
||||
className={styles.goBack}
|
||||
>
|
||||
<BackIcon />
|
||||
<span>퀴즈 성적</span>
|
||||
<span>퀴즈 목록</span>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className={styles.title}>퀴즈명</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.title}>퀴즈명</div>
|
||||
</header>
|
||||
<div>
|
||||
<h3>맞은 퀴즈</h3>
|
||||
<div></div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>틀린 퀴즈</h3>
|
||||
<div></div>
|
||||
<p>점수 : 70점 ( 7 / 10 )</p>
|
||||
<div className={styles.grid}>
|
||||
<QuizDetailCard
|
||||
index={1}
|
||||
question={'??'}
|
||||
answer={'!!'}
|
||||
choices={[]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -11,12 +11,6 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.headerInside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
@ -38,7 +32,6 @@
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
font-weight: 800;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.author {
|
||||
@ -59,3 +52,11 @@
|
||||
.icon {
|
||||
stroke: var(--text-color);
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 440px);
|
||||
gap: 20px;
|
||||
justify-content: start;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
@ -3,10 +3,14 @@ import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
|
||||
import { ReportCard } from '../../components/ReportCard';
|
||||
import styles from './StudentReportPage.module.css';
|
||||
import { useStudentReports } from '../../hooks/api/useStudentReports';
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
export default function StudentReportPage() {
|
||||
const { data } = useStudentReports();
|
||||
// const reports = data?.data;
|
||||
const { lectureId } = useParams();
|
||||
const { data } = useStudentReports(lectureId);
|
||||
console.log(data);
|
||||
const reportss = data?.data;
|
||||
console.log(reportss);
|
||||
const reports = [
|
||||
{
|
||||
reportId: 1,
|
||||
|
Loading…
Reference in New Issue
Block a user