|
| 1 | +import translations from '../data/breadcrumb.json'; |
| 2 | + |
| 3 | +interface BreadcrumbItem { |
| 4 | + name: string; |
| 5 | + path: string; |
| 6 | +} |
| 7 | + |
| 8 | +interface TranslationData { |
| 9 | + breadcrumb: Record<string, string>; |
| 10 | +} |
| 11 | + |
| 12 | +/** |
| 13 | + * 경로 세그먼트를 번역합니다. |
| 14 | + * @param segment 번역할 세그먼트 |
| 15 | + * @returns 번역된 텍스트 또는 원본 텍스트 |
| 16 | + */ |
| 17 | +function translatePathSegment(segment: string): string { |
| 18 | + const translationData = translations as TranslationData; |
| 19 | + return translationData.breadcrumb[segment] || segment; |
| 20 | +} |
| 21 | + |
| 22 | +/** |
| 23 | + * 현재 hash를 기반으로 breadcrumb 아이템들을 생성합니다. |
| 24 | + */ |
| 25 | +function generateBreadcrumbItems(): BreadcrumbItem[] { |
| 26 | + const hash = window.location.hash.slice(1); // # 제거 |
| 27 | + |
| 28 | + if (!hash || hash === '/') { |
| 29 | + return [{ name: '홈', path: '#/' }]; |
| 30 | + } |
| 31 | + |
| 32 | + const pathSegments = hash.split('/').filter(segment => segment !== ''); |
| 33 | + const breadcrumbItems: BreadcrumbItem[] = [ |
| 34 | + { name: '홈', path: '#/' } |
| 35 | + ]; |
| 36 | + |
| 37 | + let currentPath = ''; |
| 38 | + |
| 39 | + pathSegments.forEach((segment) => { |
| 40 | + currentPath += `/${segment}`; |
| 41 | + |
| 42 | + // 세그먼트 이름을 한국어로 변환 |
| 43 | + const displayName = translatePathSegment(segment); |
| 44 | + |
| 45 | + breadcrumbItems.push({ |
| 46 | + name: displayName, |
| 47 | + path: `#${currentPath}` |
| 48 | + }); |
| 49 | + }); |
| 50 | + |
| 51 | + return breadcrumbItems; |
| 52 | +} |
| 53 | + |
| 54 | +/** |
| 55 | + * Breadcrumb HTML 요소를 생성합니다. |
| 56 | + */ |
| 57 | +function createBreadcrumbElement(items: BreadcrumbItem[]): HTMLElement { |
| 58 | + const breadcrumbNav = document.createElement('nav'); |
| 59 | + breadcrumbNav.id = 'breadcrumbs'; |
| 60 | + breadcrumbNav.className = 'pb-3 flex min-w-0 items-center gap-2 text-gray-400 dark:text-gray-300'; |
| 61 | + |
| 62 | + // HTML 문자열로 breadcrumb 구조 생성 |
| 63 | + const breadcrumbHTML = items.map((item, index) => { |
| 64 | + const isLast = index === items.length - 1; |
| 65 | + |
| 66 | + if (isLast) { |
| 67 | + // 현재 페이지는 span으로 표시 |
| 68 | + return `<span class="truncate">${item.name}</span>`; |
| 69 | + } else { |
| 70 | + // 이전 페이지들은 링크로 표시 + 구분자 |
| 71 | + return `<a href="${item.path}" class="link truncate">${item.name}</a> / `; |
| 72 | + } |
| 73 | + }).join(''); |
| 74 | + |
| 75 | + breadcrumbNav.innerHTML = breadcrumbHTML; |
| 76 | + return breadcrumbNav; |
| 77 | +} |
| 78 | + |
| 79 | +/** |
| 80 | + * 기존 breadcrumb을 제거합니다. |
| 81 | + */ |
| 82 | +function removePreviousBreadcrumb(): void { |
| 83 | + const existingBreadcrumb = document.getElementById('breadcrumbs'); |
| 84 | + if (existingBreadcrumb) { |
| 85 | + existingBreadcrumb.remove(); |
| 86 | + } |
| 87 | +} |
| 88 | + |
| 89 | +/** |
| 90 | + * Breadcrumb을 생성하고 div#content의 첫 번째 자식으로 추가합니다. |
| 91 | + */ |
| 92 | +export function initializeBreadcrumb(): void { |
| 93 | + const contentDiv = document.getElementById('content')!; |
| 94 | + |
| 95 | + // 기존 breadcrumb 제거 |
| 96 | + removePreviousBreadcrumb(); |
| 97 | + |
| 98 | + // 새 breadcrumb 생성 |
| 99 | + const breadcrumbItems = generateBreadcrumbItems(); |
| 100 | + const breadcrumbElement = createBreadcrumbElement(breadcrumbItems); |
| 101 | + |
| 102 | + // div#content의 첫 번째 자식으로 추가 |
| 103 | + contentDiv.insertBefore(breadcrumbElement, contentDiv.firstChild); |
| 104 | +} |
0 commit comments