Feature/로그인

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.2.1",
     "axios": "^1.4.0",
     "react": "^18.2.0",
+    "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.14.1",

src/App.js

@@ -1,19 +1,44 @@
-import { Route, Routes } from 'react-router';
-import GlobalStyle from './styles/globalStyle';
-import Landing from './pages/Landing';
-import SignIn from './pages/SignIn';
+import { Route, Routes } from "react-router";
+import GlobalStyle from "./styles/globalStyle";
+import Landing from "./pages/Landing";
+import SignIn from "./pages/SignIn";
+import SignUp from "./pages/SignUp";
+import Profile from "./pages/Profile";
+import UpdateProfile from "./pages/UpdateProfile";
+import GoogleRedirect from "./components/GoogleRedirect";
 
 const App = () => {
   return (
     <>
       <GlobalStyle />
       <Routes>
-        <Route path="/" element={<Landing />} />
-        <Route path="/signin" element={<SignIn />} />
+        <Route
+          path="/"
+          element={<Landing />}
+        />
+        <Route
+          path="/signin"
+          element={<SignIn />}
+        />
+        <Route
+          path="/code"
+          element={<GoogleRedirect />}
+        />
+        <Route
+          path="/signup"
+          element={<SignUp />}
+        />
+        <Route
+          path="/profile"
+          element={<Profile />}
+        />
+        <Route
+          path="/profile/update"
+          element={<UpdateProfile />}
+        />
       </Routes>
     </>
-
   );
-}
+};
 
 export default App;

src/components/GoogleRedirect.js

@@ -0,0 +1,41 @@
+import React from "react";
+import Spinner from "../assets/Spinner.gif";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useCookies } from "react-cookie";
+import styled from "styled-components";
+import { redirectToGoogle } from "../utils/axios";
+
+function GoogleRedirect() {
+  const [cookies, setCookie] = useCookies();
+  const navigate = useNavigate();
+  const code = new URL(window.location.href).searchParams.get("code");
+
+  useEffect(() => {
+    redirectToGoogle(code, navigate, setCookie);
+  }, []);
+
+  return (
+    <Container>
+      <SpinnerImg
+        src={Spinner} // 로딩될 때 보여지는 화면 (스피너)
+        alt="loading"
+      />
+    </Container>
+  );
+}
+
+export default React.memo(GoogleRedirect);
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+`;
+
+const SpinnerImg = styled.img`
+  height: 150px;
+  width: 150px;
+`;

src/index.js

@@ -1,13 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import { BrowserRouter } from 'react-router-dom';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { BrowserRouter } from "react-router-dom";
+import { CookiesProvider } from "react-cookie";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <React.StrictMode>
+  <CookiesProvider>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </React.StrictMode>
-);
+  </CookiesProvider>
+);

src/pages/Landing.js

@@ -1,11 +1,12 @@
-import React from 'react'
+import React from "react";
 
 const Landing = () => {
   return (
-    <div>LandingPage
-          <h1>Landing</h1>
+    <div>
+      LandingPage
+      <h1>Landing</h1>
     </div>
-  )
-}
+  );
+};
 
-export default Landing
+export default Landing;

src/pages/Profile.js

@@ -0,0 +1,74 @@
+import { useEffect, useState } from "react";
+import { useCookies } from "react-cookie";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import { getProfileInfo, logOut } from "../utils/axios";
+
+const Profile = () => {
+  const navigate = useNavigate();
+  const [cookies] = useCookies();
+  const token = cookies["jwt-token"];
+  const [userInfo, setUserInfo] = useState({
+    profileImg: "",
+    email: "",
+    nickname: "",
+    phoneNum: "",
+    stuId: "",
+    name: "",
+  });
+
+  // 초기 설정 (Mount시점에 API 호출)
+  useEffect(() => {
+    getProfileInfo(token, setUserInfo);
+  }, []);
+
+  const navigateToUpdate = () => {
+    navigate("update", {
+      state: {
+        profileImg: userInfo.profileImg,
+        name: userInfo.name,
+        email: userInfo.email,
+        nickname: userInfo.nickname,
+        phoneNum: userInfo.phoneNum,
+        stuId: userInfo.stuId,
+      },
+    });
+  };
+
+  return (
+    <Container>
+      <div>
+        <ProfileImgView src={userInfo.profileImg} />
+      </div>
+      <div>{userInfo.email}</div>
+      <div>{userInfo.nickname}</div>
+      <div>{userInfo.phoneNum}</div>
+      <div>{userInfo.stuId}</div>
+      <div>
+        <button onClick={navigateToUpdate}>Edit</button>
+        <button onClick={() => logOut(token, navigate)}>Log Out</button>
+      </div>
+    </Container>
+  );
+};
+
+export default Profile;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 20px;
+  width: 100vw;
+  height: 100vh;
+`;
+
+const ProfileImgView = styled.img`
+  width: 330px;
+  height: 330px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  box-shadow: 0px 6px 12px -6px #666;
+`;

src/pages/SignIn.js

@@ -1,9 +1,95 @@
-import React from 'react'
+import React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
 
 const SignIn = () => {
+  const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;
   return (
-    <div>SignIn</div>
-  )
-}
+    <Container>
+      <LogInBox>
+        <GoogleText> Google SIGN-IN </GoogleText>
+        <Link
+          to={`https://accounts.google.com/o/oauth2/v2/auth?scope=openid https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile&access_type=offline&include_granted_scope=true&response_type=code&state=state_parameter_passthrough_value&redirect_uri=http://localhost:8080/code&client_id=${CLIENT_ID}`}
+        >
+          <GoogleBtn>Continue with Google</GoogleBtn>
+        </Link>
+      </LogInBox>
+    </Container>
+  );
+};
 
-export default SignIn
+export default SignIn;
+
+const Container = styled.div`
+  background: rgb(248, 248, 248);
+  padding: 0;
+  margin: 0;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const LogInBox = styled.div`
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  width: 480px;
+  margin: 0 auto;
+  text-align: center;
+  letter-spacing: 1px;
+  position: relative;
+
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+`;
+
+const GoogleText = styled.h2`
+  margin: 20px 0 20px;
+  font-size: 27px;
+  padding: 0;
+  text-transform: uppercase;
+  color: #4688f1;
+`;
+
+const GoogleBtn = styled.button`
+  background-position: 25px 0px;
+  box-sizing: border-box;
+  color: rgb(220, 74, 61);
+  font-size: 16px;
+  cursor: pointer;
+  display: inline-block;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  vertical-align: middle;
+  width: 100%;
+  border-radius: 3px;
+  margin: 10px auto;
+  outline: rgb(255, 255, 255) none 0px;
+  transition: all 0.2s cubic-bezier(0.72, 0.01, 0.56, 1) 0s;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+
+  background: rgb(255, 255, 255)
+    url("https://raw.githubusercontent.com/eswarasai/social-login/master/img/google-plus.png")
+    no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
+  border: 1px solid rgb(220, 74, 61);
+
+  &:hover {
+    border-color: rgb(220, 74, 61);
+    background: rgb(220, 74, 61)
+      url("https://raw.githubusercontent.com/eswarasai/social-login/master/img/google-plus-white.png")
+      no-repeat scroll 5px 0px / 50px 50px padding-box border-box;
+    -webkit-transition: all 0.8s ease-out;
+    -moz-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    transition: all 0.3s ease-out;
+    color: rgb(255, 255, 255);
+  }
+`;