feature-063: prop 내려주는 구조 변경

teamViNO · Feb 13, 2024 · eee1266 · eee1266
1 parent ffb9085
commit eee1266
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/...ents/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/CategoryDropdown.tsx b/...ents/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/CategoryDropdown.tsx
@@ -7,15 +7,13 @@ import React from 'react';
 import { ISelectedCategoryProps } from 'types/category';
 
 interface ICategoryDropdownProp {
-  setSelectedCategory: React.Dispatch<
-    React.SetStateAction<ISelectedCategoryProps>
-  >;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleSelectCategory: ({ name, categoryId }: ISelectedCategoryProps) => void;
 }
 
 const CategoryDropdown = ({
-  setSelectedCategory,
   setIsOpen,
+  handleSelectCategory,
 }: ICategoryDropdownProp) => {
   const categories = useRecoilValue(categoryState);
   return (
@@ -25,8 +23,8 @@ const CategoryDropdown = ({
           <DropdownItem
             key={category.categoryId}
             category={category}
-            setSelectedCategory={setSelectedCategory}
             setIsOpen={setIsOpen}
+            handleSelectCategory={handleSelectCategory}
           />
         ))}
       </ul>

diff --git a/...mponents/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/DropdownItem.tsx b/...mponents/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/DropdownItem.tsx
@@ -6,10 +6,8 @@ import { DropdownTopCategoryName } from '@/styles/SummaryPage';
 
 interface ICategoryDropdownProp {
   category: IFolderProps;
-  setSelectedCategory: React.Dispatch<
-    React.SetStateAction<ISelectedCategoryProps>
-  >;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleSelectCategory: ({ name, categoryId }: ISelectedCategoryProps) => void;
 }
 
 interface IItemClickProps {
@@ -19,8 +17,8 @@ interface IItemClickProps {
 
 const DropdownItem = ({
   category,
-  setSelectedCategory,
   setIsOpen,
+  handleSelectCategory,
 }: ICategoryDropdownProp) => {
   const [isShow, setIsShow] = useState(false);
 
@@ -34,12 +32,7 @@ const DropdownItem = ({
   };
 
   const handleItemClick = async ({ name, categoryId }: IItemClickProps) => {
-    setSelectedCategory({
-      name,
-      categoryId,
-    });
-    // API 요청
-    console.log('API 요청');
+    handleSelectCategory({ name, categoryId });
     setIsOpen(false);
   };
 

diff --git a/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategorySelectBox.tsx b/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategorySelectBox.tsx
@@ -8,11 +8,17 @@ import useOutsideClick from '@/hooks/useOutsideClick';
 import { CategoryDropdown } from './CategoryDropdown';
 import { ISelectedCategoryProps } from 'types/category';
 
-const CategorySelectBox = () => {
+interface ICategorySelectBoxProps {
+  selectedCategory: ISelectedCategoryProps;
+  handleSelectCategory: ({ name, categoryId }: ISelectedCategoryProps) => void;
+}
+
+const CategorySelectBox = ({
+  selectedCategory,
+  handleSelectCategory,
+}: ICategorySelectBoxProps) => {
   const [isLogin] = useState(true);
   const [isOpen, setIsOpen] = useState(false);
-  const [selectedCategory, setSelectedCategory] =
-    useState<ISelectedCategoryProps>({ name: '', categoryId: 0 });
 
   // 다른 영역 클릭 시 dropdown 안보여지게 하기
   const [ref] = useOutsideClick<HTMLDivElement>(() => {
@@ -41,8 +47,8 @@ const CategorySelectBox = () => {
 
         {isOpen && (
           <CategoryDropdown
-            setSelectedCategory={setSelectedCategory}
             setIsOpen={setIsOpen}
+            handleSelectCategory={handleSelectCategory}
           />
         )}
       </div>

diff --git a/src/components/SummaryPage/SummaryDetailBox/SummaryDetailBox.tsx b/src/components/SummaryPage/SummaryDetailBox/SummaryDetailBox.tsx
@@ -6,10 +6,26 @@ import { DetailBox } from '@/styles/SummaryPage';
 
 import { CategorySelectBox } from './CategorySelectBox';
 import { NoteBox } from './NoteBox';
+import { useState } from 'react';
+import { ISelectedCategoryProps } from 'types/category';
 
 const SummaryDetailBox = () => {
   const summaryVideo = useRecoilValue(summaryVideoState);
 
+  const [selectedCategory, setSelectedCategory] =
+    useState<ISelectedCategoryProps>({ name: '', categoryId: 0 });
+
+  const handleSelectCategory = ({
+    name,
+    categoryId,
+  }: ISelectedCategoryProps) => {
+    setSelectedCategory({
+      name,
+      categoryId,
+    });
+    console.log('name, categoryId를 이용한 API 요청');
+  };
+
   return (
     <div
       style={{
@@ -41,7 +57,10 @@ const SummaryDetailBox = () => {
           }}
         />
 
-        <CategorySelectBox />
+        <CategorySelectBox
+          selectedCategory={selectedCategory}
+          handleSelectCategory={handleSelectCategory}
+        />
 
         <span className="title">{summaryVideo?.description}</span>