diff --git a/src/app/App.tsx b/src/app/App.tsx
index 5f78661..1634b18 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,19 +1,16 @@
 import { RouterProvider } from 'react-router-dom';
 
 import AppRouter from './appRouter';
-import AuthProvider from './AuthProvider';
 import ModalProvider from './ModalProvider';
 import QueryProvider from './QueryProvider';
 
 function App() {
   return (
-    <AuthProvider>
-      <QueryProvider>
-        <ModalProvider>
-          <RouterProvider router={AppRouter()} />
-        </ModalProvider>
-      </QueryProvider>
-    </AuthProvider>
+    <QueryProvider>
+      <ModalProvider>
+        <RouterProvider router={AppRouter()} />
+      </ModalProvider>
+    </QueryProvider>
   );
 }
 
diff --git a/src/app/AuthProvider.tsx b/src/app/AuthProvider.tsx
index 5f8e5b9..eaf8ec2 100644
--- a/src/app/AuthProvider.tsx
+++ b/src/app/AuthProvider.tsx
@@ -1,83 +1,60 @@
-import axios from 'axios';
 import type { ReactNode } from 'react';
-import { createContext, useContext, useRef, useState } from 'react';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 
-import api from '@/shared/api/baseApi';
+import { getLocalAccessToken, removeLocalAccessToken } from '@/features/auth/auth.api';
+import { useUserStore } from '@/features/user/model/user.store';
+import { getMyProfile } from '@/features/user/user.api';
+import { setInterceptorEvents } from '@/shared/api/baseApi';
 import { customConfirm } from '@/shared/ui';
 
-interface AuthContextType {
-  accessToken: string | null;
-  setAccessToken: (token: string | null) => void;
-  reissueToken: () => Promise<void>;
-  logout: () => Promise<void>;
-  removeToken: () => void;
-}
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
 const AuthProvider = ({ children }: { children: ReactNode }) => {
-  const [accessToken, setAccessToken] = useState<string | null>(
-    localStorage.getItem('accessToken'),
-  );
-  const isRefreshing = useRef(false);
-
-  const reissueToken = async () => {
-    if (isRefreshing.current) return;
-
-    isRefreshing.current = true;
-
-    try {
-      const response = await axios.post('/token/reissue', {}, { withCredentials: true });
-
-      const newAccessToken = (response.headers['authorization'] as string)?.split(' ')[1];
-
-      if (newAccessToken) {
-        setAccessToken(newAccessToken);
-        localStorage.setItem('accessToken', newAccessToken);
-      } else {
-        throw new Error('accessToken이 헤더에 포함되어 있지 않습니다.');
+  const navigate = useNavigate();
+  const accessToken = getLocalAccessToken();
+  const { setUserData, clearUserData } = useUserStore(state => state.actions);
+
+  useEffect(() => {
+    const getUserData = async () => {
+      try {
+        if (accessToken) {
+          const userData = await getMyProfile().then(res => res.data);
+          if (!userData) throw new Error('유저 정보를 찾을 수가 없습니다.');
+          setUserData(userData);
+          return userData;
+        }
+        clearUserData();
+      } catch (error) {
+        console.error('유저 데이터를 불러오는 중 오류가 발생했습니다.', error);
       }
-    } catch (error) {
-      console.error('토큰 재발급 실패:', error);
-      removeToken();
-    } finally {
-      // eslint-disable-next-line require-atomic-updates
-      isRefreshing.current = false;
-    }
-  };
-
-  const removeToken = () => {
-    setAccessToken(null);
-    localStorage.removeItem('accessToken');
-    customConfirm({ title: '로그인', text: '로그인 페이지로 이동합니다.', icon: 'info' });
-  };
-
-  const logout = async () => {
-    try {
-      await api.post('/user/logout');
-
-      setAccessToken(null);
-      localStorage.removeItem('accessToken');
-    } catch (error) {
-      console.error('로그아웃 실패:', error);
-    }
-  };
+    };
+
+    void getUserData();
+  }, []);
+
+  //인터셉터 함수 등록 effects
+  useEffect(() => {
+    const logout = async (text: string) => {
+      try {
+        await customConfirm({
+          title: '로그아웃',
+          text,
+          icon: 'error',
+          showCancelButton: false,
+        });
+        removeLocalAccessToken();
+        clearUserData();
+        navigate('/');
+      } catch (error) {
+        console.error('로그아웃 실패:', error);
+      }
+    };
 
-  return (
-    <AuthContext.Provider
-      value={{ accessToken, setAccessToken, reissueToken, logout, removeToken }}
-    >
-      {children}
-    </AuthContext.Provider>
-  );
-};
+    setInterceptorEvents('logout', (text: string) => {
+      void logout(text);
+    });
+  }, []);
 
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('AuthProvider Error');
-  }
-  return context;
+  return <>{children}</>;
 };
 
 export default AuthProvider;
