merge: 닉네임 화면에서 키보드와 함께 버튼이 안올라오는 IOS 문제 개선 & 라우팅 오류 해결 #340

[FIX] 닉네임 화면에서 키보드와 함께 버튼이 안올라오는 IOS 문제 개선 & 라우팅 오류 해결
woowacourse-teams · Oct 21, 2024 · f07d1c6 · f07d1c6
2 parents 914b2d0 + c282800
commit f07d1c6
Show file tree

Hide file tree

Showing 12 changed files with 144 additions and 92 deletions.
diff --git 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/public/index.html b/frontend/public/index.html
@@ -1,56 +1,93 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="심심풀이 땅콩처럼 가벼운 주제로 친구들과 즐기는 단체 대화주제 제공 서비스"
+    />
+    <title>땅콩 - 단체 대화주제 제공 서비스</title>
 
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="심심풀이 땅콩처럼 가벼운 주제로 친구들과 즐기는 단체 대화주제 제공 서비스">
-  <title>땅콩 - 단체 대화주제 제공 서비스</title>
+    <link rel="preconnect" href="https://o4507724312477696.ingest.us.sentry.io" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
 
-  <link rel="preconnect" href="https://o4507724312477696.ingest.us.sentry.io">
-  <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link
+      rel="preload"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"
+    />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css"
+    />
 
-  <link rel="preload" as="style" crossorigin
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css" />
-  <link rel="stylesheet" as="style" crossorigin
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.min.css" />
+    <link
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Regular.subset.91.woff2"
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.83.woff2"
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.84.woff2"
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.85.woff2"
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.89.woff2"
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.90.woff2"
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.91.woff2"
+      rel="preload"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+  </head>
 
-  <link
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Regular.subset.91.woff2"
-    rel="preload" as="font" type="font/woff2" crossorigin />
-  <link
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.83.woff2"
-    rel="preload" as="font" type="font/woff2" crossorigin />
-  <link
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.84.woff2"
-    rel="preload" as="font" type="font/woff2" crossorigin />
-  <link
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.85.woff2"
-    rel="preload" as="font" type="font/woff2" crossorigin />
-  <link
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.89.woff2"
-    rel="preload" as="font" type="font/woff2" crossorigin />
-  <link
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.90.woff2"
-    rel="preload" as="font" type="font/woff2" crossorigin />
-  <link
-    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/packages/pretendard/dist/web/static/woff2-dynamic-subset/Pretendard-Bold.subset.91.woff2"
-    rel="preload" as="font" type="font/woff2" crossorigin />
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-3BFVVPQT0Z"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
 
+    gtag('config', 'G-3BFVVPQT0Z');
+  </script>
 
-</head>
-
-<script async src="https://www.googletagmanager.com/gtag/js?id=G-3BFVVPQT0Z"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag() { dataLayer.push(arguments); }
-  gtag('js', new Date());
-
-  gtag('config', 'G-3BFVVPQT0Z');
-</script>
-
-<body>
-  <div id="root"></div>
-</body>
-
+  <body>
+    <div id="root"></div>
+  </body>
 </html>
diff --git 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
@@ -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/hooks/useButtonHeightOnKeyboard.ts b/frontend/src/hooks/useButtonHeightOnKeyboard.ts
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+const INITIAL_BOTTOM_BUTTON_HEIGHT = 0;
+
+const useButtonHeightOnKeyboard = () => {
+  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;
+
+      setBottomButtonHeight(window.innerHeight - visualViewport.height);
+    };
+
+    visualViewport?.addEventListener('resize', handleResizeScreen);
+
+    return () => {
+      visualViewport?.removeEventListener('resize', handleResizeScreen);
+    };
+  }, []);
+
+  return { bottomButtonHeight };
+};
+
+export default useButtonHeightOnKeyboard;
diff --git a/frontend/src/hooks/useKeyboardUp.ts b/frontend/src/hooks/useKeyboardUp.ts
diff --git 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(() => {
         <ThemeProvider theme={Theme}>
           <Global styles={GlobalStyle} />
           <ToastProvider>
-            <RouterProvider router={router} />
+            <RootErrorBoundary>
+              <AsyncErrorBoundary>
+                <RouterProvider router={router} />
+              </AsyncErrorBoundary>
+            </RootErrorBoundary>
           </ToastProvider>
           <ReactQueryDevtools initialIsOpen={false} />
         </ThemeProvider>

diff --git 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;
 `;
 

diff --git 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
@@ -10,7 +10,6 @@ import {
   noVoteTextContainer,
   noVoteText,
   angryImage,
-  nicknameTitle,
   nicknameContainer,
 } from './NicknamePage.styled';
 import useMakeOrEnterRoom from './useMakeOrEnterRoom';
@@ -20,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 useKeyboardUp from '@/hooks/useKeyboardUp';
+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 { isKeyboardUp } = useKeyboardUp();
+  const { bottomButtonHeight } = useButtonHeightOnKeyboard();
 
   const { data, isLoading: isJoinableLoading } = useQuery({
     queryKey: ['isJoinable', roomUuid],
@@ -59,7 +58,6 @@ const NicknamePage = () => {
         <img src={SillyDdangkong} alt="사용자 프로필" css={profileImg} />
       </div>
       <div css={nicknameContainer}>
-        <span css={nicknameTitle}>닉네임</span>
         <NicknameInput
           nicknameInputRef={nicknameInputRef}
           handleMakeOrEnterRoom={handleMakeOrEnterRoom}
@@ -68,10 +66,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 }}
+          bottom
         />
       </div>
     </Content>

diff --git 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 (
-    <RootErrorBoundary>
-      <ModalProvider>
-        <Outlet />
-      </ModalProvider>
-    </RootErrorBoundary>
+    <ModalProvider>
+      <Outlet />
+    </ModalProvider>
   );
 };
 

diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
@@ -42,7 +42,7 @@ export const router = createBrowserRouter([
             path: 'nickname/:roomUuid?',
             element: (
               <AsyncErrorBoundary>
-                <NicknamePage />,
+                <NicknamePage />
               </AsyncErrorBoundary>
             ),
           },