docker-ko · YoonKeumJae · May 19, 2025 · May 29, 2025 · Jun 19, 2025 · Jun 21, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -15,7 +15,7 @@ jobs:
       - name: Node.js 설정
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: 'npm'
 
       - name: 의존성 설치

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -19,7 +19,7 @@ jobs:
       - name: Node.js 설정
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: 'npm'
 
       - name: 의존성 설치

diff --git a/index.html b/index.html
@@ -15,6 +15,9 @@
   <body
     class="bg-background-light dark:bg-background-dark h-full flex-col text-base dark:text-white"
   >
+    <!-- 숨겨진 div: Tailwind가 사용할 클래스들을 강제 인식하게 함 -->
+    <div class="hidden bg-docker-primary bg-docker-hover text-docker-link"></div>
+
     <!-- 최상단 헤더 -->
     <header-component></header-component>
 

diff --git a/src/scripts/components/button-component.ts b/src/scripts/components/button-component.ts
@@ -21,7 +21,7 @@ export default class ButtonComponent extends HTMLElement {
 
     this.innerHTML = `
             <button type="button" class="not-prose my-4">
-                <a href="${href}" class="cursor-pointer py-2 px-4 rounded bg-[#086dd7] hover:bg-[#2560ff] text-white!">
+                <a href="${href}" class="cursor-pointer py-2 px-4 rounded bg-docker-primary hover:bg-docker-hover text-white!">
                     ${title}
                 </a>
             </button>

diff --git a/src/scripts/components/footer-component.ts b/src/scripts/components/footer-component.ts
@@ -5,9 +5,9 @@ class FooterComponent extends HTMLElement {
 
   connectedCallback() {
     this.innerHTML = `
-      <footer class="w-screen text-center py-4 bg-[#086dd7] text-white relative bottom-0">
+      <footer class="w-screen text-center py-4 bg-docker-primary text-white relative bottom-0">
         © 2025 Docker 한국어 문서 프로젝트 |
-        <a href="https://github.com/docker-ko/docker-ko.github.io" class="hover:underline text-[#b0c4de]">GitHub</a>
+        <a href="https://github.com/docker-ko/docker-ko.github.io" class="hover:underline text-blue-light">GitHub</a>
       </footer>
     `;
   }

diff --git a/src/scripts/components/header-component.ts b/src/scripts/components/header-component.ts
@@ -24,29 +24,29 @@ class HeaderComponent extends HTMLElement {
 
   connectedCallback() {
     this.innerHTML = `
-      <header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-[#086dd7]">
+      <header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-docker-primary">
             <div class="max-w-[1920px] mx-auto flex lg:gap-8 gap-2 h-full items-center justify-between">
                 <div class="flex h-full items-center lg:gap-8 gap-2">
                     <div>
                         <a href="/" title="Docker korean translation home page">
                           <p class="w-full text-5xl font-bold text-white">
-                            Docker <span class="text-red-500">K</span><span class="text-blue-800">O</span>
+                            Docker <span class="text-red-500">K</span><span class="text-blue-300">O</span>
                           </p>
                         </a>
                     </div>
                     <nav class="mt-1 hidden md:block">
                         <ul class="flex text-sm md:text-base lg:gap-4">
-                            <li class="nav-item border-b-4 border-transparent hover:border-white/20 cursor-pointer" data-path="/get-started">
-                                <a class="block px-2 py-1 whitespace-nowrap" href="#/get-started">Get started</a>
+                            <li class="nav-item border-b-4 border-transparent hover:border-white/30 cursor-pointer transition-colors duration-200" data-path="/get-started">
+                                <a class="block px-2 py-1 whitespace-nowrap text-white hover:text-gray-100" href="#/get-started">Get started</a>
                             </li>
-                            <li class="nav-item border-b-4 border-transparent hover:border-white/20 cursor-pointer" data-path="/guides">
-                                <a class="block px-2 py-1 whitespace-nowrap" href="#/guides">Guides</a>
+                            <li class="nav-item border-b-4 border-transparent hover:border-white/30 cursor-pointer transition-colors duration-200" data-path="/guides">
+                                <a class="block px-2 py-1 whitespace-nowrap text-white hover:text-gray-100" href="#/guides">Guides</a>
                             </li>
-                            <li class="nav-item border-b-4 border-transparent hover:border-white/20 cursor-pointer" data-path="/manuals">
-                                <a class="block px-2 py-1 whitespace-nowrap" href="#/manuals">Manuals</a>
+                            <li class="nav-item border-b-4 border-transparent hover:border-white/30 cursor-pointer transition-colors duration-200" data-path="/manuals">
+                                <a class="block px-2 py-1 whitespace-nowrap text-white hover:text-gray-100" href="#/manuals">Manuals</a>
                             </li>
-                            <li class="nav-item border-b-4 border-transparent hover:border-white/20 cursor-pointer" data-path="/reference">
-                                <a class="block px-2 py-1 whitespace-nowrap" href="#/reference">Reference</a>
+                            <li class="nav-item border-b-4 border-transparent hover:border-white/30 cursor-pointer transition-colors duration-200" data-path="/reference">
+                                <a class="block px-2 py-1 whitespace-nowrap text-white hover:text-gray-100" href="#/reference">Reference</a>
                             </li>
                         </ul>
                     </nav>

diff --git a/src/styles/content_style.css b/src/styles/content_style.css
@@ -5,7 +5,7 @@
   font-weight: 500;
   margin-bottom: 1rem;
   margin-top: 2rem;
-  color: #444;
+  color: var(--color-content-heading);
 }
 
 #content h1 {
@@ -30,14 +30,14 @@
   font-size: 1rem;
   line-height: 1.6;
   margin-bottom: 0.5rem;
-  color: #222;
+  color: var(--color-content-text);
 }
 
 #content ul,
 #content ol {
   margin-left: 1.5rem;
   padding-left: 1rem;
