From 2c9b2086dad8c366a271adc81ddec3aa4cf240d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=89=E1=85=B5=E1=86=AB=E1=84=89=E1=85=AE=E1=84=8C?= =?UTF-8?q?=E1=85=B5=E1=86=AB?= Date: Wed, 19 Nov 2025 15:52:55 +0900 Subject: [PATCH 1/9] =?UTF-8?q?design=20:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/axiosInstance.ts | 1 + src/app/signup/page.tsx | 86 +++++++++++++++++++++++++++++++--------- 2 files changed, 69 insertions(+), 18 deletions(-) diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts index 6e13350..3400f44 100644 --- a/src/api/axiosInstance.ts +++ b/src/api/axiosInstance.ts @@ -33,3 +33,4 @@ export default axiosInstance; + diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx index f424a01..4110e21 100644 --- a/src/app/signup/page.tsx +++ b/src/app/signup/page.tsx @@ -13,6 +13,7 @@ export default function SignupPage() { passwordConfirm: "", nickname: "", phone: "", + name: "", }); const [errors, setErrors] = useState({ email: "", @@ -20,6 +21,7 @@ export default function SignupPage() { passwordConfirm: "", nickname: "", phone: "", + name: "", }); const [agreements, setAgreements] = useState({ termsOfService: false, @@ -38,8 +40,8 @@ export default function SignupPage() { }; const handleChange = (field: string, value: string) => { - setFormData((prev) => ({ ...prev, [field]: value })); - setErrors((prev) => ({ ...prev, [field]: "" })); + setFormData(prev => ({ ...prev, [field]: value })); + setErrors(prev => ({ ...prev, [field]: "" })); }; const handleSubmit = (e: React.FormEvent) => { @@ -51,6 +53,7 @@ export default function SignupPage() { passwordConfirm: "", nickname: "", phone: "", + name: "", }; if (!formData.email) { @@ -70,7 +73,11 @@ export default function SignupPage() { } else if (formData.password !== formData.passwordConfirm) { newErrors.passwordConfirm = "비밀번호가 일치하지 않습니다."; } - + if (!formData.name) { + newErrors.name = "이름을 입력해주세요."; + } else if (formData.name.length < 2) { + newErrors.name = "이름은 2자 이상이어야 합니다."; + } if (!formData.nickname) { newErrors.nickname = "닉네임을 입력해주세요."; } else if (formData.nickname.length < 2) { @@ -90,7 +97,7 @@ export default function SignupPage() { return; } - if (Object.values(newErrors).every((error) => !error)) { + if (Object.values(newErrors).every(error => !error)) { console.log("회원가입 시도:", { ...formData, agreements }); message.success("회원가입이 완료되었습니다!"); // TODO: 실제 회원가입 API 호출 @@ -141,7 +148,7 @@ export default function SignupPage() { type="email" id="email" value={formData.email} - onChange={(e) => handleChange("email", e.target.value)} + onChange={e => handleChange("email", e.target.value)} placeholder="example@email.com" className={`w-full h-14 px-4 bg-gray-800/50 border ${ errors.email ? "border-red-500" : "border-gray-700" @@ -164,7 +171,7 @@ export default function SignupPage() { type="password" id="password" value={formData.password} - onChange={(e) => handleChange("password", e.target.value)} + onChange={e => handleChange("password", e.target.value)} placeholder="8자 이상 입력해주세요" className={`w-full h-14 px-4 bg-gray-800/50 border ${ errors.password ? "border-red-500" : "border-gray-700" @@ -187,7 +194,7 @@ export default function SignupPage() { type="password" id="passwordConfirm" value={formData.passwordConfirm} - onChange={(e) => handleChange("passwordConfirm", e.target.value)} + onChange={e => handleChange("passwordConfirm", e.target.value)} placeholder="비밀번호를 다시 입력해주세요" className={`w-full h-14 px-4 bg-gray-800/50 border ${ errors.passwordConfirm ? "border-red-500" : "border-gray-700" @@ -199,7 +206,28 @@ export default function SignupPage() {

)} - + {/* 이름 */} +
+ + handleChange("name", e.target.value)} + placeholder="이름을 입력해주세요" + className={`w-full h-14 px-4 bg-gray-800/50 border ${ + errors.name ? "border-red-500" : "border-gray-700" + } rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`} + /> + {errors.name && ( +

{errors.name}

+ )} +
{/* 닉네임 */}
+ {/* 이름 */} +
+ + handleChange("name", e.target.value)} + placeholder="이름을 입력해주세요" + className={`w-full h-14 px-4 bg-gray-800/50 border ${ + errors.name ? "border-red-500" : "border-gray-700" + } rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`} + /> + {errors.name && ( +

{errors.name}

+ )} +
+ {/* 휴대폰 번호 */}
- + {/* 타이틀 */} -

- 8aladin -

-

- 안전하고 편리한 중고거래 -

+

8aladin

+

안전하고 편리한 중고거래

{/* 설명 텍스트 */}
-

- 간편하게 로그인하고 -

-

- 다양한 중고 상품을 만나보세요 -

+

간편하게 로그인하고

+

다양한 중고 상품을 만나보세요

@@ -153,4 +168,3 @@ export default function LoginPage() { ); } - diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx index 4110e21..cf84a7d 100644 --- a/src/app/signup/page.tsx +++ b/src/app/signup/page.tsx @@ -251,29 +251,6 @@ export default function SignupPage() { )} - {/* 이름 */} -
- - handleChange("name", e.target.value)} - placeholder="이름을 입력해주세요" - className={`w-full h-14 px-4 bg-gray-800/50 border ${ - errors.name ? "border-red-500" : "border-gray-700" - } rounded-xl text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all`} - /> - {errors.name && ( -

{errors.name}

- )} -
- {/* 휴대폰 번호 */}