[Fix/#203] 웹파트 내부 QA 3차 수정 (#204)

* fix: qa 반영

* fix: SelectedStoreModal 스타일 수정

* refactor: 로그인 안하고 찜버튼 클릭시 처리

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();
     },

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 = () => {

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>
+      )}
     </>
   );
 };

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',

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>

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 =