diff --git a/.env b/.env
new file mode 100644
index 0000000..f70ae09
--- /dev/null
+++ b/.env
@@ -0,0 +1,2 @@
+REACT_APP_API_KEY = "19cbd4a9516336ec395bf29864a8c5dc";
+REDIRECT_URI = "http://localhost:3000/auth";
diff --git a/package-lock.json b/package-lock.json
index 9f9a545..b833e43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.4.0",
+        "dotenv": "^16.3.1",
+        "fontawesome": "^5.6.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.15.0",
@@ -7169,11 +7171,14 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "version": "16.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
       }
     },
     "node_modules/dotenv-expand": {
@@ -8498,6 +8503,11 @@
         }
       }
     },
+    "node_modules/fontawesome": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/fontawesome/-/fontawesome-5.6.3.tgz",
+      "integrity": "sha512-FCc+CawwsJWWprVEg9X14yI7zI+l9YVAyhzgu70qwGeDn0tLLDH/dVfqgij72g4BBGgLGfK2qnvFGAmYUkhaWg=="
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -14935,6 +14945,14 @@
         }
       }
     },
+    "node_modules/react-scripts/node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index b58be55..69dddcd 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
+    "dotenv": "^16.3.1",
+    "fontawesome": "^5.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",
diff --git a/src/App.js b/src/App.js
index 600b328..0672e89 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,16 +4,24 @@ import ShowPost from "./pages/ShowPost";
 import WritePost from "./pages/WritePost";
 import Login from "./pages/Login";
 import Nav from "./components/Nav";
+import GlobalStyles from "./styles";
+import Mypage from "./pages/Mypage";
+import Search from "./pages/Search";
+import Auth from "./pages/Auth";
 function App() {
   return (
     <>
+      <GlobalStyles />
       <Nav />
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Main></Main>}></Route>
           <Route path="/Write" element={<WritePost></WritePost>}></Route>
           <Route path="/post/:postID" element={<ShowPost></ShowPost>}></Route>
-          <Route path="/Login" element={<Login></Login>}></Route>
+          <Route path="/auth" element={<Auth></Auth>}></Route>
+          <Route path="/login" element={<Login></Login>}></Route>
+          <Route path="/search" element={<Search></Search>}></Route>
+          <Route path="/MyPage" element={<Mypage></Mypage>}></Route>
         </Routes>
       </BrowserRouter>
     </>
diff --git a/src/pages/Auth.js b/src/pages/Auth.js
new file mode 100644
index 0000000..cf9ef1a
--- /dev/null
+++ b/src/pages/Auth.js
@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import { KAKAO_TOKEN_URI, REDIRECT_URI } from "../utils/Oauth";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const Auth = () => {
+  const navigate = useNavigate();
+  const getToken = async (code) => {
+    const data = {
+      grant_type: "authorization_code",
+      client_id: process.env.REACT_APP_API_KEY,
+      redirect_uri: REDIRECT_URI,
+      code,
+    };
+
+    const headers = {
+      "Content-type": "application/x-www-form-urlencoded",
+    };
+
+    const res = await axios.post(KAKAO_TOKEN_URI, data, { headers });
+
+    return res;
+  };
+
+  useEffect(() => {
+    const code = new URL(window.location.href).searchParams.get("code");
+    console.log(code);
+    getToken(code)
+      .then((res) => {
+        if (res) {
+          localStorage.setItem("token", JSON.stringify(res.data.access_token));
+          navigate("/login");
+        }
+      })
+      .catch((err) => console.log(err));
+  }, []);
+
+  return <div></div>;
+};
+
+export default Auth;
diff --git a/src/pages/Login.js b/src/pages/Login.js
index a214888..5cff219 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,9 +1,55 @@
-import React from 'react'
+import React from "react";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { KAKAO_USER_URI } from "../utils/Oauth";
 
 function Login() {
+  const Redirect = "http://localhost:3000/auth";
+  const [isLogin, setIsLogin] = useState(false);
+
+  const [user, setUser] = useState({ nickname: undefined, image: undefined });
+  const REACT_APP_API_KEY = "0359e71d1e648b5199a68866b3ccaa32";
+  const KaKao = `https://kauth.kakao.com/oauth/authorize?client_id=${REACT_APP_API_KEY}&redirect_uri=${Redirect}&response_type=code`;
+  const getUserData = async (token) => {
+    const headers = {
+      "Content-type": "application/x-www-form-urlencoded",
+      Authorization: `Bearer ${token}`,
+    };
+    const data = await axios.get(KAKAO_USER_URI, { headers });
+
+    return data;
+  };
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    console.log(token);
+    if (token) {
+      getUserData(token)
+        .then((res) => {
+          setUser({
+            nickname: res.data.properties.nickname,
+            image: res.data.properties.profile_image,
+          });
+          console.log(user);
+          setIsLogin(true);
+        })
+        .catch((err) => {
+          console.error(err);
+          localStorage.removeItem("token");
+        });
+    }
+  }, []);
   return (
-    <div>Login</div>
-  )
+    <div>
+      {isLogin ? (
+        <div>user.nickname</div>
+      ) : (
+        <a href={KaKao} style={{ color: "red" }}>
+          hello
+        </a>
+      )}
+    </div>
+  );
 }
 
-export default Login
\ No newline at end of file
+export default Login;
diff --git a/src/pages/Main.js b/src/pages/Main.js
index 39364f5..a09e825 100644
--- a/src/pages/Main.js
+++ b/src/pages/Main.js
@@ -1,9 +1,10 @@
-import React from 'react'
+import React from "react";
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { KAKAO_USER_URI } from "../utils/Oauth";
 
 function Main() {
-  return (
-    <div>Main</div>
-  )
+  return <div>main</div>;
 }
 
-export default Main
\ No newline at end of file
+export default Main;
diff --git a/src/pages/Mypage.js b/src/pages/Mypage.js
new file mode 100644
index 0000000..8082662
--- /dev/null
+++ b/src/pages/Mypage.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Mypage() {
+  return (
+    <div>Mypage</div>
+  )
+}
+
+export default Mypage;
\ No newline at end of file
diff --git a/src/pages/Search.js b/src/pages/Search.js
new file mode 100644
index 0000000..336147e
--- /dev/null
+++ b/src/pages/Search.js
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Search() {
+  return (
+    <div>Search</div>
+  )
+}
+
+export default Search
\ No newline at end of file
diff --git a/src/styles.js b/src/styles.js
new file mode 100644
index 0000000..7bf2db0
--- /dev/null
+++ b/src/styles.js
@@ -0,0 +1,12 @@
+import { createGlobalStyle } from "styled-components";
+import reset from "styled-reset";
+
+const GlobalStyles = createGlobalStyle`
+ ${reset}
+ a{
+    text-decoration: none;
+    color: white;
+  }
+`;
+
+export default GlobalStyles;
diff --git a/src/utils/Oauth.js b/src/utils/Oauth.js
new file mode 100644
index 0000000..b904cee
--- /dev/null
+++ b/src/utils/Oauth.js
@@ -0,0 +1,4 @@
+export const REDIRECT_URI = "http://localhost:3000/";
+export const KAKAO_TOKEN_URI = "https://kauth.kakao.com/oauth/token";
+export const KAKAO_USER_URI = "https://kapi.kakao.com/v2/user/me";
+export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;