Merge pull request #220 from 5nxtnxtnxt/FE/hotfix/stashApply

핫픽스 몰라
boostcampwm2023 · Dec 8, 2023 · 83d878e · 83d878e
2 parents a61c1d5 + 8411da7
commit 83d878e
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 26 deletions.
diff --git a/front/src/components/SnowGlobeCanvas/Decos.tsx b/front/src/components/SnowGlobeCanvas/Decos.tsx
@@ -3,7 +3,12 @@ import { getDecoPoisition } from '@utils';
 import * as Models from './models';
 import { MessageListContext } from '@pages/Visit/MessageListProvider';
 
-const Decos = () => {
+interface DecosProps {
+  centerPosition: THREE.Vector3;
+  radius: number;
+}
+
+const Decos = ({ centerPosition, radius }: DecosProps) => {
   const { messageList } = useContext(MessageListContext);
   const decos = messageList.map((message, index) => (
     <Models.Deco
@@ -19,7 +24,22 @@ const Decos = () => {
       isOpened={message.opened !== null}
     />
   ));
-  return <>{decos}</>;
+  const emojis = messageList.map((message, index) => (
+    <Models.Emoji
+      key={index}
+      centerPosition={centerPosition}
+      rangeRadius={radius}
+      sentiment={message.sentiment}
+      confidence={message.confidence}
+    />
+  ));
+
+  return (
+    <>
+      {decos}
+      {emojis}
+    </>
+  );
 };
 
 export default Decos;
diff --git a/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx b/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx
@@ -89,7 +89,10 @@ const SnowGlobeCanvas = React.memo<SnowGlobeCanvasProps>(
             />
             {snows}
 
-            <Decos />
+            <Decos
+              centerPosition={new THREE.Vector3(0, 0, 0)}
+              radius={glassRadius}
+            />
           </Canvas>
         </CanvasContainer>
         <Prev set={'Canvas'} />

diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx
@@ -107,13 +107,17 @@ const Main = () => {
       })
       .then(res => {
         if (res.status === 200) {
-          const userData = res.data.user as UserData;
-          const snowballData = res.data.main_snowball as SnowBallData;
+          const resUserData = res.data.user as UserData;
+          if (res.data.main_snowball === null) {
+            navigate('/make');
+            return;
+          }
+          const resSnowballData = res.data.main_snowball as SnowBallData;
           const messageList = res.data.main_snowball
             .message_list as Array<Message>;
-          setSnowBallData(snowballData);
+          setSnowBallData(resSnowballData);
           setMessageList(messageList);
-          setUserData(userData);
+          setUserData(resUserData);
           setLoading(true);
           if (
             userData.nickname === null ||

diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx
@@ -6,6 +6,7 @@ import { HeaderText } from '@components';
 import MenuModal from './MenuModal';
 import ListMsgs from './ListMsgs';
 import { SnowBallContext } from '@pages/Visit/SnowBallProvider';
+import { theme } from '@utils';
 
 interface MainButtonBoxProps {
   leftArrow: React.RefObject<HTMLImageElement>;
@@ -30,6 +31,19 @@ const StyledShareLink = styled.img`
   right: 0.8rem;
 `;
 
+const ToastMsg = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  font: ${theme.font['--normal-button-font']};
+  background-color: ${theme.colors['--sub-text']};
+  border-radius: 1rem;
+  text-align: center;
+  padding: 1rem;
+`;
+
 const screenTime = (
   setScreen: React.Dispatch<React.SetStateAction<boolean>>,
   refs: Array<React.RefObject<HTMLDivElement>>
@@ -76,13 +90,19 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
   const [list, setList] = useState(false);
   const [screen, setScreen] = useState(false);
 
+  const [toast, setToast] = useState(false);
+
   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.share({
           url: url
@@ -131,6 +151,7 @@ const MainButtonBox = (props: MainButtonBoxProps) => {
           />
 
           {list ? <ListMsgs set={setList} /> : null}
+          {toast ? <ToastMsg>링크가 복사되었습니다.</ToastMsg> : null}
         </>
       ) : null}
     </>

diff --git a/front/src/pages/Make/Nickname/Nickname.tsx b/front/src/pages/Make/Nickname/Nickname.tsx
@@ -77,6 +77,10 @@ const Nickname = () => {
   const [lenWarning, setLenWarning] = useState(false);
   const nicknameRef = useRef<HTMLInputElement>(null);
 
+  //브라우저 뒤로가기시 main으로 이동시켜주기위한 로직
+  window.history.pushState({}, '', '/main');
+  window.history.pushState({}, '', '/make');
+
   useEffect(() => {
     if (!nickname && nicknameRef.current?.value) setNickname(true);
     if (!nickname || !nicknameRef.current?.value) return;

diff --git a/front/src/pages/Make/Snowball/Snowball.tsx b/front/src/pages/Make/Snowball/Snowball.tsx
@@ -59,7 +59,7 @@ const Snowball = () => {
 
   window.history.pushState({}, '', '/main');
   window.history.pushState({}, '', '/make/snowball');
-  // window.history.replaceState({}, '', '/test');
+
   useEffect(() => {
     axios
       .get('/api/user', {

diff --git a/front/src/pages/Visit/Deco/Deco.tsx b/front/src/pages/Visit/Deco/Deco.tsx
@@ -1,8 +1,21 @@
 import { Prev, UIContainer } from '@components';
 import Steps from './Steps';
 import DecoCavnas from './DecoCanvas/DecoCanvas';
+import { useContext, useEffect } from 'react';
+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 />

diff --git a/front/src/pages/Visit/Deco/PostButton.tsx b/front/src/pages/Visit/Deco/PostButton.tsx
@@ -30,18 +30,7 @@ const StyledAlert = styled.div`
 `;
 
 const PostButton = (props: ButtonProps) => {
-  const {
-    decoID,
-    color,
-    letterID,
-    content,
-    sender,
-    setDecoID,
-    setColor,
-    setLetterID,
-    setContent,
-    setSender
-  } = useContext(DecoContext);
+  const { decoID, color, letterID, content, sender } = useContext(DecoContext);
   const { snowBallData, setSnowBallData } = useContext(SnowBallContext);
   const navigate = useNavigate();
   const [alerts, setAlerts] = useState(false);
@@ -71,12 +60,6 @@ const PostButton = (props: ButtonProps) => {
 
           props.view[1](!props.view[0]);
           props.visible[1](-1);
-
-          setDecoID(1);
-          setColor('#ff0000');
-          setLetterID(1);
-          setContent('');
-          setSender('');
         });
       })
       .catch(e => {