Merge pull request #227 from 5nxtnxtnxt/FE/feature/main/countTotal

[오승엽] 수많은 버그 수정

front/src/components/Modal/Modal.tsx

@@ -9,6 +9,7 @@ import {
   UserData,
   SnowBallData
 } from '@pages/Visit/SnowBallProvider';
+import { MessageListContext, Message } from '@pages/Visit/MessageListProvider';
 
 interface DeleteModalProps {
   message: number;
@@ -113,6 +114,7 @@ const DeleteModal = (props: DeleteModalProps) => {
 
   const navigate = useNavigate();
   const { setSnowBallData, setUserData } = useContext(SnowBallContext);
+  const { setMessageList } = useContext(MessageListContext);
 
   const deleteMsg = () => {
     setIsModalOpened(false);
@@ -125,8 +127,11 @@ const DeleteModal = (props: DeleteModalProps) => {
           .get('/api/user', { withCredentials: true })
           .then(res => {
             const userData = res.data.user as UserData;
-            const snowballData = res.data.main_snowball as SnowBallData;
-            setSnowBallData(snowballData);
+            const resSnowballData = res.data.main_snowball as SnowBallData;
+            const messageList = res.data.main_snowball
+              .message_list as Array<Message>;
+            setSnowBallData(resSnowballData);
+            setMessageList(messageList);
             setUserData(userData);
           })
           .catch(e => {

front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx

@@ -90,7 +90,7 @@ const SnowGlobeCanvas = React.memo<SnowGlobeCanvasProps>(
             {snows}
 
             <Decos
-              centerPosition={new THREE.Vector3(0, 0, 0)}
+              centerPosition={new THREE.Vector3(0, glassRadius / 2, 0)}
               radius={glassRadius}
             />
           </Canvas>

front/src/mockdata.json

@@ -254,7 +254,7 @@
     "id": 1,
     "username": "김부캠",
     "nickname": "김부캠",
-    "user_id": "00000",
+    "auth_id": "00000",
     "snowball_count": 1,
     "main_snowball_id": 1,
     "snowball_list": [1],

front/src/pages/Main/Main.tsx

@@ -15,11 +15,6 @@ import {
 } from '@pages/Visit/SnowBallProvider';
 import { MessageListContext, Message } from '@pages/Visit/MessageListProvider';
 
-const MainBodyWrap = styled.div`
-  width: 100%;
-  height: 100%;
-`;
-
 const LeftBtn = styled.img`
   position: fixed;
   top: 50%;
@@ -129,7 +124,6 @@ const Main = () => {
         if (res.status === 200) {
           const resUserData = res.data.user as UserData;
           setUserData(resUserData);
-          console.log('userdata=', resUserData);
 
           if (res.data.main_snowball === null) {
             navigate('/make');
@@ -154,7 +148,7 @@ const Main = () => {
       })
       .catch(e => {
         console.error(e);
-        logout;
+        logout();
       });
   }, []);
 
@@ -163,49 +157,47 @@ const Main = () => {
       {isLoading ? (
         <>
           <SnowGlobeCanvas snowBallData={snowBallData} />
-          <MainBodyWrap>
-            <UIContainer>
-              {userData.snowball_list.length > 1 ? (
-                <>
-                  <LeftBtn
-                    src={'/icons/prev.svg'}
-                    onClick={() => {
-                      moveSnowball(
-                        'Prev',
-                        userData,
-                        snowBallData,
-                        setSnowBallData,
-                        setMessageList
-                      );
-                      delayButton();
-                    }}
-                    ref={leftArrowRef}
-                  />
-                  <RightBtn
-                    src={'/icons/next.svg'}
-                    onClick={() => {
-                      moveSnowball(
-                        'Next',
-                        userData,
-                        snowBallData,
-                        setSnowBallData,
-                        setMessageList
-                      );
-                      delayButton();
-                    }}
-                    ref={rightArrowRef}
-                  />
-                </>
-              ) : null}
-
-              <MainButtonBox
-                leftArrow={leftArrowRef}
-                rightArrow={rightArrowRef}
-              />
-              <MainBody />
-              <EmptyDiv />
-            </UIContainer>
-          </MainBodyWrap>
+          <UIContainer>
+            {userData.snowball_list.length > 1 ? (
+              <>
+                <LeftBtn
+                  src={'/icons/prev.svg'}
+                  onClick={() => {
+                    moveSnowball(
+                      'Prev',
+                      userData,
+                      snowBallData,
+                      setSnowBallData,
+                      setMessageList
+                    );
+                    delayButton();
+                  }}
+                  ref={leftArrowRef}
+                />
+                <RightBtn
+                  src={'/icons/next.svg'}
+                  onClick={() => {
+                    moveSnowball(
+                      'Next',
+                      userData,
+                      snowBallData,
+                      setSnowBallData,
+                      setMessageList
+                    );
+                    delayButton();
+                  }}
+                  ref={rightArrowRef}
+                />
+              </>
+            ) : null}
+
+            <MainButtonBox
+              leftArrow={leftArrowRef}
+              rightArrow={rightArrowRef}
+            />
+            <MainBody />
+            <EmptyDiv />
+          </UIContainer>
         </>
       ) : (
         <Loading />

front/src/pages/Main/MainButtonBox.tsx

@@ -1,5 +1,4 @@
 import { useState, useRef, useContext } from 'react';
-import axios from 'axios';
 import styled from 'styled-components';
 import { Container } from '@utils';
 import { HeaderText } from '@components';
@@ -16,15 +15,33 @@ const StyledMenu = styled.img`
   position: fixed;
   top: 3.5rem;
   right: 0.8rem;
+  width: 2rem;
+  height: 2rem;
+`;
+const MessageCount = styled.span`
+  font: ${props => props.theme.font['--normal-main-header-font']};
+  color: white;
+`;
+
+const PrivateButton = styled.img`
+  display: inline;
+  pointer-events: all;
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
 `;
 
 const StyledScreen = styled.img`
+  width: 2rem;
+  height: 2rem;
   position: absolute;
   bottom: 2rem;
   margin-left: 0.8rem;
 `;
 
 const StyledShareLink = styled.img`
+  width: 2rem;
+  height: 2rem;
   position: absolute;
   bottom: 2rem;
   right: 0.8rem;
@@ -81,48 +98,56 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
   const menuRef = useRef<HTMLImageElement>(null);
   const screenRef = useRef<HTMLImageElement>(null);
   const shareLinkRef = useRef<HTMLImageElement>(null);
-
+  const { snowBallData, changePrivate } = useContext(SnowBallContext);
   const [menuModal, setMenuModal] = useState(false);
   const [list, setList] = useState(false);
   const [screen, setScreen] = useState(false);
   const [toast, setToast] = useState(false);
-
   const { userData } = useContext(SnowBallContext);
 
   const shareLink = () => {
-    axios.get('/api/user', { withCredentials: true }).then(res => {
-      const user = res.data.user.auth_id;
-      const url = `https://www.mysnowball.kr/visit/${user}`;
-
-      if (navigator.share === undefined) {
-        navigator.clipboard.writeText(url);
-        setToast(true);
-        setTimeout(() => {
-          setToast(false);
-        }, 1000);
-      } else {
-        navigator.clipboard.writeText(url);
-        navigator
-          .share({
-            url: url
-          })
-          .then(() => {})
-          .catch(() => {
-            setToast(true);
-            setTimeout(() => {
-              setToast(false);
-            }, 1000);
-          });
-      }
-    });
+    const userID = userData.auth_id;
+    const url = `https://www.mysnowball.kr/visit/${userID}`;
+
+    if (navigator.share === undefined) {
+      navigator.clipboard.writeText(url);
+      setToast(true);
+      setTimeout(() => {
+        setToast(false);
+      }, 1000);
+    } else {
+      navigator.clipboard.writeText(url);
+      navigator
+        .share({
+          url: url
+        })
+        .then(() => {
+          setToast(true);
+          setTimeout(() => {
+            setToast(false);
+          }, 1000);
+        })
+        .catch(() => {
+          setToast(true);
+          setTimeout(() => {
+            setToast(false);
+          }, 1000);
+        });
+    }
   };
 
   return (
     <>
       {!screen ? (
         <>
-          <Container>
-            <HeaderText Ref={headerRef} userName={userData.nickname} />
+          <Container ref={headerRef}>
+            <HeaderText Ref={null} userName={userData.nickname} />
+            <MessageCount>총 {userData.message_count}개의 메시지</MessageCount>
+            {snowBallData.is_message_private ? (
+              <PrivateButton onClick={changePrivate} src="/icons/lock.svg" />
+            ) : (
+              <PrivateButton onClick={changePrivate} src="/icons/unlock.svg" />
+            )}
           </Container>
 
           {list ? null : (

front/src/pages/Visit/Deco/Deco.tsx

@@ -1,21 +1,7 @@
-import { useContext, useEffect } from 'react';
 import { Prev, UIContainer } from '@components';
 import Steps from './Steps';
 import DecoCavnas from './DecoCanvas/DecoCanvas';
-import { DecoContext } from './DecoProvider';
-
 const Deco = () => {
-  const { setDecoID, setColor, setLetterID, setContent, setSender } =
-    useContext(DecoContext);
-
-  useEffect(() => {
-    setDecoID(1);
-    setColor('#ff0000');
-    setLetterID(1);
-    setContent('');
-    setSender('');
-  }, []);
-
   return (
     <>
       <DecoCavnas />