Merge pull request #5 from wafflestudio/feature/signup

feat: routing + signup page

Author: s3mng

.github/pull_request_template.md

@@ -0,0 +1 @@
+## PR 요약

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.11.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

src/App.tsx

@@ -1,10 +1,16 @@
-import { TestPage } from '@/pages/TestPage';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { MainPage } from '@/pages/MainPage';
+import { SignupPage } from '@/pages/SignupPage';
 
 function App() {
   return (
-    <>
-      <TestPage />
-    </>
+    <Router>
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path="/signup" element={<SignupPage />} />
+        <Route path="/login" element={<Navigate to="/" replace />} /> {/* Placeholder */}
+      </Routes>
+    </Router>
   );
 }
 

src/api/client.ts

@@ -1,8 +1,25 @@
 const BASE_URL = import.meta.env.PROD ? 'http://3.34.178.145:8000' : '/api';
 
+// Types
+interface SignupRequest {
+    name: string;
+    email: string;
+    password: string;
+}
+
+interface SignupResponse {
+    id: string;
+    name: string;
+    email: string;
+}
+
+interface ErrorResponse {
+    detail: string;
+}
+
 export const checkBackendStatus = async (): Promise<{ status: string; ok: boolean }> => {
     try {
-        const response = await fetch(`${BASE_URL}/test`);
+        const response = await fetch(`${BASE_URL}/health`);
         if (response.status === 200) {
             return { status: 'Success', ok: true };
         } else {
@@ -13,3 +30,26 @@ export const checkBackendStatus = async (): Promise<{ status: string; ok: boolea
         return { status: 'Connection Failed', ok: false };
     }
 };
+
+export const signup = async (data: SignupRequest): Promise<{ success: boolean; data?: SignupResponse; error?: string }> => {
+    try {
+        const response = await fetch(`${BASE_URL}/api/users/signup`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(data),
+        });
+
+        if (response.status === 201) {
+            const result = await response.json();
+            return { success: true, data: result };
+        } else {
+            const errorData: ErrorResponse = await response.json();
+            return { success: false, error: errorData.detail || 'Signup failed' };
+        }
+    } catch (error) {
+        console.error('Signup error:', error);
+        return { success: false, error: 'Network error occurred' };
+    }
+};

src/pages/MainPage.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { checkBackendStatus } from '@/api/client';
+import '@/styles/App.css';
+
+export function MainPage() {
+    const [status, setStatus] = useState<string>('');
+    const navigate = useNavigate();
+
+    const handleCheck = async () => {
+        const result = await checkBackendStatus();
+        setStatus(result.status);
+    };
+
+    return (
+        <div className="container">
+            <header className="app-header">
+                <div className="logo">자산관리</div>
+                <div className="auth-buttons">
+                    <button className="text-btn" onClick={() => navigate('/signup')}>회원가입</button>
+                    <button className="text-btn" onClick={() => navigate('/login')}>로그인</button>
+                </div>
+            </header>
+
+            <main className="main-content">
+                <h1>Club Asset Management</h1>
+                <div className="card">
+                    <button onClick={handleCheck} className="primary-btn">
+                        Check Backend Status
+                    </button>
+                    {status && (
+                        <p className={`status ${status === 'Success' ? 'success' : 'error'}`}>
+                            {status}
+                        </p>
+                    )}
+                </div>
+            </main>
+        </div>
+    );
+}

src/pages/SignupPage.tsx

@@ -0,0 +1,123 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { signup } from '@/api/client';
+import '@/styles/App.css';
+
+export function SignupPage() {
+    const navigate = useNavigate();
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        password: '',
+        confirmPassword: '',
+    });
+    const [error, setError] = useState<string>('');
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+
+        if (formData.password !== formData.confirmPassword) {
+            setError('비밀번호가 일치하지 않습니다.');
+            return;
+        }
+
+        if (formData.password.length < 8) {
+            setError('비밀번호는 8자 이상이어야 합니다.');
+            return;
+        }
+
+        const result = await signup({
+            name: formData.name,
+            email: formData.email,
+            password: formData.password
+        });
+
+        if (result.success) {
+            alert('회원가입 성공!');
+            navigate('/login');
+        } else {
+            setError(result.error || '회원가입에 실패했습니다.');
+        }
+    };
+
+    return (
+        <div className="container">
+            <header className="app-header">
+                <div className="logo" onClick={() => navigate('/')}>자산관리</div>
+                <div className="auth-buttons">
+                    <button className="text-btn active">회원가입</button>
+                    <button className="text-btn" onClick={() => navigate('/login')}>로그인</button>
+                </div>
+            </header>
+
+            <main className="auth-container">
+                <h2>회원가입</h2>
+                <form onSubmit={handleSubmit} className="auth-form">
+                    <div className="form-group">
+                        <label htmlFor="name">이름</label>
+                        <input
+                            type="text"
+                            id="name"
+                            name="name"
+                            value={formData.name}
+                            onChange={handleChange}
+                            required
+                            maxLength={30}
+                            placeholder="이름을 입력하세요"
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="password">비밀번호</label>
+                        <input
+                            type="password"
+                            id="password"
+                            name="password"
+                            value={formData.password}
+                            onChange={handleChange}
+                            required
+                            minLength={8}
+                            placeholder="8자 이상 입력하세요"
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="confirmPassword">비밀번호 확인</label>
+                        <input
+                            type="password"
+                            id="confirmPassword"
+                            name="confirmPassword"
+                            value={formData.confirmPassword}
+                            onChange={handleChange}
+                            required
+                            placeholder="다시 한번 입력하세요"
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label htmlFor="email">이메일</label>
+                        <input
+                            type="email"
+                            id="email"
+                            name="email"
+                            value={formData.email}
+                            onChange={handleChange}
+                            required
+                            placeholder="example@email.com"
+                        />
+                    </div>
+
+                    {error && <p className="error-message">{error}</p>}
+
+                    <button type="submit" className="submit-btn">회원가입</button>
+                </form>
+            </main>
+        </div>
+    );
+}