From 923047fb8279d41f24860b5ce8534e2de531d131 Mon Sep 17 00:00:00 2001
From: Nahyun <tarea202001@gmail.com>
Date: Sun, 15 Dec 2024 23:45:53 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=EC=9A=94=EC=B2=AD=EC=A3=BC=EC=A0=9C?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=88=98=EC=A0=95=20API=20=EC=97=B0?=
 =?UTF-8?q?=EB=8F=99=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../topics/_components/AdminTopicBox.tsx      | 25 ++++++----
 .../admin/topics/_components/BottomSheet.tsx  | 47 ++++++++-----------
 src/lib/types/requestedTopicType.ts           |  2 +
 3 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/src/app/admin/topics/_components/AdminTopicBox.tsx b/src/app/admin/topics/_components/AdminTopicBox.tsx
index b0b90a8b..4f69a08a 100644
--- a/src/app/admin/topics/_components/AdminTopicBox.tsx
+++ b/src/app/admin/topics/_components/AdminTopicBox.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { useState } from 'react';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import BottomSheet from './BottomSheet';
 
@@ -18,16 +18,22 @@ interface TopicBoxProps {
 }
 
 function TopicBox({ topic }: TopicBoxProps) {
+  const queryClient = useQueryClient();
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
 
   const editTopicMutation = useMutation({
-    // mutationFn: () =>
-    //   editAdminTopic({
-    //     // topicId: topic?.id,
-    //     isExposed: !topic.isExposed,
-    //     title: topic?.title,
-    //     categoryCode: topic?.categoryKorName,
-    //   }),
+    mutationFn: () =>
+      editAdminTopic({
+        topicId: topic?.id,
+        isExposed: !topic.isExposed,
+        title: topic?.title,
+        categoryCode: topic?.categoryCode,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.getAdminTopics],
+      });
+    },
   });
 
   const handleClickEditButton = () => {
@@ -71,8 +77,7 @@ function TopicBox({ topic }: TopicBoxProps) {
           topicTitle={topic?.title}
           category={topic?.categoryKorName}
           isExposed={topic?.isExposed}
-          // {topicI수정필요}
-          topicId={0}
+          topicId={topic?.id}
         />
       )}
     </>
diff --git a/src/app/admin/topics/_components/BottomSheet.tsx b/src/app/admin/topics/_components/BottomSheet.tsx
index 4e28306f..8a2e25cd 100644
--- a/src/app/admin/topics/_components/BottomSheet.tsx
+++ b/src/app/admin/topics/_components/BottomSheet.tsx
@@ -2,8 +2,7 @@
 
 import * as styles from './BottomSheet.css';
 import { MouseEventHandler, useState } from 'react';
-import { useMutation, useQuery } from '@tanstack/react-query';
-import { useUser } from '@/store/useUser';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import useOnClickOutside from '@/hooks/useOnClickOutside';
 import getCategories from '@/app/_api/category/getCategories';
@@ -11,11 +10,9 @@ import editAdminTopic from '@/app/_api/adminTopics/editAdminTopic';
 
 import { CategoryType } from '@/lib/types/categoriesType';
 import ArrowDown from '/public/icons/down_chevron.svg';
-import useBooleanOutput from '@/hooks/useBooleanOutput';
-import Modal from '@/components/Modal/Modal';
 
 interface BottomSheetProps {
-  onClose: MouseEventHandler<HTMLDivElement>;
+  onClose: () => void;
   topicTitle: string;
   category: string;
   isExposed: boolean;
@@ -24,7 +21,7 @@ interface BottomSheetProps {
 // TODO: 컴포넌트 공통화 작업
 function BottomSheet({ onClose, topicTitle, category, isExposed, topicId }: BottomSheetProps) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const { isOn: isModalOn, handleSetOn: openModal, handleSetOff: closeModal } = useBooleanOutput(false);
+  const queryClient = useQueryClient();
 
   const [title, setTitle] = useState(topicTitle);
   const [selectedCategory, setSelectedCategory] = useState<string>(category);
@@ -36,18 +33,26 @@ function BottomSheet({ onClose, topicTitle, category, isExposed, topicId }: Bott
     queryFn: getCategories,
   });
 
+  const convertCategoryKorNameToCode = (korName: string) => {
+    const category = categories?.find((cat) => cat.korName === korName);
+    return category ? category.code : null; // 찾지 못하면 null 반환
+  };
+
   const editTopicMutation = useMutation({
-    // mutationFn: () =>
-    //   editAdminTopic({
-    //     topicId
-    //     isExposed,
-    //     title,
-    //     categoryCode,
-    //   }),
+    mutationFn: () =>
+      editAdminTopic({
+        topicId,
+        isExposed,
+        title,
+        categoryCode: convertCategoryKorNameToCode(selectedCategory as string) || '',
+      }),
     onSuccess: () => {
       setTitle('');
       setSelectedCategory(selectedCategory);
-      openModal();
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.getAdminTopics],
+      });
+      onClose();
     },
     onError: (error) => {
       setErrorMessage('요청 중 오류가 발생했습니다. 다시 시도해 주세요. :(');
@@ -137,20 +142,6 @@ function BottomSheet({ onClose, topicTitle, category, isExposed, topicId }: Bott
           </button>
         </form>
       </div>
-      {isModalOn && (
-        <Modal handleModalClose={closeModal} size="large">
-          <div className={styles.modalText}>{`요청 주제 수정이 완료되었어요.`} </div>
-          <button
-            className={styles.modalButton}
-            onClick={() => {
-              closeModal();
-              setIsDropdownOpen(false); //실행안됨
-            }}
-          >
-            닫기
-          </button>
-        </Modal>
-      )}
     </div>
   );
 }
diff --git a/src/lib/types/requestedTopicType.ts b/src/lib/types/requestedTopicType.ts
index 3d8f1264..006f5aa0 100644
--- a/src/lib/types/requestedTopicType.ts
+++ b/src/lib/types/requestedTopicType.ts
@@ -3,6 +3,7 @@
 */
 
 export interface RequestedTopicType {
+  categoryCode: string;
   categoryEngName: string;
   categoryKorName: string;
   title: string;
@@ -12,6 +13,7 @@ export interface RequestedTopicType {
   ownerNickname: string;
   isAnonymous: boolean;
   isExposed: boolean;
+  id: number;
 }
 
 export interface RequestedTopicsListType {