fix: solve conflict and modify endpoint 3000 to 8080

.github/workflows/react.yml

@@ -0,0 +1,35 @@
+name: Deploy React
+
+on:
+  push:
+    branches:
+      - main
+
+jobs: 
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: react docker build and push
+        run: |
+          docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
+          docker build -t ${{ secrets.DOCKER_REPO }}/eum-react:latest .
+          docker push ${{ secrets.DOCKER_REPO }}/eum-react:latest
+
+      - name: executing remote ssh commands using password
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.AWS_HOST }}
+          username: ${{ secrets.AWS_ID }}
+          key: ${{ secrets.AWS_KEY }}
+          script: |
+            if [ "$(sudo docker ps -qa)" ]; then
+              sudo docker rm -f $(sudo docker ps -qa)
+            fi
+            
+            sudo docker pull ${{ secrets.DOCKER_REPO }}/eum-react:latest
+            
+            cd alpha-e_um-deploy
+            sudo docker-compose -f docker-compose.yaml up -d
+            sudo docker image prune -f

package.json

@@ -13,6 +13,7 @@
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
     "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -5,8 +5,38 @@ import MyPage from "./pages/MyPage/myPage";
 import TeamSearch from "./pages/TeamSearch/teamSearch";
 import MemberSearch from "./pages/MemberSearch/memberSearch";
 import Login from "./pages/Login/login";
