Companies ページを Fjord direction デザインで再実装#192
Conversation
Claude Design から handoff された Fjord direction (深いティール + Zen Maru
Gothic + M PLUS Rounded 1c の和文丸ゴシック基調) を Companies ページに
適用する。
- 視覚言語は当該ページ内に閉じる:
- 全スタイルを CSS Modules (Companies.module.css) でスコープ化
- フォントは next/font/google を companies/layout.tsx で CSS 変数化し
Companies ページのツリー配下にのみ提供
- 既存 DB スキーマ (id/name/website/memo) はそのまま流用し、設計に存在し
実 DB にない項目 (業種・所在 / 状況 / 公開求人数 / 進行中候補数 /
最終接触日) は "—" プレースホルダーで描画
- 検索ボックス / フィルタチップは UI のみ (機能未配線)
他ページ・グローバル CSS・Tailwind 設定には影響なし。
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
概要企業ページの UI をTailwind ベースの実装から CSS モジュール駆動の新しい設計に完全に書き換えた変更です。Google フォント統合、再設計されたテーブル UI、検索/フィルター ツールバーの追加、企業行セルと ステータス バッジシステムの実装が含まれます。 変更内容企業ページ UI の完全リデザイン
評価されるコード レビュー工数🎯 3 (中程度) | ⏱️ ~20 分 詩
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Updates to Preview Branch (feat/companies-fjord-direction) ↗︎
Tasks are run on every commit but only new migration files are pushed.
View logs for this Workflow Run ↗︎. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/companies/layout.tsx`:
- Around line 5-6: The font configuration currently sets subsets: ["latin"] for
the Zen_Maru_Gothic and M_PLUS_Rounded_1c font declarations; update those
declarations to include the Japanese glyphs by changing subsets to ["latin",
"japanese"] so Japanese text renders correctly (refer to the Zen_Maru_Gothic and
M_PLUS_Rounded_1c font config objects where subsets: ["latin"] and weight:
["400","500","700","900"] are defined).
In `@src/components/Companies.tsx`:
- Line 71: The search input in the Companies component lacks an accessible
label; update the <input> (in Companies.tsx) to include an accessible label by
either wrapping it with a <label> element (use a visually-hidden class if you
don't want it visible) or by adding a clear aria-label attribute (e.g.,
aria-label="企業名・業種・担当者で検索"); ensure the label text matches the placeholder
intent and remove ambiguity for assistive technologies.
- Around line 21-22: The data fetch in the Companies component currently ignores
Supabase errors; change the call to destructure error (const { data, error } =
await supabase.from("companies").select("*")) and branch on it: when error is
present, call an appropriate logger (e.g., console.error or a provided logger)
and update component state to reflect the failure (e.g., set an error state or
setCompanies([]) and show a UI message), otherwise setCompanies(data) as before;
update any related render logic to display the error state to the user.
- Around line 32-106: The Companies.tsx component uses CSS Modules (styles.*)
but must follow the src/components convention of Tailwind + shadcn/ui; replace
CSS Module classes and structure with Tailwind utility classes and shadcn
components (e.g., use shadcn Button, Input, Table/Sheet primitives where
appropriate) and remove reliance on styles.wrapper, styles.inner,
styles.pageHead, styles.actions, styles.toolbar, styles.panel, styles.list;
ensure the CSV and Add buttons use shadcn Button variants, the search input uses
shadcn Input, and CompanyRow remains the row renderer (keep CompanyRow
key={c.id} company={c}); run npx shadcn to add any missing components and ensure
tailwindcss-animate and `@tailwindcss/typography` plugins are enabled in the
project config.
- Around line 43-45: The CSV出力 and Edit buttons in the Companies component are
visible but have no handlers; update the JSX so these buttons are not
interactive until implemented by either (a) conditionally rendering them only
when the corresponding handler exists (e.g. render CSV button only if a
handleCsvExport/onCsvExport prop or function is present) or (b) rendering them
in a disabled state: add disabled attribute, aria-disabled="true", a descriptive
title (e.g. "未実装 — 機能は準備中です"), and a visual disabled class (e.g.
styles.disabled) to the elements currently using classNames `${styles.btn}
${styles.btnGhost}` and the Edit button block around lines 136-151 so users see
they are intentionally inactive. Ensure to remove any onClick stubs if present
or gate onClick calls behind the same handler existence check.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e93b39df-41bb-4a1c-8673-643a7a8c73da
📒 Files selected for processing (3)
src/app/companies/layout.tsxsrc/components/Companies.module.csssrc/components/Companies.tsx
| subsets: ["latin"], | ||
| weight: ["400", "500", "700", "900"], |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
For next/font/google in current Next.js, what subsets are supported by Zen_Maru_Gothic and M_PLUS_Rounded_1c, and does subsets:["latin"] load Japanese glyphs?
💡 Result:
Next.js current (next/font/google) “subsets” option: it preloads only the specified Google Fonts subsets; it’s used for preloading, and you can choose which subset names to preload (for example subsets: ['latin']).[1] Zen_Maru_Gothic supported subsets: [cyrillic, greek, japanese, latin, latin-ext]. (From the font package listing of Zen Maru Gothic subsets.)[2] M_PLUS_Rounded_1c supported subsets: [cyrillic, cyrillic-ext, greek, greek-ext, hebrew, japanese, latin, latin-ext, vietnamese]. (From the font package listing of M PLUS Rounded 1c subsets.)[3] Does subsets:["latin"] load Japanese glyphs? No—based on how Next.js documents subsets as preload subset “names” (e.g. ['latin']) and given that Japanese glyphs belong to the 'japanese' subset (both fonts list 'japanese' as a distinct subset). Therefore, when you preload only the 'latin' subset, you should not expect Japanese glyphs to be included/loaded by that subset selection.[1][2][3]
Citations:
- 1: https://nextjs.org/docs/api-reference/next/font
- 2: https://www.npmjs.com/package/@fontsource/zen-maru-gothic?activeTab=readme
- 3: https://registry.npmjs.org/%40fontsource%2Fm-plus-rounded-1c
subsets に "japanese" を追加してください
ページが日本語ベースのため、フォント設定で subsets: ["latin"] のみでは日本語グリフが読み込まれません。Zen_Maru_Gothic と M_PLUS_Rounded_1c は両方とも "japanese" サブセットに対応しているため、subsets: ["latin", "japanese"] に変更する必要があります。現状ではテキストが期待通りに表示されません。
行: 5-6、12-13
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/companies/layout.tsx` around lines 5 - 6, The font configuration
currently sets subsets: ["latin"] for the Zen_Maru_Gothic and M_PLUS_Rounded_1c
font declarations; update those declarations to include the Japanese glyphs by
changing subsets to ["latin", "japanese"] so Japanese text renders correctly
(refer to the Zen_Maru_Gothic and M_PLUS_Rounded_1c font config objects where
subsets: ["latin"] and weight: ["400","500","700","900"] are defined).
| <div className={styles.wrapper}> | ||
| <div className={styles.inner}> | ||
| <div className={styles.pageHead}> | ||
| <div> | ||
| <div className={styles.tag}>COMPANIES</div> | ||
| <h1>企業</h1> | ||
| <p className={styles.sub}> | ||
| 紹介先としてご縁のある {count} 社。最近のやりとりと、現在お預かりしている求人の数をひと目で。 | ||
| </p> | ||
| </div> | ||
| <div className={styles.actions}> | ||
| <button type="button" className={`${styles.btn} ${styles.btnGhost}`}> | ||
| CSV出力 | ||
| </button> | ||
| <Link href="/companies/new" className={`${styles.btn} ${styles.btnPrimary}`}> | ||
| <svg | ||
| width="14" | ||
| height="14" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth="2.2" | ||
| strokeLinecap="round" | ||
| > | ||
| <path d="M12 5v14M5 12h14" /> | ||
| </svg> | ||
| 企業を追加 | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="overflow-x-auto"> | ||
| <div className="align-middle inline-block min-w-full"> | ||
| <div className="shadow overflow-hidden"> | ||
| <table className="table-fixed min-w-full divide-y divide-gray-200"> | ||
| <thead className="bg-gray-100"> | ||
| <tr> | ||
| <th | ||
| scope="col" | ||
| className="p-4 text-left text-xs font-medium text-gray-500 uppercase" | ||
| > | ||
| Id | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="p-4 text-left text-xs font-medium text-gray-500 uppercase" | ||
| > | ||
| Name | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="p-4 text-left text-xs font-medium text-gray-500 uppercase" | ||
| > | ||
| Website | ||
| </th> | ||
| <th | ||
| scope="col" | ||
| className="p-4 text-left text-xs font-medium text-gray-500 uppercase" | ||
| > | ||
| Memo | ||
| </th> | ||
| <th scope="col" className="p-4"></th> | ||
| </tr> | ||
| </thead> | ||
| <tbody className="bg-white divide-y divide-gray-200"> | ||
| {companies?.map((company) => { | ||
| return <Company key={company.id} company={company} />; | ||
| })} | ||
| </tbody> | ||
| </table> | ||
| <div className={styles.toolbar}> | ||
| <div className={styles.search}> | ||
| <span className={styles.searchIcon} aria-hidden="true"> | ||
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"> | ||
| <circle cx="11" cy="11" r="7" /> | ||
| <path d="m20 20-3-3" strokeLinecap="round" /> | ||
| </svg> | ||
| </span> | ||
| <input placeholder="企業名・業種・担当者" /> | ||
| </div> | ||
| <button type="button" className={styles.filterChip}> | ||
| 業種 <span className={styles.chipCaret}>▾</span> | ||
| </button> | ||
| <button type="button" className={styles.filterChip}> | ||
| 関係性 <span className={styles.chipCaret}>▾</span> | ||
| </button> | ||
| <button type="button" className={styles.filterChip}> | ||
| 担当 <span className={styles.chipCaret}>▾</span> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div className={styles.panel}> | ||
| <table className={styles.list}> | ||
| <thead> | ||
| <tr> | ||
| <th>企業</th> | ||
| <th>業種・所在</th> | ||
| <th>状況</th> | ||
| <th style={{ textAlign: "right" }}>公開求人</th> | ||
| <th style={{ textAlign: "right" }}>進行中候補</th> | ||
| <th>最終接触</th> | ||
| <th style={{ width: 80 }}></th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {companies?.map((c) => ( | ||
| <CompanyRow key={c.id} company={c} /> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy lift
src/components 配下の実装方針をリポジトリ規約に合わせてください
このファイルは CSS Modules 主体ですが、当該パスの規約は Tailwind + shadcn/ui パターンを要求しています。src/components の再利用コンポーネントとしては規約準拠に寄せる必要があります。
As per coding guidelines "Use Tailwind CSS with shadcn/ui components, including tailwindcss-animate and @tailwindcss/typography plugins, and add components via npx shadcn command".
Also applies to: 109-156
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Companies.tsx` around lines 32 - 106, The Companies.tsx
component uses CSS Modules (styles.*) but must follow the src/components
convention of Tailwind + shadcn/ui; replace CSS Module classes and structure
with Tailwind utility classes and shadcn components (e.g., use shadcn Button,
Input, Table/Sheet primitives where appropriate) and remove reliance on
styles.wrapper, styles.inner, styles.pageHead, styles.actions, styles.toolbar,
styles.panel, styles.list; ensure the CSV and Add buttons use shadcn Button
variants, the search input uses shadcn Input, and CompanyRow remains the row
renderer (keep CompanyRow key={c.id} company={c}); run npx shadcn to add any
missing components and ensure tailwindcss-animate and `@tailwindcss/typography`
plugins are enabled in the project config.
- 検索 input に aria-label を付与 - Supabase 取得エラーを console.error で記録 - 未実装の CSV出力 / 編集ボタンを disabled + title で明示 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
@coderabbitai 5件の指摘ありがとうございます。以下のとおり対応しました。 対応 (c557481):
Revert した指摘 ( 反論する指摘 (CSS Modules → Tailwind + shadcn/ui への書き換え): Tailwind + shadcn/ui に書き換えると:
CSS Modules でスコープしているのは、この 1 ページだけ別方向のデザインを試すための明示的な隔離であり、既存規約の単なる無視ではありません。 |
|
✅ 対応済み 3 件（c557481）
✅ ご指摘のとおりです。 ✅ CSS Modules の維持 — 設計判断として受け入れます 「Fjord direction の視覚言語を Companies ページのみに閉じ、他ページの shadcn/blue 基調を壊さない」という目的に対して、CSS Modules によるスコープ隔離は合理的な手段です。Tailwind + shadcn/ui に書き換えると Fjord トークンをグローバルに追加せざるを得ないというご説明も的確です。既存規約との差異は意図的な隔離として理解しました。 全 5 件の指摘への対応が完了しました。PR をレビューします。 ✏️ Learnings added
✅ Actions performedReview triggered.
|
#192 で Companies ページが CSS modules ベースで再実装されたため、本 PR で bg-action / bg-danger に置換した箇所は意味を失った。Companies.tsx は main 版を採用し、--action / --danger トークン定義 (globals.css / tailwind.config.js) のみ残す。残された token は将来の Tailwind ベースコンポーネントで利用できる。 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 participant
Summary
Claude Design からの handoff (
Companies - Fjord direction.html) を Companies ページに適用しました。設計は新しい視覚方向 (深いティール
#0E4A50+ Zen Maru Gothic / M PLUS Rounded 1c の和文丸ゴシック基調) で、現状の shadcn/ui ベースの他画面とは大きく異なります。そのため当該ページ内にスタイルを閉じ込めて実装しています。変更内容
src/components/Companies.module.cssfjord-admin.cssから Companies 画面で使う部分のみ抽出した CSS Modulessrc/components/Companies.tsxsrc/app/companies/layout.tsxnext/font/googleで Zen Maru Gothic と M PLUS Rounded 1c を CSS 変数化し、Companies ツリー配下にだけ供給"壊さない" ための工夫
companies/layout.tsxの wrapper にのみ--font-zen-maru/--font-mplus-roundedを注入。他ページのフォントは従来通り Geistglobals.css/tailwind.config.js/ 他コンポーネントは未変更companiesテーブル (id,name,website,memo) のみ参照設計と実 DB のギャップ
設計には実 DB に存在しない項目があるため、暫定処理:
websiteを流用これらは将来 DB 拡張時に配線する余地として残しています。
Test plan
/companiesを開き、新デザインが表示される/,/dashboard,/docs,/login,/signup等) の見た目が従来通りnpm run buildpass🤖 Generated with Claude Code
Summary by CodeRabbit
リリースノート
新機能
スタイル