From d85ab2da9abba06f3469901554eec046f8215d1d Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Fri, 18 Oct 2024 18:39:25 +0900 Subject: [PATCH 1/9] =?UTF-8?q?fix:=20IOS=EC=97=90=EC=84=9C=20=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=95=88=EC=98=AC=EB=9D=BC=EC=98=A4=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0=20#340?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useKeyboardHeight.ts | 25 +++++++++++++++++++ frontend/src/hooks/useKeyboardUp.ts | 24 ------------------ .../src/pages/NicknamePage/NicknamePage.tsx | 10 +++----- 3 files changed, 29 insertions(+), 30 deletions(-) create mode 100644 frontend/src/hooks/useKeyboardHeight.ts delete mode 100644 frontend/src/hooks/useKeyboardUp.ts diff --git a/frontend/src/hooks/useKeyboardHeight.ts b/frontend/src/hooks/useKeyboardHeight.ts new file mode 100644 index 00000000..792a8dfb --- /dev/null +++ b/frontend/src/hooks/useKeyboardHeight.ts @@ -0,0 +1,25 @@ +import { useEffect, useState } from 'react'; + +const INITIAL_BOTTOM_BUTTON_HEIGHT = 0; + +const useKeyboardHeight = () => { + const [bottomButtonHeight, setBottomButtonHeight] = useState(INITIAL_BOTTOM_BUTTON_HEIGHT); + + useEffect(() => { + const handleResizeScreen = () => { + if (!visualViewport) return; + + setBottomButtonHeight(window.innerHeight - visualViewport.height); + }; + + visualViewport?.addEventListener('resize', handleResizeScreen); + + return () => { + visualViewport?.removeEventListener('resize', handleResizeScreen); + }; + }, []); + + return { bottomButtonHeight }; +}; + +export default useKeyboardHeight; diff --git a/frontend/src/hooks/useKeyboardUp.ts b/frontend/src/hooks/useKeyboardUp.ts deleted file mode 100644 index b7674c26..00000000 --- a/frontend/src/hooks/useKeyboardUp.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { useEffect, useState } from 'react'; - -const useKeyboardUp = () => { - const [isKeyboardUp, setIsKeyboardUp] = useState(false); - - useEffect(() => { - const initialHeight = window.visualViewport?.height; - - const handleResize = () => { - const currentHeight = window.visualViewport?.height; - if (initialHeight && currentHeight && currentHeight < initialHeight) { - setIsKeyboardUp(true); - } else { - setIsKeyboardUp(false); - } - }; - window.addEventListener('resize', handleResize); - return () => { - window.removeEventListener('resize', handleResize); - }; - }, []); - return { isKeyboardUp }; -}; -export default useKeyboardUp; diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx index a54c5c2d..5e084158 100644 --- a/frontend/src/pages/NicknamePage/NicknamePage.tsx +++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx @@ -20,14 +20,14 @@ import AngryDdangkong from '@/assets/images/angryDdangkong.webp'; import SillyDdangkong from '@/assets/images/sillyDdangkong.webp'; import Button from '@/components/common/Button/Button'; import Content from '@/components/layout/Content/Content'; -import useKeyboardUp from '@/hooks/useKeyboardUp'; +import useKeyboardHeight from '@/hooks/useKeyboardHeight'; import { roomUuidState } from '@/recoil/atom'; const NicknamePage = () => { const { nicknameInputRef, handleMakeOrEnterRoom, isLoading } = useMakeOrEnterRoom(); const { roomUuid } = useParams(); const setRoomUuidState = useSetRecoilState(roomUuidState); - const { isKeyboardUp } = useKeyboardUp(); + const { bottomButtonHeight } = useKeyboardHeight(); const { data, isLoading: isJoinableLoading } = useQuery({ queryKey: ['isJoinable', roomUuid], @@ -68,10 +68,8 @@ const NicknamePage = () => { onClick={handleMakeOrEnterRoom} disabled={isLoading} text={isLoading ? '접속 중...' : '확인'} - bottom={!isKeyboardUp} - radius={isKeyboardUp ? 'small' : undefined} - size={isKeyboardUp ? 'small' : undefined} - style={{ width: '100%' }} + style={{ width: '100%', bottom: bottomButtonHeight, transition: 'bottom 0.2s' }} + bottom /> From d1aba4464ce0b967c776760bf0b0529b885b2168 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Fri, 18 Oct 2024 18:40:12 +0900 Subject: [PATCH 2/9] =?UTF-8?q?fix:=20=EC=9E=85=EB=A0=A5=EC=B0=BD=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=ED=96=88=EC=9D=84=20=EB=95=8C=20=ED=99=95?= =?UTF-8?q?=EB=8C=80=20=EC=95=88=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20#340?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/index.html | 136 ++++++++++++++++++++++++------------- 1 file changed, 88 insertions(+), 48 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index a23a5658..dbc88c40 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -1,56 +1,96 @@ - + + + + + + 땅콩 - 단체 대화주제 제공 서비스 - - - - - 땅콩 - 단체 대화주제 제공 서비스 + + - - + + - - + + + + + + + + - - - - - - - + + - - - - - - -
- - + +
+ From 8a3d888ae4f207584310126ca2e4633c89404342 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Sat, 19 Oct 2024 10:57:41 +0900 Subject: [PATCH 3/9] =?UTF-8?q?fix:=20=EC=A0=91=EA=B7=BC=EC=84=B1=EC=9D=84?= =?UTF-8?q?=20=EC=9C=84=ED=95=B4=20user-scale=20=EC=A0=9C=EC=96=B4=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20#340?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/index.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index dbc88c40..3393f8f3 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -2,10 +2,7 @@ - + Date: Sat, 19 Oct 2024 11:08:08 +0900 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20ios=20=EC=9D=B8=ED=92=8B=EC=B0=BD?= =?UTF-8?q?=EC=9D=B4=20=ED=99=95=EB=8C=80=EB=90=98=EB=8A=94=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=EB=A5=BC=20font-size=20=ED=82=A4=EC=9B=8C=EC=84=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=20#340?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.stylelintrc.json | 3 ++- .../pages/NicknamePage/NicknameInput/NicknameInput.styled.ts | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/.stylelintrc.json b/frontend/.stylelintrc.json index 53447c39..4a764618 100644 --- a/frontend/.stylelintrc.json +++ b/frontend/.stylelintrc.json @@ -78,7 +78,8 @@ "text-align", "text-indent", "vertical-align", - "white-space" + "white-space", + "outline" ] }, { diff --git a/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.styled.ts b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.styled.ts index f5055c11..6f3633e6 100644 --- a/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.styled.ts +++ b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.styled.ts @@ -18,6 +18,8 @@ export const nicknameInput = css` border: 0; background-color: ${Theme.color.gray200}; + + font-size: 1.6rem; outline: none; `; From 43769b0a910f8d5a5cb24a72c0b6c60aebba2ea7 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Sat, 19 Oct 2024 11:10:22 +0900 Subject: [PATCH 5/9] =?UTF-8?q?fix:=20ios=20=EC=9D=B8=ED=92=8B=EC=B0=BD?= =?UTF-8?q?=EC=9D=84=20=ED=81=B4=EB=A6=AD=ED=96=88=EC=9D=84=20=EB=95=8C=20?= =?UTF-8?q?=ED=8F=AC=EC=BB=A4=EC=8A=A4=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20?= =?UTF-8?q?=EC=9E=90=EC=B2=B4=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C?= =?UTF-8?q?=EB=A5=BC=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EC=97=AC?= =?UTF-8?q?=EB=B0=B1=EC=9D=84=20=EC=A4=84=EC=97=AC=20=ED=95=B4=EA=B2=B0=20?= =?UTF-8?q?#340?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/layout/Content/Content.styled.ts | 2 +- frontend/src/components/layout/Header/Header.styled.ts | 2 +- frontend/src/pages/NicknamePage/NicknamePage.styled.ts | 3 ++- frontend/src/pages/NicknamePage/NicknamePage.tsx | 2 -- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/layout/Content/Content.styled.ts b/frontend/src/components/layout/Content/Content.styled.ts index 8f3ec30a..680e7b31 100644 --- a/frontend/src/components/layout/Content/Content.styled.ts +++ b/frontend/src/components/layout/Content/Content.styled.ts @@ -5,6 +5,6 @@ export const contentLayout = css` flex-direction: column; align-items: center; gap: 1.6rem; - height: 85vh; + height: 88vh; padding: 0 2.4rem; `; diff --git a/frontend/src/components/layout/Header/Header.styled.ts b/frontend/src/components/layout/Header/Header.styled.ts index 61c5a927..90376364 100644 --- a/frontend/src/components/layout/Header/Header.styled.ts +++ b/frontend/src/components/layout/Header/Header.styled.ts @@ -6,7 +6,7 @@ export const headerLayout = (isCenter?: boolean) => css` display: flex; justify-content: ${isCenter ? 'center' : 'space-between'}; align-items: center; - height: 15vh; + height: 12vh; padding: 0 2.4rem; `; diff --git a/frontend/src/pages/NicknamePage/NicknamePage.styled.ts b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts index e0c054e1..ca8adbe3 100644 --- a/frontend/src/pages/NicknamePage/NicknamePage.styled.ts +++ b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts @@ -22,7 +22,7 @@ export const nicknameContainer = css` flex-direction: column; gap: 1.2rem; width: 26.8rem; - margin: 2rem 0; + margin-bottom: 2rem; `; export const nicknameTitle = css` @@ -46,6 +46,7 @@ export const nicknameInput = css` border: 0; background-color: ${Theme.color.gray200}; + outline: none; `; diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx index 5e084158..06ad0ec4 100644 --- a/frontend/src/pages/NicknamePage/NicknamePage.tsx +++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx @@ -10,7 +10,6 @@ import { noVoteTextContainer, noVoteText, angryImage, - nicknameTitle, nicknameContainer, } from './NicknamePage.styled'; import useMakeOrEnterRoom from './useMakeOrEnterRoom'; @@ -59,7 +58,6 @@ const NicknamePage = () => { 사용자 프로필
- 닉네임 Date: Sat, 19 Oct 2024 14:42:59 +0900 Subject: [PATCH 6/9] =?UTF-8?q?fix:=20=ED=99=88=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EC=99=B8=EC=97=90=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=ED=9B=84=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=EC=8B=9C=20?= =?UTF-8?q?=EB=B0=9C=EC=83=9D=ED=95=98=EB=8A=94=20=EB=B9=84=EB=8F=99?= =?UTF-8?q?=EA=B8=B0=20=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0=20#340?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/index.tsx | 8 +++++++- frontend/src/router/MainLayout.tsx | 9 +++------ frontend/src/router/index.tsx | 2 +- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 7ba7c714..752b338c 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -6,6 +6,8 @@ import ReactDOM from 'react-dom/client'; import { RouterProvider } from 'react-router-dom'; import { RecoilRoot } from 'recoil'; +import AsyncErrorBoundary from './components/common/ErrorBoundary/AsyncErrorBoundary'; +import RootErrorBoundary from './components/common/ErrorBoundary/RootErrorBoundary'; import ToastProvider from './providers/ToastProvider/ToastProvider'; import { router } from './router'; import GlobalStyle from './styles/GlobalStyle'; @@ -36,7 +38,11 @@ enableMocking().then(() => { - + + + + + diff --git a/frontend/src/router/MainLayout.tsx b/frontend/src/router/MainLayout.tsx index 47b51ce9..d0b7c4b4 100644 --- a/frontend/src/router/MainLayout.tsx +++ b/frontend/src/router/MainLayout.tsx @@ -1,15 +1,12 @@ import { Outlet } from 'react-router-dom'; -import RootErrorBoundary from '@/components/common/ErrorBoundary/RootErrorBoundary'; import ModalProvider from '@/providers/ModalProvider/ModalProvider'; const MainLayout = () => { return ( - - - - - + + + ); }; diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx index 9267a608..fdd09ef1 100644 --- a/frontend/src/router/index.tsx +++ b/frontend/src/router/index.tsx @@ -42,7 +42,7 @@ export const router = createBrowserRouter([ path: 'nickname/:roomUuid?', element: ( - , + ), }, From 0db66ef2d86d41d4a5a5d459460cc709fe46bd44 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Sun, 20 Oct 2024 23:29:57 +0900 Subject: [PATCH 7/9] =?UTF-8?q?fix:=20ios=20=EA=B0=80=EC=83=81=ED=82=A4?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=EC=97=90=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=83=9D=EA=B8=B0=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0=20#340?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useKeyboardHeight.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/src/hooks/useKeyboardHeight.ts b/frontend/src/hooks/useKeyboardHeight.ts index 792a8dfb..f07fc9ad 100644 --- a/frontend/src/hooks/useKeyboardHeight.ts +++ b/frontend/src/hooks/useKeyboardHeight.ts @@ -5,6 +5,17 @@ const INITIAL_BOTTOM_BUTTON_HEIGHT = 0; const useKeyboardHeight = () => { const [bottomButtonHeight, setBottomButtonHeight] = useState(INITIAL_BOTTOM_BUTTON_HEIGHT); + useEffect(() => { + const handleLockScroll = (e: TouchEvent) => { + e.preventDefault(); + }; + + document.body.addEventListener('touchmove', handleLockScroll, { passive: false }); + return () => { + document.body.removeEventListener('touchmove', handleLockScroll); + }; + }, []); + useEffect(() => { const handleResizeScreen = () => { if (!visualViewport) return; From 129032a4a64da89afe7f67f4468b1479303acabe Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Mon, 21 Oct 2024 21:43:52 +0900 Subject: [PATCH 8/9] =?UTF-8?q?fix:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=ED=9B=85=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?#340?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{useKeyboardHeight.ts => useButtonHeightOnKeyboard.ts} | 4 ++-- frontend/src/pages/NicknamePage/NicknamePage.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) rename frontend/src/hooks/{useKeyboardHeight.ts => useButtonHeightOnKeyboard.ts} (91%) diff --git a/frontend/src/hooks/useKeyboardHeight.ts b/frontend/src/hooks/useButtonHeightOnKeyboard.ts similarity index 91% rename from frontend/src/hooks/useKeyboardHeight.ts rename to frontend/src/hooks/useButtonHeightOnKeyboard.ts index f07fc9ad..9ca8cebd 100644 --- a/frontend/src/hooks/useKeyboardHeight.ts +++ b/frontend/src/hooks/useButtonHeightOnKeyboard.ts @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; const INITIAL_BOTTOM_BUTTON_HEIGHT = 0; -const useKeyboardHeight = () => { +const useButtonHeightOnKeyboard = () => { const [bottomButtonHeight, setBottomButtonHeight] = useState(INITIAL_BOTTOM_BUTTON_HEIGHT); useEffect(() => { @@ -33,4 +33,4 @@ const useKeyboardHeight = () => { return { bottomButtonHeight }; }; -export default useKeyboardHeight; +export default useButtonHeightOnKeyboard; diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx index 06ad0ec4..fe346217 100644 --- a/frontend/src/pages/NicknamePage/NicknamePage.tsx +++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx @@ -19,14 +19,14 @@ import AngryDdangkong from '@/assets/images/angryDdangkong.webp'; import SillyDdangkong from '@/assets/images/sillyDdangkong.webp'; import Button from '@/components/common/Button/Button'; import Content from '@/components/layout/Content/Content'; -import useKeyboardHeight from '@/hooks/useKeyboardHeight'; +import useButtonHeightOnKeyboard from '@/hooks/useButtonHeightOnKeyboard'; import { roomUuidState } from '@/recoil/atom'; const NicknamePage = () => { const { nicknameInputRef, handleMakeOrEnterRoom, isLoading } = useMakeOrEnterRoom(); const { roomUuid } = useParams(); const setRoomUuidState = useSetRecoilState(roomUuidState); - const { bottomButtonHeight } = useKeyboardHeight(); + const { bottomButtonHeight } = useButtonHeightOnKeyboard(); const { data, isLoading: isJoinableLoading } = useQuery({ queryKey: ['isJoinable', roomUuid], @@ -66,7 +66,7 @@ const NicknamePage = () => { onClick={handleMakeOrEnterRoom} disabled={isLoading} text={isLoading ? '접속 중...' : '확인'} - style={{ width: '100%', bottom: bottomButtonHeight, transition: 'bottom 0.2s' }} + style={{ width: '100%', bottom: bottomButtonHeight }} bottom />
From c28280035f43fdfbccaea3fcf1520390e32fe482 Mon Sep 17 00:00:00 2001 From: rbgksqkr Date: Mon, 21 Oct 2024 21:46:40 +0900 Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20maximum=20scale=20=EC=A0=9C=EA=B1=B0=20#340?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index 3393f8f3..3f77054d 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -2,7 +2,7 @@ - +