.

2025-12-27 00:17:46 +09:00
commit 87405e897e
34 changed files with 6264 additions and 0 deletions
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -0,0 +1,163 @@
+// src/app/signup/page.tsx
+'use client';
+
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
+import { signup, verifyEmail } from '@/api/auth';
+import { SignupRequest } from '@/types';
+import Link from 'next/link';
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [step, setStep] = useState<'FORM' | 'VERIFY'>('FORM'); // 단계 관리
+  const [loading, setLoading] = useState(false);
+  const [registeredEmail, setRegisteredEmail] = useState('');  // 인증할 이메일 저장
+
+  // React Hook Form 설정
+  const { register, handleSubmit, formState: { errors }, watch } = useForm<SignupRequest>();
+  const [verifyCode, setVerifyCode] = useState('');
+
+  // 1단계: 회원가입 정보 제출
+  const onSignupSubmit = async (data: SignupRequest) => {
+    setLoading(true);
+    try {
+      const res = await signup(data);
+      if (res.code === 'SUCCESS') {
+        alert(`📧 ${data.email}로 인증 코드를 보냈습니다!`);
+        setRegisteredEmail(data.email); // 이메일 기억하기
+        setStep('VERIFY'); // 2단계로 이동
+      } else {
+        alert('회원가입 실패: ' + res.message);
+      }
+    } catch (error: any) {
+      alert('오류 발생: ' + (error.response?.data?.message || error.message));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 2단계: 인증 코드 제출
+  const onVerifySubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!verifyCode) return alert('인증 코드를 입력해주세요.');
+
+    setLoading(true);
+    try {
+      const res = await verifyEmail({ email: registeredEmail, code: verifyCode });
+      if (res.code === 'SUCCESS') {
+        alert('✅ 인증되었습니다! 로그인 페이지로 이동합니다.');
+        router.push('/login');
+      } else {
+        alert('인증 실패: ' + res.message);
+      }
+    } catch (error: any) {
+      alert('오류 발생: ' + (error.response?.data?.message || error.message));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 py-12">
+      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border border-gray-100">
+        
+        {/* 헤더 */}
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold text-gray-900">회원가입 🚀</h1>
+          <p className="text-sm text-gray-500 mt-2">
+            {step === 'FORM' ? '정보를 입력하고 인증 메일을 받으세요.' : '이메일로 전송된 6자리 코드를 입력하세요.'}
+          </p>
+        </div>
+
+        {/* STEP 1: 가입 정보 입력 폼 */}
+        {step === 'FORM' && (
+          <form onSubmit={handleSubmit(onSignupSubmit)} className="space-y-5">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">이메일</label>
+              <input
+                {...register('email', { 
+                  required: '이메일은 필수입니다.',
+                  pattern: { value: /\S+@\S+\.\S+/, message: '이메일 형식이 올바르지 않습니다.' }
+                })}
+                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none"
+                placeholder="user@example.com"
+              />
+              {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email.message}</p>}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">닉네임</label>
+              <input
+                {...register('nickname', { required: '닉네임을 입력해주세요.' })}
+                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none"
+                placeholder="개발자박씨"
+              />
+              {errors.nickname && <p className="text-red-500 text-xs mt-1">{errors.nickname.message}</p>}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">비밀번호</label>
+              <input
+                type="password"
+                {...register('password', { required: '비밀번호를 입력해주세요.', minLength: { value: 6, message: '6자 이상 입력해주세요.' } })}
+                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none"
+                placeholder="••••••••"
+              />
+              {errors.password && <p className="text-red-500 text-xs mt-1">{errors.password.message}</p>}
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-colors disabled:bg-gray-400"
+            >
+              {loading ? '처리 중...' : '인증 메일 받기'}
+            </button>
+          </form>
+        )}
+
+        {/* STEP 2: 인증 코드 입력 폼 */}
+        {step === 'VERIFY' && (
+          <form onSubmit={onVerifySubmit} className="space-y-5">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">인증 코드 (6자리)</label>
+              <input
+                type="text"
+                value={verifyCode}
+                onChange={(e) => setVerifyCode(e.target.value)}
+                maxLength={6}
+                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 outline-none text-center text-2xl tracking-widest"
+                placeholder="000000"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition-colors disabled:bg-gray-400"
+            >
+              {loading ? '확인 중...' : '인증 완료'}
+            </button>
+            
+            <button
+              type="button"
+              onClick={() => setStep('FORM')}
+              className="w-full text-sm text-gray-500 hover:underline"
+            >
+              이메일 다시 입력하기
+            </button>
+          </form>
+        )}
+
+        {/* 하단 링크 */}
+        <div className="mt-6 text-center text-sm text-gray-500">
+          이미 계정이 있으신가요?{' '}
+          <Link href="/login" className="text-blue-600 font-semibold hover:underline">
+            로그인하기
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}