Inyoung

.env

@@ -0,0 +1,2 @@
+REACT_APP_API_KEY = "19cbd4a9516336ec395bf29864a8c5dc";
+REDIRECT_URI = "http://localhost:3000/auth";

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",

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>
     </>

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;

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
+export default Login;

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
+export default Main;

src/pages/Mypage.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Mypage() {
+  return (
+    <div>Mypage</div>
+  )
+}
+
+export default Mypage;

src/pages/Search.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Search() {
+  return (
+    <div>Search</div>
+  )
+}
+
+export default Search

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;

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`;