🎨 Palette: 디렉토리 제목 레이아웃 안정성 및 시각적 계층화

.jules/palette.md

@@ -52,3 +52,7 @@
 ## 2024-07-13 - 빈 디렉토리 상태의 접근성(Accessibility) 개선
 **Learning:** 정적 파일 서버의 빈 디렉토리 상태는 스크린 리더 사용자에게 컨텐츠 누락으로 오해받을 수 있으며, 시각적으로도 일반 리스트 아이템과 정렬이 맞지 않는 문제가 있었습니다.
 **Action:** 빈 상태를 나타내는 요소에 `role="status"`를 추가하여 스크린 리더가 명확하게 인지할 수 있도록 하고, 아이콘과 flex 레이아웃을 통해 다른 리스트 아이템과 일관된 시각적 흐름을 제공하도록 합니다.
+
+## 2026-08-05 - 디렉토리 제목이 너무 긴 경우의 레이아웃 깨짐 방지 및 시각적 계층화
+**Learning:** 띄어쓰기 없는 매우 긴 디렉토리 이름은 모바일 환경 등 제한된 폭에서 컨테이너를 벗어나 레이아웃을 무너뜨리거나 가독성을 저하시킬 수 있습니다. 또한 디렉토리 목록과 제목 간의 시각적 구분이 없으면 정보의 구조를 파악하기 어렵습니다.
+**Action:** 긴 제목 텍스트(`<h1>`)에 `word-break: break-all;`을 적용하여 화면을 벗어나지 않도록 하고, 하단 테두리(`border-bottom`) 및 여백을 추가하여 콘텐츠와 명확히 구분되도록 시각적 계층을 부여하십시오. (다크 모드에서의 테두리 색상 처리도 함께 고려)

src/main/kotlin/html4tree/main.kt

@@ -24,6 +24,14 @@ main {
   max-width: 800px;
   margin: 0 auto;
 }
+h1 {
+  font-size: 1.5rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #d0d7de;
+  word-break: break-all;
+}
 ul {
   list-style-type: none;
   padding-left: 0;
@@ -59,11 +67,22 @@ a:hover, a:focus-visible {
     transition: none;
   }
 }
+.empty-dir {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  opacity: 0.7;
+  font-style: italic;
+}
 @media (prefers-color-scheme: dark) {
   body {
     background-color: #0d1117;
     color: #c9d1d9;
   }
+  h1 {
+    border-bottom-color: #21262d;
+  }
   a {
     color: #58a6ff;
   }
@@ -72,14 +91,6 @@ a:hover, a:focus-visible {
     outline-color: #58a6ff;
   }
 }
-.empty-dir {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  opacity: 0.7;
-  font-style: italic;
-}
 """.trimIndent()
 
 private val STYLE_HASH = "sha256-" + Base64.getEncoder().encodeToString(MessageDigest.getInstance("SHA-256").digest(CSS_CONTENT.toByteArray(Charsets.UTF_8)))

src/test/kotlin/html4tree/MainTest.kt

@@ -706,4 +706,19 @@ class MainTest {
         assertFalse(processed, "fileKey mismatch should skip directory processing")
         assertFalse(listed, "fileKey mismatch should skip child listing")
     }
+
+    @Test
+    fun testGeneratedCssContainsNewH1Styles() {
+        val testDir = File(tempDir, "h1_style_test")
+        testDir.mkdir()
+        go(testDir.absolutePath, 0)
+
+        val indexFile = File(testDir, "index.html")
+        assertTrue(indexFile.exists())
+
+        val content = indexFile.readText()
+        assertTrue(content.contains("word-break: break-all;"))
+        assertTrue(content.contains("border-bottom: 1px solid #d0d7de;"))
+        assertTrue(content.contains("border-bottom-color: #21262d;"))
+    }
 }