From c7261ae36a8d45d74803bd1e1d7f91da48359a9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Thu, 8 Aug 2024 10:25:30 +0900 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20QuizDetailCard=20input=20->=20div?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/QuizForm/QuizDetailCard.jsx | 23 +++++-------------- .../QuizForm/QuizDetailCard.module.css | 7 ++---- 2 files changed, 8 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/QuizForm/QuizDetailCard.jsx b/frontend/src/components/QuizForm/QuizDetailCard.jsx index 7f0abdf..44f654b 100644 --- a/frontend/src/components/QuizForm/QuizDetailCard.jsx +++ b/frontend/src/components/QuizForm/QuizDetailCard.jsx @@ -2,7 +2,7 @@ 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: 정답 / 오답 관련 표현 필요 시 추가 return (
@@ -20,28 +20,17 @@ export default function QuizCard({ index, question, answer, image, choices }) {
)} - +
{question}
- +
{answer}
+ {choices.map?.((choice, idx) => (
- - + +
{choice.content}
))}
diff --git a/frontend/src/components/QuizForm/QuizDetailCard.module.css b/frontend/src/components/QuizForm/QuizDetailCard.module.css index 05cbd09..7304149 100644 --- a/frontend/src/components/QuizForm/QuizDetailCard.module.css +++ b/frontend/src/components/QuizForm/QuizDetailCard.module.css @@ -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 { From 2bc0d7e3e50bc43649502f580805784f192b8f0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Thu, 8 Aug 2024 10:31:29 +0900 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=EC=84=A0=ED=83=9D=EC=A7=80=EA=B0=80?= =?UTF-8?q?=20=EC=9E=88=EB=8A=94=20=EA=B2=BD=EC=9A=B0=EB=A7=8C=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=EC=A7=80=20=EB=9D=BC=EB=B2=A8=EC=9D=B4=20=EB=82=98?= =?UTF-8?q?=EC=98=A4=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/QuizForm/QuizDetailCard.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/QuizForm/QuizDetailCard.jsx b/frontend/src/components/QuizForm/QuizDetailCard.jsx index 44f654b..3363ce7 100644 --- a/frontend/src/components/QuizForm/QuizDetailCard.jsx +++ b/frontend/src/components/QuizForm/QuizDetailCard.jsx @@ -3,6 +3,7 @@ import { STATIC_URL } from '../../constants'; export default function QuizCard({ index, question, answer, image, choices }) { // TODO: 정답 / 오답 관련 표현 필요 시 추가 + console.log(choices); return (
@@ -23,7 +24,7 @@ export default function QuizCard({ index, question, answer, image, choices }) {
{question}
{answer}
- + {choices.length > 0 && } {choices.map?.((choice, idx) => (
Date: Thu, 8 Aug 2024 11:07:48 +0900 Subject: [PATCH 3/6] =?UTF-8?q?design:=20=ED=80=B4=EC=A6=88=EC=83=81?= =?UTF-8?q?=EC=84=B8=EC=A0=95=EB=B3=B4=20=EC=B9=B4=EB=93=9C=20=EC=9D=BC?= =?UTF-8?q?=EB=B6=80=20=EB=94=94=EC=9E=90=EC=9D=B8=20=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/QuizForm/QuizDetailCard.jsx | 2 +- frontend/src/components/QuizForm/QuizDetailCard.module.css | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/QuizForm/QuizDetailCard.jsx b/frontend/src/components/QuizForm/QuizDetailCard.jsx index 3363ce7..2f369f9 100644 --- a/frontend/src/components/QuizForm/QuizDetailCard.jsx +++ b/frontend/src/components/QuizForm/QuizDetailCard.jsx @@ -30,7 +30,7 @@ export default function QuizCard({ index, question, answer, image, choices }) { className={styles.choiceDiv} key={idx} > - +
{choice.content}
))} diff --git a/frontend/src/components/QuizForm/QuizDetailCard.module.css b/frontend/src/components/QuizForm/QuizDetailCard.module.css index 7304149..e2b620e 100644 --- a/frontend/src/components/QuizForm/QuizDetailCard.module.css +++ b/frontend/src/components/QuizForm/QuizDetailCard.module.css @@ -59,6 +59,11 @@ gap: 8px; } +.numLabel { + width: 40px; + text-align: end; +} + .choiceInput { flex-grow: 1; padding: 7px; From 091a78a90c17f9fe0d6a837a5cf2dfef69416eeb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Thu, 8 Aug 2024 12:21:17 +0900 Subject: [PATCH 4/6] =?UTF-8?q?design:=20=EC=84=A0=ED=83=9D=EC=A7=80=20?= =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/QuizForm/QuizDetailCard.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/QuizForm/QuizDetailCard.module.css b/frontend/src/components/QuizForm/QuizDetailCard.module.css index e2b620e..d7ec5ae 100644 --- a/frontend/src/components/QuizForm/QuizDetailCard.module.css +++ b/frontend/src/components/QuizForm/QuizDetailCard.module.css @@ -61,7 +61,8 @@ .numLabel { width: 40px; - text-align: end; + text-align: right; + display: block; } .choiceInput { From b6604426cdc0367aafdbc47322a006a6f258aac7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Thu, 8 Aug 2024 13:20:52 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=ED=80=B4=EC=A6=88=EC=85=8B=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C?= =?UTF-8?q?=20tested=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=91=9C=EC=8B=9C=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../QuizsetDetail/QuizsetDetail.jsx | 52 +++++++++++-------- .../QuizsetDetail/QuizsetDetail.module.css | 30 +++++++++++ .../QuizsetDetailPage/QuizsetDetailPage.jsx | 4 +- 3 files changed, 63 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx b/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx index a244dd5..b1a3c14 100644 --- a/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx +++ b/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx @@ -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 (
- - - {topic} - -
-

{title}

+
+ + + {topic} + +
+

{title}

+
+
+
+ {!tested && ( + + )} +
@@ -31,18 +50,7 @@ export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, on /> ))}
- - + {tested &&
이미 진행된 퀴즈는 수정이 불가능합니다.
}
); } diff --git a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css b/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css index 033c587..cdbcc91 100644 --- a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css +++ b/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css @@ -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); +} diff --git a/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx b/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx index 366e623..1a4a72c 100644 --- a/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx +++ b/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx @@ -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} /> ); } From 495d8a229c2d2b319d8218562d80173b47d7be97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= Date: Thu, 8 Aug 2024 14:50:47 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20QuizDetailCard=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=20=EB=B0=8F=20StudentReportDetailPage=20=EC=9E=84=EC=8B=9C=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80(API=EC=97=B0=EA=B2=B0=20=ED=99=95=EC=9D=B8?= =?UTF-8?q?=20=ED=95=84=EC=9A=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/hooks/api/useStudentReportDetail.js | 2 +- frontend/src/hooks/api/useStudentReports.js | 4 +- .../StudentReportDetailPage.jsx | 45 +++++++++---------- .../StudentReportDetailPage.module.css | 15 ++++--- .../StudentReportPage/StudentReportPage.jsx | 8 +++- 5 files changed, 39 insertions(+), 35 deletions(-) diff --git a/frontend/src/hooks/api/useStudentReportDetail.js b/frontend/src/hooks/api/useStudentReportDetail.js index 7ef143f..362bd1b 100644 --- a/frontend/src/hooks/api/useStudentReportDetail.js +++ b/frontend/src/hooks/api/useStudentReportDetail.js @@ -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}`), }); } diff --git a/frontend/src/hooks/api/useStudentReports.js b/frontend/src/hooks/api/useStudentReports.js index 5264bcb..2b230e2 100644 --- a/frontend/src/hooks/api/useStudentReports.js +++ b/frontend/src/hooks/api/useStudentReports.js @@ -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}`), }); } diff --git a/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.jsx b/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.jsx index c4e32dd..676e2c0 100644 --- a/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.jsx +++ b/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.jsx @@ -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 (
-
- - - 퀴즈 성적 - -
-

퀴즈명

-
-
+ + + 퀴즈 목록 + +
퀴즈명
-
-

맞은 퀴즈

-
-
-
-

틀린 퀴즈

-
+

점수 : 70점 ( 7 / 10 )

+
+
); diff --git a/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.module.css b/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.module.css index b9782df..67233dd 100644 --- a/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.module.css +++ b/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.module.css @@ -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; +} diff --git a/frontend/src/pages/StudentReportPage/StudentReportPage.jsx b/frontend/src/pages/StudentReportPage/StudentReportPage.jsx index 49007dc..602b352 100644 --- a/frontend/src/pages/StudentReportPage/StudentReportPage.jsx +++ b/frontend/src/pages/StudentReportPage/StudentReportPage.jsx @@ -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,