[Bug] UI 및 문서 오류 수정 (#85)

* [bug/72] editor format 설정

* [bug/72] 일부 md 파일: 렌더링 되도록 코드 수정

* [bug/72] md파일 수정

* [bug/72] 문서 문단 간격 조정, UI 오류 수정

* [bug/72] 추가 오류 수정

Author: krsy0411

.gitignore

@@ -13,7 +13,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  }
+}

index.html

@@ -26,6 +26,8 @@
         <div class="flex h-full items-center lg:gap-8 gap-2">
           <div>
             <a
+              href="https://docker-ko.github.io"
+              title="Docker korean translation home page"
               ><img
                 src="./imgs/logo/docker-logo-white.svg"
                 alt="Docker Korea home page"
@@ -82,7 +84,7 @@
           <div id="nav__get-started" class="py-2 px-2 text-black">
             <div class="flex w-full items-center justify-between">
               <a
-                class="hover:text-blue-500 dark:hover:text-blue-500 text-black flex items-center"
+                class="hover:text-blue-500 dark:hover:text-blue-500 text-black flex items-center text-sm md:text-base font-light"
                 href="#/get-started"
               >
                 <span class="p-0 m-0 pr-2">
@@ -100,7 +102,7 @@
                 Get started
               </a>
               <button
-                class="hover:bg-gray-400 hover:dark:bg-gray-400 rounded w-7 h-7 inline-flex items-center justify-center"
+                class="hover:bg-gray-400 hover:dark:bg-gray-400 hover:cursor-pointer rounded w-7 h-7 inline-flex items-center justify-center"
               >
                 <span>
                   <svg
@@ -166,7 +168,7 @@
                     >
                   </div>
                   <button
-                    class="hover:bg-gray-400 hover:dark:bg-gray-400 rounded w-7 h-7 inline-flex items-center justify-center"
+                    class="hover:bg-gray-400 hover:dark:bg-gray-400 hover:cursor-pointer rounded w-7 h-7 inline-flex items-center justify-center"
                   >
                     <span>
                       <svg
@@ -250,7 +252,7 @@
                     </button>
                   </div>
                   <button
-                    class="hover:bg-gray-400 hover:dark:bg-gray-400 rounded w-7 h-7 inline-flex items-center justify-center"
+                    class="hover:bg-gray-400 hover:dark:bg-gray-400 hover:cursor-pointer rounded w-7 h-7 inline-flex items-center justify-center"
                   >
                     <span>
                       <svg
@@ -292,7 +294,7 @@
                         </button>
                       </div>
                       <button
-                        class="hover:bg-gray-400 hover:dark:bg-gray-400 rounded w-7 h-7 inline-flex items-center justify-center"
+                        class="hover:bg-gray-400 hover:dark:bg-gray-400 hover:cursor-pointer rounded w-7 h-7 inline-flex items-center justify-center"
                       >
                         <span>
                           <svg
@@ -377,7 +379,7 @@
                         </button>
                       </div>
                       <button
-                        class="hover:bg-gray-400 hover:dark:bg-gray-400 rounded w-7 h-7 inline-flex items-center justify-center"
+                        class="hover:bg-gray-400 hover:dark:bg-gray-400 hover:cursor-pointer rounded w-7 h-7 inline-flex items-center justify-center"
                       >
                         <span>
                           <svg
@@ -472,7 +474,7 @@
                         </button>
                       </div>
                       <button
-                        class="hover:bg-gray-400 hover:dark:bg-gray-400 rounded w-7 h-7 inline-flex items-center justify-center"
+                        class="hover:bg-gray-400 hover:dark:bg-gray-400 hover:cursor-pointer rounded w-7 h-7 inline-flex items-center justify-center"
                       >
                         <span>
                           <svg
@@ -568,7 +570,7 @@
                     >
                   </div>
                   <button
-                    class="hover:bg-gray-400 hover:dark:bg-gray-400 rounded w-7 h-7 inline-flex items-center justify-center"
+                    class="hover:bg-gray-400 hover:dark:bg-gray-400 hover:cursor-pointer rounded w-7 h-7 inline-flex items-center justify-center"
                   >
                     <span>
                       <svg

