Qnrr 395 이름 형식에 맞지 않으면 가입 완료 버튼 비활성화

src/features/auth/ui/login-modal.tsx

@@ -112,12 +112,6 @@ export default function LoginModal({
                 </span>
               </button>
             </div>
-            <div className="font-designer-14m text-text-subtle mb-250 flex items-center gap-75">
-              <input type="checkbox" id="agree" />
-              <label htmlFor="agree">
-                ZERO-ONE의 이용 약관과 개인정보 처리방침에 동의할게요.
-              </label>
-            </div>
           </Modal.Body>
         </Modal.Content>
       </Modal.Portal>

src/features/auth/ui/sign-up-modal.tsx

@@ -1,16 +1,16 @@
+import { sendGTMEvent } from '@next/third-parties/google';
 import { XIcon } from 'lucide-react';
 import { useState, useRef } from 'react';
 import {
   useSignUpMutation,
   useUploadProfileImageMutation,
 } from '@/features/auth/model/use-auth-mutation';
 import SignupImageSelector from '@/features/auth/ui/sign-up-image-selector';
-import SignupNameInput from '@/features/auth/ui/sign-up-name-input';
+import { hashValue } from '@/shared/lib/hash';
 import { getCookie, setCookie } from '@/shared/tanstack-query/cookie';
 import Button from '@/shared/ui/button';
+import { BaseInput } from '@/shared/ui/input';
 import { Modal } from '@/shared/ui/modal';
-import { sendGTMEvent } from '@next/third-parties/google';
-import { hashValue } from '@/shared/lib/hash';
 
 export default function SignupModal({
   open,
@@ -20,7 +20,7 @@ export default function SignupModal({
   onClose: () => void;
 }) {
   const [name, setName] = useState('');
-  const [error, setError] = useState('');
+  const [checked, setChecked] = useState<boolean>(false);
   const [image, setImage] = useState(
     getCookie('socialImageURL') || 'profile-default.svg',
   );
@@ -29,15 +29,7 @@ export default function SignupModal({
   const signUp = useSignUpMutation();
   const uploadProfileImage = useUploadProfileImageMutation();
 
-  // 이름 유효성 검사
-  const validateName = (value: string) => {
-    if (!/^[가-힣a-zA-Z]{2,10}$/.test(value)) {
-      setError('이름에는 숫자나 특수문자를 사용할 수 없습니다.');
-    } else {
-      setError('');
-    }
-    setName(value);
-  };
+  const isValidName = /^[가-힣a-zA-Z]{2,10}$/.test(name);
 
   // 이미지 업로드
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -60,12 +52,11 @@ export default function SignupModal({
       {
         // 회원가입 성공 시 프로필 이미지 업로드
         onSuccess: (data) => {
-
           const memberId = data.content.generatedMemberId;
 
           if (data && memberId) {
-            setCookie('memberId', memberId)
-            
+            setCookie('memberId', memberId);
+
             // 회원가입 GA 이벤트 전송
             sendGTMEvent({
               event: 'custom_member_join',
@@ -85,7 +76,6 @@ export default function SignupModal({
                 file: formData,
               });
             }
-
 
             // 성공 후 홈페이지로 이동
             window.location.href = '/';
@@ -124,17 +114,56 @@ export default function SignupModal({
               <div className="font-designer-24b text-text-default mt-2 text-center">
                 서비스 이용을 위해 이름을 입력해주세요.
               </div>
-              <SignupNameInput
-                name={name}
-                setName={validateName}
-                error={error}
-              />
+              <div className="flex w-full flex-col items-center gap-200">
+                <div className="flex w-full flex-col gap-75">
+                  <BaseInput
+                    type="text"
+                    value={name}
+                    onChange={(e) => {
+                      const value = e.target.value;
+                      const filteredValue = value
+                        .replace(/[^a-zA-Zㄱ-힣]/g, '')
+                        .slice(0, 10)
+                        .trim();
+                      setName(filteredValue);
+                    }}
+                    placeholder="홍길동"
+                    className={`w-full`}
+                    color={
+                      isValidName || name.length === 0 ? 'default' : 'error'
+                    }
+                    maxLength={10}
+                  />
+                  <div
+                    className={`font-designer-13r ${isValidName || name.length === 0 ? 'text-text-subtlest' : 'text-text-error'}`}
+                  >
+                    {isValidName || name.length === 0
+                      ? '신뢰 있는 매칭을 위해 실명을 사용해주세요. (예: 홍길동 )'
+                      : '이름에는 숫자나 특수문자를 사용할 수 없습니다. 두 글자 이상 입력해주세요.'}
+                  </div>
+                </div>
+                <div className="flex w-full gap-75">
+                  <input
+                    type="checkbox"
+                    id="agree"
+                    checked={checked}
+                    onChange={(e) => setChecked(e.target.checked)}
+                  />
+                  <label
+                    htmlFor="agree"
+                    className="font-designer-14m text-text-subtle text-sm"
+                  >
+                    ZERO-ONE의 이용 약관과 개인정보 처리방침에 동의할게요.
+                  </label>
+                </div>
+              </div>
               <Button
                 color="primary"
                 size="large"
                 className="w-full"
                 type="submit"
                 onClick={handleSubmit}
+                disabled={!isValidName || !checked || signUp.isPending}
               >
                 가입 완료
               </Button>