From c6517daecee177d49c64c1b4c78ee4a4f6ace21b Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Tue, 7 Jul 2026 20:57:56 +0000
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EA=B0=80=EB=8F=85=EC=84=B1=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

생성되는 HTML 파일의 기본 뷰가 화면 전체를 차지하여 가독성이 떨어지는 문제를 해결하기 위해, `body` 태그에 `system-ui` 폰트, `max-width`, `margin`, `padding` 등을 추가하여 편안한 레이아웃을 제공합니다.
---
 .jules/palette.md                 | 3 +++
 CHANGELOG.md                      | 5 +++++
 src/main/kotlin/html4tree/main.kt | 8 ++++++++
 3 files changed, 16 insertions(+)
 create mode 100644 CHANGELOG.md

diff --git a/.jules/palette.md b/.jules/palette.md
index b8df5bd..b3a2b6c 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -13,3 +13,6 @@
 ## 2024-06-25 - Directory Listing Navigation Landmark
 **Learning:** Generated directory listings act as navigation regions, and screen readers benefit when the listing is announced separately from the page's main content.
 **Action:** Wrap generated directory listing `<ul>` elements in `<nav aria-label="Directory listing">` while keeping the surrounding semantic `<main>` structure.
+## 2024-07-07 - Add basic responsive layout & typography to directory listing
+**Learning:** CLI 도구로 생성된 기본 HTML은 브라우저 뷰포트 전체를 차지하며, 줄글이 길어지거나 화면이 넓어지면 가독성이 크게 떨어지는 문제와 모바일에서 여백 없이 딱 붙어서 출력되는 문제가 발견됨.
+**Action:** 간단한 CLI 도구일지라도 생성하는 HTML 파일에는 `body` 태그에 최소한의 반응형(`max-width: 800px`, `margin: 0 auto`, `padding`) 및 시스템 폰트(`system-ui`)를 설정하여 어떤 디바이스에서든 읽기 편한 경험을 제공해야 함을 기억하기.
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..2471f8e
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,5 @@
+# 변경 사항 (CHANGELOG)
+
+## [Unreleased]
+### 추가됨
+- 생성되는 HTML 문서의 가독성 및 반응형 레이아웃 개선을 위해 `body` 태그에 기본 스타일 (폰트, `max-width`, `margin`, `padding` 등)을 추가했습니다. (🎨 Palette)
diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt
index 1710d99..16bf9e0 100644
--- a/src/main/kotlin/html4tree/main.kt
+++ b/src/main/kotlin/html4tree/main.kt
@@ -157,6 +157,14 @@ fun process_dir(curr_dir: File){
 
     val css = """
               <style>
+              body {
+                font-family: system-ui, -apple-system, sans-serif;
+                max-width: 800px;
+                margin: 0 auto;
+                padding: 1rem;
+                line-height: 1.5;
+                color: #24292e;
+              }
               ul {
                 list-style-type: none;
                 padding-left: 0;

From 558c0e4a7f8fd8c71cdb7c46fe00e516f21abb32 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Wed, 8 Jul 2026 11:06:28 +0000
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EA=B0=80=EB=8F=85=EC=84=B1=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EA=B0=9C=EC=84=A0=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B3=B4=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

생성되는 HTML 파일의 `body` 태그에 `system-ui` 폰트, `max-width`, `margin`, `padding` 등을 추가한 것에 대한 테스트 코드 보완.
---
 patch_test.diff                       | 17 +++++++++++++++++
 src/test/kotlin/html4tree/MainTest.kt |  2 ++
 2 files changed, 19 insertions(+)
 create mode 100644 patch_test.diff

diff --git a/patch_test.diff b/patch_test.diff
new file mode 100644
index 0000000..36d114a
--- /dev/null
+++ b/patch_test.diff
@@ -0,0 +1,17 @@
+<<<<<<< SEARCH
+        assertTrue(htmlContent.contains("subdir/"))
+        assertTrue(htmlContent.contains("&#128193;"))
+        assertFalse(htmlContent.contains("test.ignore"))
+        assertTrue(htmlContent.contains("Content-Security-Policy"))
+        assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
+    }
+=======
+        assertTrue(htmlContent.contains("subdir/"))
+        assertTrue(htmlContent.contains("&#128193;"))
+        assertFalse(htmlContent.contains("test.ignore"))
+        assertTrue(htmlContent.contains("Content-Security-Policy"))
+        assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
+        assertTrue(htmlContent.contains("font-family: system-ui, -apple-system, sans-serif;"))
+        assertTrue(htmlContent.contains("max-width: 800px;"))
+    }
+>>>>>>> REPLACE
diff --git a/src/test/kotlin/html4tree/MainTest.kt b/src/test/kotlin/html4tree/MainTest.kt
index a3f8c76..4b3039b 100644
--- a/src/test/kotlin/html4tree/MainTest.kt
+++ b/src/test/kotlin/html4tree/MainTest.kt
@@ -161,6 +161,8 @@ class MainTest {
         assertFalse(htmlContent.contains("test.ignore"))
         assertTrue(htmlContent.contains("Content-Security-Policy"))
         assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
+        assertTrue(htmlContent.contains("font-family: system-ui, -apple-system, sans-serif;"))
+        assertTrue(htmlContent.contains("max-width: 800px;"))
     }
 
     @Test

From 7214b34e69f28ee4d8a5de1ac24032e974dc8a38 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Thu, 9 Jul 2026 10:16:32 +0000
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EA=B0=80=EB=8F=85=EC=84=B1=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20=EC=8B=9C=20=EC=83=9D=EC=84=B1=EB=90=9C=20=EC=9E=84?=
 =?UTF-8?q?=EC=8B=9C=20=ED=8C=A8=EC=B9=98=20=ED=8C=8C=EC=9D=BC=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

테스트 코드 수정 과정에서 생성된 `patch_test.diff` 임시 파일이 포함된 문제를 해결하기 위해 이를 삭제했습니다.
---
 patch_test.diff | 17 -----------------
 1 file changed, 17 deletions(-)
 delete mode 100644 patch_test.diff

diff --git a/patch_test.diff b/patch_test.diff
deleted file mode 100644
index 36d114a..0000000
--- a/patch_test.diff
+++ /dev/null
@@ -1,17 +0,0 @@
-<<<<<<< SEARCH
-        assertTrue(htmlContent.contains("subdir/"))
-        assertTrue(htmlContent.contains("&#128193;"))
-        assertFalse(htmlContent.contains("test.ignore"))
-        assertTrue(htmlContent.contains("Content-Security-Policy"))
-        assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
-    }
-=======
-        assertTrue(htmlContent.contains("subdir/"))
-        assertTrue(htmlContent.contains("&#128193;"))
-        assertFalse(htmlContent.contains("test.ignore"))
-        assertTrue(htmlContent.contains("Content-Security-Policy"))
-        assertTrue(htmlContent.contains("default-src 'none'; style-src 'unsafe-inline';"))
-        assertTrue(htmlContent.contains("font-family: system-ui, -apple-system, sans-serif;"))
-        assertTrue(htmlContent.contains("max-width: 800px;"))
-    }
->>>>>>> REPLACE