Claude CodeでWeb UIを作ってみる話

			
			npx create-next-app@latestを実行して基本的なプロジェクトは作りました。
WebUIで部屋の空き状況を見れるようにしたいです。

UIのイメージを以下に配置しました。
project/path/to/ui.png 

バックエンドの実装は不要なので、まずはフロントだけ作成してください。

		

			
			src/
└── app/
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    └── page.module.css

		

			
			'use client';

import { useState, useEffect } from 'react';
import styles from "./page.module.css";

interface Room {
  id: string;
  name: string;
  status: 'Available' | 'In use';
  capacity: number;
}

export default function Home() {
  const [currentTime, setCurrentTime] = useState('00:00');

  const rooms: Room[] = [
    { id: 'dev-1', name: 'Dev-1', status: 'Available', capacity: 1 },
    { id: 'dev-2', name: 'Dev-2', status: 'In use', capacity: 4 }
  ];

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      setCurrentTime(`${hours}:${minutes}`);
    };

    updateTime();
    const interval = setInterval(updateTime, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <h1>Box Status</h1>
        <div className={styles.time}>{currentTime}</div>
      </header>

      <div className={styles.main}>
        <aside className={styles.sidebar}>
          <h2>Area</h2>
          <div className={styles.areaList}>
            <button
              className={`${styles.areaButton} ${styles.active}`}
            >
              Dev
            </button>
          </div>
        </aside>

        <main className={styles.roomsContainer}>
          <div className={styles.rooms}>
            {rooms.map(room => (
              <div
                key={room.id}
                className={`${styles.roomCard} ${room.status === 'Available' ? styles.available : styles.inUse}`}
              >
                <h3>{room.name}</h3>
                <div className={styles.roomInfo}>
                  <div className={styles.capacity}>
                    <span className={styles.personIcon}>👤</span>
                    <span>{room.capacity}</span>
                  </div>
                  <p className={styles.status}>{room.status}</p>
                </div>
              </div>
            ))}
          </div>
        </main>
      </div>
    </div>
  );
}

		

			
			// 生成時（Home()内で定義されている）
export default function Home() {
  const rooms: Room[] = [
    { id: 'dev-1', name: 'Dev-1', status: 'Available', capacity: 1 },
    { id: 'dev-2', name: 'Dev-2', status: 'In use', capacity: 4 }
  ];

// 変更案（Home()外で初期値を定義）
const INITIAL_ROOMS: Room[] = [
  { id: 'dev-1', name: 'Dev-1', status: 'Available', capacity: 1 },
  { id: 'dev-2', name: 'Dev-2', status: 'In use', capacity: 4 }
];

// stateなどで動的に状態を管理（setXxxxxでデータ更新ができる）
export default function Home() {
  const [rooms, setRooms] = useState<Room[]>(DEFAULT_ROOMS);

		

			
			空き部屋のみ表示、使用中のみ表示のフィルタボタンを実装して
また、人数毎にフィルタしたい    

		

			
			全エリアを表示できるAll、次のエリアを追加して。Meet、Cafe、Hub、Lab
各エリアには次の部屋を割り当て
Meet: 13-16（4人）
Cafe: 17-24（1人）
Hub: 25-32（4人）
Lab: 33-34（1人）、38-39（4人）、40-51（1人）