fix: マジックリンクトークン消費修正・ErrorBoundary追加・テスト修正 (#277)

* feat: シフト閲覧ページにErrorBoundaryを追加し無効セッション時の表示を改善

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: ダッシュボードテストのスタッフフィールド期待値にisOwnerを追加

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore: difit-reviewスキルの設定を更新

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: マジックリンクトークンが既存セッション返却時に消費されない問題を修正

既存セッションを返す場合でもusedAtを設定し、トークンのワンタイム性を保証する。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* docs: スタッフ提出画面のpencilデザインプロンプトを追加

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: yn1323

.claude/skills/difit-review/SKILL.md

@@ -11,8 +11,7 @@ This skill launches a requested git diff in a viewer that is easy for humans to
 This comment mechanism is well suited for code review findings and code explanations.
 Before running commands, choose `<difit-command>` using the following rule:
 
-- If `command -v difit` succeeds, use `difit`.
-- Otherwise, use `npx difit`.
+- use `npx difit`.
 - If falling back to `npx difit` would require network access in a sandboxed environment without network permission, request escalated permissions and user approval before running it.
 
 ## Steps

convex/_generated/ai/ai-files.state.json

@@ -8,6 +8,7 @@
     "convex-migration-helper",
     "convex-performance-audit",
     "convex-quickstart",
-    "convex-setup-auth"
+    "convex-setup-auth",
+    "difit-review"
   ]
 }

convex/dashboard/queries.test.ts

@@ -206,7 +206,7 @@ describe("dashboard/queries", () => {
       // shop に shiftStartTime 等が漏れていないこと
       expect(Object.keys(result?.shop ?? {})).toEqual(["name"]);
       // staffs に shopId, isDeleted が漏れていないこと
-      expect(Object.keys(result?.staffs[0] ?? {}).sort()).toEqual(["_id", "email", "name"]);
+      expect(Object.keys(result?.staffs[0] ?? {}).sort()).toEqual(["_id", "email", "isOwner", "name"]);
     });
   });
 

convex/staffAuth/mutations.ts

@@ -38,7 +38,7 @@ export const verifyToken = mutation({
       };
     }
 
