diff --git a/src/features/auth/ui/login-modal.tsx b/src/features/auth/ui/login-modal.tsx index 260dfccd..0a53946d 100644 --- a/src/features/auth/ui/login-modal.tsx +++ b/src/features/auth/ui/login-modal.tsx @@ -112,12 +112,6 @@ export default function LoginModal({ -
- - -
diff --git a/src/features/auth/ui/sign-up-modal.tsx b/src/features/auth/ui/sign-up-modal.tsx index ebf64fae..e2b8e15b 100644 --- a/src/features/auth/ui/sign-up-modal.tsx +++ b/src/features/auth/ui/sign-up-modal.tsx @@ -1,3 +1,4 @@ +import { sendGTMEvent } from '@next/third-parties/google'; import { XIcon } from 'lucide-react'; import { useState, useRef } from 'react'; import { @@ -5,12 +6,11 @@ import { 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(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) => { @@ -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({
서비스 이용을 위해 이름을 입력해주세요.
- +
+
+ { + 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} + /> +
+ {isValidName || name.length === 0 + ? '신뢰 있는 매칭을 위해 실명을 사용해주세요. (예: 홍길동 )' + : '이름에는 숫자나 특수문자를 사용할 수 없습니다. 두 글자 이상 입력해주세요.'} +
+
+
+ setChecked(e.target.checked)} + /> + +
+
diff --git a/src/features/auth/ui/sign-up-name-input.tsx b/src/features/auth/ui/sign-up-name-input.tsx deleted file mode 100644 index 96e1ae6d..00000000 --- a/src/features/auth/ui/sign-up-name-input.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { BaseInput } from '@/shared/ui/input'; - -export default function SignupNameInput({ - name, - setName, - error, -}: { - name: string; - setName: (name: string) => void; - error: string; -}) { - return ( -
- setName(e.target.value)} - placeholder="최예림" - className={`w-full`} - color={error ? 'error' : 'default'} - /> -
- {error - ? '이름에는 숫자나 특수문자를 사용할 수 없습니다. 두 글자 이상 입력해주세요.' - : '신뢰 있는 매칭을 위해 실명을 사용해주세요. (예: 홍길동 )'} -
-
- ); -}