From f0b6ab1ae2c471bf25b72fc7e90e9974e9b37d11 Mon Sep 17 00:00:00 2001
From: yongmin01 <heart77123@naver.com>
Date: Fri, 25 Jul 2025 22:40:10 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[Refactor]=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EB=8C=80=EC=9D=91=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84(401=20=EC=97=90=EB=9F=AC=20=EC=A0=9C=EC=99=B8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/user.js                       | 33 +++++++++++
 src/components/AppLayout.jsx           |  9 +++
 src/components/modal/APIErrorModal.jsx | 77 ++++++++++++++++++++++++++
 src/stores/errorStore.ts               | 23 ++++++++
 4 files changed, 142 insertions(+)
 create mode 100644 src/components/modal/APIErrorModal.jsx
 create mode 100644 src/stores/errorStore.ts

diff --git a/src/apis/user.js b/src/apis/user.js
index afe6f27b..2ec767fb 100644
--- a/src/apis/user.js
+++ b/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, message: error.response.data.error };
+      useErrorStore.getState().setError(errorType);
+    } else if (error.message === 'Network Error' || error.message === 'Network Error') {
+      console.log('네트워크 에러 발생');
+      const errorType = { statusCode: error.message, message: error.message };
+      useErrorStore.getState().setError(errorType);
+    } else {
+      const errorType = { statusCode: 'Unknown Error', message: '알 수 없는 에러가 발생했습니다.' };
+      useErrorStore.getState().setError(errorType);
+    }
+    return Promise.reject(error);
+  },
+);
+
 //인증이 필요한 요청
 export const privateAPI = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
@@ -103,7 +124,19 @@ privateAPI.interceptors.response.use(
           alert('로그인이 필요한 서비스입니다.');
           return 'need login';
         }
+      } else {
+        const errorType = {
+          statusCode: error.response.status,
+          message: error.response.data.error,
+        };
+        useErrorStore.getState().setError(errorType);
       }
+    } else if (error.message === 'Network Error' || error.message === 'Network Error') {
+      const errorType = { statusCode: error.message, message: error.message };
+      useErrorStore.getState().setError(errorType);
+    } else {
+      const errorType = { statusCode: 'Unknown Error', message: '알 수 없는 에러가 발생했습니다.' };
+      useErrorStore.getState().setError(errorType);
     }
     return Promise.reject(error);
   },
diff --git a/src/components/AppLayout.jsx b/src/components/AppLayout.jsx
index f997d91c..7ece387d 100644
--- a/src/components/AppLayout.jsx
+++ b/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>
diff --git a/src/components/modal/APIErrorModal.jsx b/src/components/modal/APIErrorModal.jsx
new file mode 100644
index 00000000..7d481971
--- /dev/null
+++ b/src/components/modal/APIErrorModal.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import * as S from './modal.style';
+import useErrorStore from '../../stores/errorStore';
+
+export default function APIErrorModal() {
+  const { status, resetError } = useErrorStore();
+  const moveToHome = () => {
+    resetError();
+    window.location.href = '/';
+  };
+
+  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>
+    );
+  }
+}
diff --git a/src/stores/errorStore.ts b/src/stores/errorStore.ts
new file mode 100644
index 00000000..954a2be9
--- /dev/null
+++ b/src/stores/errorStore.ts
@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+interface Error {
+  statusCode: number | string;
+  message: string;
+}
+interface ErrorState {
+  hasError: boolean;
+  status: number | string;
+  message: string;
+  setError: (error: Error) => void;
+  resetError: () => void;
+}
+
+export const useErrorStore = create<ErrorState>((set) => ({
+  hasError: false,
+  status: '',
+  message: '',
+  setError: (error: Error) =>
+    set({ hasError: true, status: error.statusCode, message: error.message }),
+  resetError: () => set({ hasError: false, message: '' }),
+}));
+
+export default useErrorStore;