-    // 既存の有効なセッションがあればそれを返す（usedAtは設定しない）
+    // 既存の有効なセッションがあればそれを返す
     const existingSessions = await ctx.db
       .query("sessions")
       .withIndex("by_staffId_recruitmentId", (q) =>
@@ -49,6 +49,7 @@ export const verifyToken = mutation({
     const validSession = existingSessions.find((s) => s.expiresAt > Date.now());
 
     if (validSession) {
+      await ctx.db.patch(magicLink._id, { usedAt: Date.now() });
       return {
         status: "ok" as const,
         sessionToken: validSession.sessionToken,

doc/plans/2026-04-06_pencilプロンプト_スタッフ提出画面.md

@@ -0,0 +1,160 @@
+# pencil.dev プロンプト：スタッフ提出画面
+
+## 背景・要件
+
+### この画面について
+YPSのMVP 3ページ構成の最後の1ページ。管理者（店長）が作成した「シフト募集」に対して、スタッフがシフト希望を提出する画面。
+
+### ユーザー
+- 学生バイト、パート主婦、フリーター
+- **ほぼ確実にスマホ**から操作（PCは想定しない）
+- YPSにアカウントは持っていない。メールのマジックリンクからアクセス
+- 面倒だと出さない → 店長がLINEで催促 → YPSの価値が崩壊する
+- **この画面の体験がYPS全体の成否を決める**
+
+### アクセス方法
+店長がシフト募集を作成 → スタッフにメール送信（マジックリンク付き） → スタッフがリンクをタップ → この画面に到達
+
+### マジックリンク有効期限
+提出締切日まで有効。締切後はアクセスしても提出・修正不可。
+
+### 画面の4状態
+スタッフが同じリンクを開いたとき、状態によって表示が変わる：
+- **A. 未提出＋締切前** → 全日休みデフォルト、入力して提出
+- **B. 提出済み＋締切前** → 前回の回答がプリフィル済み、修正して再提出可能
+- **C. 提出済み＋締切後** → 前回の回答を表示、編集不可（閲覧のみ）
+- **D. 未提出＋締切後** → 締切超過メッセージ、操作不可
+
+### 提出後に修正できる理由
+修正不可だと「すみません水曜やっぱ無理です」→ LINEで店長に連絡 → 店長が手修正、となりExcel時代と変わらない。スタッフ自身で修正できることで店長の負担を減らす。
+
+---
+
+## 入力仕様
+
+### 入力内容
+各日に対して：
+- **出勤OK** → 開始時間・終了時間（30分単位、selectで選択）
+- **出られない** → 休み
+
+### デフォルト
+- **全日「休み」がデフォルト**
+- 理由①: 出し忘れたスタッフが「全日出勤OK」扱いになる事故を防ぐ
+- 理由②: 未提出＝いないものとして扱える安全設計
+
+### 時間の初期値
+出勤ONにしたとき、開始・終了時間はその店舗のシフト時間帯（例: 9:00〜22:00）がデフォルトで入る。大半のスタッフはデフォのまま or 微調整だけで済む。
+
+### 全休み提出
+全日休みでも提出可能。「今週全部出られません」も立派な回答。田中さんにとって未提出と全休みは意味が違う。
+
+### 対応期間
+募集期間は管理者が任意に設定するため、7日〜31日の可変。
+
+---
+
+## インタラクション設計
+
+### カードUI
+- 日数分のカードが縦に並ぶ
+- 1カード = 1行固定高（休みでも出勤でも同じ高さ）
+- **レイアウトシフト（カード位置のガタつき）を絶対に起こさない**
+
+### 出勤ON操作
+- 休みカードをタップ → 出勤ONになり、同じ行内にselectボックス（開始・終了）が出る
+- 1タップで完了。BottomSheetやモーダルは不要（selectボックスなのでキーボードも不要）
+
+### 出勤→休みに戻す操作
+- 日付タップでは休みに戻らない（**一方通行**）
+- カード右端の×ボタンをタップすることでのみ休みに戻る
+- 理由: 誤タップで入力した時間が消える事故を防ぐ（破壊的操作には摩擦を入れる）
+
+### 提出完了
+- 提出ボタンタップ → 完了画面（チェックマークアイコン + 提出内容サマリー）
+- 「内容を修正する」ボタンで入力画面に戻れる
+
+---
+
+## 画面パターン（4 + 1 = 5画面）
+
+### 画面1：未提出＋締切前（状態A）
+
+スマホレイアウト（幅375px程度）。
+
+**ヘッダー**
+- 1行目（小さめ）: 店舗名「居酒屋さくら」
+- 2行目（大きめ）: 「シフト希望を提出」
+
+**期間情報エリア**
+- 左: 募集期間「4/7 (月) 〜 4/13 (日)」+ 提出締切「提出締切: 4/4 (金)」
+- 右: ステータスバッジ「未提出」（warning系の色）
+
+**カード一覧（7日分）**
+- 全カードが「休み」状態
+- 各カード: 左に日付+曜日、右に「休み」バッジ（グレー系）
+- 土曜はblue系テキスト、日曜はred系テキスト
+- **1枚だけ出勤ON状態にして、selectボックスと×ボタンが見える状態で描画**（操作後のイメージが分かるように）
+
+**提出ボタン**
+- 「提出する」プライマリボタン（teal系）
+- ボタン下に補助テキスト「出勤する日をタップしてください」
+
+### 画面2：提出済み＋締切前（状態B）
+
+画面1をベースに以下を変更：
+
+- ステータスバッジ: 「提出済み」（success系の色）
+- カード一覧: 前回の提出内容がプリフィルされた状態（例: 3日分が出勤ON、4日分が休み）
+- 提出ボタン: 「修正して提出する」（teal系）
+- ボタン下の補助テキスト: なし or 「変更したい日をタップしてください」
+
+### 画面3：提出済み＋締切後（状態C）
+
+画面2をベースに以下を変更：
+
+- ステータスバッジ: 「提出済み」（success系）
+- カード一覧: 前回の提出内容を表示、**selectなし、×ボタンなし、タップ不可**
+  - 出勤日: 日付 + 時間テキスト（例「9:00 〜 18:00」teal系テキスト）
+  - 休み日: 日付 + 「休み」バッジ
+- 提出ボタン: なし
+- 代わりに上部にインフォメッセージ「提出締切を過ぎたため変更できません」（info系の色）
+
+### 画面4：未提出＋締切後（状態D）
+
+最もシンプルな画面。
+
+**ヘッダー**: 画面1と同じ
+
+**コンテンツ**
+- 中央にアイコン（時計やカレンダーなど）
+- メッセージ「提出締切を過ぎています」
+- サブテキスト「シフトの希望がある場合は、お店に直接ご連絡ください。」
+- カードなし、ボタンなし
+
+### 画面5：提出完了画面
+
+提出ボタンを押した直後の画面。
+
+**ヘッダー**: 画面1と同じ
+
+**コンテンツ（中央寄せ）**
+- チェックマークアイコン（teal系の丸背景 + 白チェック）
+- 「提出しました」テキスト（大きめ）
+- 「シフトが確定したらメールでお知らせします」サブテキスト
+
+**提出内容サマリー（カード形式）**
+- 全日分の日付と時間 or 休みを一覧表示
+- 出勤日は時間をteal系テキストで表示
+- 休みはグレー系テキスト
+
+**ボタン**
+- 「内容を修正する」アウトラインボタン
+
+---
+
+## 共通指示
+- カラー: プライマリ teal系、warning amber/yellow系、danger red系、info blue系
+- フォント: 日本語対応
+- **スマホレイアウトのみ（幅375px程度）**。PC版は不要
+- 各画面をフレーム分けして並べる
+- カードの高さは状態によらず統一されていること（レイアウトシフト防止のため）

src/components/ui/ErrorBoundary/index.stories.tsx

@@ -0,0 +1,34 @@
+import { Text } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ErrorBoundary } from ".";
+
+function ThrowingComponent({ message }: { message: string }): never {
+  throw new Error(message);
+}
+
+const meta = {
+  title: "ui/ErrorBoundary",
+  component: ErrorBoundary,
+} satisfies Meta<typeof ErrorBoundary>;
+export default meta;
+
+export const NoError: StoryObj<typeof meta> = {
+  args: {
+    fallback: <Text>エラーが発生しました</Text>,
+    children: <Text>正常にレンダリングされています</Text>,
+  },
+};
+
+export const WithStaticFallback: StoryObj<typeof meta> = {
+  args: {
+    fallback: <Text color="red.500">エラーが発生しました。再度お試しください。</Text>,
+    children: <ThrowingComponent message="Test error" />,
+  },
+};
+
+export const WithRenderFunctionFallback: StoryObj<typeof meta> = {
+  args: {
+    fallback: (error: Error) => <Text color="red.500">エラー: {error.message}</Text>,
+    children: <ThrowingComponent message="Something went wrong" />,
+  },
+};

src/components/ui/ErrorBoundary/index.tsx

@@ -0,0 +1,29 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  fallback: ReactNode | ((error: Error) => ReactNode);
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+};
+
+type State = { error: Error | null };
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { error: null };
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.props.onError?.(error, errorInfo);
+  }
+
+  render(): ReactNode {
+    if (this.state.error) {
+      const { fallback } = this.props;
+      return typeof fallback === "function" ? fallback(this.state.error) : fallback;
+    }
+    return this.props.children;
+  }
+}

src/routes/_unregistered/shifts.view.tsx

@@ -8,6 +8,7 @@ import type { Id } from "@/convex/_generated/dataModel";
 import { ExpiredView } from "@/src/components/features/StaffView/ExpiredView";
 import { ShiftViewPage } from "@/src/components/features/StaffView/ShiftViewPage";
 import { StaffLayout } from "@/src/components/templates/StaffLayout";
+import { ErrorBoundary } from "@/src/components/ui/ErrorBoundary";
 import { FullPageSpinner } from "@/src/components/ui/FullPageSpinner";
 
 type SessionInfo = {
@@ -38,6 +39,10 @@ function storeSession(recruitmentId: string, sessionToken: string): void {
   localStorage.setItem(`yps_session_${recruitmentId}`, JSON.stringify({ sessionToken, recruitmentId }));
 }
 
+function clearSession(recruitmentId: string): void {
+  localStorage.removeItem(`yps_session_${recruitmentId}`);
+}
+
 export const Route = createFileRoute("/_unregistered/shifts/view")({
   validateSearch: (search: Record<string, unknown>) => ({
     token: (search.token as string) || undefined,
@@ -117,7 +122,22 @@ function ShiftViewRoute() {
     return <FullPageSpinner />;
   }
 
-  return <ShiftViewContent session={session} />;
+  return (
+    <ErrorBoundary
+      fallback={
+        <StaffLayout shopName="シフト閲覧">
+          <ExpiredView recruitmentId={session.recruitmentId} />
+        </StaffLayout>
+      }
+      onError={(error) => {
+        if (error.message?.includes("ArgumentValidationError")) {
+          clearSession(session.recruitmentId);
+        }
+      }}
+    >
+      <ShiftViewContent session={session} />
+    </ErrorBoundary>
+  );
 }
 
 function ShiftViewContent({ session }: { session: SessionInfo }) {