diff --git a/src/app/QueryProvider.tsx b/src/app/QueryProvider.tsx
index 14c6a5b..827ba39 100644
--- a/src/app/QueryProvider.tsx
+++ b/src/app/QueryProvider.tsx
@@ -4,7 +4,7 @@ const QueryProvider = ({ children }: { children: React.ReactNode }) => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
-        staleTime: 60 * 1000,
+        staleTime: 0,
         refetchOnWindowFocus: false,
         retry: 1,
       },
diff --git a/src/app/appRouter.tsx b/src/app/appRouter.tsx
index 43a4ac1..8dd28a1 100644
--- a/src/app/appRouter.tsx
+++ b/src/app/appRouter.tsx
@@ -1,5 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom';
 
+import { LoginLoading } from '@/features/auth/ui/LoginLoading';
 import {
   ArchiveListPage,
   DetailArchivePage,
@@ -73,6 +74,10 @@ const AppRouter = () => {
           path: '/like',
           element: <LikeListPage />,
         },
+        {
+          path: '/login',
+          element: <LoginLoading />,
+        },
       ],
     },
   ]);
diff --git a/src/features/auth/auth.api.ts b/src/features/auth/auth.api.ts
new file mode 100644
index 0000000..4864fd0
--- /dev/null
+++ b/src/features/auth/auth.api.ts
@@ -0,0 +1,56 @@
+import { AxiosError } from 'axios';
+
+import type { TokenApiResponse } from './auth.dto';
+import type { PostUserResponseDTO } from '../user/user.dto';
+
+import api from '@/shared/api/baseApi';
+
+export const loginWithToken = async (token: string) => {
+  const response = await api.get<TokenApiResponse>(`/token/issue?token=${token}`);
+  const newAccessToken = response.headers['authorization'];
+  if (newAccessToken) {
+    setLocalAccessToken(newAccessToken);
+  }
+
+  return newAccessToken as string;
+};
+
+export const logout = async () => {
+  try {
+    await api.post<PostUserResponseDTO>('/user/logout');
+    removeLocalAccessToken();
+  } catch (error) {
+    console.error('로그아웃 실패:', error);
+  }
+};
+
+export const getLocalAccessToken = () => {
+  return localStorage.getItem('accessToken');
+};
+
+export const setLocalAccessToken = (token: string) => {
+  localStorage.setItem('accessToken', token);
+};
+
+export const removeLocalAccessToken = () => {
+  localStorage.removeItem('accessToken');
+};
+
+export const reissueToken = async () => {
+  try {
+    const response = await api.post('/token/reissue');
+
+    const newAccessToken = response.headers['authorization'];
+
+    if (newAccessToken) {
+      setLocalAccessToken(newAccessToken);
+      return newAccessToken as string;
+    } else {
+      throw new Error('accessToken이 헤더에 포함되어 있지 않습니다.');
+    }
+  } catch (error) {
+    if (error instanceof AxiosError) {
+      throw new Error(`토큰 재발행 중 오류가 발생했습니다. ${error.message}`);
+    }
+  }
+};
diff --git a/src/features/auth/auth.dto.ts b/src/features/auth/auth.dto.ts
new file mode 100644
index 0000000..d4ea9e3
--- /dev/null
+++ b/src/features/auth/auth.dto.ts
@@ -0,0 +1,8 @@
+import type { ApiResponse } from '@/shared/api';
+
+export interface TokenResponse {
+  message: string;
+  expiresIn: number;
+}
+
+export type TokenApiResponse = ApiResponse<TokenResponse>;
diff --git a/src/features/auth/ui/GoogleLogin.tsx b/src/features/auth/ui/GoogleLogin.tsx
index 8b23313..e2edb94 100644
--- a/src/features/auth/ui/GoogleLogin.tsx
+++ b/src/features/auth/ui/GoogleLogin.tsx
@@ -5,7 +5,13 @@ import { Button } from '@/shared/ui';
 
 export const GoogleLogin = () => {
   return (
-    <Button className={styles.loginBtn} skin='invert'>
+    <Button
+      className={styles.loginBtn}
+      onClick={() => {
+        window.location.href = 'https://api.palettee.site/oauth2/authorization/google?';
+      }}
+      skin='invert'
+    >
       <div>
         <GoogleLogo width={64} />
         Log In
diff --git a/src/features/auth/ui/LoginLoading.tsx b/src/features/auth/ui/LoginLoading.tsx
new file mode 100644
index 0000000..e90883b
--- /dev/null
+++ b/src/features/auth/ui/LoginLoading.tsx
@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+import { loginWithToken, removeLocalAccessToken, setLocalAccessToken } from '../auth.api';
+
+import type { UserDataState } from '@/features/user/model/user.store';
+import { useUserStore } from '@/features/user/model/user.store';
+import { getMyProfile } from '@/features/user/user.api';
+import { customConfirm } from '@/shared/ui';
+
+export const LoginLoading = () => {
+  const [params] = useSearchParams();
+  const navigate = useNavigate();
+  const { setUserData } = useUserStore(state => state.actions);
+  const token = params.get('token') ?? '';
+
+  useEffect(() => {
+    const login = async () => {
+      try {
+        if (!token) {
+          await customConfirm({
+            title: '잘못된 접근',
+            text: '메인 페이지로 이동합니다.',
+            icon: 'error',
+            showCancelButton: false,
+          });
+          return;
+        }
+
+        const newAccessToken = await loginWithToken(token);
+
+        if (newAccessToken) {
+          setLocalAccessToken(newAccessToken);
+        }
+
+        const userData = (await getMyProfile().then(res => res.data)) as UserDataState;
+        setUserData(userData);
+
+        navigate('/');
+      } catch (error) {
+        console.error(error);
+        await customConfirm({
+          title: '로그인 실패',
+          text: '메인 페이지로 이동합니다.',
+          icon: 'error',
+          showCancelButton: false,
+        });
+        removeLocalAccessToken();
+        navigate('/');
+      }
+    };
+
+    void login();
+  }, []);
+
+  return <div>Redirect...</div>;
+};
diff --git a/src/features/portfolio/portfolio.api.ts b/src/features/portfolio/portfolio.api.ts
new file mode 100644
index 0000000..0cf99b2
--- /dev/null
+++ b/src/features/portfolio/portfolio.api.ts
@@ -0,0 +1,6 @@
+import type { PostPortfolioApiResponse, PostPortfolioDTO } from './portfolio.dto';
+
+import api from '@/shared/api/baseApi';
+
+export const postCreatePortfolio = (data: PostPortfolioDTO) =>
+  api.post<PostPortfolioApiResponse>('/portfolio', data).then(res => res.data);
diff --git a/src/features/portfolio/portfolio.dto.ts b/src/features/portfolio/portfolio.dto.ts
new file mode 100644
index 0000000..58cbc12
--- /dev/null
+++ b/src/features/portfolio/portfolio.dto.ts
@@ -0,0 +1,9 @@
+import type { PostUserResponseDTO } from '../user/user.dto';
+
+import type { ApiResponse } from '@/shared/api';
+
+export interface PostPortfolioDTO {
+  portfolioURL: string;
+}
+
+export type PostPortfolioApiResponse = ApiResponse<PostUserResponseDTO>;
diff --git a/src/features/user/model/user.store.ts b/src/features/user/model/user.store.ts
new file mode 100644
index 0000000..31c19be
--- /dev/null
+++ b/src/features/user/model/user.store.ts
@@ -0,0 +1,49 @@
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+
+import type { UserRole } from '../user.dto';
+
+export interface UserDataState {
+  userId: number;
+  name: string;
+  imageUrl: string;
+  role: UserRole;
+}
+
+interface UserState {
+  userData: UserDataState | null;
+}
+
+interface UserActions {
+  actions: {
+    setUserData: (data: UserDataState | null) => void;
+    updateUserData: (updatedData: Partial<UserDataState>) => void;
+    clearUserData: () => void;
+  };
+}
+
+const initialState = {
+  userId: -1,
+  userData: null,
+};
+
+export const useUserStore = create(
+  immer<UserState & UserActions>(set => ({
+    userData: null,
+    actions: {
+      setUserData: data => {
+        set({ userData: data });
+      },
+      updateUserData: updatedData => {
+        set(state => {
+          if (state.userData) {
+            Object.assign(state.userData, updatedData);
+          }
+        });
+      },
+      clearUserData: () => {
+        set(initialState);
+      },
+    },
+  })),
+);
diff --git a/src/features/user/user.api.ts b/src/features/user/user.api.ts
new file mode 100644
index 0000000..5353d58
--- /dev/null
+++ b/src/features/user/user.api.ts
@@ -0,0 +1,29 @@
+import type {
+  GetEditUserApiResponse,
+  GetMyProfileApiResponse,
+  GetUserProfileApiResponse,
+  PostUserApiReponse,
+  PutEditUserApiResponse,
+  PutUserDTO,
+} from './user.dto';
+import type { GetUserDefaultApiResponse, PostUserDTO } from './user.dto';
+
+import api from '@/shared/api/baseApi';
+
+export const getUserDefault = () =>
+  api.get<GetUserDefaultApiResponse>('/profile').then(res => res.data);
+
+export const postCreateUser = (data: PostUserDTO) =>
+  api.post<PostUserApiReponse>('/profile', data).then(res => res.data);
+
+export const getUserProfile = (userId: number) =>
+  api.get<GetUserProfileApiResponse>(`/user/${userId}/profile`);
+
+export const getUserEdit = (userId: number) =>
+  api.get<GetEditUserApiResponse>(`/user/${userId}/edit`).then(res => res.data);
+
+export const putUserEdit = (data: PutUserDTO, userId: number) =>
+  api.put<PutEditUserApiResponse>(`/user/${userId}/edit`, data).then(res => res.data);
+
+export const getMyProfile = () =>
+  api.get<GetMyProfileApiResponse>('/user/my-info').then(res => res.data);
diff --git a/src/features/user/user.dto.ts b/src/features/user/user.dto.ts
new file mode 100644
index 0000000..299e39b
--- /dev/null
+++ b/src/features/user/user.dto.ts
@@ -0,0 +1,51 @@
+import type { Color } from '../archive';
+import type { UserDataState } from './model/user.store';
+
+import type { ApiResponse } from '@/shared/api';
+
+export type UserRole = 'REAL_NEWBIE' | 'JUST_NEWBIE' | 'OLD_NEWBIE' | 'USER' | 'ADMIN';
+
+export interface UserDefaultInfo {
+  email: string;
+  name: string;
+  imageUrl: string;
+}
+
+export interface BaseUserDTO {
+  name: string;
+  email: string;
+  briefIntro: string;
+  imageUrl: string;
+  majorJobGroup: string;
+  minorJobGroup: string;
+  jobTitle: string;
+  division: string;
+}
+
+export interface PostUserDTO extends BaseUserDTO {
+  url: string[];
+  s3StoredImageUrls: string[];
+}
+
+export interface PutUserDTO extends BaseUserDTO {
+  portfolioLink: string;
+  socials: string[];
+}
+
+export interface User extends BaseUserDTO {
+  socials: string[];
+  role: UserRole;
+  color: Color;
+  portfolioLink: string;
+}
+
+export interface PostUserResponseDTO {
+  userId: number;
+}
+
+export type GetUserDefaultApiResponse = ApiResponse<UserDefaultInfo>;
+export type PostUserApiReponse = ApiResponse<PostUserResponseDTO>;
+export type GetUserProfileApiResponse = ApiResponse<User>;
+export type GetEditUserApiResponse = ApiResponse<PutUserDTO>;
+export type PutEditUserApiResponse = ApiResponse<PostUserResponseDTO>;
+export type GetMyProfileApiResponse = ApiResponse<UserDataState>;
diff --git a/src/features/user/user.hook.ts b/src/features/user/user.hook.ts
new file mode 100644
index 0000000..a2d15b6
--- /dev/null
+++ b/src/features/user/user.hook.ts
@@ -0,0 +1,50 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import {
+  getUserDefault,
+  getUserEdit,
+  getUserProfile,
+  postCreateUser,
+  putUserEdit,
+} from './user.api';
+import type { PostUserDTO, PutUserDTO } from './user.dto';
+
+export const useGetUserDefault = () => {
+  return useQuery({
+    queryKey: ['/user', 'profile'],
+    queryFn: () => getUserDefault(),
+  });
+};
+
+export const useGetUserProfile = (userId: number) => {
+  return useQuery({
+    queryKey: ['/user', userId, 'profile'],
+    queryFn: () => getUserProfile(userId),
+  });
+};
+
+export const useGetUserEdit = (userId: number) => {
+  return useQuery({
+    queryKey: ['/user', userId, 'edit'],
+    queryFn: () => getUserEdit(userId),
+  });
+};
+
+export const useCreateUser = () => {
+  return useMutation({
+    mutationFn: ({ data }: { data: PostUserDTO }) => postCreateUser(data),
+  });
+};
+
+export const useEditUser = (userId: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ data }: { data: PutUserDTO }) => putUserEdit(data, userId),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['/user', userId, 'edit'] }).catch(error => {
+        console.error('Failed to invalidate queries: ', error);
+      });
+    },
+  });
+};
diff --git a/src/shared/api/baseApi.ts b/src/shared/api/baseApi.ts
index e0975e8..75777e3 100644
--- a/src/shared/api/baseApi.ts
+++ b/src/shared/api/baseApi.ts
@@ -1,38 +1,64 @@
 import type { AxiosRequestConfig } from 'axios';
 import axios from 'axios';
 
