From 49239c415a91ac36f2b3266fbf2cc6b8ea3ebaff Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 12 Oct 2022 16:59:22 +0900
Subject: [PATCH 01/10] add userAccount page

---
 src/components/Layout/PageContainer.vue     | 10 +--
 src/components/UserAccounts/AccountItem.vue | 65 ++++++++++++++
 src/components/UserAccounts/ServiceLogo.vue | 43 +++++++++
 src/consts/services.ts                      | 47 ++++++++++
 src/pages/UserAccounts.vue                  | 99 +++++++++++++++++++++
 src/router/index.ts                         |  6 ++
 6 files changed, 262 insertions(+), 8 deletions(-)
 create mode 100644 src/components/UserAccounts/AccountItem.vue
 create mode 100644 src/components/UserAccounts/ServiceLogo.vue
 create mode 100644 src/consts/services.ts
 create mode 100644 src/pages/UserAccounts.vue

diff --git a/src/components/Layout/PageContainer.vue b/src/components/Layout/PageContainer.vue
index aba80251..776b25f8 100644
--- a/src/components/Layout/PageContainer.vue
+++ b/src/components/Layout/PageContainer.vue
@@ -1,15 +1,9 @@
+<script setup lang="ts"></script>
+
 <template>
   <main :class="$style.container"><slot /></main>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'PageContainer'
