gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. useResponsiveBreakpoints, getImageHost 수정

Browse Source
This commit is contained in:
clkim
2025-10-31 12:55:37 +09:00
parent 007d427520
commit 83124d56eb
21 changed files with 106 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layers/components/atoms/Button/Launcher.vue
View File

@@ -60,7 +60,7 @@ const inlineStyle = computed<CSSProperties>(() => {
style.color = props.textColor
}
if (props.type === 'duplication') {
style.backgroundImage = `url(${getImageHost(DUP_IMAGE_MAP[props.platform])})`
style.backgroundImage = `url(${getImageHost(DUP_IMAGE_MAP[props.platform], { imageType: 'common' })})`
}
return style
})

4
layers/components/atoms/Button/Sns.vue
View File

@@ -77,7 +77,7 @@ const handleCopy = async () => {
target="_blank"
class="sns-item"
:style="{
backgroundImage: `url(${getImageHost(`/images/common/ic-v2-logo-${key}-fill.svg`)})`,
backgroundImage: `url(${getImageHost(`/images/common/ic-v2-logo-${key}-fill.svg`, { imageType: 'common' })})`,
}"
>
<span class="sr-only">{{ key }}</span>
@@ -87,7 +87,7 @@ const handleCopy = async () => {
type="button"
class="sns-item"
:style="{
backgroundImage: `url(${getImageHost('/images/common/ic-v2-community-link-line.svg')})`,
backgroundImage: `url(${getImageHost('/images/common/ic-v2-community-link-line.svg', { imageType: 'common' })})`,
}"
@click="handleCopy"
>

6
layers/components/atoms/Img.vue
View File

@@ -16,13 +16,13 @@ const isResponsiveMode = computed(() => {
})
const imagePaths = computed(() => {
if (typeof props.src === 'string') {
const resolved = getResolvedHost(`${rootPath}${props.src}`)
const resolved = getImageHost(`${rootPath}${props.src}`)
return { pc: resolved, mo: '' }
}
return {
pc: props.src.pc ? getResolvedHost(`${rootPath}${props.src.pc}`) : '',
mo: props.src.mo ? getResolvedHost(`${rootPath}${props.src.mo}`) : '',
pc: props.src.pc ? getImageHost(`${rootPath}${props.src.pc}`) : '',
mo: props.src.mo ? getImageHost(`${rootPath}${props.src.mo}`) : '',
}
})
</script>

1
layers/components/atoms/icons/ArrowDownFill.vue
View File

