motaju/xrlms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

register form redesign

Browse Source
This commit is contained in:
wallace
2025-11-25 11:02:18 +09:00
parent 71feecb8d1
commit 53dea825b0
4 changed files with 182 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/app/register/RegisterForm.tsx
View File

@@ -5,6 +5,7 @@ import Link from "next/link";
import LoginCheckboxActiveSvg from "@/app/svgs/logincheckboxactivesvg";
import LoginCheckboxInactiveSvg from "@/app/svgs/logincheckboxinactivesvg";
import LoginInputSvg from "@/app/svgs/inputformx";
import CalendarSvg from "@/app/svgs/callendar";
type Gender = "MALE" | "FEMALE" | "";
@@ -21,6 +22,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
const [passwordConfirm, setPasswordConfirm] = useState("");
const [gender, setGender] = useState<Gender>("");
const [birthdate, setBirthdate] = useState("");
const [birthdateInput, setBirthdateInput] = useState("");
// 이메일 인증 관련
const [emailCodeSent, setEmailCodeSent] = useState(false);
@@ -41,9 +43,57 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
const [focused, setFocused] = useState<Record<string, boolean>>({});
const [errors, setErrors] = useState<Record<string, string>>({});
// 휴대폰 번호 포맷팅 함수
function formatPhoneNumber(phoneNumber: string): string {
const numbers = phoneNumber.replace(/[^0-9]/g, "");
if (numbers.length <= 3) return numbers;
if (numbers.length <= 7) return `${numbers.slice(0, 3)}-${numbers.slice(3)}`;
if (numbers.length <= 11) return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7)}`;
return `${numbers.slice(0, 3)}-${numbers.slice(3, 7)}-${numbers.slice(7, 11)}`;
}
// 생년월일 YYYYMMDD를 YYYY-MM-DD로 변환하는 함수
function parseBirthdate(input: string): string {
// 숫자만 추출
const numbers = input.replace(/[^0-9]/g, "");
// YYYYMMDD 형식인지 확인 (8자리)
if (numbers.length === 8) {
const year = numbers.slice(0, 4);
const month = numbers.slice(4, 6);
const day = numbers.slice(6, 8);
// 유효한 날짜인지 검증
const yearNum = parseInt(year, 10);
const monthNum = parseInt(month, 10);
const dayNum = parseInt(day, 10);
if (yearNum >= 1900 && yearNum <= 2100 && monthNum >= 1 && monthNum <= 12 && dayNum >= 1 && dayNum <= 31) {
// 날짜 유효성 검사
const date = new Date(yearNum, monthNum - 1, dayNum);
if (date.getFullYear() === yearNum && date.getMonth() === monthNum - 1 && date.getDate() === dayNum) {
return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
}
}
}
// YYYY-MM-DD 형식이면 그대로 반환
if (/^\d{4}-\d{2}-\d{2}$/.test(input)) {
return input;
}
return "";
}
const isEmailValid = useMemo(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email), [email]);
const isPhoneValid = useMemo(() => /^\d{9,11}$/.test(phone), [phone]);
const isPasswordValid = useMemo(() => password.length >= 8 && password.length <= 16, [password]);
const isPasswordValid = useMemo(() => {
if (password.length < 8 || password.length > 16) return false;
const hasEnglish = /[a-zA-Z]/.test(password);
const hasNumber = /[0-9]/.test(password);
const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
return hasEnglish && hasNumber && hasSpecialChar;
}, [password]);
const isPasswordConfirmValid = useMemo(() => passwordConfirm === password && passwordConfirm.length > 0, [password, passwordConfirm]);
const canSubmit = useMemo(() => {
@@ -64,7 +114,18 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
if (name.trim().length === 0) nextErrors.name = "이름을 입력해 주세요.";
if (!isPhoneValid) nextErrors.phone = "휴대폰 번호를 숫자만 9~11자리로 입력해 주세요.";
if (!isEmailValid) nextErrors.email = "올바른 이메일 형식을 입력해 주세요.";
if (!isPasswordValid) nextErrors.password = "비밀번호는 8~16자여야 합니다.";
if (!isPasswordValid) {
if (password.length < 8 || password.length > 16) {
nextErrors.password = "비밀번호는 8~16자여야 합니다.";
} else {
const hasEnglish = /[a-zA-Z]/.test(password);
const hasNumber = /[0-9]/.test(password);
const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
if (!hasEnglish || !hasNumber || !hasSpecialChar) {
nextErrors.password = "8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요.";
}
}
}
if (!isPasswordConfirmValid) nextErrors.passwordConfirm = "비밀번호가 일치하지 않습니다.";
if (gender === "") nextErrors.gender = "성별을 선택해 주세요.";
if (birthdate.trim().length === 0) nextErrors.birthdate = "생년월일을 선택해 주세요.";
@@ -97,12 +158,12 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
}
async function verifyEmailCode() {
try{
try {
const response = await fetch(
"https://hrdi.coconutmeet.net/auth/verify-email/confirm",
{
method: "POST", headers: {"Content-Type": "application/json",},
body: JSON.stringify({email: email,emailCode: emailCode})
method: "POST", headers: { "Content-Type": "application/json", },
body: JSON.stringify({ email: email, emailCode: emailCode })
});
if (!response.ok) {
console.error("이메일 인증번호 검증 실패:", response.statusText);
@@ -112,7 +173,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
// 인증 성공 시 상태 업데이트
setEmailCodeVerified(true);
}
catch(error){
catch (error) {
console.error("이메일 인증번호 검증 오류:", error);
onOpenCodeError();
}
@@ -128,8 +189,8 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
"https://hrdi.coconutmeet.net/auth/verify-email/send",
{
method: "POST",
headers: {"Content-Type": "application/json",},
body: JSON.stringify({email: email})
headers: { "Content-Type": "application/json", },
body: JSON.stringify({ email: email })
}
);
if (!response.ok) {
@@ -166,7 +227,7 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
try {
const response = await fetch("https://hrdi.coconutmeet.net/auth/signup", {
method: "POST",
headers: {"Content-Type": "application/json",},
headers: { "Content-Type": "application/json", },
body: JSON.stringify({
email: email,
emailCode: emailCode,
@@ -254,11 +315,11 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
name="phone"
type="tel"
inputMode="numeric"
value={phone}
value={formatPhoneNumber(phone)}
placeholder="-없이 입력해 주세요."
onChange={(e) => setPhone(e.target.value.replace(/[^0-9]/g, ""))}
onFocus={() => setFocused((p) => ({ ...p, phone: true }))}
onBlur={() => setFocused((p) => ({ ...p, phone: false }))}
placeholder="-없이 입력해 주세요."
className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px]"
/>
{phone.trim().length > 0 && focused.phone && (
@@ -449,8 +510,8 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
onChange={() => setGender("MALE")}
className="sr-only"
/>
<span className={`flex items-center justify-center rounded-full size-[18px] border ${gender === "MALE" ? "border-active-button" : "border-[#8c95a1]"}`}>
{gender === "MALE" && <span className="block size-[9px] rounded-full bg-active-button" />}
<span className={`relative inline-flex items-center justify-center rounded-full w-[18px] h-[18px] shrink-0 border box-border ${gender === "MALE" ? "border-active-button" : "border-[#8c95a1]"}`}>
{gender === "MALE" && <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 block size-[9px] rounded-full bg-active-button" />}
</span>
남성
</label>
@@ -463,8 +524,8 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
onChange={() => setGender("FEMALE")}
className="sr-only"
/>
<span className={`flex items-center justify-center rounded-full size-[18px] border ${gender === "FEMALE" ? "border-active-button" : "border-[#8c95a1]"}`}>
{gender === "FEMALE" && <span className="block size-[9px] rounded-full bg-active-button" />}
<span className={`relative inline-flex items-center justify-center rounded-full w-[18px] h-[18px] shrink-0 border box-border ${gender === "FEMALE" ? "border-active-button" : "border-[#8c95a1]"}`}>
{gender === "FEMALE" && <span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 block size-[9px] rounded-full bg-active-button" />}
</span>
여성
</label>
@@ -475,14 +536,56 @@ export default function RegisterForm({ onOpenDone, onOpenCodeError }: RegisterFo
{/* 생년월일 */}
<div className="space-y-2">
<label htmlFor="birthdate" className="text-[15px] font-semibold text-[#6c7682]">생년월일</label>
<div className="relative">
<input
id="birthdate"
name="birthdate"
type="text"
value={birthdateInput || (birthdate ? birthdate.replace(/-/g, ".") : "")}
onChange={(e) => {
const inputValue = e.target.value;
setBirthdateInput(inputValue);
if (inputValue === "") {
setBirthdate("");
}
}}
onBlur={(e) => {
// 포커스를 잃을 때 YYYYMMDD 형식이면 변환
const formatted = parseBirthdate(e.target.value);
if (formatted) {
setBirthdate(formatted);
setBirthdateInput("");
} else if (e.target.value === "") {
setBirthdate("");
setBirthdateInput("");
}
}}
placeholder="생년월일"
className="h-[40px] px-[12px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[18px] text-neutral-700 placeholder:text-input-placeholder-text pr-[40px] flex items-center"
/>
<button
type="button"
onClick={(e) => {
e.preventDefault();
const dateInput = document.getElementById("birthdate-date-picker") as HTMLInputElement;
dateInput?.showPicker?.();
}}
className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer"
aria-label="날짜 선택"
>
<CalendarSvg width="20" height="20" />
</button>
<input
id="birthdate-date-picker"
type="date"
value={birthdate}
onChange={(e) => setBirthdate(e.target.value)}
className="h-[40px] px-[12px] py-[7px] w-full rounded-[8px] border border-neutral-40 focus:outline-none focus:border-neutral-700 text-[16px] text-neutral-700"
onChange={(e) => {
setBirthdate(e.target.value);
setBirthdateInput("");
}}
className="absolute right-50 top-1 h-full w-[20px] opacity-0 cursor-pointer"
/>
</div>
{errors.birthdate && <p className="text-error text-[13px] leading-tight">{errors.birthdate}</p>}
</div>

46
src/app/svgs/callendar.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React from "react";
const CalendarSvg: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M16 2V6"
stroke="#333C47"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 2V6"
stroke="#333C47"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 9H21"
stroke="#333C47"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19 4H5C3.895 4 3 4.895 3 6V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V6C21 4.895 20.105 4 19 4Z"
stroke="#333C47"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<rect x="3" y="4" width="18" height="5" rx="2" fill="#333C47" />
</svg>
);
export default CalendarSvg;

222
src/lib/email-templates.ts
View File

@@ -1,222 +0,0 @@
/**
* 이메일 템플릿 유틸리티
* Figma 디자인에 맞춘 이메일 템플릿을 생성합니다.
*/
/**
* 이메일 인증번호 템플릿 생성
* @param verificationCode - 인증번호 (6자리)
* @param baseUrl - 이미지 베이스 URL (선택사항, 기본값: '')
* @returns HTML 형식의 이메일 템플릿
*/
export function generateVerificationEmailTemplate(
verificationCode: string,
baseUrl: string = ''
): string {
// 이미지 URL 생성 (baseUrl이 제공되면 사용, 없으면 상대 경로)
const getImageUrl = (imagePath: string) => {
if (baseUrl) {
return `${baseUrl}${imagePath}`;
}
return imagePath;
};
return `
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[XR LMS] 이메일 인증 번호</title>
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
background-color: #ffffff;
color: #333c47;
line-height: 1.5;
}
.email-container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
border-top: 4px solid #384fbf;
}
.email-content {
padding: 80px;
display: flex;
flex-direction: column;
gap: 60px;
}
.email-title-wrapper {
width: 100%;
display: block;
}
.email-title-image {
width: 100%;
height: auto;
display: block;
font-family: 'Pretendard', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.5;
color: #333c47;
}
.verification-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.verification-code {
font-family: 'Pretendard', sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 1.5;
color: #384fbf;
letter-spacing: 0.05em;
}
.verification-instructions-wrapper {
width: 100%;
display: block;
}
.verification-instructions-image {
width: 100%;
height: auto;
display: block;
font-family: 'Pretendard', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: #6c7682;
}
.email-footer-wrapper {
width: 100%;
display: block;
}
.email-footer-image {
width: 100%;
height: auto;
display: block;
font-family: 'Pretendard', 'Noto Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
color: #8c95a1;
}
/* 이미지가 로드되지 않을 때를 대비한 fallback 텍스트 숨김 */
.email-title-fallback,
.verification-instructions-fallback,
.email-footer-fallback {
display: none;
}
@media only screen and (max-width: 600px) {
.email-content {
padding: 40px 20px;
gap: 40px;
}
.email-title-image {
font-size: 20px;
}
.verification-code {
font-size: 32px;
}
.verification-instructions-image {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="email-container">
<div class="email-content">
<div class="email-title-wrapper">
<img
src="${getImageUrl('/imgs/email-title.png')}"
alt="[XR LMS] 이메일 인증 번호"
class="email-title-image"
style="display: block; width: 100%; height: auto;"
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
/>
<div class="email-title-fallback" style="font-family: 'Pretendard', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.5; color: #333c47;">
[XR LMS] 이메일 인증 번호
</div>
</div>
<div class="verification-section">
<div class="verification-code">
${verificationCode}
</div>
<div class="verification-instructions-wrapper">
<img
src="${getImageUrl('/imgs/email-instructions.png')}"
alt="위 번호를 인증번호 입력창에 입력해 주세요. 인증번호 입력 후 해당 화면 내 [인증번호 확인]버튼을 클릭해 주세요."
class="verification-instructions-image"
style="display: block; width: 100%; height: auto;"
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
/>
<div class="verification-instructions-fallback" style="font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.5; color: #6c7682;">
위 번호를 인증번호 입력창에 입력해 주세요.<br>
인증번호 입력 후 해당 화면 내 [인증번호 확인]버튼을 클릭해 주세요.
</div>
</div>
</div>
<div class="email-footer-wrapper">
<img
src="${getImageUrl('/imgs/email-footer.png')}"
alt="Copyright ⓒ 2025 XL LMS. All rights reserved"
class="email-footer-image"
style="display: block; width: 100%; height: auto;"
onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
/>
<div class="email-footer-fallback" style="font-family: 'Pretendard', 'Noto Sans', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.5; color: #8c95a1;">
Copyright ⓒ 2025 XL LMS. All rights reserved
</div>
</div>
</div>
</div>
</body>
</html>
`.trim();
}
/**
* 이메일 인증번호 템플릿 (텍스트 버전)
* @param verificationCode - 인증번호 (6자리)
* @returns 텍스트 형식의 이메일 템플릿
*/
export function generateVerificationEmailTextTemplate(verificationCode: string): string {
return `
[XR LMS] 이메일 인증 번호
인증번호: ${verificationCode}
위 번호를 인증번호 입력창에 입력해 주세요.
인증번호 입력 후 해당 화면 내 [인증번호 확인]버튼을 클릭해 주세요.
Copyright ⓒ 2025 XL LMS. All rights reserved
`.trim();
}

14
src/lib/prisma.ts
View File

@@ -1,14 +0,0 @@
import { PrismaClient } from '@prisma/client';
const globalForPrisma = globalThis as unknown as {
prisma: PrismaClient | undefined;
};
export const prisma =
globalForPrisma.prisma ??
new PrismaClient({
log: process.env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
});
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;