feat: #50-사이드 네비게이션 드롭다운으로 변경

src/components/SideNavigation/sideNavigation.js

@@ -23,49 +23,57 @@ const SideNavigation = ({ categoryObject }) => {
     return acc;
   }, {});
 
+  const initialSubCategoryVisibility = categoryObject.reduce(
+    (acc, category) => {
+      acc[category.kind] = true;
+      return acc;
+    },
+    {},
+  );
+
   const [mainCategoryStates, setMainCategoryStates] = useState(
     initialMainCategoryStates,
   );
   const [subCategoryStates, setSubCategoryStates] = useState(
     initialSubCategoryStates,
   );
+  const [subCategoryVisibility, setSubCategoryVisibility] = useState(
+    initialSubCategoryVisibility,
+  );
 
   const handleMainCategoryCheckbox = (kind) => {
-    var futureStateOfMain = !mainCategoryStates[kind];
-    // 서브카테고리은 메인카테고리가 변경될 값으로 전부 따라감
-    setMainCategoryStates((prev) => ({ ...prev, [kind]: !prev[kind] }));
+    const futureStateOfMain = !mainCategoryStates[kind];
+    setMainCategoryStates((prev) => ({ ...prev, [kind]: futureStateOfMain }));
     setSubCategoryStates((prev) => ({
       ...prev,
       [kind]: prev[kind].fill(futureStateOfMain),
     }));
+    setSubCategoryVisibility((prev) => ({
+      ...prev,
+      [kind]: futureStateOfMain,
+    }));
   };
 
   const handleSubCategoryCheckbox = (kind, index) => {
-    var temp = subCategoryStates[kind];
+    const temp = [...subCategoryStates[kind]];
     temp[index] = !temp[index];
     if (!temp[index]) {
-      // 서브 카테고리중 1개라도 체크를 해제하면, 메인카테고리도 체크 해제 되야함
-      setMainCategoryStates((pres) => ({ ...pres, [kind]: false }));
+      setMainCategoryStates((prev) => ({ ...prev, [kind]: false }));
     }
     setSubCategoryStates((prev) => ({ ...prev, [kind]: temp }));
   };
 
   const filterReset = () => {
     setMainCategoryStates(initialMainCategoryStates);
     setSubCategoryStates(initialSubCategoryStates);
+    setSubCategoryVisibility(initialSubCategoryVisibility);
   };
 
   return (
     <Navigation>
       <NavHeader>
         <Title>필터</Title>
-        <ResetButton
-          onClick={() => {
-            filterReset();
-          }}
-        >
-          초기화
-        </ResetButton>
+        <ResetButton onClick={filterReset}>초기화</ResetButton>
       </NavHeader>
 
       {/* 모집기간 섹션 */}
@@ -90,22 +98,21 @@ const SideNavigation = ({ categoryObject }) => {
             />
             <SectionTitle>{category.mainCategory}</SectionTitle>
           </SectionTitleRow>
-          <ItemList>
-            {category.subCategories.map((subCategory, index) => (
-              <Item key={index}>
-                <Checkbox
-                  checked={
-                    mainCategoryStates[category.kind] ||
-                    subCategoryStates[category.kind][index]
-                  }
-                  onChange={() =>
-                    handleSubCategoryCheckbox(category.kind, index)
-                  }
-                />
-                {subCategory}
-              </Item>
-            ))}
-          </ItemList>
+          {subCategoryVisibility[category.kind] && (
+            <ItemList>
+              {category.subCategories.map((subCategory, index) => (
+                <Item key={index}>
+                  <Checkbox
+                    checked={subCategoryStates[category.kind][index]}
+                    onChange={() =>
+                      handleSubCategoryCheckbox(category.kind, index)
+                    }
+                  />
+                  {subCategory}
+                </Item>
+              ))}
+            </ItemList>
+          )}
         </Section>
       ))}
     </Navigation>