対応表モード 実装サマリー

新規ファイル
ファイル	内容
LinkModal.tsx	共通コンポーネントとして切り出し（圃場詳細・対応表の両方で使用）
変更ファイル
ファイル	変更内容
fields/page.tsx	[通常] / [対応表] トグルボタンを追加。対応表モードでは圃場名・面積・共済漢字地名・中山間所在地を横並び表示。各行で直接+追加/x解除が可能
fields/[id]/page.tsx	LinkModalのインポートを共通コンポーネントに変更
04_画面設計書.md	画面4に対応表モードのレイアウト・機能要件を追記
06_差異レポート.md	E-2の実装状況を更新
対応表モードの機能
一覧表示: 圃場名 / 面積(反) / 共済（耕地-分筆 + 漢字地名） / 中山間（ID + 所在地）
直接編集: 各セルの[+追加]ボタンで検索モーダルを開いて紐づけ追加
紐づけ解除: 各レコードにホバーで表示される[x]ボタン（確認ダイアログ付き）
複数紐づけ: 同一セル内に改行で表示
圃場名クリック: 詳細画面(/fields/[id])に遷移
http://localhost:3000/fields で「対応表」ボタンを押して確認できます。

frontend/src/app/fields/[id]/page.tsx

@@ -5,113 +5,8 @@ import { useRouter, useParams } from 'next/navigation';
 import { api } from '@/lib/api';
 import { Field, OfficialKyosaiField, OfficialChusankanField } from '@/types';
 import Navbar from '@/components/Navbar';
-import { ArrowLeft, Save, Plus, X, Search } from 'lucide-react';
-
-// --- Link Modal Component ---
-function LinkModal<T extends { id: number }>({
-  title,
-  items,
-  alreadyLinkedIds,
-  renderItem,
-  searchFilter,
-  onAdd,
-  onClose,
-}: {
-  title: string;
-  items: T[];
-  alreadyLinkedIds: Set<number>;
-  renderItem: (item: T) => React.ReactNode;
-  searchFilter: (item: T, query: string) => boolean;
-  onAdd: (ids: number[]) => void;
-  onClose: () => void;
-}) {
-  const [search, setSearch] = useState('');
-  const [selected, setSelected] = useState<Set<number>>(new Set());
-
-  const filtered = useMemo(() => {
-    if (!search.trim()) return items;
-    return items.filter((item) => searchFilter(item, search.trim().toLowerCase()));
-  }, [items, search, searchFilter]);
-
-  const toggle = (id: number) => {
-    setSelected((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white rounded-lg shadow-xl w-full max-w-lg max-h-[80vh] flex flex-col">
-        <div className="flex items-center justify-between p-4 border-b">
-          <h3 className="text-lg font-bold text-gray-900">{title}</h3>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
-            <X className="h-5 w-5" />
-          </button>
-        </div>
-
-        <div className="p-4 border-b">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="検索..."
-              className="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
-              autoFocus
-            />
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-y-auto p-2">
-          {filtered.length === 0 ? (
-            <p className="text-gray-500 text-sm text-center py-4">該当する区画がありません</p>
-          ) : (
-            filtered.map((item) => {
-              const isLinked = alreadyLinkedIds.has(item.id);
-              const isSelected = selected.has(item.id);
-              return (
-                <label
-                  key={item.id}
-                  className={`flex items-start gap-3 p-2 rounded cursor-pointer hover:bg-gray-50 ${
-                    isLinked ? 'opacity-50' : ''
-                  }`}
-                >
-                  <input
-                    type="checkbox"
-                    checked={isSelected}
-                    disabled={isLinked}
-                    onChange={() => toggle(item.id)}
-                    className="mt-1 rounded border-gray-300 text-green-600 focus:ring-green-500"
-                  />
-                  <div className="flex-1 text-sm">{renderItem(item)}</div>
-                </label>
-              );
-            })
-          )}
-        </div>
-
-        <div className="p-4 border-t flex justify-end">
-          <button
-            onClick={() => {
-              onAdd(Array.from(selected));
-              onClose();
-            }}
-            disabled={selected.size === 0}
-            className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-          >
-            選択した区画を追加 ({selected.size}件)
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// --- Main Page ---
+import LinkModal from '@/components/LinkModal';
+import { ArrowLeft, Save, Plus, X } from 'lucide-react';
 export default function EditFieldPage() {
   const router = useRouter();
   const params = useParams();