Merge branch 'dev' into feat/Map-Yorkie

package.json

@@ -30,7 +30,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "start:windows": "set HTTPS=true&&set SSL_CRT_FILE=./localhost.pem&&set SSL_KEY_FILE=./localhost-key.pem&&npm run start",
+    "start:windows": "set HTTPS=true&&set SSL_CRT_FILE=./cert/localhost.pem&&set SSL_KEY_FILE=./cert/localhost-key.pem&&npm run start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/apis/auth/useLogOutMutation.ts

@@ -0,0 +1,34 @@
+import { useMutation } from 'react-query';
+import instance from '../instance';
+import { BaseResponse } from '../../types/BaseResponse';
+import { LoginSuccess } from '../../types/auth/login';
+import { ResponseCode } from '../../types/enum/ResponseCode';
+import useRegisterStore from '../../stores/registerStore';
+import { useNavigate } from 'react-router-dom';
+
+export const useLogOutMutation = (prevUrl: string) => {
+  const { resetStatus } = useRegisterStore();
+  const navigate = useNavigate();
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      return await instance.post<BaseResponse<LoginSuccess>>(`/logout`);
+    },
+    onSuccess: (response) => {
+      const respone = response.data;
+
+      if (respone.code === ResponseCode.SUCCESS) {
+        resetStatus();
+      }
+      navigate(prevUrl);
+    },
+    onError: () => {
+      console.log('로그아웃 실패');
+      navigate(prevUrl);
+    },
+  });
+
+  return mutation;
+};
+
+export default useLogOutMutation;

src/apis/auth/useSignUpMutation.ts

