From fe4ef304f79fa1f4b5dc60b7d78fb0c863755703 Mon Sep 17 00:00:00 2001
From: leejooy96 <leejooy96@gmail.com>
Date: Fri, 11 Apr 2025 16:28:04 +0900
Subject: [PATCH] fix: fix vue-i18n types not defined

---
 .../components/layout/HeaderLayout.vue        |  9 +++++---
 src/renderer/screens/MainScreen.vue           | 22 +++++++++----------
 src/renderer/screens/SecondScreen.vue         |  8 ++++++-
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/layout/HeaderLayout.vue b/src/renderer/components/layout/HeaderLayout.vue
index 814507f..8e525a8 100644
--- a/src/renderer/components/layout/HeaderLayout.vue
+++ b/src/renderer/components/layout/HeaderLayout.vue
@@ -1,10 +1,13 @@
 <script setup lang="tsx">
 import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
 const route: any = useRoute()
 const titleKey: string = (route?.meta?.titleKey || 'title.main') as string
 
+const { t } = useI18n()
+
 const handleRoute = (path: string): void => {
   router.push(path)
 }
@@ -15,7 +18,7 @@ const isCurrentRoute = (path: string): boolean => {
 </script>
 <template>
   <v-app-bar color="primary" density="compact">
-    <v-app-bar-title>{{ $t(titleKey) }}</v-app-bar-title>
+    <v-app-bar-title>{{ t(titleKey) }}</v-app-bar-title>
     <template #append>
       <v-btn
         prepend-icon="mdi-home"
@@ -23,7 +26,7 @@ const isCurrentRoute = (path: string): boolean => {
         :class="{ active: isCurrentRoute('/') }"
         @click="handleRoute('/')"
       >
-        {{ $t('title.main') }}
+        {{ t('title.main') }}
       </v-btn>
       <v-btn
         prepend-icon="mdi-fit-to-screen-outline"
@@ -31,7 +34,7 @@ const isCurrentRoute = (path: string): boolean => {
         :class="{ active: isCurrentRoute('/second') }"
         @click="handleRoute('/second')"
       >
-        {{ $t('title.second') }}
+        {{ t('title.second') }}
       </v-btn>
     </template>
   </v-app-bar>
diff --git a/src/renderer/screens/MainScreen.vue b/src/renderer/screens/MainScreen.vue
index d3d34f5..4657558 100644
--- a/src/renderer/screens/MainScreen.vue
+++ b/src/renderer/screens/MainScreen.vue
@@ -6,7 +6,7 @@ import { useCounterStore } from '@/renderer/store/counter'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
 
-const { locale, availableLocales } = useI18n()
+const { t, locale, availableLocales } = useI18n()
 const { counterIncrease } = useCounterStore()
 const { counter } = storeToRefs(useCounterStore())
 const theme = useTheme()
@@ -68,13 +68,13 @@ const handleOpenFile = async () => {
         />
       </v-col>
       <v-col cols="12" md="7">
-        <h2 class="my-4">{{ $t('desc.welcome-title') }}</h2>
-        <p>{{ $t('desc.welcome-desc') }}</p>
+        <h2 class="my-4">{{ t('desc.welcome-title') }}</h2>
+        <p>{{ t('desc.welcome-desc') }}</p>
         <p class="my-4">
           App Version: <strong>{{ appVersion }}</strong>
         </p>
         <p v-if="selectedFile">{{
-          $t('desc.selected-file', {
+          t('desc.selected-file', {
             filePath: selectedFile
           })
         }}</p>
@@ -83,7 +83,7 @@ const handleOpenFile = async () => {
             <v-btn icon color="primary" @click="handleChangeTheme">
               <v-icon icon="mdi-brightness-6" />
               <v-tooltip activator="parent" location="bottom">
-                {{ $t('menu.change-theme') }}
+                {{ t('menu.change-theme') }}
               </v-tooltip>
             </v-btn>
           </v-col>
@@ -92,7 +92,7 @@ const handleOpenFile = async () => {
               <v-btn data-testid="btn-counter" icon color="primary" @click="handleCountIncrease">
                 <v-icon icon="mdi-plus-circle" />
                 <v-tooltip activator="parent" location="bottom">
-                  {{ $t('menu.increase-count') }}
+                  {{ t('menu.increase-count') }}
                 </v-tooltip>
               </v-btn>
             </v-badge>
@@ -101,7 +101,7 @@ const handleOpenFile = async () => {
             <v-btn icon color="primary" @click="handleOpenDocument">
               <v-icon icon="mdi-file-document" />
               <v-tooltip activator="parent" location="bottom">
-                {{ $t('menu.documentation') }}
+                {{ t('menu.documentation') }}
               </v-tooltip>
             </v-btn>
           </v-col>
@@ -109,7 +109,7 @@ const handleOpenFile = async () => {
             <v-btn icon color="primary" @click="handleOpenGitHub">
               <v-icon icon="mdi-github" />
               <v-tooltip activator="parent" location="bottom">
-                {{ $t('menu.github') }}
+                {{ t('menu.github') }}
               </v-tooltip>
             </v-btn>
           </v-col>
@@ -117,7 +117,7 @@ const handleOpenFile = async () => {
             <v-btn icon color="primary" @click="handleOpenFile">
               <v-icon icon="mdi-folder-open" />
               <v-tooltip activator="parent" location="bottom">
-                {{ $t('menu.open-file') }}
+                {{ t('menu.open-file') }}
               </v-tooltip>
             </v-btn>
           </v-col>
@@ -126,11 +126,11 @@ const handleOpenFile = async () => {
               data-testid="select-language"
               :model-value="locale"
               density="compact"
-              :label="$t('menu.change-language')"
+              :label="t('menu.change-language')"
               :items="languages"
               @update:model-value="handleChangeLanguage"
             >
-              {{ $t('menu.change-language') }}
+              {{ t('menu.change-language') }}
             </v-select>
           </v-col>
         </v-row>
diff --git a/src/renderer/screens/SecondScreen.vue b/src/renderer/screens/SecondScreen.vue
index dd9d56e..20370ab 100644
--- a/src/renderer/screens/SecondScreen.vue
+++ b/src/renderer/screens/SecondScreen.vue
@@ -1,10 +1,16 @@
+<script setup lang="tsx">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
   <v-container>
     <v-row no-gutters align="center" class="text-center">
       <v-col cols="12">
         <v-icon icon="mdi-emoticon-cool-outline" size="250" color="#009f57" />
       </v-col>
-      <v-col cols="12" class="my-4">{{ $t('desc.second-desc') }}</v-col>
+      <v-col cols="12" class="my-4">{{ t('desc.second-desc') }}</v-col>
     </v-row>
   </v-container>
 </template>