From 393a005670f281613255cdbff339dd3939b23d65 Mon Sep 17 00:00:00 2001
From: thisishwarang <101498590+thisishwarang@users.noreply.github.com>
Date: Fri, 24 Jan 2025 05:44:19 +0900
Subject: [PATCH] =?UTF-8?q?[Fix/#203]=20=EC=9B=B9=ED=8C=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=82=B4=EB=B6=80=20QA=203=EC=B0=A8=20=EC=88=98=EC=A0=95=20(#2?=
 =?UTF-8?q?04)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: qa 반영

* fix: SelectedStoreModal 스타일 수정

* refactor: 로그인 안하고 찜버튼 클릭시 처리
---
 src/apis/auth/useDeleteLogout.ts              |  5 +++-
 src/apis/myPage/useFetchUser.ts               | 26 ++++++++++++-------
 .../view/components/KakaoMap/KakaoMap.tsx     | 17 +++++++++---
 .../SelectedStoreModal.css.ts                 |  1 +
 .../SelectedStoreModal/SelectedStoreModal.tsx |  2 +-
 src/pages/view/hooks/useKakaoMap.tsx          |  9 ++++++-
 6 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/apis/auth/useDeleteLogout.ts b/src/apis/auth/useDeleteLogout.ts
index 09ca759d..76b10020 100644
--- a/src/apis/auth/useDeleteLogout.ts
+++ b/src/apis/auth/useDeleteLogout.ts
@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { instance } from '@apis/instance';
 