-import { useAuth } from '@/app/AuthProvider';
+import { getLocalAccessToken, reissueToken } from '@/features/auth/auth.api';
+
+let isRefreshing = false;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type EventHandler = (...args: any[]) => void;
+
+interface interceptorEventsTypes {
+  [event: string]: EventHandler;
+}
+
+const interceptorEvents: interceptorEventsTypes = {
+  logout: () => {},
+};
+
+export const setInterceptorEvents = (event: string, handler: EventHandler) => {
+  interceptorEvents[event] = handler;
+};
 
 const api = axios.create({
-  baseURL: `https://api.palettee.site`,
+  baseURL: `https://api.palettee.site`, // Backend API Domain 주소
   timeout: 10_000,
   withCredentials: true,
 });
 
-// api.interceptors.request.use(config => {
-//   const { accessToken } = useAuth();
-//   if (accessToken) {
-//     config.headers.Authorization = `Bearer ${accessToken}`;
-//   }
-//   return config;
-// });
+api.interceptors.request.use(config => {
+  const accessToken = getLocalAccessToken();
+  if (accessToken) {
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+  return config;
+});
 
 api.interceptors.response.use(
   response => response,
   async error => {
-    const { reissueToken } = useAuth();
-
+    console.log('에러 ㅣ ', error.response);
     if (error.response?.status === 401) {
+      if (isRefreshing) {
+        return Promise.reject(error instanceof Error ? error : new Error('Unknown Error'));
+      }
+
+      isRefreshing = true;
+
       try {
         await reissueToken();
-        const { accessToken } = useAuth();
+        const accessToken = getLocalAccessToken();
 
         if (accessToken && error.config) {
-          error.config.headers.Authorization = `Bearer ${accessToken}`;
+          error.config.headers.Authorization = `${accessToken}`;
           return api.request(error.config as AxiosRequestConfig);
         }
       } catch (reissueError) {
+        interceptorEvents['logout']('토큰이 만료되었습니다.');
         console.error('토큰 재발급 실패:', reissueError);
+      } finally {
+        // eslint-disable-next-line require-atomic-updates
+        isRefreshing = false;
       }
     }
 
diff --git a/src/widgets/Layout/index.tsx b/src/widgets/Layout/index.tsx
index 9ae3da2..39e7df3 100644
--- a/src/widgets/Layout/index.tsx
+++ b/src/widgets/Layout/index.tsx
@@ -10,6 +10,7 @@ import { ChattingBtn } from './ui/ChattingBtn/ChattingBtn';
 import { Footer } from './ui/Footer/Footer';
 import { Header } from './ui/Header/Header';
 
+import AuthProvider from '@/app/AuthProvider';
 import { useArchiveStore } from '@/features';
 import { usePageLifecycle } from '@/shared/hook';
 
@@ -26,14 +27,14 @@ export const Layout = () => {
   });
 
   return (
-    <>
+    <AuthProvider>
       <Header />
       <main className={cn({ [styles.noPadding]: isNoPadHeader })}>
         <Outlet />
         <ChattingBtn />
       </main>
       <Footer />
-    </>
+    </AuthProvider>
   );
 };
 
diff --git a/src/widgets/Layout/ui/Header/Header.tsx b/src/widgets/Layout/ui/Header/Header.tsx
index f3647f9..861276d 100644
--- a/src/widgets/Layout/ui/Header/Header.tsx
+++ b/src/widgets/Layout/ui/Header/Header.tsx
@@ -4,25 +4,46 @@ import cn from 'classnames';
 import React from 'react';
 import { useState, useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useShallow } from 'zustand/shallow';
 
 import styles from './Header.module.scss';
 import { NAV_LINKS } from '../../constants';
 
 //assets
+import { logout } from '@/features/auth/auth.api';
+import { useUserStore } from '@/features/user/model/user.store';
 import Logo from '@/shared/assets/paletteLogo.svg?react';
 //model
 import { useModalStore } from '@/shared/model/modalStore';
 //component
-import { Button } from '@/shared/ui';
+
+import { Button, customConfirm } from '@/shared/ui';
 import { MenuModal } from '@/widgets/MenuModal/MenuModal';
 
 export const Header = () => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const open = useModalStore(state => state.actions.open);
+  const { userData, actions } = useUserStore(
+    useShallow(state => ({
+      userData: state.userData,
+      actions: state.actions,
+    })),
+  );
   const [isMobile, setIsMobile] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
 
+  const logoutHandler = async () => {
+    await logout();
+    actions.setUserData(null);
+    await customConfirm({
+      title: '로그아웃',
+      text: '로그아웃 되었습니다.',
+      icon: 'info',
+      showCancelButton: false,
+    });
+  };
+
   useEffect(() => {
     const handleResize = () => {
       setIsMobile(window.innerWidth <= 1000);
@@ -86,13 +107,23 @@ export const Header = () => {
                 navigate('/like');
               }}
             />
-            <Button
-              onClick={() => {
-                open('login');
-              }}
-            >
-              로그인
-            </Button>
+        {userData ? (
+          <Button
+            onClick={() => {
+              void logoutHandler();
+            }}
+          >
+            로그아웃
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              open('login');
+            }}
+          >
+            로그인
+          </Button>
+        )}
           </div>{' '}
         </>
       )}