Skip to content

[#39] feat: Implement gallery screen design with custom icons#45

Open
ojh102 wants to merge 7 commits intomainfrom
39
Open

[#39] feat: Implement gallery screen design with custom icons#45
ojh102 wants to merge 7 commits intomainfrom
39

Conversation

@ojh102
Copy link
Member

@ojh102 ojh102 commented Feb 4, 2026

Summary

갤러리 화면 디자인을 스크린샷과 동일하게 구현하고, 커스텀 아이콘 시스템을 추가했습니다.

Changes

🎨 Icon System

  • ChacIcons: 확장 프로퍼티 패턴으로 아이콘 시스템 구축
    • BackIcon.kt: 뒤로가기 화살표 아이콘
    • AlertIcon.kt: 경고/알림 느낌표 아이콘
    • CheckSelectedIcon.kt: 선택된 체크박스 (보라색 배경)
    • CheckUnselectedIcon.kt: 선택 안 된 체크박스 (반투명 회색)
  • 각 아이콘마다 Preview 추가

🖼️ Gallery Screen

  • 디자인 시스템 적용

    • 모든 색상을 ChacColors로 변경
    • 모든 텍스트를 ChacTextStyles로 변경
    • 배경색을 검정색(ChacColors.Background)으로 변경
  • UI 개선

    • 체크박스가 항상 표시되도록 변경 (선택/미선택 상태 구분)
    • 선택 카운터 포맷 개선 (0 / 53 - 공백 포함)
    • "전체 선택" 버튼을 OutlinedButton에서 Box로 변경
    • 나가기 다이얼로그 배경색 검정색으로 변경

🎨 Design System

  • strings.xml: gallery_unselect_all, gallery_slash 리소스 추가

Screenshots

Issue #39의 스크린샷과 동일하게 구현됨

Test plan

  • 갤러리 화면 진입 시 검정색 배경 확인
  • 사진 미선택 시 반투명 회색 체크박스 표시 확인
  • 사진 선택 시 보라색 체크박스 표시 확인
  • 선택 카운터 포맷 확인 (숫자 사이 공백)
  • "전체 선택" / "전체 해제" 버튼 동작 확인
  • 나가기 다이얼로그 검정색 배경 확인
  • 뒤로가기 아이콘 표시 확인

Resolves #39

🤖 Generated with Claude Code

- Add ChacIcons icon system with separate files for each icon
  - BackIcon: Navigation back arrow
  - AlertIcon: Warning/alert icon for dialogs
  - CheckSelectedIcon: Selected checkbox (purple)
  - CheckUnselectedIcon: Unselected checkbox (translucent gray)
- Apply design system throughout gallery screen
  - Use ChacColors for all color values
  - Use ChacTextStyles for all text styling
  - Apply black background (ChacColors.Background)
- Improve gallery UI components
  - Show checkboxes in both selected/unselected states
  - Improve selection counter format with proper spacing
  - Replace OutlinedButton with Box for select all button
  - Update exit dialog with black background
- Add new color tokens (Etc, Black40)
- Add string resources for unselect all and slash separator

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Copy link
Collaborator

@KimSungBeen KimSungBeen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

일단 눈에 보이는 것들만 코멘트 남겼는데
지금 디자인이 계속 바뀌고 있으니까, 형이 판단해서 무시하고 먼저 병합해도 괜찮을 것 같아!

LGTM~ 😊

Comment on lines +346 to +348
style = ChacTextStyles.Body,
color = ChacColors.Text03,
textAlign = TextAlign.Center
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

디자인에서 다이얼로그 본문이랑 버튼 간격 30.dp 라서
Text10.dp bottom 패딩 추가 하거나 Text아래 Spacer 추가되어야 할듯!

ojh102 and others added 6 commits February 5, 2026 23:08
…leryScreen.kt

Co-authored-by: KimSungBeen <s_been@kakao.com>
…leryScreen.kt

Co-authored-by: KimSungBeen <s_been@kakao.com>
…leryScreen.kt

Co-authored-by: KimSungBeen <s_been@kakao.com>
…leryScreen.kt

Co-authored-by: KimSungBeen <s_been@kakao.com>
…leryScreen.kt

Co-authored-by: KimSungBeen <s_been@kakao.com>
…leryScreen.kt

Co-authored-by: KimSungBeen <s_been@kakao.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

갤러리 화면 디자인 구현

2 participants