diff --git a/src/components/SideNavigation/sideNavigation.js b/src/components/SideNavigation/sideNavigation.js index b0f2346..da676ad 100644 --- a/src/components/SideNavigation/sideNavigation.js +++ b/src/components/SideNavigation/sideNavigation.js @@ -23,29 +23,42 @@ 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 })); }; @@ -53,19 +66,14 @@ const SideNavigation = ({ categoryObject }) => { const filterReset = () => { setMainCategoryStates(initialMainCategoryStates); setSubCategoryStates(initialSubCategoryStates); + setSubCategoryVisibility(initialSubCategoryVisibility); }; return ( 필터 - { - filterReset(); - }} - > - 초기화 - + 초기화 {/* 모집기간 섹션 */} @@ -90,22 +98,21 @@ const SideNavigation = ({ categoryObject }) => { /> {category.mainCategory} - - {category.subCategories.map((subCategory, index) => ( - - - handleSubCategoryCheckbox(category.kind, index) - } - /> - {subCategory} - - ))} - + {subCategoryVisibility[category.kind] && ( + + {category.subCategories.map((subCategory, index) => ( + + + handleSubCategoryCheckbox(category.kind, index) + } + /> + {subCategory} + + ))} + + )} ))}