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

feat. gnb 아이콘 추가

Browse Source
This commit is contained in:
clkim
2025-10-13 16:04:57 +09:00
parent 7d5057fc43
commit 277532f0ba
16 changed files with 183 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,14 @@
{
"css.validate": false,
"tailwindCSS.includeLanguages": {
"vue": "html",
"css": "css"
},
"tailwindCSS.experimental.classRegex": [
["class[:]\\s*['\"`]([^'\"`]*)['\"`]", "([^'\"`]*)"],
["@apply\\s+([^;]+)", "([^;]+)"]
],
"files.associations": {
"*.css": "tailwindcss"
}
}

2
app/app.vue
View File

@@ -28,7 +28,7 @@ const getGameDataFromServer = (): GameDataValue | null => {
const setupAllMetaData = (data: GameDataValue) => {
const meta = data.meta_tag
const faviconPath = data.favicon_path
const theme = data.design_theme === 1 ? 'dark' : 'light'
const theme = data.gnb.theme_type || 'dark'
// 파비콘 링크 생성
const faviconLinks = [

2
eslint.config.js
View File

@@ -32,11 +32,11 @@ export default createConfigForNuxt({
'vue/no-multiple-template-root': 'off',
'vue/no-required-prop-with-default': 'off',
'vue/require-directive': 'off',
'vue/html-self-closing': 'off',
// 일반 규칙 (품질/버그 탐지)
'no-console': 'warn',
'no-debugger': 'error',
'no-unused-vars': 'off',
'prefer-const': 'warn',
'no-var': 'error',
},

7
layers/assets/css/base/_reset.css
View File

@@ -11,4 +11,11 @@
a {
outline: none;
}
/* 라이트 테마 색상 */
[data-theme='light'] {
body {
background-color: #fff;
}
}
}

36
layers/assets/css/base/_theme.css
View File

@@ -1,19 +1,4 @@
/* CSS 변수 정의 - @layer 밖에 위치 */
:root {
--foreground: #ffffff;
--foreground-10: #ffffff;
--foreground-reversal: #1f1f1f;
--foreground-reversal-4: rgba(0, 0, 0, 0.04);
--foreground-reversal-6: rgba(0, 0, 0, 0.06);
--foreground-reversal-8: rgba(0, 0, 0, 0.08);
--foreground-reversal-10: rgba(0, 0, 0, 0.1);
--foreground-reversal-15: rgba(0, 0, 0, 0.15);
--foreground-reversal-30: #ebebeb; /* gray-80 */
}
/* 다크 테마 색상 */
[data-theme='dark'] {
--foreground: #191919;
--foreground-10: #292929;
@@ -23,7 +8,26 @@
--foreground-reversal-8: rgba(255, 255, 255, 0.08);
--foreground-reversal-10: rgba(255, 255, 255, 0.1);
--foreground-reversal-15: rgba(255, 255, 255, 0.15);
--foreground-reversal-30: #404040; /* gray-750 */
--foreground-gray-750: #404040;
--foreground-gray-500: #7f7f7f;
}
/* 라이트 테마 색상 */
[data-theme='light'] {
--foreground: #ffffff;
--foreground-10: #ffffff;
--foreground-reversal: #1f1f1f;
--foreground-reversal-4: rgba(0, 0, 0, 0.04);
--foreground-reversal-6: rgba(0, 0, 0, 0.06);
--foreground-reversal-8: rgba(0, 0, 0, 0.08);
--foreground-reversal-10: rgba(0, 0, 0, 0.1);
--foreground-reversal-15: rgba(0, 0, 0, 0.15);
--foreground-reversal-50: rgba(0, 0, 0, 0.5); /* #7F7F7F */
--foreground-gray-750: #ebebeb; /* gray-80 */
--foreground-gray-500: #999999; /* gray-400 */
}
/* 커스텀 컴포넌트 스타일 */

4
layers/components/atoms/icons/ArrowDown.vue → layers/components/atoms/icons/ArrowDownFill.vue
View File

@@ -7,7 +7,7 @@ interface Props {
withDefaults(defineProps<Props>(), {
size: 12,
color: '#7F7F7F',
color: 'var(--foreground-gray-500)',
className: '',
})
</script>
@@ -23,7 +23,7 @@ withDefaults(defineProps<Props>(), {
>
<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"
fill="#7F7F7F"
:fill="color"
/>
</svg>
</template>

29
layers/components/atoms/icons/Close.vue
View File

@@ -1,29 +0,0 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
className?: string
}
withDefaults(defineProps<Props>(), {
size: 32,
color: '#EBEBEB',
className: '',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 32 33"
fill="none"
:class="className"
>
<path
d="M26.2768 8.10939C26.7975 7.5887 26.7975 6.74448 26.2768 6.22378C25.7561 5.70308 24.9119 5.70308 24.3912 6.22378L16.0007 14.6143L7.61013 6.22378C7.08943 5.70308 6.24521 5.70308 5.72451 6.22378C5.20381 6.74448 5.20381 7.5887 5.72451 8.10939L14.115 16.4999L5.72451 24.8904C5.20381 25.4111 5.20381 26.2554 5.72451 26.7761C6.24521 27.2968 7.08943 27.2968 7.61013 26.7761L16.0007 18.3855L24.3912 26.7761C24.9119 27.2968 25.7561 27.2968 26.2768 26.7761C26.7975 26.2554 26.7975 25.4111 26.2768 24.8904L17.8863 16.4999L26.2768 8.10939Z"
:fill="color"
/>
</svg>
</template>

29
layers/components/atoms/icons/CloseLine.vue Normal file
View File

@@ -0,0 +1,29 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
className?: string
}
withDefaults(defineProps<Props>(), {
size: 32,
color: '#EBEBEB',
className: '',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 32 32"
fill="none"
:class="className"
>
<path
d="M26.2768 8.10947C26.7975 7.58877 26.7975 6.74455 26.2768 6.22385C25.7561 5.70315 24.9119 5.70315 24.3912 6.22385L16.0007 14.6144L7.61013 6.22385C7.08943 5.70315 6.24521 5.70315 5.72451 6.22385C5.20381 6.74455 5.20381 7.58877 5.72451 8.10947L14.115 16.5L5.72451 24.8905C5.20381 25.4112 5.20381 26.2554 5.72451 26.7761C6.24521 27.2968 7.08943 27.2968 7.61013 26.7761L16.0007 18.3856L24.3912 26.7761C24.9119 27.2968 25.7561 27.2968 26.2768 26.7761C26.7975 26.2554 26.7975 25.4112 26.2768 24.8905L17.8863 16.5L26.2768 8.10947Z"
:fill="color"
/>
</svg>
</template>

29
layers/components/atoms/icons/MenuBoldLine.vue Normal file
View File

@@ -0,0 +1,29 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
className?: string
}
withDefaults(defineProps<Props>(), {
size: 24,
color: 'var(--foreground-reversal)',
className: '',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 24 24"
fill="none"
:class="className"
>
<path
d="M20 16C20.7594 16 21.375 16.6156 21.375 17.375C21.375 18.1344 20.7594 18.75 20 18.75H4C3.24061 18.75 2.625 18.1344 2.625 17.375C2.625 16.6156 3.24061 16 4 16H20ZM20 10.5C20.7594 10.5 21.375 11.1156 21.375 11.875C21.375 12.6344 20.7594 13.25 20 13.25H4C3.24061 13.25 2.625 12.6344 2.625 11.875C2.625 11.1156 3.24061 10.5 4 10.5H20ZM20 5C20.7594 5 21.375 5.61561 21.375 6.375C21.375 7.13439 20.7594 7.75 20 7.75H4C3.24061 7.75 2.625 7.13439 2.625 6.375C2.625 5.61561 3.24061 5 4 5H20Z"
:fill="color"
/>
</svg>
</template>

29
layers/components/atoms/icons/MenuCloseLine.vue Normal file
View File

@@ -0,0 +1,29 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
className?: string
}
withDefaults(defineProps<Props>(), {
size: 16,
color: 'var(--foreground-reversal)',
className: '',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 16 16"
fill="none"
:class="className"
>
<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>

29
layers/components/atoms/icons/OptionHorizontalFill.vue Normal file
View File

@@ -0,0 +1,29 @@
<script setup lang="ts">
interface Props {
size?: number | string
color?: string
className?: string
}
withDefaults(defineProps<Props>(), {
size: 24,
color: 'var(--foreground-reversal)',
className: '',
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
:width="size"
:height="size"
viewBox="0 0 24 24"
fill="none"
:class="className"
>
<path
d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z"
:fill="color"
/>
</svg>
</template>

0
layers/components/atoms/icons/Star.vue → layers/components/atoms/icons/StarFill.vue
View File

8
layers/components/atoms/icons/LinkOut.vue → layers/components/atoms/icons/WebLinkLine.vue
View File

@@ -7,7 +7,7 @@ interface Props {
withDefaults(defineProps<Props>(), {
size: 16,
color: '#B2B2B2',
color: 'var(--foreground-gray-500)',
className: '',
})
</script>
@@ -18,16 +18,16 @@ withDefaults(defineProps<Props>(), {
:width="size"
:height="size"
viewBox="0 0 16 16"
:fill="color"
fill="none"
:class="className"
>
<path
d="M3.63636 3.33333C3.469 3.33333 3.33333 3.469 3.33333 3.63636L3.33333 12.3636C3.33333 12.531 3.469 12.6667 3.63636 12.6667H12.3636C12.531 12.6667 12.6667 12.531 12.6667 12.3636V9.93939C12.6667 9.5712 12.9651 9.27273 13.3333 9.27273C13.7015 9.27273 14 9.5712 14 9.93939V12.3636C14 13.2674 13.2674 14 12.3636 14H3.63636C2.73262 14 2 13.2674 2 12.3636L2 3.63636C2 2.73263 2.73262 2 3.63636 2L6.06061 2C6.4288 2 6.72727 2.29848 6.72727 2.66667C6.72727 3.03486 6.4288 3.33333 6.06061 3.33333H3.63636Z"
fill="#B2B2B2"
:fill="color"
/>
<path
d="M12.6667 4.27614V6.54545C12.6667 6.91364 12.9651 7.21212 13.3333 7.21212C13.7015 7.21212 14 6.91364 14 6.54545V2.66667C14 2.29848 13.7015 2 13.3333 2L9.45455 2C9.08636 2 8.78788 2.29848 8.78788 2.66667C8.78788 3.03486 9.08636 3.33333 9.45455 3.33333L11.7239 3.33333L7.28616 7.77103C7.02581 8.03138 7.02581 8.45349 7.28616 8.71384C7.54651 8.97419 7.96862 8.97419 8.22897 8.71384L12.6667 4.27614Z"
fill="#B2B2B2"
:fill="color"
/>
</svg>
</template>

6
layers/components/blocks/modal/YouTube.vue
View File

@@ -22,13 +22,13 @@
@click.stop
>
<!-- 헤더 -->
<div class="flex justify-end">
<div class="flex justify-end mb-3 md:mb-4">
<button
class="p-1 text-white rounded-full transition-colors"
class="text-white rounded-full transition-colors"
aria-label="모달 닫기"
@click="closeModal"
>
<AtomsIconsClose />
<AtomsIconsCloseLine />
</button>
</div>

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

@@ -162,6 +162,7 @@ onMounted(() => {
/>
</AtomsLocaleLink>
<button class="btn-open" @click="handleMenuOpen">
<AtomsIconsMenuBoldLine class="mx-auto" />
<span class="sr-only">menu open</span>
</button>
<div
@@ -197,7 +198,7 @@ onMounted(() => {
:class="['nav-1depth', { active: isNavItemActive(gnbItem) }]"
>
<span>{{ gnbItem.menu_name }}</span>
<AtomsIconsArrowDown
<AtomsIconsArrowDownFill
v-if="gnbItem.children"
class="hidden md:block"
/>
@@ -213,7 +214,7 @@ onMounted(() => {
:target="child.link_target"
>
<span>{{ child.menu_name }}</span>
<AtomsIconsLinkOut
<AtomsIconsWebLinkLine
v-if="child.link_target === '_blank'"
/>
</BlocksHybridLink>
@@ -224,6 +225,7 @@ onMounted(() => {
</div>
<div v-if="gnbData?.menus && overflowNam > 0" class="more">
<button class="btn-more">
<AtomsIconsOptionHorizontalFill class="mx-auto" />
<span class="sr-only">more</span>
</button>
<div class="more-list">
@@ -255,7 +257,7 @@ onMounted(() => {
:target="child.link_target"
>
<span>{{ child.menu_name }}</span>
<AtomsIconsLinkOut
<AtomsIconsWebLinkLine
v-if="child.link_target === '_blank'"
/>
</BlocksHybridLink>
@@ -273,7 +275,9 @@ onMounted(() => {
:target="'_self'"
class="nav-1depth text-gradient-pink"
>
<AtomsIconsStarFill />
<span>이벤트</span>
<AtomsIconsStarFill />
</BlocksHybridLink>
</div>
</div>
@@ -284,6 +288,7 @@ onMounted(() => {
</AtomsButton>
</div>
<button class="btn-close" @click="handleMenuClose">
<AtomsIconsMenuCloseLine class="mx-auto" />
<span class="sr-only">menu close</span>
</button>
</div>
@@ -297,7 +302,7 @@ onMounted(() => {
@apply bg-theme-foreground text-theme-foreground-reversal relative z-50;
}
.game-wrapper {
@apply absolute flex w-full h-[48px] items-center whitespace-nowrap px-[64px] bg-theme-foreground md:h-16 md:pl-0 md:pr-[40px]
@apply absolute flex w-full h-[48px] items-center whitespace-nowrap px-[52px] bg-theme-foreground sm:px-[72px] md:h-16 md:pl-0 md:pr-[40px]
before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-px before:bg-theme-foreground-reversal-6;
}
.game-wrapper.is-fixed {
@@ -309,10 +314,10 @@ onMounted(() => {
.btn-open,
.btn-close {
@apply absolute w-[40px] h-[40px] md:hidden bg-[red];
@apply absolute w-[40px] h-[40px] md:hidden;
}
.btn-open {
@apply top-[4px] left-[12px];
@apply top-[4px] left-[12px] sm:left-[32px];
}
.btn-close {
@apply top-[11px] left-[12px];
@@ -416,7 +421,7 @@ onMounted(() => {
}
.event {
@apply relative md:ml-[64px] md:after:content-[''] md:after:absolute md:after:top-[50%] md:after:left-[-32px] md:after:w-[1px] md:after:h-[16px] md:after:bg-theme-foreground-reversal-30 md:after:translate-y-[-50%];
@apply relative md:ml-[64px] md:after:content-[''] md:after:absolute md:after:top-[50%] md:after:left-[-32px] md:after:w-[1px] md:after:h-[16px] md:after:bg-theme-foreground-gray-750 md:after:translate-y-[-50%];
}
.is-hidden {

4
tailwind.config.ts
View File

@@ -21,7 +21,9 @@ export default {
'theme-foreground-reversal-8': 'var(--foreground-reversal-8)',
'theme-foreground-reversal-10': 'var(--foreground-reversal-10)',
'theme-foreground-reversal-15': 'var(--foreground-reversal-15)',
'theme-foreground-reversal-30': 'var(--foreground-reversal-30)',
'theme-foreground-gray-750': 'var(--foreground-gray-750)',
'theme-foreground-gray-500': 'var(--foreground-gray-500)',
},
},
},