diff --git a/README.md b/README.md index dff5ca2..e27aa1b 100755 --- a/README.md +++ b/README.md @@ -27,10 +27,13 @@ JavaScript React React Hooks Redux +Redux Persist React Router Axios Sass styled-components +GSAP + ### Back-End TypeScript Node.js @@ -39,6 +42,10 @@ typeORM JSON Web Tokens Socket.io +Redis +Cluster + + ### Deploy Amazon AWS diff --git a/client/public/DoRun_favicon.png b/client/public/DoRun_favicon.png index 5431f14..9d143e7 100644 Binary files a/client/public/DoRun_favicon.png and b/client/public/DoRun_favicon.png differ diff --git a/client/src/App.js b/client/src/App.js index 2e95701..3359b05 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -20,7 +20,7 @@ const App = () => { setLoading(true); setTimeout(() => { setLoading(false); - }, 2000); + }, 1200); }, []); return ( diff --git a/client/src/_actions/user_action.js b/client/src/_actions/user_action.js index 4c1e357..e554be7 100755 --- a/client/src/_actions/user_action.js +++ b/client/src/_actions/user_action.js @@ -44,10 +44,6 @@ async function googleUser(dataToSubmit) { name, }) .then((response) => { - sessionStorage.setItem('accessToken', response.data.accessToken); - sessionStorage.setItem('userId', response.data.data.id); - sessionStorage.setItem('userCrewId', response.data.data.crewId); - sessionStorage.setItem('userNickname', response.data.data.nickname); return response.data; }) .catch((e) => console.log(e)); @@ -58,19 +54,19 @@ async function googleUser(dataToSubmit) { } async function kakaoUser(dataToSubmit) { + + // console.log('인가코드', dataToSubmit); const request = await axios .post(`${process.env.REACT_APP_SERVER}/oauth/kakao`, { - authorizationCode: dataToSubmit, + authorizationCode: dataToSubmit }) .then((response) => { - sessionStorage.setItem('accessToken', response.data.accessToken); - sessionStorage.setItem('userId', response.data.data.id); - sessionStorage.setItem('userCrewId', response.data.data.crewId); - sessionStorage.setItem('userNickname', response.data.data.nickname); - return response.data.data; + // console.log('인가를 받아온 응답입니다', response) + return response.data }) .catch((e) => console.log(e)); + console.log('request', request) return { type: KAKAO_USER, payload: request, diff --git a/client/src/_reducers/user_reducer.js b/client/src/_reducers/user_reducer.js index dd74251..7205c71 100755 --- a/client/src/_reducers/user_reducer.js +++ b/client/src/_reducers/user_reducer.js @@ -34,10 +34,25 @@ export default function user( return { ...state }; break; case GOOGLE_USER: - return { ...state, loginSuccess: action.payload }; + return { + ...state, + userId: action.payload.data.id, + nickname: action.payload.data.nickname, + image: action.payload.data.image, + userCrewId: action.payload.data.crewId, + accessToken: action.payload.accessToken, + }; break; case KAKAO_USER: - return { ...state, loginSuccess: action.payload }; + console.log(action.payload.data) + return { + ...state, + userId: action.payload.data.id, + nickname: action.payload.data.nickname, + image: action.payload.data.image, + userCrewId: action.payload.data.crewId, + accessToken: action.payload.accessToken, + }; break; case LOGOUT_USER: return { diff --git a/client/src/components/Chat/Input/Input.js b/client/src/components/Chat/Input/Input.js index 7445336..4cc0de5 100755 --- a/client/src/components/Chat/Input/Input.js +++ b/client/src/components/Chat/Input/Input.js @@ -54,6 +54,7 @@ const Input = ({ socket, userId, userCrewId, nickname }) => { type="text" placeholder="Enter Message" autoComplete="off" + autoFocus /> {showEmojis && (
diff --git a/client/src/components/Chat/MessageList/MessageList.js b/client/src/components/Chat/MessageList/MessageList.js index c07c56c..a2fe1c9 100755 --- a/client/src/components/Chat/MessageList/MessageList.js +++ b/client/src/components/Chat/MessageList/MessageList.js @@ -42,7 +42,7 @@ const MessageList = ({ messages, userId }) => {
profileImg
{el.nickname}
diff --git a/client/src/components/Chat/MessageList/MessageList.scss b/client/src/components/Chat/MessageList/MessageList.scss index fbba306..98860f3 100755 --- a/client/src/components/Chat/MessageList/MessageList.scss +++ b/client/src/components/Chat/MessageList/MessageList.scss @@ -1,6 +1,6 @@ -$--message-time-color: #ccc; +$--message-time-color: #ddd; $--message-user-color: #999; -$--message-text-color: #222; +$--message-text-color: #333; $--dark-color-a: #15aabf; $--dark-color-b: #22b8cf; $--light-color: #c5f6fa; @@ -20,7 +20,6 @@ $--error-color: #d9534f; display: flex; align-items: center; justify-content: center; - // flex-basis: 100%; margin: 8px 0px 15px 0px; color: $--message-user-color; font-size: 0.8rem; @@ -40,22 +39,25 @@ $--error-color: #d9534f; flex-direction: column; align-items: center; justify-content: center; - - .message-time { - font-size: 0.1rem; - color: $--message-time-color; - } + } + .message-text { + font-family: 'Cafe24Ohsquareair'; + font-weight: bold; + } + .message-time { + font-family: 'Cafe24Ohsquareair'; + font-size: 0.5rem; + color: $--message-time-color; } } .message-row { display: grid; grid-template-columns: 80%; - margin-bottom: 20px; + margin-bottom: 1rem; > .message-content { display: grid; - > img { border-radius: 100%; grid-row: span 3; @@ -64,12 +66,16 @@ $--error-color: #d9534f; } > .message-time { - margin-left: 0.5rem; - font-size: 0.1rem; + font-family: 'Cafe24Ohsquareair'; + margin-left: 0.2rem; + font-size: 0.5rem; + margin-top: -2px; color: $--message-time-color; } > .message-username { - margin-left: 0.5rem; + font-family: 'Cafe24Ohsquareair'; + font-weight: bold; + margin-left: 0.3rem; margin-bottom: 0.1rem; font-size: 0.7rem; color: $--message-user-color; diff --git a/client/src/components/Chat/index.js b/client/src/components/Chat/index.js index 054d388..8c29ba0 100755 --- a/client/src/components/Chat/index.js +++ b/client/src/components/Chat/index.js @@ -30,26 +30,25 @@ const Chat = () => { socket.emit('joinRoom', userCrewId, userId, nickname); socket.emit('getAllMessages', userId, userCrewId); socket.on('getAllMessages', (data) => { + console.log(data); setMessages([...data]); }); }, []); useEffect(() => { - socket.on( - 'recvMessage', - (userId, nickname, message, createdAt, serverMsg, profileImg) => { - setSocketMsg({ - userId: userId, - nickname: nickname, - message: message, - createdAt: createdAt, - serverMsg: serverMsg, - profileImg: profileImg, - }); - } - ); + socket.on('recvMessage', (data) => { + setSocketMsg({ + userId: data.userId, + nickname: data.nickname, + message: data.message, + createdAt: data.createdAt, + serverMsg: data.serverMsg, + profileImg: data.image, + }); + }); }, []); useEffect(() => { + console.log(messages); if (socketMsg.message) { setMessages([...messages, socketMsg]); } diff --git a/client/src/components/CrewModal/CrewModal.js b/client/src/components/CrewModal/CrewModal.js index 18b18b7..ee8a273 100755 --- a/client/src/components/CrewModal/CrewModal.js +++ b/client/src/components/CrewModal/CrewModal.js @@ -25,15 +25,17 @@ const CrewModal = ({ crewModalHandler, crewId }) => { //!클릭한 위치가 바뀔때 마다 모달 정보 수정 useEffect(async () => { - await axios - .get(`${process.env.REACT_APP_SERVER}/crew/${crewId}`) - .then((res) => { - console.log('크루 모달의 응답 정보', res.data); - setCrewData({ - ...res.data.data, - participant: res.data.CrewInUser, + if (crewId !== 0) { + await axios + .get(`${process.env.REACT_APP_SERVER}/crew/${crewId}`) + .then((res) => { + console.log('크루 모달의 응답 정보', res.data); + setCrewData({ + ...res.data.data, + participant: res.data.CrewInUser, + }); }); - }); + } }, [crewId]); // 크루가입이 가능한지 확인 diff --git a/client/src/components/Landing/Create.js b/client/src/components/Landing/Create.js index 3e1a534..cf719b1 100755 --- a/client/src/components/Landing/Create.js +++ b/client/src/components/Landing/Create.js @@ -1,6 +1,7 @@ import React, { useRef, useEffect } from 'react'; import './Create.scss'; import create from './LandingSVG/createNew.gif'; +import createBack from './LandingSVG/createBack.svg' import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); @@ -8,17 +9,18 @@ gsap.registerPlugin(ScrollTrigger); function Join() { const joinGIF = useRef(null); const joinText = useRef(null); + const joinBack = useRef(null); useEffect(() => { gsap.to(joinGIF.current, { - y: '60%', + y: '40%', duration: 1, ease: 'back', opacity: 1, scrollTrigger: { scrub: 1, - start: '40% top', + start: '35% top', // markers: true, } @@ -30,11 +32,25 @@ function Join() { opacity: 1, scrollTrigger: { scrub: 1, - start: '40% top', + start: '35% top', // markers: true, } }); + gsap.to(joinBack.current, { + x: '70%', + duration: 1, + ease: 'back', + opacity: 1, + scrollTrigger: { + scrub: 1, + start: '30% top', + // markers: true, + } + }) + + + @@ -43,10 +59,11 @@ function Join() {
-
-
내가 원하는 곳에서 얼마나 달릴지
-
쉽고 빠르게 Do Run 크루를 만들고
-
Do Run 메이트를 모집할 수도 있습니다!
+ +
+
내가 원하는 장소, 원하는 시간에 맞춰
+
쉽고 빠르게 Do Run 크루를 만들어
+
함께 뛸 메이트를 모집할 수도 있습니다!
diff --git a/client/src/components/Landing/Create.scss b/client/src/components/Landing/Create.scss index 84245b3..43fc001 100755 --- a/client/src/components/Landing/Create.scss +++ b/client/src/components/Landing/Create.scss @@ -1,6 +1,7 @@ .joinWrapper{ - margin: 15rem auto; - // border: 1px solid blue; + width: 100%; + margin-top: 3vw auto 10rem auto; + // border: 1px solid blue; } .join{ @@ -13,7 +14,7 @@ flex-direction: column; width: 40vw; height: 40vw; - margin-top: 7vw; + margin-top: 10vw; margin-left: 7vw; margin-bottom: 50vw; border-radius: 8px; @@ -21,25 +22,41 @@ // border: 1px solid green; } -.joinContenText{ +.joinContentBack { + position: absolute; + width: 60vw; + height: 60vw; + margin-top: 15%; + margin-left: 5vw; + z-index: 1; + // border: 1px solid red; + opacity: 0.5; +} + +.joinContentText{ + position: relative; flex-direction: column; width: 50vw; height: 30vw; - margin-top: 35vw; + margin-top: 55vw; text-align: center; + font-size: 2vw; justify-content: center; - background-image: url('./LandingSVG/blob2.png'); - background-position: center; - background-repeat: no-repeat; - background-size: 50vw; + z-index: 10; + // background-image: url('./LandingSVG/blob2.png'); + // background-position: center; + // background-repeat: no-repeat; + // background-size: 50vw; // border: 1px solid orange; } .joinContenLine{ + position: relative; font-size: 2vw; font-weight: 500; + z-index: 10; &:nth-child(1) { - margin-top: 10vw; + margin-top: 12vw; } // border: 1px solid gray; } diff --git a/client/src/components/Landing/DoChat.js b/client/src/components/Landing/DoChat.js index 40229b1..42fb242 100755 --- a/client/src/components/Landing/DoChat.js +++ b/client/src/components/Landing/DoChat.js @@ -3,48 +3,65 @@ import './DoChat.scss'; import doChat from './LandingSVG/doChat.gif' import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; -gsap.registerPlugin(ScrollTrigger); +import { TextPlugin } from "gsap/TextPlugin"; +gsap.registerPlugin(ScrollTrigger, TextPlugin); + function DoChat() { const dotsLeft = useRef(null); const dotsRight = useRef(null); + const bubbleLeft = useRef(null); + const bubbleRight = useRef(null); const chatText = useRef(null); + const doChatGIF = useRef(null); + const doChatBubbles = useRef(null); useEffect(() => { - gsap.to(dotsLeft.current, { - y: '-100%', - duration: 3, - ease: 'elastic', - opacity: 1, + gsap.to(doChatGIF.current, { + y: '-50%', + duration: 5, + ease: 'back', scrollTrigger: { scrub: 1, - start: '60% top', + start: '45% top', + // markers: true, } - }); + }) - gsap.to(dotsRight.current, { - y: '-100%', + gsap.to(doChatBubbles.current, { + y: '-50%', duration: 3, - ease: 'elastic', - opacity: 1, + ease: 'back', scrollTrigger: { - scrub: 1, - start: '60% top', + start: '45% top', + // markers: true, } - }); - + }) gsap.to(chatText.current, { - y: '120%', - duration: 3, + text: { + value: "같은 크루의 Do Run 메이트들과 간편하게 연락을 주고 받아보세요!" + }, + duration: 5, + ease: "none", + repeat: -1, + repeatDelay: 1, + }) + + gsap.to(bubbleLeft.current, { + y: '-80%', + duration: 4, ease: 'elastic', - opacity: 1, - scrollTrigger: { - scrub: 1, - start: '55% top', - // markers: true, - } - }); + repeat: -1, + }) + gsap.to(bubbleRight.current, { + y: '-80%', + duration: 4, + ease: 'elastic', + repeat: -1, + + }) + }) @@ -53,16 +70,14 @@ function DoChat() { return (
- -
-
+ +
+
...
-
크루의 Do Run 메이트들과
-
간편하게 연락을 주고 받을 수도 있습니다
-
+
...
diff --git a/client/src/components/Landing/DoChat.scss b/client/src/components/Landing/DoChat.scss index bda62de..b2449a4 100755 --- a/client/src/components/Landing/DoChat.scss +++ b/client/src/components/Landing/DoChat.scss @@ -1,6 +1,7 @@ .doChatWrapper{ - margin: 20rem auto; - // border: 1px solid blue; + width: 100%; + margin: 10rem auto; + // border: 1px solid blue; } .doChat{ @@ -11,7 +12,7 @@ .doChatGIF{ width: 45vw; height: 30vw; - margin: 2vw 30%; + margin: 5vw 30% 0px 30%; z-index: 999; // border: 1px solid orange; } @@ -27,7 +28,8 @@ .doChatBubblesText{ width: 35vw; height: 15vw; - margin-top: -20vw; + // margin-top: 5vw; + font-size: 2vw; text-align: center; justify-content: center; z-index: 1; @@ -41,11 +43,13 @@ margin-top: 3vw; } } + .doChatBubbleLeft { width: 15vw; height: 15vw; flex-direction: column; margin-left: 5vw; + margin-top: 2vw; margin-right: 10vw; background-image: url(https://cdn-icons-png.flaticon.com/512/2598/2598830.png); background-position: center; @@ -57,7 +61,7 @@ .doChatBubbleLeftDots{ text-align: center; justify-content: center; - margin: 50% 35%; + margin: 25% 35%; font-size: 3vw; font-weight: 900; letter-spacing: 1vw; @@ -68,7 +72,7 @@ .doChatBubbleRightDots{ text-align: center; justify-content: center; - margin: 50% 35%; + margin: 25% 35%; font-size: 3vw; font-weight: 900; letter-spacing: 1vw; @@ -82,6 +86,7 @@ height: 15vw; flex-direction: column; margin-left: 10vw; + margin-top: 2vw; background-image: url(https://cdn-icons-png.flaticon.com/512/2598/2598830.png); background-position: center; background-repeat: no-repeat; diff --git a/client/src/components/Landing/LandingSVG/createBack.svg b/client/src/components/Landing/LandingSVG/createBack.svg new file mode 100644 index 0000000..2050b20 --- /dev/null +++ b/client/src/components/Landing/LandingSVG/createBack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/components/Landing/LandingSVG/medalBack.svg b/client/src/components/Landing/LandingSVG/medalBack.svg new file mode 100644 index 0000000..80998bb --- /dev/null +++ b/client/src/components/Landing/LandingSVG/medalBack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/components/Landing/LandingSVG/search.gif b/client/src/components/Landing/LandingSVG/search.gif deleted file mode 100755 index e437242..0000000 Binary files a/client/src/components/Landing/LandingSVG/search.gif and /dev/null differ diff --git a/client/src/components/Landing/LandingSVG/topBtn.png b/client/src/components/Landing/LandingSVG/topBtn.png new file mode 100644 index 0000000..262a226 Binary files /dev/null and b/client/src/components/Landing/LandingSVG/topBtn.png differ diff --git a/client/src/components/Landing/Mate.js b/client/src/components/Landing/Mate.js index 9a32086..fe6eebb 100755 --- a/client/src/components/Landing/Mate.js +++ b/client/src/components/Landing/Mate.js @@ -44,18 +44,17 @@ function Mate() { } }); gsap.to(FAQ.current, { - x: '35%', + x: '40%', duration: 1, ease: 'back', opacity: 1, scrollTrigger: { scrub: 1, - } }); gsap.to(mate.current, { - x: '-35%', + x: '-40%', duration: 4, ease: 'back', opacity: 1, diff --git a/client/src/components/Landing/Mate.scss b/client/src/components/Landing/Mate.scss index 73d332d..ee02748 100755 --- a/client/src/components/Landing/Mate.scss +++ b/client/src/components/Landing/Mate.scss @@ -1,17 +1,21 @@ .mateWrapper{ + width: 100%; position: relative; - margin: 20rem auto; + margin: 20rem auto 10rem auto; background-image: url("../Landing/LandingSVG/blob.svg"); background-position: center; background-repeat: no-repeat; - background-size: 50vw; + background-size: 70vw; + // border: 1px solid red; } .mateBack{ z-index: 1; + // border: 1px solid red; } .mateLine { + font-family: 'Cafe24Ohsquare'; font-size: 2.5vw; font-weight: 500; line-height: 160%; @@ -30,17 +34,17 @@ .FAQ{ flex-direction: column; flex: 1 1 auto; - width: 35vw; - height: 35vw; - margin-top: 5vw; + width: 30vw; + height: 30vw; + // margin-top: 5vw; transform: rotate(90deg); } .mate{ flex-direction: column; flex: 1 1 auto; - width: 40vw; - height: 45vw; + width: 30vw; + height: 30vw; } diff --git a/client/src/components/Landing/Medal.js b/client/src/components/Landing/Medal.js index e701d1c..53ad2a4 100755 --- a/client/src/components/Landing/Medal.js +++ b/client/src/components/Landing/Medal.js @@ -5,94 +5,167 @@ import medal1 from './LandingSVG/medal1.png'; import medal2 from './LandingSVG/medal2.png'; import medal3 from './LandingSVG/medal3.png'; import winner from './LandingSVG/winner.png'; +import topBtn from './LandingSVG/topBtn.png'; +import medalsBack from './LandingSVG/medalBack.svg'; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); + function Medal() { - const growing = useRef(null); - const medalFirst = useRef(null); - const medalSecond = useRef(null); - const medalThird = useRef(null); - const winnerTrophy = useRef(null); - - useEffect(() => { - - - gsap.to(growing.current, { - x: '60%', - duration: 3, - ease: 'back', - opacity: 1, - scrollTrigger: { - scrub: 3, - start: '65% top', - // markers: true, - } - }); - gsap.to(medalFirst.current, { - y: '-80%', - duration: 24, - ease: 'back', - opacity: 1, - scrollTrigger: { - scrub: 1, - start: '68% top', - } - }); - gsap.to(medalSecond.current, { - y: '-80%', - duration: 48, - ease: 'back', - opacity: 1, - scrollTrigger: { - scrub: 1, - start: '70% top', - } - }); - gsap.to(medalThird.current, { - y: '-80%', - duration: 72, - ease: 'back', - opacity: 1, - scrollTrigger: { - scrub: 1, - start: '72% top', - } - }); - gsap.to(winnerTrophy.current, { - y: '-80%', - duration: 96, - ease: 'back', - opacity: 1, - scrollTrigger: { - scrub: 1, - start: '74% top', - } - }); + const growing = useRef(null); + const medalFirst = useRef(null); + const medalSecond = useRef(null); + const medalThird = useRef(null); + const winnerTrophy = useRef(null); + const theTopBtn = useRef(null); + const medalBackIMG = useRef(null); + + useEffect(() => { + + gsap.to(growing.current, { + x: "60%", + duration: 4, + scrollTrigger: { + scrub: 1, + start: '65% top', + // markers: true, + } + }); + gsap.to(medalFirst.current, { + y: '-250%', + duration: 11, + ease: 'back', + opacity: 1, + scrollTrigger: { + scrub: 1, + start: '65% top', + // markers: true, + } + }); + gsap.to(medalSecond.current, { + y: '-250%', + duration: 15, + ease: 'back', + opacity: 1, + scrollTrigger: { + scrub: 1, + start: '66% top', + // markers: true, + } + }); + gsap.to(medalThird.current, { + y: '-250%', + duration: 17, + ease: 'back', + opacity: 1, + scrollTrigger: { + scrub: 1, + start: '68% top', + // markers: true, + } + }); + gsap.to(winnerTrophy.current, { + y: '-250%', + duration: 20, + ease: 'back', + opacity: 1, + scrollTrigger: { + scrub: 1, + start: '70% top', + // markers: true, + } + }); + + gsap.to(theTopBtn.current, { + y: '-150%', + duration: 1, + ease: 'back', + opacity: 1, + satrt: "90%", + repeat: -1, + repeatDelay: 1, + // markers: true, + // scrollTrigger: { + // scrub: 1, + // start: "75%", + // markers: true, + // } }) + var tl = gsap.timeline( + { - return ( -
-
-
원할 때마다 한번씩 Do Run 메이트와 달리며
-
어느새 성장해있는 실력을 확인하세요!
-
-
- -
- - - - -
-
-
+ scrollTrigger: { + start: "55% top", + end: "bottom bottom", + opacity: 0, + scrub: 1, + // markers: true, + toggleActions: "play reverse play reverse", + } + } + ); + + + tl.to(medalBackIMG.current, + { + opacity: 0, + + } ) + tl.to(medalBackIMG.current, + { + opacity: 0.3, + + }) + tl.to(medalBackIMG.current, + { + opacity: 1, + + }) + + }); + + + + + const pageMovingHandler = () => { + + window.scrollTo({ + top: 0, + behavior: "smooth" + }); + } + + + + return ( +
+
+
Do Run 메이트와 함께 달리며
+
어느새 성장해있는 나의 실력을 확인하세요!
+
+
+ +
+ +
+
+ + + + +
+
+
+ +
+
+ ) } export default Medal diff --git a/client/src/components/Landing/Medal.scss b/client/src/components/Landing/Medal.scss index 55ab341..e83356d 100755 --- a/client/src/components/Landing/Medal.scss +++ b/client/src/components/Landing/Medal.scss @@ -1,19 +1,39 @@ .medalWrapper{ - margin: 20rem auto; + width: 100%; + margin: 10rem auto; // border: 1px solid rgb(175, 175, 179); +} + +.medalBackWrapper{ + position: absolute; + margin-top: 5vw; +} +.medalBack{ + position: relative; + width: 100%; + height: 60vw; + margin-left: 5%; + margin-top: -10%; + // border: 1px solid purple; + // background-color: olive; } + .growingTextWrapper{ - height: 10vw; - text-align: center; - justify-content: center; - // border: 1px solid purple; + position:absolute; + height: 10vw; + margin-left: 27%; + text-align: center; + justify-content: center; + z-index: 999; + // border: 1px solid purple; } .growingLine{ - font-size: 2vw; + font-size: 2.5vw; font-weight: 600; + z-index: 999; // border: 1px solid gray; } @@ -26,7 +46,8 @@ flex-direction: column; width: 30%; height: 50%; - margin-top: 3vw; + margin-top: 10vw; + z-index: 999; // border: 1px solid red; } @@ -34,8 +55,9 @@ display: flex; width: 50%; height: 50%; - margin-top: 10vw; + margin-top: 30vw; margin-left: 20vw; + z-index: 999; // border: 1px solid red; } @@ -43,17 +65,43 @@ .medal{ width: 7vw; height: 7vw; - margin-top: 9vw; + margin-top: 7vw; margin-left: 1vw; - &:last-child { + &:last-child() { height: 7.2vw; } // border: 1px solid green; } +.topBtn{ + // float: right; + width: 8vh; + height: 12vh; + margin-top: 10vh; + margin-left: 81vw; + text-align: center; + font-weight: 600; + font-size: 1.5vh; + color: rgb(90, 200, 214); + // border:1px solid red; +} + +.topBtnImg{ + width: 3vw; + height: 3vw; + margin-top: 50%; + transform: rotate(90deg); + cursor: pointer; + &:hover{ + color: white; + border-radius: 50px; + } +} + + @media screen and (max-width: 768px) { - .medalWrapper { - min-width: 320px; - } - } \ No newline at end of file + .medalWrapper { + min-width: 320px; + } +} \ No newline at end of file diff --git a/client/src/components/Landing/Search.js b/client/src/components/Landing/Search.js index d74e25f..585cf1a 100755 --- a/client/src/components/Landing/Search.js +++ b/client/src/components/Landing/Search.js @@ -8,63 +8,93 @@ gsap.registerPlugin(ScrollTrigger); function Search() { - const searchGIF = useRef(null); - const searchMate = useRef(null); - const searchText = useRef(null); + const searchGIF = useRef(null); + const searchMate = useRef(null); + const searchText = useRef(null); + const searchLeft = useRef(null); + const searchRight = useRef(null); - useEffect(() => { - gsap.to(searchGIF.current, { - y: '70%', - duration: 2, - ease: 'back', - opacity: 1, - scrollTrigger: { - scrub: 1, - start: '10 top', - // markers: true, - } - }); - gsap.to(searchMate.current, { - x: '-30%', - duration: 1, - ease: 'back', - opacity: 1, - scrollTrigger: { - scrub: 1, - // markers: true, - } - }); - gsap.to(searchText.current, { - x: '20%', - duration: 1, - ease: 'back', - opacity: 1, - scrollTrigger: { - scrub: 1, - } - }); + useEffect(() => { + gsap.to(searchGIF.current, { + y: '75%', + duration: 2, + ease: 'back', + opacity: 1, + scrollTrigger: { + scrub: 1, + start: '10% top', + // markers: true, + } + }); + gsap.to(searchLeft.current, { + x: '10%', + duration: 3, + ease: 'back', + opacity: 3, + scrollTrigger: { + scrub: 3, + start: 'top top', + // markers: true, + } + }); + gsap.to(searchRight.current, { + x: '-10%', + duration: 3, + ease: 'back', + opacity: 1, + scrollTrigger: { + scrub: 3, + start: '10% top', + // markers: true, + } + }); + gsap.to(searchMate.current, { + x: '-35%', + duration: 1, + ease: 'back', + opacity: 1, + scrollTrigger: { + scrub: 1, + start: '10% top', + // markers: true, + } + }); + gsap.to(searchText.current, { + x: '25%', + duration: 1, + ease: 'back', + opacity: 1, + scrollTrigger: { + scrub: 1, + start: '10% top', + } + }); - }); + }); - return ( - <> -
-
- -
-
-
-
손 안에 핸드폰만 있으면
-
언제 어디서든 함께 뛰어줄
-
Do Run 메이트를 만날 수 있습니다!
-
- -
-
- - ) + return ( + <> +
+
+ +
+
+
여의도 한강공원, 망원역 1번 출구, 서리풀 공원
+
합정역 4번 출구, 도림천, 한강공원 광나루 지구
+
+
+
+
손 안에 핸드폰만 있으면
+
언제 어디서든 함께 뛰어줄
+
Do Run 메이트를 만날 수 있습니다!
+
+ +
+
+ + ) } export default Search diff --git a/client/src/components/Landing/Search.scss b/client/src/components/Landing/Search.scss index e5e7a5b..c2c4257 100755 --- a/client/src/components/Landing/Search.scss +++ b/client/src/components/Landing/Search.scss @@ -1,60 +1,94 @@ .searchWrapper{ - margin: 30rem auto auto auto; - // border: 1px solid blue; + width: 100%; + margin: 15rem auto auto auto; + // border: 2px solid blue; } -.searchGIFWrapper{ - margin-top: -20vw; - // border: 1px solid blue; -} -.searchGIF{ - flex-direction: column; - width: 60vw; - height: 35vw; - margin-left: 20%; - margin-bottom: 20%; - border-radius: 12px; - // border: 1px solid red; +.searchGIFWrapperBack { + display: flex; + position: relative; } -.searchContentWrapper{ - display: flex; - // border: 1px solid red; -} +.searchLeft{ + position: absolute; + flex-direction: column; + flex: 1 1 auto; + width: fit-content; + height: 20vh; + margin-top: 3vw; + font-size: 5vw !important; + z-index: 5; + color:rgba(90, 206, 235, 0.322); + // border: 2px solid blue; + } + +.searchRight { + position:relative; + flex-direction: column; + flex: 1 1 auto; + width: fit-content; + height: 20vh; + text-align: right; + font-size: 5vw !important; + z-index: 1; + color:rgba(93, 182, 223, 0.445); + // border: 2px solid red; +} +.searchGIFWrapper{ + position: relative; + margin-top: -5vh; + z-index: 99; + // border: 1px solid blue; +} -.search{ - flex-direction: column; - width: 30vw; - height: 50vw; - margin-top: -20vw; - margin-left: 25vw; - z-index: 999; - // border: 1px solid red; +.searchGIF{ + flex-direction: column; + width: 60vw; + height: 35vw; + margin-left: 20%; + border-radius: 12px; + z-index: 99; + box-shadow: 1 1 1 1; + // border: 2px solid green; } - +.searchContentWrapper{ + display: flex; +} .searchContentText{ - width: 50vw; - height: 20vh; - margin-top: 3vw; - margin-left: 5vw; flex-direction: column; + width: 50vw; + height: 50vw; + margin-top: -20vh; + margin-left: 10vw; z-index: 999; - // border: 1px solid red; + // border: 2px solid black; } .searchContentLine { - font-size: 2.5vw; - font-weight: 500; - line-height: 4.5vw; + font-size: 2vw; + font-weight: 500; + &:nth-child(1) { + margin-top: 25vw; + } // border: 1px solid gray; } +.search{ + flex-direction: column; + width: 30vw; + height: 50vw; + margin-top: -20vh; + margin-left: 25vw; + z-index: 999; + // border: 2px solid black; +} + @media screen and (max-width: 768px) { .searchWrapper { min-width: 320px; diff --git a/client/src/components/Landing/Walk.js b/client/src/components/Landing/Walk.js index 5c0d0c0..c1a36f4 100755 --- a/client/src/components/Landing/Walk.js +++ b/client/src/components/Landing/Walk.js @@ -1,9 +1,10 @@ -import { gsap } from "gsap"; import React, { useRef, useEffect } from 'react'; +import { useHistory } from 'react-router-dom'; import './Walk.scss'; -import { ScrollTrigger } from "gsap/ScrollTrigger"; import walk from './LandingSVG/walk.svg'; +import { gsap } from "gsap"; gsap.registerPlugin(ScrollTrigger); +import { ScrollTrigger } from "gsap/ScrollTrigger"; function Walk() { @@ -15,28 +16,31 @@ function Walk() { gsap.to(run.current, { x: '20%', - duration: 1, + duration: 5, ease: 'back', opacity: 1, - scrollTrigger: { - scrub: 1, - } - + repeat: -1, + repeatDelay: 2, }); gsap.to(line.current, { - y: '-100%', - duration: 1, + y: '-50%', + duration: 5, ease: 'back', opacity: 1, - scrollTrigger: { - scrub: 1, - // markers: true, - } + repeat: -1, + repeatDelay: 2, }); }); + const history = useHistory(); + const pagehandler = () => { + history.push('/map') + } + + + return ( <>
@@ -45,7 +49,7 @@ function Walk() {
혼자 뛰기 심심할 때,
'오늘만 함께 할'
Do Run 메이트를 만들어보세요!
-
Do Run!!
+
Do Run!!
diff --git a/client/src/components/Landing/Walk.scss b/client/src/components/Landing/Walk.scss index 37069da..6e49ad2 100755 --- a/client/src/components/Landing/Walk.scss +++ b/client/src/components/Landing/Walk.scss @@ -1,4 +1,5 @@ .walkWrapper { + width: 100%; display: flex; margin: 15rem auto 10rem auto; // border: 1px solid blue; @@ -56,6 +57,7 @@ background-position: right center; color: #fff; text-decoration: none; + cursor: pointer; } } diff --git a/client/src/components/Map/KakaoMap.js b/client/src/components/Map/KakaoMap.js deleted file mode 100755 index 52973e3..0000000 --- a/client/src/components/Map/KakaoMap.js +++ /dev/null @@ -1,59 +0,0 @@ -/*global kakao*/ -import React, { useEffect, useState } from 'react'; -import { markerdata } from './markerData'; -import './KakaoMap.scss'; -import CrewModal from '../CrewModal/CrewModal'; -const { kakao } = window; - -const KakaoMap = () => { - const [crewModalPosition, setCrewModalPosition] = useState('down'); - - const crewModalHandler = () => { - crewModalPosition === 'down' - ? setCrewModalPosition('up') - : setCrewModalPosition('down'); - }; - - useEffect(() => { - createMap(); - }, []); - - const createMap = () => { - let container = document.getElementById('myMap'); - let options = { - center: new kakao.maps.LatLng(37.52805120266989, 126.98002145551034), - level: 7, - }; - const map = new kakao.maps.Map(container, options); - - markerdata.forEach((el) => { - // 마커를 생성 - let marker = new kakao.maps.Marker({ - // 마커가 표시 될 지도 - map: map, - // 마커가 표시 될 위치 - position: new kakao.maps.LatLng(el.lat, el.lng), - // 마커에 hover시 나타날 title - title: el.title, - }); - kakao.maps.event.addListener(marker, 'click', function () { - setCrewModalPosition('up'); - }); - }); - }; - - return ( - <> -
-
- -
- - ); -}; - -export default KakaoMap; diff --git a/client/src/components/Map/KakaoMap.scss b/client/src/components/Map/KakaoMap.scss deleted file mode 100755 index 24208dc..0000000 --- a/client/src/components/Map/KakaoMap.scss +++ /dev/null @@ -1,63 +0,0 @@ -.up { - position: fixed; - left: 20%; - top: 50%; - transform: translate(-50%, -50%); - transition: all 0.5s; - padding: 10px; - box-shadow: -2px 2px 10px 10px rgba(107, 107, 107, 0.2); - border-radius: 10px; - background-color: #f8f9fa; - z-index: 9999; -} - -.down { - position: fixed; - left: 20%; - top: 150%; - transform: translate(-50%, -50%); - transition: all 0.5s; -} - -@media screen and (max-width: 1023px) { - .up { - position: fixed; - left: 30%; - top: 50%; - transform: translate(-50%, -50%); - transition: all 0.5s; - padding: 10px; - box-shadow: -2px 2px 10px 10px rgba(107, 107, 107, 0.2); - border-radius: 10px; - background-color: #f8f9fa; - } - - .down { - position: fixed; - left: 30%; - top: 150%; - transform: translate(-50%, -50%); - transition: all 0.5s; - } -} - -@media screen and (max-width: 768px) { - .up { - position: fixed; - left: 50%; - top: 72%; - transform: translate(-50%, -50%); - transition: all 0.5s; - padding: 10px; - box-shadow: -2px 2px 10px 10px rgba(107, 107, 107, 0.2); - border-radius: 10px; - background-color: #f8f9fa; - } - .down { - position: fixed; - left: 50%; - top: 150%; - transform: translate(-50%, -50%); - transition: all 0.5s; - } -} diff --git a/client/src/components/Map/Map.js b/client/src/components/Map/Map.js index 73642c1..dc7ed8d 100755 --- a/client/src/components/Map/Map.js +++ b/client/src/components/Map/Map.js @@ -42,7 +42,7 @@ const Map = () => { const script = document.createElement('script'); script.async = true; script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${REACT_APP_KAKAO_MAP}&autoload=false`; - document.head.appendChild(script); + document.body.appendChild(script); script.onload = () => { const { kakao } = window; @@ -55,6 +55,7 @@ const Map = () => { draggable: true, disableDoubleClickZoom: false, }; + console.log('container', container); const createdMap = new kakao.maps.Map(container, options); setMap(createdMap); // ----------------------------------------------------------------------- basic setting @@ -103,10 +104,10 @@ const Map = () => { createdMap, 'click', function (mouseEvent) { - console.log( - '생성마커 모달 값 in 지도 이벤트', - createModalPosition - ); + // console.log( + // '생성마커 모달 값 in 지도 이벤트', + // createModalPosition + // ); var latlng = mouseEvent.latLng; createMarker.setPosition(latlng); let overlayPosition = customOverlay.getPosition(); @@ -144,8 +145,8 @@ const Map = () => { .then((res) => { //! 단순히 지도에 렌더만 담당(forEach) let crewData = res.data.data; - console.log(); - console.log('지도 렌더 시에 렌더 되는 내용들입니다', res); + // console.log(); + // console.log('지도 렌더 시에 렌더 되는 내용들입니다', res); crewData.forEach((el) => { // console.log('크루 데이터 속', el) let Ma = el.locationMa; @@ -168,8 +169,9 @@ const Map = () => { // console.log('정보 좀 줘', joinMarker.getPosition()) // console.log('크루 아이디로 정보를 주세요', joinMarker.Gb) const joinMarkerId = joinMarker.Gb; - console.log('마커의 데이터', joinMarkerId); + // console.log('마커의 데이터', joinMarkerId); // setCrewIdInfo('왜 안 될까') + setCrewIdInfo(joinMarkerId); }); }); diff --git a/client/src/components/Map/markerData.js b/client/src/components/Map/markerData.js deleted file mode 100755 index f947793..0000000 --- a/client/src/components/Map/markerData.js +++ /dev/null @@ -1,57 +0,0 @@ -export const markerdata = [ - { - title: '양화한강공원', - lat: 37.53844512548521, - lng: 126.90223279603168, - }, - { - title: '선유도공원', - lat: 37.543756128919966, - lng: 126.8997155978389, - }, - { - title: '노들길 나들목', - lat: 37.53579731042682, - lng: 126.90463648434651, - }, - { - title: '여의도 한강공원', - lat: 37.52858353293326, - lng: 126.93309955551037, - }, - { - title: '망원한강공원 주차장', - lat: 37.554048603077426, - lng: 126.89724604016716, - }, - { - title: '여의도공원앞', - lat: 37.528563456861285, - lng: 126.92449721826262, - }, - { - title: '성산대교남단', - lat: 37.54825259880813, - lng: 126.88873952667497, - }, - { - title: '망원한강공원', - lat: 37.555913298394906, - lng: 126.89453801133116, - }, - { - title: '양화대교남단', - lat: 37.53934354728993, - lng: 126.9003282690028, - }, - { - title: '상수역 4번출구', - lat: 37.547674656932266, - lng: 126.92271463544387, - }, - { - title: '마포구청역 7번출구', - lat: 37.563126212460794, - lng: 126.90320782683126, - }, -]; diff --git a/client/src/components/SocialLogin/Google.js b/client/src/components/SocialLogin/Google.js index 0b1d303..1d7fa06 100755 --- a/client/src/components/SocialLogin/Google.js +++ b/client/src/components/SocialLogin/Google.js @@ -1,20 +1,23 @@ import React from 'react'; import { useDispatch } from 'react-redux'; -import { useHistory } from 'react-router-dom'; import { GoogleLogin } from 'react-google-login'; import { googleUser } from '../../_actions/user_action'; const { REACT_APP_GOOGLE_CLIENT_ID } = process.env; const SocialLoginGoogle = () => { - const history = useHistory(); const dispatch = useDispatch(); // 구글 연동 성공 시 실행되는 함수 const responseSucess = async (response) => { const handleLogin = async (e) => { - dispatch(googleUser(response.profileObj)); - document.location.href = '/'; + dispatch(googleUser(response.profileObj)) + .then((res) => { + if (res.payload.data.id) { + document.location.href = '/'; + } + }) + .catch((e) => console.log(e)) }; handleLogin(); @@ -23,7 +26,6 @@ const SocialLoginGoogle = () => { // 구글 연동 실패 시 실행되는 함수 const responseFail = (e) => { console.log(e); - history.push('/'); }; return ( diff --git a/client/src/components/SocialLogin/Kakao.js b/client/src/components/SocialLogin/Kakao.js index 0f4a4bc..ab56187 100755 --- a/client/src/components/SocialLogin/Kakao.js +++ b/client/src/components/SocialLogin/Kakao.js @@ -2,8 +2,7 @@ import axios from 'axios'; import './Kakao.scss'; import { useDispatch, useSelector } from 'react-redux'; import { kakaoUser } from '../../_actions/user_action'; -const { REACT_APP_KAKAO_SOCIAL_LOGIN, REACT_APP_KAKAO_REDIRECT_URL } = - process.env; +const { REACT_APP_KAKAO_SOCIAL_LOGIN, REACT_APP_KAKAO_REDIRECT_URL } = process.env; axios.defaults.withCredentials = true; const SocialLoginKakao = () => { @@ -14,7 +13,6 @@ const SocialLoginKakao = () => { const kakaoAPI = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REACT_APP_KAKAO_SOCIAL_LOGIN}&redirect_uri=${REACT_APP_KAKAO_REDIRECT_URL}`; const dispatch = useDispatch(); - const user = useSelector((state) => state.user); // 카카오 로그인 페이지를 로드합니다. const handleSocialLoginWithKakao = () => { @@ -23,11 +21,14 @@ const SocialLoginKakao = () => { let requestURL = new URL(window.location.href); let code = requestURL.searchParams.get('code'); + // console.log('카카오페이지 인가코드', code) if (code) { dispatch(kakaoUser(code)) .then((res) => { - document.location.href = '/'; + if (res.payload.message === 'success') { + document.location.href = '/'; + } }) .catch((e) => console.log(e)); } diff --git a/client/src/components/Withdrawal/Withdrawal.js b/client/src/components/Withdrawal/Withdrawal.js index a4f4eba..a8be13c 100755 --- a/client/src/components/Withdrawal/Withdrawal.js +++ b/client/src/components/Withdrawal/Withdrawal.js @@ -1,13 +1,8 @@ import React, { useState } from 'react'; -import { useSelector, useDispatch } from 'react-redux'; import './Withdrawal.scss'; import WithdrawalModal from '../WithdrawalModal/WithdrawalModal'; -import { signoutUser } from '../../_actions/user_action'; -import { withdrawalCrew } from '../../_actions/crew_action'; const Withdrawal = () => { - const userId = useSelector((state) => state.user.userId); - const dispatch = useDispatch(); const [isActive, setIsActive] = useState(false); const [isWithdrawalModalOpen, setIsWithdrawalModalOpen] = useState(false); @@ -15,18 +10,6 @@ const Withdrawal = () => { setIsActive(!isActive); }; - const clicked = () => { - dispatch(withdrawalCrew(userId)); - dispatch(signoutUser(userId)) - .then((res) => { - console.log('탈퇴에 대한 응답입니다.', res); - WithdrawalModalHandler(); - }) - .catch((e) => { - console.log(e); - }); - }; - const WithdrawalModalHandler = () => { setIsWithdrawalModalOpen(!isWithdrawalModalOpen); }; @@ -64,7 +47,7 @@ const Withdrawal = () => {