refactor: useDevice

Author: jiyuujin

app/components/FooterPageSection.vue

@@ -11,6 +11,8 @@ const props = defineProps({
     required: false,
   },
 })
+
+const { isMobile } = useDevice()
 </script>
 
 <template>
@@ -19,8 +21,7 @@ const props = defineProps({
       <VueFesLogo />
     </div>
     <div v-if="!hasAuth" class="footer-info">
-      <!-- @vue-expect-error TODO: 何か @nuxtjs/module-device の型がうまく推論されていないので一端回避 -->
-      <div v-if="!$device.isMobile" class="footer-info-links">
+      <div v-if="!isMobile" class="footer-info-links">
         <div class="contacts">
           <ContactLinks />
         </div>
@@ -29,16 +30,14 @@ const props = defineProps({
         </div>
         <PrivacyPolicyAndCoc />
       </div>
-      <!-- @vue-expect-error TODO: 何か @nuxtjs/module-device の型がうまく推論されていないので一端回避 -->
-      <div v-if="!$device.isMobile" class="footer-copyright">
+      <div v-if="!isMobile" class="footer-copyright">
         <CopyrightText />
       </div>
     </div>
     <div v-if="hasAuth" class="footer-info">
       <CopyrightText />
     </div>
-    <!-- @vue-expect-error TODO: 何か @nuxtjs/module-device の型がうまく推論されていないので一端回避 -->
-    <div v-if="!hasAuth && $device.isMobile" class="footer-copyright">
+    <div v-if="!hasAuth && isMobile" class="footer-copyright">
       <CopyrightText />
     </div>
   </section>

app/components/TimetablePageSection.vue

@@ -4,6 +4,8 @@ import TimetableView from '~/components/timetable/TimetableView.vue'
 import ScrollHint from 'scroll-hint'
 import 'scroll-hint/css/scroll-hint.css'
 
+const { isMobile } = useDevice()
+
 onMounted(() => {
   new ScrollHint('.timetable-wrapper', {
     suggestiveShadow: true,
@@ -22,8 +24,7 @@ onMounted(() => {
         :title="'Time table'"
         :yamato-title="$t('top.timetable_subtitle')"
       />
-      <!-- @vue-expect-error TODO: 何か @nuxtjs/module-device の型がうまく推論されていないので一端回避 -->
-      <div v-if="$device.isMobile" class="timetable-wrapper">
+      <div v-if="isMobile" class="timetable-wrapper">
         <TimetableViewMobile />
       </div>
       <div v-else class="timetable-wrapper">