roomescape-refactored/frontend/src/pages/admin/TimePage.tsx

import { createTime, delTime, fetchTimes } from '@_api/time/timeAPI';
import type { TimeCreateRequest } from '@_api/time/timeTypes';
import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { isLoginRequiredError } from '@_api/apiClient';
import '../../css/admin-time-page.css';

const AdminTimePage: React.FC = () => {
    const [times, setTimes] = useState<any[]>([]);
    const [isEditing, setIsEditing] = useState(false);
    const [newTime, setNewTime] = useState('');
    const navigate = useNavigate();
    const location = useLocation();

    const handleError = (err: any) => {
        if (isLoginRequiredError(err)) {
            alert('로그인이 필요해요.');
            navigate('/login', { state: { from: location } });
        } else {
            const message = err.response?.data?.message || '알 수 없는 오류가 발생했습니다.';
            alert(message);
            console.error(err);
        }
    };

    useEffect(() => {
        const fetchData = async () => {
            await fetchTimes()
                .then(response => setTimes(response.times))
                .catch(handleError);
        }
        fetchData();
    }, []);

    const handleAddClick = () => {
        setIsEditing(true);
    };

    const handleCancelClick = () => {
        setIsEditing(false);
        setNewTime('');
    };

    const handleSaveClick = async () => {
        if (!newTime) {
            alert('시간을 입력해주세요.');
            return;
        }
        if (!/^\d{2}:\d{2}$/.test(newTime)) {
            alert('시간 형식이 올바르지 않습니다. HH:MM 형식으로 입력해주세요.');
            return;
        }
        const request: TimeCreateRequest = {
            startAt: newTime
        };

        await createTime(request)
            .then((response) => {
                setTimes([...times, response]);
                alert('시간을 추가했어요.');
                handleCancelClick();
            })
            .catch(handleError);
    };

    const deleteTime = async (id: string) => {
        if (!window.confirm('정말 삭제하시겠어요?')) {
            return;
        }

        await delTime(id)
            .then(() => {
                setTimes(times.filter(time => time.id !== id));
                alert('시간을 삭제했어요.');
            })
            .catch(handleError);
    };

    return (
        <div className="admin-time-container">
            <h2 className="page-title">시간 관리</h2>
            <div className="section-card">
                <div className="table-header">
                    <button className="btn btn-primary" onClick={handleAddClick}>시간 추가</button>
                </div>
                <div className="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>시간</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {times.map(time => (
                                <tr key={time.id}>
                                    <td>{time.id}</td>
                                    <td>{time.startAt}</td>
                                    <td>
                                        <button className="btn btn-danger" onClick={() => deleteTime(time.id)}>삭제</button>
                                    </td>
                                </tr>
                            ))}
                            {isEditing && (
                                <tr className="editing-row">
                                    <td></td>
                                    <td><input type="time" className="form-input" value={newTime} onChange={e => setNewTime(e.target.value)} /></td>
                                    <td>
                                        <button className="btn btn-primary" onClick={handleSaveClick}>확인</button>
                                        <button className="btn btn-secondary" onClick={handleCancelClick}>취소</button>
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default AdminTimePage;