[FE] feat: kakao oauth 추가

front/src/api/authApi.js

@@ -77,6 +77,20 @@ const authApi = {
         .catch((error) => reject(error));
     });
   },
+  oauth: ({ path, code }) => {
+    return new Promise((resolve, reject) => {
+      return axios
+        .get(`${path}${code}`)
+        .then((response) => {
+          signInSuccess(response);
+          setTimeout(authApi.logout, REFRESH_EXPIRY_TIME);
+          return resolve(response);
+        })
+        .catch((error) => {
+          return reject(error);
+        });
+    });
+  },
 };
 
 export default authApi;

front/src/components/RoutesComponent.js

@@ -2,6 +2,7 @@ import { Routes, Route, Navigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { selectFirstLogin, selectIsLogin } from 'store/modules/authSlice';
 import LandingPage from 'pages/LandingPage';
+import OauthPage from 'pages/TestPage/OauthPage';
 import {
   MainPage,
   SignUpPage,
@@ -138,6 +139,7 @@ const RoutesComponent = () => {
       <Route path="/redux" element={<ReduxPage />} />
       <Route path="/button-test" element={<ButtonTest />} />
       <Route path="/img-test" element={<ImgTest />} />
+      <Route path="/oauth/:site" element={<OauthPage />} />
       <Route path="*" element={getElement(NoMatch, null)} />
     </Routes>
   );

front/src/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+// import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { store } from './store/store';
@@ -13,13 +13,13 @@ const container = document.getElementById('root');
 const root = createRoot(container);
 
 root.render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <App />
-      </PersistGate>
-    </Provider>
-  </React.StrictMode>
+  // <React.StrictMode>
+  <Provider store={store}>
+    <PersistGate loading={null} persistor={persistor}>
+      <App />
+    </PersistGate>
+  </Provider>
+  // </React.StrictMode>
 );
 
 reportWebVitals();

front/src/pages/SignInPage/SignInPage.js

@@ -34,6 +34,36 @@ const AvatarStyled = styled(Avatar)`
   background-color: ${({ theme }) => theme.colors.purple_2};
 `;
 
+const OauthBtns = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: -5px;
+  .google {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+`;
+
+const BtnStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  margin: 5px;
+  border-radius: 20px;
+  overflow: hidden;
+  &:hover {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  }
+  img {
+    margin-top: 5px;
+    height: 45px;
+  }
+`;
+
 const SignInPage = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -110,21 +140,47 @@ const SignInPage = () => {
             입력하신 내용을 다시 확인해주세요.
           </LoginErrorMsgStyled>
         ) : null}
-        <Grid container justifyContent="flex-end">
-          {/* <Grid container> */}
-          {/* <Grid item xs>
+      </Box>
+      <OauthBtns>
+        <BtnStyled className="google">
+          <a href="https://accounts.google.com/o/oauth2/v2/auth/oauthchooseaccount?response_type=code&client_id=293970161173-a059nllv4dpvc9quk4hqid4kservumh6.apps.googleusercontent.com&scope=email%20profile&redirect_uri=http://localhost:3000/oauth/google">
+            <img
+              src={process.env.PUBLIC_URL + '/images/googleLoginBtn.png'}
+              alt="google oauth login button"
+            />
+          </a>
+        </BtnStyled>
+        <BtnStyled>
+          <a href="https://accounts.kakao.com/login/?continue=https%3A%2F%2Fkauth.kakao.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26redirect_uri%3Dhttp%253A%252F%252Flocalhost%253A3000%252Foauth%252Fkakao%26through_account%3Dtrue%26client_id%3De50e158c20358065eb3d6e2eabd76f5c">
+            <img
+              src={process.env.PUBLIC_URL + '/images/kakaoLoginBtn.png'}
+              alt="kakao oauth login button"
+            />
+          </a>
+        </BtnStyled>
+        <BtnStyled>
+          <a href="https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=RZfvwjjGuUVmm8x8TDnY&redirect_uri=http://localhost:3000/oauth/naver">
+            <img
+              src={process.env.PUBLIC_URL + '/images/naverLoginBtn.png'}
+              alt="naver oauth login button"
+            />
+          </a>
+        </BtnStyled>
+      </OauthBtns>
+      <Grid container justifyContent="flex-end">
+        {/* <Grid container> */}
+        {/* <Grid item xs>
                   <Link to="#" variant="body2">
                     Forgot password?
                   </Link>
                 </Grid> */}
-          <Grid item>
-            계정이 없으신가요?{' '}
-            <SignUpLinkStyled to="/user/signup" variant="body2">
-              회원가입
-            </SignUpLinkStyled>
-          </Grid>
+        <Grid item>
+          계정이 없으신가요?{' '}
+          <SignUpLinkStyled to="/user/signup" variant="body2">
+            회원가입
+          </SignUpLinkStyled>
         </Grid>
-      </Box>
+      </Grid>
     </PageContainer>
   );
 };

