diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..b3637a9 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,14 @@ +{ + "css.validate": false, + "tailwindCSS.includeLanguages": { + "vue": "html", + "css": "css" + }, + "tailwindCSS.experimental.classRegex": [ + ["class[:]\\s*['\"`]([^'\"`]*)['\"`]", "([^'\"`]*)"], + ["@apply\\s+([^;]+)", "([^;]+)"] + ], + "files.associations": { + "*.css": "tailwindcss" + } +} diff --git a/app/app.vue b/app/app.vue index 51fad64..e5492cb 100644 --- a/app/app.vue +++ b/app/app.vue @@ -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 = [ diff --git a/eslint.config.js b/eslint.config.js index c53ad5e..4bf768d 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -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', }, diff --git a/layers/assets/css/base/_reset.css b/layers/assets/css/base/_reset.css index 9df8a16..110daa6 100644 --- a/layers/assets/css/base/_reset.css +++ b/layers/assets/css/base/_reset.css @@ -11,4 +11,11 @@ a { outline: none; } + + /* 라이트 테마 색상 */ + [data-theme='light'] { + body { + background-color: #fff; + } + } } diff --git a/layers/assets/css/base/_theme.css b/layers/assets/css/base/_theme.css index 8ac5182..e2ad861 100644 --- a/layers/assets/css/base/_theme.css +++ b/layers/assets/css/base/_theme.css @@ -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 */ } /* 커스텀 컴포넌트 스타일 */ diff --git a/layers/components/atoms/icons/ArrowDown.vue b/layers/components/atoms/icons/ArrowDownFill.vue similarity index 90% rename from layers/components/atoms/icons/ArrowDown.vue rename to layers/components/atoms/icons/ArrowDownFill.vue index cd9619a..37c2ff5 100644 --- a/layers/components/atoms/icons/ArrowDown.vue +++ b/layers/components/atoms/icons/ArrowDownFill.vue @@ -7,7 +7,7 @@ interface Props { withDefaults(defineProps(), { size: 12, - color: '#7F7F7F', + color: 'var(--foreground-gray-500)', className: '', }) @@ -23,7 +23,7 @@ withDefaults(defineProps(), { > diff --git a/layers/components/atoms/icons/Close.vue b/layers/components/atoms/icons/Close.vue deleted file mode 100644 index 0997c40..0000000 --- a/layers/components/atoms/icons/Close.vue +++ /dev/null @@ -1,29 +0,0 @@ - - - diff --git a/layers/components/atoms/icons/CloseLine.vue b/layers/components/atoms/icons/CloseLine.vue new file mode 100644 index 0000000..ee70ee5 --- /dev/null +++ b/layers/components/atoms/icons/CloseLine.vue @@ -0,0 +1,29 @@ + + + diff --git a/layers/components/atoms/icons/MenuBoldLine.vue b/layers/components/atoms/icons/MenuBoldLine.vue new file mode 100644 index 0000000..791f5dc --- /dev/null +++ b/layers/components/atoms/icons/MenuBoldLine.vue @@ -0,0 +1,29 @@ + + + diff --git a/layers/components/atoms/icons/MenuCloseLine.vue b/layers/components/atoms/icons/MenuCloseLine.vue new file mode 100644 index 0000000..2c245b8 --- /dev/null +++ b/layers/components/atoms/icons/MenuCloseLine.vue @@ -0,0 +1,29 @@ + + + diff --git a/layers/components/atoms/icons/OptionHorizontalFill.vue b/layers/components/atoms/icons/OptionHorizontalFill.vue new file mode 100644 index 0000000..fbcb2e5 --- /dev/null +++ b/layers/components/atoms/icons/OptionHorizontalFill.vue @@ -0,0 +1,29 @@ + + + diff --git a/layers/components/atoms/icons/Star.vue b/layers/components/atoms/icons/StarFill.vue similarity index 100% rename from layers/components/atoms/icons/Star.vue rename to layers/components/atoms/icons/StarFill.vue diff --git a/layers/components/atoms/icons/LinkOut.vue b/layers/components/atoms/icons/WebLinkLine.vue similarity index 93% rename from layers/components/atoms/icons/LinkOut.vue rename to layers/components/atoms/icons/WebLinkLine.vue index c565168..db9b1c9 100644 --- a/layers/components/atoms/icons/LinkOut.vue +++ b/layers/components/atoms/icons/WebLinkLine.vue @@ -7,7 +7,7 @@ interface Props { withDefaults(defineProps(), { size: 16, - color: '#B2B2B2', + color: 'var(--foreground-gray-500)', className: '', }) @@ -18,16 +18,16 @@ withDefaults(defineProps(), { :width="size" :height="size" viewBox="0 0 16 16" - :fill="color" + fill="none" :class="className" > diff --git a/layers/components/blocks/modal/YouTube.vue b/layers/components/blocks/modal/YouTube.vue index 5a5a7e6..83687db 100644 --- a/layers/components/blocks/modal/YouTube.vue +++ b/layers/components/blocks/modal/YouTube.vue @@ -22,13 +22,13 @@ @click.stop > -
+
diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue index 93a7985..8148c58 100644 --- a/layers/components/layouts/Header.vue +++ b/layers/components/layouts/Header.vue @@ -162,6 +162,7 @@ onMounted(() => { />
{ :class="['nav-1depth', { active: isNavItemActive(gnbItem) }]" > {{ gnbItem.menu_name }} -
@@ -255,7 +257,7 @@ onMounted(() => { :target="child.link_target" > {{ child.menu_name }} - @@ -273,7 +275,9 @@ onMounted(() => { :target="'_self'" class="nav-1depth text-gradient-pink" > + 이벤트 +
@@ -284,6 +288,7 @@ onMounted(() => {
@@ -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 { diff --git a/tailwind.config.ts b/tailwind.config.ts index 51bfd79..30ac5ee 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -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)', }, }, },