Merge pull request #45 from elecbug/master

[UI] UI 업데이트 및 적용
docker-ko · Feb 17, 2025 · 2e8130d · 2e8130d
2 parents 0349f04 + bcf1699
commit 2e8130d
Show file tree

Hide file tree

Showing 11 changed files with 246 additions and 209 deletions.
diff --git a/index.html b/index.html
diff --git a/public/docs/home.md b/public/docs/home.md
@@ -0,0 +1,2 @@
+Welcome to Docker Korea!
+Docker 한국어에 오신 여러분을 환영합니다!
diff --git a/src/main.ts b/src/main.ts
diff --git a/src/script.js b/src/script.js
diff --git a/src/scripts/load_md.ts b/src/scripts/load_md.ts
@@ -0,0 +1,55 @@
+import { marked } from "marked";
+
+async function loadMarkdown(page: string) {
+    try {
+        console.log(`Fetching Markdown: /docs/${page}.md`); // 디버깅 로그 추가
+
+        const response = await fetch(`/docs/${page}.md?cache=${Date.now()}`);
+        if (!response.ok) throw new Error(`페이지를 찾을 수 없습니다: ${page}`);
+
+        const mdText = await response.text();
+        if (mdText.trim().startsWith("<!DOCTYPE html>") || mdText.includes("<html")) throw new Error(`요청된 경로가 Markdown이 아닌 HTML을 반환합니다: ${page}`);
+        if (!mdText.trim()) throw new Error(`Markdown 파일이 비어 있습니다: ${page}`);
+
+        const htmlContent = marked.parse(mdText);
+
+        const contentElement = document.getElementById("content")!;
+        contentElement.innerHTML = await htmlContent;  // HTML 삽입
+
+        console.log(`Markdown 로드 완료! ${mdText}`);
+    } catch (error) {
+        console.error(error);
+        document.getElementById("content")!.innerHTML = `
+            <div class="not-found">
+                <h2>페이지를 찾을 수 없습니다.</h2>
+                <p>요청하신 문서를 찾을 수 없습니다. 경로를 확인해 주세요.</p>
+                <a href="/" class="back-home">홈으로 돌아가기</a>
+            </div>
+        `;
+    }
+}
+
+
+export function initializeMarkdownLoader() {
+    function updateMarkdown() {
+        let page: string;
+
+        if (location.hash) {
+            page = location.hash.substring(1); // 해시(#)를 제거한 경로
+        } else {
+            // 해시가 없는 경우 location.pathname 사용
+            page = location.pathname.startsWith("/") ? location.pathname.substring(1) : location.pathname;
+        }
+
+        console.log(`현재 location.pathname: ${location.pathname}`);
+        console.log(`현재 location.hash: ${location.hash}`);
+        console.log(`페이지 변경 감지: ${page}`);
+
+        loadMarkdown(page);
+    }
+
+    window.addEventListener("hashchange", updateMarkdown);
+    window.addEventListener("popstate", updateMarkdown); // 브라우저 뒤로 가기/앞으로 가기 감지
+    updateMarkdown(); // 초기 실행
+}
+
diff --git a/src/scripts/main.ts b/src/scripts/main.ts
@@ -0,0 +1,7 @@
+import '../styles/content_style.css';
+import '../styles/not_found.css';
+import '../styles/style.css';
+import './load_md';
+import { initializeMarkdownLoader } from './load_md';
+
+initializeMarkdownLoader();
diff --git a/src/vite-env.d.ts → src/scripts/vite-env.d.ts b/src/vite-env.d.ts → src/scripts/vite-env.d.ts
diff --git a/src/styles/content_style.css b/src/styles/content_style.css
@@ -0,0 +1,83 @@
+#content {
+    color: black !important;
+    background-color: white;
+    padding: 1rem;
+    border-radius: 5px;
+}
+
+#content h1 {
+    font-size: 2rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    color: #333;
+}
+
+#content h2 {
+    font-size: 1.75rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    color: #444;
+}
+
+#content h3 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    color: #444;
+}
+
+#content p {
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 1rem;
+    color: #222;
+}
+
+#content ul, #content ol {
+    margin-left: 1.5rem;
+    padding-left: 1rem;
+}
+
+#content ul {
+    list-style-type: disc;
+}
+
+#content ol {
+    list-style-type: decimal;
+}
+
+#content li {
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+#content ul ul, #content ol ol, #content ul ol, #content ol ul {
+    margin-left: 1.5rem;
+    padding-left: 1rem;
+}
+
+#content code {
+    font-family: monospace;
+    background-color: #f4f4f4;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    color: #d63384;
+}
+
+#content pre {
+    background: #1e1e1e;
+    color: white;
+    padding: 1rem;
+    border-radius: 5px;
+    overflow-x: auto;
+}
+
+#content blockquote {
+    border-left: 4px solid #007bff;
+    padding: 0.75rem 1rem;
+    margin: 1rem 0;
+    background-color: #f8f9fa;
+    font-style: italic;
+    color: #555;
+}
diff --git a/src/styles/not_found.css b/src/styles/not_found.css
@@ -0,0 +1,44 @@
+.not-found {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    text-align: center;
+    padding: 20px;
+    max-width: 600px;
+    background: #fff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.not-found h2 {
+    color: #d9534f;
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+.not-found p {
+    font-size: 16px;
+    color: #555;
+}
+
+.not-found .back-home {
+    display: inline-block;
+    margin-top: 10px;
+    padding: 8px 15px;
+    background: #007bff;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+}
+
+.not-found .back-home:hover {
+    background: #0056b3;
+}
diff --git a/src/style.css → src/styles/style.css b/src/style.css → src/styles/style.css
diff --git a/vite.config.ts b/vite.config.ts
@@ -6,5 +6,6 @@ export default defineConfig({
 	base: './',
 	build: {
 		outDir: 'dist',
-	}
+	},
+	publicDir: 'public',
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Welcome to Docker Korea!
		Docker 한국어에 오신 여러분을 환영합니다!