🐛 : 사용자 닉네임 규칙에 대한 클라이언트 검증

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|]+$/;

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);

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<HTMLInputElement>(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 = () => {