From 483af3f0421e9db7a85bf19f949980f5f0ced04e Mon Sep 17 00:00:00 2001
From: yongmin01 <heart77123@naver.com>
Date: Fri, 25 Jul 2025 23:18:25 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[Refactor]=20401=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EB=8C=80=EC=9D=91=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

카카오 로그인 리다이렉팅 함수 분리
---
 src/apis/user.js                       | 28 ++++++++++++-------------
 src/components/modal/APIErrorModal.jsx | 29 ++++++++++++++++++++++++--
 src/components/modal/LoginModal.jsx    | 27 +++++++++---------------
 src/stores/errorStore.ts               |  7 ++-----
 src/utils/kakaoLoginRedirectUtils.js   | 16 ++++++++++++++
 5 files changed, 68 insertions(+), 39 deletions(-)
 create mode 100644 src/utils/kakaoLoginRedirectUtils.js

diff --git a/src/apis/user.js b/src/apis/user.js
index 2ec767fb..63287509 100644
--- a/src/apis/user.js
+++ b/src/apis/user.js
@@ -16,14 +16,14 @@ publicAPI.interceptors.response.use(
   },
   (error) => {
     if (error.response) {
-      const errorType = { statusCode: error.response.status, message: error.response.data.error };
+      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, message: error.message };
+      const errorType = { statusCode: error.message };
       useErrorStore.getState().setError(errorType);
     } else {
-      const errorType = { statusCode: 'Unknown Error', message: '알 수 없는 에러가 발생했습니다.' };
+      const errorType = { statusCode: 'Unknown Error' };
       useErrorStore.getState().setError(errorType);
     }
     return Promise.reject(error);
@@ -110,32 +110,30 @@ 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: error.response.status,
-          message: error.response.data.error,
-        };
+        const errorType = { statusCode: 'Unknown Error' };
         useErrorStore.getState().setError(errorType);
       }
     } else if (error.message === 'Network Error' || error.message === 'Network Error') {
-      const errorType = { statusCode: error.message, message: error.message };
+      const errorType = { statusCode: error.message };
       useErrorStore.getState().setError(errorType);
     } else {
-      const errorType = { statusCode: 'Unknown Error', message: '알 수 없는 에러가 발생했습니다.' };
+      const errorType = { statusCode: 'Unknown Error' };
       useErrorStore.getState().setError(errorType);
     }
     return Promise.reject(error);
diff --git a/src/components/modal/APIErrorModal.jsx b/src/components/modal/APIErrorModal.jsx
index 7d481971..fb192535 100644
--- a/src/components/modal/APIErrorModal.jsx
+++ b/src/components/modal/APIErrorModal.jsx
@@ -1,14 +1,39 @@
 import React from 'react';
 import * as S from './modal.style';
