From 72e1dd1964cc8cbd1a73cfb9a9f71776a50c7334 Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Fri, 24 Nov 2023 08:50:29 +0900
Subject: [PATCH] =?UTF-8?q?hotfix:=20=EB=AC=B8=EC=A0=9C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#121]
---
 .../components/quiz/CommandAccordion/CommandAccordion.tsx | 8 ++++++--
 .../src/components/quiz/QuizContent/QuizContent.css.ts    | 2 +-
 .../components/common/Accordion/Accordion.tsx             | 2 +-
 .../common/Accordion/AccordionContextProvider.tsx         | 8 ++++----
 packages/frontend/src/pages/quizzes/[id].tsx              | 2 +-
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/quiz/CommandAccordion/CommandAccordion.tsx b/packages/frontend/src/components/quiz/CommandAccordion/CommandAccordion.tsx
index dc40f92..a7b84cb 100644
--- a/packages/frontend/src/components/quiz/CommandAccordion/CommandAccordion.tsx
+++ b/packages/frontend/src/components/quiz/CommandAccordion/CommandAccordion.tsx
@@ -6,12 +6,16 @@ import {
 import badgeGroupLayout from "./CommandAccordion.css";
 
 interface CommandAccordionProps {
+  width?: number | string;
   items: string[];
 }
 
-export default function CommandAccordion({ items }: CommandAccordionProps) {
+export default function CommandAccordion({
+  width = "100%",
+  items,
+}: CommandAccordionProps) {
   return (
-    <Accordion>
+    <Accordion width={width}>
       <Accordion.Details>
         <Accordion.Summary color="grey" size="sm">
           {({ open }) => <>핵심명령어 {open ? "숨기기" : "보기"}</>}
diff --git a/packages/frontend/src/components/quiz/QuizContent/QuizContent.css.ts b/packages/frontend/src/components/quiz/QuizContent/QuizContent.css.ts
index b843802..a60aaa7 100644
--- a/packages/frontend/src/components/quiz/QuizContent/QuizContent.css.ts
+++ b/packages/frontend/src/components/quiz/QuizContent/QuizContent.css.ts
@@ -19,7 +19,7 @@ export const description = style([
     whiteSpace: "break-spaces",
     "@media": {
       "(min-width: 1920px) and (max-width: 2559px)": {
-        height: "330px",
+        height: 250,
       },
     },
   },
diff --git a/packages/frontend/src/design-system/components/common/Accordion/Accordion.tsx b/packages/frontend/src/design-system/components/common/Accordion/Accordion.tsx
index 3fa39ca..c66ab34 100644
--- a/packages/frontend/src/design-system/components/common/Accordion/Accordion.tsx
+++ b/packages/frontend/src/design-system/components/common/Accordion/Accordion.tsx
@@ -5,7 +5,7 @@ import AccordionDetails from "./AccordionDetails";
 import AccordionSummary from "./AccordionSummary";
 
 interface AccordionProps {
-  width?: number;
+  width?: number | string;
   open?: boolean;
   children: ReactNode;
 }
diff --git a/packages/frontend/src/design-system/components/common/Accordion/AccordionContextProvider.tsx b/packages/frontend/src/design-system/components/common/Accordion/AccordionContextProvider.tsx
index cb543d1..17cbf50 100644
--- a/packages/frontend/src/design-system/components/common/Accordion/AccordionContextProvider.tsx
+++ b/packages/frontend/src/design-system/components/common/Accordion/AccordionContextProvider.tsx
@@ -10,7 +10,7 @@ import {
 
 export type AccordionContextType = {
   open: boolean;
-  width: number;
+  width: number | string;
   onChange: (open: boolean) => void;
 };
 
@@ -27,7 +27,7 @@ export function AccordionContextProvider({
   children,
 }: {
   open: boolean;
-  width: number;
+  width: number | string;
   children: ReactNode;
 }) {
   const [open, setOpen] = useState(initOpen);
@@ -36,12 +36,12 @@ export function AccordionContextProvider({
     (nextOpen: boolean) => {
       setOpen(nextOpen);
     },
-    [setOpen]
+    [setOpen],
   );
 
   const accordionContextValue = useMemo(
     () => ({ open, onChange: handleChange, width }),
-    [open, handleChange, width]
+    [open, handleChange, width],
   );
 
   useEffect(() => {
diff --git a/packages/frontend/src/pages/quizzes/[id].tsx b/packages/frontend/src/pages/quizzes/[id].tsx
index 95c97f9..501105c 100644
--- a/packages/frontend/src/pages/quizzes/[id].tsx
+++ b/packages/frontend/src/pages/quizzes/[id].tsx
@@ -48,7 +48,7 @@ export default function QuizPage({ quiz }: { quiz: Quiz }) {
               description={quiz.description}
             />
             <div className={styles.commandAccordion}>
-              <CommandAccordion items={quiz.keywords} />
+              <CommandAccordion width="100%" items={quiz.keywords} />
             </div>
             <div className={styles.checkAnswerButton}>
               <Button variant="secondaryFill">모범 답안 확인하기</Button>