fix. 워닝 수정을 위한 코드 리팩토링

layers/components/atoms/Video.vue

@@ -47,7 +47,6 @@ const pauseVideo = () => {
 
   clearPauseTimer()
 
-  // 새 타이머 설정
   pauseTimer.value = setTimeout(() => {
     if (videoRef.value) {
       videoRef.value.pause()
@@ -57,15 +56,21 @@ const pauseVideo = () => {
   }, 500)
 }
 
+const waitForCanPlay = () =>
+  new Promise<void>(resolve => {
+    if (!videoRef.value) return resolve()
+    videoRef.value.addEventListener('canplay', () => resolve(), { once: true })
+  })
+
 const reloadVideo = async () => {
   if (!videoRef.value) return
 
   clearPauseTimer()
-
   videoRef.value.currentTime = 0
   videoRef.value.load()
 
   if (props.play) {
+    await waitForCanPlay()
     await playVideo()
   }
 }

layers/components/layouts/Header.vue

@@ -280,6 +280,7 @@ onMounted(() => {
                   class="nav-item"
                   :class="{
                     'is-hidden':
+                      isMounted &&
                       overflowNam > 0 &&
                       Number(key) >=
                         Object.keys(gnbData?.menus).length - overflowNam,
@@ -331,7 +332,7 @@ onMounted(() => {
                   </Transition>
                 </div>
               </div>
-              <div v-if="overflowNam > 0" class="more">
+              <div v-if="isMounted && overflowNam > 0" class="more">
                 <button class="btn-more">
                   <AtomsIconsOptionHorizontalFill class="mx-auto" />
                   <span class="sr-only">more</span>

nuxt.config.ts

@@ -112,5 +112,10 @@ export default defineNuxtConfig({
       allowedHosts: true,
     },
     base: '/',
+    // 프로덕션에서 hydration mismatch 상세 로그 활성화 (디버깅 후 제거 권장)
+    define: {
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
+    },
+    // 제거
   },
 })