視聴ページの大枠を作った

src/components/CommentPanel/CommentControls.vue

@@ -15,6 +15,10 @@ const toggleIsAnonymous = () => {
 }
 const sendComment = () => {
   //todo:コメントを送信する
+  console.log(commentValue.value)
+  console.log(pickedColor.value)
+  console.log(isAnonymous.value)
+  commentValue.value = ''
 }
 </script>
 

src/components/CommentPanel/CommentPanel.vue

@@ -31,7 +31,7 @@ const emit = defineEmits<{
   height: calc(100% - 160px);
 }
 .commentPanel {
-  width: 340px;
+  width: 30rem;
   height: 100vh;
   border-left: 1px solid $color-secondary;
 }

src/components/StampList/StampList.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+export interface Stamp {
+  stampId: string
+  stampName: string
+  image: string
+}
+
+defineProps<{
+  stamps: Stamp[]
+}>()
+
+const handlePutStamp = (stampId: string) => {
+  console.log(`stamp: ${stampId}`)
+}
+</script>
+
+<template>
+  <ul :class="$style.stampList">
+    <li v-for="stamp in stamps" :key="stamp.stampId" :class="$style.stamp">
+      <button
+        :class="$style.stampButton"
+        @click="handlePutStamp(stamp.stampId)"
+      >
+        <img
+          :src="stamp.image"
+          :alt="stamp.stampName"
+          :width="100"
+          :height="100"
+        />
+      </button>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" module>
+.stampList {
+  display: flex;
+  list-style: none;
+}
+.stamp {
+  padding: 0;
+}
+.stampButton {
+  padding: 0 0.5rem;
+  &:hover {
+    background-color: gray; // fixme: 下部になぜかpaddingらしきものがついている
+  }
+}
+</style>

src/pages/EventPage.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import apis, { Meeting, Comment } from '@/lib/apis'
+import { parseId } from '@/lib/parsePathParams'
+import CommentPanel from '@/components/CommentPanel/CommentPanel.vue'
+import StampList from '@/components/StampList/StampList.vue'
+import { Stamp } from '@/components/StampList/StampList.vue'
+
+const route = useRoute()
+const eventId = parseId(route.params.id)
+const event = ref<Meeting>()
+const comments = ref<Comment[]>([])
+
+const stamps: Stamp[] = Array(10).fill({
+  stampId: 'aaa',
+  stampName: 'bbb',
+  image: 'https://q.trap.jp/api/v3/public/icon/mehm8128'
+})
+
+const fetchMeeting = async () => {
+  //todo: エラーハンドリング
+  const res = (await apis.getMeeting(eventId)).data
+  event.value = res
+}
+const fetchComments = async () => {
+  //todo: エラーハンドリング
+  const res = (await apis.getComment(eventId)).data
+  comments.value = res
+}
+
+onMounted(() => {
+  fetchMeeting()
+  fetchComments()
+})
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.leftContainer">
+      <iframe
+        src="https://www.youtube.com/embed/8Yxrw4GDqg4"
+        :class="$style.video"
+      />
+      <div :class="$style.stampListContainer">
+        <stamp-list :stamps="stamps" :class="$style.stampList" />
+      </div>
+    </div>
+    <comment-panel :comments="comments" :show-overlay="false" />
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  justify-content: space-between;
+  height: 100vh;
+}
+.leftContainer {
+  width: 100%;
+  padding: 1rem 4rem;
+}
+.video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+.stampListContainer {
+  padding-top: 1rem;
+}
+.stampList {
+  width: fit-content;
+  margin: auto auto;
+}
+</style>

src/router/index.ts

@@ -7,10 +7,9 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@/pages/Index.vue')
   },
   {
-    path: '/event/:id',
+    path: '/events/:id',
     name: 'Event',
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    component: () => {} // TODO: ページ作成したらここに書く
+    component: () => import('@/pages/EventPage.vue')
   },
   {
     path: '/admin/events',