feat: react-hook-form 사용을 위한 NicknameInput 컴포넌트 개선

src/components/Input/NicknameInput.tsx

@@ -1,15 +1,20 @@
 'use client';
 
 import { Input } from '@nextui-org/react';
-
 import { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 
+import useGetValidateNickName from '@/apis/user/validateNickname';
 import Icon from '../Icon/Icon';
 
 const NicknameInput = () => {
-  const [nickname, setNickname] = useState('');
   const [validationMessage, setValidationMessage] = useState('');
   const [validationMessageColor, setValidationMessageColor] = useState('');
+  const { register, watch } = useFormContext();
+
+  const nickname = watch('nickname');
+
+  const { isValid, message, isLoading } = useGetValidateNickName(nickname);
 
   const MAX_NICKNAME_LENGTH = 10;
 
@@ -18,20 +23,23 @@ const NicknameInput = () => {
     nickname.length > MAX_NICKNAME_LENGTH;
 
   useEffect(() => {
-    if (nickname === '모멘티아') {
-      // TODO: 닉네임 상태 확인 (API 호출 로직 추가)
-      setValidationMessage('중복된 닉네임이 존재합니다.');
-      setValidationMessageColor('text-system-error');
+    if (nickname === '') {
+      setValidationMessage('');
+      setValidationMessageColor('');
     } else if (isNicknameInvalid(nickname)) {
       setValidationMessage('사용할 수 없는 문자 또는 길이를 초과했습니다.');
       setValidationMessageColor('text-system-error');
-    } else if (nickname) {
+    } else if (isLoading) {
+      setValidationMessage('닉네임 검증 중...');
+      setValidationMessageColor('text-gray-400');
+    } else if (!isValid) {
+      setValidationMessage(message || '중복된 닉네임이 존재합니다.');
+      setValidationMessageColor('text-system-error');
+    } else {
       setValidationMessage('사용 가능한 닉네임입니다.');
       setValidationMessageColor('text-system-success');
-    } else {
-      setValidationMessage('');
     }
-  }, [nickname]);
+  }, [nickname, isLoading, isValid, message]);
 
   const currentNicknameLength = nickname.length;
   const nicknameLengthColor =
@@ -42,18 +50,16 @@ const NicknameInput = () => {
         : 'text-white';
 
   return (
-    <>
+    <div>
       <Input
+        {...register('nickname', { required: true })}
         type='text'
         label='닉네임'
         labelPlacement='outside'
         placeholder='닉네임을 입력해주세요.'
         maxLength={MAX_NICKNAME_LENGTH}
-        value={nickname}
-        onValueChange={(newNickname) => setNickname(newNickname)}
-        className='w-78.25'
         classNames={{
-          label: 'custom-label',
+          label: 'custom-label text-gray-400',
           input: 'placeholder:text-gray-700',
           inputWrapper: ['bg-gray-900', 'rounded-md'],
         }}
@@ -89,7 +95,7 @@ const NicknameInput = () => {
           </p>
         </div>
       )}
-    </>
+    </div>
   );
 };