feat, style: 리스트 보기일때 메뉴버튼 숨기기, 메뉴모달 변경

Co-authored-by: ChanWoo Kim <[email protected]> Co-authored-by: Mina Seo <[email protected]> 리스트 보기시 메뉴버튼 숨김 메뉴모달 스타일 변경
boostcampwm2023 · Dec 5, 2023 · b4fd904 · b4fd904
1 parent 0f55efc
commit b4fd904
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/front/src/pages/Main/ListMsgs.tsx b/front/src/pages/Main/ListMsgs.tsx
@@ -54,7 +54,7 @@ const ListMsgs = (props: ListMsgProps) => {
     <>
       {messages.length > 0 ? (
         <>
-          <Prev set={props.set} />{' '}
+          <Prev set={props.set} />
           <StyledList>
             <StyledListWrap>
               {messages.map((msg, idx) => {

diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx
@@ -95,11 +95,14 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
             <HeaderText Ref={headerRef} userName={userData.nickname} />
           </Container>
 
-          <StyledMenu
-            ref={menuRef}
-            src={'/icons/menu.svg'}
-            onClick={() => setMenuModal(true)}
-          />
+          {list ? null : (
+            <StyledMenu
+              ref={menuRef}
+              src={'/icons/menu.svg'}
+              onClick={() => setMenuModal(true)}
+            />
+          )}
+
           {menuModal ? <MenuModal set={setMenuModal} list={setList} /> : null}
 
           <StyledScreen

diff --git a/front/src/pages/Main/MenuModal.tsx b/front/src/pages/Main/MenuModal.tsx
@@ -13,7 +13,8 @@ const StyledModal = styled.div`
   top: 4%;
   right: 0;
   width: 40%;
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: #161616;
+  border-radius: 0.625rem 0 0 0.625rem;
   box-shadow: 0 0.625rem 1.25rem rgba(255, 255, 255, 0.25),
     0 0.625rem 1.25rem rgba(255, 255, 255, 0.25);
   font: ${props => props.theme.font['--normal-main-header-font']};
@@ -32,7 +33,7 @@ const StyledUser = styled(StyledSection)`
 
 const StyledLogout = styled(StyledSection)`
   color: ${props => props.theme.colors['--primary-red-primary']};
-  font-family: 'Pretendard-Regular';
+
   font-weight: bold;
 `;
 
@@ -50,6 +51,10 @@ const MenuModal = (props: ModalProps) => {
   const userName = mock.user_data.nickname;
   const navigate = useNavigate();
 
+  const makeNewSnowBall = () => {
+    navigate('/make/snowball');
+  };
+
   return (
     <StyledModal>
       <StyledUser>{userName}님</StyledUser>
@@ -64,6 +69,10 @@ const MenuModal = (props: ModalProps) => {
         편지 리스트로 보기
       </StyledSection>
 
+      <StyledSection onClick={makeNewSnowBall}>
+        새로운 스노우볼 만들러 가기
+      </StyledSection>
+
       <StyledLogout onClick={() => Logout(navigate)}>로그아웃</StyledLogout>
       <hr />
 

diff --git a/front/src/pages/Make/Snowball/MainDeco/MakeButton.tsx b/front/src/pages/Make/Snowball/MainDeco/MakeButton.tsx
@@ -1,4 +1,5 @@
 import { useState, useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import styled from 'styled-components';
 import { LongButton } from '@utils';
@@ -30,6 +31,7 @@ const StyledAlert = styled.div`
 `;
 
 const MakeButton = (props: ButtonProps) => {
+  const navigate = useNavigate();
   const { snowballName, mainDecoID, mainColor, bottomID, bottomColor } =
     useContext(DecoContext);
   const [alert, setAlert] = useState(false);
@@ -52,7 +54,11 @@ const MakeButton = (props: ButtonProps) => {
     axios
       .post('/api/snowball', snowballInfo, { withCredentials: true })
       .then(res => {
-        console.log(res); // 뒤에 로직이 없 보냈는데 -> 데이터 최신화가 안됨 지금 // 여기도 데이터 요청 있으면 굳이 건들필요는 없기
+        console.log(res);
+      })
+      .catch(e => {
+        console.error(e);
+        navigate('/');
       });
 
     props.view[1](!props.view[0]);