diff --git a/frontend/.stylelintrc.json b/frontend/.stylelintrc.json
index 53447c391..4a764618e 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/public/index.html b/frontend/public/index.html
index a23a5658c..3f77054d4 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -1,56 +1,93 @@
-
+
+
+
+
+
+ 땅콩 - 단체 대화주제 제공 서비스
-
-
-
-
- 땅콩 - 단체 대화주제 제공 서비스
+
+
-
-
+
+
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
+
+
+
diff --git a/frontend/src/components/layout/Content/Content.styled.ts b/frontend/src/components/layout/Content/Content.styled.ts
index 8f3ec30ad..680e7b31e 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 61c5a9273..903763644 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/hooks/useButtonHeightOnKeyboard.ts b/frontend/src/hooks/useButtonHeightOnKeyboard.ts
new file mode 100644
index 000000000..9ca8cebd0
--- /dev/null
+++ 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
deleted file mode 100644
index b7674c269..000000000
--- 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/index.tsx b/frontend/src/index.tsx
index 7ba7c7146..752b338c2 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/pages/NicknamePage/NicknameInput/NicknameInput.styled.ts b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.styled.ts
index f5055c113..6f3633e69 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;
`;
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.styled.ts b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
index e0c054e16..ca8adbe30 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 a54c5c2dd..fe346217f 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';
@@ -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 = () => {
- 닉네임
{
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
/>
diff --git a/frontend/src/router/MainLayout.tsx b/frontend/src/router/MainLayout.tsx
index 47b51ce90..d0b7c4b4c 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 9267a6085..fdd09ef14 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: (
- ,
+
),
},