refactor: Sidebar > SubTitleItem 컴포넌트 분리

[#252]
boostcampwm2023 · Dec 14, 2023 · 38a82e3 · 38a82e3
1 parent 8449e07
commit 38a82e3
Showing 1 changed file with 36 additions and 22 deletions.
diff --git a/packages/frontend/src/design-system/components/common/SideBar/SideBar.tsx b/packages/frontend/src/design-system/components/common/SideBar/SideBar.tsx
@@ -19,20 +19,22 @@ export default function SideBar() {
         <Accordion key={item.title} open>
           <Accordion.Details>
             <Accordion.Summary>{item.title}</Accordion.Summary>
-            <SubItems subItems={item.subItems} />
+            <SubTitleList subItems={item.subItems} />
           </Accordion.Details>
         </Accordion>
       ))}
     </nav>
   );
 }
 
-interface SubItemsProps {
-  id?: number;
-  subTitle: string;
+interface SubTitleListProps {
+  subItems: {
+    id: number;
+    subTitle: string;
+  }[];
 }
 
-function SubItems({ subItems }: { subItems: SubItemsProps[] }) {
+function SubTitleList({ subItems }: SubTitleListProps) {
   const {
     query: { id },
   } = useRouter();
@@ -42,24 +44,36 @@ function SubItems({ subItems }: { subItems: SubItemsProps[] }) {
 
   return (
     <ol className={styles.linkContainerStyle}>
-      {subItems.map((subTitle) => (
-        <li
-          className={styles.linkItemStyle}
-          key={[subTitle.subTitle, subTitle?.id].join("")}
-        >
-          <Link
-            href={`${BROWSWER_PATH.QUIZZES}/${subTitle.id}`}
-            className={
-              idNum === subTitle.id ? styles.currentLinkStyle : styles.linkStyle
-            }
-          >
-            {subTitle.subTitle}
-            {userQuizStatus[subTitle.id ?? ""] && (
-              <IoMdCheckmark className={styles.checkIcon} size={14} />
-            )}
-          </Link>
-        </li>
+      {subItems.map(({ subTitle, id: subItemId }) => (
+        <SubTitleItem
+          key={subItemId}
+          subTitle={subTitle}
+          id={subItemId ?? 0}
+          current={idNum === subItemId}
+          solved={userQuizStatus[subItemId ?? 0] ?? false}
+        />
       ))}
     </ol>
   );
 }
+
+interface SubTitleItemProps {
+  id: number;
+  subTitle: string;
+  current: boolean;
+  solved: boolean;
+}
+
+function SubTitleItem({ subTitle, id, current, solved }: SubTitleItemProps) {
+  return (
+    <li className={styles.linkItemStyle} key={[subTitle, id].join("")}>
+      <Link
+        href={`${BROWSWER_PATH.QUIZZES}/${id}`}
+        className={current ? styles.currentLinkStyle : styles.linkStyle}
+      >
+        {subTitle}
+        {solved && <IoMdCheckmark className={styles.checkIcon} size={14} />}
+      </Link>
+    </li>
+  );
+}