);
};
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index e9472583..db4704d3 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
+import React, {useState} from 'react';
+import {useLocation, useNavigate} from 'react-router-dom';
+import {useAuth} from '@_context/AuthContext';
+import '@_css/login-page-v2.css';
const LoginPage: React.FC = () => {
const [email, setEmail] = useState('');
@@ -11,36 +12,53 @@ const LoginPage: React.FC = () => {
const from = location.state?.from?.pathname || '/';
- const handleLogin = async () => {
+ const handleLogin = async (e: React.FormEvent) => {
+ e.preventDefault();
try {
- await login({email, password});
-
+ const principalType = from.startsWith('/admin') ? 'ADMIN' : 'USER';
+ await login({ account: email, password: password, principalType: principalType });
+
alert('로그인에 성공했어요!');
navigate(from, { replace: true });
} catch (error: any) {
const message = error.response?.data?.message || '로그인에 실패했어요. 이메일과 비밀번호를 확인해주세요.';
alert(message);
console.error('로그인 실패:', error);
- setEmail('');
setPassword('');
}
}
return (
-
-
Login
-
- setEmail(e.target.value)} />
-
-
- setPassword(e.target.value)} />
-
-
-
-
-
+
);
};
-export default LoginPage;
\ No newline at end of file
+export default LoginPage;
diff --git a/frontend/src/pages/MyReservationPage.tsx b/frontend/src/pages/MyReservationPage.tsx
index 96102c63..d25d07f8 100644
--- a/frontend/src/pages/MyReservationPage.tsx
+++ b/frontend/src/pages/MyReservationPage.tsx
@@ -1,88 +1,382 @@
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { cancelWaiting, fetchMyReservations } from '@_api/reservation/reservationAPI';
-import type { MyReservationRetrieveResponse } from '@_api/reservation/reservationTypes';
-import { ReservationStatus } from '@_api/reservation/reservationTypes';
-import { isLoginRequiredError } from '@_api/apiClient';
+import {cancelPayment} from '@_api/payment/paymentAPI';
+import type {PaymentRetrieveResponse} from '@_api/payment/PaymentTypes';
+import {cancelReservation, fetchDetailById, fetchSummaryByMember} from '@_api/reservation/reservationAPI';
+import {
+ type ReservationDetail,
+ ReservationStatus,
+ type ReservationSummaryRetrieveResponse
+} from '@_api/reservation/reservationTypes';
+import React, {useEffect, useState} from 'react';
+import '@_css/my-reservation-v2.css';
+const getReservationStatus = (reservation: ReservationSummaryRetrieveResponse): { className: string, text: string } => {
+ const now = new Date();
+ const reservationDateTime = new Date(`${reservation.date}T${reservation.startAt}`);
+
+ switch (reservation.status) {
+ case ReservationStatus.CANCELED:
+ return { className: 'status-canceled', text: '취소됨' };
+ case ReservationStatus.CONFIRMED:
+ if (reservationDateTime < now) {
+ return { className: 'status-completed', text: '이용완료' };
+ }
+ return { className: 'status-confirmed', text: '예약확정' };
+ case ReservationStatus.PENDING:
+ return { className: 'status-pending', text: '입금대기' };
+ default:
+ return { className: `status-${reservation.status.toLowerCase()}`, text: reservation.status };
+ }
+};
+
+const formatDisplayDateTime = (dateTime: any): string => {
+ let date: Date;
+
+ if (typeof dateTime === 'string') {
+ // ISO 문자열 형식 처리 (LocalDateTime, OffsetDateTime 모두 포함)
+ date = new Date(dateTime);
+ } else if (typeof dateTime === 'number') {
+ // Unix 타임스탬프(초) 형식 처리
+ date = new Date(dateTime * 1000);
+ } else if (Array.isArray(dateTime) && dateTime.length >= 6) {
+ // 배열 형식 처리: [year, month, day, hour, minute, second, nanosecond?]
+ const year = dateTime[0];
+ const month = dateTime[1] - 1; // JS Date의 월은 0부터 시작
+ const day = dateTime[2];
+ const hour = dateTime[3];
+ const minute = dateTime[4];
+ const second = dateTime[5];
+ const millisecond = dateTime.length > 6 ? Math.floor(dateTime[6] / 1000000) : 0;
+ date = new Date(year, month, day, hour, minute, second, millisecond);
+ } else {
+ return '유효하지 않은 날짜 형식';
+ }
+
+ if (isNaN(date.getTime())) {
+ return '유효하지 않은 날짜';
+ }
+
+ const options: Intl.DateTimeFormatOptions = {
+ year: 'numeric',
+ month: 'long',
+ day: 'numeric',
+ hour: 'numeric',
+ minute: 'numeric',
+ hour12: true,
+ second: 'numeric'
+ };
+ return new Intl.DateTimeFormat('ko-KR', options).format(date);
+};
+
+const formatCardDateTime = (dateStr: string, timeStr: string): string => {
+ const date = new Date(`${dateStr}T${timeStr}`);
+ const currentYear = new Date().getFullYear();
+ const reservationYear = date.getFullYear();
+
+ const days = ['일', '월', '화', '수', '목', '금', '토'];
+ const dayOfWeek = days[date.getDay()];
+ const month = date.getMonth() + 1;
+ const day = date.getDate();
+ let hours = date.getHours();
+ const minutes = date.getMinutes();
+ const ampm = hours >= 12 ? '오후' : '오전';
+ hours = hours % 12;
+ hours = hours ? hours : 12;
+
+ let datePart = '';
+ if (currentYear === reservationYear) {
+ datePart = `${month}월 ${day}일(${dayOfWeek})`;
+ } else {
+ datePart = `${reservationYear}년 ${month}월 ${day}일(${dayOfWeek})`;
+ }
+
+ let timePart = `${ampm} ${hours}시`;
+ if (minutes !== 0) {
+ timePart += ` ${minutes}분`;
+ }
+
+ return `${datePart} ${timePart}`;
+};
+
+// --- Cancellation View Component ---
+const CancellationView: React.FC<{
+ reservation: ReservationDetail;
+ onCancelSubmit: (reason: string) => void;
+ onBack: () => void;
+ isCancelling: boolean;
+}> = ({ reservation, onCancelSubmit, onBack, isCancelling }) => {
+ const [reason, setReason] = useState('');
+
+ const handleSubmit = () => {
+ if (!reason.trim()) {
+ alert('취소 사유를 입력해주세요.');
+ return;
+ }
+ onCancelSubmit(reason);
+ };
+
+ return (
+
+
취소 정보 확인
+
+
테마: {reservation.themeName}
+
신청 일시: {formatDisplayDateTime(reservation.applicationDateTime)}
+ {reservation.payment &&
결제 금액: {reservation.payment.totalAmount.toLocaleString()}원
}
+
+