Merge branch 'feature/member_seperateBtn' into develop

Author: dduddu92

src/components/member/ButtonContainer.jsx

@@ -20,7 +20,7 @@ function ButtonContainer({ isMyPage, myUid, isLoggedUser }) {
         <>
           <button onClick={setPage.bind(this, `/customFish/`)}>
             <img src="./assets/images/member/button.png" alt="붕어빵 만들기 버튼" />
-            <span>붕어빵 만들기</span>
+            <span>붕어빵 보내기</span>
           </button>
           <button onClick={setPage.bind(this, `/`)} className="buttonLink">
             <span>로그인 하러 가기</span>
@@ -32,7 +32,7 @@ function ButtonContainer({ isMyPage, myUid, isLoggedUser }) {
         <>
           <button onClick={setPage.bind(this, `/customFish/`)}>
             <img src="./assets/images/member/button.png" alt="붕어빵 만들기 버튼" />
-            <span>붕어빵 만들기</span>
+            <span>붕어빵 보내기</span>
           </button>
           <button
             onClick={() => {

src/components/member/SectionTitle.jsx

@@ -2,11 +2,10 @@ import { useRef, useState, useEffect } from 'react';
 import useAxios from '../../hooks/useAxios';
 import styled from 'styled-components';
 
-function SectionTitle({ fishSizeAll, isMyPage, logout, user, saveUser }) {
+function SectionTitle({ fishSizeAll, isMyPage, logout, user, saveUser, isLoggedUser }) {
   const [isEditMode, setIsEditMode] = useState(false);
   const [userName, setUserName] = useState(user?.nickname);
   const [newUserName, setNewUserName] = useState();
-  const [randomComment, setRandomCommnet] = useState();
   const copyUrlRef = useRef();
   const { requestApi } = useAxios();
 
@@ -58,38 +57,6 @@ function SectionTitle({ fishSizeAll, isMyPage, logout, user, saveUser }) {
     alert('복사되었습니다.');
   };
 
-  const twoCatsRandomComment = [
-    '어서오라냥~',
-    '날마다 오는 붕어빵이 아니다냥',
-    '맛있는 붕어빵이 있다냥!',
-    '친구랑 나눠먹어도 맛있다냥',
-    '붕어빵 사가라냥!',
-    '붕어빵 만들지 않겠냥?',
-    '재료도 고를 수 있다냥!',
-    '천원도 카드 된다냥!',
-  ];
-
-  let timeout;
-  const refreshComment = () => {
-    let currentComment = (
-      <CatsComment>
-        {twoCatsRandomComment[Math.floor(Math.random() * twoCatsRandomComment.length)]}
-      </CatsComment>
-    );
-    setRandomCommnet(currentComment);
-
-    // timeout = setTimeout(() => {
-    //   clearTimeout(timeout);
-
-    //   refreshComment();
-    // }, 5000);
-  };
-
-  useEffect(() => {
-    refreshComment();
-    // return () => clearTimeout(timeout);
-  }, []);
-
   return (
     <SectionTitleWrap>
       {/* 붕어빵이 n개 있습니다냥 */}
@@ -111,10 +78,14 @@ function SectionTitle({ fishSizeAll, isMyPage, logout, user, saveUser }) {
           붕어빵이 <span className="sizeAll">{fishSizeAll}</span>개 있다냥
         </NickNameChangeForm>
       ) : (
-        <TwoCatsCommentBubble>{randomComment}</TwoCatsCommentBubble>
+        <OtherUserWrap>
+          <span className="otherUserName">비 로그인 유저의</span>
+          <br />
+          붕어빵이 <span className="sizeAll">3</span>개 있다냥
+        </OtherUserWrap>
       )}
 
-      <div className="right">
+      <RightButtonsWrap>
         {/* url 복사 */}
         <CopyUrlWrap>
           <input id="copyUrl" type="text" ref={copyUrlRef} defaultValue={window.location.href} />
@@ -123,39 +94,42 @@ function SectionTitle({ fishSizeAll, isMyPage, logout, user, saveUser }) {
             alt="링크 복사 버튼"
             onClick={copyUrl}
           />
-
-          <img
-            src="./assets/images/member/logout_button.png"
-            alt="로그아웃 버튼"
-            onClick={logout}
-          />
         </CopyUrlWrap>
-      </div>
+        {isLoggedUser && isMyPage && (
+          <LogoutWrap>
+            <img
+              src="./assets/images/member/logout_button.png"
+              alt="로그아웃 버튼"
+              onClick={logout}
+            />
+          </LogoutWrap>
+        )}
+      </RightButtonsWrap>
     </SectionTitleWrap>
   );
 }
 
 export default SectionTitle;
 
 const SectionTitleWrap = styled.section`
-  min-height: 20%;
   display: flex;
   position: relative;
+  min-height: 20%;
+`;
 
-  .right {
-    flex: 1;
-  }
+const RightButtonsWrap = styled.div`
+  flex: 1;
 `;
 
 const NickNameChangeForm = styled.form`
+  position: relative;
   flex: 1;
   font-family: 'EF_jejudoldam';
   font-size: 30px;
   line-height: 1.3;
   word-break: keep-all;
-  position: relative;
-  z-index: 99;
   text-shadow: -1px 0 #e3edf2, 0 1px #e3edf2, 1px 0 #e3edf2, 0 -1px #e3edf2;
+  z-index: 99;
 
   @media (max-width: 500px) {
     font-size: 28px;
@@ -168,13 +142,13 @@ const NickNameChangeForm = styled.form`
   }
 
   .username {
-    width: 100%;
     display: block;
-    padding: 5px 0;
-    white-space: nowrap;
     position: absolute;
     top: -7px;
     left: 50%;
+    width: 100%;
+    padding: 5px 0;
+    white-space: nowrap;
     transform: translateX(-50%);
   }
 
@@ -219,7 +193,7 @@ const CopyUrlWrap = styled.div`
   width: 66px;
   height: 36px;
   margin-left: auto;
-  position: relative;
+  position: absolute;
   right: 0;
   top: 0;
   cursor: pointer;
@@ -268,57 +242,77 @@ const CopyUrlWrap = styled.div`
   }
 `;
 
-const TwoCatsCommentBubble = styled.div`
-  width: 100%;
-  height: 80px;
+//로그아웃 버튼
+const LogoutWrap = styled.div`
+  width: 66px;
+  height: 36px;
+  margin-left: auto;
   position: absolute;
-  bottom: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #d4dde2;
-  border-radius: 10px;
-  overflow: hidden;
-  animation: up 0.5s 0.2s forwards;
-  opacity: 0;
+  right: 0;
+  top: 50px;
+  cursor: pointer;
+  transition: all 0.3s;
 
-  @keyframes up {
-    0% {
-      transform: translateY(10px);
-      opacity: 0;
-    }
-    100% {
-      transform: translateY(0);
-      opacity: 1;
-    }
+  @media (max-width: 500px) {
+    width: 60px;
+  }
+  @media (max-width: 400px) {
+    width: 55px;
+  }
+  @media (max-width: 300px) {
+    width: 50px;
+  }
+
+  &:hover {
+    transform: translateY(-3px) rotate(0);
   }
 `;
 
-const CatsComment = styled.div`
-  width: 100%;
-  object-fit: cover;
+const OtherUserWrap = styled.div`
+  flex: 1;
+  font-family: 'EF_jejudoldam';
+  font-size: 30px;
+  line-height: 1.3;
+  word-break: keep-all;
+  position: relative;
+  z-index: 99;
+  text-shadow: -1px 0 #e3edf2, 0 1px #e3edf2, 1px 0 #e3edf2, 0 -1px #e3edf2;
 
-  font-size: 18px;
-  line-height: 28px;
-  font-weight: 700;
+  @media (max-width: 500px) {
+    font-size: 28px;
+  }
+  @media (max-width: 400px) {
+    font-size: 26px;
+  }
+  @media (max-width: 300px) {
+    font-size: 18px;
+  }
 
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  .otherUserName {
+    width: 100%;
+    display: block;
+    padding: 5px 0;
+    white-space: nowrap;
+    position: absolute;
+    top: -7px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 
-  font-family: 'kotra';
-  font-size: 20px;
-  text-align: center;
+  .sizeAll {
+    color: #ed9a00;
+  }
 
-  animation: fadeIn 0.5s forwards;
+  animation: up 0.5s 0.2s forwards;
   opacity: 0;
 
-  @keyframes fadeIn {
+  @keyframes up {
     0% {
+      transform: translateY(10px);
       opacity: 0;
     }
     100% {
+      transform: translateY(0);
       opacity: 1;
     }
   }

src/pages/member/Member.jsx

@@ -107,6 +107,7 @@ function Member() {
             user={user}
             logout={logout}
             saveUser={saveUser}
+            isLoggedUser={isLoggedUser}
           />
 
           {/* 푸드트럭 이미지 & 붕어빵 매대 */}