닉네임 변경 3자 이상으로 바꾸기 (#603)

* chore: vscode update

* feature: 닉네임 제한 변경

.vscode/settings.json

@@ -7,7 +7,7 @@
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "prettier.prettierPath": ".yarn/sdks/prettier/index.js",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": true,
   "typescript.enablePromptUseWorkspaceTsdk": true

package.json

@@ -84,4 +84,4 @@
     "typescript": "4.9.5"
   },
   "packageManager": "[email protected]"
-}
+}

src/pages/my/account/change-nickname.tsx

@@ -17,6 +17,7 @@ export default function MyAccountChangeNickame() {
   const { userInformation } = useUserInformation();
   const nickname = useInput({ useDebounce: true, initialValue: userInformation.nickName });
   const [nicknameError, setNicknameError] = useState('변경될 이름을 입력해주세요.');
+
   const { callMuation, onFormReturn, isValidateNickname } = useChangeNickname({
     nickname,
     nicknameError,
@@ -70,6 +71,9 @@ interface UseChangeNicknameProps {
   userInformation: UserInformationType;
 }
 
+const NICKNAME_MIN_LENGTH = 3;
+const NICKNAME_MAX_LENGTH = 20;
+
 function useChangeNickname({
   nickname,
   nicknameError,
@@ -86,15 +90,18 @@ function useChangeNickname({
   }, [userInformation.nickName]);
 
   const isNicknameNotValidateForLength =
-    nickname.debouncedValue.trim().length < 4 || 20 < nickname.debouncedValue.trim().length;
+    nickname.debouncedValue.trim().length < NICKNAME_MIN_LENGTH ||
+    NICKNAME_MAX_LENGTH < nickname.debouncedValue.trim().length;
 
   const isNicknameSameWithPrev = userInformation.nickName === nickname.debouncedValue.trim();
 
   const isValidateNickname = !isNicknameNotValidateForLength && !isNicknameSameWithPrev;
 
   useDidUpdate(() => {
     if (isNicknameNotValidateForLength) {
-      setNicknameError('닉네임은 4자 이상 20자 이하여야 합니다.');
+      setNicknameError(
+        `닉네임은 ${NICKNAME_MIN_LENGTH}자 이상 ${NICKNAME_MAX_LENGTH}자 이하여야 합니다.`
+      );
       return;
     }