@@ -17,10 +17,13 @@ const deleteLogout = async () => {
 };
 
 export const useDeleteLogout = () => {
+  const queryClient = useQueryClient();
   const { goHomePage } = useEasyNavigate();
+
   return useMutation({
     mutationFn: deleteLogout,
     onSuccess: () => {
+      queryClient.clear();
       removeUser();
       goHomePage();
     },
diff --git a/src/apis/myPage/useFetchUser.ts b/src/apis/myPage/useFetchUser.ts
index 94328ddc..d6a722b1 100644
--- a/src/apis/myPage/useFetchUser.ts
+++ b/src/apis/myPage/useFetchUser.ts
@@ -4,18 +4,24 @@ import { instance } from '@apis/instance';
 
 import { END_POINT, queryKey } from '@constants';
 
-import { ApiResponseType, UserResponse } from '@types';
+import { ApiResponseType, ErrorResponse, UserResponse } from '@types';
 
 const fetchUser = async (): Promise<UserResponse> => {
-  const response = await instance.get<ApiResponseType<UserResponse>>(
-    END_POINT.FETCH_USER
-  );
-  if (!response.data)
-    return {
-      userName: '',
-      userEmail: '',
-    };
-  return response.data.data;
+  try {
+    const response = await instance.get<ApiResponseType<UserResponse>>(
+      END_POINT.FETCH_USER
+    );
+    return response.data.data;
+  } catch (error) {
+    const errorResponse = error as ErrorResponse;
+    if (errorResponse.response.status === 401) {
+      return {
+        userName: '',
+        userEmail: '',
+      };
+    }
+    throw error;
+  }
 };
 
 export const useFetchUser = () => {
diff --git a/src/pages/view/components/KakaoMap/KakaoMap.tsx b/src/pages/view/components/KakaoMap/KakaoMap.tsx
index 6660fdb2..212f437a 100644
--- a/src/pages/view/components/KakaoMap/KakaoMap.tsx
+++ b/src/pages/view/components/KakaoMap/KakaoMap.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { Map, MapMarker } from 'react-kakao-maps-sdk';
 
-import { Modal } from '@components';
+import { AuthModal, Modal } from '@components';
 import { MyLocation } from '@constants';
-import { useBottomSheet } from '@hooks';
+import { useBottomSheet, useModal } from '@hooks';
 import { useMapLoader } from '@pages/view/hooks';
 import { useKakaoMap } from '@pages/view/hooks/useKakaoMap';
 import { getMarkerIcon } from '@utils';
@@ -29,6 +29,7 @@ interface KakaoMapProps {
 const KakaoMap = ({ currentLocation }: KakaoMapProps) => {
   useMapLoader();
   const { animateState, handleAnimateChange } = useBottomSheet();
+  const { isModalOpen, openModal, closeModal } = useModal();
   const {
     selectedStoreId,
     storeMarkerList,
@@ -42,7 +43,7 @@ const KakaoMap = ({ currentLocation }: KakaoMapProps) => {
     handleSaveButtonClick,
     handleMarkerClick,
     handleMapClick,
-  } = useKakaoMap(currentLocation, handleAnimateChange);
+  } = useKakaoMap(currentLocation, handleAnimateChange, openModal);
 
   useEffect(() => {
     if (selectedStoreId !== 0) {
@@ -116,6 +117,16 @@ const KakaoMap = ({ currentLocation }: KakaoMapProps) => {
           <SelectedStoreModal storeId={selectedStoreId} />
         </Modal>
       )}
+      {isModalOpen && (
+        <Modal variant="center" hasBackdrop backdropClick={closeModal}>
+          <AuthModal
+            modalText="로그인이 필요한 기능이에요!"
+            closeButtonText="닫기"
+            authActionButtonText="로그인 하러가기"
+            onClose={closeModal}
+          />
+        </Modal>
+      )}
     </>
   );
 };
diff --git a/src/pages/view/components/SelectedStoreModal/SelectedStoreModal.css.ts b/src/pages/view/components/SelectedStoreModal/SelectedStoreModal.css.ts
index 0d34f3df..37aa3018 100644
--- a/src/pages/view/components/SelectedStoreModal/SelectedStoreModal.css.ts
+++ b/src/pages/view/components/SelectedStoreModal/SelectedStoreModal.css.ts
@@ -54,6 +54,7 @@ export const addressWrapper = style([
 export const addressStyle = style([
   vars.fonts.body07_r_14,
   {
+    height: '3.4rem',
     color: vars.colors.gray600,
     display: '-webkit-box',
     overflow: 'hidden',
diff --git a/src/pages/view/components/SelectedStoreModal/SelectedStoreModal.tsx b/src/pages/view/components/SelectedStoreModal/SelectedStoreModal.tsx
index d233d9e2..5aa3ff81 100644
--- a/src/pages/view/components/SelectedStoreModal/SelectedStoreModal.tsx
+++ b/src/pages/view/components/SelectedStoreModal/SelectedStoreModal.tsx
@@ -37,7 +37,7 @@ const SelectedStoreModal = ({ storeId }: SelectedStoreModalProps) => {
             />
           </div>
           <div className={addressWrapper}>
-            <p className={addressStyle}>{storeData.address}</p>
+            <div className={addressStyle}>{storeData.address}</div>
             <Label text={storeData.station} />
           </div>
         </div>
diff --git a/src/pages/view/hooks/useKakaoMap.tsx b/src/pages/view/hooks/useKakaoMap.tsx
index 642bbb08..d803bb9e 100644
--- a/src/pages/view/hooks/useKakaoMap.tsx
+++ b/src/pages/view/hooks/useKakaoMap.tsx
@@ -6,6 +6,8 @@ import {
   useFetchStoreCoordinateList,
 } from '@apis/view';
 
+import { isLoggedIn } from '@utils';
+
 import { useDebounce } from './useDebounce';
 
 import { BottomSheetState, StationType, StoreCoordinate } from '@types';
@@ -14,7 +16,8 @@ const DEFAULT_CENTER = { lat: 37.556621, lng: 126.923877 };
 
 export const useKakaoMap = (
   currentLocation: StationType,
-  handleAnimateChange: (animate: BottomSheetState) => void
+  handleAnimateChange: (animate: BottomSheetState) => void,
+  openModal: () => void
 ) => {
   const { data: storeCoordinateList } = useFetchStoreCoordinateList(
     currentLocation.stationEnName
@@ -88,6 +91,10 @@ export const useKakaoMap = (
   };
 
   const handleSaveButtonClick = () => {
+    if (!isLoggedIn()) {
+      openModal();
+      return;
+    }
     setIsSaveActive((prev) => !prev);
 
     const markerList =