From 7b7e5da619bfbaeb6de2773dd346501e57268671 Mon Sep 17 00:00:00 2001
From: sahara2006 <shouta.04077@gmail.com>
Date: Fri, 14 Aug 2026 22:28:03 +0900
Subject: [PATCH 1/9] =?UTF-8?q?=E3=81=9D=E3=82=8C=E3=81=A3=E3=81=BD?=
 =?UTF-8?q?=E3=81=84=E3=82=AB=E3=83=BC=E3=83=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/RoomCard.story.vue         |  27 +++++
 client/src/RoomCard.vue               | 157 ++++++++++++++++++++++++++
 client/src/__tests__/RoomCard.spec.ts |  40 +++++++
 client/src/assets/main.css            |   1 +
 4 files changed, 225 insertions(+)
 create mode 100644 client/src/RoomCard.story.vue
 create mode 100644 client/src/RoomCard.vue
 create mode 100644 client/src/__tests__/RoomCard.spec.ts

diff --git a/client/src/RoomCard.story.vue b/client/src/RoomCard.story.vue
new file mode 100644
index 0000000..407a42d
--- /dev/null
+++ b/client/src/RoomCard.story.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import RoomCard from './RoomCard.vue'
+
+const roomFixture = {
+  id: 'room-01',
+  number: 1,
+  title: 'Room 01',
+  genre: 'General',
+  description: 'A cozy room for general discussions.',
+}
+</script>
+
+<template>
+  <Story title="RoomCard">
+    <Variant title="Closed">
+      <div style="width: 24rem; padding: 2rem">
+        <RoomCard :room="roomFixture" />
+      </div>
+    </Variant>
+
+    <Variant title="Open">
+      <div style="width: 24rem; padding: 2rem">
+        <RoomCard :room="roomFixture" default-open />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/client/src/RoomCard.vue b/client/src/RoomCard.vue
new file mode 100644
index 0000000..77cc52a
--- /dev/null
+++ b/client/src/RoomCard.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
+
+export interface Room {
+    id: string
+    number: number
+    title: string
+    genre: string
+    description: string
+}
+
+withDefaults(defineProps<{
+    room: Room
+    defaultOpen?: boolean
+    starting?: boolean
+}>(), {
+    defaultOpen: false,
+    starting: false,
+})
+
+const emit = defineEmits<{
+    start: [room: Room]
+}>()
+</script>
+
+<template>
+    <Disclosure v-slot="{ open }" as="article" class="room-card" :default-open="defaultOpen">
+        <DisclosureButton class="room-card__header">
+            <span class="room-card__number" aria-hidden="true">{{ room.number }}</span>
+            <span class="room-card__heading">
+                <span class="room-card__genre">{{ room.genre }}</span>
+                <span class="room-card__title">{{ room.title }}</span>
+            </span>
+            <span class="material-symbols-outlined room-card__toggle" aria-hidden="true" :data-open="open">
+                keyboard_arrow_down
+            </span>
+        </DisclosureButton>
+
+        <DisclosurePanel class="room-card__body">
+            <p class="room-card__description">{{ room.description }}</p>
+            <button class="room-card__start" type="button" :disabled="starting" @click="emit('start', room)">
+                {{ starting ? '開始しています…' : '開始する' }}
+            </button>
+        </DisclosurePanel>
+    </Disclosure>
+</template>
+
+<style scoped>
+.room-card {
+    width: 100%;
+    overflow: hidden;
+    border: 1px solid rgb(255 255 255 / 12%);
+    border-radius: 1.25rem;
+    background: rgba(15, 28, 36, 0.76);
+    box-shadow: 0 0.25rem 1.75rem rgb(0 0 0 / 28%);
+    backdrop-filter: blur(1rem);
+}
+
+.room-card__header {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 1rem;
+    padding: 1.25rem 1.5rem;
+    border: 0;
+    color: inherit;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+}
+
+.room-card__heading {
+    display: grid;
+    flex: 1;
+    gap: 0.2rem;
+}
+
+.room-card__genre {
+    color: #5eead4;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.room-card__header:hover {
+    background: rgb(255 255 255 / 4%);
+}
+
+.room-card__header:focus-visible {
+    outline: 2px solid #5eead4;
+    outline-offset: -2px;
+}
+
+.room-card__title {
+    font-size: 2rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+}
+
+.room-card__toggle {
+    color: #aeb7d1;
+    font-size: 1.25rem;
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    line-height: 1;
+    transition: transform 160ms ease;
+}
+
+.room-card__toggle[data-open='true'] {
+    transform: rotate(180deg);
+}
+
+.room-card__body {
+    display: grid;
+    gap: 1.25rem;
+    padding: 1.25rem 1.5rem 1.5rem;
+    border-top: 1px solid rgb(255 255 255 / 8%);
+}
+
+.room-card__description {
+    margin: 0;
+    color: #aeb7d1;
+    line-height: 1.7;
+}
+
+.room-card__start {
+    justify-self: end;
+    padding: 0.7rem 1.1rem;
+    border: 0;
+    border-radius: 0.7rem;
+    color: #07111f;
+    background: #5eead4;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.room-card__start:hover:not(:disabled) {
+    background: #99f6e4;
+}
+
+.room-card__start:focus-visible {
+    outline: 2px solid #c7d2fe;
+    outline-offset: 3px;
+}
+
+.room-card__start:disabled {
+    cursor: wait;
+    opacity: 0.6;
+}
+
+.room-card__number {
+    font-size: 3rem;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+}
+</style>
diff --git a/client/src/__tests__/RoomCard.spec.ts b/client/src/__tests__/RoomCard.spec.ts
new file mode 100644
index 0000000..78cdcf7
--- /dev/null
+++ b/client/src/__tests__/RoomCard.spec.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import RoomCard from '../RoomCard.vue'
+
+const room = {
+  id: 'room-01',
+  number: 1,
+  title: 'Room 01',
+  genre: 'General',
+  description: 'A cozy room for general discussions.',
+}
+
+describe('RoomCard', () => {
+  it('renders the collapsed card shell', () => {
+    const wrapper = mount(RoomCard, { props: { room } })
+
+    expect(wrapper.get('article').classes()).toContain('room-card')
+    expect(wrapper.get('button').text()).toContain('Room 01')
+    expect(wrapper.find('.room-card__body').exists()).toBe(false)
+  })
+
+  it('opens and closes its content from the header button', async () => {
+    const wrapper = mount(RoomCard, { props: { room } })
+
+    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)
+  })
+
+  it('emits the room from the start button', async () => {
+    const wrapper = mount(RoomCard, { props: { room, defaultOpen: true } })
+
+    await wrapper.get('.room-card__start').trigger('click')
+
+    expect(wrapper.emitted('start')).toEqual([[room]])
+  })
+})
diff --git a/client/src/assets/main.css b/client/src/assets/main.css
index d02ba61..944abe7 100644
--- a/client/src/assets/main.css
+++ b/client/src/assets/main.css
@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=keyboard_arrow_down');
 @import 'tailwindcss';
 
 :root {

From 5d920f1a183598a1e29ff752ad37da960a503eb0 Mon Sep 17 00:00:00 2001
From: sahara2006 <shouta.04077@gmail.com>
Date: Fri, 14 Aug 2026 22:54:46 +0900
Subject: [PATCH 2/9] format

---
 client/src/RoomCard.vue | 194 ++++++++++++++++++++++------------------
 1 file changed, 105 insertions(+), 89 deletions(-)

diff --git a/client/src/RoomCard.vue b/client/src/RoomCard.vue
index 77cc52a..203c6b5 100644
--- a/client/src/RoomCard.vue
+++ b/client/src/RoomCard.vue
@@ -2,156 +2,172 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 
 export interface Room {
-    id: string
-    number: number
-    title: string
-    genre: string
-    description: string
+  id: string
+  number: number
+  title: string
+  genre: string
+  description: string
 }
 
-withDefaults(defineProps<{
+withDefaults(
+  defineProps<{
     room: Room
     defaultOpen?: boolean
     starting?: boolean
-}>(), {
+  }>(),
+  {
     defaultOpen: false,
     starting: false,
-})
+  },
+)
 
 const emit = defineEmits<{
-    start: [room: Room]
+  start: [room: Room]
 }>()
 </script>
 
 <template>
-    <Disclosure v-slot="{ open }" as="article" class="room-card" :default-open="defaultOpen">
-        <DisclosureButton class="room-card__header">
-            <span class="room-card__number" aria-hidden="true">{{ room.number }}</span>
-            <span class="room-card__heading">
-                <span class="room-card__genre">{{ room.genre }}</span>
-                <span class="room-card__title">{{ room.title }}</span>
-            </span>
-            <span class="material-symbols-outlined room-card__toggle" aria-hidden="true" :data-open="open">
-                keyboard_arrow_down
-            </span>
-        </DisclosureButton>
-
-        <DisclosurePanel class="room-card__body">
-            <p class="room-card__description">{{ room.description }}</p>
-            <button class="room-card__start" type="button" :disabled="starting" @click="emit('start', room)">
-                {{ starting ? '開始しています…' : '開始する' }}
-            </button>
-        </DisclosurePanel>
-    </Disclosure>
+  <Disclosure v-slot="{ open }" as="article" class="room-card" :default-open="defaultOpen">
+    <DisclosureButton class="room-card__header">
+      <span class="room-card__number" aria-hidden="true">{{ room.number }}</span>
+      <span class="room-card__heading">
+        <span class="room-card__genre">{{ room.genre }}</span>
+        <span class="room-card__title">{{ room.title }}</span>
+      </span>
+      <span
+        class="material-symbols-outlined room-card__toggle"
+        aria-hidden="true"
+        :data-open="open"
+      >
+        keyboard_arrow_down
+      </span>
+    </DisclosureButton>
+
+    <DisclosurePanel class="room-card__body">
+      <p class="room-card__description">{{ room.description }}</p>
+      <button
+        class="room-card__start"
+        type="button"
+        :disabled="starting"
+        @click="emit('start', room)"
+      >
+        {{ starting ? '開始しています…' : '開始する' }}
+      </button>
+    </DisclosurePanel>
+  </Disclosure>
 </template>
 
 <style scoped>
 .room-card {
-    width: 100%;
-    overflow: hidden;
-    border: 1px solid rgb(255 255 255 / 12%);
-    border-radius: 1.25rem;
-    background: rgba(15, 28, 36, 0.76);
-    box-shadow: 0 0.25rem 1.75rem rgb(0 0 0 / 28%);
-    backdrop-filter: blur(1rem);
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid rgb(255 255 255 / 12%);
+  border-radius: 1.25rem;
+  background: rgba(15, 28, 36, 0.76);
+  box-shadow: 0 0.25rem 1.75rem rgb(0 0 0 / 28%);
+  backdrop-filter: blur(1rem);
 }
 
 .room-card__header {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 1rem;
-    padding: 1.25rem 1.5rem;
-    border: 0;
-    color: inherit;
-    background: transparent;
-    cursor: pointer;
-    text-align: left;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1rem;
+  padding: 1.25rem 1.5rem;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
 }
 
 .room-card__heading {
-    display: grid;
-    flex: 1;
-    gap: 0.2rem;
+  display: grid;
+  flex: 1;
+  gap: 0.2rem;
 }
 
 .room-card__genre {
-    color: #5eead4;
-    font-size: 0.72rem;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+  color: #5eead4;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .room-card__header:hover {
-    background: rgb(255 255 255 / 4%);
+  background: rgb(255 255 255 / 4%);
 }
 
 .room-card__header:focus-visible {
-    outline: 2px solid #5eead4;
-    outline-offset: -2px;
+  outline: 2px solid #5eead4;
+  outline-offset: -2px;
 }
 
 .room-card__title {
-    font-size: 2rem;
-    font-weight: 700;
-    letter-spacing: -0.01em;
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
 }
 
 .room-card__toggle {
-    color: #aeb7d1;
-    font-size: 1.25rem;
-    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-    line-height: 1;
-    transition: transform 160ms ease;
+  color: #aeb7d1;
+  font-size: 1.25rem;
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+  line-height: 1;
+  transition: transform 160ms ease;
 }
 
 .room-card__toggle[data-open='true'] {
-    transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 .room-card__body {
-    display: grid;
-    gap: 1.25rem;
-    padding: 1.25rem 1.5rem 1.5rem;
-    border-top: 1px solid rgb(255 255 255 / 8%);
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.25rem 1.5rem 1.5rem;
+  border-top: 1px solid rgb(255 255 255 / 8%);
 }
 
 .room-card__description {
-    margin: 0;
-    color: #aeb7d1;
-    line-height: 1.7;
+  margin: 0;
+  color: #aeb7d1;
+  line-height: 1.7;
 }
 
 .room-card__start {
-    justify-self: end;
-    padding: 0.7rem 1.1rem;
-    border: 0;
-    border-radius: 0.7rem;
-    color: #07111f;
-    background: #5eead4;
-    font-weight: 700;
-    cursor: pointer;
+  justify-self: end;
+  padding: 0.7rem 1.1rem;
+  border: 0;
+  border-radius: 0.7rem;
+  color: #07111f;
+  background: #5eead4;
+  font-weight: 700;
+  cursor: pointer;
 }
 
 .room-card__start:hover:not(:disabled) {
-    background: #99f6e4;
+  background: #99f6e4;
 }
 
 .room-card__start:focus-visible {
-    outline: 2px solid #c7d2fe;
-    outline-offset: 3px;
+  outline: 2px solid #c7d2fe;
+  outline-offset: 3px;
 }
 
 .room-card__start:disabled {
-    cursor: wait;
-    opacity: 0.6;
+  cursor: wait;
+  opacity: 0.6;
 }
 
 .room-card__number {
-    font-size: 3rem;
-    font-weight: 700;
-    letter-spacing: -0.01em;
+  font-size: 3rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
 }
 </style>

From 97d5c152f5d5d0384472f716f7f53aa6b4b2d249 Mon Sep 17 00:00:00 2001
From: sahara2006 <shouta.04077@gmail.com>
Date: Fri, 14 Aug 2026 23:10:30 +0900
Subject: [PATCH 3/9] =?UTF-8?q?icon=E3=82=92=E3=83=80=E3=82=A6=E3=83=B3?=
 =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=89=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...eyboard_arrow_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 client/src/assets/icon/keyboard_arrow_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

diff --git a/client/src/assets/icon/keyboard_arrow_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg b/client/src/assets/icon/keyboard_arrow_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg
new file mode 100644
index 0000000..24729e0
--- /dev/null
+++ b/client/src/assets/icon/keyboard_arrow_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>
\ No newline at end of file

From 0b3bea62973ea7b3e48b4816479c21eb8b5f6bb1 Mon Sep 17 00:00:00 2001
From: sahara2006 <shouta.04077@gmail.com>
Date: Fri, 14 Aug 2026 23:11:15 +0900
Subject: [PATCH 4/9] =?UTF-8?q?=E3=83=86=E3=82=B9=E3=83=88=E3=81=AA?=
 =?UTF-8?q?=E3=81=8A=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/RoomCard.vue               | 7 +++++--
 client/src/__tests__/RoomCard.spec.ts | 6 +++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/src/RoomCard.vue b/client/src/RoomCard.vue
index 203c6b5..e517fd1 100644
--- a/client/src/RoomCard.vue
+++ b/client/src/RoomCard.vue
@@ -28,7 +28,7 @@ const emit = defineEmits<{
 
 <template>
   <Disclosure v-slot="{ open }" as="article" class="room-card" :default-open="defaultOpen">
-    <DisclosureButton class="room-card__header">
+    <DisclosureButton class="room-card__header" type="button">
       <span class="room-card__number" aria-hidden="true">{{ room.number }}</span>
       <span class="room-card__heading">
         <span class="room-card__genre">{{ room.genre }}</span>
@@ -39,7 +39,10 @@ const emit = defineEmits<{
         aria-hidden="true"
         :data-open="open"
       >
-        keyboard_arrow_down
+        <img
+          src="@/assets/icon/keyboard_arrow_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg"
+          alt="Toggle"
+        />
       </span>
     </DisclosureButton>
 
diff --git a/client/src/__tests__/RoomCard.spec.ts b/client/src/__tests__/RoomCard.spec.ts
index 78cdcf7..8f2d6d1 100644
--- a/client/src/__tests__/RoomCard.spec.ts
+++ b/client/src/__tests__/RoomCard.spec.ts
@@ -16,17 +16,17 @@ describe('RoomCard', () => {
     const wrapper = mount(RoomCard, { props: { room } })
 
     expect(wrapper.get('article').classes()).toContain('room-card')
-    expect(wrapper.get('button').text()).toContain('Room 01')
+    expect(wrapper.get('.room-card__header').text()).toContain('Room 01')
     expect(wrapper.find('.room-card__body').exists()).toBe(false)
   })
 
   it('opens and closes its content from the header button', async () => {
     const wrapper = mount(RoomCard, { props: { room } })
 
-    await wrapper.get('button').trigger('click')
+    await wrapper.get('.room-card__header').trigger('click')
     expect(wrapper.get('.room-card__description').text()).toBe(room.description)
 
-    await wrapper.get('button').trigger('click')
+    await wrapper.get('.room-card__header').trigger('click')
     expect(wrapper.find('.room-card__body').exists()).toBe(false)
   })
 

From 4267466073714cfc6f50fc0db3230ee7ce60dfe4 Mon Sep 17 00:00:00 2001
From: sahara2006 <shouta.04077@gmail.com>
Date: Wed, 26 Aug 2026 21:10:27 +0900
Subject: [PATCH 5/9] =?UTF-8?q?=E5=90=8D=E5=89=8D=E3=82=92=E5=A4=89?=
 =?UTF-8?q?=E3=81=88=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/App.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 1414b95..28c6d24 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -8,30 +8,26 @@ const actions = ['Save changes', 'Duplicate', 'Archive']
 
 <template>
   <main class="app-shell">
-    <section class="hero" aria-labelledby="app-title">
+    <section class="hero" aria-labelledby="app-name">
       <p class="eyebrow">1Monthon 2026 · Team 11</p>
-      <h1 id="app-title">Frontend is ready.</h1>
+      <h1 id="app-name">Frontend is ready.</h1>
       <p class="description">
         Vue と Rust server をつなぐための、シンプルな開発環境をセットアップしました。
       </p>
 
       <Menu as="div" class="relative inline-block py-1 text-left">
         <MenuButton
-          class="rounded bg-sky-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-500 active:bg-sky-700"
-        >
+          class="rounded bg-sky-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-500 active:bg-sky-700">
           Open actions
         </MenuButton>
 
         <MenuItems
-          class="absolute right-0 z-10 mt-3 w-56 origin-top-right overflow-hidden rounded-xl border border-white/10 bg-slate-900/95 p-1 shadow-2xl ring-1 ring-black/20 backdrop-blur"
-        >
+          class="absolute right-0 z-10 mt-3 w-56 origin-top-right overflow-hidden rounded-xl border border-white/10 bg-slate-900/95 p-1 shadow-2xl ring-1 ring-black/20 backdrop-blur">
           <MenuItem v-for="action in actions" :key="action" v-slot="{ active }">
-            <button
-              :class="[
-                'block w-full rounded-lg px-4 py-3 text-left text-sm transition',
-                active ? 'bg-sky-500 text-white' : 'text-slate-200 hover:bg-white/5',
-              ]"
-            >
+            <button :class="[
+              'block w-full rounded-lg px-4 py-3 text-left text-sm transition',
+              active ? 'bg-sky-500 text-white' : 'text-slate-200 hover:bg-white/5',
+            ]">
               {{ action }}
             </button>
           </MenuItem>

From e99ea23e365a28a259fb4547a55fe72548b25d23 Mon Sep 17 00:00:00 2001
From: sahara2006 <shouta.04077@gmail.com>
Date: Wed, 26 Aug 2026 21:15:09 +0900
Subject: [PATCH 6/9] format

---
 client/src/App.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 28c6d24..ef82415 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -17,17 +17,21 @@ const actions = ['Save changes', 'Duplicate', 'Archive']
 
       <Menu as="div" class="relative inline-block py-1 text-left">
         <MenuButton
-          class="rounded bg-sky-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-500 active:bg-sky-700">
+          class="rounded bg-sky-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-sky-500 active:bg-sky-700"
+        >
           Open actions
         </MenuButton>
 
         <MenuItems
-          class="absolute right-0 z-10 mt-3 w-56 origin-top-right overflow-hidden rounded-xl border border-white/10 bg-slate-900/95 p-1 shadow-2xl ring-1 ring-black/20 backdrop-blur">
+          class="absolute right-0 z-10 mt-3 w-56 origin-top-right overflow-hidden rounded-xl border border-white/10 bg-slate-900/95 p-1 shadow-2xl ring-1 ring-black/20 backdrop-blur"
+        >
           <MenuItem v-for="action in actions" :key="action" v-slot="{ active }">
-            <button :class="[
-              'block w-full rounded-lg px-4 py-3 text-left text-sm transition',
-              active ? 'bg-sky-500 text-white' : 'text-slate-200 hover:bg-white/5',
-            ]">
+            <button
+              :class="[
+                'block w-full rounded-lg px-4 py-3 text-left text-sm transition',
+                active ? 'bg-sky-500 text-white' : 'text-slate-200 hover:bg-white/5',
+              ]"
+            >
               {{ action }}
             </button>
           </MenuItem>

