diff --git a/README.md b/README.md
index 53da700f9..ccf11ca28 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,60 @@
-# 땅콩 🥜
+<div align="center">
+  <h3><a href="https://ddangkong.kr/">땅콩 바로가기</a></h3>
+ <img src="https://github.com/user-attachments/assets/f47b6023-fc55-4072-92b4-0551135a95d0" width="100" height="150" />
+ <h4>심심풀이 땅콩처럼 가벼운 주제로 친구들과 즐기는 단체 대화주제 제공 서비스 🥜</h4>
+</div>
+
+# 서비스 소개
+
+`심심풀이 땅콩` 이라는 말을 들어보신 적 있으신가요? 이 표현은 일부러라도 먹는 일을 만들어 무료함을 잊으려는 심리에서 유래되었습니다. 이처럼, 땅콩 서비스는 **가볍게 대화를 시작하고 이어나가고자 하는 사람들을 위해 만들어졌습니다.**
+
+함께 모인 자리에서 대화 주제가 부족하진 않으신가요? 친해지고 싶은 사람들과 더 많은 대화를 나누고 싶지는 않으신가요?
+대화를 하다보면 어색한 침묵이 흐르는 경우가 있습니다. 땅콩은 음식, MBTI, 연애, 만약에 등 `다양한 카테고리의 대화 주제를 제공` 하여 이를 해결하려고 합니다.
+
+> [카테고리별 질문 예시]
+>
+> `음식` : 개구리 맛 초콜릿 vs 초콜릿 맛 개구리
+>
+> `MBTI` : 내가 '이번주 토요일에 뭐해?'라고 물어볼 때는 : 약속을 잡으려고 물어본다 vs 단지 뭐하는지 궁금해서 물어본다
+>
+> `연애` : 외모 빼고 모든 것이 안 맞는 애인 vs 외모 빼고 모든 것이 잘 맞는 애인
+>
+> `만약에` : 전애인 친구랑 사귀기 vs 친구 전애인이랑 사귀기
+
+이 주제들을 통해 서로의 생각을 공유하고, 자연스럽게 즐거운 대화를 이어나갈 수 있습니다. 땅콩과 함께라면, 더 이상 대화의 시작을 고민하지 않아도 됩니다. 누구나 쉽고 즐겁게 소통할 수 있는 기회를 제공하는 땅콩, **지금 당장 회원가입 없이 [땅콩](https://ddangkong.kr/)을 사용해보세요.**
+
+# 주요 기능 소개
+
+### 1. 다양한 대화 주제 제공
+
+![대화주제_제공](https://github.com/user-attachments/assets/cfe966ea-698f-42b6-94f5-628d4e15e0e3)
+
+### 2. `실시간 데이터 통신` 을 통해 시끄러운 오프라인 공간에서도 `멀티 플레이` 로 재밌게 즐길 수 있음
+
+![멀티플레이](https://github.com/user-attachments/assets/046422a7-a389-4469-b8f0-cb72339946e9)
+
+### 3. 게임 내에서 나와 같은 선택을 한 사람과의 `매칭도 순위` 를 통해 공감대 형성
+
+![매칭도](https://github.com/user-attachments/assets/019f0779-df57-444b-842a-37fe6d970e07)
+
+# 인프라
+
+<img src="https://github.com/user-attachments/assets/d010f50c-4662-40ac-b06b-46b1b2b2fadf" width="400"  height="600"/>
+
+# 팀원 소개
+
+### 프론트엔드
+
+| <img src="https://avatars.githubusercontent.com/u/63959171?v=4" width="100" height="100"/> | <img src="https://avatars.githubusercontent.com/u/74897720?v=4" width="100" height="100"/> | <img src="https://avatars.githubusercontent.com/u/111696934?v=4" width="100" height="100"/> |
+| :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
+|                            [마루](https://github.com/rbgksqkr)                             |                             [썬데이](https://github.com/useon)                             |                            [포메](https://github.com/novice0840)                            |
+
+### 백엔드
+
+| <img src="https://avatars.githubusercontent.com/u/84304802?v=4" width="100" height="100"/> | <img src="https://avatars.githubusercontent.com/u/44027393?v=4" width="100" height="100"/> | <img src="https://avatars.githubusercontent.com/u/78288539?v=4" width="100" height="100"/> | <img src="https://avatars.githubusercontent.com/u/101033262?v=4" width="100" height="100"/> |
+| :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
+|                             [이든](https://github.com/PgmJun)                              |                           [커찬](https://github.com/leegwichan)                            |                            [타칸](https://github.com/jhon3242)                             |                             [프린](https://github.com/GIVEN53)                              |
+
+# 그라운드 룰
+
+<img width="800" alt="image" src="https://github.com/user-attachments/assets/cb7a1016-e7be-4cec-b4eb-39327eef3ef9">
diff --git a/backend/src/main/java/ddangkong/aop/logging/DevRequestLoggingAspect.java b/backend/src/main/java/ddangkong/aop/logging/DevRequestLoggingAspect.java
new file mode 100644
index 000000000..0572cde47
--- /dev/null
+++ b/backend/src/main/java/ddangkong/aop/logging/DevRequestLoggingAspect.java
@@ -0,0 +1,18 @@
+package ddangkong.aop.logging;
+
+
+import org.aspectj.lang.JoinPoint;
+import org.aspectj.lang.annotation.Aspect;
+import org.aspectj.lang.annotation.Before;
+import org.springframework.context.annotation.Profile;
+import org.springframework.stereotype.Component;
+
+@Aspect
+@Component
+@Profile({"dev", "local"})
+public class DevRequestLoggingAspect extends RequestLoggingAspect {
+    @Before("allController()")
+    public void logController(JoinPoint joinPoint) {
+        super.logController(joinPoint);
+    }
+}
diff --git a/backend/src/main/java/ddangkong/aop/logging/ProdRequestLoggingAspect.java b/backend/src/main/java/ddangkong/aop/logging/ProdRequestLoggingAspect.java
new file mode 100644
index 000000000..ab8f0ddb8
--- /dev/null
+++ b/backend/src/main/java/ddangkong/aop/logging/ProdRequestLoggingAspect.java
@@ -0,0 +1,18 @@
+package ddangkong.aop.logging;
+
+
+import org.aspectj.lang.JoinPoint;
+import org.aspectj.lang.annotation.Aspect;
+import org.aspectj.lang.annotation.Before;
+import org.springframework.context.annotation.Profile;
+import org.springframework.stereotype.Component;
+
+@Aspect
+@Component
+@Profile("prod")
+public class ProdRequestLoggingAspect extends RequestLoggingAspect {
+    @Before("allControllerWithoutPolling()")
+    public void logController(JoinPoint joinPoint) {
+        super.logController(joinPoint);
+    }
+}
diff --git a/backend/src/main/java/ddangkong/aop/logging/RequestLoggingAspect.java b/backend/src/main/java/ddangkong/aop/logging/RequestLoggingAspect.java
index 45836d6f6..27622ae63 100644
--- a/backend/src/main/java/ddangkong/aop/logging/RequestLoggingAspect.java
+++ b/backend/src/main/java/ddangkong/aop/logging/RequestLoggingAspect.java
@@ -6,19 +6,14 @@
 import java.lang.reflect.Parameter;
 import lombok.extern.slf4j.Slf4j;
 import org.aspectj.lang.JoinPoint;
-import org.aspectj.lang.annotation.Aspect;
-import org.aspectj.lang.annotation.Before;
 import org.aspectj.lang.annotation.Pointcut;
 import org.aspectj.lang.reflect.MethodSignature;
-import org.springframework.stereotype.Component;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.context.request.RequestContextHolder;
 import org.springframework.web.context.request.ServletRequestAttributes;
 
-@Aspect
-@Component
 @Slf4j
-public class RequestLoggingAspect {
+abstract class RequestLoggingAspect {
 
     @Pointcut("execution(* ddangkong.controller..*Controller.*(..))")
     public void allController() {
@@ -32,8 +27,11 @@ public void polling() {
     public void allControllerWithoutPolling() {
     }
 
-    @Before("allController()")
-    public void logController(JoinPoint joinPoint) {
+    protected void logController(JoinPoint joinPoint) {
+        logRequest(joinPoint);
+    }
+
+    private void logRequest(JoinPoint joinPoint) {
         HttpServletRequest request = getHttpServletRequest();
         String uri = request.getRequestURI();
         String httpMethod = request.getMethod();
diff --git a/backend/src/main/resources/application-prod.yml b/backend/src/main/resources/application-prod.yml
index 37beb7652..ff7eef976 100644
--- a/backend/src/main/resources/application-prod.yml
+++ b/backend/src/main/resources/application-prod.yml
@@ -12,7 +12,7 @@ spring:
       mode: never
 
   jpa:
-    database-platform: org.hibernate.dialect.MySQL8Dialect
+    database-platform: org.hibernate.dialect.MySQLDialect
     hibernate:
       ddl-auto: none
     properties:
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
index 8550cb1e5..e2cc0f747 100644
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { MemoryRouter } from 'react-router-dom';
 import { Global, ThemeProvider } from '@emotion/react';
@@ -33,14 +34,14 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={Theme}>
-          <MemoryRouter initialEntries={['/']}>
-            <Global styles={GlobalStyle} />
-            <ToastProvider>
+        <RecoilRoot>
+          <ThemeProvider theme={Theme}>
+            <MemoryRouter initialEntries={['/']}>
+              <Global styles={GlobalStyle} />
               <Story />
-            </ToastProvider>
-          </MemoryRouter>
-        </ThemeProvider>
+            </MemoryRouter>
+          </ThemeProvider>
+        </RecoilRoot>
       </QueryClientProvider>
     ),
   ],
diff --git a/frontend/src/components/SelectContainer/SelectContainer.hook.ts b/frontend/src/components/SelectContainer/SelectContainer.hook.ts
index 34416b9c6..f670ed445 100644
--- a/frontend/src/components/SelectContainer/SelectContainer.hook.ts
+++ b/frontend/src/components/SelectContainer/SelectContainer.hook.ts
@@ -3,9 +3,9 @@ import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { fetchRoundVoteIsFinished } from '@/apis/balanceContent';
+import { POLLING_DELAY } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { ROUTES } from '@/constants/routes';
-import { POLLING_DELAY } from '@/constants/time';
 
 interface UseRoundIsFinishedQueryProps {
   contentId?: number;
diff --git a/frontend/src/components/Timer/Timer.hook.ts b/frontend/src/components/Timer/Timer.hook.ts
index b35a09007..3696d5482 100644
--- a/frontend/src/components/Timer/Timer.hook.ts
+++ b/frontend/src/components/Timer/Timer.hook.ts
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 
 import { convertMsecToSecond } from './Timer.util';
 
-import { ONE_SECOND } from '@/constants/time';
+import { POLLING_DELAY } from '@/constants/config';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
 
 const INITIAL_WIDTH = 100;
@@ -32,7 +32,7 @@ const useRoundTimer = (roomId: number) => {
     timeout.current = setInterval(() => {
       setLeftRoundTime((prev) => prev - 1);
       setBarWidthPercent((prevWidth) => (prevWidth > 0 ? prevWidth - DECREASE_RATE : 0));
-    }, ONE_SECOND);
+    }, POLLING_DELAY);
 
     return () => {
       clearInterval(timeout.current);
diff --git a/frontend/src/components/Timer/Timer.util.ts b/frontend/src/components/Timer/Timer.util.ts
index d4cd88a57..6d6f1727c 100644
--- a/frontend/src/components/Timer/Timer.util.ts
+++ b/frontend/src/components/Timer/Timer.util.ts
@@ -1,4 +1,4 @@
-import { ONE_SECOND } from '@/constants/time';
+import { POLLING_DELAY } from '@/constants/config';
 
 export const formatLeftRoundTime = (leftRoundTime: number) => {
   const minutes = Math.floor(leftRoundTime / 60);
@@ -11,6 +11,6 @@ export const formatLeftRoundTime = (leftRoundTime: number) => {
 };
 
 export const convertMsecToSecond = (msec: number) => {
-  const UNIT_MSEC = ONE_SECOND;
+  const UNIT_MSEC = POLLING_DELAY;
   return msec / UNIT_MSEC;
 };
diff --git a/frontend/src/components/common/RoomSettingModal/RoomSettingModal.test.tsx b/frontend/src/components/common/RoomSettingModal/RoomSettingModal.test.tsx
index 8f74cfc1a..90f2c94a2 100644
--- a/frontend/src/components/common/RoomSettingModal/RoomSettingModal.test.tsx
+++ b/frontend/src/components/common/RoomSettingModal/RoomSettingModal.test.tsx
@@ -3,7 +3,7 @@ import { userEvent } from '@testing-library/user-event';
 
 import RoomSettingModal from './RoomSettingModal';
 
-import { ONE_SECOND } from '@/constants/time';
+import { POLLING_DELAY } from '@/constants/config';
 import { useGetRoomInfo } from '@/hooks/useGetRoomInfo';
 import ROOM_INFO from '@/mocks/data/roomInfo.json';
 import { customRender, wrapper } from '@/utils/test-utils';
@@ -88,7 +88,7 @@ describe('RoomSettingModal 방 설정 모달 테스트', () => {
       expect(result.current.roomSetting).toEqual(ROOM_INFO.roomSetting);
     });
 
-    await clickButton(`${TIME_LIMIT / ONE_SECOND}초`);
+    await clickButton(`${TIME_LIMIT / POLLING_DELAY}초`);
     await clickButton('적용');
 
     await waitFor(() => {
diff --git a/frontend/src/components/common/RoomSettingModal/RoomSettingModal.tsx b/frontend/src/components/common/RoomSettingModal/RoomSettingModal.tsx
index 007b68490..300fa7208 100644
--- a/frontend/src/components/common/RoomSettingModal/RoomSettingModal.tsx
+++ b/frontend/src/components/common/RoomSettingModal/RoomSettingModal.tsx
@@ -9,7 +9,7 @@ import {
 } from './RoomSettingModal.styled';
 import Modal from '../Modal/Modal';
 
-import { ONE_SECOND } from '@/constants/time';
+import { POLLING_DELAY } from '@/constants/config';
 
 const TOTAL_ROUND_LIST = [5, 7, 10];
 const TIMER_PER_ROUND_LIST = [5000, 10000, 15000];
@@ -58,7 +58,7 @@ const RoomSettingModal = ({ isOpen, onClose }: RoomSettingModalProps) => {
                   onClick={handleClickTimeLimit}
                   value={timeLimit}
                 >
-                  {timeLimit / ONE_SECOND}초
+                  {timeLimit / POLLING_DELAY}초
                 </button>
               </li>
             ))}
diff --git a/frontend/src/constants/config.ts b/frontend/src/constants/config.ts
new file mode 100644
index 000000000..af490ba5f
--- /dev/null
+++ b/frontend/src/constants/config.ts
@@ -0,0 +1,2 @@
+export const NICKNAME_MAX_LENGTH = 12;
+export const POLLING_DELAY = 1000;
diff --git a/frontend/src/constants/time.ts b/frontend/src/constants/time.ts
deleted file mode 100644
index 379bf3026..000000000
--- a/frontend/src/constants/time.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const ONE_SECOND = 1000;
-
-export const POLLING_DELAY = ONE_SECOND;
diff --git a/frontend/src/hooks/useGetRoomInfo.ts b/frontend/src/hooks/useGetRoomInfo.ts
index 0ef16c34d..f76fa4ff7 100644
--- a/frontend/src/hooks/useGetRoomInfo.ts
+++ b/frontend/src/hooks/useGetRoomInfo.ts
@@ -3,9 +3,9 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { getRoomInfo } from '@/apis/room';
+import { POLLING_DELAY } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { ROUTES } from '@/constants/routes';
-import { ONE_SECOND } from '@/constants/time';
 
 export const useGetRoomInfo = () => {
   const { roomId } = useParams();
@@ -18,8 +18,9 @@ export const useGetRoomInfo = () => {
       if (query.state.error && query.state.fetchFailureCount >= 3) {
         return false;
       }
-      return ONE_SECOND;
+      return POLLING_DELAY;
     },
+
     gcTime: 0,
   });
 
diff --git a/frontend/src/hooks/useMyGameStatusQuery.ts b/frontend/src/hooks/useMyGameStatusQuery.ts
index c9e78de48..7f3b6dac1 100644
--- a/frontend/src/hooks/useMyGameStatusQuery.ts
+++ b/frontend/src/hooks/useMyGameStatusQuery.ts
@@ -1,8 +1,8 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { checkMyGameStatus } from '@/apis/balanceContent';
+import { POLLING_DELAY } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
-import { ONE_SECOND } from '@/constants/time';
 
 interface useMyGameStatusQueryProps {
   currentRound: number | undefined;
@@ -22,7 +22,7 @@ const useMyGameStatusQuery = ({ roomId, currentRound }: useMyGameStatusQueryProp
       });
     },
     enabled: !!currentRound,
-    refetchInterval: ONE_SECOND,
+    refetchInterval: POLLING_DELAY,
     gcTime: 0,
   });
 
diff --git a/frontend/src/mocks/handlers/balanceContentHandler.ts b/frontend/src/mocks/handlers/balanceContentHandler.ts
index 9c49c39f2..641d4acfe 100644
--- a/frontend/src/mocks/handlers/balanceContentHandler.ts
+++ b/frontend/src/mocks/handlers/balanceContentHandler.ts
@@ -4,7 +4,7 @@ import BALANCE_CONTENT from '../data/balanceContent.json';
 import MY_GAME_STATUS from '../data/myGameStatus.json';
 import ROUND_VOTE_IS_FINISHED from '../data/roundVoteIsFinished.json';
 
-import { ONE_SECOND } from '@/constants/time';
+import { POLLING_DELAY } from '@/constants/config';
 import { MOCK_API_URL } from '@/constants/url';
 import { BalanceContent } from '@/types/balanceContent';
 
@@ -15,10 +15,10 @@ const fetchBalanceContentHandler = () => {
 const fetchIsFinishedHandler = () => {
   setTimeout(() => {
     ROUND_VOTE_IS_FINISHED.isFinished = true;
-  }, 10 * ONE_SECOND);
+  }, 10 * POLLING_DELAY);
   setTimeout(() => {
     ROUND_VOTE_IS_FINISHED.isFinished = false;
-  }, 12 * ONE_SECOND);
+  }, 12 * POLLING_DELAY);
 
   return HttpResponse.json(ROUND_VOTE_IS_FINISHED);
 };
diff --git a/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts b/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts
index 87f94e01c..0c9762398 100644
--- a/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts
+++ b/frontend/src/pages/GameResultPage/hooks/useCheckRoomReset.ts
@@ -3,9 +3,9 @@ import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { isRoomInitial } from '@/apis/room';
+import { POLLING_DELAY } from '@/constants/config';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 import { ROUTES } from '@/constants/routes';
-import { ONE_SECOND } from '@/constants/time';
 
 export const useIsRoomInitial = () => {
   const { roomId } = useParams();
@@ -13,7 +13,7 @@ export const useIsRoomInitial = () => {
   const { data } = useQuery({
     queryKey: [QUERY_KEYS.isRoomInitial, Number(roomId)],
     queryFn: async () => await isRoomInitial(Number(roomId)),
-    refetchInterval: ONE_SECOND,
+    refetchInterval: POLLING_DELAY,
     gcTime: 0,
   });
 
diff --git a/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.styled.ts b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.styled.ts
new file mode 100644
index 000000000..f5055c113
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.styled.ts
@@ -0,0 +1,26 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export const nicknameInputContainer = css`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 4.8rem;
+  padding: 0 1rem;
+  border-radius: ${Theme.borderRadius.radius10};
+
+  background-color: ${Theme.color.gray200};
+`;
+
+export const nicknameInput = css`
+  width: 100%;
+  border: 0;
+
+  background-color: ${Theme.color.gray200};
+  outline: none;
+`;
+
+export const nicknameLengthText = css`
+  color: ${Theme.color.gray500};
+`;
diff --git a/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx
new file mode 100644
index 000000000..27b7693db
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx
@@ -0,0 +1,38 @@
+import { RefObject } from 'react';
+
+import useNicknameInput from './hooks/useNicknameInput';
+import { nicknameInput, nicknameInputContainer, nicknameLengthText } from './NicknameInput.styled';
+import createRandomNickname from '../createRandomNickname';
+
+import { NICKNAME_MAX_LENGTH } from '@/constants/config';
+
+interface NicknameInputProps {
+  nicknameInputRef: RefObject<HTMLInputElement>;
+  handleMakeOrEnterRoom: () => void;
+}
+
+const NicknameInput = ({ nicknameInputRef, handleMakeOrEnterRoom }: NicknameInputProps) => {
+  const { nickname, handleChangeInput, handleKeyDown } = useNicknameInput({
+    handleMakeOrEnterRoom,
+  });
+  const randomNickname = createRandomNickname();
+
+  return (
+    <div css={nicknameInputContainer}>
+      <input
+        ref={nicknameInputRef}
+        css={nicknameInput}
+        placeholder={randomNickname}
+        maxLength={NICKNAME_MAX_LENGTH}
+        value={nickname}
+        onChange={handleChangeInput}
+        onKeyDown={handleKeyDown}
+      />
+      <span css={nicknameLengthText}>
+        {nickname.length}/{NICKNAME_MAX_LENGTH}
+      </span>
+    </div>
+  );
+};
+
+export default NicknameInput;
diff --git a/frontend/src/pages/NicknamePage/NicknameInput/hooks/useNicknameInput.ts b/frontend/src/pages/NicknamePage/NicknameInput/hooks/useNicknameInput.ts
new file mode 100644
index 000000000..587a73092
--- /dev/null
+++ b/frontend/src/pages/NicknamePage/NicknameInput/hooks/useNicknameInput.ts
@@ -0,0 +1,27 @@
+import { ChangeEvent, useState } from 'react';
+
+import { NICKNAME_MAX_LENGTH } from '@/constants/config';
+
+interface UseNicknameInputProps {
+  handleMakeOrEnterRoom: () => void;
+}
+
+const useNicknameInput = ({ handleMakeOrEnterRoom }: UseNicknameInputProps) => {
+  const [nickname, setNickname] = useState('');
+
+  const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value.length <= NICKNAME_MAX_LENGTH) {
+      setNickname(e.target.value);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleMakeOrEnterRoom();
+    }
+  };
+
+  return { nickname, handleChangeInput, handleKeyDown };
+};
+
+export default useNicknameInput;
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.styled.ts b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
index ba430df72..073c91515 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
+++ b/frontend/src/pages/NicknamePage/NicknamePage.styled.ts
@@ -18,10 +18,15 @@ export const profileImg = css`
   width: 60%;
 `;
 
-export const nicknameBox = css`
+export const nicknameContainer = css`
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
   width: 26.8rem;
   margin: 2rem 0;
+`;
 
+export const nicknameTitle = css`
   font-weight: 600;
   font-size: 1.6rem;
 `;
@@ -44,6 +49,11 @@ export const nicknameInput = css`
   background-color: ${Theme.color.gray200};
   outline: none;
 `;
+
+export const nicknameLengthText = css`
+  color: ${Theme.color.gray500};
+`;
+
 export const noVoteTextContainer = css`
   display: flex;
   flex-direction: column;
@@ -61,4 +71,4 @@ export const noVoteText = css`
 export const angryImage = css`
   width: 16rem;
   height: 14rem;
-`;
\ No newline at end of file
+`;
diff --git a/frontend/src/pages/NicknamePage/NicknamePage.tsx b/frontend/src/pages/NicknamePage/NicknamePage.tsx
index 475ff1fc7..98fe45c7d 100644
--- a/frontend/src/pages/NicknamePage/NicknamePage.tsx
+++ b/frontend/src/pages/NicknamePage/NicknamePage.tsx
@@ -1,19 +1,19 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import NicknameInput from './NicknameInput/NicknameInput';
 import {
-  nicknameBox,
-  nicknameInputWrapper,
-  nicknameInput,
   profileWrapper,
   profileImg,
   noVoteTextContainer,
   noVoteText,
   angryImage,
+  nicknameTitle,
+  nicknameContainer,
 } from './NicknamePage.styled';
-import { useMakeOrEnterRoom } from './useMakeOrEnterRoom';
+import useMakeOrEnterRoom from './useMakeOrEnterRoom';
 
 import { isJoinableRoom } from '@/apis/room';
 import AngryDdangkong from '@/assets/images/angryDdangkong.png';
@@ -26,15 +26,15 @@ import { memberInfoState, roomUuidState } from '@/recoil/atom';
 
 const NicknamePage = () => {
   const { isOpen, show, close } = useModal();
-  const { randomNickname, nicknameInputRef, handleMakeOrEnterRoom, isLoading } =
-    useMakeOrEnterRoom(show);
+  const { nicknameInputRef, handleMakeOrEnterRoom, isLoading } = useMakeOrEnterRoom(show);
   const { isMaster } = useRecoilValue(memberInfoState);
   const { roomUuid } = useParams();
-  const [, setRoomUuidState] = useRecoilState(roomUuidState);
+  const setRoomUuidState = useSetRecoilState(roomUuidState);
 
-  const { data } = useQuery({
+  const { data, isLoading: isJoinableLoading } = useQuery({
     queryKey: ['isJoinable', roomUuid],
     queryFn: async () => isJoinableRoom(roomUuid || ''),
+    enabled: !!roomUuid,
   });
 
   useEffect(() => {
@@ -43,7 +43,7 @@ const NicknamePage = () => {
     }
   }, [roomUuid, setRoomUuidState]);
 
-  if (roomUuid && !data?.isJoinable)
+  if (!isJoinableLoading && roomUuid && !data?.isJoinable)
     return (
       <div css={noVoteTextContainer}>
         <img src={AngryDdangkong} alt="화난 땅콩" css={angryImage} />
@@ -56,25 +56,23 @@ const NicknamePage = () => {
       <div css={profileWrapper}>
         <img src={SillyDdangkong} alt="사용자 프로필" css={profileImg} />
       </div>
-      <div css={nicknameBox}>닉네임</div>
-      <div css={nicknameInputWrapper}>
-        <input
-          css={nicknameInput}
-          type="text"
-          placeholder={randomNickname}
-          ref={nicknameInputRef}
+      <div css={nicknameContainer}>
+        <span css={nicknameTitle}>닉네임</span>
+        <NicknameInput
+          nicknameInputRef={nicknameInputRef}
+          handleMakeOrEnterRoom={handleMakeOrEnterRoom}
         />
       </div>
       <Button
         onClick={handleMakeOrEnterRoom}
         disabled={isLoading}
-        text={isLoading ? '로딩 중.....' : '확인'}
+        text={isLoading ? '접속 중...' : '확인'}
         bottom
       />
       <AlertModal
         isOpen={isOpen}
         onClose={close}
-        message={isMaster ? '방 생성에 실패했습니다' : '방 참가에 실패했습니다'}
+        message={isMaster ? '방 생성에 실패했습니다.' : '해당 방에 참여할 수 없습니다.'}
         title={isMaster ? '방 생성 실패' : '방 참가 실패'}
       />
     </Content>
diff --git a/frontend/src/pages/NicknamePage/useMakeOrEnterRoom.ts b/frontend/src/pages/NicknamePage/useMakeOrEnterRoom.ts
index 15af3929a..a6bda8bb2 100644
--- a/frontend/src/pages/NicknamePage/useMakeOrEnterRoom.ts
+++ b/frontend/src/pages/NicknamePage/useMakeOrEnterRoom.ts
@@ -1,20 +1,17 @@
 import { useMutation } from '@tanstack/react-query';
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 
-import createRandomNickname from './createRandomNickname';
-
 import { enterRoom, createRoom } from '@/apis/room';
 import { ROUTES } from '@/constants/routes';
 import { memberInfoState, roomUuidState } from '@/recoil/atom';
 import { CreateOrEnterRoomResponse } from '@/types/room';
-export const useMakeOrEnterRoom = (showModal: () => void) => {
-  const randomNickname = createRandomNickname();
+
+const useMakeOrEnterRoom = (showModal: () => void) => {
   const nicknameInputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const [{ isMaster }, setMemberInfo] = useRecoilState(memberInfoState);
-  const [, setIsLoading] = useState(false);
 
   const [, setRoomUuidState] = useRecoilState(roomUuidState);
   const { roomUuid } = useParams();
@@ -27,8 +24,7 @@ export const useMakeOrEnterRoom = (showModal: () => void) => {
         memberId: data.member.memberId,
       }));
       setRoomUuidState(data.roomUuid || '');
-      navigate(ROUTES.ready(Number(data.roomId)));
-      setIsLoading(false);
+      navigate(ROUTES.ready(Number(data.roomId)), { replace: true });
     },
     onError: () => {
       showModal();
@@ -44,8 +40,7 @@ export const useMakeOrEnterRoom = (showModal: () => void) => {
     onSuccess: (data) => {
       setMemberInfo((prev) => ({ ...prev, memberId: data.member.memberId }));
       setRoomUuidState(data.roomUuid || '');
-      navigate(ROUTES.ready(Number(data.roomId)));
-      setIsLoading(false);
+      navigate(ROUTES.ready(Number(data.roomId)), { replace: true });
     },
     onError: () => {
       showModal();
@@ -53,7 +48,7 @@ export const useMakeOrEnterRoom = (showModal: () => void) => {
   });
 
   const handleMakeOrEnterRoom = () => {
-    const nickname = nicknameInputRef.current?.value || randomNickname;
+    const nickname = nicknameInputRef.current?.value || nicknameInputRef.current?.placeholder || '';
     if (isMaster) {
       createRoomMutation.mutate(nickname);
     } else {
@@ -62,9 +57,10 @@ export const useMakeOrEnterRoom = (showModal: () => void) => {
   };
 
   return {
-    randomNickname,
     nicknameInputRef,
     handleMakeOrEnterRoom,
     isLoading: isMaster ? createRoomMutation.isPending : enterRoomMutation.isPending,
   };
 };
+
+export default useMakeOrEnterRoom;