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
- ? '이름에는 숫자나 특수문자를 사용할 수 없습니다. 두 글자 이상 입력해주세요.'
- : '신뢰 있는 매칭을 위해 실명을 사용해주세요. (예: 홍길동 )'}
-
-
- );
-}