Refactoring: 닉네임 중복체크 코드 분리

src/features/profile/hooks/useProfileNicknameValidate.ts

@@ -0,0 +1,66 @@
+import { useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+import { 
+  setNicknameError, 
+  setIsNicknameChecked, 
+  setIsSubmitEnabled, 
+  setIsNicknameCheckDisabled 
+} from '@/entities/user/model/profileEditSlice';
+import { useCheckNickname } from '@/features/profile/model';
+
+interface UseNicknameProps {
+  nickname: string;
+  originalNickname: string;
+}
+
+export const useProfileNicknameValidate = ({ nickname, originalNickname }: UseNicknameProps) => {
+  const dispatch = useDispatch();
+  const { checkNickname } = useCheckNickname({ nickname });
+
+  const handleNicknameValidation = (isAvailable: boolean) => {
+    if (!nickname || nickname === '') {
+      dispatch(setNicknameError('닉네임을 입력해주세요.'));
+      dispatch(setIsNicknameChecked(false));
+      dispatch(setIsSubmitEnabled(false));
+    } else if (isAvailable) {
+      dispatch(setNicknameError('사용 가능한 닉네임입니다.'));
+      dispatch(setIsNicknameChecked(true));
+      dispatch(setIsSubmitEnabled(true));
+    } else {
+      dispatch(setNicknameError('이미 사용중인 닉네임입니다. 다른 닉네임을 입력해주세요.'));
+      dispatch(setIsNicknameChecked(false));
+      dispatch(setIsSubmitEnabled(false));
+    }
+  };
+
+  const checkNicknameAvailability = async () => {
+    if (nickname === originalNickname) {
+      dispatch(setNicknameError('기존 닉네임입니다. 사용가능합니다.'));
+      dispatch(setIsNicknameChecked(true));
+      dispatch(setIsSubmitEnabled(true));
+      return;
+    }
+
+    const { data } = await checkNickname();
+    handleNicknameValidation(data.isAvailable);
+  };
+
+  useEffect(() => {
+    if (nickname.length > 15) {
+      dispatch(setNicknameError('닉네임은 15자 미만으로 입력해주세요.'));
+      dispatch(setIsSubmitEnabled(false));
+      dispatch(setIsNicknameChecked(false));
+      dispatch(setIsNicknameCheckDisabled(true));
+    } else {
+      dispatch(setNicknameError(''));
+      dispatch(setIsNicknameCheckDisabled(false));
+      if (nickname === originalNickname) {
+        dispatch(setIsSubmitEnabled(true));
+      } else {
+        dispatch(setIsSubmitEnabled(false));
+      }
+    }
+  }, [nickname, originalNickname, dispatch]);
+
+  return { checkNicknameAvailability };
+};

src/features/sign-up/hooks/useSignupNicknameValidate.ts

@@ -0,0 +1,54 @@
+import { useDispatch } from 'react-redux';
+import { useEffect } from 'react';
+import { setIsNameValid, setIsNicknameCheckDisabled, setIsNicknameChecked, setIsSubmitEnabled, setNicknameError } from '../model/signupSlice';
+import { useCheckNickname } from '@/features/profile/model';
+
+interface UseNicknameProps {
+  nickname: string;
+}
+
+export const useSignupNicknameValidate = ({ nickname }: UseNicknameProps) => {
+  const dispatch = useDispatch();
+  const { checkNickname } = useCheckNickname({ nickname });
+
+  const handleNicknameValidation = (isAvailable: boolean) => {
+    if (!nickname || nickname === '') {
+      dispatch(setNicknameError('닉네임을 입력해주세요.'));
+      dispatch(setIsNicknameChecked(false));
+      dispatch(setIsSubmitEnabled(false));
+      dispatch(setIsNameValid(false));
+    } else if (isAvailable) {
+      dispatch(setNicknameError('사용 가능한 닉네임입니다.'));
+      dispatch(setIsNicknameChecked(true));
+      dispatch(setIsSubmitEnabled(true));
+      dispatch(setIsNameValid(true));
+    } else {
+      dispatch(setNicknameError('이미 사용중인 닉네임입니다. 다른 닉네임을 입력해주세요.'));
+      dispatch(setIsNicknameChecked(false));
+      dispatch(setIsSubmitEnabled(false));
+      dispatch(setIsNameValid(false));
+    }
+  };
+
+  const checkNicknameAvailability = async () => {
+    const { data } = await checkNickname();
+    handleNicknameValidation(data.isAvailable);
+  };
+
+  useEffect(() => {
+    if (nickname.length > 15) {
+      dispatch(setNicknameError('닉네임은 15자 미만으로 입력해주세요.'));
+      dispatch(setIsSubmitEnabled(false));
+      dispatch(setIsNicknameChecked(false));
+      dispatch(setIsNicknameCheckDisabled(true));
+      dispatch(setIsNameValid(false));
+    } else {
+      dispatch(setNicknameError(''));
+      dispatch(setIsNicknameCheckDisabled(false));
+      dispatch(setIsSubmitEnabled(false));
+      dispatch(setIsNameValid(false));
+    }
+  }, [nickname, dispatch]);
+
+  return { checkNicknameAvailability };
+};

src/features/sign-up/model/signupSlice.ts

@@ -5,13 +5,15 @@ export interface SignupState {
   isNameValid: boolean;
   isNicknameChecked: boolean;
   isSubmitEnabled: boolean;
+  isNicknameCheckDisabled: boolean;
 }
 
 const initialState: SignupState = {
   nicknameError: null,
   isNameValid: false,
   isNicknameChecked: false,
   isSubmitEnabled: false,
+  isNicknameCheckDisabled: false,
 };
 
 export const signupSlice = createSlice({
@@ -30,8 +32,11 @@ export const signupSlice = createSlice({
     setIsSubmitEnabled: (state, action: PayloadAction<boolean>) => {
       state.isSubmitEnabled = action.payload;
     },
+    setIsNicknameCheckDisabled: (state, action: PayloadAction<boolean>) => {
+      state.isNicknameCheckDisabled = action.payload;
+    }
   },
 });
 
-export const { setNicknameError, setIsNameValid, setIsNicknameChecked, setIsSubmitEnabled } = signupSlice.actions;
+export const { setNicknameError, setIsNameValid, setIsNicknameChecked, setIsSubmitEnabled, setIsNicknameCheckDisabled } = signupSlice.actions;
 export default signupSlice.reducer;

src/pages/sign-up/ui/Signup.tsx

@@ -1,6 +1,6 @@
-import { setIsNameValid, setIsNicknameChecked, setIsSubmitEnabled, setNicknameError } from '@/features/sign-up/model/signupSlice';
+import { setNicknameError } from '@/features/sign-up/model/signupSlice';
 import { Button, FormField } from '@/shared';
-import { KeyboardEvent, useEffect, useRef } from 'react';
+import { KeyboardEvent, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { Layout } from '@/app/layout/index';
@@ -12,17 +12,14 @@ import NoticeRed from '@/shared/assets/icons/notice_red.svg';
 import { Input } from '@/shared/ui/input';
 import { Textarea } from '@/shared/ui/textarea';
 import { useNavigate } from 'react-router-dom';
-import { useCheckNickname } from '@/features/profile/model';
+import { useSignupNicknameValidate } from '@/features/sign-up/hooks/useSignupNicknameValidate';
 
 export const Signup = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const formRef = useRef<HTMLFormElement>(null);
 
-  const nicknameError = useSelector((state: RootState) => state.signup.nicknameError);
-  const isNameValid = useSelector((state: RootState) => state.signup.isNameValid);
-  const isNicknameChecked = useSelector((state: RootState) => state.signup.isNicknameChecked);
-  const isSubmitEnabled = useSelector((state: RootState) => state.signup.isSubmitEnabled);
+  const { nicknameError, isNameValid, isNicknameChecked, isSubmitEnabled, isNicknameCheckDisabled } = useSelector((state: RootState) => state.signup);
 
   const {
     control,
@@ -33,41 +30,9 @@ export const Signup = () => {
   } = useSignup();
   const formValues = watch();
   const nickname = formValues.nickname?.trim() || '';
-  const { checkNickname } = useCheckNickname({ nickname });
-
-  const validateNickname = () => {
-    if (nickname.length > 15) {
-      dispatch(setNicknameError('닉네임 15자 미만으로 입력해주세요.'));
-      dispatch(setIsNameValid(false));
-      dispatch(setIsSubmitEnabled(false));
-      return false;
-    }
-    dispatch(setNicknameError(null));
-    dispatch(setIsNameValid(false));
-    dispatch(setIsSubmitEnabled(false));
-    return true;
-  };
-
-  useEffect(() => {
-    validateNickname();
-  }, [nickname]);
-
-  const onNicknameCheck = async () => {
-    if (!validateNickname()) return;
-
-    if (!nickname) {
-      dispatch(setNicknameError('닉네임을 입력해주세요.'));
-      return;
-    }
-
-    const { data } = await checkNickname();
-    const { isAvailable } = data;
-
-    dispatch(setNicknameError(isAvailable ? '사용 가능한 닉네임입니다.' : '이미 사용중인 닉네임입니다. 다른 닉네임을 입력해주세요.'));
-    dispatch(setIsNameValid(isAvailable));
-    dispatch(setIsSubmitEnabled(isAvailable));
-    dispatch(setIsNicknameChecked(isAvailable));
-  };
+  const { checkNicknameAvailability } = useSignupNicknameValidate({
+    nickname,
+  });
 
   const onSubmit = (data: IUser) => {
     if (!isNicknameChecked) {
@@ -84,7 +49,6 @@ export const Signup = () => {
     }
   };
 
-
   return (
     <Layout>
       <Layout.Header title="회원가입" handleBack={() => navigate('/')} />
@@ -115,7 +79,7 @@ export const Signup = () => {
               />
             </div>
             <div>
-              <Button type='button' className='w-[5rem] web:w-[6.5rem] h-[3.13rem] border-gray2' onClick={onNicknameCheck}>중복확인</Button>
+              <Button type='button' className='w-[5rem] web:w-[6.5rem] h-[3.13rem] border-gray2' onClick={checkNicknameAvailability} disabled={isNicknameCheckDisabled}>중복확인</Button>
             </div>
           </div>
           {nicknameError && (

src/pages/user/ui/UserProfileEdit.tsx

@@ -1,4 +1,4 @@
-import { setIsNicknameCheckDisabled, setIsNicknameChecked, setIsSubmitEnabled, setNicknameError } from '@/entities/user/model/profileEditSlice';
+import { setNicknameError } from '@/entities/user/model/profileEditSlice';
 import { Button, FormField } from '@/shared';
 import { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -12,8 +12,9 @@ import NoticeBlue from '@/shared/assets/icons/blue_notice.svg';
 import NoticeRed from '@/shared/assets/icons/notice_red.svg';
 import { Input } from '@/shared/ui/input';
 import { Textarea } from '@/shared/ui/textarea';
-import { uploadProfileImageToS3, useCheckNickname } from '@/features/profile/model';
+import { uploadProfileImageToS3 } from '@/features/profile/model';
 import { getProfileImageURL } from '@/features/profile/api';
+import { useProfileNicknameValidate } from '@/features/profile/hooks/useProfileNicknameValidate';
 
 export const UserProfileEdit = () => {
   const formRef = useRef<HTMLFormElement>(null);
@@ -26,35 +27,7 @@ export const UserProfileEdit = () => {
   const { nicknameError, isNicknameChecked, isSubmitEnabled, isNicknameCheckDisabled } = useSelector((state: RootState) => state.profileEdit);
 
   const nickname = watch('nickname')?.trim();
-  const { checkNickname } = useCheckNickname({ nickname });
-
-  const handleNicknameValidation = (nickname: string, isAvailable: boolean) => {
-    if (!nickname || nickname === '') {
-      dispatch(setNicknameError('닉네임을 입력해주세요.'));
-      dispatch(setIsNicknameChecked(false));
-      dispatch(setIsSubmitEnabled(false));
-    } else if (isAvailable) {
-      dispatch(setNicknameError('사용 가능한 닉네임입니다.'));
-      dispatch(setIsNicknameChecked(true));
-      dispatch(setIsSubmitEnabled(true));
-    } else {
-      dispatch(setNicknameError('이미 사용중인 닉네임입니다. 다른 닉네임을 입력해주세요.'));
-      dispatch(setIsNicknameChecked(false));
-      dispatch(setIsSubmitEnabled(false));
-    }
-  };
-
-  const onNicknameCheck = async () => {
-    if (nickname === originalNickname) {
-      dispatch(setNicknameError('기존 닉네임입니다. 사용가능합니다.'));
-      dispatch(setIsNicknameChecked(true));
-      dispatch(setIsSubmitEnabled(true));
-      return;
-    }
-
-    const { data } = await checkNickname();
-    handleNicknameValidation(nickname, data.isAvailable);
-  };
+  const { checkNicknameAvailability } = useProfileNicknameValidate({ nickname, originalNickname });
 
   const onSubmit = async (data: IUserProfile) => {
     const { nickname, bio } = data;
@@ -86,8 +59,6 @@ export const UserProfileEdit = () => {
       handleEditProfile(formData);
     } else {
       dispatch(setNicknameError('닉네임 중복 확인을 해주세요.'));
-      dispatch(setIsNicknameChecked(false));
-      dispatch(setIsSubmitEnabled(false));
     }
   };
 
@@ -97,23 +68,6 @@ export const UserProfileEdit = () => {
     }
   }, [userProfileImageUrl]);
 
-  useEffect(() => {
-    if (nickname.length > 15) {
-      dispatch(setNicknameError('닉네임 15자 미만으로 입력해주세요.'));
-      dispatch(setIsSubmitEnabled(false));
-      dispatch(setIsNicknameChecked(false));
-      dispatch(setIsNicknameCheckDisabled(true));
-    } else {
-      dispatch(setNicknameError(''));
-      dispatch(setIsNicknameCheckDisabled(false));
-      if (nickname === originalNickname) {
-        dispatch(setIsSubmitEnabled(true));
-      } else {
-        dispatch(setIsSubmitEnabled(false));
-      }
-    }
-  }, [nickname]);
-
   return (
     <Layout>
       <Layout.Header title="프로필 수정" />
@@ -148,7 +102,7 @@ export const UserProfileEdit = () => {
               />
             </div>
             <div>
-              <Button type='button' className='w-[5rem] web:w-[6.5rem] h-[3.13rem] border-gray2' onClick={onNicknameCheck} disabled={isNicknameCheckDisabled}>중복확인</Button>
+              <Button type='button' className='w-[5rem] web:w-[6.5rem] h-[3.13rem] border-gray2' onClick={checkNicknameAvailability} disabled={isNicknameCheckDisabled}>중복확인</Button>
             </div>
           </div>
           {nicknameError && (

src/shared/utils/updateProfileEditState.ts

@@ -0,0 +1,22 @@
+import { AppDispatch } from '@/app/store';
+import {
+  setNicknameError,
+  setIsNicknameChecked,
+  setIsSubmitEnabled,
+  setIsNicknameCheckDisabled,
+} from '@/entities/user/model/profileEditSlice';
+
+export const updateProfileEditState = (
+  dispatch: AppDispatch,
+  updates: Partial<{
+    nicknameError: string;
+    isNicknameChecked: boolean;
+    isSubmitEnabled: boolean;
+    isNicknameCheckDisabled: boolean;
+  }>
+) => {
+  if ('nicknameError' in updates) dispatch(setNicknameError(updates.nicknameError || ''));
+  if ('isNicknameChecked' in updates) dispatch(setIsNicknameChecked(updates.isNicknameChecked || false));
+  if ('isSubmitEnabled' in updates) dispatch(setIsSubmitEnabled(updates.isSubmitEnabled || false));
+  if ('isNicknameCheckDisabled' in updates) dispatch(setIsNicknameCheckDisabled(updates.isNicknameCheckDisabled || false));
+};