[UI] ButtonComponent 적용, Breadcrumb 생성 (#136)

krsy0411 · web-flow · commit da2a605c4558 · 2025-06-14T19:29:16.000+09:00
* [task/122] ButtonComponent 적용

* [task/121] Breadcrumb 생성

* 포맷팅 수정

* GitHub Copilot 리뷰에 맞춰 추가 수정
diff --git a/index.html b/index.html
@@ -44,57 +44,6 @@
         class="dark:bg-gray-dark-100 fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden overflow-y-auto bg-[#f9f9fa] md:sticky md:top-12 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[320px]"
       >
         <div class="dark:bg-gray-dark-100 z-50 w-full p-4 md:block">
-          <div id="nav__get-started" class="px-2 py-2 text-black">
-            <div class="flex w-full items-center justify-between">
-              <a
-                class="flex items-center font-light text-black hover:text-blue-500 md:text-base dark:hover:text-blue-500"
-                href="#/get-started"
-              >
-                <span class="m-0 p-0 pr-2">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 512 512"
-                    width="12"
-                    height="12"
-                  >
-                    <path
-                      d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L125.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"
-                    />
-                  </svg>
-                </span>
-                Get started
-              </a>
-              <button
-                class="inline-flex h-7 w-7 items-center justify-center rounded hover:cursor-pointer hover:bg-gray-400 hover:dark:bg-gray-400"
-              >
-                <span>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 512 512"
-                    width="12"
-                    height="12"
-                  >
-                    <path
-                      d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 129.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
-                    />
-                  </svg>
-                </span>
-                <span class="hidden">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 512 512"
-                    width="12"
-                    height="12"
-                  >
-                    <path
-                      d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
-          <hr class="text-gray-light-200 dark:text-gray-dark-300 m-2" />
           <div
             id="nav__content"
             class="flex flex-col font-light text-black md:text-base"
@@ -671,13 +620,13 @@
       <!-- content: (마크다운 파일) 표시 공간 : 중간 부분 -->
       <div
         id="content"
-        class="dark:bg-background-dark w-full min-w-0 bg-white p-8"
+        class="dark:bg-background-dark w-full min-w-0 bg-white p-10"
       ></div>
 
       <!-- aside: 오른쪽 부분 사이드 -->
       <aside
         id="aside-toc"
-        class="sticky top-12 h-full min-w-80 overflow-y-auto px-2 py-4 lg:block"
+        class="sticky top-12 h-full min-w-70 overflow-y-auto px-2 py-4 lg:block"
       >
         <div id="toc" class="text-[14px] text-black font-bold"></div>
       </aside>
diff --git a/package.json b/package.json
@@ -12,6 +12,8 @@
     "prettier:check": "prettier --check \"{src,tests}/**/*.{js,jsx,ts,tsx,json,css,scss}\"",
     "prettier:write": "prettier --write \"{src,tests}/**/*.{js,jsx,ts,tsx,json,css,scss}\"",
     "type:check": "tsc",
+    "fix:all": "npm run lint:fix && npm run prettier:write",
+    "check:all": "npm run lint:check && npm run prettier:check && npm run type:check",
     "test": "vitest --run",
     "test:watch": "vitest"
   },
diff --git a/public/docs/get-started/docker-concepts/building-images/build-tag-and-publish-an-image.md b/public/docs/get-started/docker-concepts/building-images/build-tag-and-publish-an-image.md
@@ -206,4 +206,4 @@ docker push my-username/my-image
 
 이제 이미지를 빌드하고 게시하는 방법을 알았으니 Docker 빌드 캐시를 사용하여 빌드 프로세스 속도를 높이는 방법을 알아보겠습니다.
 
