fix: 좋아요 기능 수정 (#291)

* fix[#29]: 디자인 검수 수정 * style:main css 수정 * fix:메인 css 수정 * fix:메인 css 수정 * main css 수정 * 북마크 css 수정 * resolve login error * feat[#246]: 사진업로드 * [#246]: 이미지 업로드 * style: main페이지 css 수정 * feat: 메인 좋아요기능 * fix: 메인페이지 좋아요기능 * fix: 메인 좋아요 완성 * fix: 찜 좋아요 수정 * fix: 찜 내역 조회 * 찜 목록 조회 * fix: 메인 좋아요 기능 수정
RE-BON · Sep 5, 2022 · 02a7325 · 02a7325
1 parent 22081e8
commit 02a7325
Show file tree

Hide file tree

Showing 6 changed files with 429 additions and 247 deletions.
diff --git a/FrontEnd/rebon-frontend/src/pages/Join/JoinButton/index.js b/FrontEnd/rebon-frontend/src/pages/Join/JoinButton/index.js
@@ -1,18 +1,37 @@
-import React from 'react';
+import React, { useState } from 'react';
 import '../../../styles/sns-btn.css';
 
 export default function SNSButtons() {
+  const googleClientId = process.env.REACT_APP_GOOGLE_LOGIN;
+  const naverClientId = process.env.REACT_APP_NAVER_LOGIN;
+  const kakaoClientId = process.env.REACT_APP_KAKAO_LOGIN;
+
+  const googleLoginHandler = () => {
+    const GOOGLE_LOGIN_URL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${googleClientId}&redirect_uri=http://localhost:3000/loading&response_type=code&scope=https://www.googleapis.com/auth/userinfo.email`;
+    window.location.href = GOOGLE_LOGIN_URL;
+  };
+
+  const naverLoginHandler = () => {
+    const NAVER_LOGIN_URL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${naverClientId}&redirect_uri=http://localhost:3000/loading`;
+    window.location.href = NAVER_LOGIN_URL;
+  };
+
+  const kakaoLoginHandler = () => {
+    const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${kakaoClientId}&redirect_uri=http://localhost:3000/loading`;
+    window.location.href = KAKAO_LOGIN_URL;
+  };
+
   return (
     <div className="joinBtn-wrapper">
-      <button className="join-btn naver-btn">
+      <button className="join-btn naver-btn" onClick={naverLoginHandler}>
         <img className="logo-img" alt="naverLogo" src="image/naverLogo.png" />
         네이버 간편 가입하기
       </button>
-      <button className="join-btn kakao-btn">
+      <button className="join-btn kakao-btn" onClick={kakaoLoginHandler}>
         <img className="logo-img" alt="kakaoLogo" src="image/kakaoLogo.png" />
         카카오 간편 가입하기
       </button>
-      <button className="join-btn google-btn">
+      <button className="join-btn google-btn" onClick={googleLoginHandler}>
         <img className="logo-img" alt="googleLogo" src="image/googleLogo.png" />
         구글 간편 가입하기
       </button>

diff --git a/FrontEnd/rebon-frontend/src/pages/Join/Loading/index.js b/FrontEnd/rebon-frontend/src/pages/Join/Loading/index.js
@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import Spinner from '../../../assets/spinner.gif';
+import axios from 'axios';
+import { useLocation, useNavigate } from 'react-router';
+
+export default function Loading() {
+  const Background = styled.div`
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background: #ffffffb7;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  `;
+
+  const LoadingText = styled.div`
+    font: 1rem 'Noto Sans KR';
+    text-align: center;
+  `;
+
+  const params = new URLSearchParams(window.location.search);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const code = params.get('code');
+    console.log(code);
+    console.log(location);
+
+    if (code != null) {
+      console.log('로그인 후');
+      axios
+        .get(`http://3.34.139.61:8080/api/auth/naver/login/token?code=${code}`)
+        .then((response) => {
+          window.sessionStorage.setItem('token', response.data.token);
+          navigate('/');
+        })
+        .catch((error) => {
+          if (error.response.data.email != null) {
+            navigate('/join/register', { state: { email: error.response.data.email, oauthProvider: 'naver' } });
+          }
+        });
+    }
+  }, []);
+
+  return (
+    <>
+      <Background>
+        <LoadingText>잠시만 기다려 주세요.</LoadingText>
+        <img src={Spinner} alt="로딩중" width="5%" />
+      </Background>
+    </>
+  );
+}
diff --git a/FrontEnd/rebon-frontend/src/pages/Login/LoginButton/index.js b/FrontEnd/rebon-frontend/src/pages/Login/LoginButton/index.js
@@ -1,8 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import '../../../styles/sns-btn.css';
-import axios from 'axios';
-import { useNavigate } from 'react-router-dom';
-import Loading from '../Loading';
 
 export default function SNSButtons() {
   const [loading, setLoading] = useState(true);
@@ -11,31 +8,6 @@ export default function SNSButtons() {
   const naverClientId = process.env.REACT_APP_NAVER_LOGIN;
   const kakaoClientId = process.env.REACT_APP_KAKAO_LOGIN;
 
-  const params = new URLSearchParams(window.location.search);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    const code = params.get('code');
-    console.log(code);
-
-    if (code != null) {
-      while (loading) {
-        console.log('로그인 후');
-        axios
-          .get(`http://3.34.139.61:8080/api/auth/naver/login/token?code=${code}`)
-          .then((response) => {
-            console.log(response);
-            setLoading(false);
-          })
-          .catch((error) => {
-            console.log('error');
-            console.log(error);
-            setLoading(false);
-          });
-      }
-    }
-  }, []);
-
   const googleLoginHandler = () => {
     const GOOGLE_LOGIN_URL = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${googleClientId}&redirect_uri=http://rebon.s3-website.ap-northeast-2.amazonaws.com/loading&response_type=code&scope=https://www.googleapis.com/auth/userinfo.email`;
     window.location.href = GOOGLE_LOGIN_URL;