diff --git a/front/src/components/SnowGlobeCanvas/Decos.tsx b/front/src/components/SnowGlobeCanvas/Decos.tsx index a7652ee..b1b6a7d 100644 --- 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) => ( { isOpened={message.opened !== null} /> )); - return <>{decos}; + const emojis = messageList.map((message, index) => ( + + )); + + return ( + <> + {decos} + {emojis} + + ); }; export default Decos; diff --git a/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx b/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx index c583cfa..5a2c8b6 100644 --- a/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx +++ b/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx @@ -89,7 +89,10 @@ const SnowGlobeCanvas = React.memo( /> {snows} - + diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx index 3fbd71e..edb9b79 100644 --- 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; - 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 index d06f490..2f5e99c 100644 --- 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; @@ -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>, refs: Array> @@ -76,6 +90,8 @@ 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; @@ -83,6 +99,10 @@ const MainButtonBox = (props: MainButtonBoxProps) => { 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 ? : null} + {toast ? 링크가 복사되었습니다. : null} ) : null} diff --git a/front/src/pages/Make/Nickname/Nickname.tsx b/front/src/pages/Make/Nickname/Nickname.tsx index fb81139..69f2c5f 100644 --- 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(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 index df22c4a..063ae84 100644 --- 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 index e03b40a..0f14157 100644 --- 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 ( <> diff --git a/front/src/pages/Visit/Deco/PostButton.tsx b/front/src/pages/Visit/Deco/PostButton.tsx index 4f77eb2..9b3a967 100644 --- 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 => {