Skip to content

빈 디렉토리 목록에 폴더 아이콘 추가 및 정렬 개선 #286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
seonghobae wants to merge 1 commit into from
+9 −1
Closed

빈 디렉토리 목록에 폴더 아이콘 추가 및 정렬 개선 #286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,7 @@
## 2024-08-01 - 네이티브 브라우저 UI의 다크 모드 지원 강제
**학습:** CSS 미디어 쿼리(`@media (prefers-color-scheme: dark)`)를 통해 다크 모드를 지원하더라도, 브라우저의 네이티브 UI 요소(스크롤바, 기본 폼 컨트롤, 기본 백그라운드 등)는 테마 변경을 인식하지 못해 어두운 테마 환경에서 밝은 스크롤바가 표시되는 등 시각적 불일치를 초래합니다.
**조치:** 항상 HTML 문서의 `<head>` 영역에 `<meta name="color-scheme" content="light dark">` 메타 태그를 명시적으로 추가하여 브라우저 수준에서 사용자의 시스템 테마(다크 모드 등)를 완전히 상속받아 일관성 있는 네이티브 UI를 렌더링하도록 보장하십시오.

## 2024-07-27 - 빈 상태 일관성을 위한 장식용 아이콘 추가
**학습:** 빈 상태(Empty state)를 나타내는 텍스트만 렌더링될 때, 다른 파일 및 디렉토리 목록과 시각적 구조가 일치하지 않아(예: 아이콘 부재 및 들여쓰기 어긋남) 사용자가 혼란을 겪을 수 있습니다.
**조치:** 빈 디렉토리 상태(`이 디렉토리는 비어 있습니다.`)를 렌더링할 때, 열린 폴더 이모지(`&#128194;`)를 장식용 아이콘으로 추가하고 `aria-hidden="true"`로 감싸 스크린 리더 접근성을 유지하면서 다른 목록 항목들과 시각적 정렬 및 일관성을 유지하십시오.
5 changes: 4 additions & 1 deletion src/main/kotlin/html4tree/main.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,9 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
}
}
.empty-dir {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.5rem;
opacity: 0.7;
font-style: italic;
Expand Down Expand Up @@ -370,7 +373,7 @@ ${cssContent} </style>
}

if(l.isEmpty()){
l.append(""" <li><div class="empty-dir">이 디렉토리는 비어 있습니다.</div></li>""")
l.append(""" <li><div class="empty-dir"><span class="icon" aria-hidden="true">&#128194;</span> <span>이 디렉토리는 비어 있습니다.</span></div></li>""")
Comment on lines 375 to +376
l.append('\n')
}

Expand Down
1 change: 1 addition & 0 deletions src/test/kotlin/html4tree/MainTest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ class MainTest {
val htmlContent = indexFile.readText()
assertTrue(htmlContent.contains("<html lang=\"ko\">"))
assertTrue(htmlContent.contains("이 디렉토리는 비어 있습니다."))
assertTrue(htmlContent.contains("&#128194;"))
assertTrue(htmlContent.contains("role=\"list\""))
}

Expand Down
Loading