From 604605b4e14a06ed137d42c0a9a432bc75be37cd Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 3 Dec 2025 19:57:32 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20=EC=9B=8C=EB=8B=9D=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/Video.vue    | 9 +++++++--
 layers/components/layouts/Header.vue | 3 ++-
 nuxt.config.ts                       | 5 +++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/layers/components/atoms/Video.vue b/layers/components/atoms/Video.vue
index 141c36f..8e6bf39 100644
--- a/layers/components/atoms/Video.vue
+++ b/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()
   }
 }
diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue
index 39e06b1..16db37b 100644
--- a/layers/components/layouts/Header.vue
+++ b/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>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 82095c9..de79a5f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -112,5 +112,10 @@ export default defineNuxtConfig({
       allowedHosts: true,
     },
     base: '/',
+    // 프로덕션에서 hydration mismatch 상세 로그 활성화 (디버깅 후 제거 권장)
+    define: {
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
+    },
+    // 제거
   },
 })