diff --git a/front-end/src/constants/index.ts b/front-end/src/constants/index.ts index dc28061..9e14268 100644 --- a/front-end/src/constants/index.ts +++ b/front-end/src/constants/index.ts @@ -9,3 +9,5 @@ export const OAUTH_LIST: { type: string }[] = [ type: 'github', }, ]; + +export const NICKNAME_REGEX = /^[ㄱ-ㅎ|가-힣|a-z|A-Z|0-9|]+$/; diff --git a/front-end/src/pages/ProfilePage/index.tsx b/front-end/src/pages/ProfilePage/index.tsx index 26c63cb..5fc2d16 100644 --- a/front-end/src/pages/ProfilePage/index.tsx +++ b/front-end/src/pages/ProfilePage/index.tsx @@ -9,6 +9,7 @@ import { updateNickname } from '../../features/user/userSlice'; import { useSocket, useSocketReady } from '../../context/SocketContext'; import InfiniteScroll from '../../components/InfiniteScroll'; import { fetchGetStateMessage, fetchGetTotal, fetchUpdateUserState } from './profileFetch'; +import { NICKNAME_REGEX } from '../../constants'; const recentHeader = ['날짜', '모드', '등수', '플레이 타임', '공격 횟수', '받은 횟수']; const translations = [ @@ -82,17 +83,21 @@ export default function Profile() { const newNickname = nicknameRef.current.value; const newStateMessage = stateMessageRef.current.value; - const res = await fetchUpdateUserState({ - ...userState, - nickname: newNickname, - stateMessage: newStateMessage, - }); - - if (res.message === 'done') { - setEditMode(!editMode); - await dispatch(updateNickname()); - socketClient.current.emit('set userName', newNickname, userState.id); - navigate(`/profile/${newNickname}`, { replace: true }); + if (!NICKNAME_REGEX.test(newNickname)) { + alert('닉네임은 반드시 한글/영문(대소문자)/숫자로만 이루어져야합니다.'); + } else { + const res = await fetchUpdateUserState({ + ...userState, + nickname: newNickname, + stateMessage: newStateMessage, + }); + + if (res.message === 'done') { + setEditMode(!editMode); + await dispatch(updateNickname()); + socketClient.current.emit('set userName', newNickname, userState.id); + navigate(`/profile/${newNickname}`, { replace: true }); + } } } catch (error) { console.log('error:', error); diff --git a/front-end/src/pages/RegisterPage/index.tsx b/front-end/src/pages/RegisterPage/index.tsx index 04885b4..26a7be3 100644 --- a/front-end/src/pages/RegisterPage/index.tsx +++ b/front-end/src/pages/RegisterPage/index.tsx @@ -10,6 +10,7 @@ import { useAppDispatch, useAppSelector } from '../../app/hooks'; import BasicButton from '../../components/BasicButton'; import BasicInput from '../../components/BasicInput'; import './style.scss'; +import { NICKNAME_REGEX } from '../../constants'; function RegisterPage() { const nickNameRef = useRef(null); @@ -41,13 +42,17 @@ function RegisterPage() { return; } - dispatch( - registerNewUser({ - nickname: nickNameRef.current.value, - message: messageRef.current?.value || '', - oauthInfo: user.profile.id, - }) - ); + if (!NICKNAME_REGEX.test(nickNameRef?.current?.value)) { + alert('닉네임은 반드시 한글/영문(대소문자)/숫자로만 이루어져야합니다.'); + } else { + dispatch( + registerNewUser({ + nickname: nickNameRef.current.value, + message: messageRef.current?.value || '', + oauthInfo: user.profile.id, + }) + ); + } }; const onCancelClick = () => {