+
+ );
+};
+
+export default HomePage;
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..35c4fe92
--- /dev/null
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+const LoginPage: React.FC = () => {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const navigate = useNavigate();
+
+ const handleLogin = () => {
+ axios.post('/api/login', { email, password })
+ .then(() => navigate('/'))
+ .catch(error => {
+ alert('Login failed');
+ console.error(error);
+ });
+ };
+
+ return (
+ 인기 테마
+-
+ {ranking.map(theme => (
+
-
+
+
++{theme.name}
+ {theme.description} +
+ ))}
+
+
+ );
+};
+
+export default LoginPage;
diff --git a/frontend/src/pages/MyReservationPage.tsx b/frontend/src/pages/MyReservationPage.tsx
new file mode 100644
index 00000000..c68f2310
--- /dev/null
+++ b/frontend/src/pages/MyReservationPage.tsx
@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const MyReservationPage: React.FC = () => {
+ const [reservations, setReservations] = useStateLogin
+
+ setEmail(e.target.value)} />
+
+
+ setPassword(e.target.value)} />
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MyReservationPage;
diff --git a/frontend/src/pages/ReservationPage.tsx b/frontend/src/pages/ReservationPage.tsx
new file mode 100644
index 00000000..0f2ada00
--- /dev/null
+++ b/frontend/src/pages/ReservationPage.tsx
@@ -0,0 +1,182 @@
+import React, { useEffect, useState, useRef } from 'react';
+import Flatpickr from 'react-flatpickr';
+import 'flatpickr/dist/flatpickr.min.css';
+import axios from 'axios';
+
+declare global {
+ interface Window {
+ PaymentWidget: any;
+ }
+}
+
+const ReservationPage: React.FC = () => {
+ const [selectedDate, setSelectedDate] = useState내 예약
+ +| 테마 | +날짜 | +시간 | +상태 | +대기 취소 | +paymentKey | +결제금액 | ++ |
|---|---|---|---|---|---|---|---|
| {r.themeName} | +{r.date} | +{r.time} | +{r.status.includes('CONFIRMED') ? (r.status === 'CONFIRMED' ? '예약' : '예약 - 결제 필요') : r.rank + '번째 예약 대기'} | ++ {r.status === 'WAITING' && + } + | +{r.paymentKey} | +{r.amount} | ++ |
+
+
+ 예약 페이지
+
+
+
+
+
+
+ 날짜 선택
+
+ setSelectedDate(date)}
+ options={{ inline: true, defaultDate: new Date() }}
+ />
+
+
+
+
+ 테마 선택
+
+ {themes.map(theme => (
+
+ setSelectedTheme(theme.id)}>
+ {theme.name}
+
+ ))}
+
+
+ 시간 선택
+
+ {times.length > 0 ? times.map(time => (
+
+ setSelectedTime({ id: time.id, isAvailable: time.isAvailable })}>
+ {time.startAt}
+
+ )) : 선택할 수 있는 시간이 없습니다.
}
+
+
+
+
+
+
+ );
+};
+
+export default ReservationPage;
diff --git a/frontend/src/pages/SignupPage.tsx b/frontend/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..794f06df
--- /dev/null
+++ b/frontend/src/pages/SignupPage.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+const SignupPage: React.FC = () => {
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [name, setName] = useState('');
+ const navigate = useNavigate();
+
+ const handleSignup = () => {
+ axios.post('/api/members', { email, password, name })
+ .then(() => navigate('/login'))
+ .catch(error => {
+ alert('Signup failed');
+ console.error(error);
+ });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SignupPage;
diff --git a/frontend/src/pages/admin/AdminLayout.tsx b/frontend/src/pages/admin/AdminLayout.tsx
new file mode 100644
index 00000000..26987dbe
--- /dev/null
+++ b/frontend/src/pages/admin/AdminLayout.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import AdminNavbar from './AdminNavbar';
+
+interface AdminLayoutProps {
+ children: ReactNode;
+}
+
+const AdminLayout: React.FCSignup
+
+
+ setEmail(e.target.value)} />
+
+
+
+ setPassword(e.target.value)} />
+
+
+
+ setName(e.target.value)} />
+
+
+
+
+ );
+};
+
+export default AdminPage;
\ No newline at end of file
diff --git a/frontend/src/pages/admin/ReservationPage.tsx b/frontend/src/pages/admin/ReservationPage.tsx
new file mode 100644
index 00000000..7e6b8da0
--- /dev/null
+++ b/frontend/src/pages/admin/ReservationPage.tsx
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const AdminReservationPage: React.FC = () => {
+ const [reservations, setReservations] = useState방탈출 어드민
+
+
+ );
+};
+
+export default AdminReservationPage;
\ No newline at end of file
diff --git a/frontend/src/pages/admin/ThemePage.tsx b/frontend/src/pages/admin/ThemePage.tsx
new file mode 100644
index 00000000..1a5edcbd
--- /dev/null
+++ b/frontend/src/pages/admin/ThemePage.tsx
@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const AdminThemePage: React.FC = () => {
+ const [themes, setThemes] = useState방탈출 예약 페이지
+
+
+
+
+
+
+
+
+
+
+ | 예약번호 | +예약자 | +테마 | +날짜 | +시간 | +결제 완료 여부 | ++ |
|---|---|---|---|---|---|---|
| {r.id} | +{r.member.name} | +{r.theme.name} | +{r.date} | +{r.time.startAt} | +{r.status === 'CONFIRMED' ? '결제 완료' : '결제 대기'} | ++ |
| + | + + | ++ + | +setNewReservation({ ...newReservation, date: e.target.value })} /> | ++ + | ++ | + + + | +
+
+
+
+
+
+
+
+ );
+};
+
+export default AdminThemePage;
\ No newline at end of file
diff --git a/frontend/src/pages/admin/TimePage.tsx b/frontend/src/pages/admin/TimePage.tsx
new file mode 100644
index 00000000..a120ed4a
--- /dev/null
+++ b/frontend/src/pages/admin/TimePage.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const AdminTimePage: React.FC = () => {
+ const [times, setTimes] = useState테마 관리 페이지
+
+
+
+
+ | 순서 | +제목 | +설명 | +썸네일 URL | ++ |
|---|---|---|---|---|
| {theme.id} | +{theme.name} | +{theme.description} | +{theme.thumbnail} | ++ + | +
| + | setNewTheme({ ...newTheme, name: e.target.value })} /> | +setNewTheme({ ...newTheme, description: e.target.value })} /> | +setNewTheme({ ...newTheme, thumbnail: e.target.value })} /> | ++ + + | +
+
+
+
+
+ );
+};
+
+export default AdminTimePage;
\ No newline at end of file
diff --git a/frontend/src/pages/admin/WaitingPage.tsx b/frontend/src/pages/admin/WaitingPage.tsx
new file mode 100644
index 00000000..9de75c6d
--- /dev/null
+++ b/frontend/src/pages/admin/WaitingPage.tsx
@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const AdminWaitingPage: React.FC = () => {
+ const [waitings, setWaitings] = useState시간 관리 페이지
+
+
+
+
+ | 순서 | +시간 | ++ |
|---|---|---|
| {time.id} | +{time.startAt} | ++ + | +
| + | setNewTime(e.target.value)} /> | ++ + + | +
+
+
+
+
+ );
+};
+
+export default AdminWaitingPage;
\ No newline at end of file
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// 예약 대기 관리 페이지
+ +| 예약대기 번호 | +예약자 | +테마 | +날짜 | +시간 | ++ |
|---|---|---|---|---|---|
| {w.id} | +{w.member.name} | +{w.theme.name} | +{w.date} | +{w.time.startAt} | ++ + + | +