From 6dcce3a01363ef085a2d0e480024fc8e5acd7dfb Mon Sep 17 00:00:00 2001 From: aken-you Date: Sat, 26 Jul 2025 01:12:37 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=EC=95=BD=EA=B4=80=EB=8F=99?= =?UTF-8?q?=EC=9D=98=20checkbox=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/auth/ui/login-modal.tsx | 6 --- src/features/auth/ui/sign-up-modal.tsx | 57 +++++++++++++-------- src/features/auth/ui/sign-up-name-input.tsx | 31 ----------- 3 files changed, 35 insertions(+), 59 deletions(-) delete mode 100644 src/features/auth/ui/sign-up-name-input.tsx 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..0a43171e 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,6 @@ export default function SignupModal({ onClose: () => void; }) { const [name, setName] = useState(''); - const [error, setError] = useState(''); const [image, setImage] = useState( getCookie('socialImageURL') || 'profile-default.svg', ); @@ -29,15 +28,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 +51,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 +75,6 @@ export default function SignupModal({ file: formData, }); } - // 성공 후 홈페이지로 이동 window.location.href = '/'; @@ -124,17 +113,41 @@ export default function SignupModal({
서비스 이용을 위해 이름을 입력해주세요.
- +
+
+ setName(e.target.value)} + placeholder="홍길동" + className={`w-full`} + color={isValidName ? 'default' : 'error'} + /> +
+ {isValidName + ? '신뢰 있는 매칭을 위해 실명을 사용해주세요. (예: 홍길동 )' + : '이름에는 숫자나 특수문자를 사용할 수 없습니다. 두 글자 이상 입력해주세요.'} +
+
+
+ + +
+
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 - ? '이름에는 숫자나 특수문자를 사용할 수 없습니다. 두 글자 이상 입력해주세요.' - : '신뢰 있는 매칭을 위해 실명을 사용해주세요. (예: 홍길동 )'} -
-
- ); -} From e4d6e3840bee3fb4cfe37617ef0d37125755b1ae Mon Sep 17 00:00:00 2001 From: aken-you Date: Sat, 26 Jul 2025 10:30:03 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=EC=9D=B4=EB=A6=84=20=EC=9C=A0?= =?UTF-8?q?=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 아무것도 입력하지 않았을 경우, 기본 input 스타일 적용 --- src/features/auth/ui/sign-up-modal.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/features/auth/ui/sign-up-modal.tsx b/src/features/auth/ui/sign-up-modal.tsx index 0a43171e..aa12b59a 100644 --- a/src/features/auth/ui/sign-up-modal.tsx +++ b/src/features/auth/ui/sign-up-modal.tsx @@ -121,10 +121,12 @@ export default function SignupModal({ onChange={(e) => setName(e.target.value)} placeholder="홍길동" className={`w-full`} - color={isValidName ? 'default' : 'error'} + color={ + isValidName || name.length === 0 ? 'default' : 'error' + } />
{isValidName ? '신뢰 있는 매칭을 위해 실명을 사용해주세요. (예: 홍길동 )' From 70df1e3142bc00eea4bc07aec5b9aad7e1c4d43a Mon Sep 17 00:00:00 2001 From: aken-you Date: Sat, 26 Jul 2025 10:42:05 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=A6=84=20Input?= =?UTF-8?q?=EC=9D=98=20=EC=9E=85=EB=A0=A5=EA=B0=92=20=EC=A0=9C=ED=95=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/auth/ui/sign-up-modal.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/features/auth/ui/sign-up-modal.tsx b/src/features/auth/ui/sign-up-modal.tsx index aa12b59a..cd7a358f 100644 --- a/src/features/auth/ui/sign-up-modal.tsx +++ b/src/features/auth/ui/sign-up-modal.tsx @@ -118,17 +118,25 @@ export default function SignupModal({ setName(e.target.value)} + 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} />
- {isValidName + {isValidName || name.length === 0 ? '신뢰 있는 매칭을 위해 실명을 사용해주세요. (예: 홍길동 )' : '이름에는 숫자나 특수문자를 사용할 수 없습니다. 두 글자 이상 입력해주세요.'}
From b44c6c38ca8974070edf749155c64492ddc9fc23 Mon Sep 17 00:00:00 2001 From: aken-you Date: Sat, 26 Jul 2025 10:48:05 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=EA=B0=9C=EC=9D=B8=20=EC=95=BD?= =?UTF-8?q?=EA=B4=80=20=EB=8F=99=EC=9D=98=ED=95=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EC=9C=BC=EB=A9=B4=20=EA=B0=80=EC=9E=85=20=EC=99=84=EB=A3=8C=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/auth/ui/sign-up-modal.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/features/auth/ui/sign-up-modal.tsx b/src/features/auth/ui/sign-up-modal.tsx index cd7a358f..e2b8e15b 100644 --- a/src/features/auth/ui/sign-up-modal.tsx +++ b/src/features/auth/ui/sign-up-modal.tsx @@ -20,6 +20,7 @@ export default function SignupModal({ onClose: () => void; }) { const [name, setName] = useState(''); + const [checked, setChecked] = useState(false); const [image, setImage] = useState( getCookie('socialImageURL') || 'profile-default.svg', ); @@ -142,7 +143,12 @@ export default function SignupModal({
- + setChecked(e.target.checked)} + />