[Fix/#208] 지도뷰 수정 (#215)

* fix: 지도 레벨 수정, 찜 잘 하도록 수정 * feat: 로그인 시 accessToken 사용하도록, 찜 버튼 401 에러처리 * fix: 사소한 수정 * feat: selectedModal에서 IconButton 상태가 바로 반영되도록 useEffect 처리 * fix: 사소한 수정 --------- Co-authored-by: Parkchaeyeon <[email protected]>
SOPT-all · Jan 24, 2025 · 010cd0f · 010cd0f
1 parent 9e5315d
commit 010cd0f
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 18 deletions.
diff --git a/src/apis/auth/usePostKakaoLogin.ts b/src/apis/auth/usePostKakaoLogin.ts
@@ -36,10 +36,9 @@ export const usePostKakaoLogin = () => {
     onSuccess: (response) => {
       const resData = response.data.data;
       if (resData) {
-        const { userId, userName, accessToken } = resData;
-        const user = { userId, userName };
-        localStorage.setItem('user', JSON.stringify(user));
+        const { userName, accessToken } = resData;
         localStorage.setItem('accessToken', accessToken);
+        localStorage.setItem('userName', userName);
 
         queryClient.invalidateQueries({ queryKey: [queryKey.KAKAO_LOGIN] });
         goHomePage();

diff --git a/src/apis/myPage/useFetchUser.ts b/src/apis/myPage/useFetchUser.ts
@@ -14,7 +14,11 @@ const fetchUser = async (): Promise<UserResponse> => {
     return response.data.data;
   } catch (error) {
     const errorResponse = error as ErrorResponse;
-    if (errorResponse.response.status === 401) {
+    if (
+      errorResponse.response.status === 401 ||
+      errorResponse.response.status === 404
+    ) {
+      console.log(error);
       return {
         userName: '',
         userEmail: '',

diff --git a/src/apis/view/useFetchLikesStoreCoordinate.ts b/src/apis/view/useFetchLikesStoreCoordinate.ts
@@ -6,23 +6,31 @@ import { END_POINT, queryKey } from '@constants';
 
 import {
   ApiResponseType,
+  ErrorResponse,
   StoreCoordinate,
   StoreCoordinateListResponse,
 } from '@types';
 
 const fetchLikesStoreCoordinate = async (): Promise<StoreCoordinate[]> => {
-  const response = await instance.get<
-    ApiResponseType<StoreCoordinateListResponse>
-  >(END_POINT.FETCH_LIKES_STORE_COORDINATE_LIST);
-  if (!response.data) return [];
-  return response.data.data.stores;
+  try {
+    const response = await instance.get<
+      ApiResponseType<StoreCoordinateListResponse>
+    >(END_POINT.FETCH_LIKES_STORE_COORDINATE_LIST);
+    if (!response.data) return [];
+    return response.data.data.stores;
+  } catch (error) {
+    const errorResponse = error as ErrorResponse;
+    if (errorResponse.response.status === 401) {
+      return [];
+    }
+    throw error;
+  }
 };
 
-export const useFetchLikesStoreCoordinate = (isSaveActive: boolean) => {
+export const useFetchLikesStoreCoordinate = () => {
   return useQuery({
     queryKey: [queryKey.LIKES_STORE_COORDINATE_LIST],
     queryFn: fetchLikesStoreCoordinate,
-    enabled: isSaveActive,
     staleTime: 0,
     gcTime: 0,
   });

diff --git a/src/components/common/IconButton/IconButton.tsx b/src/components/common/IconButton/IconButton.tsx
@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes, useState } from 'react';
+import React, { ButtonHTMLAttributes, useEffect, useState } from 'react';
 
 import {
   useDeleteCakeLikes,
@@ -64,6 +64,10 @@ const IconButton = ({
   const [localActive, setLocalActive] = useState(isActive);
   const [localCount, setLocalCount] = useState<number | undefined>(count);
 
+  useEffect(() => {
+    setLocalActive(isActive);
+  }, [isActive]);
+
   const { mutate: postStoreLikes } = usePostStoreLikes();
   const { mutate: postCakeLikes } = usePostCakeLikes();
   const { mutate: deleteStoreLikes } = useDeleteStoreLikes();

diff --git a/src/components/common/Image/Image.css.ts b/src/components/common/Image/Image.css.ts
@@ -28,6 +28,7 @@ export const imageStyle = recipe({
   base: {
     width: '100%',
     height: '100%',
+    objectFit: 'cover',
   },
   variants: {
     variant: {

diff --git a/src/pages/home/page/HomePage/HomePage.tsx b/src/pages/home/page/HomePage/HomePage.tsx
@@ -37,9 +37,7 @@ const HomePage = () => {
   const { goViewPage, goDesignListPage } = useEasyNavigate();
   const { data: storeRankData } = useFetchStoreRank();
   const { data: cakeRankData } = useFetchCakeRank();
-  const user = isLogin
-    ? JSON.parse(localStorage.getItem('user') || '{}')
-    : null;
+  const user = isLogin ? localStorage.getItem('userName') : null;
 
   const handleAllButtonClick = () => {
     goDesignListPage('BIRTH');
@@ -56,7 +54,7 @@ const HomePage = () => {
         <img src={MainKeyVisual} />
         <div className={mainContentContainer}>
           <h1 className={mainTextStyle}>
-            {isLogin ? `${user.userName} 님,` : '안녕하세요!'}
+            {isLogin ? `${user} 님,` : '안녕하세요!'}
           </h1>
 
           <div className={mainContentWrapper}>

diff --git a/src/pages/view/components/KakaoMap/KakaoMap.tsx b/src/pages/view/components/KakaoMap/KakaoMap.tsx
@@ -37,6 +37,7 @@ const KakaoMap = ({ currentLocation }: KakaoMapProps) => {
     center,
     isSaveActive,
     isGpsActive,
+    mapLevel,
     setCenter,
     handleCenterChanged,
     handleGpsButtonClick,
@@ -62,7 +63,7 @@ const KakaoMap = ({ currentLocation }: KakaoMapProps) => {
       <div className={mapContainer}>
         <Map
           center={center}
-          level={2}
+          level={mapLevel}
           className={mapStyle({ animateState })}
           onCenterChanged={handleCenterChanged}
           onClick={handleMapClick}

diff --git a/src/pages/view/hooks/useKakaoMap.tsx b/src/pages/view/hooks/useKakaoMap.tsx
@@ -46,8 +46,11 @@ export const useKakaoMap = (
   // gps 버튼 활성화 상태
   const [isGpsActive, setIsGpsActive] = useState(false);
 
+  // Map level 관리하기
+  const [mapLevel, setMapLevel] = useState(2);
+
   const { data: likesStoreCoordinateList } =
-    useFetchLikesStoreCoordinate(isSaveActive);
+    useFetchLikesStoreCoordinate();
 
   const location = useLocation();
   const locationState = location?.state?.location || null;
@@ -131,6 +134,7 @@ export const useKakaoMap = (
       setIsGpsActive(false);
       if (currentLocation.stationEnName === 'ALL') {
         fetchCurrentPosition();
+        setMapLevel(9)
       } else {
         setCenter({
           lat: currentLocation.latitude,
@@ -142,6 +146,7 @@ export const useKakaoMap = (
             clicked: false,
           }))
         );
+        setMapLevel(2)
       }
     } else {
       handleAnimateChange('default');
@@ -196,6 +201,7 @@ export const useKakaoMap = (
     center,
     isSaveActive,
     isGpsActive,
+    mapLevel,
     setCenter,
     handleCenterChanged,
     handleGpsButtonClick,