Fix: 요청주제관리 수정 API 연동 로직 수정

8-Sprinters · Dec 15, 2024 · 923047f · 923047f
1 parent a28d20c
commit 923047f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 38 deletions.
diff --git 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
@@ -2,20 +2,17 @@
 
 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';
 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
@@ -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 {