@@ -7,7 +7,7 @@ import useRegisterStore from '../../stores/registerStore';
 import { useNavigate } from 'react-router-dom';
 
 export const useSignUpMutation = (prevUrl: string) => {
-  const { setLogIn } = useRegisterStore();
+  const { setLogIn, setIsIdDuplicate } = useRegisterStore();
   const navigate = useNavigate();
 
   const mutation = useMutation({
@@ -21,27 +21,35 @@ export const useSignUpMutation = (prevUrl: string) => {
       );
     },
     onSuccess: (response) => {
-      const respone = response.data;
+      const responseData = response.data;
 
-      if (respone.code === ResponseCode.LOGGED_IN) {
+      if (responseData.code === ResponseCode.SUCCESS) {
         console.log('새로운 사용자, 회원가입 성공!');
 
-        const profileId = respone.result.profileId;
-        const imgUrl = respone.result.imgUrl;
-        const accessToken = respone.result.accessToken;
+        const profileId = responseData.result.profileId;
+        const imgUrl = responseData.result.imgUrl;
+        const accessToken = responseData.result.accessToken;
         setLogIn(profileId, imgUrl, accessToken);
 
         instance.defaults.headers.common['Authorization'] =
           `Bearer ${accessToken}`; //로그인 된 유저에 대하여 모든 api 호출에 accesstoken 포함시키는 코드
+
+        if (prevUrl === '/') navigate('/timeline');
+        else navigate(prevUrl);
+        return;
+      }
+      if (responseData.code === ResponseCode.ALREADY_EXIST_PROFILE_ID) {
+        //중복된 profileId인 경우
+        console.log('사용 중인 아이디');
+        setIsIdDuplicate(true);
+        navigate(`${prevUrl + '?authState=signup'}`);
+        return;
       } else {
         //회원가입 오류
         console.log('회원가입 실패');
         navigate(`${prevUrl === '/' ? prevUrl : prevUrl + '?authState=login'}`);
         return;
       }
-
-      if (prevUrl === '/') navigate('/timeline');
-      else navigate(prevUrl);
     },
     onError: () => {
       console.log('회원가입 실패');

src/apis/follow/getFollowing.tsx

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

src/apis/follow/unFollow.tsx

@@ -0,0 +1,23 @@
+import instance from "../instance";
+import { FollowType } from "../../types/follow/FollowType";
+
+export const unFollow = async (follow: FollowType): Promise<FollowType> => {
+  const { followingId } = follow;
+
+  console.log(follow);
+
+  try {
+    const result = await instance.delete(`/unfollow`, {
+      params: { followingId }
+    });
+
+    console.log(result);
+
+    // Axios의 응답 객체에서 실제 데이터를 추출하여 반환
+    return result.data as FollowType;
+
+  } catch (error) {
+    console.error("Unfollow request failed", error);
+    throw error; // 에러가 발생한 경우 상위로 전달
+  }
+};

src/apis/follow/useDeleteUnFollow.tsx

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from "react-query";
+import { unFollow } from "./unFollow";
+import { FollowType } from "../../types/follow/FollowType";
+
+export const useDeleteUnFollow = () => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation({
+    mutationFn: async (follow: FollowType) => {
+      console.log(follow)
+      return await unFollow(follow)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey : ['unfollowData']});
+    },
+    onError: (error :Error) => {
+      console.log('Unfollow request failed', error);
+    },
+  });
+
+  return mutation;
+}

src/apis/follow/useGetFollowing.tsx

@@ -4,7 +4,9 @@ import { FollowingType } from "../../types/follow/FollowingType";
 export const  fetchFollowing = async (token:string| undefined): Promise<FollowingType | undefined> => {
   try {
     if(token) {
-      return await getFollowing();
+      const result = await getFollowing();
+      console.log(result)
+      return result;
     } else {
       return undefined;
     }

src/apis/follow/usePostFollow.tsx

@@ -1,4 +1,3 @@
-// src/apis/follow/usePostFollow.ts
 import { useMutation, useQueryClient } from 'react-query';
 import instance from '../instance';
 import { FollowType } from '../../types/follow/FollowType';

src/apis/instance.ts

@@ -18,7 +18,6 @@ instance.interceptors.request.use(
     ) {
       config.headers['Authorization'] = `Bearer ${state.accessToken}`;
     }
-    console.log('axios config : ', config);
     return config;
   },
   (error) => {
@@ -30,7 +29,6 @@ instance.interceptors.request.use(
 // 응답 인터셉터
 instance.interceptors.response.use(
   (response) => {
-    console.log('response: ', response);
     return response;
   },
   // (error) => {

src/apis/keywords/keywordMap.tsx

@@ -1,13 +1,42 @@
 import instance from "../instance";
 import { APIKeywordMapType } from "../../types/keywords/APIKeywordMapType";
 import { BaseResponse } from "../../types/BaseResponse";
+import { KeywordType } from "../../types/keywords/KeywordType";
+import { MapsType } from "../../types/keywords/MapsType";
 
 export const keywordMap = async (keyword:string) => {
   try {
     const response = await instance.get<BaseResponse<APIKeywordMapType[] | undefined>>(`home/map/keyword`, {
       params: { keyword }
     })
-    return response.data.result;
+
+    const results = response.data.result?.map((item) => {
+      const newKeyword:KeywordType = {
+        id: Math.random(),
+        title: keyword,
+        selected:false,
+      }
+
+      const newMaps: MapsType[] = item.maps.map((map) => {
+        const keywords: KeywordType[] = map.mapKeywords.map((title, index) => ({
+          id: index,
+          title: title,
+          selected: false,
+        }));
+
+        return {
+          ...map,
+          mapKeywords: keywords,
+        };
+      });
+
+      return {
+        keyword: newKeyword,
+        maps: newMaps,
+      };
+    });
+
+    return results;
   }catch(error) {
     console.error('Error fetching data:', error);
     return undefined;

src/apis/mapData/exploreMap.tsx

@@ -1,5 +1,4 @@
 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 ";
@@ -20,7 +19,6 @@ export const exploreMap = async (searchType:string, size: number, page:number) =
         title: title,
         selected: false,
       }));
-      console.log('newKeyword:', newKeyword);
 
       return {
         ...item,

src/apis/mapData/followingMap.tsx

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

src/apis/mapData/getExploreMap.tsx

@@ -3,7 +3,6 @@ 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);

src/apis/mapData/getSearchMap.tsx

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

src/apis/mapData/searchMap.tsx

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

src/components/explore/ErrorPage.module.scss

@@ -1,15 +1,17 @@
 .errorPageRoot {
-  width: 1382px;
-  height: 855px;
+  width: 100%;
+  height: calc(100vh - 181px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  text-align: center; /* 텍스트를 중앙 정렬 */
+}
 
+.text {
   color: #767d86;
   font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: 150%;
-  text-align: center;
 }

src/components/explore/ErrorPage.tsx

@@ -9,8 +9,12 @@ interface ErrorPageProps {
 const ErrorPage: React.FC<ErrorPageProps> = ({ text }) => {
   return (
     <div className={styles.errorPageRoot}>
-      {text && <span>'{text}'지도를 찾을 수 없어요.</span>}
-      <span>다른 검색어를 시도해 주세요.</span>
+      {text && (
+        <div className = {styles.text}>
+          <p>'{text}'지도를 찾을 수 없어요.</p>
+          <p>다른 검색어를 시도해 주세요.</p>
+        </div>
+      )}
     </div>
   );
 };