From e1dd26a7e42d1747a337dc645a06012ad2926a99 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Fri, 25 Aug 2023 20:17:26 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=EC=9D=B8=EC=98=81=20=EB=B8=8C=EB=9E=9C?=
 =?UTF-8?q?=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js    | 2 ++
 src/styles.js | 8 ++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 src/styles.js

diff --git a/src/App.js b/src/App.js
index 600b328..fe74c27 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,9 +4,11 @@ import ShowPost from "./pages/ShowPost";
 import WritePost from "./pages/WritePost";
 import Login from "./pages/Login";
 import Nav from "./components/Nav";
+import GlobalStyles from "./styles";
 function App() {
   return (
     <>
+      <GlobalStyles />
       <Nav />
       <BrowserRouter>
         <Routes>
diff --git a/src/styles.js b/src/styles.js
new file mode 100644
index 0000000..a552371
--- /dev/null
+++ b/src/styles.js
@@ -0,0 +1,8 @@
+import { createGlobalStyle } from "styled-components";
+import reset from "styled-reset";
+
+const GlobalStyles = createGlobalStyle`
+ ${reset}
+`;
+
+export default GlobalStyles;

From d2f20ad55cc837e0f57b5363d9d552ba0d47cfd5 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Fri, 25 Aug 2023 20:20:48 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC?=
 =?UTF-8?q?=EB=A6=AC=20=EB=8B=A4=EC=9A=B4=EB=A1=9C=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json   | 6 ++++++
 package.json        | 1 +
 src/App.js          | 3 +++
 src/pages/Mypage.js | 9 +++++++++
 src/pages/Search.js | 9 +++++++++
 5 files changed, 28 insertions(+)
 create mode 100644 src/pages/Mypage.js
 create mode 100644 src/pages/Search.js

diff --git a/package-lock.json b/package-lock.json
index 9f9a545..643ef24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.4.0",
+        "fontawesome": "^5.6.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.15.0",
@@ -8498,6 +8499,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",
diff --git a/package.json b/package.json
index b58be55..4f347c2 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
+    "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 fe74c27..89a994f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import WritePost from "./pages/WritePost";
 import Login from "./pages/Login";
 import Nav from "./components/Nav";
 import GlobalStyles from "./styles";
+import Mypage from "./pages/Mypage";
 function App() {
   return (
     <>
@@ -16,6 +17,8 @@ function App() {
           <Route path="/Write" element={<WritePost></WritePost>}></Route>
           <Route path="/post/:postID" element={<ShowPost></ShowPost>}></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/Mypage.js b/src/pages/Mypage.js
new file mode 100644
index 0000000..ceea344
--- /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

From cfd318d7513cbeffb76d5061c21e3acda588b064 Mon Sep 17 00:00:00 2001
From: inyoung <rmdnps10@gmail.com>
Date: Sat, 26 Aug 2023 00:02:00 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20..?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                |  2 ++
 package-lock.json   | 20 +++++++++++++----
 package.json        |  1 +
 src/App.js          |  5 ++++-
 src/pages/Auth.js   | 41 ++++++++++++++++++++++++++++++++++
 src/pages/Login.js  | 54 +++++++++++++++++++++++++++++++++++++++++----
 src/pages/Main.js   | 11 ++++-----
 src/pages/Mypage.js |  2 +-
 src/styles.js       |  4 ++++
 src/utils/Oauth.js  |  4 ++++
 10 files changed, 129 insertions(+), 15 deletions(-)
 create mode 100644 .env
 create mode 100644 src/pages/Auth.js
 create mode 100644 src/utils/Oauth.js

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 643ef24..b833e43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@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",
@@ -7170,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": {
@@ -14941,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 4f347c2..69dddcd 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@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",
diff --git a/src/App.js b/src/App.js
index 89a994f..0672e89 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,8 @@ 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 (
     <>
@@ -16,7 +18,8 @@ function App() {
           <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>
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
index ceea344..8082662 100644
--- a/src/pages/Mypage.js
+++ b/src/pages/Mypage.js
@@ -6,4 +6,4 @@ function Mypage() {
   )
 }
 
-export default Mypage
\ No newline at end of file
+export default Mypage;
\ No newline at end of file
diff --git a/src/styles.js b/src/styles.js
index a552371..7bf2db0 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -3,6 +3,10 @@ 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`;