fix. gnb 2depth 정확히 일치하는 경우만 1depth 활성화 되도록 수정

This commit is contained in:
clkim
2025-11-19 16:13:02 +09:00
parent dc3d0083fc
commit 1596f874ff
2 changed files with 55 additions and 52 deletions

View File

@@ -3,7 +3,10 @@
<LayoutsStoveHeader />
<Transition name="fade">
<div v-if="!isLoading" class="flex-1 flex items-center justify-center p-25">
<div
v-if="!isLoading"
class="flex-1 flex items-center justify-center p-25"
>
<div class="flex flex-col items-center gap-6 w-full">
<!-- Stove Logo -->
<div class="flex items-center justify-center h-7">
@@ -27,10 +30,15 @@
<!-- Error Text -->
<div class="flex flex-col items-center gap-2 w-full">
<h1 class="font-medium text-xl md:text-2xl leading-[1.5] tracking-[-0.03em] text-center text-[#1F1F1F] m-0">
<h1
class="font-medium text-xl md:text-2xl leading-[1.5] tracking-[-0.03em] text-center text-[#1F1F1F] m-0"
>
<span v-dompurify-html="errorTitle"></span>
</h1>
<p v-dompurify-html="errorMsg" class="font-normal text-sm md:text-base leading-[1.7] md:leading-[1.625] tracking-[-0.03em] text-center text-[#666666] m-0"></p>
<p
v-dompurify-html="errorMsg"
class="font-normal text-sm md:text-base leading-[1.7] md:leading-[1.625] tracking-[-0.03em] text-center text-[#666666] m-0"
></p>
</div>
</div>
@@ -50,7 +58,6 @@
</div>
</template>
<script setup lang="ts">
interface ErrorProps {
error?: {
@@ -62,7 +69,7 @@ interface ErrorProps {
const { tm } = useI18n()
const props = withDefaults(defineProps<ErrorProps>(), {
error: () => ({})
error: () => ({}),
})
const nuxtError = useError()
const currentError = computed(() => props.error || nuxtError.value)
@@ -78,7 +85,6 @@ const localePath = useLocalePath()
// const handleError = () => clearError({ redirect: '/' })
const handleError = () => {
window.location.href = localePath('/')
// clearError({ redirect: `${localePath('/brand')}` })
}
const handleBack = () => {
// 에러 상태를 클리어하고 이전 페이지로 이동
@@ -90,15 +96,16 @@ const handleBack = () => {
// 백스페이스 키 처리
const handleKeydown = (e: KeyboardEvent) => {
if (e.key === 'Backspace' &&
!['INPUT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)) {
if (
e.key === 'Backspace' &&
!['INPUT', 'TEXTAREA'].includes((e.target as HTMLElement).tagName)
) {
e.preventDefault()
handleBack()
}
}
// 500 에러 발생 시 /error 페이지로 리다이렉트
onMounted(() => {
const statusCode = currentError.value?.statusCode
if (statusCode === 500) {
@@ -113,14 +120,11 @@ onMounted(() => {
isLoading.value = false
})
window.addEventListener('keydown', handleKeydown)
window.addEventListener('popstate', handleBack)
})
onUnmounted(() => {
window.removeEventListener('keydown', handleKeydown)
window.removeEventListener('popstate', handleBack)
})
</script>

View File

@@ -10,6 +10,11 @@ import type {
const MORE_WIDTH = 72
const START_WIDTH_MARGIN = 40
const PLATFORM_LABEL_KEY: Record<PlatformTransformType, string> = {
pc: 'PC',
google_play: 'Google Play',
app_store: 'App Store',
}
const route = useRoute()
const { tm } = useI18n()
@@ -26,12 +31,12 @@ const { isPassedStoveGnb } = storeToRefs(scrollStore)
const navAreaRef = ref<HTMLElement | null>(null)
const startRef = ref<HTMLElement | null>(null)
const { width: startWidth } = useElementSize(startRef)
const isMenuOpen = ref(false)
const navWidth = ref(0)
const officialItemWidths = ref<number[]>([])
const overflowNam = ref<number>(0)
// const { width: navWidth } = useElementSize(navAreaRef)
const { width: startWidth } = useElementSize(startRef)
const gnbData = computed(() => gameData.value?.gnb)
const gnb1depthButtonData = computed(
@@ -50,7 +55,7 @@ const supportedPlatforms = computed(
const pathMatches = (base: string, current: string) => {
if (!base || base === '/') return current === '/'
return current === base || current.startsWith(base + '/')
return current === base
}
/** 자식 중 활성 링크 존재 여부 */
@@ -151,12 +156,6 @@ const has2depthButton = (gnbItem: GameDataMenu) => {
const highlight = (text: string) => `<span class="highlight">${text}</span>`
const PLATFORM_LABEL_KEY: Record<PlatformTransformType, string> = {
pc: 'PC',
google_play: 'Google Play',
app_store: 'App Store',
}
const tmWithGameName = (key: string): string => {
const raw = tm(key)
if (typeof raw !== 'string') return ''
@@ -458,7 +457,7 @@ onMounted(() => {
.nav-area {
@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:max-w-none md:h-full md:pl-[40px] md:items-center md:bg-transparent md:transform-none;
md:inline-flex md:flex-row md:w-auto md:max-w-[100%] md:h-full md:pl-[40px] md:items-center md:bg-transparent md:transform-none;
}
.nav-logo {
@@ -467,7 +466,7 @@ onMounted(() => {
.nav-list {
@apply overflow-hidden flex flex-col order-1 h-full mt-2 mb-4 px-2
md:flex-row md:order-none md:h-full md:my-0 md:ml-10 md:mr-6 md:px-0 md:overflow-visible;
md:flex-row md:order-none md:h-full md:my-0 md:ml-10 md:mr-6 md:px-0;
}
.nav-item {
@@ -513,7 +512,7 @@ onMounted(() => {
}
.official {
@apply overflow-x-hidden overflow-y-auto pb-2 md:flex md:items-center md:space-x-8 md:pb-0 md:overflow-visible;
@apply overflow-x-hidden overflow-y-auto pb-2 md:flex md:items-center md:space-x-8 md:pb-0;
}
.custom-theme-scrollbar::-webkit-scrollbar {
@apply w-1;