From c22b012ec8e461e53923ee97f541debb6ca1afde Mon Sep 17 00:00:00 2001 From: GuDoYoon Date: Fri, 4 Oct 2024 00:06:49 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=8E=A8=20Publish(#34):=20=ED=80=B4?= =?UTF-8?q?=EC=A6=88=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 ++ src/features/Quiz/styles.ts | 33 ++++++++++++++++++++++++++++ src/features/Quiz/ui/OXSelector.tsx | 10 +++++++++ src/features/Quiz/ui/Question.tsx | 8 +++++++ src/features/Quiz/ui/ResponseBox.tsx | 9 ++++++++ src/pages/Quiz/Quiz.tsx | 20 +++++++++++++++++ src/pages/Quiz/styles.ts | 22 +++++++++++++++++++ src/pages/Quiz/types.ts | 0 8 files changed, 104 insertions(+) create mode 100644 src/features/Quiz/styles.ts create mode 100644 src/features/Quiz/ui/OXSelector.tsx create mode 100644 src/features/Quiz/ui/Question.tsx create mode 100644 src/features/Quiz/ui/ResponseBox.tsx create mode 100644 src/pages/Quiz/Quiz.tsx create mode 100644 src/pages/Quiz/styles.ts create mode 100644 src/pages/Quiz/types.ts diff --git a/src/App.tsx b/src/App.tsx index cd6c598..d804f8c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Main from './pages/main/Main'; import Quest from './pages/Quest/Quest'; import Ranking from './pages/Ranking/Ranking'; +import Quiz from './pages/Quiz/Quiz'; function App() { return ( <> @@ -10,6 +11,7 @@ function App() { }> }> }> + }> diff --git a/src/features/Quiz/styles.ts b/src/features/Quiz/styles.ts new file mode 100644 index 0000000..d255f94 --- /dev/null +++ b/src/features/Quiz/styles.ts @@ -0,0 +1,33 @@ +import styled from 'styled-components'; + +export const QuestionSection = styled.section` + height: 343px; + margin-top: 22px; + border-radius: 2px; + border: 1px solid #afb1b6; + background: #efeff0; + grid-column: 2; +`; +export const ResponseBoxSection = styled.section` + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + background: #efeff0; + grid-column: 2; + margin-top: 20px; +`; +export const CharacterBox = styled.div` + width: 176px; + height: 115.757px; + border: 2px solid #afb1b6; + background: #efeff0; + border-radius: 8px; + margin: 0 102px; +`; + +export const OXButton = styled.button` + width: 110px; + height: 108px; + border-radius: 10px; +`; diff --git a/src/features/Quiz/ui/OXSelector.tsx b/src/features/Quiz/ui/OXSelector.tsx new file mode 100644 index 0000000..8392736 --- /dev/null +++ b/src/features/Quiz/ui/OXSelector.tsx @@ -0,0 +1,10 @@ +import { OXButton, CharacterBox } from '../styles'; +export default function OXSelector() { + return ( + <> + + 캐릭터 들어갈예정 + + + ); +} diff --git a/src/features/Quiz/ui/Question.tsx b/src/features/Quiz/ui/Question.tsx new file mode 100644 index 0000000..6d15b1a --- /dev/null +++ b/src/features/Quiz/ui/Question.tsx @@ -0,0 +1,8 @@ +import { QuestionSection } from './../styles'; +export default function Question() { + return ( + <> + 문제 칸 + + ); +} diff --git a/src/features/Quiz/ui/ResponseBox.tsx b/src/features/Quiz/ui/ResponseBox.tsx new file mode 100644 index 0000000..4d742b5 --- /dev/null +++ b/src/features/Quiz/ui/ResponseBox.tsx @@ -0,0 +1,9 @@ +import { ResponseBoxSection } from '../styles'; +import OXSelector from './OXSelector'; +export default function ResponseBox() { + return ( + + + + ); +} diff --git a/src/pages/Quiz/Quiz.tsx b/src/pages/Quiz/Quiz.tsx new file mode 100644 index 0000000..91a3165 --- /dev/null +++ b/src/pages/Quiz/Quiz.tsx @@ -0,0 +1,20 @@ +import Question from '../../features/Quiz/ui/Question'; +import ResponseBox from '../../features/Quiz/ui/ResponseBox'; +import { AlignCenter } from '../../style/LayOut'; +import { GridContainer, HeaderSection, ProgressSection } from './styles'; + +export default function Quiz() { + return ( + + + +
로고
+
돈-??-프사
+ + 진행도 + + + + + ); +} diff --git a/src/pages/Quiz/styles.ts b/src/pages/Quiz/styles.ts new file mode 100644 index 0000000..edf122b --- /dev/null +++ b/src/pages/Quiz/styles.ts @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +export const GridContainer = styled.div` + display: grid; + width: 1156px; + margin: 0 62px; + grid-template-columns: 1fr 10fr 1fr; +`; +export const HeaderSection = styled.section` + display: flex; + grid-column: span 3; + margin-top: 42px; + justify-content: space-between; + background-color: gray; + height: 42px; +`; +export const ProgressSection = styled.section` + grid-column: 2; + background-color: red; + text-align: center; + margin-top: 34px; +`; diff --git a/src/pages/Quiz/types.ts b/src/pages/Quiz/types.ts new file mode 100644 index 0000000..e69de29 From c646ec8f31be1052400e9180bcebe2de30dd77a1 Mon Sep 17 00:00:00 2001 From: GuDoYoon Date: Fri, 4 Oct 2024 20:25:41 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=8E=A8=20Publish(#34):=20=ED=80=B4?= =?UTF-8?q?=EC=A6=88=ED=8E=98=EC=9D=B4=EC=A7=80=20url=20=EC=88=98=EC=A0=95?= =?UTF-8?q?,=20=EA=B0=81=20=EB=AC=B8=EC=A0=9C=20=EC=9C=A0=ED=98=95?= =?UTF-8?q?=EC=97=90=20=EB=8C=80=ED=95=9C=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1=20=EC=A7=84=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/features/Quiz/styles.ts | 45 ++++++++++++++++++++++--- src/features/Quiz/ui/Combination.tsx | 16 +++++++++ src/features/Quiz/ui/MultipleChoice.tsx | 11 ++++++ src/features/Quiz/ui/OXSelector.tsx | 10 +++--- src/features/Quiz/ui/Question.tsx | 10 ++++-- src/features/Quiz/ui/ResponseBox.tsx | 10 +++--- src/features/Quiz/ui/ShortAnswer.tsx | 10 ++++++ src/pages/Quiz/Quiz.tsx | 37 ++++++++++++++------ src/pages/Quiz/styles.ts | 13 ++++--- src/pages/Quiz/types.ts | 0 src/types/ResponseBoxUi.ts | 3 ++ 12 files changed, 136 insertions(+), 31 deletions(-) create mode 100644 src/features/Quiz/ui/Combination.tsx create mode 100644 src/features/Quiz/ui/MultipleChoice.tsx create mode 100644 src/features/Quiz/ui/ShortAnswer.tsx delete mode 100644 src/pages/Quiz/types.ts create mode 100644 src/types/ResponseBoxUi.ts diff --git a/src/App.tsx b/src/App.tsx index d804f8c..953a468 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,7 +11,7 @@ function App() { }> }> }> - }> + }> diff --git a/src/features/Quiz/styles.ts b/src/features/Quiz/styles.ts index d255f94..ced2b8b 100644 --- a/src/features/Quiz/styles.ts +++ b/src/features/Quiz/styles.ts @@ -1,21 +1,25 @@ import styled from 'styled-components'; - +import ResponseBoxUi from '../../types/ResponseBoxUi'; export const QuestionSection = styled.section` height: 343px; margin-top: 22px; border-radius: 2px; border: 1px solid #afb1b6; background: #efeff0; - grid-column: 2; + grid-column: 3; + font-size: 1rem; `; -export const ResponseBoxSection = styled.section` +export const ResponseBoxSection = styled.section` display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background: #efeff0; - grid-column: 2; + grid-column: 3; margin-top: 20px; + border-radius: 2px; + border: 1px solid #afb1b6; + column-gap: ${({ $gapColumn }) => $gapColumn || '0px'}; `; export const CharacterBox = styled.div` width: 176px; @@ -31,3 +35,36 @@ export const OXButton = styled.button` height: 108px; border-radius: 10px; `; + +export const MultipleChoiceQuestionButton = styled.button` + width: 372px; + height: 26px; + border-radius: 8px; + background: #19191b; + color: #ffffff; + margin-top: 13px; +`; + +export const ShortAnswerInput = styled.input` + width: 372px; + height: 23px; +`; + +export const TextBlockLi = styled.li` + border-radius: 8px; + background: #19191b; + color: #ffffff; + list-style-type: none; + padding: 0 20px; + height: 26px; +`; + +export const CombinationUl = styled.ul` + display: flex; + grid-column: 3; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin: 49px 0 0 0; + padding: 0; +`; diff --git a/src/features/Quiz/ui/Combination.tsx b/src/features/Quiz/ui/Combination.tsx new file mode 100644 index 0000000..f0f9040 --- /dev/null +++ b/src/features/Quiz/ui/Combination.tsx @@ -0,0 +1,16 @@ +import { CombinationUl, TextBlockLi } from '../styles'; + +export default function Combination() { + return ( + + asdsadasdasdasdsa + asdsadaasdasdsdsa + asdsadaasdasdsdsa + asdsadasdsa + asdsadasdasdsadsadasdasdasdsa + asdsadasdsa + asdsadasdsa + asdsadasdsasdaaaaaaaaaaaaaaaaa + + ); +} diff --git a/src/features/Quiz/ui/MultipleChoice.tsx b/src/features/Quiz/ui/MultipleChoice.tsx new file mode 100644 index 0000000..863356a --- /dev/null +++ b/src/features/Quiz/ui/MultipleChoice.tsx @@ -0,0 +1,11 @@ +import { MultipleChoiceQuestionButton, ResponseBoxSection } from '../styles'; +export default function MUltipleChoice() { + return ( + + 1 + 2 + 3 + 4 + + ); +} diff --git a/src/features/Quiz/ui/OXSelector.tsx b/src/features/Quiz/ui/OXSelector.tsx index 8392736..6d3ae2d 100644 --- a/src/features/Quiz/ui/OXSelector.tsx +++ b/src/features/Quiz/ui/OXSelector.tsx @@ -1,10 +1,12 @@ -import { OXButton, CharacterBox } from '../styles'; +import { OXButton, CharacterBox, ResponseBoxSection } from '../styles'; export default function OXSelector() { return ( <> - - 캐릭터 들어갈예정 - + + + 캐릭터 들어갈예정 + + ); } diff --git a/src/features/Quiz/ui/Question.tsx b/src/features/Quiz/ui/Question.tsx index 6d15b1a..d01e5e4 100644 --- a/src/features/Quiz/ui/Question.tsx +++ b/src/features/Quiz/ui/Question.tsx @@ -1,8 +1,14 @@ import { QuestionSection } from './../styles'; -export default function Question() { +interface questiontype { + title: string; + question: string; +} +export default function Question({ title, question }: questiontype) { return ( <> - 문제 칸 + + {title} {question} + ); } diff --git a/src/features/Quiz/ui/ResponseBox.tsx b/src/features/Quiz/ui/ResponseBox.tsx index 4d742b5..43eb442 100644 --- a/src/features/Quiz/ui/ResponseBox.tsx +++ b/src/features/Quiz/ui/ResponseBox.tsx @@ -1,9 +1,11 @@ -import { ResponseBoxSection } from '../styles'; +import Combination from './Combination'; +import MUltipleChoice from './MultipleChoice'; import OXSelector from './OXSelector'; +import ShortAnswer from './ShortAnswer'; export default function ResponseBox() { return ( - - - + <> + + ); } diff --git a/src/features/Quiz/ui/ShortAnswer.tsx b/src/features/Quiz/ui/ShortAnswer.tsx new file mode 100644 index 0000000..586cc96 --- /dev/null +++ b/src/features/Quiz/ui/ShortAnswer.tsx @@ -0,0 +1,10 @@ +import { ResponseBoxSection, ShortAnswerInput } from '../styles'; +import { CharacterBox } from '../styles'; +export default function ShortAnswer() { + return ( + + + + + ); +} diff --git a/src/pages/Quiz/Quiz.tsx b/src/pages/Quiz/Quiz.tsx index 91a3165..a0dd23b 100644 --- a/src/pages/Quiz/Quiz.tsx +++ b/src/pages/Quiz/Quiz.tsx @@ -1,20 +1,35 @@ +import { useParams } from 'react-router-dom'; import Question from '../../features/Quiz/ui/Question'; import ResponseBox from '../../features/Quiz/ui/ResponseBox'; import { AlignCenter } from '../../style/LayOut'; import { GridContainer, HeaderSection, ProgressSection } from './styles'; export default function Quiz() { + //무슨 섹션의 n번 파트로 요청 + const { section, part } = useParams(); + console.log(section, part); + //대충 가져온 문제들 + const quiz = [ + { + id: 1, + partId: 1, + sectionId: 1, + title: '실행결과를 쓰시오', + question: 'console.log(1 + 2)', + answer: 3, + category: 'ShortAnswer', + answerChoice: '', + }, + ]; return ( - - - -
로고
-
돈-??-프사
- - 진행도 - - - - + + +
로고
+
돈-??-프사
+ + 진행도 + + + ); } diff --git a/src/pages/Quiz/styles.ts b/src/pages/Quiz/styles.ts index edf122b..6d99a79 100644 --- a/src/pages/Quiz/styles.ts +++ b/src/pages/Quiz/styles.ts @@ -2,21 +2,24 @@ import styled from 'styled-components'; export const GridContainer = styled.div` display: grid; - width: 1156px; - margin: 0 62px; - grid-template-columns: 1fr 10fr 1fr; + width: 100vw; + grid-template-columns: 1fr 1fr 764px 1fr 1fr; + column-gap: 20px; `; export const HeaderSection = styled.section` display: flex; - grid-column: span 3; + grid-column: 2/5; margin-top: 42px; justify-content: space-between; background-color: gray; height: 42px; `; export const ProgressSection = styled.section` - grid-column: 2; + height: 21px; + grid-column: 3; background-color: red; text-align: center; margin-top: 34px; + border-radius: 2px; + border: 1px solid #afb1b6; `; diff --git a/src/pages/Quiz/types.ts b/src/pages/Quiz/types.ts deleted file mode 100644 index e69de29..0000000 diff --git a/src/types/ResponseBoxUi.ts b/src/types/ResponseBoxUi.ts new file mode 100644 index 0000000..17c17b3 --- /dev/null +++ b/src/types/ResponseBoxUi.ts @@ -0,0 +1,3 @@ +export default interface ResponseBoxUi { + $gapColumn?: string; +} From 2dd582bb4010061f39e3cdfac36a540dc12da8f0 Mon Sep 17 00:00:00 2001 From: GuDoYoon Date: Tue, 8 Oct 2024 18:35:59 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=8E=A8=20Publish(#34):=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20ui=EB=8B=A8=EC=9C=84=20px=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/Quiz/styles.ts | 39 +++++++----- src/features/Quiz/ui/Combination.tsx | 6 +- src/features/Quiz/ui/ConfirmButton.tsx | 8 +++ src/features/Quiz/ui/MultipleChoice.tsx | 4 +- src/features/Quiz/ui/OXSelector.tsx | 1 + src/features/Quiz/ui/Question.tsx | 3 +- src/features/Quiz/ui/ResponseBox.tsx | 29 ++++++--- src/features/Quiz/ui/SkipButton.tsx | 8 +++ src/pages/Quiz/Quiz.tsx | 79 ++++++++++++++++++++----- src/pages/Quiz/styles.ts | 23 +++++-- src/types/Quiz.ts | 10 ++++ src/types/ResponseBoxUi.ts | 1 + 12 files changed, 165 insertions(+), 46 deletions(-) create mode 100644 src/features/Quiz/ui/ConfirmButton.tsx create mode 100644 src/features/Quiz/ui/SkipButton.tsx create mode 100644 src/types/Quiz.ts diff --git a/src/features/Quiz/styles.ts b/src/features/Quiz/styles.ts index ced2b8b..54d1872 100644 --- a/src/features/Quiz/styles.ts +++ b/src/features/Quiz/styles.ts @@ -1,6 +1,9 @@ import styled from 'styled-components'; import ResponseBoxUi from '../../types/ResponseBoxUi'; +//문제(Quiz)의 제목(title)과 문항(question)이 들어갈 공간 export const QuestionSection = styled.section` + display: flex; + flex-direction: column; height: 343px; margin-top: 22px; border-radius: 2px; @@ -9,33 +12,34 @@ export const QuestionSection = styled.section` grid-column: 3; font-size: 1rem; `; +//답을 적거나 클릭하는 영역을 잡는 스타일 export const ResponseBoxSection = styled.section` display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background: #efeff0; - grid-column: 3; + grid-column: ${({ $gridColumn }) => $gridColumn || 3}; margin-top: 20px; border-radius: 2px; border: 1px solid #afb1b6; column-gap: ${({ $gapColumn }) => $gapColumn || '0px'}; `; +//캐릭터가 들어갈 박스 export const CharacterBox = styled.div` width: 176px; height: 115.757px; border: 2px solid #afb1b6; background: #efeff0; border-radius: 8px; - margin: 0 102px; `; - +//ox유형에서 ox버튼 export const OXButton = styled.button` width: 110px; height: 108px; border-radius: 10px; `; - +//객관식에서 각 문항 버튼 export const MultipleChoiceQuestionButton = styled.button` width: 372px; height: 26px; @@ -44,21 +48,12 @@ export const MultipleChoiceQuestionButton = styled.button` color: #ffffff; margin-top: 13px; `; - +//단답형 문항에서 단답형을 쓰는 인풋박스 export const ShortAnswerInput = styled.input` width: 372px; height: 23px; `; - -export const TextBlockLi = styled.li` - border-radius: 8px; - background: #19191b; - color: #ffffff; - list-style-type: none; - padding: 0 20px; - height: 26px; -`; - +//블럭유형에서 리스트박스를 잡는 리스트 박스 export const CombinationUl = styled.ul` display: flex; grid-column: 3; @@ -67,4 +62,18 @@ export const CombinationUl = styled.ul` justify-content: center; margin: 49px 0 0 0; padding: 0; + :nth-last-child(1) { + margin-right: auto; + } +`; + +//블럭유형에서 각 텍스트에 해당하는 리스트 스타일 +export const TextBlockLi = styled.li` + border-radius: 8px; + background: #19191b; + color: #ffffff; + list-style-type: none; + padding: 0 20px; + height: 26px; `; +//화면 하단의 diff --git a/src/features/Quiz/ui/Combination.tsx b/src/features/Quiz/ui/Combination.tsx index f0f9040..98ae16d 100644 --- a/src/features/Quiz/ui/Combination.tsx +++ b/src/features/Quiz/ui/Combination.tsx @@ -3,7 +3,7 @@ import { CombinationUl, TextBlockLi } from '../styles'; export default function Combination() { return ( - asdsadasdasdasdsa + asdsadasdassd asdsadaasdasdsdsa asdsadaasdasdsdsa asdsadasdsa @@ -11,6 +11,10 @@ export default function Combination() { asdsadasdsa asdsadasdsa asdsadasdsasdaaaaaaaaaaaaaaaaa + asdsadasdsasdaa + asdsadasdsasdasdsaddaa + asdsadasdsasdasdsaddaa + asdsadasdsasdasdsaddaa ); } diff --git a/src/features/Quiz/ui/ConfirmButton.tsx b/src/features/Quiz/ui/ConfirmButton.tsx new file mode 100644 index 0000000..241a74c --- /dev/null +++ b/src/features/Quiz/ui/ConfirmButton.tsx @@ -0,0 +1,8 @@ +export default function ConfirmButton() { + //답을 제출하고 + return ( + <> +
답제출/확인
+ + ); +} diff --git a/src/features/Quiz/ui/MultipleChoice.tsx b/src/features/Quiz/ui/MultipleChoice.tsx index 863356a..9ef0c68 100644 --- a/src/features/Quiz/ui/MultipleChoice.tsx +++ b/src/features/Quiz/ui/MultipleChoice.tsx @@ -1,7 +1,7 @@ import { MultipleChoiceQuestionButton, ResponseBoxSection } from '../styles'; -export default function MUltipleChoice() { +export default function MultipleChoice() { return ( - + 1 2 3 diff --git a/src/features/Quiz/ui/OXSelector.tsx b/src/features/Quiz/ui/OXSelector.tsx index 6d3ae2d..5751db3 100644 --- a/src/features/Quiz/ui/OXSelector.tsx +++ b/src/features/Quiz/ui/OXSelector.tsx @@ -1,5 +1,6 @@ import { OXButton, CharacterBox, ResponseBoxSection } from '../styles'; export default function OXSelector() { + //OX버튼을 눌러 답을 제출함 return ( <> diff --git a/src/features/Quiz/ui/Question.tsx b/src/features/Quiz/ui/Question.tsx index d01e5e4..4a11372 100644 --- a/src/features/Quiz/ui/Question.tsx +++ b/src/features/Quiz/ui/Question.tsx @@ -7,7 +7,8 @@ export default function Question({ title, question }: questiontype) { return ( <> - {title} {question} +
title: {title}
+
question: {question}
 ); diff --git a/src/features/Quiz/ui/ResponseBox.tsx b/src/features/Quiz/ui/ResponseBox.tsx index 43eb442..e376787 100644 --- a/src/features/Quiz/ui/ResponseBox.tsx +++ b/src/features/Quiz/ui/ResponseBox.tsx @@ -1,11 +1,26 @@ +import type Quiz from '../../../types/Quiz'; import Combination from './Combination'; -import MUltipleChoice from './MultipleChoice'; +import MultipleChoice from './MultipleChoice'; import OXSelector from './OXSelector'; import ShortAnswer from './ShortAnswer'; -export default function ResponseBox() { - return ( - <> - - - ); +//사용자의 응답을 저장 + +export default function ResponseBox({ + category, +}: { + category: Quiz['category']; +}) { + //문제 유형 매핑 객체 + const QuizCategoryComponentMapping: Record = { + //조합식 + Combination: , + //객관식 + MultipleChoice: , + //ox + OXSelector: , + //단답형 + ShortAnswer: , + }; + + return QuizCategoryComponentMapping[category]; } diff --git a/src/features/Quiz/ui/SkipButton.tsx b/src/features/Quiz/ui/SkipButton.tsx new file mode 100644 index 0000000..ed1b3ee --- /dev/null +++ b/src/features/Quiz/ui/SkipButton.tsx @@ -0,0 +1,8 @@ +export default function SkipButton() { + //답을 'skip'으로 제출하고 다음 문제로 + return ( + <> +
스킵버튼
+ + ); +} diff --git a/src/pages/Quiz/Quiz.tsx b/src/pages/Quiz/Quiz.tsx index a0dd23b..385cca8 100644 --- a/src/pages/Quiz/Quiz.tsx +++ b/src/pages/Quiz/Quiz.tsx @@ -2,34 +2,83 @@ import { useParams } from 'react-router-dom'; import Question from '../../features/Quiz/ui/Question'; import ResponseBox from '../../features/Quiz/ui/ResponseBox'; import { AlignCenter } from '../../style/LayOut'; -import { GridContainer, HeaderSection, ProgressSection } from './styles'; - +import { + GridContainer, + HeaderSection, + ProgressSection, + FooterSection, +} from './styles'; +import type Quiz from '../../types/Quiz'; +import SkipButton from '../../features/Quiz/ui/SkipButton'; +import ConfirmButton from '../../features/Quiz/ui/ConfirmButton'; +//퀴즈페이지 export default function Quiz() { - //무슨 섹션의 n번 파트로 요청 const { section, part } = useParams(); console.log(section, part); //대충 가져온 문제들 - const quiz = [ + const quiz: Quiz[] = [ + //예시 1섹션 1파트에 문제 4개 + //단답형 { id: 1, partId: 1, sectionId: 1, title: '실행결과를 쓰시오', question: 'console.log(1 + 2)', - answer: 3, + answer: ['3'], category: 'ShortAnswer', - answerChoice: '', + answerChoice: [''], + }, + //객관식 + { + id: 2, + partId: 1, + sectionId: 1, + title: '실행결과를 쓰시오', + question: 'console.log(1 + 2)', + answer: ['3'], + category: 'MultipleChoice', + answerChoice: ['1', '4', '3', '7'], + }, + //ox유형 + { + id: 3, + partId: 1, + sectionId: 1, + title: 'OX문제', + question: '1 은 number타입이다?', + answer: ['O'], + category: 'OXSelector', + answerChoice: [''], + }, + //조합형 + { + id: 4, + partId: 1, + sectionId: 1, + title: '빈칸을 채우시오', + question: '[ ].log([ ])', + answer: ['3'], + category: 'Combination', + answerChoice: ['console', '1+2', 'function', '어쩌구저쩌구', '두두두두'], }, ]; + return ( - - -
로고
-
돈-??-프사
- - 진행도 - - - + + + +
로고
+
돈-??-프사
+ + 진행도 + + + + + + + + ); } diff --git a/src/pages/Quiz/styles.ts b/src/pages/Quiz/styles.ts index 6d99a79..f9d74b8 100644 --- a/src/pages/Quiz/styles.ts +++ b/src/pages/Quiz/styles.ts @@ -1,21 +1,25 @@ import styled from 'styled-components'; - +//그리드 나누기용 width는 나중에 글로벌스타일 들어오면 지우기 export const GridContainer = styled.div` display: grid; - width: 100vw; - grid-template-columns: 1fr 1fr 764px 1fr 1fr; + width: 1280px; + grid-template-columns: 98px 98px 764px 196px; column-gap: 20px; `; +//헤더 영역잡기용 나중에 헤더 생기면 지우기 export const HeaderSection = styled.section` display: flex; - grid-column: 2/5; + position: sticky; + grid-column: 2/6; + top: 0; margin-top: 42px; justify-content: space-between; background-color: gray; height: 42px; `; +//진행도 영역잡기용 나중에 진행도 컴포넌트 분리되면 지우기 export const ProgressSection = styled.section` - height: 21px; + height: 20px; grid-column: 3; background-color: red; text-align: center; @@ -23,3 +27,12 @@ export const ProgressSection = styled.section` border-radius: 2px; border: 1px solid #afb1b6; `; +//푸터 영역잡기 +export const FooterSection = styled.section` + display: flex; + height: 108px; + align-items: center; + justify-content: space-between; + grid-column: 3; + margin-top: 19px; +`; diff --git a/src/types/Quiz.ts b/src/types/Quiz.ts new file mode 100644 index 0000000..34f8b92 --- /dev/null +++ b/src/types/Quiz.ts @@ -0,0 +1,10 @@ +export default interface Quiz { + id: number; + partId: number; + sectionId: number; + title: string; + question: string; + answer: string[]; + category: 'Combination' | 'MultipleChoice' | 'OXSelector' | 'ShortAnswer'; + answerChoice: string[]; +} diff --git a/src/types/ResponseBoxUi.ts b/src/types/ResponseBoxUi.ts index 17c17b3..f0f4d3b 100644 --- a/src/types/ResponseBoxUi.ts +++ b/src/types/ResponseBoxUi.ts @@ -1,3 +1,4 @@ export default interface ResponseBoxUi { $gapColumn?: string; + $gridColumn?: string; } From b17dc7b739c28919bd90101c54858caa22fb439b Mon Sep 17 00:00:00 2001 From: GuDoYoon Date: Tue, 8 Oct 2024 19:13:48 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=8E=A8=20Publish(#34):=20router=20?= =?UTF-8?q?=EC=B5=9C=EC=8B=A0=ED=99=94=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/route/Router.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 0d9b698..4f5f70a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import Router from './route/router'; +import Router from './route/Router'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; function App() { diff --git a/src/route/Router.tsx b/src/route/Router.tsx index 966eed2..6ec72c3 100644 --- a/src/route/Router.tsx +++ b/src/route/Router.tsx @@ -2,6 +2,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Main from '../pages/main/Main'; import Quest from '../pages/Quest/Quest'; import Ranking from '../pages/Ranking/Ranking'; +import Quiz from '../pages/Quiz/Quiz'; export default function Router() { return ( <> @@ -10,6 +11,7 @@ export default function Router() { }> }> }> + }> From 58d42ca651e8ba8e07a248237d97c2f029be14d3 Mon Sep 17 00:00:00 2001 From: GuDoYoon Date: Fri, 11 Oct 2024 18:48:01 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=8E=A8=20Publish(#34):=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/Quiz/styles.ts | 24 ++++++++++++++--- src/features/Quiz/ui/Button.tsx | 13 +++++++++ src/features/Quiz/ui/Combination.tsx | 20 +++++--------- src/features/Quiz/ui/ConfirmButton.tsx | 8 ------ src/features/Quiz/ui/MultipleChoice.tsx | 14 ++++++---- src/features/Quiz/ui/OXSelector.tsx | 2 +- src/features/Quiz/ui/ResponseBox.tsx | 26 ------------------ src/features/Quiz/ui/ShortAnswer.tsx | 4 +-- src/features/Quiz/ui/SkipButton.tsx | 8 ------ src/pages/Quiz/Quiz.tsx | 35 ++++++++++++++++++------- src/pages/Quiz/styles.ts | 3 +-- src/route/Router.tsx | 4 +-- src/store/useQuizStore.tsx | 16 +++++++++++ src/types/ResponseBoxUi.ts | 4 --- 14 files changed, 96 insertions(+), 85 deletions(-) create mode 100644 src/features/Quiz/ui/Button.tsx delete mode 100644 src/features/Quiz/ui/ConfirmButton.tsx delete mode 100644 src/features/Quiz/ui/ResponseBox.tsx delete mode 100644 src/features/Quiz/ui/SkipButton.tsx create mode 100644 src/store/useQuizStore.tsx delete mode 100644 src/types/ResponseBoxUi.ts diff --git a/src/features/Quiz/styles.ts b/src/features/Quiz/styles.ts index 54d1872..9abc8bd 100644 --- a/src/features/Quiz/styles.ts +++ b/src/features/Quiz/styles.ts @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import ResponseBoxUi from '../../types/ResponseBoxUi'; + //문제(Quiz)의 제목(title)과 문항(question)이 들어갈 공간 export const QuestionSection = styled.section` display: flex; @@ -13,9 +13,15 @@ export const QuestionSection = styled.section` font-size: 1rem; `; //답을 적거나 클릭하는 영역을 잡는 스타일 -export const ResponseBoxSection = styled.section` +interface ResponseBoxProps { + $gapColumn?: string; + $gridColumn?: string; + $justifyContent?: string; +} + +export const ResponseBoxSection = styled.section` display: flex; - justify-content: center; + justify-content: ${({ $justifyContent }) => $justifyContent || 'center'}; align-items: center; flex-wrap: wrap; background: #efeff0; @@ -26,11 +32,16 @@ export const ResponseBoxSection = styled.section` column-gap: ${({ $gapColumn }) => $gapColumn || '0px'}; `; //캐릭터가 들어갈 박스 -export const CharacterBox = styled.div` +interface CharacterBoxProps { + $margin: string; +} + +export const CharacterBox = styled.div` width: 176px; height: 115.757px; border: 2px solid #afb1b6; background: #efeff0; + margin: ${({ $margin }) => $margin || '0'}; border-radius: 8px; `; //ox유형에서 ox버튼 @@ -77,3 +88,8 @@ export const TextBlockLi = styled.li` height: 26px; `; //화면 하단의 +export const ResponseButton = styled.button` + width: 94px; + height: 26px; + border-radius: 24px; +`; diff --git a/src/features/Quiz/ui/Button.tsx b/src/features/Quiz/ui/Button.tsx new file mode 100644 index 0000000..3837128 --- /dev/null +++ b/src/features/Quiz/ui/Button.tsx @@ -0,0 +1,13 @@ +interface ButtonProps { + buttonName: string; + handleClick: () => void; +} +import { ResponseButton } from '../styles'; +export default function Button({ buttonName, handleClick }: ButtonProps) { + //답을 제출하고 + return ( + <> + {buttonName} + + ); +} diff --git a/src/features/Quiz/ui/Combination.tsx b/src/features/Quiz/ui/Combination.tsx index 98ae16d..635d0bc 100644 --- a/src/features/Quiz/ui/Combination.tsx +++ b/src/features/Quiz/ui/Combination.tsx @@ -1,20 +1,14 @@ +import Quiz from '../../../types/Quiz'; import { CombinationUl, TextBlockLi } from '../styles'; -export default function Combination() { +export default function Combination({ + answerChoice, +}: Pick) { return ( - asdsadasdassd - asdsadaasdasdsdsa - asdsadaasdasdsdsa - asdsadasdsa - asdsadasdasdsadsadasdasdasdsa - asdsadasdsa - asdsadasdsa - asdsadasdsasdaaaaaaaaaaaaaaaaa - asdsadasdsasdaa - asdsadasdsasdasdsaddaa - asdsadasdsasdasdsaddaa - asdsadasdsasdasdsaddaa + {answerChoice.map(value => ( + {value} + ))} ); } diff --git a/src/features/Quiz/ui/ConfirmButton.tsx b/src/features/Quiz/ui/ConfirmButton.tsx deleted file mode 100644 index 241a74c..0000000 --- a/src/features/Quiz/ui/ConfirmButton.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export default function ConfirmButton() { - //답을 제출하고 - return ( - <> -
답제출/확인
- - ); -} diff --git a/src/features/Quiz/ui/MultipleChoice.tsx b/src/features/Quiz/ui/MultipleChoice.tsx index 9ef0c68..3633e2c 100644 --- a/src/features/Quiz/ui/MultipleChoice.tsx +++ b/src/features/Quiz/ui/MultipleChoice.tsx @@ -1,11 +1,15 @@ +import Quiz from '../../../types/Quiz'; import { MultipleChoiceQuestionButton, ResponseBoxSection } from '../styles'; -export default function MultipleChoice() { +export default function MultipleChoice({ + answerChoice, +}: Pick) { return ( - 1 - 2 - 3 - 4 + {answerChoice.map((value, index) => ( + + {index + 1} : {value} + + ))} ); } diff --git a/src/features/Quiz/ui/OXSelector.tsx b/src/features/Quiz/ui/OXSelector.tsx index 5751db3..5027420 100644 --- a/src/features/Quiz/ui/OXSelector.tsx +++ b/src/features/Quiz/ui/OXSelector.tsx @@ -5,7 +5,7 @@ export default function OXSelector() { <> - 캐릭터 들어갈예정 + 캐릭터 들어갈예정 diff --git a/src/features/Quiz/ui/ResponseBox.tsx b/src/features/Quiz/ui/ResponseBox.tsx deleted file mode 100644 index e376787..0000000 --- a/src/features/Quiz/ui/ResponseBox.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import type Quiz from '../../../types/Quiz'; -import Combination from './Combination'; -import MultipleChoice from './MultipleChoice'; -import OXSelector from './OXSelector'; -import ShortAnswer from './ShortAnswer'; -//사용자의 응답을 저장 - -export default function ResponseBox({ - category, -}: { - category: Quiz['category']; -}) { - //문제 유형 매핑 객체 - const QuizCategoryComponentMapping: Record = { - //조합식 - Combination: , - //객관식 - MultipleChoice: , - //ox - OXSelector: , - //단답형 - ShortAnswer: , - }; - - return QuizCategoryComponentMapping[category]; -} diff --git a/src/features/Quiz/ui/ShortAnswer.tsx b/src/features/Quiz/ui/ShortAnswer.tsx index 586cc96..fa9605f 100644 --- a/src/features/Quiz/ui/ShortAnswer.tsx +++ b/src/features/Quiz/ui/ShortAnswer.tsx @@ -2,9 +2,9 @@ import { ResponseBoxSection, ShortAnswerInput } from '../styles'; import { CharacterBox } from '../styles'; export default function ShortAnswer() { return ( - + - + ); } diff --git a/src/features/Quiz/ui/SkipButton.tsx b/src/features/Quiz/ui/SkipButton.tsx deleted file mode 100644 index ed1b3ee..0000000 --- a/src/features/Quiz/ui/SkipButton.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export default function SkipButton() { - //답을 'skip'으로 제출하고 다음 문제로 - return ( - <> -
스킵버튼
- - ); -} diff --git a/src/pages/Quiz/Quiz.tsx b/src/pages/Quiz/Quiz.tsx index 385cca8..6f1b4a8 100644 --- a/src/pages/Quiz/Quiz.tsx +++ b/src/pages/Quiz/Quiz.tsx @@ -1,6 +1,5 @@ -import { useParams } from 'react-router-dom'; import Question from '../../features/Quiz/ui/Question'; -import ResponseBox from '../../features/Quiz/ui/ResponseBox'; + import { AlignCenter } from '../../style/LayOut'; import { GridContainer, @@ -9,12 +8,17 @@ import { FooterSection, } from './styles'; import type Quiz from '../../types/Quiz'; -import SkipButton from '../../features/Quiz/ui/SkipButton'; -import ConfirmButton from '../../features/Quiz/ui/ConfirmButton'; +import { useClientQuizStore } from '../../store/useQuizStore'; +import Button from '../../features/Quiz/ui/Button'; +import Combination from '../../features/Quiz/ui/Combination'; +import MultipleChoice from '../../features/Quiz/ui/MultipleChoice'; +import OXSelector from '../../features/Quiz/ui/OXSelector'; +import ShortAnswer from '../../features/Quiz/ui/ShortAnswer'; + //퀴즈페이지 export default function Quiz() { - const { section, part } = useParams(); - console.log(section, part); + // const { section, part } = useParams(); + const { currentPage, handleNextPage } = useClientQuizStore(); //대충 가져온 문제들 const quiz: Quiz[] = [ //예시 1섹션 1파트에 문제 4개 @@ -63,6 +67,17 @@ export default function Quiz() { answerChoice: ['console', '1+2', 'function', '어쩌구저쩌구', '두두두두'], }, ]; + const { title, question, category, answer, answerChoice } = quiz[currentPage]; + const QuizCategoryComponentMapping: Record = { + //조합식 + Combination: , + //객관식 + MultipleChoice: , + //ox + OXSelector: , + //단답형 + ShortAnswer: , + }; return ( @@ -72,11 +87,11 @@ export default function Quiz() {
돈-??-프사
진행도 - - + + {QuizCategoryComponentMapping[category]} - - +