feat:それっぽいルーム表示カード

[sahara2006]

#32
データの受け渡しがよくわかんなかった

[Copilot]

Pull request overview

Issue #32 に対応して、ポータル内の部屋一覧で表示する「部屋カード（RoomCard）」コンポーネントを新規追加し、fixture データで見た目と動作（開閉・開始アクション）を確認できるようにする PR です。

Changes:

• RoomCard コンポーネントを追加し、開閉可能な詳細表示と開始ボタンのイベント送出を実装
• Histoire 用の story と、開閉・emit を確認するユニットテストを追加
• トグルアイコン用に Material Symbols Outlined フォントを読み込む CSS を追加

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
client/src/RoomCard.vue	Headless UI の Disclosure を使った部屋カード UI と start イベントを追加
client/src/RoomCard.story.vue	fixture を使った Closed/Open の表示確認用 story を追加
client/src/assets/main.css	Material Symbols Outlined のフォント読み込みを追加
client/src/tests/RoomCard.spec.ts	開閉動作と start emit を検証するテストを追加

Suppressed comments (1)

client/src/tests/RoomCard.spec.ts:30

• ここも wrapper.get('button') だと将来 DOM 内のボタンが増えた際に違う要素をクリックしてしまう可能性があります。ヘッダー (.room-card__header) を明示的にクリックするようにしてください。

    await wrapper.get('button').trigger('click')
    expect(wrapper.get('.room-card__description').text()).toBe(room.description)

    await wrapper.get('button').trigger('click')
    expect(wrapper.find('.room-card__body').exists()).toBe(false)

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 6 changed files in this pull request and generated 3 comments.

Suppressed comments (1)

client/src/RoomCard.vue:121

• トグルは なので font-variation-settings / font-size / color などのフォント前提スタイルが効きません（将来の混乱の元になります）。画像のサイズ指定など、 に効くスタイルに置き換えるのがよいです。

.room-card__toggle {
  color: #aeb7d1;
  font-size: 1.25rem;
  font-variation-settings:
    'FILL' 0,

[kaomojikun5]

2点修正お願いします。
それとfigmaにあるやつみたいにライトテーマに合わせてくれると嬉しいです。

[kaomojikun5]

いいんじゃないでしょうか