diff --git a/src/apis/auth/.keep b/src/apis/auth/.keep
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/apis/auth/usePostKakaoLogin.ts b/src/apis/auth/usePostKakaoLogin.ts
new file mode 100644
index 00000000..d7fe42fe
--- /dev/null
+++ b/src/apis/auth/usePostKakaoLogin.ts
@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { AxiosResponse } from 'axios';
+
+import { post } from '@apis/instance';
+
+import { END_POINT, queryKey } from '@constants';
+import { useEasyNavigate } from '@hooks';
+
+import { ApiResponseType, LoginSuccessResponse } from '@types';
+
+const postKakaoLogin = async (
+  authCode: string
+): Promise<AxiosResponse<ApiResponseType<LoginSuccessResponse>>> => {
+  const response = await post<ApiResponseType<LoginSuccessResponse>>(
+    END_POINT.KAKAO_LOGIN,
+    {
+      socialType: 'KAKAO',
+      redirectUri: import.meta.env.VITE_REDIRECT_URI,
+    },
+    {
+      headers: {
+        Authorization: authCode,
+      },
+    }
+  );
+
+  return response;
+};
+
+export const usePostKakaoLogin = () => {
+  const queryClient = useQueryClient();
+  const { goHomePage } = useEasyNavigate();
+
+  return useMutation({
+    mutationFn: (authCode: string) => postKakaoLogin(authCode),
+    onSuccess: (response) => {
+      const resData = response.data.data;
+      if (resData) {
+        const { userId, userName } = resData;
+        const user = { userId, userName };
+        localStorage.setItem('user', JSON.stringify(user));
+
+        queryClient.invalidateQueries({ queryKey: [queryKey.KAKAO_LOGIN] });
+        goHomePage();
+      }
+    },
+    onError: (error) => {
+      console.log(error);
+    },
+  });
+};
diff --git a/src/apis/instance.ts b/src/apis/instance.ts
index 8168c7e6..a1e6216f 100644
--- a/src/apis/instance.ts
+++ b/src/apis/instance.ts
@@ -6,10 +6,6 @@ export const instance = axios.create({
   baseURL: BASE_URL,
 
   withCredentials: false,
-
-  // headers: {
-  //   // Authorization: `Bearer 엑세스 토큰`,
-  // }, 서버에서 set-cookie로 줘서 만약 필요 없으면 지울 예정
 });
 
 export function get<T>(...args: Parameters<typeof instance.get>) {
diff --git a/src/components/common/SocialLoginButton/SocialLoginButton.tsx b/src/components/common/SocialLoginButton/SocialLoginButton.tsx
index ae539a07..e520b86d 100644
--- a/src/components/common/SocialLoginButton/SocialLoginButton.tsx
+++ b/src/components/common/SocialLoginButton/SocialLoginButton.tsx
@@ -13,12 +13,17 @@ const platformIcon = {
   kakao: <IcKakao />,
 };
 
-const SocialLoginButton = ({ platform, children }: SocialLoginButtonProps) => {
+const SocialLoginButton = ({
+  platform,
+  children,
+  onClick,
+}: SocialLoginButtonProps) => {
   return (
     <button
       className={buttonStyle({
         platform,
       })}
+      onClick={onClick}
     >
       <span className={iconStyle}>{platformIcon[platform]}</span>
       {children}
diff --git a/src/constants/apis/api.ts b/src/constants/apis/api.ts
index 86cb1021..f29f441a 100644
--- a/src/constants/apis/api.ts
+++ b/src/constants/apis/api.ts
@@ -2,4 +2,5 @@ export const BASE_URL = import.meta.env.VITE_APP_BASE_URL;
 
 export const END_POINT = {
   FETCH_STORE_RANK: '/api/v1/store/rank',
+  KAKAO_LOGIN: '/api/v1/user/login',
 } as const;
diff --git a/src/constants/apis/queryKey.ts b/src/constants/apis/queryKey.ts
index 9d57edc4..ed698a3b 100644
--- a/src/constants/apis/queryKey.ts
+++ b/src/constants/apis/queryKey.ts
@@ -1,3 +1,4 @@
 export const queryKey = {
   STORE_RANK: 'storeRank',
+  KAKAO_LOGIN: 'kakaoLogin',
 } as const;
diff --git a/src/main.tsx b/src/main.tsx
index c6492961..c9fbcde9 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,6 @@
-import { StrictMode } from 'react';
+// import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import App from './App.tsx';
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+createRoot(document.getElementById('root')!).render(<App />);
diff --git a/src/pages/auth/page/LoginPage/LoginPage.tsx b/src/pages/auth/page/LoginPage/LoginPage.tsx
index 5d7506d9..72f6d456 100644
--- a/src/pages/auth/page/LoginPage/LoginPage.tsx
+++ b/src/pages/auth/page/LoginPage/LoginPage.tsx
@@ -1,6 +1,9 @@
+import { useEffect } from 'react';
+
 import { SocialLoginButton } from '@components';
 import { LoginPageImage } from '@constants';
 import { useEasyNavigate } from '@hooks';
+import { isLoggedIn } from '@utils';
 
 import { ImgLogo } from '@svgs';
 
@@ -16,6 +19,19 @@ import {
 
 const LoginPage = () => {
   const { goHomePage } = useEasyNavigate();
+  const kakaoLoginUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${
+    import.meta.env.VITE_REST_API_KEY
+  }&redirect_uri=${import.meta.env.VITE_REDIRECT_URI}&response_type=code`;
+
+  const handleLoginClick = () => {
+    window.location.replace(kakaoLoginUrl);
+  };
+
+  useEffect(() => {
+    if (isLoggedIn()) {
+      goHomePage();
+    }
+  }, [goHomePage]);
   return (
     <div className={loginPageStlye}>
       <div className={titleWrapper}>
@@ -28,12 +44,10 @@ const LoginPage = () => {
       <div className={imageButtonContainer}>
         <img src={LoginPageImage} className={loginMainImage} />
         <div className={loginButtonWrapper}>
-          <SocialLoginButton platform="kakao">
+          <SocialLoginButton platform="kakao" onClick={handleLoginClick}>
             카카오로 시작하기
           </SocialLoginButton>
-          <u className={noLoginButton} onClick={goHomePage}>
-            로그인 없이 둘러보기
-          </u>
+          <u className={noLoginButton}>로그인 없이 둘러보기</u>
         </div>
       </div>
     </div>
diff --git a/src/pages/auth/page/Redirection/Redirection.tsx b/src/pages/auth/page/Redirection/Redirection.tsx
new file mode 100644
index 00000000..27c8f0fa
--- /dev/null
+++ b/src/pages/auth/page/Redirection/Redirection.tsx
@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+import { usePostKakaoLogin } from '@apis/auth/usePostKakaoLogin';
+
+const Redirection = () => {
+  const code: string =
+    new URL(window.location.href).searchParams.get('code') || '';
+  window.history.forward();
+  const { mutate } = usePostKakaoLogin();
+
+  useEffect(() => {
+    if (code) mutate(code);
+  }, [code, mutate]);
+
+  return <div></div>;
+};
+
+export default Redirection;
diff --git a/src/pages/auth/page/index.ts b/src/pages/auth/page/index.ts
index 9218f90d..dae7210a 100644
--- a/src/pages/auth/page/index.ts
+++ b/src/pages/auth/page/index.ts
@@ -1,2 +1,4 @@
 import LoginPage from './LoginPage/LoginPage';
-export { LoginPage };
+import Redirection from './Redirection/Redirection';
+
+export { LoginPage, Redirection };
diff --git a/src/routes/authRoutes.tsx b/src/routes/authRoutes.tsx
index ee04740d..cd821ec8 100644
--- a/src/routes/authRoutes.tsx
+++ b/src/routes/authRoutes.tsx
@@ -1,15 +1,18 @@
-import { LoginPage } from '@pages/auth/page';
+import { LoginPage, Redirection } from '@pages/auth/page';
 
 import routePath from './routePath';
 
 import { RouteType } from '@types';
 
-
 const authRoutes: RouteType[] = [
   {
     path: routePath.LOGINPAGE,
     element: <LoginPage />,
   },
+  {
+    path: routePath.KAKAO_REDIRECTION,
+    element: <Redirection />,
+  },
 ];
 
 export default authRoutes;
diff --git a/src/routes/routePath.ts b/src/routes/routePath.ts
index 35f48425..b93e0e9b 100644
--- a/src/routes/routePath.ts
+++ b/src/routes/routePath.ts
@@ -1,5 +1,6 @@
 const authPages = {
   LOGINPAGE: '/login',
+  KAKAO_REDIRECTION: '/kakao/redirection',
 };
 
 const homePages = {
@@ -12,7 +13,7 @@ const designListPages = {
 
 const myPages = {
   MYPAGE: '/mypage',
-  LIKELISTPAGE: '/mypage/like-list'
+  LIKELISTPAGE: '/mypage/like-list',
 };
 
 const storePages = {
diff --git a/src/types/apis/auth/index.ts b/src/types/apis/auth/index.ts
index e69de29b..fa3d67ea 100644
--- a/src/types/apis/auth/index.ts
+++ b/src/types/apis/auth/index.ts
@@ -0,0 +1,4 @@
+export interface LoginSuccessResponse {
+  userId: number;
+  userName: string;
+}
diff --git a/src/types/apis/commonType.ts b/src/types/apis/commonType.ts
index a27a0d51..caa54a5a 100644
--- a/src/types/apis/commonType.ts
+++ b/src/types/apis/commonType.ts
@@ -1,3 +1,5 @@
+// 공통으로 사용되는 타입들을 정의합니다.
+
 export interface ApiResponseType<T> {
   code: number;
   message: string;
diff --git a/src/types/index.ts b/src/types/index.ts
index d4b2e802..0d907916 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -2,7 +2,6 @@ export * from './routeType';
 export * from './toastType';
 export * from './orderFormType';
 export * from './types';
-
 export * from './apis/commonType';
 export * from './apis/auth/index';
 export * from './apis/designList/index';
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
new file mode 100644
index 00000000..96fd3a16
--- /dev/null
+++ b/src/utils/auth.ts
@@ -0,0 +1,7 @@
+export const getToken = () => {
+  return localStorage.getItem('user');
+};
+
+export const isLoggedIn = () => {
+  return Boolean(getToken());
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 35ec84dd..80801484 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './getMarkerIcon';
-export * from './formatHours';
\ No newline at end of file
+export * from './formatHours';
+export * from './auth';