feat(calendar): replace list view with month/week/day grid + date detail dialog

カレンダー画面を一覧表示から実際のカレンダーグリッドへ変更。

- lib/calendar/grid.ts: 月グリッド/週/時間グリッド/取得範囲(rangeForView)の純粋な日付ヘルパー (+22 unit tests)
- components/calendar/: CalendarView(月/週/日 切替・prev/next/今日)・MonthView(truncateチップ)・WeekView・DayView(時間グリッド+終日)・EventDetailDialog(詳細・フォーカス管理)・sourceColors
- page.tsx: view/date searchParamsから範囲を計算しServer Componentで取得、CalendarViewへ渡す
- e2e: 表示切替・詳細ダイアログ・ナビステップ(週=7日/日=1日)を追加

components/calendar/CalendarView.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import type { CalendarEventView } from '@/services/ScheduleService';
+import {
+  getMonthGrid,
+  getWeekDays,
+  parseISODate,
+  stepAnchor,
+  toISODate,
+  eventsOnDay,
+  type CalendarViewMode,
+} from '@/lib/calendar/grid';
+import { WEEKDAY_LABELS } from '@/components/calendar/sourceColors';
+import { MonthView } from '@/components/calendar/MonthView';
+import { WeekView } from '@/components/calendar/WeekView';
+import { DayView } from '@/components/calendar/DayView';
+import { EventDetailDialog } from '@/components/calendar/EventDetailDialog';
+
+const VIEW_LABELS: { mode: CalendarViewMode; label: string }[] = [
+  { mode: 'month', label: '月' },
+  { mode: 'week', label: '週' },
+  { mode: 'day', label: '日' },
+];
+
+/**
+ * カレンダーUIのクライアントコンテナ。
+ * 表示モード切替・前/次/今日ナビ・詳細ダイアログを管理し、
+ * データ取得はURL searchParams経由でServer Componentに委ねる。
+ */
+export function CalendarView({
+  projectId,
+  events,
+  view,
+  anchorDate,
+  todayKey,
+}: {
+  projectId: number;
+  events: CalendarEventView[];
+  view: CalendarViewMode;
+  anchorDate: string;
+  todayKey: string;
+}) {
+  const router = useRouter();
+  const [selectedDateKey, setSelectedDateKey] = useState<string | null>(null);
+  const anchor = parseISODate(anchorDate);
+
+  function navigate(nextView: CalendarViewMode, nextAnchor: Date) {
+    const params = new URLSearchParams({
+      view: nextView,
+      date: toISODate(nextAnchor),
+    });
+    router.push(`/projects/${projectId}/calendar?${params.toString()}`);
+  }
+
+  function changeView(nextView: CalendarViewMode) {
+    navigate(nextView, anchor);
+  }
+
+  function goPrev() {
+    navigate(view, stepAnchor(view, anchor, -1));
+  }
+
+  function goNext() {
+    navigate(view, stepAnchor(view, anchor, 1));
+  }
+
+  function goToday() {
+    navigate(view, new Date());
+  }
+
+  function openDetail(dateKey: string) {
+    setSelectedDateKey(dateKey);
+  }
+
+  const title = buildTitle(view, anchor);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h2
+          className="text-xl font-bold text-gray-800"
+          data-testid="calendar-title"
+        >
+          {title}
+        </h2>
+        <div className="flex items-center gap-2">
+          <div className="flex overflow-hidden rounded border">
+            {VIEW_LABELS.map((v) => (
+              <button
+                key={v.mode}
+                type="button"
+                onClick={() => changeView(v.mode)}
+                className={`px-3 py-1 text-sm ${
+                  view === v.mode
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-white text-gray-600 hover:bg-gray-100'
+                }`}
+                data-testid={`calendar-view-${v.mode}`}
+              >
+                {v.label}
+              </button>
+            ))}
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={goPrev}
+              className="rounded border bg-white px-2 py-1 text-sm text-gray-600 hover:bg-gray-100"
+              aria-label="前へ"
+              data-testid="calendar-prev"
+            >
+              ‹
+            </button>
+            <button
+              type="button"
+              onClick={goToday}
+              className="rounded border bg-white px-3 py-1 text-sm text-gray-600 hover:bg-gray-100"
+              data-testid="calendar-today"
+            >
+              今日
+            </button>
+            <button
+              type="button"
+              onClick={goNext}
+              className="rounded border bg-white px-2 py-1 text-sm text-gray-600 hover:bg-gray-100"
+              aria-label="次へ"
+              data-testid="calendar-next"
+            >
+              ›
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {view === 'month' && (
+        <MonthView
+          events={events}
+          weeks={getMonthGrid(anchor.getFullYear(), anchor.getMonth())}
+          anchorMonth={anchor.getMonth()}
+          todayKey={todayKey}
+          onSelectDate={openDetail}
+        />
+      )}
+      {view === 'week' && (
+        <WeekView
+          events={events}
+          days={getWeekDays(anchor)}
+          todayKey={todayKey}
+          onSelectDate={openDetail}
+        />
+      )}
+      {view === 'day' && (
+        <DayView
+          day={anchor}
+          events={events}
+          todayKey={todayKey}
+          onSelectDate={openDetail}
+        />
+      )}
+
+      {selectedDateKey && (
+        <EventDetailDialog
+          date={parseISODate(selectedDateKey)}
+          events={eventsOnDay(events, selectedDateKey)}
+          onClose={() => setSelectedDateKey(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+function buildTitle(view: CalendarViewMode, anchor: Date): string {
+  if (view === 'month') {
+    return `${anchor.getFullYear()}年${anchor.getMonth() + 1}月`;
+  }
+  if (view === 'week') {
+    const days = getWeekDays(anchor);
+    const s = days[0];
+    const e = days[6];
+    return `${s.getFullYear()}年${s.getMonth() + 1}月${s.getDate()}日 〜 ${e.getMonth() + 1}月${e.getDate()}日`;
+  }
+  return `${anchor.getFullYear()}年${anchor.getMonth() + 1}月${anchor.getDate()}日(${WEEKDAY_LABELS[anchor.getDay()]})`;
+}

components/calendar/DayView.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import type { CalendarEventView } from '@/services/ScheduleService';
+import {
+  eventsOnDay,
+  eventHour,
+  formatTime,
+  getDayHours,
+  toISODate,
+} from '@/lib/calendar/grid';
+import {
+  SOURCE_COLORS,
+  SOURCE_CHIP_BORDER,
+  WEEKDAY_LABELS,
+} from '@/components/calendar/sourceColors';
+
+/**
+ * 日表示(時間グリッド)。0:00〜23:00 を1時間刻みで表示し、
+ * 時刻付きイベントを該当時刻行に、終日(日付のみ)イベントを上部に配置する。
+ */
+export function DayView({
+  day,
+  events,
+  todayKey,
+  onSelectDate,
+}: {
+  day: Date;
+  events: CalendarEventView[];
+  todayKey: string;
+  onSelectDate: (dateKey: string) => void;
+}) {
+  const key = toISODate(day);
+  const dayEvents = eventsOnDay(events, key);
+  const allDay = dayEvents.filter((e) => eventHour(e.startAt) === null);
+  const timed = dayEvents.filter((e) => eventHour(e.startAt) !== null);
+  const hours = getDayHours();
+  const isToday = key === todayKey;
+
+  return (
+    <div className="rounded-lg border bg-white">
+      <div className="flex items-center justify-between border-b p-3">
+        <button
+          type="button"
+          onClick={() => onSelectDate(key)}
+          className="text-left"
+        >
+          <p className="text-lg font-bold text-gray-800">
+            {day.getMonth() + 1}月{day.getDate()}日(
+            {WEEKDAY_LABELS[day.getDay()]})
+          </p>
+        </button>
+        {isToday && (
+          <span className="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700">
+            今日
+          </span>
+        )}
+      </div>
+
+      {allDay.length > 0 && (
+        <div
+          className="border-b bg-gray-50 p-2"
+          data-testid="calendar-all-day-section"
+        >
+          <p className="mb-1 text-xs font-medium text-gray-500">終日</p>
+          <div className="flex flex-wrap gap-1">
+            {allDay.map((e) => (
+              <button
+                key={e.key}
+                type="button"
+                onClick={() => onSelectDate(key)}
+                title={e.title}
+                className={`max-w-full truncate rounded border px-2 py-0.5 text-xs ${
+                  SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
+                } ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
+                data-testid={`calendar-event-${e.key}`}
+              >
+                {e.title}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="max-h-[600px] overflow-y-auto">
+        {hours.map((h) => {
+          const hourEvents = timed.filter((e) => eventHour(e.startAt) === h);
+          return (
+            <div
+              key={h}
+              className="flex border-b last:border-b-0"
+              data-testid={`calendar-hour-${String(h).padStart(2, '0')}`}
+            >
+              <div className="w-16 shrink-0 border-r bg-gray-50 p-1 text-right text-xs text-gray-400">
+                {String(h).padStart(2, '0')}:00
+              </div>
+              <div className="flex-1 p-1">
+                {hourEvents.map((e) => (
+                  <button
+                    key={e.key}
+                    type="button"
+                    onClick={() => onSelectDate(key)}
+                    title={e.title}
+                    className={`mb-1 block w-full truncate rounded border px-2 py-1 text-left text-xs ${
+                      SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
+                    } ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
+                    data-testid={`calendar-event-${e.key}`}
+                  >
+                    <span className="font-mono text-[10px] opacity-70">
+                      {formatTime(e.startAt)}
+                    </span>{' '}
+                    {e.title}
+                  </button>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/calendar/EventDetailDialog.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import type { CalendarEventView } from '@/services/ScheduleService';
+import { formatTime } from '@/lib/calendar/grid';
+import {
+  SOURCE_COLORS,
+  SOURCE_LABELS,
+} from '@/components/calendar/sourceColors';
+
+/**
+ * 指定日のイベント詳細ダイアログ。
+ * セル内ではtruncateされるタイトルも、ここでは全文と説明を表示する。
+ * 開閉時にフォーカスをダイアログへ移し、閉じたら元の要素へ戻す。
+ */
+export function EventDetailDialog({
+  date,
+  events,
+  onClose,
+}: {
+  date: Date;
+  events: CalendarEventView[];
+  onClose: () => void;
+}) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const previouslyFocused = document.activeElement as HTMLElement | null;
+    dialogRef.current?.focus();
+    return () => {
+      previouslyFocused?.focus?.();
+    };
+  }, []);
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const dateLabel = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 p-4"
+      onClick={onClose}
+      data-testid="calendar-detail-backdrop"
+    >
+      <div
+        ref={dialogRef}
+        tabIndex={-1}
+        className="mt-16 w-full max-w-lg rounded-lg bg-white shadow-xl focus:outline-none"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label={`${dateLabel}のイベント`}
+        data-testid="calendar-detail-dialog"
+      >
+        <div className="flex items-center justify-between border-b p-4">
+          <h2 className="text-lg font-bold text-gray-800">{dateLabel}</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+            aria-label="閉じる"
+            data-testid="calendar-detail-close"
+          >
+            ×
+          </button>
+        </div>
+        <div className="max-h-[60vh] space-y-3 overflow-y-auto p-4">
+          {events.length === 0 ? (
+            <p className="text-sm text-gray-400">
+              この日のイベントはありません。
+            </p>
+          ) : (
+            events.map((e) => (
+              <div
+                key={e.key}
+                className="rounded border border-gray-200 p-3"
+                data-testid={`calendar-detail-${e.key}`}
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <p className="font-medium text-gray-800 break-words">
+                    {e.title}
+                  </p>
+                  <span
+                    className={`shrink-0 rounded px-2 py-0.5 text-xs ${
+                      SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
+                    }`}
+                  >
+                    {SOURCE_LABELS[e.source] ?? e.source}
+                  </span>
+                </div>
+                <p className="mt-1 text-xs text-gray-500">
+                  {formatTime(e.startAt)}
+                  {e.endAt ? ` 〜 ${formatTime(e.endAt)}` : ''}
+                </p>
+                {e.description && (
+                  <p className="mt-2 whitespace-pre-wrap text-sm text-gray-600">
+                    {e.description}
+                  </p>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

components/calendar/MonthView.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import type { CalendarEventView } from '@/services/ScheduleService';
+import { eventsOnDay, toISODate } from '@/lib/calendar/grid';
+import {
+  SOURCE_COLORS,
+  SOURCE_CHIP_BORDER,
+  WEEKDAY_LABELS,
+} from '@/components/calendar/sourceColors';
+
+const MAX_VISIBLE_CHIPS = 3;
+
+/**
+ * 月表示グリッド。日曜始まりの7列グリッドで各日にイベントチップを表示する。
+ * 長いタイトルは truncate し、3件を超える分は「+N件」でまとめる。
+ */
+export function MonthView({
+  events,
+  weeks,
+  anchorMonth,
+  todayKey,
+  onSelectDate,
+}: {
+  events: CalendarEventView[];
+  weeks: Date[][];
+  anchorMonth: number;
+  todayKey: string;
+  onSelectDate: (dateKey: string) => void;
+}) {
+  return (
+    <div className="overflow-hidden rounded-lg border bg-white">
+      <div className="grid grid-cols-7 border-b bg-gray-50 text-center text-xs font-medium text-gray-500">
+        {WEEKDAY_LABELS.map((w) => (
+          <div key={w} className="py-2">
+            {w}
+          </div>
+        ))}
+      </div>
+      <div>
+        {weeks.map((week, wi) => (
+          <div key={wi} className="grid grid-cols-7 border-b last:border-b-0">
+            {week.map((day) => {
+              const key = toISODate(day);
+              const dayEvents = eventsOnDay(events, key);
+              const inMonth = day.getMonth() === anchorMonth;
+              const isToday = key === todayKey;
+              const visible = dayEvents.slice(0, MAX_VISIBLE_CHIPS);
+              const hidden = dayEvents.length - visible.length;
+              return (
+                <div
+                  key={key}
+                  className={`min-h-[110px] border-r border-t p-1 last:border-r-0 ${
+                    inMonth ? 'bg-white' : 'bg-gray-50'
+                  }`}
+                  data-testid={`calendar-day-${key}`}
+                >
+                  <button
+                    type="button"
+                    onClick={() => onSelectDate(key)}
+                    className={`flex h-6 w-6 items-center justify-center rounded-full text-xs ${
+                      isToday
+                        ? 'bg-blue-600 font-bold text-white'
+                        : inMonth
+                          ? 'text-gray-700 hover:bg-gray-100'
+                          : 'text-gray-300 hover:bg-gray-100'
+                    }`}
+                    aria-label={`${key} の詳細を開く`}
+                  >
+                    {day.getDate()}
+                  </button>
+                  <div className="mt-1 space-y-0.5">
+                    {visible.map((e) => (
+                      <button
+                        key={e.key}
+                        type="button"
+                        onClick={() => onSelectDate(key)}
+                        title={e.title}
+                        className={`block w-full truncate rounded border px-1 text-left text-xs ${
+                          SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
+                        } ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
+                        data-testid={`calendar-event-${e.key}`}
+                      >
+                        {e.title}
+                      </button>
+                    ))}
+                    {hidden > 0 && (
+                      <button
+                        type="button"
+                        onClick={() => onSelectDate(key)}
+                        aria-label={`${key}の残り${hidden}件を開く`}
+                        className="block w-full truncate text-left text-xs text-gray-400 hover:text-gray-600"
+                      >
+                        +{hidden}件
+                      </button>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

components/calendar/WeekView.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import type { CalendarEventView } from '@/services/ScheduleService';
+import { eventsOnDay, formatTime, toISODate } from '@/lib/calendar/grid';
+import {
+  SOURCE_COLORS,
+  SOURCE_CHIP_BORDER,
+  WEEKDAY_LABELS,
+} from '@/components/calendar/sourceColors';
+
+/**
+ * 週表示。日〜土の7日を並べ、各日のイベントを開始時刻付きで表示する。
+ */
+export function WeekView({
+  events,
+  days,
+  todayKey,
+  onSelectDate,
+}: {
+  events: CalendarEventView[];
+  days: Date[];
+  todayKey: string;
+  onSelectDate: (dateKey: string) => void;
+}) {
+  return (
+    <div className="overflow-hidden rounded-lg border bg-white">
+      <div className="grid grid-cols-7 border-b bg-gray-50 text-center text-xs font-medium text-gray-500">
+        {days.map((d) => {
+          const key = toISODate(d);
+          return (
+            <button
+              key={key}
+              type="button"
+              onClick={() => onSelectDate(key)}
+              className="py-2 hover:bg-gray-100"
+              data-testid={`calendar-weekday-${key}`}
+            >
+              <div className="text-gray-500">{WEEKDAY_LABELS[d.getDay()]}</div>
+              <div
+                className={`mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-sm ${
+                  key === todayKey
+                    ? 'bg-blue-600 font-bold text-white'
+                    : 'text-gray-700'
+                }`}
+              >
+                {d.getDate()}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+      <div className="grid grid-cols-7">
+        {days.map((d) => {
+          const key = toISODate(d);
+          const dayEvents = eventsOnDay(events, key);
+          return (
+            <div
+              key={key}
+              className="min-h-[400px] border-r p-1 last:border-r-0"
+              data-testid={`calendar-week-cell-${key}`}
+            >
+              <div className="space-y-1">
+                {dayEvents.length === 0 ? (
+                  <p className="px-1 py-1 text-xs text-gray-300">-</p>
+                ) : (
+                  dayEvents.map((e) => (
+                    <button
+                      key={e.key}
+                      type="button"
+                      onClick={() => onSelectDate(key)}
+                      title={e.title}
+                      className={`block w-full truncate rounded border px-1 py-0.5 text-left text-xs ${
+                        SOURCE_COLORS[e.source] ?? 'bg-gray-100 text-gray-600'
+                      } ${SOURCE_CHIP_BORDER[e.source] ?? 'border-gray-200'}`}
+                      data-testid={`calendar-event-${e.key}`}
+                    >
+                      <span className="font-mono text-[10px] opacity-70">
+                        {formatTime(e.startAt)}
+                      </span>{' '}
+                      {e.title}
+                    </button>
+                  ))
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/calendar/sourceColors.ts

@@ -0,0 +1,28 @@
+/** カレンダーイベントの来源ごとの色とラベル。 */
+export const SOURCE_COLORS: Record<string, string> = {
+  event: 'bg-blue-100 text-blue-700',
+  milestone: 'bg-purple-100 text-purple-700',
+  todo: 'bg-yellow-100 text-yellow-700',
+};
+
+export const SOURCE_CHIP_BORDER: Record<string, string> = {
+  event: 'border-blue-200',
+  milestone: 'border-purple-200',
+  todo: 'border-yellow-200',
+};
+
+export const SOURCE_LABELS: Record<string, string> = {
+  event: 'イベント',
+  milestone: 'マイルストーン',
+  todo: 'ToDo',
+};
+
+export const WEEKDAY_LABELS = [
+  '日',
+  '月',
+  '火',
+  '水',
+  '木',
+  '金',
+  '土',
+] as const;