Code chore

somnisomni · May 30, 2024 · a11fff2 · a11fff2
1 parent 8f03b1b
commit a11fff2
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 25 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -16,33 +16,33 @@
 
       <div class="content-container">
         <div :class="['left-tab', { on: isLeftTabOn }]">
-          <router-link to="/" replace class="tab active" @click="toggleLeftTab">
+          <RouterLink to="/" replace class="tab active" @click="toggleLeftTab">
             <img src="@/assets/images/mdi-pencil.svg"
                  alt="메인 페이지" />
-          </router-link>
-          <router-link to="/settings" replace class="tab" @click="toggleLeftTab">
+          </RouterLink>
+          <RouterLink to="/settings" replace class="tab" @click="toggleLeftTab">
             <img src="@/assets/images/mdi-cog.svg"
                  alt="설정 페이지" />
-          </router-link>
-          <router-link to="/about" replace class="tab" @click="toggleLeftTab">
+          </RouterLink>
+          <RouterLink to="/about" replace class="tab" @click="toggleLeftTab">
             <img src="@/assets/images/mdi-info.svg"
                  alt="몰?루파이어 정보 페이지" />
-          </router-link>
+          </RouterLink>
         </div>
 
         <div class="content-wrapper">
-          <router-view v-slot="{ Component }">
-            <keep-alive>
+          <RouterView v-slot="{ Component }">
+            <KeepAlive>
               <component :is="Component" />
-            </keep-alive>
-          </router-view>
+            </KeepAlive>
+          </RouterView>
         </div>
       </div>
 
       <img class="container-background-image"
            src="@/assets/images/mollu_coconutcorn.png"
            alt="블루아카콘 by coconutcorn - 몰?루 이미지"
-           :class="{ anim: useSettingsStore().enableMolluImageAnimation }" />
+           :class="{ anim: shouldEnableMolluImageAnimation }" />
     </div>
   </div>
 </template>
@@ -54,9 +54,12 @@ import useSettingsStore from "./plugins/store/settings";
 
 @Component({})
 export default class App extends Vue {
-  readonly useSettingsStore = useSettingsStore;
   isLeftTabOn: boolean = false;
 
+  get shouldEnableMolluImageAnimation(): boolean {
+    return useSettingsStore().enableMolluImageAnimation;
+  }
+
   mounted(): void {
     if(useAppStore().gaEnabled) {
       console.debug("Google Analytics enabled");

diff --git a/frontend/src/pages/AboutPage.vue b/frontend/src/pages/AboutPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="about-container">
     <div>
-      <h1>몰?루파이어 <small>v{{ useAppStore().appVersion }}</small></h1>
+      <h1>몰?루파이어 <small>v{{ appVersion }}</small></h1>
       <p>명사 사이에 물음표를 넣어주어 문장을 "몰?루화"해줍니다.</p>
       <p style="color: gray"><s>프라나 사랑해</s></p>
     </div>
@@ -53,7 +53,7 @@
       </p>
     </div>
 
-    <div v-if="useAppStore().gaEnabled">
+    <div v-if="isGAEnabled">
       <hr />
       <p>이 웹 앱은 방문 통계 확인용으로 Google Analytics를 사용합니다. 사용자가 입력한 문장 및 기타 민감한 데이터는 서버에 저장하거나 Google 및 타 서비스에 공유하지 않습니다.</p>
     </div>
@@ -86,9 +86,7 @@ interface IOpenSource {
 
 @Component({})
 export default class AboutPage extends Vue {
-  readonly useAppStore = useAppStore;
-
-  readonly CREDITS: ICredit[] = [
+  readonly CREDITS: Array<ICredit> = [
     {
       description: "만든이",
       name: "somni (@somni_somni)",
@@ -128,7 +126,7 @@ export default class AboutPage extends Vue {
     },
   ];
 
-  readonly OPENSOURCES: IOpenSource[] = [
+  readonly OPENSOURCES: Array<IOpenSource> = [
     {
       name: "Kiwi",
       description: "지능형 한국어 형태소 분석기",
@@ -238,6 +236,14 @@ export default class AboutPage extends Vue {
       },
     },
   ];
+
+  get appVersion(): string {
+    return useAppStore().appVersion;
+  }
+
+  get isGAEnabled(): boolean {
+    return useAppStore().gaEnabled;
+  }
 }
 </script>
 

diff --git a/frontend/src/pages/MollufyPage.vue b/frontend/src/pages/MollufyPage.vue
@@ -6,11 +6,11 @@
     <div v-if="chats.length === 0"
          style="margin-top: 1rem; text-align: center; opacity: 0.5;">몰?루화한 문장 내역이 여기에 표시됩니다.</div>
 
-    <transition-group name="slide-up">
-      <chat-item v-for="chat in chats"
+    <TransitionGroup name="slide-up">
+      <ChatItem v-for="chat in chats"
                  :key="chat.hash"
                  :chatData="chat" />
-    </transition-group>
+    </TransitionGroup>
   </div>
 
   <div class="input-container">

diff --git a/frontend/src/pages/SettingsPage.vue b/frontend/src/pages/SettingsPage.vue
@@ -40,34 +40,34 @@ import { Component, Vue } from "vue-facing-decorator";
 
 @Component({})
 export default class SettingsPage extends Vue {
+  /* mollufyOptions.ignoreNounLengthLimit */
   get ignoreNounLengthLimit() {
     return useSettingsStore().mollufyOptions.ignoreNounLengthLimit;
   }
-
   set ignoreNounLengthLimit(value: boolean) {
     useSettingsStore().mollufyOptions.ignoreNounLengthLimit = value;
   }
 
+  /* mollufyOptions.changeMolluMark */
   get changeMolluMark() {
     return useSettingsStore().mollufyOptions.changeMolluMark;
   }
-
   set changeMolluMark(value: boolean) {
     useSettingsStore().mollufyOptions.changeMolluMark = value;
   }
 
+  /* mollufyOptions.forceMollufyForPredefinedWords */
   get forceMollufyForPredefinedWords() {
     return useSettingsStore().mollufyOptions.forceMollufyForPredefinedWords;
   }
-
   set forceMollufyForPredefinedWords(value: boolean) {
     useSettingsStore().mollufyOptions.forceMollufyForPredefinedWords = value;
   }
 
+  /* enableMolluImageAnimation */
   get enableMolluImageAnimation() {
     return useSettingsStore().enableMolluImageAnimation;
   }
-
   set enableMolluImageAnimation(value: boolean) {
     useSettingsStore().enableMolluImageAnimation = value;
   }