+import { useRecoilState } from "recoil";
+import { useEffect } from "react";
+import { axiosWithAuth } from "./lib/axios";
+import { userInfoState } from "./states/authState";
 
 const App = () => {
+  const [userInfo, setUserInfo] = useRecoilState(userInfoState);
+  const accessToken = localStorage.getItem("access_token");
+
+  const getUserInfo = async () => {
+    axiosWithAuth
+      .get("/api/user/me")
+      .then((res) => {
+        setUserInfo({
+          isLogin: true,
+          userId: res.data.userId,
+          email: res.data.email,
+          name: res.data.name.first,
+          fullName: res.data.name.fullName,
+          avatar: res.data.avatar,
+          mbti: res.data.mbti,
+        });
+        console.log(res);
+        console.log("userInfo", userInfo);
+      })
+      .catch((err) => console.error(err));
+  };
+
+  useEffect(() => {
+    getUserInfo();
+  }, []);
+
   return (
     <div className="App">
       <BrowserRouter>

src/components/CardGrid/contestCardGrid.js

@@ -13,7 +13,7 @@ const ContestCardGrid = (props) => {
         }}
       >
         {props.cardDatas.map((item) => (
-          <ContestCard key={item.id} data={item} />
+          <ContestCard key={item.deadline} data={item} />
         ))}
       </GridContainer>
     </div>

src/components/Navigation/navigation.js

@@ -11,10 +11,13 @@ import {
 import { ReactComponent as Alert } from "../../assets/icons/alert.svg";
 import { useNavigate } from "react-router-dom";
 import SocialLoginModal from "../SocialLoginModal/SocialLoginModal";
+import { useRecoilState } from "recoil";
+import { userInfoState } from "../../states/authState";
 
 const Navigation = (props) => {
   const navigate = useNavigate();
   const [clickLoginButton, setClickLoginButton] = useState(false);
+  const [userInfo, setUserInfo] = useRecoilState(userInfoState);
 
   return (
     <Container>
@@ -72,10 +75,16 @@ const Navigation = (props) => {
             <LoginButton>
               <LoginButtonLabel
                 onClick={() => {
-                  setClickLoginButton(true);
+                  if (userInfo.isLogin) {
+                    setUserInfo({});
+                    localStorage.removeItem("access_token");
+                    // TODO 로그아웃 API 요청 보내기
+                  } else {
+                    setClickLoginButton(true);
+                  }
                 }}
               >
-                로그인
+                {userInfo.isLogin ? "로그아웃" : "로그인"}
               </LoginButtonLabel>
             </LoginButton>
             <div style={{ marginLeft: "40px" }}>

src/components/SocialLoginModal/SocialLoginModal.js

@@ -17,7 +17,8 @@ const SocialLoginModal = ({ setClickLoginButton }) => {
   };
 
   const loginWithGoogle = () => {
-    window.location.href = "http://e-um.site/api/oauth2/google";
+    // window.location.href = "http://e-um.site/api/oauth2/google";
+    window.location.href = "http://localhost:8080/api/oauth2/google";
   };
 
   const loginWithNaver = () => {

src/index.js

@@ -3,9 +3,14 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import { RecoilRoot } from "recoil";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<App />);
+root.render(
+  <RecoilRoot>
+    <App />
+  </RecoilRoot>,
+);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/lib/axios.js

@@ -1,37 +1,39 @@
 import axios from "axios";
 
-export const axios2 = axios.create({
+export const axiosWithAuth = axios.create({
   baseURL:
     process.env.NODE_ENV === "development"
-      ? "http://localhost:3000"
-      : "http://e-um.site",
+      ? "http://localhost:8080"
+      : "https://e-um.site",
   headers: {
     "Content-Type": "application/json",
     Authorization: `Bearer ${localStorage.getItem("access_token")}`,
   },
   withCredentials: true,
 });
 
-console.log("process.env.NODE_ENV", process.env.NODE_ENV);
-
-axios2.interceptors.response.use(
+axiosWithAuth.interceptors.response.use(
   function (res) {
     return res;
   },
   async function (err) {
-    const { config: originRequest } = err;
-
-    if (err.status === 401) {
-      const reIssueResponse = await axios2.post("/api/auth/reissue");
-
+    // const { config: originRequest } = err;
+    if (err.response.status === 401) {
+      // access token이 만료되어서 refresh token을 사용해서 재발급 요청할 때
+      const reIssueResponse = await axiosWithAuth.post("/api/auth/reissue");
       if (reIssueResponse.status === 200) {
         const { accessToken } = reIssueResponse.data;
         localStorage.setItem("access_token", accessToken);
-        axios.defaults.headers.Authorization = `Bearer ${accessToken}`;
-        return axios(originRequest);
+        axiosWithAuth.defaults.headers.Authorization = `Bearer ${accessToken}`;
+        // await axios(originRequest).then((res) => {});
+        window.location.replace("/");
       } else {
         window.location.replace("/sign-in");
       }
+    } else if (err.response.status === 403) {
+      // refresh token이 만료 혹은 없을 때
+      console.log("refresh token 만료 혹은 존재X. 재로그인 요망");
+      return;
     }
 
     return Promise.reject(err);

src/pages/Login/login.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import { axios2 } from "../../lib/axios";
+import { axiosWithAuth } from "../../lib/axios";
 
 const Login = (props) => {
   const location = useLocation();
@@ -22,7 +22,7 @@ const Login = (props) => {
       if (token) {
         console.log("토큰 저장");
         localStorage.setItem("access_token", token);
-        axios2.defaults.headers.Authorization = `Bearer ${token}`;
+        axiosWithAuth.defaults.headers.Authorization = `Bearer ${token}`;
         navigate("/");
       } else {
         // 토큰이 없거나 문제가 있다면 로그인 페이지나 오류 페이지로 리다이렉트

src/pages/Main/main.js

@@ -1,4 +1,3 @@
-import React, { useEffect } from "react";
 import Navigation from "../../components/Navigation/navigation";
 import Introduce from "../../components/Introduce/introduce";
 import SubNavigation from "../../components/SubNavigation/subNavigation";
@@ -7,22 +6,9 @@ import MemberCardGrid from "../../components/CardGrid/memberCardGrid";
 import teamTestData from "../../api/teamTestData";
 import memberTestData from "../../api/memberTestData";
 import contestTestData from "../../api/contestTestData";
-import ContestCard from "../../components/ContestCard/contestCard";
 import ContestCardGrid from "../../components/CardGrid/contestCardGrid";
-import SideNavigation from "../../components/SideNavigation/sideNavigation";
-import { axios2 } from "../../lib/axios";
 
 const Main = (props) => {
-  useEffect(() => {
-    axios2
-      .get("/api/user/me")
-      .then((res) => {
-        console.log(res);
-      })
-      .catch((err) => console.error(err));
-
-    // TODO: 유저 객체 만들고 있으면 로그인 처리
-  }, []);
   return (
     <div>
       <Navigation />

src/states/authState.js

@@ -0,0 +1,16 @@
+import { atom } from "recoil";
+
+export const userInfoState = atom({
+  key: "userInfoState",
+  default: {
+    isLogin: false,
+    userId: 0,
+    email: "",
+    avatar: "",
+    mbti: "",
+    name: {
+      first: "",
+      fullName: "",
+    },
+  },
+});