Merge pull request #21 from Mokodoko/feature199

[Server] 소켓 이미지 에러 수정
codestates · Nov 16, 2021 · 698141f · 698141f
2 parents a459339 + 95059c5
commit 698141f
Show file tree

Hide file tree

Showing 39 changed files with 641 additions and 533 deletions.
diff --git a/README.md b/README.md
@@ -27,10 +27,13 @@
 <img alt="JavaScript" src ="https://img.shields.io/badge/JavaScript-F7DF1E.svg?&style=for-the-badge&logo=JavaScript&logoColor=000"/> <img alt="React" src ="https://img.shields.io/badge/React-61DAFB.svg?&style=for-the-badge&logo=React&logoColor=000000"/>
 <img alt="React Hooks" src ="https://img.shields.io/badge/React Hooks-61DAFB.svg?&style=for-the-badge&logo=React&logoColor=000000"/>
 <img alt="Redux" src ="https://img.shields.io/badge/Redux-764ABC.svg?&style=for-the-badge&logo=Redux&logoColor=fff"/>
+<img alt="Redux Persist" src ="https://img.shields.io/badge/Redux Persist-764ABC.svg?&style=for-the-badge&logo=Redux&logoColor=fff"/>
 <img alt="React Router" src ="https://img.shields.io/badge/React Router-CA4245.svg?&style=for-the-badge&logo=React Router&logoColor=fff"/>
 <img alt="Axios" src ="https://img.shields.io/badge/Axios-B31B1B.svg?&style=for-the-badge&logo=Axios&logoColor=fff"/>
 <img alt="Sass" src ="https://img.shields.io/badge/Sass-CC6699.svg?&style=for-the-badge&logo=Sass&logoColor=fff"/>
 <img alt="styled-components" src ="https://img.shields.io/badge/styled components-DB7093.svg?&style=for-the-badge&logo=styled components&logoColor=fff"/>
+<img alt="GSAP" src ="https://img.shields.io/badge/GSAP-68BC71.svg?&style=for-the-badge&logo=GSAP&logoColor=fff"/>
+
 
 ### Back-End
 <img alt="TypeScript" src ="https://img.shields.io/badge/TypeScript-3178C6.svg?&style=for-the-badge&logo=TypeScript&logoColor=fff"/> <img alt="Node.js" src ="https://img.shields.io/badge/Node.js-339933.svg?&style=for-the-badge&logo=Node.js&logoColor=fff"/>
@@ -39,6 +42,10 @@
 <img alt="typeORM" src ="https://img.shields.io/badge/typeORM-C9284D.svg?&style=for-the-badge&logo=typeORM&logoColor=fff"/>
 <img alt="JSON Web Tokens" src ="https://img.shields.io/badge/JSON Web Tokens-000000.svg?&style=for-the-badge&logo=JSON Web Tokens&logoColor=fff"/>
 <img alt="Socket.io" src ="https://img.shields.io/badge/Socket.io-010101.svg?&style=for-the-badge&logo=Socket.io&logoColor=ffffff"/>
+<img alt="Redis" src ="https://img.shields.io/badge/Redis-DC382D.svg?&style=for-the-badge&logo=Redis&logoColor=ffffff"/>
+<img alt="Cluster" src ="https://img.shields.io/badge/Cluster-DC382D.svg?&style=for-the-badge&logo=Cluster&logoColor=ffffff"/>
+
+
 
 ### Deploy
 <img alt="Amazon AWS" src ="https://img.shields.io/badge/Amazon AWS-232F3E.svg?&style=for-the-badge&logo=Amazon AWS&logoColor=ffffff"/>

diff --git a/client/public/DoRun_favicon.png b/client/public/DoRun_favicon.png
diff --git 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
@@ -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
@@ -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
@@ -54,6 +54,7 @@ const Input = ({ socket, userId, userCrewId, nickname }) => {
           type="text"
           placeholder="Enter Message"
           autoComplete="off"
+          autoFocus
         />
         {showEmojis && (
           <div>

diff --git a/client/src/components/Chat/MessageList/MessageList.js b/client/src/components/Chat/MessageList/MessageList.js
@@ -42,7 +42,7 @@ const MessageList = ({ messages, userId }) => {
               <div className="message-row other-message" key={index}>
                 <div className="message-content">
                   <img
-                    src={el.profileImg || '/defaultImg.png'}
+                    src={el.profileImg || el.crew.users[0].image}
                     alt="profileImg"
                   />
                   <div className="message-username">{el.nickname}</div>

diff --git 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
@@ -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
@@ -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
@@ -1,24 +1,26 @@
 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);
 
 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() {
         <div className="joinWrapper">
             <div className='join'>
                 <img className='joinGIF' src={create} ref={joinGIF} />
-                <div className='joinContenText' ref={joinText}>
-                    <div className='joinContenLine' > 내가 원하는 곳에서 얼마나 달릴지</div>
-                    <div className='joinContenLine' > 쉽고 빠르게 Do Run 크루를 만들고</div>
-                    <div className='joinContenLine' > Do Run 메이트를 모집할 수도 있습니다!</div>
+                <img className="joinContentBack" src={createBack} ref={joinBack} />
+                <div className='joinContentText' ref={joinText}>
+                    <div className='joinContentLine' > 내가 원하는 장소, 원하는 시간에 맞춰</div>
+                    <div className='joinContentLine' > 쉽고 빠르게 Do Run 크루를 만들어</div>
+                    <div className='joinContentLine' > 함께 뛸 메이트를 모집할 수도 있습니다!</div>
                 </div>
             </div>
         </div>

diff --git 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,33 +14,49 @@
   flex-direction: column;
   width: 40vw;
   height: 40vw;
-  margin-top: 7vw;
+  margin-top: 10vw;
   margin-left: 7vw;
   margin-bottom: 50vw;
   border-radius: 8px;
   z-index: 999;
   // 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;
 }