♻️ 필요없는 중간 컴포넌트 삭제

woowacourse-teams · Oct 18, 2024 · 768c13f · 768c13f
1 parent bc29475
commit 768c13f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 51 deletions.
diff --git a/...airRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoriesEditor.styles.ts b/...airRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoriesEditor.styles.ts
diff --git a/...letedPairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoriesEditor.tsx b/...letedPairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoriesEditor.tsx
diff --git a/...CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.styles.ts b/...CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.styles.ts
@@ -14,3 +14,11 @@ export const Header = styled.div`
   color: ${({ theme }) => theme.color.black[80]};
   font-size: ${({ theme }) => theme.fontSize.lg};
 `;
+
+export const CategoryList = styled.ul`
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+
+  width: 100%;
+`;
diff --git a/...nents/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.tsx b/...nents/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryManagementModal.tsx
@@ -1,13 +1,12 @@
 import { FaFilter } from 'react-icons/fa';
 
 import { Modal } from '@/components/common/Modal';
-import CategoriesEditor from '@/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoriesEditor';
+import CategoryItem from '@/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/CategoryItem';
 import { Category } from '@/components/PairRoom/ReferenceCard/ReferenceCard.type';
 
 import * as S from './CategoryManagementModal.styles';
 
 interface CategoryManagementModalProps {
-  accessCode: string;
   isOpen: boolean;
   closeModal: () => void;
   categories: Category[];
@@ -17,7 +16,6 @@ interface CategoryManagementModalProps {
 }
 
 const CategoryManagementModal = ({
-  accessCode,
   isOpen,
   closeModal,
   categories,
@@ -38,13 +36,18 @@ const CategoryManagementModal = ({
       </Modal.Header>
       <Modal.CloseButton close={closeCategoryManagementModal} />
       <Modal.Body>
-        <CategoriesEditor
-          categories={categories}
-          selectedCategory={selectedCategory}
-          handleSelectCategory={handleSelectCategory}
-          accessCode={accessCode}
-          closeModal={closeCategoryManagementModal}
-        />
+        <S.CategoryList>
+          {categories.map((category) => (
+            <CategoryItem
+              closeModal={closeModal}
+              key={category.id}
+              categoryName={category.value}
+              categoryId={category.id}
+              isChecked={category.id === selectedCategory}
+              handleSelectCategory={handleSelectCategory}
+            />
+          ))}
+        </S.CategoryList>
       </Modal.Body>
     </Modal>
   );

diff --git a/frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceCard.tsx b/frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceCard.tsx
@@ -37,7 +37,6 @@ const ReferenceCard = ({ accessCode }: ReferenceCardProps) => {
       </S.Layout>
 
       <CategoryManagementModal
-        accessCode={accessCode}
         isOpen={isModalOpen}
         closeModal={closeModal}
         categories={categories}