-import useErrorStore from '../../stores/errorStore';
+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 (
@@ -54,7 +79,7 @@ export default function APIErrorModal() {
         <S.Content>
           <S.TitleContainer>
             <S.Title>알 수 없는 에러가 발생했습니다.</S.Title>
-            <S.SubTitle>잠시 후에 다시 시도해주세요.</S.SubTitle>
+            <S.SubTitle>관리자에게 문의해주세요.</S.SubTitle>
           </S.TitleContainer>
           <S.BtnContainer>
             <S.ModalBtn backgroundColor="main02" color="main05" onClick={moveToHome}>
diff --git a/src/components/modal/LoginModal.jsx b/src/components/modal/LoginModal.jsx
index 5fb0ab94..e678e4e2 100644
--- a/src/components/modal/LoginModal.jsx
+++ b/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>
diff --git a/src/stores/errorStore.ts b/src/stores/errorStore.ts
index 954a2be9..2510f147 100644
--- a/src/stores/errorStore.ts
+++ b/src/stores/errorStore.ts
@@ -1,12 +1,10 @@
 import { create } from 'zustand';
 interface Error {
   statusCode: number | string;
-  message: string;
 }
 interface ErrorState {
   hasError: boolean;
   status: number | string;
-  message: string;
   setError: (error: Error) => void;
   resetError: () => void;
 }
@@ -15,9 +13,8 @@ export const useErrorStore = create<ErrorState>((set) => ({
   hasError: false,
   status: '',
   message: '',
-  setError: (error: Error) =>
-    set({ hasError: true, status: error.statusCode, message: error.message }),
-  resetError: () => set({ hasError: false, message: '' }),
+  setError: (error: Error) => set({ hasError: true, status: error.statusCode }),
+  resetError: () => set({ hasError: false }),
 }));
 
 export default useErrorStore;
diff --git a/src/utils/kakaoLoginRedirectUtils.js b/src/utils/kakaoLoginRedirectUtils.js
new file mode 100644
index 00000000..34b436af
--- /dev/null
+++ b/src/utils/kakaoLoginRedirectUtils.js
@@ -0,0 +1,16 @@
+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;
+}
+
+const toKakaoLogin = (pathname) => {
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code&state=${pathname}&prompt=select_account`;
+
+  window.location.href = kakaoURL;
+};
+
+export default toKakaoLogin;

From cd807d0cc50943767f60a9d83c0ffe72cb21a9a9 Mon Sep 17 00:00:00 2001
From: yongmin01 <heart77123@naver.com>
Date: Fri, 15 Aug 2025 10:29:39 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=90=9B=20[Fix]=20ESLint=20warning=20?=
 =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../card/recreationCard/RecreationCardL.jsx   |  2 +-
 .../card/recreationCard/RecreationCardS.jsx   |  2 +-
 .../createFlow/CustomRecreationItem.jsx       |  2 +-
 .../createFlow/FavoriteRecreationsSection.jsx |  4 +--
 .../main/PopularRecreationCarousel.jsx        |  2 +-
 src/components/myPage/MyInfoBox.jsx           |  5 ----
 .../recreation/RecreationInfoSection.jsx      |  1 -
 .../recreation/RecreationMenuBar.jsx          |  2 +-
 .../recreation/RecreationPreview.jsx          |  2 +-
 .../recreation/RecreationReview.jsx           |  5 ++--
 .../recreation/RecreationReviewSection.jsx    | 29 +++++++++++--------
 .../recreation/RelatedRecreationSection.jsx   |  2 +-
 12 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/components/common/card/recreationCard/RecreationCardL.jsx b/src/components/common/card/recreationCard/RecreationCardL.jsx
index b67d2e0d..b807c357 100644
--- a/src/components/common/card/recreationCard/RecreationCardL.jsx
+++ b/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);
       }
     }
   };
diff --git a/src/components/common/card/recreationCard/RecreationCardS.jsx b/src/components/common/card/recreationCard/RecreationCardS.jsx
index b9939061..7fde3e47 100644
--- a/src/components/common/card/recreationCard/RecreationCardS.jsx
+++ b/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);
       }
     }
   };
diff --git a/src/components/createFlow/CustomRecreationItem.jsx b/src/components/createFlow/CustomRecreationItem.jsx
index cb86831d..4c6f46f0 100644
--- a/src/components/createFlow/CustomRecreationItem.jsx
+++ b/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>
diff --git a/src/components/createFlow/FavoriteRecreationsSection.jsx b/src/components/createFlow/FavoriteRecreationsSection.jsx
index fe03d455..76ce49bd 100644
--- a/src/components/createFlow/FavoriteRecreationsSection.jsx
+++ b/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}
diff --git a/src/components/main/PopularRecreationCarousel.jsx b/src/components/main/PopularRecreationCarousel.jsx
index 2f5a203e..37ba7fe8 100644
--- a/src/components/main/PopularRecreationCarousel.jsx
+++ b/src/components/main/PopularRecreationCarousel.jsx
@@ -65,7 +65,7 @@ export default function PopularRecreationCarousel() {
       }
     };
     call();
-  }, []);
+  }, [isLoggedIn]);
 
   return (
     <div
diff --git a/src/components/myPage/MyInfoBox.jsx b/src/components/myPage/MyInfoBox.jsx
index a75c8c3d..ca5f4399 100644
--- a/src/components/myPage/MyInfoBox.jsx
+++ b/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};
diff --git a/src/components/recreation/RecreationInfoSection.jsx b/src/components/recreation/RecreationInfoSection.jsx
index e3f2f742..21ad3234 100644
--- a/src/components/recreation/RecreationInfoSection.jsx
+++ b/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(', ');
diff --git a/src/components/recreation/RecreationMenuBar.jsx b/src/components/recreation/RecreationMenuBar.jsx
index ab645c5b..7d831e4a 100644
--- a/src/components/recreation/RecreationMenuBar.jsx
+++ b/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;
diff --git a/src/components/recreation/RecreationPreview.jsx b/src/components/recreation/RecreationPreview.jsx
index a33d60fb..677891f9 100644
--- a/src/components/recreation/RecreationPreview.jsx
+++ b/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);
       }
     }
   };
diff --git a/src/components/recreation/RecreationReview.jsx b/src/components/recreation/RecreationReview.jsx
index a2d0c5c1..535a7b27 100644
--- a/src/components/recreation/RecreationReview.jsx
+++ b/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);
     }
   };
 
diff --git a/src/components/recreation/RecreationReviewSection.jsx b/src/components/recreation/RecreationReviewSection.jsx
index 393d8668..39ccf0cf 100644
--- a/src/components/recreation/RecreationReviewSection.jsx
+++ b/src/components/recreation/RecreationReviewSection.jsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import ReviewStars from './ReviewStars';
 import RecreationReview from './RecreationReview';
 import { privateAPI, publicAPI } from '@/apis/user.js';
@@ -30,7 +30,7 @@ const RecreationReviewSection = forwardRef(({ recreationId, handleModal }, ref)
   };
 
   // 리뷰 목록 받아오기
-  const fetchReviews = async () => {
+  const fetchReviews = useCallback(async () => {
     try {
       const api = isLoggedIn ? privateAPI : publicAPI;
       const response = await api.get(
@@ -39,13 +39,13 @@ const RecreationReviewSection = forwardRef(({ recreationId, handleModal }, ref)
       setReviewListData(response.data.result.reviewList);
       setReviewData(response.data.result);
     } catch (error) {
-      throw new Error('GET Recreation Reviews Error');
+      throw new Error('GET Recreation Reviews Error', error);
     }
-  };
+  }, [isLoggedIn, currentPage, recreationId]);
 
   useEffect(() => {
     fetchReviews();
-  }, [currentPage, recreationId]);
+  }, [fetchReviews]);
 
   // 리뷰 작성
   const handleReviewSubmit = async () => {
@@ -76,14 +76,19 @@ const RecreationReviewSection = forwardRef(({ recreationId, handleModal }, ref)
         stars: selectedStars,
         content: reviewInput,
       });
-
-      // 리뷰 목록 업데이트
-      fetchReviews();
-      handleModal(true);
-      setSelectedStars(0);
-      setReviewInput('');
+      console.log(response);
+      if (response.status === 201) {
+        // 리뷰 목록 업데이트
+        fetchReviews();
+        handleModal(true);
+        setSelectedStars(0);
+        setReviewInput('');
+      } else {
+        console.log('리뷰 등록 실패:', response.data);
+        alert('리뷰 등록에 실패했습니다. 다시 시도해주세요.');
+      }
     } catch (error) {
-      alert('리뷰 등록에 실패했습니다');
+      alert('리뷰 등록에 실패했습니다', error);
     }
   };
 
diff --git a/src/components/recreation/RelatedRecreationSection.jsx b/src/components/recreation/RelatedRecreationSection.jsx
index b200ac7f..96eacda8 100644
--- a/src/components/recreation/RelatedRecreationSection.jsx
+++ b/src/components/recreation/RelatedRecreationSection.jsx
@@ -20,7 +20,7 @@ const RelatedRecreationSection = forwardRef(({ recreationId }, ref) => {
     };
 
     fetchRelated();
-  }, [recreationId]);
+  }, [isLoggedIn, recreationId]);
 
   return (
     <RelatedRecreationContainer ref={ref}>