-  color: #222;
+  color: var(--color-content-text);
 }
 
 #content ul {
@@ -64,7 +64,8 @@
 
 #content pre {
   padding: 0.5rem;
-  border: 2px solid #e1e2e6;
+  border: 2px solid var(--color-content-code-border);
+  background: var(--color-content-code-bg);
   border-radius: 8px;
   overflow-x: auto;
   line-height: 1.5;
@@ -73,36 +74,36 @@
 
 #content pre code {
   display: block;
-  background: #fff;
-  color: #000000;
+  background: var(--color-white);
+  color: var(--color-black);
   white-space: pre-wrap;
 }
 
 #content code {
   font-size: 13px;
-  background-color: #e1e2e6;
-  color: #000000;
+  background-color: var(--color-content-code-inline);
+  color: var(--color-black);
   padding: 2px 6px;
   border-radius: 4px;
   white-space: nowrap;
 }
 
 #content blockquote {
-  border-left: 4px solid #007bff;
+  border-left: 4px solid var(--color-content-blockquote);
   padding: 0.75rem 1rem;
   margin: 1rem 0;
-  background-color: #f8f9fa;
+  background-color: var(--color-content-code-bg);
   font-style: italic;
-  color: #555;
+  color: var(--color-content-muted);
 }
 
 #content a {
-  color: #007bff;
+  color: var(--color-content-link);
   text-decoration: none;
   transition: color 0.2s ease-in-out;
 
   &:hover {
-    color: #007bff;
+    color: var(--color-content-link);
   }
 
   &.external-link::after {

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -1,5 +1,58 @@
 @import 'tailwindcss';
 
+/* Tailwind CSS v4에서 사용하는 방식으로 모든 프로젝트 색상 정의 */
+@theme {
+  /* Docker 브랜드 색상 */
+  --color-docker-primary: #086dd7;
+  --color-docker-hover: #2560ff;
+  --color-docker-link: #007bff;
+
+  /* 기본 색상 (Tailwind 표준) */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-transparent: transparent;
+
+  /* 회색 계열 */
+  --color-gray-50: #f9fafb;
+  --color-gray-100: #f3f4f6;
+  --color-gray-200: #e5e7eb;
+  --color-gray-300: #d1d5db;
+  --color-gray-400: #9ca3af;
+  --color-gray-500: #6b7280;
+  --color-gray-600: #4b5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1f2937;
+  --color-gray-900: #111827;
+
+  /* 빨간색 계열 */
+  --color-red-500: #ef4444;
+
+  /* 파란색 계열 */
+  --color-blue-300: #93c5fd;
+  --color-blue-500: #3b82f6;
+  --color-blue-light: #b0c4de; /* 푸터 링크용 연한 파란색 */
+
+  /* 콘텐츠 전용 색상 (content_style.css에서 사용) */
+  --color-content-heading: #444444; /* 제목 색상 */
+  --color-content-text: #222222; /* 본문 텍스트 */
+  --color-content-muted: #555555; /* 인용구 텍스트 */
+  --color-content-code-bg: #f8f9fa; /* 코드 블록 배경 */
+  --color-content-code-border: #e1e2e6; /* 코드 블록 테두리 */
+  --color-content-code-inline: #e1e2e6; /* 인라인 코드 배경 */
+  --color-content-blockquote: #007bff; /* 인용구 왼쪽 테두리 */
+  --color-content-link: #007bff; /* 링크 색상 */
+
+  /* 사이드바/네비게이션 색상 */
+  --color-sidebar-bg: #f9f9fa;
+  --color-nav-hover: #007bff;
+
+  /* 상태별 색상 */
+  --color-surface-card: #ffffff;
+  --color-surface-code: #f8f9fa;
+  --color-border-light: #e1e2e6;
+  --color-border-card: #e5e7eb;
+}
+
 /* 기본 폰트 설정 */
 @layer base {
   /* 한국어 텍스트에 최적화된 시스템 폰트 스택 */
@@ -43,7 +96,13 @@
 /* 카드 컴포넌트 스타일 */
 @layer components {
   .card {
-    @apply mb-4 flex h-full min-w-0 flex-col rounded-md border border-gray-200 bg-white px-4 py-3 transition duration-200 hover:border-gray-300 hover:shadow;
+    @apply mb-4 flex h-full min-w-0 flex-col rounded-md border px-4 py-3 transition duration-200 hover:shadow;
+    border-color: var(--color-border-card);
+    background-color: var(--color-surface-card);
+  }
+
+  .card:hover {
+    border-color: var(--color-gray-300);
   }
 
   .card-link {
@@ -63,10 +122,12 @@
   }
 
   .card-description {
-    @apply text-sm leading-snug text-gray-500;
+    @apply text-sm leading-snug;
+    color: var(--color-gray-500);
   }
 
   .card-title {
-    @apply text-base font-semibold text-gray-700;
+    @apply text-base font-semibold;
+    color: var(--color-gray-700);
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,9 +1,9 @@
-module.exports = {
-  darkMode: 'media', // 또는 'class'
+/** @type {import('tailwindcss').Config} */
+export default {
   content: [
     './index.html',
     './src/**/*.{js,ts,jsx,tsx}',
     './public/**/*.md',
     './src/scripts/components/*.{js,ts,jsx,tsx}'
-  ],
+  ]
 };