From 02a73253cf8edfe5046b19585beb417e593c966a Mon Sep 17 00:00:00 2001 From: Moon-HaHyeon <64579247+hagus99@users.noreply.github.com> Date: Mon, 5 Sep 2022 20:15:00 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A2=8B=EC=95=84=EC=9A=94=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=88=98=EC=A0=95=20(#291)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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: 메인 좋아요 기능 수정 --- .../src/pages/Join/JoinButton/index.js | 27 +- .../src/pages/Join/Loading/index.js | 60 ++++ .../src/pages/Login/LoginButton/index.js | 30 +- .../src/pages/Main/BestCard/index.js | 276 +++++++++++------- .../src/pages/Main/MainCard/index.js | 179 ++++++++---- .../src/pages/Main/MainShopData/index.js | 104 +++---- 6 files changed, 429 insertions(+), 247 deletions(-) create mode 100644 FrontEnd/rebon-frontend/src/pages/Join/Loading/index.js diff --git a/FrontEnd/rebon-frontend/src/pages/Join/JoinButton/index.js b/FrontEnd/rebon-frontend/src/pages/Join/JoinButton/index.js index 1d4ed07f..c01774e9 100644 --- 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 (
- - - diff --git a/FrontEnd/rebon-frontend/src/pages/Join/Loading/index.js b/FrontEnd/rebon-frontend/src/pages/Join/Loading/index.js new file mode 100644 index 00000000..bce74a25 --- /dev/null +++ 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 ( + <> + + 잠시만 기다려 주세요. + 로딩중 + + + ); +} diff --git a/FrontEnd/rebon-frontend/src/pages/Login/LoginButton/index.js b/FrontEnd/rebon-frontend/src/pages/Login/LoginButton/index.js index 18a34bf5..6eadebeb 100644 --- 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; diff --git a/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js b/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js index 1a3c9a08..03370559 100644 --- a/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Main/BestCard/index.js @@ -4,14 +4,20 @@ import { FiHeart } from 'react-icons/fi'; import { FaHeart } from 'react-icons/fa'; import { Link } from 'react-router-dom'; import axios from 'axios'; +import Modal, { ModalProvider, BaseModalBackground } from 'styled-react-modal'; +import styled from 'styled-components'; +import { faXmark } from '@fortawesome/free-solid-svg-icons'; import { BsFillBookmarkFill } from 'react-icons/bs'; -import NoResult from "../../NoResult"; +import NoResult from '../../NoResult'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export default function BestCard({ data, checked }) { const [bestList, setBestList] = useState(); - const [token, setToken] = useState(window.sessionStorage.getItem('token')); + const token = window.sessionStorage.getItem('token'); const [like, setLike] = useState([]); + const [isOpen, setIsOpen] = useState(false); + const [opacity, setOpacity] = useState(0); useEffect(() => { setTimeout(function () { @@ -30,125 +36,183 @@ export default function BestCard({ data, checked }) { setLike(isLike); } else setBestList(null); } - }, 1200); + }, 400); }, [data, checked]); const likeClick = (shopId, isLike, idx, e) => { var newLike = [...like]; - if (like[idx]) { - newLike[idx] = false; - - setLike(newLike); - - const config = { - headers: { Authorization: `Bearer ${token}` }, - }; - if (token) { - var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/unlike'; - axios - .post( - url, - { - likeCount: 0, - like: false, - }, - config - ) - .then((response) => { - console.log(response); - }) - .catch((error) => { - console.log(error); - }); + if (token) { + if (like[idx]) { + newLike[idx] = false; + + setLike(newLike); + + const config = { + headers: { Authorization: `Bearer ${token}` }, + }; + if (token) { + var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/unlike'; + axios + .post( + url, + { + likeCount: 0, + like: false, + }, + config + ) + .then((response) => { + console.log(response); + }) + .catch((error) => { + console.log(error); + }); + } + } else { + newLike[idx] = true; + setLike(newLike); + + const config = { + headers: { Authorization: `Bearer ${token}` }, + }; + if (token) { + var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/like'; + axios + .post( + url, + { + likeCount: 1, + like: true, + }, + config + ) + .then((response) => { + console.log(response); + }) + .catch((error) => { + console.log(error); + }); + } } } else { - newLike[idx] = true; - setLike(newLike); - - const config = { - headers: { Authorization: `Bearer ${token}` }, - }; - if (token) { - var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/like'; - axios - .post( - url, - { - likeCount: 1, - like: true, - }, - config - ) - .then((response) => { - console.log(response); - }) - .catch((error) => { - console.log(error); - }); - } + // alert('로그인 후 좋아요를 눌러주세요 :)'); + toggleModal(); } }; + function toggleModal(e) { + setOpacity(0); + setIsOpen(!isOpen); + } + + function afterOpen() { + setTimeout(() => { + setOpacity(1); + }, 100); + } + + function beforeClose() { + return new Promise((resolve) => { + setOpacity(0); + setTimeout(resolve, 300); + }); + } + + const FadingBackground = styled(BaseModalBackground)` + opacity: ${(props) => props.opacity}; + transition: all 0.3s ease-in-out; + `; + return ( <> - {bestList - ? bestList.map((item, idx) => { - if (idx < 4) { - var address = '/detail/' + item.id.toString(); - var star = item.star.toFixed(1); - - return ( -
- {item.image ? ( - + {bestList ? ( + bestList.map((item, idx) => { + if (idx < 4) { + var address = '/detail/' + item.id.toString(); + var star = item.star.toFixed(); + + return ( +
+ {item.image ? ( + + ) : ( + + )} +
+ +
{item.name}
+ +
{star}.0
+
+ +
+ {like[idx] ? ( + { + likeClick(item.id, item.like, idx, e); + }} + /> ) : ( - { + likeClick(item.id, item.like, idx, e); + }} /> )} -
- -
{item.name}
- -
{star}
-
- -
- {like[idx] ? ( - { - likeClick(item.id, item.like, idx, e); - }} - /> - ) : ( - { - likeClick(item.id, item.like, idx, e); - }} - /> - )} -
- - -
{idx + 1}
- -
- {item.tags.map((tag) => ( - {tag.name} - ))} -
- ); - } - }) - : } + + +
{idx + 1}
+ +
+ {item.tags.map((tag) => ( + {tag.name} + ))} +
+ + + +
+ + review-image +
로그인 후 좋아요를 눌러주세요 :)
+
+ + +
+ ); + } + }) + ) : ( + + )} ); } +const StyledModal = Modal.styled` + width: 21rem; + height: 16rem; + padding : 20px; + border-radius:20px; + background-color: white; + opacity: ${(props) => props.opacity}; + transition : all 0.3s ease-in-out;`; diff --git a/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js b/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js index 025bb76f..a0b7a970 100644 --- a/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Main/MainCard/index.js @@ -6,94 +6,130 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import axios from 'axios'; import Loading from '../../Login/Loading'; +import Modal, { ModalProvider, BaseModalBackground } from 'styled-react-modal'; +import { faXmark } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export default function MainCard({ tagId, cateId, data, checked, open, sort, like, changeLike }) { const [mainInfo, setMainInfo] = useState(null); const [subId, setSubId] = useState(); - const [token, setToken] = useState(window.sessionStorage.getItem('token')); + const token = window.sessionStorage.getItem('token'); const [ready, setReady] = useState(false); + const [isOpen, setIsOpen] = useState(false); + const [opacity, setOpacity] = useState(0); + + const config = { + headers: { Authorization: `Bearer ${token}` }, + }; + useEffect(() => { setReady(false); setTimeout(function () { if (data) { var url = 'http://3.34.139.61:8080/api/shops?tag=' + tagId + '&category=' + cateId + '&subCategories=' + checked + '&open=' + open + '&sort=' + sort + '%2Cdesc'; - axios.get(url).then((response) => { + axios.get(url, config).then((response) => { setMainInfo(response.data); setReady(true); }); } - }, 1200); + }, 400); }, [data, checked, open, sort, cateId]); const likeClick = (shopId, idx, e) => { - if (like[idx]) { - changeLike(idx); - const config = { - headers: { Authorization: `Bearer ${token}` }, - }; - if (token) { - var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/unlike'; - axios - .post( - url, - { - likeCount: 0, - like: false, - }, - config - ) - .then((response) => { - console.log(response); - }) - .catch((error) => { - console.log(error); - }); + if (token) { + if (like[idx]) { + changeLike(idx); + + if (token) { + var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/unlike'; + axios + .post( + url, + { + likeCount: 0, + like: false, + }, + config + ) + .then((response) => { + console.log(response); + }) + .catch((error) => { + console.log(error); + }); + } + } else { + changeLike(idx); + + const config = { + headers: { Authorization: `Bearer ${token}` }, + }; + if (token) { + var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/like'; + axios + .post( + url, + { + likeCount: 1, + like: true, + }, + config + ) + .then((response) => { + console.log(response); + }) + .catch((error) => { + console.log(error); + }); + } } } else { - changeLike(idx); - - const config = { - headers: { Authorization: `Bearer ${token}` }, - }; - if (token) { - var url = 'http://3.34.139.61:8080/api/shops/' + shopId + '/like'; - axios - .post( - url, - { - likeCount: 1, - like: true, - }, - config - ) - .then((response) => { - console.log(response); - }) - .catch((error) => { - console.log(error); - }); - } + // alert('로그인 후 좋아요를 눌러주세요 :)'); + toggleModal(); } }; - const StyledLink = styled(Link)` - box-sizing: border-box; - display: block; - text-align: center; - text-decoration: none; - color: black; - hover: none; + function toggleModal(e) { + setOpacity(0); + setIsOpen(!isOpen); + } + + function afterOpen() { + setTimeout(() => { + setOpacity(1); + }, 100); + } + + function beforeClose() { + return new Promise((resolve) => { + setOpacity(0); + setTimeout(resolve, 300); + }); + } + + const FadingBackground = styled(BaseModalBackground)` + opacity: ${(props) => props.opacity}; + transition: all 0.3s ease-in-out; `; + // const StyledLink = styled(Link)` + // box-sizing: border-box; + // display: block; + // text-align: center; + // text-decoration: none; + // color: black; + // hover: none; + // `; + return ( <> {ready ? ( mainInfo ? ( mainInfo.map((item, idx) => { var address = '/detail/' + item.id.toString(); - var star = item.star.toFixed(1); + var star = item.star.toFixed(); return (
@@ -106,7 +142,7 @@ export default function MainCard({ tagId, cateId, data, checked, open, sort, lik /> )}
- {like[idx] ? ( + {item.like ? (
{item.name}
-
{star}
+
{star}.0
{/*
{item.tags.map((tag) => ( @@ -140,6 +176,25 @@ export default function MainCard({ tagId, cateId, data, checked, open, sort, lik ))}
*/}
+ + +
+ + review-image +
로그인 후 좋아요를 눌러주세요 :)
+
+ +
); }) @@ -157,3 +212,11 @@ export default function MainCard({ tagId, cateId, data, checked, open, sort, lik ); } +const StyledModal = Modal.styled` + width: 21rem; + height: 16rem; + padding : 20px; + border-radius:20px; + background-color: white; + opacity: ${(props) => props.opacity}; + transition : all 0.3s ease-in-out;`; diff --git a/FrontEnd/rebon-frontend/src/pages/Main/MainShopData/index.js b/FrontEnd/rebon-frontend/src/pages/Main/MainShopData/index.js index 2fc14e7e..6d6819cc 100644 --- a/FrontEnd/rebon-frontend/src/pages/Main/MainShopData/index.js +++ b/FrontEnd/rebon-frontend/src/pages/Main/MainShopData/index.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios'; import { useLocation } from 'react-router'; import Main from '../../Main'; -import Loading from "../../Login/Loading"; +import Loading from '../../Login/Loading'; export default function MainShopData({ restCategory, accoCategory, cafeCategory }) { const location = useLocation(); @@ -10,6 +10,10 @@ export default function MainShopData({ restCategory, accoCategory, cafeCategory const [restData, setRestData] = useState(null); const [accoData, setAccoData] = useState(null); const [cafeData, setCafeData] = useState(null); + const [token, setToken] = useState(window.sessionStorage.getItem('token')); + const config = { + headers: { Authorization: `Bearer ${token}` }, + }; useEffect(() => { setReady(false); @@ -18,71 +22,71 @@ export default function MainShopData({ restCategory, accoCategory, cafeCategory var accoArr = []; var cafeArr = []; - restCategory.map((data, index) => { - const noRest = [74, 91,29]; - if(!(noRest.includes(data.id))) { - var url = 'http://3.34.139.61:8080/api/shops?tag=' + location.state.item.id + '&category=1&subCategories=' + data.id + '&open=false&sort=shopScore.star%2Cdesc'; + const noRest = [74, 91, 29]; + if (!noRest.includes(data.id)) { + var url = 'http://3.34.139.61:8080/api/shops?tag=' + location.state.item.id + '&category=1&subCategories=' + data.id + '&open=false&sort=shopScore.star%2Cdesc'; + axios + .get(url, config) + .then((response) => { + const restState = { id: data.id, shop: response.data }; + restArr.push(restState); + }) + .catch((error) => { + if (error.response.status === 500) { + restArr.push([]); + } else console.log('restShop error'); + }); + } + + setRestData(restArr); + + cafeCategory.map((data, index) => { + const noCafe = [96]; + if (!noCafe.includes(data.id)) { + var url = 'http://3.34.139.61:8080/api/shops?tag=' + location.state.item.id + '&category=2&subCategories=' + data.id + '&open=false&sort=shopScore.star%2Cdesc'; axios - .get(url) + .get(url, config) .then((response) => { - const restState = { id: data.id, shop: response.data }; - restArr.push(restState); + const cafeState = { id: data.id, shop: response.data }; + cafeArr.push(cafeState); }) .catch((error) => { if (error.response.status === 500) { - restArr.push([]); - } else console.log('restShop error'); + cafeArr.push([]); + } else console.log('cafeShop error'); }); } }); - setRestData(restArr); - - cafeCategory.map((data, index) => { - const noCafe = [96]; - // if(!(noCafe.includes(data.id))){ - var url = 'http://3.34.139.61:8080/api/shops?tag=' + location.state.item.id + '&category=2&subCategories=' + data.id + '&open=false&sort=shopScore.star%2Cdesc'; - axios - .get(url) - .then((response) => { - const cafeState = { id: data.id, shop: response.data }; - cafeArr.push(cafeState); - }) - .catch((error) => { - if (error.response.status === 500) { - cafeArr.push([]); - } else console.log('cafeShop error'); - }); - // } - }); setCafeData(cafeArr); - accoCategory.map((data, index) => { const noAcco = [100, 102, 99, 101, 18, 98, 17, 16]; - // if(!(noAcco.includes(data.id))) { - var url = 'http://3.34.139.61:8080/api/shops?tag=' + location.state.item.id + '&category=3&subCategories=' + data.id + '&open=false&sort=shopScore.star%2Cdesc'; - axios - .get(url) - .then((response) => { - const accoState = { id: data.id, shop: response.data }; - accoArr.push(accoState); - }) - .catch((error) => { - if (error.response.status === 500) { - accoArr.push([]); - } else console.log('accoShop error'); - }); - // } + if (!noAcco.includes(data.id)) { + var url = 'http://3.34.139.61:8080/api/shops?tag=' + location.state.item.id + '&category=3&subCategories=' + data.id + '&open=false&sort=shopScore.star%2Cdesc'; + axios + .get(url, config) + .then((response) => { + const accoState = { id: data.id, shop: response.data }; + accoArr.push(accoState); + }) + .catch((error) => { + if (error.response.status === 500) { + accoArr.push([]); + } else console.log('accoShop error'); + }); + } }); setAccoData(accoArr); setReady(true); }, []); - return ( - <>{ready ? -
- : - } + <> + {ready ? ( +
+ ) : ( + + )} + ); -} \ No newline at end of file +}