feat : 메인페이지 bottom sheet 키워드 api 연동 (#281)

* feat : 키워드 관련 api 연동

* chore : 사용자 키워드 등록 성공 시 콘솔 찍히던거 삭제

src/components/HomePage/BottomSheet/BottomSheetContent.tsx

@@ -1,6 +1,9 @@
 import { useSelectedKeywordStore } from '@/stores/index';
 import { Margin } from '@/components/Common/Margin/Margin';
 import { KeywordContainer } from './KeywordContainer';
+import { useGetAllKeywords } from '@/hooks/useGetAllKeywords';
+import { useGetUserKeywords } from '@/hooks/useGetUserKeywords';
+import { useEffect } from 'react';
 
 type BottomSheetContentProps = {
     nickname: string | undefined;
@@ -11,59 +14,39 @@ export const BottomSheetContent = ({
     nickname,
     onClick
 }: BottomSheetContentProps) => {
-    const { selectedKeywords } = useSelectedKeywordStore();
+    const { selectedKeywords, setSelectedKeywords } = useSelectedKeywordStore();
 
     if (nickname === undefined) nickname = '';
 
-    const categories = [
-        {
-            category: '나를 나타내는',
-            keywords: [
-                '일에 치인',
-                '쉬고싶은',
-                '배고픈',
-                '꿈꾸는',
-                '행복한',
-                '그리워하는',
-                '수다스러운',
-                '현실적인',
-                '행운의',
-                '반짝반짝한',
-                '술을 좋아하는',
-                '음악 없이 못사는',
-                '위로받고 싶은'
-            ]
-        },
-        {
-            category: '시간과 공간',
-            keywords: [
-                '입김이 나오는 날',
-                '파란 하늘을 보며',
-                '벚꽃 흩날림',
-                '크리스마스',
-                '첫눈',
-                '별빛 아래',
-                '비 오는 날',
-                '밤 산책 하며',
-                '도로 위 막히는 차 안에서'
-            ]
-        },
-        {
-            category: '일상',
-            keywords: ['추억', '여행', '이별', '운동', '꿈']
-        },
-        {
-            category: '누구에게',
-            keywords: [
-                '친구에게',
-                '연인에게',
-                '나에게',
-                '소중한 사람에게',
-                '가족에게',
-                '최애에게'
-            ]
+    const {
+        data: allKeywordsData,
+        isLoading: isAllKeywordsLoading,
+        isError: isAllKeywordsError
+    } = useGetAllKeywords();
+
+    const {
+        data: userKeywordsData,
+        isLoading: isUserKeywordsLoading,
+        isError: isUserKeywordsError
+    } = useGetUserKeywords();
+
+    // 사용자 키워드 데이터를 스토어에 초기화
+    useEffect(() => {
+        if (userKeywordsData?.result.keywords) {
+            setSelectedKeywords(userKeywordsData.result.keywords);
         }
-    ];
+    }, [userKeywordsData, setSelectedKeywords]);
+
+    if (isAllKeywordsLoading || isUserKeywordsLoading) {
+        return <p>로딩 중...</p>;
+    }
+
+    if (isAllKeywordsError || isUserKeywordsError) {
+        return <p>데이터를 불러오는 중 오류가 발생했습니다.</p>;
+    }
+
+    // 모든 키워드
+    const categories = allKeywordsData?.result.categories || [];
 
     return (
         <div className="flex flex-col gap-5 p-5">

src/components/HomePage/BottomSheet/KeywordContainer.tsx

@@ -1,24 +1,29 @@
 import { KeywordToggleButton } from '@/components/Common/KeywordToggleButton/KeywordToggleButton';
+import { useCreateUserKeywords } from '@/hooks/useCreateUserKeywords';
 import { useSelectedKeywordStore } from '@/stores/index';
+// import { useEffect } from 'react';
 
 type KeywordContainerProps = {
     keywords: Array<string>;
 };
 
 export const KeywordContainer = ({ keywords }: KeywordContainerProps) => {
     const { selectedKeywords, setSelectedKeywords } = useSelectedKeywordStore();
+    const { mutate: createUserKeywords } = useCreateUserKeywords();
 
     const toggleKeywordButton = (keyword: string) => {
         if (selectedKeywords.includes(keyword)) {
-            const keywords = [...selectedKeywords].filter(
+            const updatedKeywords = [...selectedKeywords].filter(
                 (item) => item !== keyword
             );
 
-            setSelectedKeywords(keywords);
+            setSelectedKeywords(updatedKeywords);
+            createUserKeywords(updatedKeywords);
         } else {
-            const keywords = [...selectedKeywords, keyword];
+            const updatedKeywords = [...selectedKeywords, keyword];
 
-            setSelectedKeywords(keywords);
+            setSelectedKeywords(updatedKeywords);
+            createUserKeywords(updatedKeywords);
         }
     };
 

src/hooks/useCreateUserKeywords.ts

@@ -0,0 +1,14 @@
+import { useMutation } from '@tanstack/react-query';
+import { createUserKeyword } from '@/service/keyword/createUserKeyword';
+
+export const useCreateUserKeywords = () => {
+    const mutation = useMutation({
+        mutationFn: createUserKeyword,
+        onSuccess: () => {},
+        onError: (error) => {
+            console.error('키워드 생성 실패:', error);
+        }
+    });
+
+    return mutation;
+};

src/hooks/useGetAllKeywords.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { getAllKeyword } from '@/service/keyword/getAllKeyword';
+
+export const useGetAllKeywords = () => {
+    return useQuery({
+        queryKey: ['allKeywords'],
+        queryFn: getAllKeyword
+    });
+};

src/hooks/useGetUserKeywords.ts

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+import { getUserKeyword } from '@/service/keyword/getUserKeyword';
+
+export const useGetUserKeywords = () => {
+    return useQuery({
+        queryKey: ['userKeywords'],
+        queryFn: getUserKeyword
+    });
+};

src/service/keyword/createUserKeyword.ts

@@ -0,0 +1,17 @@
+import { defaultApi } from '@/service/api';
+
+type CraeteUserKeywordType = {
+    isSuccess: boolean;
+    code: string;
+    message: string;
+    result: string;
+};
+
+export const createUserKeyword = async (
+    keywords: string[]
+): Promise<CraeteUserKeywordType> => {
+    const api = defaultApi();
+
+    const response = await api.post('/keywords', { keywords });
+    return response.data;
+};

src/service/keyword/getAllKeyword.ts

@@ -0,0 +1,20 @@
+import { defaultApi } from '@/service/api';
+
+type GetAllKeywordType = {
+    isSuccess: boolean;
+    code: string;
+    message: string;
+    result: {
+        categories: {
+            category: string;
+            keywords: string[];
+        }[];
+    };
+};
+
+export const getAllKeyword = async (): Promise<GetAllKeywordType> => {
+    const api = defaultApi();
+
+    const response = await api.get('/keywords/list');
+    return response.data;
+};

src/service/keyword/getUserKeyword.ts

@@ -0,0 +1,17 @@
+import { defaultApi } from '@/service/api';
+
+type GetUserKeywordType = {
+    isSuccess: boolean;
+    code: string;
+    message: string;
+    result: {
+        keywords: string[];
+    };
+};
+
+export const getUserKeyword = async (): Promise<GetUserKeywordType> => {
+    const api = defaultApi();
+
+    const response = await api.get('/keywords');
+    return response.data;
+};