-})
-</script>
-
 <style lang="scss" module>
 .container {
   width: 100%;
diff --git a/src/components/UserAccounts/AccountItem.vue b/src/components/UserAccounts/AccountItem.vue
new file mode 100644
index 00000000..7fff3dce
--- /dev/null
+++ b/src/components/UserAccounts/AccountItem.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { Account } from '/@/lib/apis'
+import ServiceLogo from '/@/components/UserAccounts/ServiceLogo.vue'
+import Icon from '/@/components/UI/Icon.vue'
+
+interface Props {
+  account: Account
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <router-link
+    :to="`/user/accounts/${props.account.id}/edit`"
+    :class="$style.link"
+  >
+    <div :class="$style.container">
+      <div :class="$style.displayNameContainer">
+        <p :class="$style.displayName">{{ props.account.displayName }}</p>
+        <service-logo :service="props.account.type" />
+      </div>
+      <p :class="$style.url"><icon name="mdi:link" />{{ props.account.url }}</p>
+      <p :class="$style.prPermittion">
+        <icon name="mdi:advertisements" />
+        <span>
+          traP広報にて言及を許可{{
+            props.account.prPermitted ? 'する' : 'しない'
+          }}
+        </span>
+      </p>
+    </div>
+  </router-link>
+</template>
+
+<style lang="scss" module>
+.link {
+  color: inherit;
+  text-decoration: none;
+}
+.container {
+  padding: 8px;
+}
+.displayNameContainer {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.displayName {
+  color: $color-primary;
+  font-size: 18px;
+}
+.url {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.prPermittion {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+</style>
diff --git a/src/components/UserAccounts/ServiceLogo.vue b/src/components/UserAccounts/ServiceLogo.vue
new file mode 100644
index 00000000..34569d69
--- /dev/null
+++ b/src/components/UserAccounts/ServiceLogo.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import Icon from '/@/components/UI/Icon.vue'
+import type { AccountType } from '/@/lib/apis'
+import type { Service } from '/@/consts/services'
+import { serviceArray } from '/@/consts/services'
+
+interface Props {
+  service: AccountType
+}
+
+const props = defineProps<Props>()
+
+const validateService = (service: Service | undefined) => {
+  if (service === undefined) {
+    return {
+      name: 'Unknown',
+      icon: 'mdi:help-circle'
+    }
+  }
+  return service
+}
+</script>
+
+<template>
+  <div :class="$style.logo">
+    <Icon
+      :name="validateService(serviceArray[props.service]).icon"
+      :class="$style.icon"
+    />
+    {{ validateService(serviceArray[props.service]).name }}
+  </div>
+</template>
+
+<style lang="scss" module>
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.icon {
+  display: flex;
+}
+</style>
diff --git a/src/consts/services.ts b/src/consts/services.ts
new file mode 100644
index 00000000..e37f9ffd
--- /dev/null
+++ b/src/consts/services.ts
@@ -0,0 +1,47 @@
+export interface Service {
+  name: string
+  icon: string
+}
+
+export const serviceArray: Service[] = [
+  {
+    name: 'HomePage',
+    icon: 'mdi:home'
+  },
+  {
+    name: 'Blog',
+    icon: 'mdi:post-outline'
+  },
+  {
+    name: 'Twitter',
+    icon: 'mdi:twitter'
+  },
+  {
+    name: 'Facebook',
+    icon: 'mdi:facebook'
+  },
+  {
+    name: 'pixiv',
+    icon: 'simple-icons:pixiv'
+  },
+  {
+    name: 'Github',
+    icon: 'mdi:github'
+  },
+  {
+    name: 'Qiita',
+    icon: 'simple-icons:qiita'
+  },
+  {
+    name: 'Zenn',
+    icon: 'simple-icons:zenn'
+  },
+  {
+    name: 'AtCoder',
+    icon: 'atcoder'
+  },
+  {
+    name: 'SoundCloud',
+    icon: 'mdi:soundcloud'
+  }
+]
diff --git a/src/pages/UserAccounts.vue b/src/pages/UserAccounts.vue
new file mode 100644
index 00000000..b89eb7fa
--- /dev/null
+++ b/src/pages/UserAccounts.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import ContentHeader from '/@/components/Layout/ContentHeader.vue'
+import PageContainer from '/@/components/Layout/PageContainer.vue'
+import BaseButton from '/@/components/UI/BaseButton.vue'
+
+import type { Account } from '/@/lib/apis'
+import AccountItem from '/@/components/UserAccounts/AccountItem.vue'
+
+const accounts: Account[] = [
+  {
+    id: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
+    displayName: 'mehm8128',
+    type: 5,
+    prPermitted: true,
+    url: 'https://github.com/mehm8128'
+  },
+  {
+    id: '3fa85f64-5717-4562-b3fc-2c963f66afa7',
+    displayName: 'mehm8128',
+    type: 8,
+    prPermitted: false,
+    url: 'https://atcoder.jp/users/mehm8128'
+  },
+  {
+    id: '3fa85f64-5717-4562-b3fc-2c963f66afa8',
+    displayName: 'mehm8128',
+    type: 1,
+    prPermitted: true,
+    url: 'https://trap.jp/author/mehm8128/'
+  }
+]
+</script>
+
+<template>
+  <page-container>
+    <div :class="$style.headerContainer">
+      <content-header
+        icon-name="mdi:account-circle-outline"
+        :header-texts="[
+          { title: 'Profile', url: '/user' },
+          { title: 'Accounts', url: '/user/accounts' }
+        ]"
+        detail="アカウント情報を変更します。"
+        :class="$style.header"
+      />
+      <router-link to="/user/accounts/new" :class="$style.link">
+        <BaseButton type="primary" icon="mdi:account">New</BaseButton>
+      </router-link>
+    </div>
+    <ul :class="$style.accountList">
+      <li v-for="account in accounts" :key="account.id">
+        <account-item :account="account" />
+      </li>
+    </ul>
+
+    <router-link to="/user" :class="$style.link">
+      <BaseButton
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+      >
+        Back
+      </BaseButton>
+    </router-link>
+  </page-container>
+</template>
+
+<style lang="scss" module>
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.header {
+  margin: 4rem 0 2rem;
+}
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+.accountList {
+  list-style: none;
+  padding: 8px 0;
+  li {
+    border: 1px solid $color-primary-text;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    &:hover {
+      background-color: $color-background-dim;
+    }
+  }
+}
+.backButton {
+  margin-top: 32px;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 9323b8f3..5140f6fb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 const Index = () => import('/@/pages/Index.vue')
 const User = () => import('/@/pages/User.vue')
+const UserAccounts = () => import('/@/pages/UserAccounts.vue')
 const Projects = () => import('/@/pages/Projects.vue')
 const Project = () => import('/@/pages/Project.vue')
 const Events = () => import('/@/pages/Events.vue')
@@ -55,6 +56,11 @@ const routes = [
     path: '/user',
     name: 'Profile',
     component: User
+  },
+  {
+    path: '/user/accounts',
+    name: 'UserAccounts',
+    component: UserAccounts
   }
 ]
 

From 50ed0c78f237bb7f7393342ba80df87ba6f9eae9 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 15 Oct 2022 20:59:49 +0900
Subject: [PATCH 02/10] remove mock

---
 src/pages/UserAccounts.vue | 38 +++++++++++++-------------------------
 1 file changed, 13 insertions(+), 25 deletions(-)

diff --git a/src/pages/UserAccounts.vue b/src/pages/UserAccounts.vue
index b89eb7fa..6b110a68 100644
--- a/src/pages/UserAccounts.vue
+++ b/src/pages/UserAccounts.vue
@@ -3,32 +3,18 @@ import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 
-import type { Account } from '/@/lib/apis'
 import AccountItem from '/@/components/UserAccounts/AccountItem.vue'
+import { ref } from 'vue'
+import apis from '/@/lib/apis'
+import useUserDataFetcher from '/@/use/userDataFetcher'
 
-const accounts: Account[] = [
-  {
-    id: '3fa85f64-5717-4562-b3fc-2c963f66afa6',
-    displayName: 'mehm8128',
-    type: 5,
-    prPermitted: true,
-    url: 'https://github.com/mehm8128'
-  },
-  {
-    id: '3fa85f64-5717-4562-b3fc-2c963f66afa7',
-    displayName: 'mehm8128',
-    type: 8,
-    prPermitted: false,
-    url: 'https://atcoder.jp/users/mehm8128'
-  },
-  {
-    id: '3fa85f64-5717-4562-b3fc-2c963f66afa8',
-    displayName: 'mehm8128',
-    type: 1,
-    prPermitted: true,
-    url: 'https://trap.jp/author/mehm8128/'
-  }
-]
+const userId = ref('c714a848-2886-4c10-a313-de9bc61cb2bb')
+// todo: get meが実装されたらそれを使う
+
+const { data: accounts, fetcherState: fetcherState } = useUserDataFetcher(
+  userId,
+  userId => apis.getUserAccounts(userId)
+)
 </script>
 
 <template>
@@ -47,11 +33,13 @@ const accounts: Account[] = [
         <BaseButton type="primary" icon="mdi:account">New</BaseButton>
       </router-link>
     </div>
-    <ul :class="$style.accountList">
+    <ul v-if="fetcherState === 'loaded'" :class="$style.accountList">
       <li v-for="account in accounts" :key="account.id">
         <account-item :account="account" />
       </li>
     </ul>
+    <p v-else-if="fetcherState === 'loading'">ローディング中...</p>
+    <p v-else-if="fetcherState === 'error'">エラーが発生しました</p>
 
     <router-link to="/user" :class="$style.link">
       <BaseButton

From d800e9877b0811198a715b1809e059d0211f3d18 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sun, 16 Oct 2022 22:02:11 +0900
Subject: [PATCH 03/10] add services

---
 src/consts/services.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/consts/services.ts b/src/consts/services.ts
index e37f9ffd..d9f46f25 100644
--- a/src/consts/services.ts
+++ b/src/consts/services.ts
@@ -38,10 +38,18 @@ export const serviceArray: Service[] = [
   },
   {
     name: 'AtCoder',
-    icon: 'atcoder'
+    icon: 'atcoder' //アイコンは保留
   },
   {
     name: 'SoundCloud',
     icon: 'mdi:soundcloud'
+  },
+  {
+    name: 'HackTheBox',
+    icon: 'simple-icons:hackthebox'
+  },
+  {
+    name: 'CTFtime',
+    icon: 'ctftime' //アイコンは保留
   }
 ]

From 95e627503183f454abf66409a4d4cb24a1d93b85 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 17 Oct 2022 21:10:51 +0900
Subject: [PATCH 04/10] add not advertise icon

---
 src/components/UserAccounts/AccountItem.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/UserAccounts/AccountItem.vue b/src/components/UserAccounts/AccountItem.vue
index 7fff3dce..2379b0ee 100644
--- a/src/components/UserAccounts/AccountItem.vue
+++ b/src/components/UserAccounts/AccountItem.vue
@@ -22,7 +22,8 @@ const props = defineProps<Props>()
       </div>
       <p :class="$style.url"><icon name="mdi:link" />{{ props.account.url }}</p>
       <p :class="$style.prPermittion">
-        <icon name="mdi:advertisements" />
+        <icon v-if="props.account.prPermitted" name="mdi:advertisements" />
+        <icon v-else name="mdi:advertisements-off" />
         <span>
           traP広報にて言及を許可{{
             props.account.prPermitted ? 'する' : 'しない'

From b02b1a83d42c83815347fc95aef34f5aa0ac26cf Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 19 Oct 2022 21:00:13 +0900
Subject: [PATCH 05/10] extract validator

---
 src/components/UserAccounts/ServiceLogo.vue | 12 +-----------
 src/use/validateService.ts                  | 11 +++++++++++
 2 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 src/use/validateService.ts

diff --git a/src/components/UserAccounts/ServiceLogo.vue b/src/components/UserAccounts/ServiceLogo.vue
index 34569d69..daf4f700 100644
--- a/src/components/UserAccounts/ServiceLogo.vue
+++ b/src/components/UserAccounts/ServiceLogo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import Icon from '/@/components/UI/Icon.vue'
 import type { AccountType } from '/@/lib/apis'
-import type { Service } from '/@/consts/services'
+import { validateService } from '/@/use/validateService'
 import { serviceArray } from '/@/consts/services'
 
 interface Props {
@@ -9,16 +9,6 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-
-const validateService = (service: Service | undefined) => {
-  if (service === undefined) {
-    return {
-      name: 'Unknown',
-      icon: 'mdi:help-circle'
-    }
-  }
-  return service
-}
 </script>
 
 <template>
diff --git a/src/use/validateService.ts b/src/use/validateService.ts
new file mode 100644
index 00000000..eca2b458
--- /dev/null
+++ b/src/use/validateService.ts
@@ -0,0 +1,11 @@
+import { Service } from '/@/consts/services'
+
+export const validateService = (service: Service | undefined) => {
+  if (service === undefined) {
+    return {
+      name: 'Unknown',
+      icon: 'mdi:help-circle'
+    }
+  }
+  return service
+}

From a18814452f6674cbf9877908c73516a4d2fddc1c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 19 Oct 2022 21:01:12 +0900
Subject: [PATCH 06/10] change px to rem

---
 src/components/UserAccounts/AccountItem.vue | 12 ++++++------
 src/pages/UserAccounts.vue                  |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/UserAccounts/AccountItem.vue b/src/components/UserAccounts/AccountItem.vue
index 2379b0ee..cd8e7e56 100644
--- a/src/components/UserAccounts/AccountItem.vue
+++ b/src/components/UserAccounts/AccountItem.vue
@@ -40,27 +40,27 @@ const props = defineProps<Props>()
   text-decoration: none;
 }
 .container {
-  padding: 8px;
+  padding: 0.5rem;
 }
 .displayNameContainer {
-  margin-bottom: 12px;
+  margin-bottom: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .displayName {
   color: $color-primary;
-  font-size: 18px;
+  font-size: 1.125rem;
 }
 .url {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
 }
 .prPermittion {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-top: 8px;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
 }
 </style>
diff --git a/src/pages/UserAccounts.vue b/src/pages/UserAccounts.vue
index 6b110a68..fe33a6bb 100644
--- a/src/pages/UserAccounts.vue
+++ b/src/pages/UserAccounts.vue
@@ -68,11 +68,11 @@ const { data: accounts, fetcherState: fetcherState } = useUserDataFetcher(
 }
 .accountList {
   list-style: none;
-  padding: 8px 0;
+  padding: 0.5rem 0;
   li {
     border: 1px solid $color-primary-text;
     border-radius: 8px;
-    margin-bottom: 8px;
+    margin-bottom: 0.5rem;
     &:last-child {
       margin-bottom: 0;
     }
@@ -82,6 +82,6 @@ const { data: accounts, fetcherState: fetcherState } = useUserDataFetcher(
   }
 }
 .backButton {
-  margin-top: 32px;
+  margin-top: 2rem;
 }
 </style>

From 6d87f086c80c0a965e2255fb65a1cd4277ba5111 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 20 Oct 2022 23:14:28 +0900
Subject: [PATCH 07/10] fix services

---
 src/components/UserAccounts/ServiceLogo.vue | 12 +++----
 src/consts/services.ts                      | 39 ++++++++++++---------
 src/use/validateService.ts                  | 11 ------
 3 files changed, 26 insertions(+), 36 deletions(-)
 delete mode 100644 src/use/validateService.ts

diff --git a/src/components/UserAccounts/ServiceLogo.vue b/src/components/UserAccounts/ServiceLogo.vue
index daf4f700..e8df3701 100644
--- a/src/components/UserAccounts/ServiceLogo.vue
+++ b/src/components/UserAccounts/ServiceLogo.vue
@@ -1,23 +1,19 @@
 <script lang="ts" setup>
 import Icon from '/@/components/UI/Icon.vue'
 import type { AccountType } from '/@/lib/apis'
-import { validateService } from '/@/use/validateService'
-import { serviceArray } from '/@/consts/services'
+import { services } from '/@/consts/services'
 
 interface Props {
   service: AccountType
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 </script>
 
 <template>
   <div :class="$style.logo">
-    <Icon
-      :name="validateService(serviceArray[props.service]).icon"
-      :class="$style.icon"
-    />
-    {{ validateService(serviceArray[props.service]).name }}
+    <Icon :name="services[service].icon" :class="$style.icon" />
+    {{ services[service].name }}
   </div>
 </template>
 
diff --git a/src/consts/services.ts b/src/consts/services.ts
index d9f46f25..35750759 100644
--- a/src/consts/services.ts
+++ b/src/consts/services.ts
@@ -1,55 +1,60 @@
-export interface Service {
-  name: string
-  icon: string
-}
+import type { AccountType } from '/@/lib/apis'
 
-export const serviceArray: Service[] = [
+export type Service = Record<
+  AccountType,
   {
+    name: string
+    icon: string
+  }
+>
+
+export const services: Service = {
+  0: {
     name: 'HomePage',
     icon: 'mdi:home'
   },
-  {
+  1: {
     name: 'Blog',
     icon: 'mdi:post-outline'
   },
-  {
+  2: {
     name: 'Twitter',
     icon: 'mdi:twitter'
   },
-  {
+  3: {
     name: 'Facebook',
     icon: 'mdi:facebook'
   },
-  {
+  4: {
     name: 'pixiv',
     icon: 'simple-icons:pixiv'
   },
-  {
+  5: {
     name: 'Github',
     icon: 'mdi:github'
   },
-  {
+  6: {
     name: 'Qiita',
     icon: 'simple-icons:qiita'
   },
-  {
+  7: {
     name: 'Zenn',
     icon: 'simple-icons:zenn'
   },
-  {
+  8: {
     name: 'AtCoder',
     icon: 'atcoder' //アイコンは保留
   },
-  {
+  9: {
     name: 'SoundCloud',
     icon: 'mdi:soundcloud'
   },
-  {
+  10: {
     name: 'HackTheBox',
     icon: 'simple-icons:hackthebox'
   },
-  {
+  11: {
     name: 'CTFtime',
     icon: 'ctftime' //アイコンは保留
   }
-]
+}
diff --git a/src/use/validateService.ts b/src/use/validateService.ts
deleted file mode 100644
index eca2b458..00000000
--- a/src/use/validateService.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Service } from '/@/consts/services'
-
-export const validateService = (service: Service | undefined) => {
-  if (service === undefined) {
-    return {
-      name: 'Unknown',
-      icon: 'mdi:help-circle'
-    }
-  }
-  return service
-}

From 07a74ad1bbabfd7c567fa5998b5f4ee2e283e97d Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 20 Oct 2022 23:14:39 +0900
Subject: [PATCH 08/10] fix

---
 src/components/UserAccounts/AccountItem.vue | 23 ++++++++-------------
 src/pages/UserAccounts.vue                  |  5 ++---
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/src/components/UserAccounts/AccountItem.vue b/src/components/UserAccounts/AccountItem.vue
index cd8e7e56..82a7b16c 100644
--- a/src/components/UserAccounts/AccountItem.vue
+++ b/src/components/UserAccounts/AccountItem.vue
@@ -7,27 +7,22 @@ interface Props {
   account: Account
 }
 
-const props = defineProps<Props>()
+defineProps<Props>()
 </script>
 
 <template>
-  <router-link
-    :to="`/user/accounts/${props.account.id}/edit`"
-    :class="$style.link"
-  >
+  <router-link :to="`/user/accounts/${account.id}/edit`" :class="$style.link">
     <div :class="$style.container">
       <div :class="$style.displayNameContainer">
-        <p :class="$style.displayName">{{ props.account.displayName }}</p>
-        <service-logo :service="props.account.type" />
+        <p :class="$style.displayName">{{ account.displayName }}</p>
+        <service-logo :service="account.type" />
       </div>
-      <p :class="$style.url"><icon name="mdi:link" />{{ props.account.url }}</p>
-      <p :class="$style.prPermittion">
-        <icon v-if="props.account.prPermitted" name="mdi:advertisements" />
+      <p :class="$style.url"><icon name="mdi:link" />{{ account.url }}</p>
+      <p :class="$style.prPermission">
+        <icon v-if="account.prPermitted" name="mdi:advertisements" />
         <icon v-else name="mdi:advertisements-off" />
         <span>
-          traP広報にて言及を許可{{
-            props.account.prPermitted ? 'する' : 'しない'
-          }}
+          traP広報にて言及を許可{{ account.prPermitted ? 'する' : 'しない' }}
         </span>
       </p>
     </div>
@@ -57,7 +52,7 @@ const props = defineProps<Props>()
   align-items: center;
   gap: 0.5rem;
 }
-.prPermittion {
+.prPermission {
   display: flex;
   align-items: center;
   gap: 0.5rem;
diff --git a/src/pages/UserAccounts.vue b/src/pages/UserAccounts.vue
index fe33a6bb..2489dcb9 100644
--- a/src/pages/UserAccounts.vue
+++ b/src/pages/UserAccounts.vue
@@ -11,9 +11,8 @@ import useUserDataFetcher from '/@/use/userDataFetcher'
 const userId = ref('c714a848-2886-4c10-a313-de9bc61cb2bb')
 // todo: get meが実装されたらそれを使う
 
-const { data: accounts, fetcherState: fetcherState } = useUserDataFetcher(
-  userId,
-  userId => apis.getUserAccounts(userId)
+const { data: accounts, fetcherState } = useUserDataFetcher(userId, userId =>
+  apis.getUserAccounts(userId)
 )
 </script>
 

From 631dfc2ec35bb50734ee9f64ebacbada732224ac Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 21 Oct 2022 00:02:40 +0900
Subject: [PATCH 09/10] use AccountType to key

---
 src/consts/services.ts | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/consts/services.ts b/src/consts/services.ts
index 35750759..a0f1fbfd 100644
--- a/src/consts/services.ts
+++ b/src/consts/services.ts
@@ -1,4 +1,4 @@
-import type { AccountType } from '/@/lib/apis'
+import { AccountType } from '/@/lib/apis'
 
 export type Service = Record<
   AccountType,
@@ -9,51 +9,51 @@ export type Service = Record<
 >
 
 export const services: Service = {
-  0: {
+  [AccountType.homepage]: {
     name: 'HomePage',
     icon: 'mdi:home'
   },
-  1: {
+  [AccountType.blog]: {
     name: 'Blog',
     icon: 'mdi:post-outline'
   },
-  2: {
+  [AccountType.twitter]: {
     name: 'Twitter',
     icon: 'mdi:twitter'
   },
-  3: {
+  [AccountType.facebook]: {
     name: 'Facebook',
     icon: 'mdi:facebook'
   },
-  4: {
+  [AccountType.pixiv]: {
     name: 'pixiv',
     icon: 'simple-icons:pixiv'
   },
-  5: {
+  [AccountType.github]: {
     name: 'Github',
     icon: 'mdi:github'
   },
-  6: {
+  [AccountType.qiita]: {
     name: 'Qiita',
     icon: 'simple-icons:qiita'
   },
-  7: {
+  [AccountType.zenn]: {
     name: 'Zenn',
     icon: 'simple-icons:zenn'
   },
-  8: {
+  [AccountType.atcoder]: {
     name: 'AtCoder',
     icon: 'atcoder' //アイコンは保留
   },
-  9: {
+  [AccountType.soundcloud]: {
     name: 'SoundCloud',
     icon: 'mdi:soundcloud'
   },
-  10: {
+  [AccountType.hackthebox]: {
     name: 'HackTheBox',
     icon: 'simple-icons:hackthebox'
   },
-  11: {
+  [AccountType.ctftime]: {
     name: 'CTFtime',
     icon: 'ctftime' //アイコンは保留
   }

From a2dc4815af87e059c26c7b1d5353a3864e737ab2 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sun, 23 Oct 2022 20:44:48 +0900
Subject: [PATCH 10/10] add padding-bottom

---
 src/components/Layout/PageContainer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layout/PageContainer.vue b/src/components/Layout/PageContainer.vue
index 776b25f8..067512ea 100644
--- a/src/components/Layout/PageContainer.vue
+++ b/src/components/Layout/PageContainer.vue
@@ -9,6 +9,6 @@
   width: 100%;
   max-width: 1024px;
   margin: 0 auto;
-  padding: 0 3rem;
+  padding: 0 3rem 3rem;
 }
 </style>