refactor: 퀴즈 페이지 QuizGuide 컴포넌트 분리

[#206]

packages/frontend/src/components/quiz/CommandAccordion/CommandAccordion.tsx

@@ -1,7 +1,11 @@
 import Link from "next/link";
 
 import { GIT_BOOK_URL } from "../../../constants/path";
-import { Accordion, Badge , badgeVariantList } from "../../../design-system/components/common";
+import {
+  Accordion,
+  Badge,
+  badgeVariantList,
+} from "../../../design-system/components/common";
 
 import badgeGroupLayout from "./CommandAccordion.css";
 

packages/frontend/src/components/quiz/QuizContent/QuizContent.css.ts

@@ -12,16 +12,11 @@ export const description = style([
   typography.$semantic.body2Regular,
   {
     marginTop: 10,
-    height: 60,
+    maxHeight: 190,
     padding: "0 8px 4px 0",
     color: color.$scale.grey700,
     overflowY: "auto",
     whiteSpace: "break-spaces",
-    "@media": {
-      "(min-width: 1920px) and (max-width: 2559px)": {
-        height: 250,
-      },
-    },
   },
 ]);
 

packages/frontend/src/components/quiz/QuizContent/QuizContent.tsx

@@ -15,13 +15,13 @@ export default function QuizContent({
   category,
 }: QuizContentProps) {
   return (
-    <>
+    <div>
       <QuizLocation items={[category, title]} />
       <strong className={styles.strong}>문제</strong>
       <p
         className={styles.description}
         dangerouslySetInnerHTML={{ __html: toCodeTag(description) }}
       />
-    </>
+    </div>
   );
 }

packages/frontend/src/components/quiz/QuizGuide/QuizGuide.css.ts

@@ -0,0 +1,24 @@
+import { style } from "@vanilla-extract/css";
+
+import color from "../../../design-system/tokens/color";
+import { flexColumn } from "../../../design-system/tokens/utils.css";
+
+const containerPadding = 23;
+
+export const quizContentContainer = style([
+  flexColumn,
+  {
+    position: "relative",
+    width: "50%",
+    height: "400px",
+    borderLeft: `1px solid ${color.$semantic.border}`,
+    padding: containerPadding,
+    gap: 12,
+  },
+]);
+
+export const checkAnswerButton = style({
+  position: "absolute",
+  right: containerPadding,
+  bottom: containerPadding,
+});

packages/frontend/src/components/quiz/QuizGuide/QuizGuide.tsx

@@ -0,0 +1,22 @@
+import { Button } from "../../../design-system/components/common";
+import { Quiz } from "../../../types/quiz";
+import CommandAccordion from "../CommandAccordion";
+import QuizContent from "../QuizContent";
+
+import * as styles from "./QuizGuide.css";
+
+export function QuizGuide({ quiz }: { quiz: Quiz }) {
+  return (
+    <div className={styles.quizContentContainer}>
+      <QuizContent
+        category={quiz.category}
+        title={quiz.title}
+        description={quiz.description}
+      />
+      <CommandAccordion width="100%" items={quiz.keywords} />
+      <Button className={styles.checkAnswerButton} variant="secondaryFill">
+        모범 답안 확인하기
+      </Button>
+    </div>
+  );
+}

packages/frontend/src/components/quiz/QuizGuide/index.ts

@@ -0,0 +1 @@
+export { QuizGuide } from "./QuizGuide";

packages/frontend/src/components/terminal/Terminal.css.ts

@@ -2,12 +2,13 @@ import { style } from "@vanilla-extract/css";
 
 import color from "../../design-system/tokens/color";
 import typography from "../../design-system/tokens/typography";
-import { flexAlignCenter } from "../../design-system/tokens/utils.css";
+import { border, flexAlignCenter } from "../../design-system/tokens/utils.css";
 
 const hrHeight = "20px";
 
 export const container = style([
   typography.$semantic.code,
+  border.all,
   {
     height: 180,
     width: "100%",
@@ -18,7 +19,6 @@ export const hr = style({
   height: hrHeight,
   margin: 0,
   border: "none",
-  borderTop: `1px solid ${color.$semantic.border}`,
   borderBottom: `1px solid ${color.$semantic.border}`,
   backgroundColor: color.$scale.grey100,
 });

packages/frontend/src/pages/quizzes/[id].page.tsx

@@ -0,0 +1,79 @@
+import axios from "axios";
+import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from "next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+import { quizAPI } from "../../apis/quiz";
+import { QuizGuide } from "../../components/quiz/QuizGuide";
+import { Terminal } from "../../components/terminal";
+import { Button } from "../../design-system/components/common";
+import { Categories, Quiz } from "../../types/quiz";
+import { TerminalContentType } from "../../types/terminalType";
+import { isString } from "../../utils/typeGuard";
+
+import * as styles from "./quiz.css";
+
+export default function QuizPage({ quiz }: { quiz: Quiz }) {
+  const [contentArray, setContentArray] = useState<TerminalContentType[]>([]);
+  const {
+    query: { id },
+  } = useRouter();
+
+  useEffect(() => {
+    setContentArray([]);
+  }, [id]);
+
+  const handleTerminal = async (input: string) => {
+    if (!isString(id)) {
+      return;
+    }
+
+    const data = await quizAPI.postCommand({
+      id: +id,
+      command: input,
+    });
+    setContentArray([
+      ...contentArray,
+      { type: "stdin", content: input },
+      { type: "stdout", content: data.message },
+    ]);
+  };
+
+  if (!quiz) return null;
+  return (
+    <main className={styles.mainContainer}>
+      <div className={styles.topContainer}>
+        <div style={{ width: "50%", display: "flex" }}>git graph</div>
+        <QuizGuide quiz={quiz} />
+      </div>
+      <Terminal contentArray={contentArray} onTerminal={handleTerminal} />
+      <Button variant="primaryFill">제출 후 채점하기</Button>
+    </main>
+  );
+}
+
+export const getStaticProps = (async ({ params }: GetStaticPropsContext) => {
+  const { data } = await axios.get<Quiz>(
+    `https://git-challenge.com/api/v1/quizzes/${params?.id}`,
+  );
+
+  return {
+    props: {
+      quiz: data,
+    },
+  };
+}) satisfies GetStaticProps<{
+  quiz: Quiz;
+}>;
+
+export const getStaticPaths = (async () => {
+  const {
+    data: { categories },
+  } = await axios.get<Categories>("https://git-challenge.com/api/v1/quizzes");
+
+  const paths = categories.flatMap(({ quizzes }) =>
+    quizzes.map(({ id }) => ({ params: { id: String(id) } })),
+  );
+
+  return { paths, fallback: "blocking" };
+}) satisfies GetStaticPaths;

packages/frontend/src/pages/quizzes/quiz.css.ts

@@ -0,0 +1,7 @@
+import { style } from "@vanilla-extract/css";
+
+import { border, flex, widthFull } from "../../design-system/tokens/utils.css";
+
+export const mainContainer = style([widthFull]);
+
+export const topContainer = style([flex, border.verticalSide]);