(#167)refactor/error modal

src/apis/user.js

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import useLoginStore from '../stores/loginStore';
 import qs from 'qs';
+import useErrorStore from '@/stores/errorStore';
 
 axios.defaults.paramsSerializer = (params) => qs.stringify(params, { arrayFormat: 'comma' });
 
@@ -9,6 +10,26 @@ export const publicAPI = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
 });
 
+publicAPI.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  (error) => {
+    if (error.response) {
+      const errorType = { statusCode: error.response.status };
+      useErrorStore.getState().setError(errorType);
+    } else if (error.message === 'Network Error' || error.message === 'Network Error') {
+      console.log('네트워크 에러 발생');
+      const errorType = { statusCode: error.message };
+      useErrorStore.getState().setError(errorType);
+    } else {
+      const errorType = { statusCode: 'Unknown Error' };
+      useErrorStore.getState().setError(errorType);
+    }
+    return Promise.reject(error);
+  },
+);
+
 //인증이 필요한 요청
 export const privateAPI = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
@@ -89,21 +110,31 @@ privateAPI.interceptors.response.use(
             originRequest.headers.Authorization = `Bearer ${newAccessToken}`;
             console.log('원래 요청 : ', originRequest);
             return axios(originRequest);
-            //리프레시 토큰 요청이 실패할때(리프레시 토큰도 만료되었을때 = 재로그인 안내)
           } else if (response.data.status === 401) {
+            //리프레시 토큰 요청이 실패할때(리프레시 토큰도 만료되었을때 = 재로그인 안내)
             loginStorage.clear();
-            alert('세션이 만료되었습니다. 재로그인 해주세요.');
+            const errorType = { statusCode: 401 };
+            useErrorStore.getState().setError(errorType);
           } else {
             console.log('인터셉터 내부 기타 에러 : ', error);
-            alert('에러가 발생했습니다. 관리자에게 문의해주세요!');
+            const errorType = { statusCode: 'Unknown Error' };
+            useErrorStore.getState().setError(errorType);
           }
         } else {
           // 리프레시 토큰이 없는 경우 = 로그인 안내
-          console.log(error);
-          alert('로그인이 필요한 서비스입니다.');
-          return 'need login';
+          const errorType = { statusCode: 401 };
+          useErrorStore.getState().setError(errorType);
         }
+      } else {
+        const errorType = { statusCode: 'Unknown Error' };
+        useErrorStore.getState().setError(errorType);
       }
+    } else if (error.message === 'Network Error' || error.message === 'Network Error') {
+      const errorType = { statusCode: error.message };
+      useErrorStore.getState().setError(errorType);
+    } else {
+      const errorType = { statusCode: 'Unknown Error' };
+      useErrorStore.getState().setError(errorType);
     }
     return Promise.reject(error);
   },

src/components/AppLayout.jsx

@@ -8,9 +8,13 @@ import Header from './common/Header';
 import { Outlet } from 'react-router-dom';
 import Footer from './common/footer/Footer';
 import LoginModal from './modal/LoginModal';
+import APIErrorModal from './modal/APIErrorModal';
+import ModalWrapper from './modal/ModalWrapper';
+import { useErrorStore } from '../stores/errorStore';
 
 export default function AppLayout() {
   const { modalOpen } = useLoginModalStore();
+  const { hasError } = useErrorStore();
 
   const [isMobile, setIsMobile] = useState(false);
 
@@ -48,6 +52,11 @@ export default function AppLayout() {
           </main>
           <Footer />
           {modalOpen ? <LoginModal /> : null}
+          {hasError && (
+            <ModalWrapper>
+              <APIErrorModal />
+            </ModalWrapper>
+          )}
         </>
       )}
     </ThemeProvider>

src/components/common/card/recreationCard/RecreationCardL.jsx

@@ -47,7 +47,7 @@ export default function RecreationCardL({ content }) {
           console.log(response.data);
         }
       } catch (error) {
-        throw new Error('FavBtn Error');
+        throw new Error('FavBtn Error', error);
       }
     }
   };

src/components/common/card/recreationCard/RecreationCardS.jsx

@@ -38,7 +38,7 @@ export default function RecreationCardS({ content, refetch }) {
           console.log(response.data);
         }
       } catch (error) {
-        throw new Error('FavBtn Error');
+        throw new Error('FavBtn Error', error);
       }
     }
   };

src/components/createFlow/CustomRecreationItem.jsx

