포맷팅 수정

Author: krsy0411

src/data/breadcrumb.json

@@ -1,42 +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 워크숍 이후 단계"
-	}
+    "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 워크숍 이후 단계"
+  }
 }

src/scripts/breadcrumb.ts

@@ -6,13 +6,13 @@ interface BreadcrumbItem {
 }
 
 interface TranslationData {
-    breadcrumb: Record<string, string>;
-}       
+  breadcrumb: Record<string, string>;
+}
 
 /**
  * 경로 세그먼트를 번역합니다.
  * @param segment 번역할 세그먼트
- * @returns 번역된 텍스트 또는 원본 텍스트  
+ * @returns 번역된 텍스트 또는 원본 텍스트
  */
 function translatePathSegment(segment: string): string {
   const translationData = translations as TranslationData;
@@ -24,27 +24,25 @@ function translatePathSegment(segment: string): string {
  */
 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: '#/' }
-  ];
+  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}`
+      path: `#${currentPath}`,
     });
   });
 
@@ -57,20 +55,23 @@ function generateBreadcrumbItems(): BreadcrumbItem[] {
 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';
+  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('');
+  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;
@@ -100,5 +101,5 @@ export function initializeBreadcrumb(): void {
   const breadcrumbElement = createBreadcrumbElement(breadcrumbItems);
 
   // div#content의 첫 번째 자식으로 추가
-	contentDiv.insertBefore(breadcrumbElement, contentDiv.firstChild);
+  contentDiv.insertBefore(breadcrumbElement, contentDiv.firstChild);
 }