From 2c637d30bc5ffd46e28e9a8bcd61e7271ccfef36 Mon Sep 17 00:00:00 2001 From: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> Date: Mon, 11 Dec 2023 16:03:31 +0900 Subject: [PATCH 1/9] =?UTF-8?q?fixed:=20<>=EB=B2=84=ED=8A=BC=20=EB=B2=84?= =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit api 응답 변동으로인해 그에맞게 수정했음 --- front/public/icons/lock.svg | 7 ++ front/public/icons/unlock.svg | 7 ++ front/src/pages/Main/Main.tsx | 135 ++++++++++++------------- front/src/pages/Main/MainButtonBox.tsx | 30 ++++-- front/src/pages/Visit/VisitBody.tsx | 4 +- 5 files changed, 102 insertions(+), 81 deletions(-) create mode 100644 front/public/icons/lock.svg create mode 100644 front/public/icons/unlock.svg diff --git a/front/public/icons/lock.svg b/front/public/icons/lock.svg new file mode 100644 index 0000000..07beb75 --- /dev/null +++ b/front/public/icons/lock.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/front/public/icons/unlock.svg b/front/public/icons/unlock.svg new file mode 100644 index 0000000..6cdb773 --- /dev/null +++ b/front/public/icons/unlock.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx index ced2e34..57e14c4 100644 --- a/front/src/pages/Main/Main.tsx +++ b/front/src/pages/Main/Main.tsx @@ -15,11 +15,6 @@ import { import { MessageListContext, Message } from '@pages/Visit/MessageListProvider'; import { useCookies } from 'react-cookie'; -const MainBodyWrap = styled.div` - width: 100%; - height: 100%; -`; - const LeftBtn = styled.img` position: fixed; top: 50%; @@ -56,8 +51,9 @@ const moveSnowball = ( axios(`/api/snowball/${nextSnowBallID}`) .then(res => { - setSnowBallData(res.data as SnowBallData); - setMessageListData(res.data.message_list as Array); + console.log(res); + setSnowBallData(res.data.snowball as SnowBallData); + setMessageListData(res.data.snowball.message_list as Array); }) .catch(e => { console.error(e); @@ -93,28 +89,28 @@ const Main = () => { } }; - // const saveCookie = () => { - // const cookieToken = import.meta.env.VITE_APP_COOKIE_TOKEN; - // const cookieName = 'access_token'; - // const cookieValue = cookieToken; - // const today = new Date(); - // const expire = new Date(); - // const secure = true; - // expire.setDate(today.getDate() + 1); - // document.cookie = `${cookieName}=${cookieValue}; expires=${expire.toUTCString()}; secure=${secure}; path=/`; - - // const cookieToken2 = true; - // const cookieName2 = 'loggedin'; - // const cookieValue2 = cookieToken2; - // const today2 = new Date(); - // const expire2 = new Date(); - // const secure2 = true; - // expire2.setDate(today2.getDate() + 1); - // document.cookie = `${cookieName2}=${cookieValue2}; expires=${expire2.toUTCString()}; secure=${secure2}; path=/`; - // }; + const saveCookie = () => { + const cookieToken = import.meta.env.VITE_APP_COOKIE_TOKEN; + const cookieName = 'access_token'; + const cookieValue = cookieToken; + const today = new Date(); + const expire = new Date(); + const secure = true; + expire.setDate(today.getDate() + 1); + document.cookie = `${cookieName}=${cookieValue}; expires=${expire.toUTCString()}; secure=${secure}; path=/`; + + const cookieToken2 = true; + const cookieName2 = 'loggedin'; + const cookieValue2 = cookieToken2; + const today2 = new Date(); + const expire2 = new Date(); + const secure2 = true; + expire2.setDate(today2.getDate() + 1); + document.cookie = `${cookieName2}=${cookieValue2}; expires=${expire2.toUTCString()}; secure=${secure2}; path=/`; + }; useEffect(() => { - //saveCookie(); + saveCookie(); if (!cookie.loggedin) { navigate('/'); @@ -129,7 +125,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'); @@ -163,49 +158,47 @@ const Main = () => { {isLoading ? ( <> - - - {userData.snowball_list.length > 1 ? ( - <> - { - moveSnowball( - 'Prev', - userData, - snowBallData, - setSnowBallData, - setMessageList - ); - delayButton(); - }} - ref={leftArrowRef} - /> - { - moveSnowball( - 'Next', - userData, - snowBallData, - setSnowBallData, - setMessageList - ); - delayButton(); - }} - ref={rightArrowRef} - /> - - ) : null} - - - - - - + + {userData.snowball_list.length > 1 ? ( + <> + { + moveSnowball( + 'Prev', + userData, + snowBallData, + setSnowBallData, + setMessageList + ); + delayButton(); + }} + ref={leftArrowRef} + /> + { + moveSnowball( + 'Next', + userData, + snowBallData, + setSnowBallData, + setMessageList + ); + delayButton(); + }} + ref={rightArrowRef} + /> + + ) : null} + + + + + ) : ( diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx index 2a5d355..2722680 100644 --- a/front/src/pages/Main/MainButtonBox.tsx +++ b/front/src/pages/Main/MainButtonBox.tsx @@ -18,6 +18,17 @@ const StyledMenu = styled.img` right: 0.8rem; `; +const HeaderContainer = styled(Container)` + flex-direction: row; +`; + +const PrivateButton = styled.img` + pointer-events: all; + cursor: pointer; + width: 2rem; + height: 2rem; +`; + const StyledScreen = styled.img` position: absolute; bottom: 2rem; @@ -102,14 +113,16 @@ const MainButtonBox = (props: MainButtonBoxProps) => { }, 1000); } else { navigator.clipboard.writeText(url); - navigator.share({ - url: url - }).then(() => { - setToast(true); - setTimeout(() => { - setToast(false); - }, 1000); - }) + navigator + .share({ + url: url + }) + .then(() => { + setToast(true); + setTimeout(() => { + setToast(false); + }, 1000); + }) .catch(() => { setToast(true); setTimeout(() => { @@ -126,6 +139,7 @@ const MainButtonBox = (props: MainButtonBoxProps) => { <> + {list ? null : ( diff --git a/front/src/pages/Visit/VisitBody.tsx b/front/src/pages/Visit/VisitBody.tsx index ac2aa8a..db515f9 100644 --- a/front/src/pages/Visit/VisitBody.tsx +++ b/front/src/pages/Visit/VisitBody.tsx @@ -37,8 +37,8 @@ const moveSnowball = ( axios(`/api/snowball/${nextSnowBallID}`) .then(res => { - setSnowBallData(res.data as SnowBallData); - setMessageListData(res.data.message_list as Array); + setSnowBallData(res.data.snowball as SnowBallData); + setMessageListData(res.data.snowball.message_list as Array); }) .catch(e => { console.error(e); From 94bf76765d04fc8684600ccbbf130a6427c67192 Mon Sep 17 00:00:00 2001 From: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> Date: Mon, 11 Dec 2023 21:15:07 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EA=B3=B5=EA=B0=9C=20=EB=B9=84?= =?UTF-8?q?=EA=B3=B5=EA=B0=9C=20=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/public/icons/screen.svg | 10 +++++++--- front/public/icons/shareLink.svg | 12 +++++++----- front/src/pages/Main/Main.tsx | 7 +++---- front/src/pages/Main/MainButtonBox.tsx | 22 +++++++++++++--------- front/src/pages/Visit/SnowBallProvider.tsx | 20 ++++++++++++++++++-- front/src/pages/Visit/VisitBody.tsx | 5 ++--- 6 files changed, 50 insertions(+), 26 deletions(-) diff --git a/front/public/icons/screen.svg b/front/public/icons/screen.svg index f24eeba..48e1aa0 100644 --- a/front/public/icons/screen.svg +++ b/front/public/icons/screen.svg @@ -1,3 +1,7 @@ - - - + + + + + + + \ No newline at end of file diff --git a/front/public/icons/shareLink.svg b/front/public/icons/shareLink.svg index c613ff3..c003277 100644 --- a/front/public/icons/shareLink.svg +++ b/front/public/icons/shareLink.svg @@ -1,5 +1,7 @@ - - - - - + + + + + + + \ No newline at end of file diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx index 57e14c4..defb047 100644 --- a/front/src/pages/Main/Main.tsx +++ b/front/src/pages/Main/Main.tsx @@ -51,9 +51,8 @@ const moveSnowball = ( axios(`/api/snowball/${nextSnowBallID}`) .then(res => { - console.log(res); - setSnowBallData(res.data.snowball as SnowBallData); - setMessageListData(res.data.snowball.message_list as Array); + setSnowBallData(res.data as SnowBallData); + setMessageListData(res.data.message_list as Array); }) .catch(e => { console.error(e); @@ -149,7 +148,7 @@ const Main = () => { }) .catch(e => { console.error(e); - logout; + logout(); }); }, []); diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx index 2722680..f8f8732 100644 --- a/front/src/pages/Main/MainButtonBox.tsx +++ b/front/src/pages/Main/MainButtonBox.tsx @@ -18,10 +18,6 @@ const StyledMenu = styled.img` right: 0.8rem; `; -const HeaderContainer = styled(Container)` - flex-direction: row; -`; - const PrivateButton = styled.img` pointer-events: all; cursor: pointer; @@ -30,12 +26,16 @@ const PrivateButton = styled.img` `; 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; @@ -92,13 +92,13 @@ const MainButtonBox = (props: MainButtonBoxProps) => { const menuRef = useRef(null); const screenRef = useRef(null); const shareLinkRef = useRef(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); + console.log(snowBallData.is_message_private, '!!!'); const shareLink = () => { axios.get('/api/user', { withCredentials: true }).then(res => { @@ -137,9 +137,13 @@ const MainButtonBox = (props: MainButtonBoxProps) => { <> {!screen ? ( <> - - - + + + {snowBallData.is_message_private ? ( + + ) : ( + + )} {list ? null : ( diff --git a/front/src/pages/Visit/SnowBallProvider.tsx b/front/src/pages/Visit/SnowBallProvider.tsx index 2ab43e2..9bf541e 100644 --- a/front/src/pages/Visit/SnowBallProvider.tsx +++ b/front/src/pages/Visit/SnowBallProvider.tsx @@ -1,5 +1,6 @@ import React, { useState, createContext } from 'react'; import mockData from '@mock'; +import axios from 'axios'; interface SnowBallData { id: number; @@ -27,13 +28,15 @@ interface SnowBallContextType { setSnowBallData: React.Dispatch>; userData: UserData; setUserData: React.Dispatch>; + changePrivate: () => void; } const SnowBallContext = createContext({ snowBallData: mockData.snowball_data as SnowBallData, setSnowBallData: () => {}, userData: mockData.user_data, - setUserData: () => {} + setUserData: () => {}, + changePrivate: () => {} }); const SnowBallProvider: React.FC<{ children: React.ReactNode }> = ({ @@ -43,13 +46,26 @@ const SnowBallProvider: React.FC<{ children: React.ReactNode }> = ({ mockData.snowball_data as SnowBallData ); const [userData, setUserData] = useState(mockData.user_data); + const changePrivate = () => { + const newData = { + title: snowBallData.title, + is_message_private: !snowBallData.is_message_private + }; + axios.put(`/api/snowball/${snowBallData.id}`, newData).then(res => { + console.log(res.data); + const resData = Object.assign({}, snowBallData); + resData.is_message_private = res.data.is_message_private; + setSnowBallData(resData); + }); + }; return ( {children} diff --git a/front/src/pages/Visit/VisitBody.tsx b/front/src/pages/Visit/VisitBody.tsx index db515f9..0beb69d 100644 --- a/front/src/pages/Visit/VisitBody.tsx +++ b/front/src/pages/Visit/VisitBody.tsx @@ -37,8 +37,8 @@ const moveSnowball = ( axios(`/api/snowball/${nextSnowBallID}`) .then(res => { - setSnowBallData(res.data.snowball as SnowBallData); - setMessageListData(res.data.snowball.message_list as Array); + setSnowBallData(res.data as SnowBallData); + setMessageListData(res.data.message_list as Array); }) .catch(e => { console.error(e); @@ -52,7 +52,6 @@ const VisitBody = () => { const { setMessageList } = useContext(MessageListContext); const leftArrowRef = useRef(null); const rightArrowRef = useRef(null); - const delayButton = () => { if (leftArrowRef.current && rightArrowRef.current) { leftArrowRef.current.style.pointerEvents = 'none'; From 568503df80235886a834536cfe88e1decf7c5bf0 Mon Sep 17 00:00:00 2001 From: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> Date: Mon, 11 Dec 2023 21:32:36 +0900 Subject: [PATCH 3/9] =?UTF-8?q?refact:=20shareLink=20axios=EC=9A=94?= =?UTF-8?q?=EC=B2=AD=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 불필요한 axios요청 제거 --- front/src/mockdata.json | 2 +- front/src/pages/Main/MainButtonBox.tsx | 60 +++++++++++----------- front/src/pages/Visit/SnowBallProvider.tsx | 2 +- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/front/src/mockdata.json b/front/src/mockdata.json index 3f46f13..b1882de 100644 --- a/front/src/mockdata.json +++ b/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], diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx index f8f8732..34016db 100644 --- a/front/src/pages/Main/MainButtonBox.tsx +++ b/front/src/pages/Main/MainButtonBox.tsx @@ -16,6 +16,8 @@ const StyledMenu = styled.img` position: fixed; top: 3.5rem; right: 0.8rem; + width: 2rem; + height: 2rem; `; const PrivateButton = styled.img` @@ -101,36 +103,34 @@ const MainButtonBox = (props: MainButtonBoxProps) => { console.log(snowBallData.is_message_private, '!!!'); 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(() => { - setToast(true); - setTimeout(() => { - setToast(false); - }, 1000); - }) - .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 ( diff --git a/front/src/pages/Visit/SnowBallProvider.tsx b/front/src/pages/Visit/SnowBallProvider.tsx index 9bf541e..60d1671 100644 --- a/front/src/pages/Visit/SnowBallProvider.tsx +++ b/front/src/pages/Visit/SnowBallProvider.tsx @@ -16,7 +16,7 @@ interface UserData { id: number; username: string; nickname: string; - user_id: string; + auth_id: string; snowball_count: number; main_snowball_id: number; snowball_list: Array; From 4dde5b1ad2a2ceb45de761e5c27cd99753ad5d80 Mon Sep 17 00:00:00 2001 From: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> Date: Mon, 11 Dec 2023 21:54:54 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20main=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B4=9D=EB=A9=94=EC=8B=9C=EC=A7=80=20=EA=B0=9C=EC=88=98=20?= =?UTF-8?q?=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/pages/Boostcamp/Boostcamp.tsx | 1 + front/src/pages/Main/MainButtonBox.tsx | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/front/src/pages/Boostcamp/Boostcamp.tsx b/front/src/pages/Boostcamp/Boostcamp.tsx index c564ffc..ed42562 100644 --- a/front/src/pages/Boostcamp/Boostcamp.tsx +++ b/front/src/pages/Boostcamp/Boostcamp.tsx @@ -62,6 +62,7 @@ const BoostcampDiv = styled.div` `; const updateFlakes = (ctx: CanvasRenderingContext2D, flakes: Flake[]) => { + console.log('test'); ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); ctx.fillStyle = 'hsla(242, 95%, 3%, 1)'; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx index 34016db..658db35 100644 --- a/front/src/pages/Main/MainButtonBox.tsx +++ b/front/src/pages/Main/MainButtonBox.tsx @@ -19,8 +19,13 @@ const StyledMenu = styled.img` 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; @@ -100,7 +105,6 @@ const MainButtonBox = (props: MainButtonBoxProps) => { const [screen, setScreen] = useState(false); const [toast, setToast] = useState(false); const { userData } = useContext(SnowBallContext); - console.log(snowBallData.is_message_private, '!!!'); const shareLink = () => { const userID = userData.auth_id; @@ -139,6 +143,7 @@ const MainButtonBox = (props: MainButtonBoxProps) => { <> + 총 {userData.message_count}개의 메시지 {snowBallData.is_message_private ? ( ) : ( From d816f0f183522d80c8ee3cb2cfd89388e93ed44a Mon Sep 17 00:00:00 2001 From: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> Date: Mon, 11 Dec 2023 22:04:44 +0900 Subject: [PATCH 5/9] =?UTF-8?q?fixed:=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=EC=8B=9C=20=EC=9E=A5=EC=8B=9D=20=EC=95=88?= =?UTF-8?q?=EC=82=AC=EB=9D=BC=EC=A7=80=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/Modal/Modal.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/front/src/components/Modal/Modal.tsx b/front/src/components/Modal/Modal.tsx index d4771a4..5e6b34d 100644 --- a/front/src/components/Modal/Modal.tsx +++ b/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; + setSnowBallData(resSnowballData); + setMessageList(messageList); setUserData(userData); }) .catch(e => { From b953d1a98d2b388b8d4a00641d876d654df84405 Mon Sep 17 00:00:00 2001 From: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> Date: Mon, 11 Dec 2023 22:30:02 +0900 Subject: [PATCH 6/9] =?UTF-8?q?fixed:=20=EC=8A=A4=EB=85=B8=EC=9A=B0?= =?UTF-8?q?=EB=B3=BC=20=EA=BD=89=EC=B0=BC=EC=9D=84=EB=95=8C=20=EB=A9=94?= =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EC=9C=A0=EC=A7=80=EC=95=88=EB=90=A8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/pages/Visit/Deco/Deco.tsx | 13 ------- front/src/pages/Visit/Deco/DecoEnroll.tsx | 40 +++++++++++++++++---- front/src/pages/Visit/Deco/DecoProvider.tsx | 15 ++++++-- 3 files changed, 47 insertions(+), 21 deletions(-) diff --git a/front/src/pages/Visit/Deco/Deco.tsx b/front/src/pages/Visit/Deco/Deco.tsx index dd37a57..d36b26f 100644 --- a/front/src/pages/Visit/Deco/Deco.tsx +++ b/front/src/pages/Visit/Deco/Deco.tsx @@ -2,20 +2,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 ( <> diff --git a/front/src/pages/Visit/Deco/DecoEnroll.tsx b/front/src/pages/Visit/Deco/DecoEnroll.tsx index ee989e0..14a9d42 100644 --- a/front/src/pages/Visit/Deco/DecoEnroll.tsx +++ b/front/src/pages/Visit/Deco/DecoEnroll.tsx @@ -1,7 +1,9 @@ -import React, { useState, useRef } from 'react'; +import React, { useState, useRef, useContext } from 'react'; import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'; import styled from 'styled-components'; import { theme, BlurBody } from '@utils'; +import { DecoContext } from './DecoProvider'; +import reset from 'styled-reset'; interface NaviProps { visible: [number, React.Dispatch>]; @@ -68,7 +70,8 @@ const CloseNav = ( setIsFocus: React.Dispatch>, navigate: NavigateFunction, user: string | undefined, - flag: 'close' | 'root' + flag: 'close' | 'root', + callback: () => void ) => { const onAnimationEnd = () => { if (closeRef.current) { @@ -79,6 +82,7 @@ const CloseNav = ( navigate('/'); return; } + callback(); navigate(`/visit/${user}`); } }; @@ -97,12 +101,20 @@ const DecoEnroll = (props: NaviProps) => { const { user } = useParams(); const [isFocus, setIsFocus] = useState(true); const closeRef = useRef(null); - + const { resetDecoContext } = useContext(DecoContext); return ( <> - CloseNav(props, closeRef, setIsFocus, navigate, user, 'close') + CloseNav( + props, + closeRef, + setIsFocus, + navigate, + user, + 'close', + resetDecoContext + ) } /> @@ -112,7 +124,15 @@ const DecoEnroll = (props: NaviProps) => { - CloseNav(props, closeRef, setIsFocus, navigate, user, 'root') + CloseNav( + props, + closeRef, + setIsFocus, + navigate, + user, + 'root', + resetDecoContext + ) } > @@ -130,7 +150,15 @@ const DecoEnroll = (props: NaviProps) => { - CloseNav(props, closeRef, setIsFocus, navigate, user, 'close') + CloseNav( + props, + closeRef, + setIsFocus, + navigate, + user, + 'close', + resetDecoContext + ) } > 전송한 선물 확인하기 diff --git a/front/src/pages/Visit/Deco/DecoProvider.tsx b/front/src/pages/Visit/Deco/DecoProvider.tsx index 77e543d..3d5f14d 100644 --- a/front/src/pages/Visit/Deco/DecoProvider.tsx +++ b/front/src/pages/Visit/Deco/DecoProvider.tsx @@ -11,6 +11,7 @@ interface DecoContextType { setContent: React.Dispatch>; sender: string; setSender: React.Dispatch>; + resetDecoContext: () => void; } const DecoContext = createContext({ @@ -23,7 +24,8 @@ const DecoContext = createContext({ content: '', setContent: () => {}, sender: '', - setSender: () => {} + setSender: () => {}, + resetDecoContext: () => {} }); const DecoProvider: React.FC<{ children: React.ReactNode }> = ({ @@ -34,6 +36,14 @@ const DecoProvider: React.FC<{ children: React.ReactNode }> = ({ const [letterID, setLetterID] = useState(1); const [content, setContent] = useState(''); const [sender, setSender] = useState(''); + + const resetDecoContext = () => { + setDecoID(1); + setColor('#ff0000'); + setLetterID(1); + setContent(''); + setSender(''); + }; return ( = ({ content, setContent, sender, - setSender + setSender, + resetDecoContext }} > {children} From 4087e08c2fc5ce1e2bf1cae7b94f05d906d268e1 Mon Sep 17 00:00:00 2001 From: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> Date: Mon, 11 Dec 2023 22:33:36 +0900 Subject: [PATCH 7/9] =?UTF-8?q?fixed:=20emoji=20=EB=96=A8=EC=96=B4?= =?UTF-8?q?=EC=A7=80=EB=8A=94=20=EB=B2=94=EC=9C=84=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx | 2 +- front/src/components/SnowGlobeCanvas/models/Emoji.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx b/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx index 5a2c8b6..d254e7b 100644 --- a/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx +++ b/front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx @@ -90,7 +90,7 @@ const SnowGlobeCanvas = React.memo( {snows} diff --git a/front/src/components/SnowGlobeCanvas/models/Emoji.tsx b/front/src/components/SnowGlobeCanvas/models/Emoji.tsx index 7ee98f7..a1c78d5 100644 --- a/front/src/components/SnowGlobeCanvas/models/Emoji.tsx +++ b/front/src/components/SnowGlobeCanvas/models/Emoji.tsx @@ -25,6 +25,7 @@ const randomizePosition = ( (radius / 2) * Math.sin(Math.random() * 2 * Math.PI) - 0.5; const height = centerPosition.y + radius + Math.random() * radius * 2; + console.log(height); target.position.set(x, height, z); }; From d8cf19f37b8b43402bccd24bbdb6b3d9e72baee0 Mon Sep 17 00:00:00 2001 From: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> Date: Mon, 11 Dec 2023 22:36:54 +0900 Subject: [PATCH 8/9] =?UTF-8?q?etc:=20build=ED=99=95=EC=9D=B8,=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SnowGlobeCanvas/models/Emoji.tsx | 1 - front/src/pages/Main/Main.tsx | 40 +++++++++---------- front/src/pages/Main/MainButtonBox.tsx | 1 - front/src/pages/Visit/Deco/Deco.tsx | 1 - front/src/pages/Visit/Deco/DecoEnroll.tsx | 1 - front/src/pages/Visit/SnowBallProvider.tsx | 1 - 6 files changed, 20 insertions(+), 25 deletions(-) diff --git a/front/src/components/SnowGlobeCanvas/models/Emoji.tsx b/front/src/components/SnowGlobeCanvas/models/Emoji.tsx index a1c78d5..7ee98f7 100644 --- a/front/src/components/SnowGlobeCanvas/models/Emoji.tsx +++ b/front/src/components/SnowGlobeCanvas/models/Emoji.tsx @@ -25,7 +25,6 @@ const randomizePosition = ( (radius / 2) * Math.sin(Math.random() * 2 * Math.PI) - 0.5; const height = centerPosition.y + radius + Math.random() * radius * 2; - console.log(height); target.position.set(x, height, z); }; diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx index defb047..58f358e 100644 --- a/front/src/pages/Main/Main.tsx +++ b/front/src/pages/Main/Main.tsx @@ -88,28 +88,28 @@ const Main = () => { } }; - const saveCookie = () => { - const cookieToken = import.meta.env.VITE_APP_COOKIE_TOKEN; - const cookieName = 'access_token'; - const cookieValue = cookieToken; - const today = new Date(); - const expire = new Date(); - const secure = true; - expire.setDate(today.getDate() + 1); - document.cookie = `${cookieName}=${cookieValue}; expires=${expire.toUTCString()}; secure=${secure}; path=/`; - - const cookieToken2 = true; - const cookieName2 = 'loggedin'; - const cookieValue2 = cookieToken2; - const today2 = new Date(); - const expire2 = new Date(); - const secure2 = true; - expire2.setDate(today2.getDate() + 1); - document.cookie = `${cookieName2}=${cookieValue2}; expires=${expire2.toUTCString()}; secure=${secure2}; path=/`; - }; + // const saveCookie = () => { + // const cookieToken = import.meta.env.VITE_APP_COOKIE_TOKEN; + // const cookieName = 'access_token'; + // const cookieValue = cookieToken; + // const today = new Date(); + // const expire = new Date(); + // const secure = true; + // expire.setDate(today.getDate() + 1); + // document.cookie = `${cookieName}=${cookieValue}; expires=${expire.toUTCString()}; secure=${secure}; path=/`; + + // const cookieToken2 = true; + // const cookieName2 = 'loggedin'; + // const cookieValue2 = cookieToken2; + // const today2 = new Date(); + // const expire2 = new Date(); + // const secure2 = true; + // expire2.setDate(today2.getDate() + 1); + // document.cookie = `${cookieName2}=${cookieValue2}; expires=${expire2.toUTCString()}; secure=${secure2}; path=/`; + // }; useEffect(() => { - saveCookie(); + // saveCookie(); if (!cookie.loggedin) { navigate('/'); diff --git a/front/src/pages/Main/MainButtonBox.tsx b/front/src/pages/Main/MainButtonBox.tsx index 658db35..d0bc76b 100644 --- a/front/src/pages/Main/MainButtonBox.tsx +++ b/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'; diff --git a/front/src/pages/Visit/Deco/Deco.tsx b/front/src/pages/Visit/Deco/Deco.tsx index d36b26f..ffb11b4 100644 --- a/front/src/pages/Visit/Deco/Deco.tsx +++ b/front/src/pages/Visit/Deco/Deco.tsx @@ -1,4 +1,3 @@ -import { useContext, useEffect } from 'react'; import { Prev, UIContainer } from '@components'; import Steps from './Steps'; import DecoCavnas from './DecoCanvas/DecoCanvas'; diff --git a/front/src/pages/Visit/Deco/DecoEnroll.tsx b/front/src/pages/Visit/Deco/DecoEnroll.tsx index 14a9d42..25f2053 100644 --- a/front/src/pages/Visit/Deco/DecoEnroll.tsx +++ b/front/src/pages/Visit/Deco/DecoEnroll.tsx @@ -3,7 +3,6 @@ import { NavigateFunction, useNavigate, useParams } from 'react-router-dom'; import styled from 'styled-components'; import { theme, BlurBody } from '@utils'; import { DecoContext } from './DecoProvider'; -import reset from 'styled-reset'; interface NaviProps { visible: [number, React.Dispatch>]; diff --git a/front/src/pages/Visit/SnowBallProvider.tsx b/front/src/pages/Visit/SnowBallProvider.tsx index 60d1671..3be47c6 100644 --- a/front/src/pages/Visit/SnowBallProvider.tsx +++ b/front/src/pages/Visit/SnowBallProvider.tsx @@ -52,7 +52,6 @@ const SnowBallProvider: React.FC<{ children: React.ReactNode }> = ({ is_message_private: !snowBallData.is_message_private }; axios.put(`/api/snowball/${snowBallData.id}`, newData).then(res => { - console.log(res.data); const resData = Object.assign({}, snowBallData); resData.is_message_private = res.data.is_message_private; setSnowBallData(resData); From dc6bac370ef06045368de5229fbf34209516b524 Mon Sep 17 00:00:00 2001 From: 5nxtnxtnxt <5nxtnxtnxt@gmail.com> Date: Mon, 11 Dec 2023 23:10:33 +0900 Subject: [PATCH 9/9] fix: build error fix --- front/src/pages/Boostcamp/Boostcamp.tsx | 138 ------------------------ 1 file changed, 138 deletions(-) delete mode 100644 front/src/pages/Boostcamp/Boostcamp.tsx diff --git a/front/src/pages/Boostcamp/Boostcamp.tsx b/front/src/pages/Boostcamp/Boostcamp.tsx deleted file mode 100644 index ed42562..0000000 --- a/front/src/pages/Boostcamp/Boostcamp.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { useRef, useEffect } from 'react'; -import styled from 'styled-components'; -import { Prev } from '@components'; -import BoostcampProject from './BoostcampProject'; - -class Flake { - x: number; - y: number; - sz: number; - sp: number; - t: number; - - constructor() { - this.x = Math.random() * window.innerWidth; - this.y = Math.random() * (window.innerHeight + 50); - this.sz = (100 / (10 + Math.random() * 100)) * 0.8; - this.sp = Math.pow(this.sz * 0.8, 2) * 0.15 * 0.5; - this.sp = this.sp < 1 ? 1 : this.sp; - this.t = Math.random() * (Math.PI * 2); - } - - draw(ctx: CanvasRenderingContext2D) { - const gradient = ctx.createRadialGradient( - this.x, - this.y, - 0, - this.x, - this.y, - this.sz + 8 - ); - gradient.addColorStop(0, 'hsla(255,255%,255%,1)'); - gradient.addColorStop(1, 'hsla(255,255%,255%,0)'); - ctx.fillStyle = gradient; - ctx.beginPath(); - ctx.arc(this.x, this.y, this.sz, 0, Math.PI * 2, true); - ctx.fill(); - } -} - -const BoostcampWrapper = styled.div` - width: 100%; - height: 100%; - position: absolute; - display: flex; - align-items: center; - justify-content: center; - pointer-events: none; -`; - -const BoostcampDiv = styled.div` - position: absolute; - width: 80%; - height: 90%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: rgba(255, 255, 255, 0.5); - border-radius: 1.25rem; - padding: 5%; - gap: 1.5rem; -`; - -const updateFlakes = (ctx: CanvasRenderingContext2D, flakes: Flake[]) => { - console.log('test'); - ctx.clearRect(0, 0, window.innerWidth, window.innerHeight); - ctx.fillStyle = 'hsla(242, 95%, 3%, 1)'; - ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); - - flakes.forEach(flake => { - flake.t += 0.05; - flake.t = flake.t >= Math.PI * 2 ? 0 : flake.t; - flake.y += flake.sp; - flake.x += Math.sin(flake.t * 1) * (flake.sz * 0.3); - - if (flake.y > window.innerHeight + 50) flake.y = -10 - Math.random() * 20; - if (flake.x > window.innerWidth + 20) flake.x = -20; - if (flake.x < -20) flake.x = window.innerWidth + 20; - flake.draw(ctx); - }); - - requestAnimationFrame(() => updateFlakes(ctx, flakes)); -}; - -const Boostcamp = () => { - const canvasRef = useRef(null); - - useEffect(() => { - const canvas = canvasRef.current; - if (!canvas) return; - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - - const flakes: Flake[] = []; - const num = 150; - for (let i = 0; i < num; i++) { - flakes.push(new Flake()); - } - - const ctx = canvas.getContext('2d'); - if (!ctx) return; - updateFlakes(ctx, flakes); - }, []); - - return ( - <> - - - - - - - - - - - - - - ); -}; - -export default Boostcamp;