- 
- {nickname}
+
+
+ {nickname}
+
diff --git a/frontend/src/components/RoomSetting/RoomSetting.styled.ts b/frontend/src/components/RoomSetting/RoomSetting.styled.ts
index fc6e4744c..452419e76 100644
--- a/frontend/src/components/RoomSetting/RoomSetting.styled.ts
+++ b/frontend/src/components/RoomSetting/RoomSetting.styled.ts
@@ -6,7 +6,7 @@ import getBorderRadius from '@/styles/utils/getBorderRadius';
export const roomSettingLayout = css`
display: flex;
flex-direction: column;
- justify-content: space-evenly;
+ justify-content: space-between;
align-items: center;
width: 100%;
height: 10rem;
@@ -38,7 +38,7 @@ export const roomSettingKey = css`
export const roomSettingKeyBox = css`
display: flex;
justify-content: space-between;
- width: 50rem;
+ width: 80%;
font-weight: 600;
`;
@@ -47,5 +47,5 @@ export const roomSettingValueBox = css`
display: flex;
justify-content: space-between;
align-items: center;
- width: 50rem;
+ width: 80%;
`;
diff --git a/frontend/src/components/layout/Header/hooks/useExit.ts b/frontend/src/components/layout/Header/hooks/useExit.ts
index 36d7fe1f2..c617c6198 100644
--- a/frontend/src/components/layout/Header/hooks/useExit.ts
+++ b/frontend/src/components/layout/Header/hooks/useExit.ts
@@ -6,7 +6,9 @@ import useGetUserInfo from '@/hooks/useGetUserInfo';
import { deleteAllCookies } from '@/utils/cookie';
export const useExit = () => {
- const { member: memberId } = useGetUserInfo();
+ const {
+ member: { memberId },
+ } = useGetUserInfo();
const navigate = useNavigate();
const { roomId } = useParams();
diff --git a/frontend/src/constants/config.ts b/frontend/src/constants/config.ts
index 8d892d496..fdc0e58c1 100644
--- a/frontend/src/constants/config.ts
+++ b/frontend/src/constants/config.ts
@@ -1,3 +1,4 @@
+export const NICKNAME_MIN_LENGTH = 1;
export const NICKNAME_MAX_LENGTH = 12;
export const POLLING_DELAY = 1000;
export const POLLING_ERROR_FAILURE_COUNT = 3;
diff --git a/frontend/src/constants/message.ts b/frontend/src/constants/message.ts
index 8adc8bdc9..74f8d592f 100644
--- a/frontend/src/constants/message.ts
+++ b/frontend/src/constants/message.ts
@@ -8,6 +8,7 @@ export const ERROR_MESSAGE: Record = {
NOT_FOUND_ROOM: '해당 방을 찾을 수 없어요. 방을 새로 만들어주세요!', // 없는 방 또는 모두 나간 방에 참여를 요청할 때
// 유저 관련 에러 (master)
+ INVALID_NICKNAME: '닉네임은 최소 1글자 이상 최대 12글자 이하여야 합니다.',
NOT_ROOM_MEMBER: '사용자가 해당 방에 존재하지 않아요. 다시 접속해볼까요?', // 잘못된 memberId를 보낼 때 (투표, 최종 결과)
EXCEED_MAX_MEMBER_COUNT: '방의 최대 인원을 초과했습니다.', // 인원이 꽉 찬 방에 들어가려고 할 때
ALREADY_EXIST_MASTER: '이미 방장이 존재합니다.',
diff --git a/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx
index 0a143ee4b..7732c91f8 100644
--- a/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx
+++ b/frontend/src/pages/NicknamePage/NicknameInput/NicknameInput.tsx
@@ -5,7 +5,7 @@ import { nicknameInput, nicknameInputContainer, nicknameLengthText } from './Nic
import createRandomNickname from '../createRandomNickname';
import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
-import { NICKNAME_MAX_LENGTH } from '@/constants/config';
+import { NICKNAME_MIN_LENGTH, NICKNAME_MAX_LENGTH } from '@/constants/config';
interface NicknameInputProps {
nicknameInputRef: RefObject;
@@ -32,6 +32,7 @@ const NicknameInput = ({ nicknameInputRef, handleMakeOrEnterRoom }: NicknameInpu
ref={nicknameInputRef}
css={nicknameInput}
placeholder={randomNickname}
+ minLength={NICKNAME_MIN_LENGTH}
maxLength={NICKNAME_MAX_LENGTH}
value={nickname}
onChange={handleChangeInput}
diff --git a/frontend/src/types/error.ts b/frontend/src/types/error.ts
index eae747010..18997ab68 100644
--- a/frontend/src/types/error.ts
+++ b/frontend/src/types/error.ts
@@ -31,7 +31,8 @@ export type ErrorCode =
| 'METHOD_NOT_SUPPORTED'
| 'INTERNAL_SERVER_ERROR'
| 'NOT_FOUND_COOKIE'
- | 'INVALID_COOKIE';
+ | 'INVALID_COOKIE'
+ | 'INVALID_NICKNAME';
export interface UrlParameterError extends ResponseError {
errorCode: 'URL_PARAMETER_ERROR';
diff --git a/frontend/webpack.config.common.js b/frontend/webpack.config.common.js
index 80abf32ad..a1318fef5 100644
--- a/frontend/webpack.config.common.js
+++ b/frontend/webpack.config.common.js
@@ -2,6 +2,7 @@ const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const dotenv = require('dotenv');
+const CopyPlugin = require('copy-webpack-plugin');
dotenv.config();
@@ -56,5 +57,13 @@ module.exports = {
new webpack.DefinePlugin({
'process.env': JSON.stringify(process.env),
}),
+ new CopyPlugin({
+ patterns: [
+ {
+ from: path.resolve(__dirname, 'public', 'assets'),
+ to: path.resolve(__dirname, 'dist', 'assets'),
+ },
+ ],
+ }),
],
};