feat. 게임시작 로직 적용

layers/components/layouts/Header.vue

@@ -59,7 +59,7 @@ const handleMenuClose = () => (isMenuOpen.value = false)
 
 // navAreaRef의 넓이를 구하는 함수
 const calculateNavWidth = () => {
-  if (!navAreaRef.value) return 0
+  if (!navAreaRef.value || !gnbData) return 0
 
   const navAreaWidth = navAreaRef.value.offsetWidth
   const moreWidth = 72 // 더보기 버튼 넓이 + 마진
@@ -68,7 +68,7 @@ const calculateNavWidth = () => {
 
 // startRef의 넓이를 구하는 함수
 const calculateStartWidth = () => {
-  if (!startRef.value) return 0
+  if (!startRef.value || !gnbData) return 0
 
   const startWidth = startRef.value.offsetWidth
   const headerRightPadding = 40 // 헤더 오른쪽 마진
@@ -98,7 +98,7 @@ const calculateOfficialItemWidths = () => {
 
 // 오버플로우 계산 함수
 const calculateOverflow = () => {
-  if (!navAreaRef.value) return
+  if (!navAreaRef.value || !startRef.value) return
 
   const totalNavWidth = navWidth.value + startWidth.value
   const screenWidth = width.value
@@ -129,7 +129,10 @@ const calculateOverflow = () => {
   }
 }
 
-onClickOutside(navAreaRef, () => (isMenuOpen.value = false))
+const stopClickOutside = onClickOutside(
+  navAreaRef,
+  () => (isMenuOpen.value = false)
+)
 
 // 화면 크기 변경 시 오버플로우 재계산
 watch(width, () => {
@@ -147,6 +150,12 @@ onMounted(() => {
     }
   })
 })
+
+onBeforeUnmount(() => {
+  if (stopClickOutside) {
+    stopClickOutside()
+  }
+})
 </script>
 
 <template>
@@ -171,7 +180,7 @@ onMounted(() => {
       >
         <div ref="navAreaRef" class="nav-area">
           <div class="nav-logo">
-            <AtomsLocaleLink to="/brand">
+            <AtomsLocaleLink to="/brand" @click="handleMenuClose">
               <img
                 :src="gnbData?.bi_path"
                 :alt="gameData?.game_name"
@@ -283,9 +292,9 @@ onMounted(() => {
             </div>
           </nav>
           <div ref="startRef" class="btn-start">
-            <AtomsButton size="small" class="w-full md:w-auto">
+            <BlocksButtonLuncher class="w-full md:w-auto">
               게임 시작
-            </AtomsButton>
+            </BlocksButtonLuncher>
           </div>
           <button class="btn-close" @click="handleMenuClose">
             <AtomsIconsMenuCloseLine class="mx-auto" />
@@ -341,7 +350,7 @@ onMounted(() => {
 }
 
 .nav-area {
-  @apply flex flex-col w-[360px] bg-theme-foreground-10 translate-x-[-100%]
+  @apply flex flex-col w-[100vw] max-w-[360px] min-w-[320px] bg-theme-foreground-10 translate-x-[-100%]
   md:inline-flex md:flex-row md:w-auto md:h-full md:pl-[40px] md:items-center md:bg-transparent md:transform-none;
 }