@@ -16,7 +16,6 @@ withDefaults(defineProps<Props>(), {
:width="size"
:height="size"
viewBox="0 0 12 12"
:fill="color"
>
<path
d="M5.29499 7.715L2.39999 4.875C2.07499 4.555 2.29999 4 2.75999 4L9.23499 4C9.69499 4 9.91999 4.555 9.59499 4.875L6.69999 7.715C6.30999 8.095 5.68999 8.095 5.29999 7.715H5.29499Z"

27
layers/components/atoms/icons/ArrowRightLine.vue Normal file
View File

@@ -0,0 +1,27 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
}
withDefaults(defineProps<Props>(), {
size: 20,
color: 'var(--foreground-gray-500)',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 20 20"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.91073 3.57757C6.5853 3.90301 6.5853 4.43065 6.91073 4.75609L12.1548 10.0002L6.91073 15.2442C6.5853 15.5697 6.5853 16.0973 6.91073 16.4228C7.23617 16.7482 7.76381 16.7482 8.08924 16.4228L13.9226 10.5894C14.248 10.264 14.248 9.73634 13.9226 9.41091L8.08924 3.57757C7.76381 3.25214 7.23617 3.25214 6.91073 3.57757Z"
:fill="color"
/>
</svg>
</template>

26
layers/components/atoms/icons/MenuCloseLine.vue
View File

@@ -1,26 +0,0 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
}
withDefaults(defineProps<Props>(), {
size: 16,
color: 'var(--foreground-reversal)',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L8 6.58579L1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292894 0.292893C-0.0976304 0.683417 -0.0976304 1.31658 0.292894 1.70711L6.58579 8L0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L8 9.41421L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L9.41421 8L15.7071 1.70711Z"
:fill="color"
/>
</svg>
</template>

1
layers/components/blocks/VisualContent.vue
View File

@@ -29,7 +29,6 @@ const sanitizedContent = computed(() => {
<template>
<AtomsImg
v-if="isTypeImage(resourcesData?.resource_type) && imagePaths"
ref="pictureRef"
:src="imagePaths"
:alt="alt || displayText"
:class="`w-full h-full object-${objectFit}`"

35
layers/components/layouts/Header.vue
View File

@@ -176,7 +176,7 @@ onBeforeUnmount(() => {
<div class="game-wrapper" :class="{ 'is-fixed': isPassedStoveGnb }">
<AtomsLocaleLink to="/brand" class="mx-auto md:hidden">
<img
:src="getResolvedHost(gnbData?.bi_path)"
:src="getImageHost(gnbData?.bi_path)"
:alt="gameData?.game_name"
class="h-[30px]"
/>
@@ -193,7 +193,7 @@ onBeforeUnmount(() => {
<div class="nav-logo">
<AtomsLocaleLink to="/brand" @click="handleMenuClose">
<img
:src="getResolvedHost(gnbData?.bi_path)"
:src="getImageHost(gnbData?.bi_path)"
:alt="gameData?.game_name"
class="h-[30px]"
/>
@@ -215,13 +215,21 @@ onBeforeUnmount(() => {
<AtomsLocaleLink
:to="gnbItem.url_path"
:target="gnbItem.link_target"
:class="['nav-1depth', { active: isNavItemActive(gnbItem) }]"
:class="[
'nav-1depth',
{ 'has-link': !!gnbItem.url_path },
{ active: isNavItemActive(gnbItem) },
]"
>
<span>{{ gnbItem.menu_name }}</span>
<AtomsIconsArrowDownFill
v-if="has2depthButton(gnbItem)"
class="hidden md:block"
/>
<AtomsIconsArrowRightLine
v-if="!has2depthButton(gnbItem)"
class="ml-auto md:hidden"
/>
</AtomsLocaleLink>
<Transition name="fade">
<div v-if="has2depthButton(gnbItem)" class="nav-2depth">
@@ -322,7 +330,6 @@ onBeforeUnmount(() => {
colorCode: gnb1depthButtonData?.btn_info?.color_code_txt,
})
"
class="nav-1depth"
>
{{ gnb1depthButtonData?.btn_info?.txt_btn_name }}
</AtomsButtonLauncher>
@@ -337,7 +344,11 @@ onBeforeUnmount(() => {
</div>
</div>
<button class="btn-close" @click="handleMenuClose">
<AtomsIconsMenuCloseLine class="mx-auto" />
<AtomsIconsCloseLine
size="24"
color="var(--foreground-reversal)"
class="mx-auto"
/>
<span class="sr-only">menu close</span>
</button>
</div>
@@ -426,6 +437,9 @@ onBeforeUnmount(() => {
.nav-1depth.active {
@apply bg-theme-foreground-reversal-8 md:bg-transparent;
}
.nav-1depth.has-link {
@apply hover:bg-theme-foreground-reversal-4 active:bg-theme-foreground-reversal-10 md:hover:bg-transparent md:active:bg-transparent;
}
.nav-2depth {
@apply text-[15px] md:hidden md:absolute md:top-[64px] md:left-[-28px] md:pt-1;
@@ -480,15 +494,16 @@ onBeforeUnmount(() => {
.btn-start:hover .nav-2depth {
@apply md:block;
}
.btn-start:deep(.nav-1depth) {
@apply w-full h-[48px] px-10 md:w-auto;
.btn-start:deep(> .btn-base) {
@apply w-full h-[48px] px-10;
}
.btn-start:deep(.nav-1depth) .icon-platform {
.btn-start:deep(> .btn-base) .icon-platform {
@apply hidden;
}
.btn-start:deep(.nav-1depth) .btn-content {
@apply justify-center text-center;
.btn-start:deep(> .btn-base) .btn-content {
@apply justify-center;
}
.btn-start .nav-2depth {
@apply left-[unset] right-[-40px];
}