From 54db0aa427a20d39c3a33caebc485cf3c8bb7c18 Mon Sep 17 00:00:00 2001
From: sahara2006 <shouta.04077@gmail.com>
Date: Wed, 26 Aug 2026 21:31:39 +0900
Subject: [PATCH 7/9] =?UTF-8?q?css=E3=81=8C=E9=9B=91=E3=81=A0=E3=81=A3?=
 =?UTF-8?q?=E3=81=9F=E3=81=AE=E3=81=A7=E5=8F=96=E3=82=8A=E6=B6=88=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/RoomCard.vue    | 9 +++------
 client/src/assets/main.css | 1 -
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/client/src/RoomCard.vue b/client/src/RoomCard.vue
index e517fd1..1e7a0aa 100644
--- a/client/src/RoomCard.vue
+++ b/client/src/RoomCard.vue
@@ -34,14 +34,11 @@ const emit = defineEmits<{
         <span class="room-card__genre">{{ room.genre }}</span>
         <span class="room-card__title">{{ room.title }}</span>
       </span>
-      <span
-        class="material-symbols-outlined room-card__toggle"
-        aria-hidden="true"
-        :data-open="open"
-      >
+      <span class="room-card__toggle" aria-hidden="true" :data-open="open">
         <img
           src="@/assets/icon/keyboard_arrow_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg"
-          alt="Toggle"
+          alt=""
+          aria-hidden="true"
         />
       </span>
     </DisclosureButton>
diff --git a/client/src/assets/main.css b/client/src/assets/main.css
index 3a59f90..3bc0c01 100644
--- a/client/src/assets/main.css
+++ b/client/src/assets/main.css
@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=keyboard_arrow_down');
 @import 'tailwindcss';
 
 :root {

From ec9986bd2013ac48dc3c2b3c03496ab04636c049 Mon Sep 17 00:00:00 2001
From: sahara2006 <shouta.04077@gmail.com>
Date: Wed, 26 Aug 2026 22:14:30 +0900
Subject: [PATCH 8/9] =?UTF-8?q?=E3=82=B3=E3=83=9F=E3=83=83=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/RoomCard.vue | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/client/src/RoomCard.vue b/client/src/RoomCard.vue
index 1e7a0aa..b8cc9f6 100644
--- a/client/src/RoomCard.vue
+++ b/client/src/RoomCard.vue
@@ -61,10 +61,11 @@ const emit = defineEmits<{
 .room-card {
   width: 100%;
   overflow: hidden;
-  border: 1px solid rgb(255 255 255 / 12%);
+  border: 1px solid #d8e1ee;
   border-radius: 1.25rem;
-  background: rgba(15, 28, 36, 0.76);
-  box-shadow: 0 0.25rem 1.75rem rgb(0 0 0 / 28%);
+  color: #121a2a;
+  background: #fff;
+  box-shadow: 0 0.25rem 1.75rem rgb(21 34 56 / 12%);
   backdrop-filter: blur(1rem);
 }
 
@@ -89,15 +90,15 @@ const emit = defineEmits<{
 }
 
 .room-card__genre {
-  color: #5eead4;
-  font-size: 0.72rem;
+  color: hsl(244, 60%, 64%);
+  font-size: 0.9rem;
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
 }
 
 .room-card__header:hover {
-  background: rgb(255 255 255 / 4%);
+  background: #f5f8fc;
 }
 
 .room-card__header:focus-visible {
@@ -112,7 +113,7 @@ const emit = defineEmits<{
 }
 
 .room-card__toggle {
-  color: #aeb7d1;
+  color: #65758d;
   font-size: 1.25rem;
   font-variation-settings:
     'FILL' 0,
@@ -131,12 +132,12 @@ const emit = defineEmits<{
   display: grid;
   gap: 1.25rem;
   padding: 1.25rem 1.5rem 1.5rem;
-  border-top: 1px solid rgb(255 255 255 / 8%);
+  border-top: 1px solid #e5eaf2;
 }
 
 .room-card__description {
   margin: 0;
-  color: #aeb7d1;
+  color: #65758d;
   line-height: 1.7;
 }
 
@@ -146,17 +147,17 @@ const emit = defineEmits<{
   border: 0;
   border-radius: 0.7rem;
   color: #07111f;
-  background: #5eead4;
+  background: hsl(171 30% 78%);
   font-weight: 700;
   cursor: pointer;
 }
 
 .room-card__start:hover:not(:disabled) {
-  background: #99f6e4;
+  background: hsl(171 35% 70%);
 }
 
 .room-card__start:focus-visible {
-  outline: 2px solid #c7d2fe;
+  outline: 2px solid hsl(171 45% 42%);
   outline-offset: 3px;
 }
 

From 7765572f5bb01f2d434e5f3c44d6788d69e147fe Mon Sep 17 00:00:00 2001
From: sahara2006 <shouta.04077@gmail.com>
Date: Wed, 26 Aug 2026 22:24:30 +0900
Subject: [PATCH 9/9] =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/RoomCard.story.vue         |  8 ++++----
 client/src/RoomCard.vue               | 10 +++++-----
 client/src/__tests__/RoomCard.spec.ts | 14 +++++++-------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/client/src/RoomCard.story.vue b/client/src/RoomCard.story.vue
index 407a42d..ea17abb 100644
--- a/client/src/RoomCard.story.vue
+++ b/client/src/RoomCard.story.vue
@@ -2,11 +2,11 @@
 import RoomCard from './RoomCard.vue'
 
 const roomFixture = {
-  id: 'room-01',
+  room_id: '1411824c-d357-4941-af76-c76cb827dda6',
   number: 1,
-  title: 'Room 01',
-  genre: 'General',
-  description: 'A cozy room for general discussions.',
+  name: '最初の部屋',
+  genre: 'logic',
+  description: '動作確認用の問題セットです',
 }
 </script>
 
diff --git a/client/src/RoomCard.vue b/client/src/RoomCard.vue
index b8cc9f6..546c6dd 100644
--- a/client/src/RoomCard.vue
+++ b/client/src/RoomCard.vue
@@ -2,9 +2,9 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
 
 export interface Room {
-  id: string
+  room_id: string
   number: number
-  title: string
+  name: string
   genre: string
   description: string
 }
@@ -22,7 +22,7 @@ withDefaults(
 )
 
 const emit = defineEmits<{
-  start: [room: Room]
+  start: [roomId: string]
 }>()
 </script>
 
@@ -32,7 +32,7 @@ const emit = defineEmits<{
       <span class="room-card__number" aria-hidden="true">{{ room.number }}</span>
       <span class="room-card__heading">
         <span class="room-card__genre">{{ room.genre }}</span>
-        <span class="room-card__title">{{ room.title }}</span>
+        <span class="room-card__title">{{ room.name }}</span>
       </span>
       <span class="room-card__toggle" aria-hidden="true" :data-open="open">
         <img
@@ -49,7 +49,7 @@ const emit = defineEmits<{
         class="room-card__start"
         type="button"
         :disabled="starting"
-        @click="emit('start', room)"
+        @click="emit('start', room.room_id)"
       >
         {{ starting ? '開始しています…' : '開始する' }}
       </button>
diff --git a/client/src/__tests__/RoomCard.spec.ts b/client/src/__tests__/RoomCard.spec.ts
index 8f2d6d1..8349910 100644
--- a/client/src/__tests__/RoomCard.spec.ts
+++ b/client/src/__tests__/RoomCard.spec.ts
@@ -4,11 +4,11 @@ import { mount } from '@vue/test-utils'
 import RoomCard from '../RoomCard.vue'
 
 const room = {
-  id: 'room-01',
+  room_id: '1411824c-d357-4941-af76-c76cb827dda6',
   number: 1,
-  title: 'Room 01',
-  genre: 'General',
-  description: 'A cozy room for general discussions.',
+  name: '最初の部屋',
+  genre: 'logic',
+  description: '動作確認用の問題セットです',
 }
 
 describe('RoomCard', () => {
@@ -16,7 +16,7 @@ describe('RoomCard', () => {
     const wrapper = mount(RoomCard, { props: { room } })
 
     expect(wrapper.get('article').classes()).toContain('room-card')
-    expect(wrapper.get('.room-card__header').text()).toContain('Room 01')
+    expect(wrapper.get('.room-card__header').text()).toContain(room.name)
     expect(wrapper.find('.room-card__body').exists()).toBe(false)
   })
 
@@ -30,11 +30,11 @@ describe('RoomCard', () => {
     expect(wrapper.find('.room-card__body').exists()).toBe(false)
   })
 
-  it('emits the room from the start button', async () => {
+  it('emits the room ID from the start button', async () => {
     const wrapper = mount(RoomCard, { props: { room, defaultOpen: true } })
 
     await wrapper.get('.room-card__start').trigger('click')
 
-    expect(wrapper.emitted('start')).toEqual([[room]])
+    expect(wrapper.emitted('start')).toEqual([[room.room_id]])
   })
 })