update staging branch

package.json

@@ -24,7 +24,6 @@
     "env-cmd": "^10.1.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-cookie": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-query": "^3.39.3",
@@ -39,7 +38,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "HTTPS=true react-scripts start",
     "start:dev": "env-cmd -f .env.development.local react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -75,6 +74,7 @@
     "prettier": "3.0.1"
   },
   "resolutions": {
-    "nth-check": "^2.1.1"
+    "nth-check": "^2.1.1",
+    "postcss": "^8.4.31"
   }
 }

src/components/main/Welcome.js

@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
 import { Button } from "@mui/material";
 import propTypes from "prop-types";
 import { useRecoilValue } from "recoil";
-import { token } from "../../recoil/authorize";
+import { isLogin } from "../../recoil/authorize";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { COLOR } from "../../styles/color.js";
@@ -14,7 +14,7 @@ const handleLogin = () => {
   window.location.href = githubURL;
 };
 export const Welcome = (ref) => {
-  const accessToken = useRecoilValue(token);
+  const Logined = useRecoilValue(isLogin);
   const navigate = new useNavigate();
   return (
     <StWelcome>
@@ -31,7 +31,7 @@ export const Welcome = (ref) => {
         >
           learn more
         </LearnmoreBtn>
-        {accessToken ? (
+        {Logined === true ? (
           <LoginBtn variant="contained" onClick={() => navigate("/step1")}>
             get started
           </LoginBtn>
@@ -57,7 +57,11 @@ const StWelcome = styled.div`
   text-align: center;
   justify-content: center;
   height: 80vh;
-  background: linear-gradient(to bottom, ${COLOR.MAIN_HOVER}, ${COLOR.MAIN_BACKGROUND});
+  background: linear-gradient(
+    to bottom,
+    ${COLOR.MAIN_HOVER},
+    ${COLOR.MAIN_BACKGROUND}
+  );
 `;
 
 export const Title = styled.h1`

src/index.js

@@ -2,7 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
-import { CookiesProvider } from "react-cookie";
 import reportWebVitals from "./reportWebVitals";
 import { RecoilRoot, RecoilEnv } from "recoil";
 

src/layout/Header.js

@@ -18,7 +18,7 @@ import MenuIcon from "@mui/icons-material/Menu";
 import LOGO from "../../src/assets/images/Logo.svg";
 import axios from "axios";
 import { useRecoilState, useSetRecoilState } from "recoil";
-import { avatar, id, name, token } from "../recoil/authorize";
+import { avatar, id, name, isLogin } from "../recoil/authorize";
 import styled from "styled-components";
 const ElevationScroll = (props) => {
   const { children, window } = props;
@@ -48,7 +48,7 @@ export const Header = (props) => {
   const [src, setSrc] = useRecoilState(avatar);
   const [userId, setUserId] = useRecoilState(id);
   const [userName, setUserName] = useRecoilState(name);
-  const setToken = useSetRecoilState(token);
+  const setIsLogin = useSetRecoilState(isLogin);
   React.useEffect(() => {
     setSrc(localStorage.avatar);
     setUserId(localStorage.id);
@@ -76,7 +76,7 @@ export const Header = (props) => {
       "",
       { withCredentials: true },
     );
-    setToken("");
+    setIsLogin(false);
     localStorage.setItem("id", "guest");
     localStorage.setItem("name", "guest");
     localStorage.setItem("avatar", "");

src/pages/Login.js

@@ -4,8 +4,7 @@ import { Title } from "../components/main/Welcome";
 import { useNavigate } from "react-router-dom";
 import { useEffect } from "react";
 import { useSetRecoilState } from "recoil";
-import { avatar, id, name, token } from "../recoil/authorize";
-import { Cookies } from "react-cookie";
+import { avatar, id, isLogin, name } from "../recoil/authorize";
 import propTypes from "prop-types";
 
 let cnt = 0;
@@ -16,8 +15,7 @@ function LoginPage() {
   const setAvatar = useSetRecoilState(avatar);
   const navigate = useNavigate();
 
-  const cookies = new Cookies();
-  const setToken = useSetRecoilState(token);
+  const setIsLogin = useSetRecoilState(isLogin);
 
   const login = async () => {
     if (!cnt++) {
@@ -58,15 +56,13 @@ function LoginPage() {
     );
     if (200 > res.status || res.status >= 300) {
       alert("login failed");
+      setIsLogin(false);
     } else {
-      const accessToken = cookies.get("Authentication");
-      setToken(accessToken);
+      setIsLogin(true);
     }
   };
 
   useEffect(() => {
-    const accessToken = cookies.get("Authentication");
-    setToken(accessToken);
     login();
     navigate("/");
   }, []);

src/pages/MainPage.js

@@ -3,20 +3,33 @@ import Footer from "../components/main/Footer";
 import Steps from "../components/main/Steps";
 import propTypes from "prop-types";
 import { Header } from "../layout/Header";
-import { Cookies } from "react-cookie";
 import { useEffect } from "react";
 import { useSetRecoilState } from "recoil";
-import { token } from "../recoil/authorize";
+import { isLogin } from "../recoil/authorize";
+import axios from "axios";
+
+async function checkTokenValid() {
+  const isTokenValid = await axios.get(
+    `${process.env.REACT_APP_SERVER_URL}/auth/checkToken`,
+    {
+      validateStatus: (status) => {
+        return status < 500;
+      },
+      withCredentials: true,
+    },
+  );
+  return isTokenValid.status < 400;
+}
+
 function MainPage() {
-  const cookies = new Cookies();
-  const setAccessToken = useSetRecoilState(token);
+  const setIsLogin = useSetRecoilState(isLogin);
+
+  const checkIsLogin = async () => {
+    setIsLogin(await checkTokenValid());
+  };
+
   useEffect(() => {
-    const accessToken = cookies.get("Authentication");
-    if (accessToken) {
-      setAccessToken(accessToken);
-    } else {
-      setAccessToken(null);
-    }
+    checkIsLogin();
   }, []);
   return (
     <>

src/recoil/authorize.js

@@ -1,8 +1,8 @@
 import { atom } from "recoil";
 
-export const token = atom({
-  key: "token",
-  default: null,
+export const isLogin = atom({
+  key: "isLogin",
+  default: false,
 });
 
 export const avatar = atom({

yarn.lock

@@ -2286,11 +2286,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/cookie@^0.5.1":
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.5.2.tgz#9bf9d62c838c85a07c92fdf2334c2c14fd9c59a9"
-  integrity sha512-DBpRoJGKJZn7RY92dPrgoMew8xCWc2P71beqsjyhEI/Ds9mOyVmBwtekyfhpwFIVt1WrxTonFifiOZ62V8CnNA==
-
 "@types/debug@^4.0.0":
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
@@ -2358,14 +2353,6 @@
   dependencies:
     "@types/unist" "^2"
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -3880,7 +3867,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
-[email protected], cookie@^0.5.0:
+[email protected]:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
   integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
@@ -5689,7 +5676,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -8134,11 +8121,6 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-picocolors@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
-  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
-
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -8713,18 +8695,10 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^7.0.35:
-  version "7.0.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
-  dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
-
-postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.4:
-  version "8.4.29"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
-  integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
+postcss@^7.0.35, postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.31, postcss@^8.4.4:
+  version "8.4.31"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
@@ -8892,15 +8866,6 @@ react-app-polyfill@^3.0.0:
     regenerator-runtime "^0.13.9"
     whatwg-fetch "^3.6.2"
 
-react-cookie@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-cookie/-/react-cookie-6.1.0.tgz#1561b822d27e21ded17d1a24f9fd5257804a3ffb"
-  integrity sha512-j/q0kf4f8kK7zXyTdGEebtZ3IKhVCPZVL3pf6y9/KlfFThxRjb+xvgdKAvRB2VrdkXyu9Qbrb/VuiFUNK6/3+g==
-  dependencies:
-    "@types/hoist-non-react-statics" "^3.3.1"
-    hoist-non-react-statics "^3.3.2"
-    universal-cookie "^6.0.0"
-
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -10635,14 +10600,6 @@ unist-util-visit@^4.0.0, unist-util-visit@^4.1.0, unist-util-visit@^4.1.2, unist
     unist-util-is "^5.0.0"
     unist-util-visit-parents "^5.1.1"
 
-universal-cookie@^6.0.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-6.1.0.tgz#9b631092f77a2b91d1ec153be5e16465ce95b177"
-  integrity sha512-QBpQWkFJyH9D6nP1ZjPuLDdrgYr3y9ti8OTWf6uWcZwtY06de5f10GPYv3v68LIYWU0a9J2ZF5xFR5gOdD5ZaQ==
-  dependencies:
-    "@types/cookie" "^0.5.1"
-    cookie "^0.5.0"
-
 universalify@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"