【React × Tailwind】ResultBoxを共通化してUIを統一してみた（看護師向け計算ツール開発 #6①）

職場にあったら便利だなと思い開発を始めた看護師向けの計算ツールアプリ。
今回は計算結果を表示する ResultBox コンポーネントを共通化しました。

🚨 Before

• ページごとにUIがバラバラ
• 結果位置ずれ・注意文スタイル不統一
• スマホでは結果が見切れる

✅ After：ResultBox共通化

• 共通コンポーネント化で全ページ統一
• @headlessui/react の Disclosure で注意欄を展開
• scrollIntoView によるスムーススクロール対応

<Disclosure>
  <Disclosure.Button>
    <Image src="/icons/help-icon.svg" alt="注意" width={28} height={28} />
  </Disclosure.Button>
  <Disclosure.Panel className="mt-2 p-3 bg-blue-50 text-sm">
    {helpText}
  </Disclosure.Panel>
</Disclosure>

💡 Popover vs Disclosure

項目	Popover	Disclosure
表示形式	吹き出し	下に展開
適した内容	短文・補足	長文・学習
現場の用途	単位説明	投与判断・注意事項

🎨 UI改善ポイント

• 結果：text-2xl
• 単位：text-sm
• 背景：bg-blue-50
• アイコン：28×28px（モバイル対応）

🧠 学び

• Disclosureは状態管理＋ARIA自動化で安全
• Popoverは補足、Disclosureは教育向けに最適
• 共通化により保守性・UXともに向上

📘 詳細なUI設計・コード解説はZennで公開中👇
👉 看護師が医療現場で使う計算ツールの開発に挑戦してみた #6①（Zenn)