From 5ba1f415a5dbc50d7e1d56d2fbf30815de446445 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sun, 25 Jun 2023 19:45:16 +0900
Subject: [PATCH 1/9] =?UTF-8?q?tokens=E3=82=92=E3=81=A1=E3=82=87=E3=81=A3?=
 =?UTF-8?q?=E3=81=A8=E4=BD=9C=E3=81=A3=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventDetail/EventTokenItem.vue | 82 +++++++++++++++++++
 src/components/EventDetail/EventTokenNew.vue  | 77 +++++++++++++++++
 src/components/EventDetail/EventTokens.vue    | 82 +++++++++++++++++++
 src/components/UI/BaseButton.vue              | 16 +++-
 src/components/UI/BaseDateInput.vue           | 46 +++++++++++
 src/components/UI/BaseInput.vue               |  5 ++
 src/components/UI/DateChip.vue                |  3 +-
 src/lib/parsePathParams.ts                    |  6 ++
 src/pages/admin/EventDetailPage.vue           | 23 ++++++
 src/router/index.ts                           |  6 ++
 src/styles/common.scss                        |  1 +
 src/utils/{dateFormat.ts => date.ts}          |  4 +
 12 files changed, 347 insertions(+), 4 deletions(-)
 create mode 100644 src/components/EventDetail/EventTokenItem.vue
 create mode 100644 src/components/EventDetail/EventTokenNew.vue
 create mode 100644 src/components/EventDetail/EventTokens.vue
 create mode 100644 src/components/UI/BaseDateInput.vue
 create mode 100644 src/lib/parsePathParams.ts
 create mode 100644 src/pages/admin/EventDetailPage.vue
 rename src/utils/{dateFormat.ts => date.ts} (82%)

