✨ feat(ui): 빈 디렉토리에 열린 폴더 아이콘 표시#244
Conversation
사용자가 내부 파일 존재 여부를 직관적으로 알 수 있도록 빈 디렉토리에 대해 일반 폴더 아이콘 대신 열린 폴더 아이콘을 표시하도록 HTML 생성 로직을 개선했습니다. 또한, 테스트를 업데이트하여 100% 명령어 커버리지를 유지하고 `.jules/palette.md`를 업데이트했습니다.
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
디렉토리 목록을 생성하는 html4tree의 UI에서 빈 디렉토리를 시각적으로 구분하기 위해, 기존 닫힌 폴더 아이콘(📁) 대신 열린 폴더 아이콘(📂) 을 표시하도록 개선한 PR입니다.
Changes:
- 디렉토리 엔트리가 비어 있는지 판별해 빈 디렉토리인 경우 열린 폴더 아이콘(
📂)을 렌더링하도록 변경 - 아이콘 변경을 반영하도록 테스트 기대값을 갱신
.jules/palette.md의 일부 영어 항목을 한국어로 번역하고, 빈 디렉토리 UX 학습 항목을 추가
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/main/kotlin/html4tree/main.kt | 디렉토리 렌더링 시 “빈 디렉토리” 아이콘 분기 로직 추가 |
| src/test/kotlin/html4tree/MainTest.kt | 폴더 아이콘 변경에 맞춰 테스트 assertion 업데이트 |
| .jules/palette.md | UX/접근성 관련 Palette 문서 번역 및 빈 디렉토리 피드백 항목 추가 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| var isEmptyDir = false | ||
| if (isLinkedDirectory) { | ||
| var stream: java.nio.file.DirectoryStream<java.nio.file.Path>? = null | ||
| try { | ||
| stream = Files.newDirectoryStream(it.toPath()) | ||
| isEmptyDir = !stream.iterator().hasNext() | ||
| } catch (e: Exception) { | ||
| } finally { | ||
| stream?.close() | ||
| } | ||
| } |
| assertTrue(htmlContent.contains("file1.txt")) | ||
| assertTrue(htmlContent.contains("subdir/")) | ||
| assertTrue(htmlContent.contains("📁")) | ||
| assertTrue(htmlContent.contains("📂")) |
🎨 Palette: 빈 디렉토리 시각적 구분 기능 추가 (UX 개선)
💡 무엇을 변경했나요?
생성되는 파일 트리에서 디렉토리가 비어있을 경우, 일반적인 닫힌 폴더 아이콘(
📁) 대신 **열린 폴더 아이콘(📂)**을 표시하도록 변경했습니다.🎯 왜 변경했나요?
기존에는 비어있는 디렉토리와 파일이 있는 디렉토리가 시각적으로 구분되지 않아, 사용자가 불필요하게 빈 디렉토리를 클릭하고 탐색하게 되는 불편함이 있었습니다. 이 작은 시각적 피드백(열린 폴더)을 통해 사용자는 디렉토리 내부 구조를 더 직관적으로 파악할 수 있어 전체적인 UX가 향상됩니다.
📸 Before/After
(Playwright 테스트를 통해 변경된 아이콘을 확인했습니다)
빈 폴더(
empty_subdir)에는📂아이콘이, 파일이 있는 폴더(normal_subdir)에는📁아이콘이 정상적으로 표시됩니다.♿ 접근성 (Accessibility) 고려사항
📂)는 기존 설계대로<span aria-hidden="true">내부에 위치하여 스크린 리더 환경에 방해를 주지 않도록 구현되었습니다..jules/palette.md의 기존 영어 항목들을 한국어로 모두 번역하여 프로젝트 언어 제약을 충족했습니다.🧪 테스트
MainTest.kt테스트 케이스를 갱신하여 아이콘 변경이 제대로 반영되었는지 확인했으며, 명령어(Instruction) 커버리지 100%를 유지했습니다.PR created automatically by Jules for task 6824031150646834399 started by @seonghobae