format

frontend/src/assets/main.css

@@ -2,13 +2,13 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
 
 :root {
-    --accent-color: #FF922B;
-    --primary-text-color: #1111111;
-    --dimmed-text-color: #888888;
-    --dimmed-border-color: #DDDDDD;
+  --accent-color: #ff922b;
+  --primary-text-color: #1111111;
+  --dimmed-text-color: #888888;
+  --dimmed-border-color: #dddddd;
 
-    font-family: "Noto Sans JP", sans-serif;
-    font-optical-sizing: auto;
-    font-weight: normal;
-    font-style: normal;
+  font-family: 'Noto Sans JP', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: normal;
+  font-style: normal;
 }

frontend/src/components/Avatar.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 defineProps<{
-  name: string,
-  size: string
-}>()
-const endpoint = "https://q.trap.jp/api/v3"
+  name: string;
+  size: string;
+}>();
+const endpoint = 'https://q.trap.jp/api/v3';
 </script>
 
 <template>
-<img class="avatar" :src="`${endpoint}/public/icon/${name}`" />
+  <img class="avatar" :src="`${endpoint}/public/icon/${name}`" />
 </template>
 
 <style scoped>

frontend/src/components/Button.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 defineProps<{
-  disabled: boolean
-}>()
+  disabled: boolean;
+}>();
 </script>
 
 <template>
-    <button type="button" :disabled="disabled"><slot /></button>
+  <button type="button" :disabled="disabled"><slot /></button>
 </template>
 
 <style lang="scss" scoped>

frontend/src/components/NewPostSection.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import Button from "./Button.vue"
-import Avatar from "./Avatar.vue"
-import {ref, computed} from "vue"
+import Button from './Button.vue';
+import Avatar from './Avatar.vue';
+import { ref, computed } from 'vue';
 
 defineProps<{
-  name: string,
-}>()
+  name: string;
+}>();
 
-const inputContent = ref('')
+const inputContent = ref('');
 const canPost = computed(() => {
-  return (inputContent.value.length != 0) && (inputContent.value.length <= 280)
-})
-
+  return inputContent.value.length != 0 && inputContent.value.length <= 280;
+});
 </script>
 
 <template>
@@ -20,9 +19,15 @@ const canPost = computed(() => {
       <Avatar :name="name" size="48px"></Avatar>
     </div>
     <div class="new-post-input-section">
-      <textarea type="text" placeholder="投稿する内容を入力（投稿時に自動で変換されます)" v-model="inputContent"/>
+      <textarea
+        type="text"
+        placeholder="投稿する内容を入力（投稿時に自動で変換されます)"
+        v-model="inputContent"
+      />
       <div class="post-footer">
-        <span :class="!canPost ? 'post-charcount-warn' : undefined">{{ inputContent.length }}/280文字</span>
+        <span :class="!canPost ? 'post-charcount-warn' : undefined"
+          >{{ inputContent.length }}/280文字</span
+        >
         <span class="post-button">
           <Button :disabled="!canPost">投稿する</Button>
         </span>
@@ -70,5 +75,4 @@ const canPost = computed(() => {
     }
   }
 }
-
 </style>

frontend/src/components/Post.vue

@@ -1,29 +1,28 @@
 <script setup lang="ts">
-import Avatar from "@/components/Avatar.vue";
+import Avatar from '@/components/Avatar.vue';
 import 'moment/dist/locale/ja';
 import moment from 'moment-timezone';
-import {ref} from "vue";
-import {reactionIcons} from "@/features/reactions";
+import { ref } from 'vue';
+import { reactionIcons } from '@/features/reactions';
 
 const props = defineProps<{
-  name: string,
-  date: Date,
-  content: string,
-  reactions: { id: number, count: number, clicked: boolean }[],
-}>()
+  name: string;
+  date: Date;
+  content: string;
+  reactions: { id: number; count: number; clicked: boolean }[];
+}>();
 
 function getDateText() {
   return moment(props.date).fromNow();
 }
 
 const dateText = ref(getDateText());
-
 </script>
 
 <template>
   <div class="post">
     <div class="post-author-icon">
-      <Avatar size="48px" :name="name"/>
+      <Avatar size="48px" :name="name" />
     </div>
     <div class="post-content">
       <div class="post-header">
@@ -35,10 +34,11 @@ const dateText = ref(getDateText());
       </div>
       <div class="post-reactions">
         <div
-            v-for="reaction in reactions"
-            :key="reaction.id"
-            class="post-reaction"
-            :class="reaction.clicked ? ['clicked'] : undefined">
+          v-for="reaction in reactions"
+          :key="reaction.id"
+          class="post-reaction"
+          :class="reaction.clicked ? ['clicked'] : undefined"
+        >
           <span class="post-reaction-icon">{{ reactionIcons[reaction.id] }}</span>
           <span class="post-reaction-count">{{ reaction.count }}</span>
         </div>

frontend/src/features/reactions.ts

@@ -1 +1 @@
-export const reactionIcons = ['❤️', '🔥', '💧', '😢', '🤔'];
+export const reactionIcons = ['❤️', '🔥', '💧', '😢', '🤔'];