public/docs/get-started/docker-concepts/building-images/build-tag-and-publish-an-image.md

@@ -90,7 +90,7 @@ docker push my-username/my-image
 
 몇 초 내에 이미지의 모든 레이어가 레지스트리에 푸시됩니다.
 
-> ### 인증 요구
+> **인증 요구**
 >
 > 이미지를 레포지토리에 푸시하기 전에 인증이 필요합니다. 이를 위해 [`docker login`](https://docs.docker.com/engine/reference/commandline/login/) 명령어를 사용합니다.
 

public/docs/get-started/docker-concepts/building-images/multi-stage-builds.md

@@ -254,7 +254,7 @@ COPY --from=build-stage /path/in/build/stage /path/to/place/in/final/stage
 
    이 명령어는 현재 디렉토리에 있는 `Dockerfile` 파일의 최종 단계를 사용하여 `spring-helloworld-builder`라는 Docker 이미지를 빌드합니다.
 
-   > ### Note
+   > **Note**
    >
    > 다중 단계 Dockerfile에서 최종 단계(final)는 기본적으로 빌드 대상입니다. 즉, `docker build` 명령어에서 `--target` 플래그를 사용하여 대상 단계를 명시적으로 지정하지 않으면 Docker는 기본적으로 마지막 단계를 빌드합니다. JDK 환경으로 빌더 단계를 빌드하려면 다음 명령어를 사용할 수 있습니다:
    >

public/docs/get-started/docker-concepts/building-images/writing-a-dockerfile.md

@@ -107,19 +107,15 @@ CMD [ "uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8080" ]
    CMD [ "node", "./src/index.js" ]
    ```
 
-> ### This Dockerfile isn't production-ready yet
+> **This Dockerfile isn't production-ready yet**
 >
 > 이 Dockerfile이 아직 모든 모범 사례를 따르지 않는다는 점에 유의하는 것이 중요합니다(의도적으로). 앱은 빌드하지만 빌드가 가능한 한 빠르지 않고 이미지도 가능한 한 안전하지 않습니다.
 >
 > 계속 읽어서 이미지가 빌드 캐시를 최대화하고 루트가 아닌 사용자로 실행하고 여러 단계로 빌드하는 방법에 대해 자세히 알아보세요.
 
-> ### Containerize new projects quickly with `docker init`
+> **Containerize new projects quickly with `docker init`**
 >
-> `docker init` 명령어는 프로젝트를 분석하고 Dockerfile, `compose.yaml`, `.dockerignore`를 빠르게 생성하여 작업을 시작하는 데 도움을 줍니다. 여기서는 Dockerfile에 대해 구체적으로 배우기 때문에 지금은 사용하지 않을 것입니다. 하지만 [여기에서 자세히 알아보세요](https://docs.docker.com/engine/reference/commandline/init/).
-
-## 새로운 프로젝트를 신속하게 컨테이너화하기
-
-`docker init` 명령어를 사용하면 프로젝트를 분석하고 Dockerfile, `compose.yaml`, `.dockerignore` 파일을 신속하게 생성하여 바로 시작할 수 있습니다. 여기서는 Dockerfile을 배우는 것이 목적이므로, 지금은 사용하지 않겠습니다. 자세한 내용은 [여기](https://docs.docker.com/reference/cli/docker/init/)를 참조하세요.
+> `docker init` 명령어는 프로젝트를 분석하고 Dockerfile, `compose.yaml`, `.dockerignore`를 빠르게 생성하여 작업을 시작하는 데 도움을 줍니다. 여기서는 Dockerfile에 대해 구체적으로 배우기 때문에 지금은 사용하지 않을 것입니다. 하지만, [여기에서 자세히 알아보세요](https://docs.docker.com/engine/reference/commandline/init/).
 
 ## Additional resources
 

public/docs/get-started/docker-concepts/the-basics/what-is-a-registry.md

@@ -21,7 +21,7 @@ Docker Hub는 인기 있는 옵션이지만, 요즘엔 [Amazon Elastic Container
 다음 다이어그램은 레지스트리, 리포지토리 및 이미지 간의 관계를 보여줍니다.
 ![repo-registry-relation](/imgs/get-started/the-basics/repo-registry-rel.png)
 
-> ### Note!
+> **Note**
 >
 > 무료 버전의 도커 허브를 사용하여 하나의 개인 저장소와 무제한 공개 저장소를 만들 수 있습니다. 자세한 내용은 [Docker Hub subscription page](https://www.docker.com/pricing/?_gl=1*1nknmps*_gcl_au*MTc5Njg5NTc1My4xNzM4MDg3ODEw*_ga*MjcxOTM2ODU5LjE3MTIxMzY5MzE.*_ga_XJWPQMJYHQ*MTczODQ5MjUxNC42LjEuMTczODQ5Mzc0OS41My4wLjA.)를 방문하세요.
 
@@ -77,7 +77,7 @@ Dockerfile의 세부 사항에 대해서는 나중에 자세히 설명할 테니
    docker build -t <YOUR_DOCKER_USERNAME>/docker-quickstart .
    ```
 
-   > ### Note
+   > **Note**
    >
    > 도커 빌드 명령의 끝에 점(.)을 포함해야 합니다. 이렇게 하면 도커가 Dockerfile을 찾을 수 있는 위치를 알 수 있습니다.
 

public/docs/get-started/what-is-docker.md …blic/docs/get-started/docker-overview.mdpublic/docs/get-started/what-is-docker.md renamed to public/docs/get-started/docker-overview.md public/docs/get-started/what-is-docker.md renamed to public/docs/get-started/docker-overview.md

@@ -8,22 +8,22 @@ Docker의 방법론을 활용하여 코드를 신속하게 배송, 테스트 및
 
 도커는 여러 플랫폼에서 다운로드하여 설치할 수 있습니다. 다음 섹션을 참조하여 최적의 설치 경로를 선택하세요.
 
-> ### Docker Desktop terms
+> **Docker Desktop terms**
 >
 > 대기업(직원 250명 이상 또는 연간 매출 1000만 달러 이상)에서 Docker Desktop을 상업적으로 사용하려면 [유료 구독](https://www.docker.com/pricing/?_gl=1*h2v28y*_gcl_au*MjczODgxODI4LjE3Mzg0NzA0NDI.*_ga*MjEyODM1MDY2OC4xNzIwMzEyNzQ5*_ga_XJWPQMJYHQ*MTczOTU2MjU3My42MS4xLjE3Mzk1NjI3NjMuNjAuMC4w)이 필요합니다.
 
-## Docker Desktop for Mac
+#### Docker Desktop for Mac
 
 macOS 샌드박스 보안 모델을 사용하는 네이티브 애플리케이션으로, Mac에 모든 Docker 도구를 제공합니다.
 
-## Docker Desktop for Windows
+#### Docker Desktop for Windows
 
 모든 Docker 도구를 Windows 컴퓨터에 제공하는 네이티브 Windows 애플리케이션입니다.
 
-## Docker Desktop for Linux
+#### Docker Desktop for Linux
 
 모든 Docker 도구를 Linux 컴퓨터에 제공하는 네이티브 Linux 애플리케이션입니다.
 
-> ### Note
+> **Note**
 >
 > 도커 엔진을 설치하는 방법에 대한 정보는 [Docker Engine 설치 개요](https://docs.docker.com/get-started/get-docker/)를 참조하세요.

public/docs/get-started/get-docker.md

@@ -4,12 +4,16 @@ async function loadMarkdown(page: string) {
   try {
     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'))
+
+    if (
+      mdText.trim().startsWith('<!DOCTYPE html>') ||
+      mdText.includes('<html>')
+    ) {
       throw new Error(
         `❌ 요청된 경로가 Markdown이 아닌 HTML을 반환합니다: ${page}`
       );
+    }
 
     const htmlContent = marked.parse(mdText);
     document.getElementById('content')!.innerHTML = await htmlContent;