@@ -88,7 +88,7 @@ export default function CustomRecreationItem({ index, register, removeRecreation
         </ErrorWrapper>
         <KeywordBox
           onClick={handleKeywordBoxClick}
-          data-tooltip-id={!!keywords.length ? KEYWORD_TOOLTIP_ID : ''}
+          data-tooltip-id={keywords.length ? KEYWORD_TOOLTIP_ID : ''}
         >
           {!keywords.length ? (
             <span>이곳을 클릭하여 3개의 키워드를 선택해주세요.</span>

src/components/createFlow/FavoriteRecreationsSection.jsx

@@ -42,7 +42,7 @@ export default function FavoriteRecreationsSection({
     };
 
     fetchFavoriteRecreations();
-  }, [page]);
+  }, [page, totalPages]);
 
   const incrementPage = () => setPage((prev) => prev + 1);
 
@@ -52,7 +52,7 @@ export default function FavoriteRecreationsSection({
       <Wrapper>
         {initialLoading ? (
           <LoadingSpinner />
-        ) : !!recreations.length ? (
+        ) : recreations.length ? (
           <RecreationCarousel
             recreations={recreations}
             onAddRecreationClick={onAddRecreationClick}

src/components/main/PopularRecreationCarousel.jsx

@@ -65,7 +65,7 @@ export default function PopularRecreationCarousel() {
       }
     };
     call();
-  }, []);
+  }, [isLoggedIn]);
 
   return (
     <div

src/components/modal/APIErrorModal.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import * as S from './modal.style';
+import useErrorStore from '@/stores/errorStore';
+import toKakaoLogin from '@/utils/kakaoLoginRedirectUtils';
+import { useLocation } from 'react-router';
+
+export default function APIErrorModal() {
+  const { status, resetError } = useErrorStore();
+  const { pathname } = useLocation();
+  const moveToHome = () => {
+    resetError();
+    window.location.href = '/';
+  };
+
+  if (status === 401) {
+    // 세션 만료
+    return (
+      <S.Modal>
+        <S.Content>
+          <S.TitleContainer>
+            <S.Title>세션이 만료되었습니다.</S.Title>
+            <S.SubTitle>재로그인 해주세요.</S.SubTitle>
+          </S.TitleContainer>
+          <S.BtnContainer>
+            <S.ModalBtn
+              backgroundColor="main02"
+              color="main05"
+              onClick={() => toKakaoLogin(pathname)}
+            >
+              로그인
+            </S.ModalBtn>
+          </S.BtnContainer>
+        </S.Content>
+      </S.Modal>
+    );
+  }
+  if (status >= 500) {
+    // 서버 에러
+    return (
+      <S.Modal>
+        <S.Content>
+          <S.TitleContainer>
+            <S.Title>서버 에러가 발생했습니다.</S.Title>
+            <S.SubTitle>잠시 후에 다시 시도해주세요.</S.SubTitle>
+          </S.TitleContainer>
+          <S.BtnContainer>
+            <S.ModalBtn backgroundColor="main02" color="main05" onClick={moveToHome}>
+              홈으로 이동하기
+            </S.ModalBtn>
+          </S.BtnContainer>
+        </S.Content>
+      </S.Modal>
+    );
+  } else if (status === 'Network Error') {
+    // 네트워크 에러
+    return (
+      <S.Modal>
+        <S.Content>
+          <S.TitleContainer>
+            <S.Title>네트워크 에러가 발생했습니다.</S.Title>
+            <S.SubTitle>인터넷 연결을 확인해주세요.</S.SubTitle>
+          </S.TitleContainer>
+          <S.BtnContainer>
+            <S.ModalBtn
+              onClick={() => window.location.reload()}
+              backgroundColor="main02"
+              color="main05"
+            >
+              새로고침
+            </S.ModalBtn>
+          </S.BtnContainer>
+        </S.Content>
+      </S.Modal>
+    );
+  } else {
+    // 기타 에러
+    return (
+      <S.Modal>
+        <S.Content>
+          <S.TitleContainer>
+            <S.Title>알 수 없는 에러가 발생했습니다.</S.Title>
+            <S.SubTitle>관리자에게 문의해주세요.</S.SubTitle>
+          </S.TitleContainer>
+          <S.BtnContainer>
+            <S.ModalBtn backgroundColor="main02" color="main05" onClick={moveToHome}>
+              홈으로 이동하기
+            </S.ModalBtn>
+            <S.ModalBtn
+              onClick={() => window.location.reload()}
+              backgroundColor="main05"
+              color="grayscale03"
+              border
+              borderColor="grayscale03"
+            >
+              새로고침
+            </S.ModalBtn>
+          </S.BtnContainer>
+        </S.Content>
+      </S.Modal>
+    );
+  }
+}

src/components/modal/LoginModal.jsx

@@ -2,28 +2,16 @@ import React from 'react';
 import { Backdrop } from './modal.style';
 import { useLocation } from 'react-router';
 import styled from 'styled-components';
-import characterImg from '../../assets/character/kakaoAvb.png';
-import closeIcon from '../../assets/common/x.svg';
+import characterImg from '@/assets/character/kakaoAvb.png';
+import closeIcon from '@/assets/common/x.svg';
 
-import useLoginModalStore from '../../stores/loginModalStore';
+import useLoginModalStore from '@/stores/loginModalStore';
 import Button from '../common/button/Button';
+import toKakaoLogin from '@/utils/kakaoLoginRedirectUtils';
 
 export default function LoginModal() {
   const { pathname } = useLocation();
   const { modalControl } = useLoginModalStore((state) => state);
-  const REST_API_KEY = import.meta.env.VITE_REST_API_KEY;
-  let REDIRECT_URI;
-
-  if (window.location.href.startsWith('http://localhost:3000/')) {
-    REDIRECT_URI = import.meta.env.VITE_REDIRECT_URL_LOCAL;
-  } else {
-    REDIRECT_URI = import.meta.env.VITE_REDIRECT_URL;
-  }
-
-  let kakaoURL = `https://kauth.kakao.com/oauth/authorize?&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code&state=${pathname}&prompt=select_account`;
-  const toKakaoLogin = () => {
-    window.location.href = kakaoURL;
-  };
 
   return (
     <Backdrop>
@@ -39,7 +27,12 @@ export default function LoginModal() {
               간편하게 로그인을 하고 <br />
               <span style={{ fontWeight: '700' }}>성공적인 레크레이션</span>을 <br /> 경험해보세요!
             </Comment>
-            <Button onClick={toKakaoLogin} backgroundColor="main01" color="main05" size="sm">
+            <Button
+              onClick={() => toKakaoLogin(pathname)}
+              backgroundColor="main01"
+              color="main05"
+              size="sm"
+            >
               간편 로그인하기
             </Button>
           </Text>

src/components/myPage/MyInfoBox.jsx

@@ -138,11 +138,6 @@ const WarnSpace = styled.div`
   gap: 0.5rem;
 `;
 
-const WarnImg = styled.img`
-  width: 1rem;
-  margin-right: 0.5rem;
-`;
-
 const Warn = styled.div`
   color: ${({ theme }) => theme.color.grayscale04};
   ${({ theme }) => theme.text.small};

src/components/recreation/RecreationInfoSection.jsx

@@ -7,7 +7,6 @@ import PLACE from '../../constants/enum/place';
 import GENDER from '../../constants/enum/gender';
 import AGE from '../../constants/enum/age';
 import PURPOSE from '../../constants/enum/purpose';
-import theme from '@/styles/theme';
 
 const RecreationInfoSection = forwardRef(({ recreationData }, ref) => {
   const getPlaceText = () => recreationData.placeList.map((place) => PLACE[place].value).join(', ');

src/components/recreation/RecreationMenuBar.jsx

@@ -34,7 +34,7 @@ export default function RecreationMenuBar({ scrollRefs }) {
     return () => {
       window.removeEventListener('scroll', handleScroll);
     };
-  }, [scrollRefs]);
+  }, [scrollRefs, offset]);
 
   const handleButtonClick = (index) => {
     const targetPosition = scrollRefs.current[index].current.offsetTop + offset;

src/components/recreation/RecreationPreview.jsx

@@ -29,7 +29,7 @@ export default function RecreationPreview({ recreation, showViewCount = true })
           console.log(response.data);
         }
       } catch (error) {
-        throw new Error('FavBtn Error');
+        throw new Error('FavBtn Error', error);
       }
     }
   };

src/components/recreation/RecreationReview.jsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import React, { useState } from 'react';
+import React from 'react';
 import yellowStar from '../../assets/recreation/yellowStar.svg';
 import greyStar from '../../assets/recreation/greyStar.svg';
 import GoodIcon from '../../assets/recreation/good.svg?react';
@@ -11,7 +11,6 @@ import useLoginStore from '../../stores/loginStore';
 import Button from '../common/button/Button';
 
 export default function RecreationReview({ review, refetch }) {
-  const [recommendation, setRecommendation] = useState(review.recommendation);
   const { modalControl } = useLoginModalStore();
   const isLoggedIn = useLoginStore((state) => state.isLoggedIn);
 
@@ -33,7 +32,7 @@ export default function RecreationReview({ review, refetch }) {
         modalControl();
       }
     } catch (error) {
-      throw new Error('POST Recreation Review Error');
+      throw new Error('POST Recreation Review Error', error);
     }
   };