From 6f720e962c845f1084ea709ef181d19783411b3a Mon Sep 17 00:00:00 2001 From: ThisTimeNull Date: Sat, 21 Jun 2025 21:57:46 +0900 Subject: [PATCH] =?UTF-8?q?[fix]=20JSON=20=EB=8D=B0=EC=9D=B4=ED=84=B0?= =?UTF-8?q?=EB=A5=BC=20public=20=EA=B2=BD=EB=A1=9C=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20&=20=EC=BD=94=EB=93=9C=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- {src => public}/data/breadcrumb.json | 0 {src => public}/data/nav/get-started.json | 0 {src => public}/data/nav/guides.json | 0 src/scripts/breadcrumb.ts | 33 +++++++++++++++++------ src/scripts/components/nav-component.ts | 4 +-- src/scripts/main.ts | 4 +-- 6 files changed, 29 insertions(+), 12 deletions(-) rename {src => public}/data/breadcrumb.json (100%) rename {src => public}/data/nav/get-started.json (100%) rename {src => public}/data/nav/guides.json (100%) diff --git a/src/data/breadcrumb.json b/public/data/breadcrumb.json similarity index 100% rename from src/data/breadcrumb.json rename to public/data/breadcrumb.json diff --git a/src/data/nav/get-started.json b/public/data/nav/get-started.json similarity index 100% rename from src/data/nav/get-started.json rename to public/data/nav/get-started.json diff --git a/src/data/nav/guides.json b/public/data/nav/guides.json similarity index 100% rename from src/data/nav/guides.json rename to public/data/nav/guides.json diff --git a/src/scripts/breadcrumb.ts b/src/scripts/breadcrumb.ts index b098813..5ac8870 100644 --- a/src/scripts/breadcrumb.ts +++ b/src/scripts/breadcrumb.ts @@ -1,5 +1,3 @@ -import translations from '../data/breadcrumb.json'; - /** * Breadcrumb 아이템의 세그먼트 데이터 구조 * - name: 세그먼트 이름 @@ -27,18 +25,36 @@ interface TranslationData { [key: string]: SegmentData; } +/** + * Breadcrumb 번역 데이터를 로드합니다. + */ +async function loadTranslationData(): Promise { + try { + const response = await fetch('/data/breadcrumb.json'); + if (!response.ok) { + throw new Error('Failed to load breadcrumb translation data'); + } + return await response.json(); + } catch (error) { + console.error('Error loading breadcrumb translation data:', error); + // 기본값 반환 (빈 객체) + return {}; + } +} + /** * 경로 세그먼트를 번역하고 링크 가능 여부를 확인합니다. * 계층적 구조를 고려하여 현재 경로에서 세그먼트를 찾습니다. * @param segments 전체 경로 세그먼트 배열 * @param currentIndex 현재 처리 중인 세그먼트의 인덱스(깊이를 알기 위함) + * @param translationData 번역 데이터 * @returns 해당 세그먼트 데이터 또는 null (데이터가 없는 경우) */ function getSegmentData( segments: string[], - currentIndex: number + currentIndex: number, + translationData: TranslationData ): SegmentData | null { - const translationData = translations as TranslationData; let current = translationData[segments[0]]; if (!current) { @@ -59,13 +75,14 @@ function getSegmentData( /** * 현재 hash를 기반으로 breadcrumb 아이템들을 생성합니다. */ -function generateBreadcrumbItems(): BreadcrumbItem[] { +async function generateBreadcrumbItems(): Promise { const hash = window.location.hash.slice(1); // # 제거 if (!hash || hash === '/') { return [{ name: '홈', path: '/', linkable: true }]; } + const translationData = await loadTranslationData(); const pathSegments = hash.split('/').filter((segment) => segment !== ''); const breadcrumbItems: BreadcrumbItem[] = [ { name: '홈', path: '/', linkable: true }, @@ -73,7 +90,7 @@ function generateBreadcrumbItems(): BreadcrumbItem[] { let currentPath = ''; pathSegments.forEach((segment, index) => { - const segmentData = getSegmentData(pathSegments, index); + const segmentData = getSegmentData(pathSegments, index, translationData); currentPath += `/${segment}`; // translations 데이터에 없는 세그먼트는 breadcrumb에 추가하지 않음 @@ -131,12 +148,12 @@ function removePreviousBreadcrumb(): void { /** * Breadcrumb을 생성하고 div#content의 첫 번째 자식으로 추가합니다. */ -export function initializeBreadcrumb(): void { +export async function initializeBreadcrumb(): Promise { const contentDiv = document.getElementById('content')!; removePreviousBreadcrumb(); - const breadcrumbItems = generateBreadcrumbItems(); + const breadcrumbItems = await generateBreadcrumbItems(); const breadcrumbElement = createBreadcrumbElement(breadcrumbItems); contentDiv.insertBefore(breadcrumbElement, contentDiv.firstChild); diff --git a/src/scripts/components/nav-component.ts b/src/scripts/components/nav-component.ts index 9523371..5f3ded5 100644 --- a/src/scripts/components/nav-component.ts +++ b/src/scripts/components/nav-component.ts @@ -34,7 +34,7 @@ export default class NavComponent extends HTMLElement { this.currentRoute = this.getCurrentRoute(); try { - const response = await fetch(`/src/data/nav/${this.currentRoute}.json`); + const response = await fetch(`/data/nav/${this.currentRoute}.json`); if (!response.ok) { throw new Error( `Failed to load navigation data for ${this.currentRoute}` @@ -44,7 +44,7 @@ export default class NavComponent extends HTMLElement { } catch (error) { console.error('Error loading navigation data:', error); // 기본값으로 get-started 데이터 반환 - const fallbackResponse = await fetch('/src/data/nav/get-started.json'); + const fallbackResponse = await fetch('/data/nav/get-started.json'); return await fallbackResponse.json(); } } diff --git a/src/scripts/main.ts b/src/scripts/main.ts index 0cc543d..0c11298 100644 --- a/src/scripts/main.ts +++ b/src/scripts/main.ts @@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', async () => { try { await initializeMarkdownLoader(); initializeTableContents(); - initializeBreadcrumb(); + await initializeBreadcrumb(); } catch (error) { console.error('❌ main.ts: DOMContentLoaded : Markdown 로드 실패!', error); // 실제 다른 작업이 필요 @@ -22,7 +22,7 @@ window.addEventListener('hashchange', async () => { try { await initializeMarkdownLoader(); initializeTableContents(); - initializeBreadcrumb(); + await initializeBreadcrumb(); window.scrollTo(0, 0); // 페이지 이동 시 최상단으로 스크롤 이동 } catch (error) { console.error('❌ main.ts: hashchange : Markdown 로드 실패!', error);