프로젝트 목록 UI

import { useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router';
import api, { getErrorMessage } from '../api/axiosInstance';
import { useAuth } from '../context/AuthContext';

interface ProjectSummary {
  id: string;
  name: string;
  ownerId: string;
  createdAt: string;
  updatedAt: string;
}

type LoadState = 'loading' | 'ready' | 'error';

export default function ProjectsPage() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const [projects, setProjects] = useState<ProjectSummary[]>([]);
  const [loadState, setLoadState] = useState<LoadState>('loading');
  const [reloadKey, setReloadKey] = useState(0);
  const [newProjectName, setNewProjectName] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

  useEffect(() => {
    let active = true;
    api
      .get<ProjectSummary[]>('/projects')
      .then(({ data }) => {
        if (!active) return;
        setProjects(data);
        setLoadState('ready');
      })
      .catch(() => {
        if (active) setLoadState('error');
      });
    return () => {
      active = false;
    };
  }, [reloadKey]);

  const retry = () => {
    setLoadState('loading');
    setReloadKey((key) => key + 1);
  };

  const handleCreate = async () => {
    const name = newProjectName.trim();
    if (!name) return;
    setBusy(true);
    setError('');
    try {
      const { data } = await api.post<ProjectSummary>('/projects', { name });
      setNewProjectName('');
      await navigate(`/project/${data.id}`); // 만든 프로젝트의 에디터로 이동합니다.
    } catch (err) {
      setError(getErrorMessage(err, 'Failed to create project'));
    } finally {
      setBusy(false);
    }
  };

  const handleDelete = async (projectId: string) => {
    if (!window.confirm('Are you sure you want to delete this project?')) return;
    setBusy(true);
    setError('');
    try {
      await api.delete(`/projects/${projectId}`);
      setProjects((current) => current.filter((project) => project.id !== projectId));
    } catch (err) {
      setError(getErrorMessage(err, 'Failed to delete project'));
    } finally {
      setBusy(false);
    }
  };

  return (
    <main>
      <h2>Welcome, {user?.nickname ?? user?.email}!</h2>
      <button type="button" onClick={logout}>Logout</button>

      <h3>Create New Project</h3>
      <form
        onSubmit={(event) => {
          event.preventDefault();
          void handleCreate();
        }}
      >
        <input
          value={newProjectName}
          onChange={(event) => setNewProjectName(event.target.value)}
          placeholder="Project name (3+ characters)"
          required
        />
        <button type="submit" disabled={busy}>Create</button>
      </form>
      {error && <p role="alert">{error}</p>}

      <h3>Your Projects</h3>
      {loadState === 'loading' && <p>Loading projects...</p>}
      {loadState === 'error' && (
        <p role="alert">
          Failed to load projects. <button type="button" onClick={retry}>Retry</button>
        </p>
      )}
      {loadState === 'ready' && projects.length === 0 && <p>No projects yet. Create one!</p>}
      {loadState === 'ready' && projects.length > 0 && (
        <ul>
          {projects.map((project) => (
            <li key={project.id}>
              <Link to={`/project/${project.id}`}>{project.name}</Link>{' '}
              ({new Date(project.updatedAt).toLocaleDateString()}){' '}
              <button type="button" disabled={busy} onClick={() => void handleDelete(project.id)}>
                Delete
              </button>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}