Merge/feat : 124-keywordAPI

Merge/feat 탐색페이지 api 연동

package.json

@@ -16,6 +16,7 @@
     "browser-image-compression": "^2.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.13.0",
     "react-kakao-maps-sdk": "^1.1.27",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.24.0",

src/apis/editors/getEditorsData.ts → src/apis/editors/getEditorsData.tsx

@@ -1,12 +1,11 @@
-import instance from '../instance';
-import { EditorType } from '../../types/getEditors/EditorType';
-import { BaseResponse } from '../../types/BaseResponse';
+import instance from "../instance";
+import { EditorType } from "../../types/editors/EditorType";
+import { BaseResponse } from "../../types/BaseResponse";
 
 export const getEditorDataWithToken = async () => {
   try {
-    const response =
-      await instance.get<BaseResponse<EditorType[]>>('/home/editor');
-    console.log('Data without Token:', response.data);
+    const response = await instance.get<BaseResponse<EditorType[]>>('/home/editor');
+    console.log('Data with Token:', response.data);
     return response.data.result || [];
   } catch (error) {
     console.error('Error fetching data without token:', error);

src/apis/editors/fetchEditorsData.ts → src/apis/editors/useGetEditorsData.tsx

@@ -1,8 +1,5 @@
-import {
-  getEditorDataWithToken,
-  getEditorDataWithoutToken,
-} from './getEditorsData';
-import { EditorType } from '../../types/getEditors/EditorType';
+import { getEditorDataWithToken, getEditorDataWithoutToken } from "./getEditorsData";
+import { EditorType } from "../../types/editors/EditorType";
 
 export const fetchEditorData = async (
   token: string | undefined,

src/apis/follow/getFollowing.tsx

@@ -0,0 +1,14 @@
+import instance from "../instance";
+import { FollowingType } from "../../types/follow/FollowingType";
+import { BaseResponse } from "../../types/BaseResponse";
+
+export const getFollowing = async () => {
+  try{
+    const response = await instance.get<BaseResponse<FollowingType>>('following')
+    console.log('response', response)
+    return response.data.result || undefined
+  } catch (error) {
+    console.error('Error fetching data');
+    return undefined;
+  }
+}

src/apis/follow/postFollow.tsx

@@ -0,0 +1,6 @@
+import instance from "../instance";
+import { FollowType } from "../../types/follow/FollowType";
+
+export const postFollow = async (newFollow: FollowType): Promise<FollowType> => {
+  return await instance.post('/follow', newFollow);
+};

src/apis/follow/useGetFollowing.tsx

@@ -0,0 +1,15 @@
+import { getFollowing } from "./getFollowing";
+import { FollowingType } from "../../types/follow/FollowingType";
+
+export const  fetchFollowing = async (token:string| undefined): Promise<FollowingType | undefined> => {
+  try {
+    if(token) {
+      return await getFollowing();
+    } else {
+      return undefined;
+    }
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    throw new Error('정보를 불러올 수 없음.');
+  }
+}

src/apis/follow/usePostFollow.tsx

@@ -0,0 +1,23 @@
+// src/apis/follow/usePostFollow.ts
+import { useMutation, useQueryClient } from 'react-query';
+import instance from '../instance';
+import { FollowType } from '../../types/follow/FollowType';
+
+export const usePostFollow = () => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (followData: FollowType) => {
+      console.log('Sending request with data:', followData);
+      return await instance.post('/follow', followData);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['followData'] });
+    },
+    onError: (error: Error) => {
+      console.error('Follow request failed:', error);
+    },
+  });
+
+  return mutation;
+};

src/apis/keywords/fetchGetKeywords.tsx

@@ -0,0 +1,64 @@
+import { useQuery } from 'react-query';
+import { getKeyword } from './getKeywords';
+import { KeywordType } from '../../types/keywords/KeywordType';
+import { useAllKeywordStore } from '../../stores/keywordStore';
+import { useKeywordStore } from '../../stores/keywordStore';
+import { fetchFollowing } from '../follow/useGetFollowing';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const useGetKeywords = (token: string | undefined) => {
+  const location = useLocation();
+  const { setAllKeywordList, allKeywordList } = useAllKeywordStore();
+  const {selectedList, setSelectedList} = useKeywordStore()
+
+  const { data: followingData, isSuccess: isFollowingDataSuccess } = useQuery(
+    ['followingData', token],
+    () => fetchFollowing(token),
+    {
+      enabled: !!token,
+      refetchOnWindowFocus: false,
+    },
+  );
+  // 페이지 이동 시 재요청 방지를 위해 enabled를 false로 설정
+  const { data, isSuccess, refetch } = useQuery<KeywordType[]>(
+    'keywordsData',
+    getKeyword,
+    {
+      refetchOnWindowFocus: false,
+      enabled: false, // 자동으로 데이터 요청 안 함
+    },
+  );
+
+  useEffect(() => {
+    if (allKeywordList.length === 0) {
+      refetch();
+    }
+  }, [refetch, allKeywordList.length]);
+
+  useEffect(() => {
+    if (isSuccess && data && allKeywordList.length === 0) {
+      let Keywords = data;
+
+      if (!token && location.pathname === '/timeline') {
+        Keywords = data.map((keyword, index) => ({
+          ...keyword,
+          selected: index < 2 ? true : keyword.selected,
+        }));
+      } else if (token &&followingData && followingData.users === undefined) {
+          Keywords = data.map((keyword, index) => ({
+            ...keyword,
+            selected: index < 2 ? true : keyword.selected,
+          }));
+      }
+
+      setAllKeywordList(Keywords);
+
+      // Filter keywords with selected as true and set them to selectedList
+      const selectedKeywords = Keywords.filter(keyword => keyword.selected);
+      setSelectedList(selectedKeywords);
+    }
+  }, [isSuccess, data, setAllKeywordList, token, allKeywordList.length]);
+
+  return { allKeywordList, refetch };
+};