front/src/pages/TestPage/OauthPage.js

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { oauthAsync } from 'store/modules/authSlice';
+import { setOpenSnackbar } from 'store/modules/snackbarSlice';
+import PageContainer from 'containers/PageContainer';
+import Loading from 'components/Loading';
+
+const OauthPage = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  useEffect(() => {
+    const path = location.pathname;
+    const code = location.search;
+    getOauthCode(path, code);
+  }, []);
+
+  const getOauthCode = (path, code) => {
+    dispatch(oauthAsync({ path, code }))
+      .unwrap()
+      .then(() => {
+        dispatch(
+          setOpenSnackbar({
+            severity: 'success',
+            message: '로그인이 완료되었습니다.',
+          })
+        );
+        navigate('/', { replace: true });
+      })
+      .catch((err) => {
+        console.log(err);
+        dispatch(
+          setOpenSnackbar({
+            severity: 'error',
+            message: `${err.message}로 인해 로그인 실패하였습니다`,
+          })
+        );
+        navigate('/', { replace: true });
+      });
+  };
+  return (
+    <PageContainer>
+      <Loading />
+    </PageContainer>
+  );
+};
+
+export default OauthPage;

front/src/store/modules/authSlice.js

@@ -24,6 +24,21 @@ export const signInAsync = createAsyncThunk(
   }
 );
 
+export const oauthAsync = createAsyncThunk(
+  'auth/oauth',
+  async ({ path, code }, thunkAPI) => {
+    console.log('path', path);
+    console.log('code', code);
+    try {
+      const response = await authApi.oauth({ path, code });
+      console.log('성공하면 오는 res', response.data);
+      return response.data.data;
+    } catch (error) {
+      return thunkAPI.rejectWithValue(error);
+    }
+  }
+);
+
 export const firstLoginAsync = createAsyncThunk(
   'auth/firstLogin',
   async (params, thunkAPI) => {
@@ -81,6 +96,33 @@ export const authSlice = createSlice({
         state.roles = [];
         state.profileImage = '';
       })
+      .addCase(oauthAsync.pending, (state) => {
+        state.loading = true;
+        state.isLogin = false;
+        state.firstLogin = false;
+        state.nickName = '';
+        state.email = '';
+        state.roles = [];
+        state.profileImage = '';
+      })
+      .addCase(oauthAsync.fulfilled, (state, { payload }) => {
+        state.loading = false;
+        state.isLogin = true;
+        state.firstLogin = payload.firstLogin;
+        state.nickName = payload.nickName;
+        state.email = payload.email;
+        state.roles = payload.roles;
+        state.profileImage = payload.profileImage;
+      })
+      .addCase(oauthAsync.rejected, (state) => {
+        state.loading = false;
+        state.isLogin = false;
+        state.firstLogin = false;
+        state.nickName = '';
+        state.email = '';
+        state.roles = [];
+        state.profileImage = '';
+      })
       .addCase(firstLoginAsync.pending, (state) => {
         state.loading = true;
         state.isLogin = false;