UMC-Master · minzee09 · Nov 5, 2025 · Feb 20, 2025 · Feb 20, 2025 · Feb 21, 2025
diff --git a/umc-master/index.html b/umc-master/index.html
@@ -11,7 +11,7 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>홈마스터</title>
-    <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js" crossorigin="anonymous"></script>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/umc-master/src/apis/authApi.ts b/umc-master/src/apis/authApi.ts
@@ -1,38 +1,18 @@
-// import axiosInstance from '@apis/axios-instance';
+import axiosInstance from '@apis/axios-instance';
 
-// interface UserSignup {
-//   email: string;
-//   password: string;
-//   nickname: string;
-//   hashtags: string[];
-// }
+interface UserSignup {
+  email: string;
+  password: string;
+  nickname: string;
+  hashtags: string[];
+}
 
-// export const postSignup = async ({ email, password, nickname, hashtags } : UserSignup) => {
-//   const { data } = await axiosInstance.post(`/signup`, {
-//     email,
-//     password,
-//     nickname,
-//     hashtags,
-//   });
-//   return data;
-// };
-
-import axios from 'axios';
-
-export const postSignup = async () => {
-  try {
-    const response = await axios.post('https://api.hmaster.shop/api/v1/signup', {
-      email: 'ekos555@naver.com',
-      password: 'asfa1234!@',
-      nickname: 'rael',
-      hashtags: ['봄', '패션', '청소', '요리', '재활용', '주택']
-    }, {
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    console.log('회원가입 성공:', response.data);
-  } catch (error) {
-    console.error('회원가입 오류:', error);
-  }
+export const postSignup = async ({ email, password, nickname, hashtags }: UserSignup) => {
+  const { data } = await axiosInstance.post(`/signup`, {
+    email,
+    password,
+    nickname,
+    hashtags,
+  });
+  return data;
 };
diff --git a/umc-master/src/apis/axios-instance.ts b/umc-master/src/apis/axios-instance.ts
@@ -1,11 +1,12 @@
-import RoutePaths from '@router/routePaths';
 import { useTokenStore } from '@store/tokenStore';
 import axios, { AxiosInstance } from 'axios';
 
+const { accessToken } = useTokenStore.getState();
+
 const axiosInstance: AxiosInstance = axios.create({
   headers: {
     accept: 'application/json',
-    Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`,
+    Authorization: `Bearer ${accessToken}`,
   },
   baseURL: import.meta.env.VITE_BASE_URL,
 });
@@ -69,11 +70,6 @@ axiosInstance.interceptors.response.use(
         console.error('토큰 갱신 실패:', refreshError);
         useTokenStore.getState().clearTokens();
 
-        // 로그인 페이지로 리다이렉트
-        if (window.location.pathname !== RoutePaths.LOGIN) {
-          window.location.href = RoutePaths.LOGIN;
-        }
-
         return Promise.reject(refreshError);
       }
     }

diff --git a/umc-master/src/components/Auth/AuthWrapper.tsx b/umc-master/src/components/Auth/AuthWrapper.tsx
@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useTokenStore } from '@store/tokenStore';
+import RoutePaths from '@router/routePaths';
+
+interface AuthWrapperProps {
+  children: React.ReactNode;
+}
+
+const AuthWrapper = ({ children }: AuthWrapperProps) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { accessToken } = useTokenStore.getState();
+
+  useEffect(() => {
+    // 로그인 페이지가 아니고 토큰이 없는 경우 리다이렉트
+    if (!accessToken && location.pathname !== RoutePaths.LANDING) {
+      navigate(RoutePaths.LOGIN, { replace: true });
+    }
+  }, [accessToken, location.pathname, navigate]);
+
+  // 토큰이 없고 로그인 페이지가 아닌 경우 아무것도 렌더링하지 않음
+  if (!accessToken && location.pathname !== RoutePaths.LOGIN) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default AuthWrapper;
diff --git a/umc-master/src/components/Modal/profile.tsx b/umc-master/src/components/Modal/profile.tsx
@@ -14,16 +14,17 @@ import { getUsers } from '@apis/profileApi';
 interface ProfileModalProps {
   isOpen: boolean;
   onClose: () => void;
+  profileImage: string;
 }
 
-const ProfileModal: React.FC<ProfileModalProps> = ({ isOpen, onClose }) => {
+const ProfileModal: React.FC<ProfileModalProps> = ({ isOpen, onClose, profileImage }) => {
   if (!isOpen) return null;
   const navigate = useNavigate();
   const { clearAuth } = useAuthStore();
   const { user, fetchUser } = useUserStore();
 
   useEffect(() => {
-    fetchUser(); // 컴포넌트 마운트 시 사용자 정보 가져오기
+    fetchUser();
   }, []);
   getUsers();
 
@@ -39,7 +40,7 @@ const ProfileModal: React.FC<ProfileModalProps> = ({ isOpen, onClose }) => {
           <CloseIcon />
         </CloseButton>
         <ProfileWrapper>
-          <ProfileImage />
+          <ProfileImage src={profileImage} alt="Profile Image" />
           <Typography variant="titleXSmall">{user?.nickname} 님</Typography>
         </ProfileWrapper>
         <MenuList>
@@ -109,7 +110,7 @@ const ProfileWrapper = styled.div`
   padding: 20px 0;
 `;
 
-const ProfileImage = styled.div`
+const ProfileImage = styled.img`
   width: 60px;
   height: 60px;
   border-radius: 50%;
@@ -138,7 +139,6 @@ const MenuItem = styled.li`
   }
 `;
 
-// "마이페이지" 링크 전용 컴포넌트
 const MenuItemLink = styled(Link)`
   display: flex;
   align-items: center;

diff --git a/umc-master/src/components/NavigationBar/NavigationBar.tsx b/umc-master/src/components/NavigationBar/NavigationBar.tsx
@@ -26,22 +26,34 @@ const NavigationBar: React.FC<NavigationBarProps> = ({ login }) => {
   }, []);
   getUsers();
 
+  const handleNavClick = () => {
+    window.scrollTo(0, 0);
+  };
+
   const toggleAlarmModal = () => setIsAlarmModalOpen((prev) => !prev);
   const toggleProfileModal = () => setIsProfileModalOpen((prev) => !prev);
 
   return (
     <Container>
       <Nav>
         <LeftSection>
-          <NavLink to={RoutePaths.MAIN}>
+          <NavLink to={RoutePaths.MAIN} onClick={handleNavClick}>
             <Logo src={LogoImage} alt="Logo" />
           </NavLink>
           <Typography variant="titleXxSmall">
             <MenuItems>
-              <StyledNavLink to={RoutePaths.MAGAZINE}>매거진</StyledNavLink>
-              <StyledNavLink to={RoutePaths.COMMUNITY}>꿀팁나눔</StyledNavLink>
-              <StyledNavLink to={RoutePaths.SAVE_TIP}>저장한 꿀팁</StyledNavLink>
-              <StyledNavLink to={RoutePaths.CHALLENGE}>챌린지</StyledNavLink>
+              <StyledNavLink to={RoutePaths.MAGAZINE} onClick={handleNavClick}>
+                매거진
+              </StyledNavLink>
+              <StyledNavLink to={RoutePaths.COMMUNITY} onClick={handleNavClick}>
+                꿀팁나눔
+              </StyledNavLink>
+              <StyledNavLink to={RoutePaths.SAVE_TIP} onClick={handleNavClick}>
+                저장한 꿀팁
+              </StyledNavLink>
+              <StyledNavLink to={RoutePaths.CHALLENGE} onClick={handleNavClick}>
+                챌린지
+              </StyledNavLink>
             </MenuItems>
           </Typography>
         </LeftSection>
@@ -63,7 +75,11 @@ const NavigationBar: React.FC<NavigationBarProps> = ({ login }) => {
       </Nav>
 
       <AlarmModal isOpen={isAlarmModalOpen} onClose={toggleAlarmModal} />
-      <ProfileModal isOpen={isProfileModalOpen} onClose={toggleProfileModal} />
+      <ProfileModal
+        isOpen={isProfileModalOpen}
+        onClose={toggleProfileModal}
+        profileImage={user?.profile_image_url || gray_character}
+      />
     </Container>
   );
 };

diff --git a/umc-master/src/pages/auth/KakaoCallback.tsx b/umc-master/src/pages/auth/KakaoCallback.tsx
@@ -1,54 +1,42 @@
 import React, { useEffect } from 'react';
-import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
+import axiosInstance from '@apis/axios-instance';
+import { useTokenStore } from '@store/tokenStore';
+import { useAuthStore } from '@store/authStore';
 
 const KakaoCallback: React.FC = () => {
-
+  const { setAuth } = useAuthStore();
+  const { setTokens } = useTokenStore();
   const navigate = useNavigate();
 
   useEffect(() => {
-    const getAccessToken = async () => {
-      const queryParams = new URLSearchParams(window.location.search);
-      const code = queryParams.get('code');
-
-      if (!code) {
-        console.error('Authorization code not found');
-        return;
-      }
-
-      try {
-        // 카카오에서 Access Token 요청
-        const response = await axios.post('https://kauth.kakao.com/oauth/token', {
-          grant_type: 'authorization_code',
-          client_id: import.meta.env.VITE_KAKAO_API_KEY,
-          redirect_uri: 'http://localhost:3000/oauth/kakao/callback',
-          code,
-        });
-
-        const kakaoAccessToken = response.data.access_token;
-
-        // 백엔드로 카카오 Access Token 전송
-        const backendResponse = await axios.post('http://localhost:3000/login/kakao', {
-          kakaoAccessToken,
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+
+    if (code) {
+      console.log('✅ 카카오 로그인 코드 확인:', code);
+
+      axiosInstance
+        .post('/login/kakao', { code })
+        .then((response) => {
+          const { accessToken, refreshToken } = response.data.result;
+          setTokens({ accessToken, refreshToken });
+          localStorage.setItem('accessToken', accessToken);
+          localStorage.setItem('refreshToken', refreshToken);
+          setAuth(true);
+          navigate('/main');
+        })
+        .catch(() => {
+          // console.error('❌ 카카오 로그인 실패:', error.response?.data || error.message);
+          // alert(error.response?.data?.message || '카카오 로그인에 실패했습니다.');
+          navigate('/');
         });
-
-        const { accessToken, refreshToken } = backendResponse.data.result;
-
-        // Access Token 및 Refresh Token 저장 (예: 로컬 스토리지)
-        localStorage.setItem('accessToken', accessToken);
-        localStorage.setItem('refreshToken', refreshToken);
-
-        // 홈 또는 사용자 대시보드로 이동
-        navigate('/');
-      } catch (error) {
-        console.error('Failed to login with Kakao:', error);
-      }
-    };
-
-    getAccessToken();
+    } else {
+      console.warn('⚠️ 카카오 로그인 코드 없음');
+    }
   }, [navigate]);
 
-  return <div>카카오 로그인 중…</div>;
+  return <></>;
 };
 
 export default KakaoCallback;