src/apis/keywords/getKeywordMap.tsx

@@ -0,0 +1,12 @@
+import { keywordMap } from "./keywordMap";
+
+export const getKeywordMap = async (keyword: string) => {
+  try {
+    const response = await keywordMap(keyword);
+    console.log(response)
+    return response;
+  } catch (error) {
+    console.error('Error fetching keyword map:', error);
+    return undefined;
+  }
+};

src/apis/keywords/getKeywords.tsx

@@ -0,0 +1,20 @@
+import instance from "../instance";
+import { BaseResponse } from "../../types/BaseResponse";
+
+export const getKeyword = async () => {
+  try {
+    const response = await instance.get<BaseResponse<string[]>>('home/keyword');
+    console.log('keywords:',response.data)
+    const keywords = response.data.result || [];
+
+    return keywords.map((title, index) => ({
+      id: Math.random(),
+      title: title,
+      selected: false,
+    }))
+
+  } catch (error) {
+    console.error('Error fetching data;',error);
+    return [];
+  }
+}

src/apis/keywords/keywordMap.tsx

@@ -0,0 +1,15 @@
+import instance from "../instance";
+import { APIKeywordMapType } from "../../types/keywords/APIKeywordMapType";
+import { BaseResponse } from "../../types/BaseResponse";
+
+export const keywordMap = async (keyword:string) => {
+  try {
+    const response = await instance.get<BaseResponse<APIKeywordMapType[] | undefined>>(`home/map/keyword`, {
+      params: { keyword }
+    })
+    return response.data.result;
+  }catch(error) {
+    console.error('Error fetching data:', error);
+    return undefined;
+  }
+}

src/apis/mapData/exploreMap.tsx

@@ -0,0 +1,36 @@
+import instance from "../instance";
+import { ExploreMapType } from "../../types/mapData/ExploreMapType";
+import { BaseResponse } from "../../types/BaseResponse";
+import { KeywordType } from "../../types/keywords/KeywordType";
+import { APIExploreMapType } from "../../types/mapData/APIExploreMapType ";
+
+export const exploreMap = async (searchType:string, size: number, page:number) => {
+  try {
+    const response = await instance.get<BaseResponse<APIExploreMapType[] | undefined>> (`/map/search`, {
+      params: {
+        searchType,
+        size,
+        page
+      }
+    })
+
+    const results = response.data.result?.map((item) => {
+      const newKeyword : KeywordType[]= item.keyword.map((title: string, index) => ({
+        id: index,
+        title: title,
+        selected: false,
+      }));
+      console.log('newKeyword:', newKeyword);
+
+      return {
+        ...item,
+        keyword: newKeyword,
+      };
+    });
+
+    return results;
+  } catch(error) {
+    console.error('Error fetchgin data:',error);
+    return undefined;
+  }
+}

src/apis/mapData/followingMap.tsx

@@ -0,0 +1,14 @@
+import instance from "../instance";
+import { FollowingMapType } from "../../types/mapData/FollowingMapType";
+import { BaseResponse } from "../../types/BaseResponse";
+
+export const followingMap = async () => {
+  try {
+    const response = await instance.get<BaseResponse<FollowingMapType[] | undefined>>('/home/map')
+    console.log('followingmap:', response)
+    return response.data.result;
+  } catch (error) {
+    console.error('Error fetching data:',error);
+    return undefined;
+  }
+}

src/apis/mapData/getExploreMap.tsx

@@ -0,0 +1,12 @@
+import { exploreMap } from "./exploreMap";
+
+export const getExploreMap = async(searchType:string, size: number, page:number) => {
+  try{
+    const response = await exploreMap(searchType,size,page);
+    console.log(response)
+    return response;
+  } catch (error) {
+    console.error('Error fetching random map:',error);
+    return undefined;
+  }
+}

src/apis/mapData/getFollowingMap.tsx

@@ -0,0 +1,17 @@
+import { followingMap } from "./followingMap";
+import { FollowingMapType } from "../../types/mapData/FollowingMapType";
+
+export const getFollowingMap = async (token: string | undefined): Promise<FollowingMapType[] | undefined> => {
+  try {
+    if (!token) {
+      return undefined;
+    }
+    // 여기서 followingMap 함수가 token을 사용하여 데이터를 가져온다고 가정
+    const response = await followingMap();
+    return response; // 성공적으로 데이터를 반환
+  } catch (error) {
+    console.error('Error fetching following map data:', error);
+    // 오류가 발생한 경우, undefined를 반환
+    return undefined;
+  }
+};

src/components/explore/MapList.module.scss

@@ -33,8 +33,13 @@
 }
 
 .editorImg {
+  display: flex;
   width: 60px;
   height: 60px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 90.795px;
+  border: 0.908px solid var(--gray_100);
 }
 
 .editorInfo {