-[Using the build cache](#/get-started/docker-concepts/building-images/using-the-build-cache)
+<button-component href="#/get-started/docker-concepts/building-images/using-the-build-cache" title="Using the build cache" />
diff --git a/public/docs/get-started/docker-concepts/building-images/understanding-image-layers.md b/public/docs/get-started/docker-concepts/building-images/understanding-image-layers.md
@@ -185,4 +185,4 @@
 
 대부분의 이미지 빌드는 `docker container commit`을 사용하지 않고, Dockerfile을 사용합니다. Dockerfile은 이러한 단계를 자동화합니다.
 
-[Writing a Dockerfile](#/get-started/docker-concepts/building-images/writing-a-dockerfile)
+<button-component href="#/get-started/docker-concepts/building-images/writing-a-dockerfile" title="Writing a Dockerfile" />
diff --git a/public/docs/get-started/docker-concepts/building-images/using-the-build-cache.md b/public/docs/get-started/docker-concepts/building-images/using-the-build-cache.md
@@ -210,4 +210,4 @@ Dockerfile을 작성하거나 편집할 때 불필요한 캐시 누락을 피하
 
 이제 Docker 빌드 캐시를 효과적으로 사용하는 방법을 이해했으므로 다중 단계 빌드에 대해 알아볼 준비가 되었습니다.
 
-[Multi-stage builds](#/get-started/docker-concepts/building-images/multi-stage-builds)
+<button-component href="#/get-started/docker-concepts/building-images/multi-stage-builds" title="Multi-stage builds" />
diff --git a/public/docs/get-started/docker-concepts/building-images/writing-a-dockerfile.md b/public/docs/get-started/docker-concepts/building-images/writing-a-dockerfile.md
@@ -138,4 +138,4 @@ Dockerfile 작성에 대해 더 알아보려면 다음 리소스를 참조하세
 
 이제 Dockerfile을 생성하고 기본 사항을 배웠으니, 이미지를 빌드하고 태그를 지정하며 푸시하는 방법을 배우십시오.
 
-[Build, tag, and publish an image](#/get-started/docker-concepts/building-images/build-tag-and-publish-an-image)
+<button-component href="#/get-started/docker-concepts/building-images/build-tag-and-publish-an-image" title="Build, tag, and publish an image" />
diff --git a/public/docs/get-started/docker-concepts/running-containers/overriding-container-defaults.md b/public/docs/get-started/docker-concepts/running-containers/overriding-container-defaults.md
@@ -200,4 +200,4 @@ $ docker run -e POSTGRES_PASSWORD=secret postgres docker-entrypoint.sh -h localh
 
 이제 컨테이너 기본값을 재정의하는 방법을 알아보았으니, 컨테이너 데이터를 유지하는 방법을 알아보겠습니다.
 
-[Persisting container data](#/get-started/docker-concepts/running-containers/persisting-container-data)
+<button-component href="#/get-started/docker-concepts/running-containers/persisting-container-data" title="Persisting container data" />
diff --git a/public/docs/get-started/docker-concepts/running-containers/persisting-container-data.md b/public/docs/get-started/docker-concepts/running-containers/persisting-container-data.md
@@ -158,4 +158,4 @@ $ docker rm -f new-db
 
 이제 컨테이너 데이터를 유지하는 법에 대해 알아보았으니, 로컬 파일을 컨테이너와 공유하는 방법을 알아볼 차례입니다.
 
-[Sharing local files with containers](#/get-started/docker-concepts/running-containers/sharing-local-files)
+<button-component href="#/get-started/docker-concepts/running-containers/sharing-local-files" title="Sharing local files with containers" />
diff --git a/public/docs/get-started/docker-concepts/running-containers/publishing-ports.md b/public/docs/get-started/docker-concepts/running-containers/publishing-ports.md
@@ -110,4 +110,4 @@ services:
 
 이제 컨테이너 포트를 공개하고 노출하는 방법을 이해했으니, 다음으로 컨테이너 기본값을 재정의하는 방법을 알아보겠습니다.
 
-- [컨테이너 기본값 재정의](#/get-started/docker-concepts/running-containers/publishing-ports)
+<button-component href="#/get-started/docker-concepts/running-containers/publishing-ports" title="Overriding container defaults" />
diff --git a/public/docs/get-started/docker-concepts/running-containers/sharing-local-files.md b/public/docs/get-started/docker-concepts/running-containers/sharing-local-files.md
@@ -171,4 +171,4 @@ $ docker run -v HOST-DIRECTORY:/CONTAINER-DIRECTORY:rw nginx
 
 이제 컨테이너와 로컬 파일을 공유하는 방법을 알았으니, 다중 컨테이너 애플리케이션에 대해 알아볼 차례입니다.
 
-[Multi-container applications](#/get-started/docker-concepts/running-containers/multi-container-applications)
+<button-component href="/#/get-started/docker-concepts/running-containers/multi-container-applications" title="Multi-container applications" />
diff --git a/public/docs/get-started/docker-concepts/the-basics/what-is-a-container.md b/public/docs/get-started/docker-concepts/the-basics/what-is-a-container.md
@@ -102,4 +102,4 @@ React, Python API, PostgreSQL DB를 주요 기술 스택으로 사용한다고 
 
 이제 도커 컨테이너의 기본을 배웠으니 도커 이미지에 대해 배울 차례입니다.
 
-[What is an image?](#/get-started/docker-concepts/the-basics/what-is-an-image)
+<button-component href="#/get-started/docker-concepts/the-basics/what-is-an-image" title="What is an image?" />
diff --git a/public/docs/get-started/docker-concepts/the-basics/what-is-a-registry.md b/public/docs/get-started/docker-concepts/the-basics/what-is-a-registry.md
@@ -126,4 +126,4 @@ Dockerfile의 세부 사항에 대해서는 나중에 자세히 설명할 테니
 
 이제 컨테이너와 이미지의 기본을 이해했으니 Docker Compose에 대해 배울 준비가 되었습니다.
 
-[What is Docker compose?](#/get-started/docker-concepts/the-basics/what-is-docker-compose)
+<button-component href="#/get-started/docker-concepts/the-basics/what-is-docker-compose" title="What is Docker compose?" />
diff --git a/public/docs/get-started/docker-concepts/the-basics/what-is-an-image.md b/public/docs/get-started/docker-concepts/the-basics/what-is-an-image.md
@@ -76,4 +76,4 @@
 
 이제 이미지의 기본을 배웠으니 레지스트리를 통해 이미지를 배포하는 방법을 배울 차례입니다.
 
-[What is a registry?](#/get-started/docker-concepts/the-basics/what-is-a-registry)
+<button-component href="/#/get-started/docker-concepts/the-basics/what-is-a-registry" title="What is a registry?" />
diff --git a/public/docs/get-started/introduction/build-and-push-first-image.md b/public/docs/get-started/introduction/build-and-push-first-image.md
@@ -123,4 +123,4 @@ Docker 이미지를 공유하기 위해서는 이를 저장할 공간이 필요
 
 이제 이미지를 빌드했으니, 왜 개발자로서 도커에 대해 더 학습해야 하고 도커가 여러분의 일상 업무에 어떻게 도움이 될지 논의해 보겠습니다.
 
-[What's Next](/#/get-started/introduction/whats-next)
+<button-component href="/#/get-started/introduction/whats-next" title="What's Next" />
diff --git a/public/docs/get-started/introduction/develop-with-containers.md b/public/docs/get-started/introduction/develop-with-containers.md
@@ -148,4 +148,4 @@ Docker Desktop은 이를 가능하게 하고 더 많은 기능을 제공합니
 
 애플리케이션을 업데이트했으니, 이제 컨테이너 이미지로 패키징하고 레지스트리, 특히 Docker Hub에 푸시하는 방법을 배울 준비가 되었습니다.
 
-[Build and push your first image](/#/get-started/introduction/build-and-push-first-image)
+<button-component href="/#/get-started/introduction/build-and-push-first-image" title="Build and push your first image" />
diff --git a/public/docs/get-started/introduction/get-docker-desktop.md b/public/docs/get-started/introduction/get-docker-desktop.md
@@ -69,4 +69,4 @@ Docker Desktop은 다양한 환경에서 애플리케이션의 설정, 구성 
 
 Docker Desktop을 설치하고 첫 번째 컨테이너를 실행했으니, 이제 컨테이너를 사용하여 개발을 시작할 차례입니다.
 
-[Develop with containers](/#/get-started/introduction/develop-with-containers)
+<button-component href="/#/get-started/introduction/develop-with-containers" title="Develop with containers" />
diff --git a/public/docs/get-started/workshop/02_our_app.md b/public/docs/get-started/workshop/02_our_app.md
@@ -112,4 +112,4 @@ df784548666d        getting-started     "docker-entrypoint.s..."   2 minutes ago
 
 다음으로, 앱을 수정하고 실행 중인 애플리케이션을 새 이미지로 업데이트하는 방법을 알아보겠습니다. 이 과정에서, 몇 가지 유용한 명령도 배우게 됩니다.
 
-[Update the application](/#/get-started/workshop/03_updating_app)
+<button-component href="/#/get-started/workshop/03_updating_app" title="Update the application" />
diff --git a/public/docs/get-started/workshop/03_updating_app.md b/public/docs/get-started/workshop/03_updating_app.md
@@ -75,4 +75,4 @@ docker: Error response from daemon: driver failed programming external connectiv
 
 다음으로, 다른 사람과 이미지를 공유하는 방법을 학습하게 될 겁니다.
 
-[Share the application](/#/get-started/workshop/04_sharing_app)
+<button-component href="/#/get-started/workshop/04_sharing_app" title="Share the application" />
diff --git a/public/docs/get-started/workshop/04_sharing_app.md b/public/docs/get-started/workshop/04_sharing_app.md
@@ -106,4 +106,4 @@
 
 다음 섹션에서는 컨테이너화된 애플리케이션에서 데이터를 유지하는 방법을 배우게 됩니다.
 
-[Persist the DB](/#/get-started/workshop/05_persisting_data)
+<button-component href="/#/get-started/workshop/05_persisting_data" title="Persist the DB" />
diff --git a/public/docs/get-started/workshop/05_persisting_data.md b/public/docs/get-started/workshop/05_persisting_data.md
@@ -134,4 +134,4 @@ $ docker volume inspect todo-db
 
 다음 섹션에서는 바인드 마운트(bind mounts)를 사용하여 앱을 보다 효율적으로 개발하는 방법을 배우게 됩니다.
 
-[Use bind mounts](/#/get-started/workshop/06_bind_mounts)
+<button-component href="/#/get-started/workshop/06_bind_mounts" title="Use bind mounts" />
diff --git a/public/docs/get-started/workshop/06_bind_mounts.md b/public/docs/get-started/workshop/06_bind_mounts.md
@@ -211,4 +211,4 @@ CLI 또는 Docker Desktop을 사용하여 바인드 마운트로 컨테이너를
 
 앱을 프로덕션을 위해 준비하려면 SQLite에서 작동하는 데이터베이스를 확장성이 좀 더 뛰어난 데이터베이스로 마이그레이션해야 합니다. 간편함을 위해, 관계형 데이터베이스를 계속 사용하고 애플리케이션을 MySQL로 전환하면 됩니다. 하지만, MySQL을 어떻게 실행해야 할까요? 컨테이너 간 통신을 어떻게 허용해야 할까요? 다음 섹션에서 자세히 알아보겠습니다.
 
-[Multi container apps](/#/get-started/workshop/07_multi_container)
+<button-component href="/#/get-started/workshop/07_multi_container" title="Multi container apps" />
diff --git a/public/docs/get-started/workshop/07_multi_container.md b/public/docs/get-started/workshop/07_multi_container.md
@@ -249,4 +249,4 @@ todo 앱은 MySQL 연결 설정을 지정하기 위한 몇 가지 환경 변수
 
 다음 섹션에서는 Docker Compose에 대해 알아보겠습니다. Docker Compose를 사용하면 애플리케이션 스택을 훨씬 쉽게 공유하고, 다른 사람들이 간단한 명령 하나로 스택을 실행하도록 할 수 있습니다.
 
-[Use Docker Compose](/#/get-started/workshop/08_using_compose)
+<button-component href="/#/get-started/workshop/08_using_compose" title="Use Docker Compose" />
diff --git a/public/docs/get-started/workshop/08_using_compose.md b/public/docs/get-started/workshop/08_using_compose.md
@@ -253,4 +253,4 @@ Docker Desktop Dashboard를 보면, **getting-started-app** 이라는 그룹이
 
 다음으로, Dockerfile을 개선하는 데 사용할 수 있는 몇 가지 모범 사례에 대해 알아보겠습니다.
 
-[Image-building best practices](/#/get-started/workshop/09_image_best)
+<button-component href="/#/get-started/workshop/09_image_best" title="Image-building best practices" />
diff --git a/public/docs/get-started/workshop/09_image_best.md b/public/docs/get-started/workshop/09_image_best.md
@@ -172,4 +172,4 @@ COPY --from=build /app/build /usr/share/nginx/html
 
 다음 섹션에서는, 컨테이너에 대해 계속해서 학습할 수 있는 추가 리소스들에 대해 알아봅니다.
 
-[What next](/#/get-started/workshop/10_what_next)
+<button-component href="/#/get-started/workshop/10_what_next" title="What next" />
diff --git a/src/data/breadcrumb.json b/src/data/breadcrumb.json
@@ -0,0 +1,42 @@
+{
+  "breadcrumb": {
+    "get-started": "시작하기",
+    "get-docker": "Docker 설치",
+    "docker-overview": "Docker 개요",
+    "introduction": "소개",
+    "build-and-push-first-image": "첫 번째 이미지 빌드 및 푸시",
+    "develop-with-containers": "컨테이너로 개발",
+    "get-docker-desktop": "Docker Desktop 설치",
+    "whats-next": "다음 단계",
+    "docker-concepts": "Docker 개념",
+    "the-basics": "기본 사항",
+    "what-is-a-container": "컨테이너란?",
+    "what-is-a-registry": "레지스트리란?",
+    "what-is-an-image": "이미지란?",
+    "what-is-docker-compose": "Docker Compose란?",
+    "building-images": "이미지 빌드",
+    "understanding-image-layers": "이미지 레이어 이해",
+    "writing-a-dockerfile": "Dockerfile 작성",
+    "build-tag-and-publish-an-image": "이미지 빌드, 태그, 게시",
+    "using-the-build-cache": "빌드 캐시 사용",
+    "multi-stage-builds": "멀티 스테이지 빌드",
+    "running-containers": "컨테이너 실행",
+    "multi-container-applications": "멀티 컨테이너 애플리케이션",
+    "overriding-container-defaults": "컨테이너 기본값 재정의",
+    "persisting-container-data": "컨테이너 데이터 유지",
+    "publishing-ports": "포트 게시",
+    "sharing-local-files": "로컬 파일 공유",
+    "docker-workshop": "Docker 워크샵",
+    "resources": "리소스",
+    "workshop": "워크샵",
+    "02_our_app": "애플리케이션 컨테이너화",
+    "03_updating_app": "애플리케이션 업데이트",
+    "04_sharing_app": "애플리케이션 공유",
+    "05_persisting_data": "데이터베이스 유지",
+    "06_bind_mounts": "바인드 마운트 사용",
+    "07_multi_container": "멀티 컨테이너 애플리케이션",
+    "08_using_compose": "Docker Compose 사용",
+    "09_image_best": "이미지 빌드 모범 사례",
+    "10_what_next": "Docker 워크숍 이후 단계"
+  }
+}
diff --git a/src/scripts/breadcrumb.ts b/src/scripts/breadcrumb.ts
@@ -0,0 +1,105 @@
+import translations from '../data/breadcrumb.json';
+
+interface BreadcrumbItem {
+  name: string;
+  path: string;
+}
+
+interface TranslationData {
+  breadcrumb: Record<string, string>;
+}
+
+/**
+ * 경로 세그먼트를 번역합니다.
+ * @param segment 번역할 세그먼트
+ * @returns 번역된 텍스트 또는 원본 텍스트
+ */
+function translatePathSegment(segment: string): string {
+  const translationData = translations as TranslationData;
+  return translationData.breadcrumb[segment] || segment;
+}
+
+/**
+ * 현재 hash를 기반으로 breadcrumb 아이템들을 생성합니다.
+ */
+function generateBreadcrumbItems(): BreadcrumbItem[] {
+  const hash = window.location.hash.slice(1); // # 제거
+
+  if (!hash || hash === '/') {
+    return [{ name: '홈', path: '#/' }];
+  }
+
+  const pathSegments = hash.split('/').filter((segment) => segment !== '');
+  const breadcrumbItems: BreadcrumbItem[] = [{ name: '홈', path: '#/' }];
+
+  let currentPath = '';
+
+  pathSegments.forEach((segment) => {
+    currentPath += `/${segment}`;
+
+    // 세그먼트 이름을 한국어로 변환
+    const displayName = translatePathSegment(segment);
+
+    breadcrumbItems.push({
+      name: displayName,
+      path: `#${currentPath}`,
+    });
+  });
+
+  return breadcrumbItems;
+}
+
+/**
+ * Breadcrumb HTML 요소를 생성합니다.
+ */
+function createBreadcrumbElement(items: BreadcrumbItem[]): HTMLElement {
+  const breadcrumbNav = document.createElement('nav');
+  breadcrumbNav.id = 'breadcrumbs';
+  breadcrumbNav.className =
+    'pb-3 flex min-w-0 items-center gap-2 text-gray-400 dark:text-gray-300';
+
+  // HTML 문자열로 breadcrumb 구조 생성
+  const breadcrumbHTML = items
+    .map((item, index) => {
+      const isLast = index === items.length - 1;
+
+      if (isLast) {
+        // 현재 페이지는 span으로 표시
+        return `<span class="truncate">${item.name}</span>`;
+      } else {
+        // 이전 페이지들은 링크로 표시 + 구분자
+        return `<a href="${item.path}" class="link truncate">${item.name}</a> / `;
+      }
+    })
+    .join('');
+
+  breadcrumbNav.innerHTML = breadcrumbHTML;
+  return breadcrumbNav;
+}
+
+/**
+ * 기존 breadcrumb을 제거합니다.
+ */
+function removePreviousBreadcrumb(): void {
+  const existingBreadcrumb = document.getElementById('breadcrumbs');
+  if (existingBreadcrumb) {
+    existingBreadcrumb.remove();
+  }
+}
+
+/**
+ * Breadcrumb을 생성하고 div#content의 첫 번째 자식으로 추가합니다.
+ */
+export function initializeBreadcrumb(): void {
+  const contentDiv = document.getElementById('content')!;
+
+  // 기존 breadcrumb 제거
+  removePreviousBreadcrumb();
+
+  // 새 breadcrumb 생성
+  const breadcrumbItems = generateBreadcrumbItems();
+  const breadcrumbElement = createBreadcrumbElement(breadcrumbItems);
+
+  // div#content의 첫 번째 자식으로 추가
+  contentDiv.insertBefore(breadcrumbElement, contentDiv.firstChild);
+}
diff --git a/src/scripts/main.ts b/src/scripts/main.ts
diff --git a/src/styles/content_style.css b/src/styles/content_style.css

Original file line number	Diff line number	Diff line change
`@@ -206,4 +206,4 @@ docker push my-username/my-image`
`206`	`206`
`207`	`207`	`이제 이미지를 빌드하고 게시하는 방법을 알았으니 Docker 빌드 캐시를 사용하여 빌드 프로세스 속도를 높이는 방법을 알아보겠습니다.`
`208`	`208`
`209`		`-[Using the build cache](#/get-started/docker-concepts/building-images/using-the-build-cache)`
	`209`	`+<button-component href="#/get-started/docker-concepts/building-images/using-the-build-cache" title="Using the build cache" />`
Original file line number	Diff line number	Diff line change
`@@ -185,4 +185,4 @@`
`185`	`185`
`186`	`186`	대부분의 이미지 빌드는 `docker container commit`을 사용하지 않고, Dockerfile을 사용합니다. Dockerfile은 이러한 단계를 자동화합니다.
`187`	`187`
`188`		`-[Writing a Dockerfile](#/get-started/docker-concepts/building-images/writing-a-dockerfile)`
	`188`	`+<button-component href="#/get-started/docker-concepts/building-images/writing-a-dockerfile" title="Writing a Dockerfile" />`
Original file line number	Diff line number	Diff line change
`@@ -210,4 +210,4 @@ Dockerfile을 작성하거나 편집할 때 불필요한 캐시 누락을 피하`
`210`	`210`
`211`	`211`	`이제 Docker 빌드 캐시를 효과적으로 사용하는 방법을 이해했으므로 다중 단계 빌드에 대해 알아볼 준비가 되었습니다.`
`212`	`212`
`213`		`-[Multi-stage builds](#/get-started/docker-concepts/building-images/multi-stage-builds)`
	`213`	`+<button-component href="#/get-started/docker-concepts/building-images/multi-stage-builds" title="Multi-stage builds" />`
Original file line number	Diff line number	Diff line change
`@@ -138,4 +138,4 @@ Dockerfile 작성에 대해 더 알아보려면 다음 리소스를 참조하세`
`138`	`138`
`139`	`139`	`이제 Dockerfile을 생성하고 기본 사항을 배웠으니, 이미지를 빌드하고 태그를 지정하며 푸시하는 방법을 배우십시오.`
`140`	`140`
`141`		`-[Build, tag, and publish an image](#/get-started/docker-concepts/building-images/build-tag-and-publish-an-image)`
	`141`	`+<button-component href="#/get-started/docker-concepts/building-images/build-tag-and-publish-an-image" title="Build, tag, and publish an image" />`
Original file line number	Diff line number	Diff line change
`@@ -200,4 +200,4 @@ $ docker run -e POSTGRES_PASSWORD=secret postgres docker-entrypoint.sh -h localh`
`200`	`200`
`201`	`201`	`이제 컨테이너 기본값을 재정의하는 방법을 알아보았으니, 컨테이너 데이터를 유지하는 방법을 알아보겠습니다.`
`202`	`202`
`203`		`-[Persisting container data](#/get-started/docker-concepts/running-containers/persisting-container-data)`
	`203`	`+<button-component href="#/get-started/docker-concepts/running-containers/persisting-container-data" title="Persisting container data" />`
Original file line number	Diff line number	Diff line change
`@@ -158,4 +158,4 @@ $ docker rm -f new-db`
`158`	`158`
`159`	`159`	`이제 컨테이너 데이터를 유지하는 법에 대해 알아보았으니, 로컬 파일을 컨테이너와 공유하는 방법을 알아볼 차례입니다.`
`160`	`160`
`161`		`-[Sharing local files with containers](#/get-started/docker-concepts/running-containers/sharing-local-files)`
	`161`	`+<button-component href="#/get-started/docker-concepts/running-containers/sharing-local-files" title="Sharing local files with containers" />`
Original file line number	Diff line number	Diff line change
`@@ -110,4 +110,4 @@ services:`
`110`	`110`
`111`	`111`	`이제 컨테이너 포트를 공개하고 노출하는 방법을 이해했으니, 다음으로 컨테이너 기본값을 재정의하는 방법을 알아보겠습니다.`
`112`	`112`
`113`		`-- [컨테이너 기본값 재정의](#/get-started/docker-concepts/running-containers/publishing-ports)`
	`113`	`+<button-component href="#/get-started/docker-concepts/running-containers/publishing-ports" title="Overriding container defaults" />`
Original file line number	Diff line number	Diff line change
`@@ -171,4 +171,4 @@ $ docker run -v HOST-DIRECTORY:/CONTAINER-DIRECTORY:rw nginx`
`171`	`171`
`172`	`172`	`이제 컨테이너와 로컬 파일을 공유하는 방법을 알았으니, 다중 컨테이너 애플리케이션에 대해 알아볼 차례입니다.`
`173`	`173`
`174`		`-[Multi-container applications](#/get-started/docker-concepts/running-containers/multi-container-applications)`
	`174`	`+<button-component href="/#/get-started/docker-concepts/running-containers/multi-container-applications" title="Multi-container applications" />`