From eee1266050f9ce1ec283cab4774632c5fd99d976 Mon Sep 17 00:00:00 2001
From: gs0428 <lider28@naver.com>
Date: Tue, 13 Feb 2024 20:44:49 +0900
Subject: [PATCH] =?UTF-8?q?feature-063:=20prop=20=EB=82=B4=EB=A0=A4?=
 =?UTF-8?q?=EC=A3=BC=EB=8A=94=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CategoryDropdown/CategoryDropdown.tsx     |  8 +++----
 .../CategoryDropdown/DropdownItem.tsx         | 13 +++---------
 .../CategorySelectBox/CategorySelectBox.tsx   | 14 +++++++++----
 .../SummaryDetailBox/SummaryDetailBox.tsx     | 21 ++++++++++++++++++-
 4 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/CategoryDropdown.tsx b/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/CategoryDropdown.tsx
index 45e6070..f6cae9f 100644
--- a/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/CategoryDropdown.tsx
+++ b/src/components/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/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/DropdownItem.tsx b/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/DropdownItem.tsx
index 9bd120b..7fcfb91 100644
--- a/src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategoryDropdown/DropdownItem.tsx
+++ b/src/components/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
index 459575e..670d491 100644
--- 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
index be84652..b5dfd07 100644
--- 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>