hotfix: 문제 페이지 스타일링

[#121]
boostcampwm2023 · Nov 24, 2023 · 72e1dd1 · 72e1dd1
1 parent 32e958f
commit 72e1dd1
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>