diff --git a/src/components/EventDetail/EventTokenItem.vue b/src/components/EventDetail/EventTokenItem.vue
new file mode 100644
index 0000000..df5c926
--- /dev/null
+++ b/src/components/EventDetail/EventTokenItem.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { Token } from '@/lib/apis'
+import { formatDate } from '@/utils/date'
+import AIcon from '@/components/UI/AIcon.vue'
+
+defineProps<{
+  token: Token
+}>()
+</script>
+
+<template>
+  <div :class="$style.container">
+    <a-icon name="tabler:certificate" :size="32" color="#ff007f" />
+    <div :class="$style.leftContainer">
+      <p :class="$style.userId">{{ token.user_id }}</p>
+      <p :class="$style.description">{{ token.description }}</p>
+    </div>
+    <div :class="$style.middleContainer">
+      <p :class="$style.expireDate">
+        {{ formatDate(new Date(token.expire_at)) }}
+      </p>
+    </div>
+    <div :class="$style.rightContainer">
+      <button :class="$style.dotsButton">
+        <a-icon name="solar:menu-dots-bold" :size="32" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  height: 3.75rem;
+  padding: 8px;
+}
+.leftContainer {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+  border-right: 1px solid $color-secondary;
+  height: 70%;
+  padding-right: 20px;
+}
+.userId {
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-left: 20px;
+  color: $text-primary;
+}
+.description {
+  font-size: 1.25rem;
+  margin-left: 20px;
+  color: $text-secondary;
+}
+.middleContainer {
+  display: flex;
+  align-items: center;
+  border-right: 1px solid $color-secondary;
+  padding: 0 1.25rem;
+  width: 8.75rem;
+  height: 70%;
+}
+.expireDate {
+  color: $color-secondary;
+}
+.rightContainer {
+  display: flex;
+  align-items: center;
+  padding: 0 1.25rem;
+  width: 120px;
+  height: 70%;
+}
+.dotsButton {
+  border-radius: 50%;
+  padding: 0.5rem;
+  &:hover {
+    background-color: $background-secondary;
+  }
+}
+</style>
diff --git a/src/components/EventDetail/EventTokenNew.vue b/src/components/EventDetail/EventTokenNew.vue
new file mode 100644
index 0000000..58764ba
--- /dev/null
+++ b/src/components/EventDetail/EventTokenNew.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import BaseButton from '@/components/UI/BaseButton.vue'
+import BaseInput from '@/components/UI/BaseInput.vue'
+import BaseDateInput from '@/components/UI/BaseDateInput.vue'
+import AIcon from '@/components/UI/AIcon.vue'
+import { ref } from 'vue'
+import apis from '@/lib/apis'
+import { useRoute } from 'vue-router'
+import { getMeetingId } from '@/lib/parsePathParams'
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const route = useRoute()
+const meetingId = getMeetingId(route.params.id)
+
+const userName = ref('')
+const description = ref('')
+const expireDate = ref('')
+
+const handleAddToken = async () => {
+  // todo: error handling
+  await apis.createToken({
+    user_id: userName.value, //fixme: 外部の人もあり得るので、user_nameの方が適切そう
+    meeting_id: meetingId, // fixme: 型が違う
+    expire_at: expireDate.value + ':00Z', // fixme: https://github.com/traPtitech/traPortfolio-Dashboard/pull/64#discussion_r1174958146
+    description: description.value
+  })
+  userName.value = ''
+  description.value = ''
+  expireDate.value = ''
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <a-icon name="tabler:certificate" :size="32" color="#ff007f" />
+    <div :class="$style.formContainer">
+      <base-input v-model="userName" placeholder="ユーザー名を入力" />
+      <base-input v-model="description" placeholder="説明文を入力" />
+      <base-date-input v-model="expireDate" />
+    </div>
+    <div :class="$style.buttonContainer">
+      <base-button type="primary" @click="handleAddToken">保存</base-button>
+      <base-button type="secondary" @click="emit('close')">
+        <a-icon name="basil:cross-solid" />
+      </base-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  height: 3.75rem;
+  padding: 8px;
+}
+.formContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex-grow: 1;
+  border-right: 1px solid $color-secondary;
+  height: 70%;
+  padding-right: 20px;
+  margin-left: 1.25rem;
+}
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+  height: 70%;
+}
+</style>
diff --git a/src/components/EventDetail/EventTokens.vue b/src/components/EventDetail/EventTokens.vue
new file mode 100644
index 0000000..2df76f7
--- /dev/null
+++ b/src/components/EventDetail/EventTokens.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { Token } from '@/lib/apis'
+import EventTokenItem from './EventTokenItem.vue'
+import AIcon from '@/components/UI/AIcon.vue'
+import { ref } from 'vue'
+import EventTokenNew from './EventTokenNew.vue'
+
+defineProps<{
+  tokens: Token[]
+}>()
+
+const isNewTokenOpen = ref(false)
+const toggleNewToken = () => {
+  isNewTokenOpen.value = !isNewTokenOpen.value
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <ul :class="$style.tokenList">
+      <li
+        v-for="token in tokens"
+        :key="token.token"
+        :class="$style.tokenListItem"
+      >
+        <event-token-item :token="token" />
+      </li>
+      <li :class="$style.newTokenButtonContainer">
+        <button
+          v-if="!isNewTokenOpen"
+          :class="$style.newTokenButton"
+          @click="toggleNewToken"
+        >
+          <a-icon name="mdi:plus-circle-outline" />
+          新しいトークンを追加
+        </button>
+        <event-token-new v-else @close="toggleNewToken" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" module>
+.tabs {
+  margin: 0 20%;
+}
+.tokenList {
+  list-style: none;
+  background-color: white;
+}
+.tokenListItem {
+  padding: 4px 0px;
+  &:not(:last-child) {
+    border-bottom: 1px solid $background-secondary;
+  }
+}
+.newTokenButtonContainer {
+  display: flex;
+  justify-content: center;
+  padding: 4px 0px;
+  margin: 0px 4px;
+}
+.newTokenButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 4px 12px;
+  font-weight: bold;
+  color: $color-secondary;
+  text-decoration: none;
+  &:hover {
+    color: $color-primary;
+    background-color: $background-secondary;
+  }
+}
+.paginationBarContainer {
+  display: flex;
+  justify-content: center;
+}
+</style>
diff --git a/src/components/UI/BaseButton.vue b/src/components/UI/BaseButton.vue
index dac64b9..205bd51 100644
--- a/src/components/UI/BaseButton.vue
+++ b/src/components/UI/BaseButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-type ButtonType = 'primary'
+type ButtonType = 'primary' | 'secondary'
 const props = withDefaults(
   defineProps<{
     type?: ButtonType
@@ -17,13 +17,23 @@ const props = withDefaults(
 
 <style lang="scss" module>
 .button {
-  color: white;
-  background-color: $color-primary;
+  display: flex;
+  align-items: center;
   border-radius: 0.25rem;
   padding: 0.5rem;
   height: 1.875rem;
   font-size: 0.75rem;
 
+  &[data-type='primary'] {
+    color: white;
+    background-color: $color-primary;
+  }
+  &[data-type='secondary'] {
+    color: $color-secondary;
+    background-color: white;
+    border: 1px solid $color-secondary;
+  }
+
   &:hover {
     opacity: 0.7;
     transition: all 0.2s ease-in-out;
diff --git a/src/components/UI/BaseDateInput.vue b/src/components/UI/BaseDateInput.vue
new file mode 100644
index 0000000..ca631f9
--- /dev/null
+++ b/src/components/UI/BaseDateInput.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+  modelValue: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', modelValue: string): void
+}>()
+
+const handleInput = (event: Event) => {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <input
+      :class="$style.input"
+      :data-is-blank="props.modelValue === ''"
+      type="datetime-local"
+      :value="props.modelValue"
+      @input="handleInput"
+    />
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid $color-secondary;
+  border-radius: 0.25rem;
+  height: 2.5rem;
+  font-size: 0.875rem;
+  &:focus-within {
+    border-color: black;
+  }
+}
+.input {
+  &[data-is-blank='true'] {
+    color: $color-secondary;
+  }
+}
+</style>
diff --git a/src/components/UI/BaseInput.vue b/src/components/UI/BaseInput.vue
index 228ed5e..9a90335 100644
--- a/src/components/UI/BaseInput.vue
+++ b/src/components/UI/BaseInput.vue
@@ -33,5 +33,10 @@ const value = computed({
   border-radius: 0.25rem;
   height: 2.5rem;
   font-size: 0.875rem;
+  border: 1px solid $color-secondary;
+
+  &::placeholder {
+    color: $text-secondary;
+  }
 }
 </style>
diff --git a/src/components/UI/DateChip.vue b/src/components/UI/DateChip.vue
index 18b2dff..4dd942e 100644
--- a/src/components/UI/DateChip.vue
+++ b/src/components/UI/DateChip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getDateDiffText } from '@/utils/dateFormat'
+import { getDateDiffText } from '@/utils/date'
 
 type LiveStatus = 'isPlanned' | 'isStreaming' | 'isArchived'
 
@@ -72,3 +72,4 @@ const dateDiffText = computed(() => {
   color: #ffffff;
 }
 </style>
+@/utils/date
diff --git a/src/lib/parsePathParams.ts b/src/lib/parsePathParams.ts
new file mode 100644
index 0000000..e99f1f2
--- /dev/null
+++ b/src/lib/parsePathParams.ts
@@ -0,0 +1,6 @@
+export const getMeetingId = (v: string | string[]) => {
+  if (Array.isArray(v)) {
+    v = v[0]
+  }
+  return v
+}
diff --git a/src/pages/admin/EventDetailPage.vue b/src/pages/admin/EventDetailPage.vue
new file mode 100644
index 0000000..7407876
--- /dev/null
+++ b/src/pages/admin/EventDetailPage.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import apis, { Token } from '@/lib/apis'
+import { onMounted, ref } from 'vue'
+import EventTokens from '@/components/EventDetail/EventTokens.vue'
+
+const tokens = ref<Token[]>()
+
+const fetchMeetings = async () => {
+  //todo: エラーハンドリング
+  const res = (
+    await apis.getMeetingTokens('3fa85f64-5717-4562-b3fc-2c963f66afa6')
+  ).data
+  tokens.value = res
+}
+
+onMounted(fetchMeetings)
+</script>
+
+<template>
+  <event-tokens v-if="!!tokens" :tokens="tokens" />
+</template>
+
+<style lang="scss" module></style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6db72d9..aaa6866 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,6 +17,12 @@ const routes: RouteRecordRaw[] = [
     name: 'AdminMeetings',
     component: () => import('@/pages/admin/MeetingsPage.vue')
   },
+  {
+    path: '/admin/meetings/:id',
+    name: 'AdminMeetingDetail',
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    component: () => import('@/pages/admin/EventDetailPage.vue') // TODO: ページ作成したらここに書く
+  },
   {
     path: '/:path(.*)',
     name: 'NotFound',
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 35a0162..339bc7a 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -5,3 +5,4 @@ $background-primary: #f6f6f6;
 $background-secondary: #dfdede;
 
 $text-primary: #141414;
+$text-secondary: #bbbbbb;
diff --git a/src/utils/dateFormat.ts b/src/utils/date.ts
similarity index 82%
rename from src/utils/dateFormat.ts
rename to src/utils/date.ts
index 2e2704f..d3d4428 100644
--- a/src/utils/dateFormat.ts
+++ b/src/utils/date.ts
@@ -11,3 +11,7 @@ export function getDateDiffText(date: Date): string {
     return `${nowDate.diff(pastDate, 'day')}日前`
   return `${nowDate.diff(pastDate, 'hour')}時間前`
 }
+
+export const formatDate = (date: Date): string => {
+  return dayjs(date).format('YYYY/MM/DD')
+}

From 99365491c98e07711283836405f794a32539a5a0 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 26 Jun 2023 13:35:05 +0900
Subject: [PATCH 2/9] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E5=A4=89=E3=81=88=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventDetail/EventTokenItem.vue |  5 ++--
 src/components/EventDetail/EventTokenNew.vue  |  3 ++-
 src/components/EventDetail/EventTokens.vue    | 15 +++++++++---
 src/components/UI/EmoineIcon.vue              | 24 +++++++++++++++++++
 4 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 src/components/UI/EmoineIcon.vue

diff --git a/src/components/EventDetail/EventTokenItem.vue b/src/components/EventDetail/EventTokenItem.vue
index df5c926..50500d8 100644
--- a/src/components/EventDetail/EventTokenItem.vue
+++ b/src/components/EventDetail/EventTokenItem.vue
@@ -2,6 +2,7 @@
 import { Token } from '@/lib/apis'
 import { formatDate } from '@/utils/date'
 import AIcon from '@/components/UI/AIcon.vue'
+import EmoineIcon from '@/components/UI/EmoineIcon.vue'
 
 defineProps<{
   token: Token
@@ -10,7 +11,7 @@ defineProps<{
 
 <template>
   <div :class="$style.container">
-    <a-icon name="tabler:certificate" :size="32" color="#ff007f" />
+    <emoine-icon />
     <div :class="$style.leftContainer">
       <p :class="$style.userId">{{ token.user_id }}</p>
       <p :class="$style.description">{{ token.description }}</p>
@@ -22,7 +23,7 @@ defineProps<{
     </div>
     <div :class="$style.rightContainer">
       <button :class="$style.dotsButton">
-        <a-icon name="solar:menu-dots-bold" :size="32" />
+        <a-icon name="ph:dots-three-light" :size="32" />
       </button>
     </div>
   </div>
diff --git a/src/components/EventDetail/EventTokenNew.vue b/src/components/EventDetail/EventTokenNew.vue
index 58764ba..a63f494 100644
--- a/src/components/EventDetail/EventTokenNew.vue
+++ b/src/components/EventDetail/EventTokenNew.vue
@@ -7,6 +7,7 @@ import { ref } from 'vue'
 import apis from '@/lib/apis'
 import { useRoute } from 'vue-router'
 import { getMeetingId } from '@/lib/parsePathParams'
+import EmoineIcon from '@/components/UI/EmoineIcon.vue'
 
 const emit = defineEmits<{
   (e: 'close'): void
@@ -35,7 +36,7 @@ const handleAddToken = async () => {
 
 <template>
   <div :class="$style.container">
-    <a-icon name="tabler:certificate" :size="32" color="#ff007f" />
+    <emoine-icon />
     <div :class="$style.formContainer">
       <base-input v-model="userName" placeholder="ユーザー名を入力" />
       <base-input v-model="description" placeholder="説明文を入力" />
diff --git a/src/components/EventDetail/EventTokens.vue b/src/components/EventDetail/EventTokens.vue
index 2df76f7..3675328 100644
--- a/src/components/EventDetail/EventTokens.vue
+++ b/src/components/EventDetail/EventTokens.vue
@@ -17,6 +17,10 @@ const toggleNewToken = () => {
 
 <template>
   <div :class="$style.container">
+    <h2 :class="$style.heading">
+      <a-icon name="tabler:certificate" :size="56" color="#ff007f" />
+      <p>Tokens</p>
+    </h2>
     <ul :class="$style.tokenList">
       <li
         v-for="token in tokens"
@@ -41,15 +45,20 @@ const toggleNewToken = () => {
 </template>
 
 <style lang="scss" module>
-.tabs {
-  margin: 0 20%;
+.container {
 }
 .tokenList {
   list-style: none;
   background-color: white;
 }
+.heading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
 .tokenListItem {
-  padding: 4px 0px;
+  padding: 0.25rem 0;
+  margin-top: 1rem;
   &:not(:last-child) {
     border-bottom: 1px solid $background-secondary;
   }
diff --git a/src/components/UI/EmoineIcon.vue b/src/components/UI/EmoineIcon.vue
new file mode 100644
index 0000000..26d3a9b
--- /dev/null
+++ b/src/components/UI/EmoineIcon.vue
@@ -0,0 +1,24 @@
+<template>
+  <svg
+    width="46"
+    height="46"
+    viewBox="0 0 46 46"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      id="69b9c233-a578-4f3f-927b-d302c9c42dec 1"
+      width="46"
+      height="46"
+      rx="23"
+      fill="#AAAAAA"
+    />
+    <path
+      id="Subtract"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M32.7921 27.023C33.8164 26.219 35 25.29 35 23C35 16.3726 29.6274 11 23 11C19.2302 11 13.0571 13.4 13.0571 13.4C13.0571 13.4 11 20.1424 11 23C11 29.6274 16.3726 35 23 35C25.0833 35 27.0426 34.4691 28.75 33.5353C30.5538 32.1183 30.7068 31.3287 30.9053 30.3046C31.0094 29.7674 31.126 29.1657 31.5 28.375C31.7542 27.8377 32.2509 27.4478 32.7921 27.023ZM27.5 20.5454C27.5 17.587 25.0167 15.25 22.0289 15.25C19.5266 15.25 18.5 18.0678 18.5 20.5454C18.5 22.2262 19.9875 22.1267 21.6706 22.0141C22.1081 21.9849 22.5588 21.9547 23 21.9547C23.7352 21.9547 24.4047 22.0484 24.9893 22.1302C26.5444 22.3479 27.5 22.4817 27.5 20.5454Z"
+      fill="#F6F6F6"
+    />
+  </svg>
+</template>

From c7065f9c236f5b7067dadd0c1d828116d2284de4 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 26 Jun 2023 14:02:46 +0900
Subject: [PATCH 3/9] =?UTF-8?q?=E3=81=A1=E3=82=87=E3=81=A3=E3=81=A8?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventDetail/EventTokenNew.vue | 10 +++++++++-
 src/components/EventDetail/EventTokens.vue   |  5 +----
 src/components/UI/BaseInput.vue              |  3 +++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/EventDetail/EventTokenNew.vue b/src/components/EventDetail/EventTokenNew.vue
index a63f494..af1cddf 100644
--- a/src/components/EventDetail/EventTokenNew.vue
+++ b/src/components/EventDetail/EventTokenNew.vue
@@ -39,7 +39,11 @@ const handleAddToken = async () => {
     <emoine-icon />
     <div :class="$style.formContainer">
       <base-input v-model="userName" placeholder="ユーザー名を入力" />
-      <base-input v-model="description" placeholder="説明文を入力" />
+      <base-input
+        v-model="description"
+        placeholder="説明文を入力"
+        :class="$style.description"
+      />
       <base-date-input v-model="expireDate" />
     </div>
     <div :class="$style.buttonContainer">
@@ -55,6 +59,7 @@ const handleAddToken = async () => {
 .container {
   display: flex;
   align-items: center;
+  width: 100%;
   height: 3.75rem;
   padding: 8px;
 }
@@ -68,6 +73,9 @@ const handleAddToken = async () => {
   padding-right: 20px;
   margin-left: 1.25rem;
 }
+.description {
+  flex-grow: 1;
+}
 .buttonContainer {
   display: flex;
   align-items: center;
diff --git a/src/components/EventDetail/EventTokens.vue b/src/components/EventDetail/EventTokens.vue
index 3675328..c98ed58 100644
--- a/src/components/EventDetail/EventTokens.vue
+++ b/src/components/EventDetail/EventTokens.vue
@@ -16,7 +16,7 @@ const toggleNewToken = () => {
 </script>
 
 <template>
-  <div :class="$style.container">
+  <div>
     <h2 :class="$style.heading">
       <a-icon name="tabler:certificate" :size="56" color="#ff007f" />
       <p>Tokens</p>
@@ -45,8 +45,6 @@ const toggleNewToken = () => {
 </template>
 
 <style lang="scss" module>
-.container {
-}
 .tokenList {
   list-style: none;
   background-color: white;
@@ -67,7 +65,6 @@ const toggleNewToken = () => {
   display: flex;
   justify-content: center;
   padding: 4px 0px;
-  margin: 0px 4px;
 }
 .newTokenButton {
   display: flex;
diff --git a/src/components/UI/BaseInput.vue b/src/components/UI/BaseInput.vue
index 9a90335..d02c920 100644
--- a/src/components/UI/BaseInput.vue
+++ b/src/components/UI/BaseInput.vue
@@ -38,5 +38,8 @@ const value = computed({
   &::placeholder {
     color: $text-secondary;
   }
+  &:focus {
+    border-color: black;
+  }
 }
 </style>

From a4734db852865a047f6cc5172f1c8eba2ebfaf19 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 29 Jun 2023 15:44:19 +0900
Subject: [PATCH 4/9] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E8=89=B2=E5=A4=89=E3=81=88=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/BaseButton.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/UI/BaseButton.vue b/src/components/UI/BaseButton.vue
index 205bd51..76cda20 100644
--- a/src/components/UI/BaseButton.vue
+++ b/src/components/UI/BaseButton.vue
@@ -26,7 +26,12 @@ const props = withDefaults(
 
   &[data-type='primary'] {
     color: white;
-    background-color: $color-primary;
+    background: linear-gradient(
+        0deg,
+        rgba(0, 0, 0, 0.1) 0%,
+        rgba(0, 0, 0, 0.1) 100%
+      ),
+      #ff007f;
   }
   &[data-type='secondary'] {
     color: $color-secondary;

From 6d4870955fce2ab85fa587d4ee8c838f3da46cc9 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 6 Jul 2023 16:37:41 +0900
Subject: [PATCH 5/9] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E6=8A=BC?=
 =?UTF-8?q?=E3=81=97=E3=81=9F=E3=82=89=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=81=8C=E5=87=BA=E3=81=A6=E3=81=8F=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventDetail/EventTokenItem.vue | 48 +++++++++++++++++-
 src/components/EventDetail/MenuModal.vue      | 49 +++++++++++++++++++
 2 files changed, 95 insertions(+), 2 deletions(-)
 create mode 100644 src/components/EventDetail/MenuModal.vue

diff --git a/src/components/EventDetail/EventTokenItem.vue b/src/components/EventDetail/EventTokenItem.vue
index 50500d8..9e5195f 100644
--- a/src/components/EventDetail/EventTokenItem.vue
+++ b/src/components/EventDetail/EventTokenItem.vue
@@ -3,10 +3,48 @@ import { Token } from '@/lib/apis'
 import { formatDate } from '@/utils/date'
 import AIcon from '@/components/UI/AIcon.vue'
 import EmoineIcon from '@/components/UI/EmoineIcon.vue'
+import { MenuItem } from '@/components/EventDetail/MenuModal.vue'
+import MenuModal from '@/components/EventDetail/MenuModal.vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 defineProps<{
   token: Token
 }>()
+
+const menuItems: MenuItem[] = [
+  {
+    key: 'delete',
+    label: 'Delete',
+    icon: 'ph:trash',
+    onClick: async () => {
+      try {
+        console.log('delete')
+      } catch {
+        console.error('error')
+      }
+    }
+  }
+]
+
+const isMenuModalOpen = ref(false)
+const toggleMenuModal = () => {
+  isMenuModalOpen.value = !isMenuModalOpen.value
+}
+
+const itemButtonRef = ref<HTMLButtonElement | undefined>()
+const handleClick = (e: MouseEvent) => {
+  if (!itemButtonRef.value) return
+  if (!itemButtonRef.value.contains(e.target as Node)) {
+    isMenuModalOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClick)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', handleClick)
+})
 </script>
 
 <template>
@@ -22,10 +60,15 @@ defineProps<{
       </p>
     </div>
     <div :class="$style.rightContainer">
-      <button :class="$style.dotsButton">
+      <button
+        ref="itemButtonRef"
+        :class="$style.dotsButton"
+        @click="toggleMenuModal"
+      >
         <a-icon name="ph:dots-three-light" :size="32" />
       </button>
     </div>
+    <menu-modal v-if="isMenuModalOpen" :menu-items="menuItems" />
   </div>
 </template>
 
@@ -35,6 +78,7 @@ defineProps<{
   align-items: center;
   height: 3.75rem;
   padding: 8px;
+  position: relative;
 }
 .leftContainer {
   display: flex;
@@ -70,7 +114,7 @@ defineProps<{
   display: flex;
   align-items: center;
   padding: 0 1.25rem;
-  width: 120px;
+  width: 5rem;
   height: 70%;
 }
 .dotsButton {
diff --git a/src/components/EventDetail/MenuModal.vue b/src/components/EventDetail/MenuModal.vue
new file mode 100644
index 0000000..4fdbdc1
--- /dev/null
+++ b/src/components/EventDetail/MenuModal.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import AIcon from '@/components/UI/AIcon.vue'
+
+export interface MenuItem {
+  key: string
+  label: string
+  icon: string
+  onClick: () => void
+}
+
+defineProps<{
+  menuItems: MenuItem[]
+}>()
+</script>
+
+<template>
+  <div :class="$style.container">
+    <ul :class="$style.menuItemList">
+      <li v-for="item in menuItems" :key="item.key" :class="$style.menuItem">
+        <button :class="$style.itemButton" @click="item.onClick">
+          <a-icon :name="item.icon" :size="24" />
+          {{ item.label }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" module>
+.container {
+  background-color: white;
+  position: absolute;
+  bottom: -1rem;
+  right: 3rem;
+  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
+}
+.menuItemList {
+  list-style: none;
+}
+.itemButton {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.5rem;
+  &:hover {
+    background-color: $background-secondary;
+  }
+}
+</style>

From a6ec230fe232d2d67572099bb9863578618c4a63 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 10 Jul 2023 20:44:00 +0900
Subject: [PATCH 6/9] =?UTF-8?q?menuModal=E3=81=AE=E3=83=AD=E3=82=B8?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=E3=82=92composables=E3=81=AB=E5=88=87?=
 =?UTF-8?q?=E3=82=8A=E5=88=86=E3=81=91=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventDetail/EventTokenItem.vue | 26 +++----------------
 src/components/EventDetail/EventTokenNew.vue  |  4 +--
 .../{EventDetail => UI}/MenuModal.vue         |  0
 src/composables/useMenuModal.ts               | 25 ++++++++++++++++++
 src/pages/admin/EventDetailPage.vue           |  8 ++++--
 5 files changed, 37 insertions(+), 26 deletions(-)
 rename src/components/{EventDetail => UI}/MenuModal.vue (100%)
 create mode 100644 src/composables/useMenuModal.ts

diff --git a/src/components/EventDetail/EventTokenItem.vue b/src/components/EventDetail/EventTokenItem.vue
index 9e5195f..ae79880 100644
--- a/src/components/EventDetail/EventTokenItem.vue
+++ b/src/components/EventDetail/EventTokenItem.vue
@@ -3,9 +3,9 @@ import { Token } from '@/lib/apis'
 import { formatDate } from '@/utils/date'
 import AIcon from '@/components/UI/AIcon.vue'
 import EmoineIcon from '@/components/UI/EmoineIcon.vue'
-import { MenuItem } from '@/components/EventDetail/MenuModal.vue'
-import MenuModal from '@/components/EventDetail/MenuModal.vue'
-import { onMounted, onUnmounted, ref } from 'vue'
+import MenuModal from '@/components/UI/MenuModal.vue'
+import { MenuItem } from '@/components/UI/MenuModal.vue'
+import { useMenuModal } from '@/composables/useMenuModal'
 
 defineProps<{
   token: Token
@@ -26,25 +26,7 @@ const menuItems: MenuItem[] = [
   }
 ]
 
-const isMenuModalOpen = ref(false)
-const toggleMenuModal = () => {
-  isMenuModalOpen.value = !isMenuModalOpen.value
-}
-
-const itemButtonRef = ref<HTMLButtonElement | undefined>()
-const handleClick = (e: MouseEvent) => {
-  if (!itemButtonRef.value) return
-  if (!itemButtonRef.value.contains(e.target as Node)) {
-    isMenuModalOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClick)
-})
-onUnmounted(() => {
-  document.removeEventListener('click', handleClick)
-})
+const [isMenuModalOpen, toggleMenuModal, itemButtonRef] = useMenuModal()
 </script>
 
 <template>
diff --git a/src/components/EventDetail/EventTokenNew.vue b/src/components/EventDetail/EventTokenNew.vue
index af1cddf..dc0e10a 100644
--- a/src/components/EventDetail/EventTokenNew.vue
+++ b/src/components/EventDetail/EventTokenNew.vue
@@ -23,8 +23,8 @@ const expireDate = ref('')
 const handleAddToken = async () => {
   // todo: error handling
   await apis.createToken({
-    user_id: userName.value, //fixme: 外部の人もあり得るので、user_nameの方が適切そう
-    meeting_id: meetingId, // fixme: 型が違う
+    user_id: userName.value, //fixme: 外部の人もあり得るので、usernameの方が適切そう
+    meeting_id: meetingId,
     expire_at: expireDate.value + ':00Z', // fixme: https://github.com/traPtitech/traPortfolio-Dashboard/pull/64#discussion_r1174958146
     description: description.value
   })
diff --git a/src/components/EventDetail/MenuModal.vue b/src/components/UI/MenuModal.vue
similarity index 100%
rename from src/components/EventDetail/MenuModal.vue
rename to src/components/UI/MenuModal.vue
diff --git a/src/composables/useMenuModal.ts b/src/composables/useMenuModal.ts
new file mode 100644
index 0000000..bfeb00b
--- /dev/null
+++ b/src/composables/useMenuModal.ts
@@ -0,0 +1,25 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export const useMenuModal = () => {
+  const isMenuModalOpen = ref(false)
+  const toggleMenuModal = () => {
+    isMenuModalOpen.value = !isMenuModalOpen.value
+  }
+
+  const itemButtonRef = ref<HTMLButtonElement | undefined>()
+  const handleClick = (e: MouseEvent) => {
+    if (!itemButtonRef.value) return
+    if (!itemButtonRef.value.contains(e.target as Node)) {
+      isMenuModalOpen.value = false
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener('click', handleClick)
+  })
+  onUnmounted(() => {
+    document.removeEventListener('click', handleClick)
+  })
+
+  return [isMenuModalOpen, toggleMenuModal, itemButtonRef]
+}
diff --git a/src/pages/admin/EventDetailPage.vue b/src/pages/admin/EventDetailPage.vue
index 7407876..7d56514 100644
--- a/src/pages/admin/EventDetailPage.vue
+++ b/src/pages/admin/EventDetailPage.vue
@@ -17,7 +17,11 @@ onMounted(fetchMeetings)
 </script>
 
 <template>
-  <event-tokens v-if="!!tokens" :tokens="tokens" />
+  <event-tokens v-if="!!tokens" :tokens="tokens" :class="$style.aaa" />
 </template>
 
-<style lang="scss" module></style>
+<style lang="scss" module>
+.aaa {
+  width: 1140px;
+}
+</style>

From 7ac7bb996a9453cbe56c85003568cab7b704efde Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 10 Jul 2023 20:46:14 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=E3=81=84=E3=82=89=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=E3=82=82=E3=81=AE=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/admin/EventDetailPage.vue | 27 ---------------------------
 src/router/index.ts                 |  6 ------
 2 files changed, 33 deletions(-)
 delete mode 100644 src/pages/admin/EventDetailPage.vue

diff --git a/src/pages/admin/EventDetailPage.vue b/src/pages/admin/EventDetailPage.vue
deleted file mode 100644
index 7d56514..0000000
--- a/src/pages/admin/EventDetailPage.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts" setup>
-import apis, { Token } from '@/lib/apis'
-import { onMounted, ref } from 'vue'
-import EventTokens from '@/components/EventDetail/EventTokens.vue'
-
-const tokens = ref<Token[]>()
-
-const fetchMeetings = async () => {
-  //todo: エラーハンドリング
-  const res = (
-    await apis.getMeetingTokens('3fa85f64-5717-4562-b3fc-2c963f66afa6')
-  ).data
-  tokens.value = res
-}
-
-onMounted(fetchMeetings)
-</script>
-
-<template>
-  <event-tokens v-if="!!tokens" :tokens="tokens" :class="$style.aaa" />
-</template>
-
-<style lang="scss" module>
-.aaa {
-  width: 1140px;
-}
-</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index aaa6866..6db72d9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -17,12 +17,6 @@ const routes: RouteRecordRaw[] = [
     name: 'AdminMeetings',
     component: () => import('@/pages/admin/MeetingsPage.vue')
   },
-  {
-    path: '/admin/meetings/:id',
-    name: 'AdminMeetingDetail',
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    component: () => import('@/pages/admin/EventDetailPage.vue') // TODO: ページ作成したらここに書く
-  },
   {
     path: '/:path(.*)',
     name: 'NotFound',

From 871fc7a2491f1a95c9fe33c12649da077ed8500c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 11 Jul 2023 14:03:29 +0900
Subject: [PATCH 8/9] =?UTF-8?q?=E3=82=B9=E3=83=8D=E3=83=BC=E3=82=AF?=
 =?UTF-8?q?=E3=82=B1=E3=83=BC=E3=82=B9=E3=81=8B=E3=82=89=E3=83=91=E3=82=B9?=
 =?UTF-8?q?=E3=82=AB=E3=83=AB=E3=82=B1=E3=83=BC=E3=82=B9=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EventDetail/EventTokenItem.vue | 4 ++--
 src/components/EventDetail/EventTokenNew.vue  | 6 +++---
 src/composables/useMenuModal.ts               | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/EventDetail/EventTokenItem.vue b/src/components/EventDetail/EventTokenItem.vue
index ae79880..3077779 100644
--- a/src/components/EventDetail/EventTokenItem.vue
+++ b/src/components/EventDetail/EventTokenItem.vue
@@ -33,12 +33,12 @@ const [isMenuModalOpen, toggleMenuModal, itemButtonRef] = useMenuModal()
   <div :class="$style.container">
     <emoine-icon />
     <div :class="$style.leftContainer">
-      <p :class="$style.userId">{{ token.user_id }}</p>
+      <p :class="$style.userId">{{ token.username }}</p>
       <p :class="$style.description">{{ token.description }}</p>
     </div>
     <div :class="$style.middleContainer">
       <p :class="$style.expireDate">
-        {{ formatDate(new Date(token.expire_at)) }}
+        {{ formatDate(new Date(token.expireAt)) }}
       </p>
     </div>
     <div :class="$style.rightContainer">
diff --git a/src/components/EventDetail/EventTokenNew.vue b/src/components/EventDetail/EventTokenNew.vue
index dc0e10a..ffce44b 100644
--- a/src/components/EventDetail/EventTokenNew.vue
+++ b/src/components/EventDetail/EventTokenNew.vue
@@ -23,9 +23,9 @@ const expireDate = ref('')
 const handleAddToken = async () => {
   // todo: error handling
   await apis.createToken({
-    user_id: userName.value, //fixme: 外部の人もあり得るので、usernameの方が適切そう
-    meeting_id: meetingId,
-    expire_at: expireDate.value + ':00Z', // fixme: https://github.com/traPtitech/traPortfolio-Dashboard/pull/64#discussion_r1174958146
+    username: userName.value,
+    meetingId: meetingId,
+    expireAt: expireDate.value + ':00Z', // fixme: https://github.com/traPtitech/traPortfolio-Dashboard/pull/64#discussion_r1174958146
     description: description.value
   })
   userName.value = ''
diff --git a/src/composables/useMenuModal.ts b/src/composables/useMenuModal.ts
index bfeb00b..74375ec 100644
--- a/src/composables/useMenuModal.ts
+++ b/src/composables/useMenuModal.ts
@@ -21,5 +21,5 @@ export const useMenuModal = () => {
     document.removeEventListener('click', handleClick)
   })
 
-  return [isMenuModalOpen, toggleMenuModal, itemButtonRef]
+  return [isMenuModalOpen, toggleMenuModal, itemButtonRef] as const
 }

From 70cf1803b9aa8a5cf7ec425af2d1e05de2e1113e Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 15 Jul 2023 21:48:54 +0900
Subject: [PATCH 9/9] fix

---
 src/components/EventDetail/EventTokenItem.vue | 19 ++++++++-----------
 src/components/UI/DateChip.vue                |  1 -
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/EventDetail/EventTokenItem.vue b/src/components/EventDetail/EventTokenItem.vue
index 3077779..4c63633 100644
--- a/src/components/EventDetail/EventTokenItem.vue
+++ b/src/components/EventDetail/EventTokenItem.vue
@@ -18,6 +18,7 @@ const menuItems: MenuItem[] = [
     icon: 'ph:trash',
     onClick: async () => {
       try {
+        //todo: deleteのAPIが生えてない
         console.log('delete')
       } catch {
         console.error('error')
@@ -32,16 +33,16 @@ const [isMenuModalOpen, toggleMenuModal, itemButtonRef] = useMenuModal()
 <template>
   <div :class="$style.container">
     <emoine-icon />
-    <div :class="$style.leftContainer">
+    <div :class="[$style.containerBase, $style.leftContainer]">
       <p :class="$style.userId">{{ token.username }}</p>
       <p :class="$style.description">{{ token.description }}</p>
     </div>
-    <div :class="$style.middleContainer">
+    <div :class="[$style.containerBase, $style.middleContainer]">
       <p :class="$style.expireDate">
         {{ formatDate(new Date(token.expireAt)) }}
       </p>
     </div>
-    <div :class="$style.rightContainer">
+    <div :class="[$style.containerBase, $style.rightContainer]">
       <button
         ref="itemButtonRef"
         :class="$style.dotsButton"
@@ -62,12 +63,14 @@ const [isMenuModalOpen, toggleMenuModal, itemButtonRef] = useMenuModal()
   padding: 8px;
   position: relative;
 }
-.leftContainer {
+.containerBase {
   display: flex;
   align-items: center;
+  height: 70%;
+}
+.leftContainer {
   flex-grow: 1;
   border-right: 1px solid $color-secondary;
-  height: 70%;
   padding-right: 20px;
 }
 .userId {
@@ -82,22 +85,16 @@ const [isMenuModalOpen, toggleMenuModal, itemButtonRef] = useMenuModal()
   color: $text-secondary;
 }
 .middleContainer {
-  display: flex;
-  align-items: center;
   border-right: 1px solid $color-secondary;
   padding: 0 1.25rem;
   width: 8.75rem;
-  height: 70%;
 }
 .expireDate {
   color: $color-secondary;
 }
 .rightContainer {
-  display: flex;
-  align-items: center;
   padding: 0 1.25rem;
   width: 5rem;
-  height: 70%;
 }
 .dotsButton {
   border-radius: 50%;
diff --git a/src/components/UI/DateChip.vue b/src/components/UI/DateChip.vue
index 4dd942e..01b5376 100644
--- a/src/components/UI/DateChip.vue
+++ b/src/components/UI/DateChip.vue
@@ -72,4 +72,3 @@ const dateDiffText = computed(() => {
   color: #ffffff;
 }
 </style>
-@/utils/date