Skip to content

Write flow UI based on Design QA#1099

Merged
DongJun-H merged 9 commits intodevelopfrom
qa/write
Apr 22, 2026
Merged

Write flow UI based on Design QA#1099
DongJun-H merged 9 commits intodevelopfrom
qa/write

Conversation

@DongJun-H
Copy link
Copy Markdown
Member

@DongJun-H DongJun-H commented Apr 19, 2026

작업 내용

  • 글 작성 화면의 이미지 편집 버튼 줄바꿈을 수정 및 태그/폴더의 타이틀과 값과의 간격을 정리
  • 글 작성-폴더선택 화면의 선택 체크 아이콘, 비공개 폴더 자물쇠 아이콘, 기본 폴더 썸네일 이미지/아이콘 리소스 수정
  • 글 작성-카테고리 선택 바텀시트 - 카테고리 간격을 Figma에 맞게 조정

참고

PR 요약: Design QA 기반 Write UI 수정

모듈별 기능 영향도

1. WriteScreen.kt (이미지 편집 및 요약 레이아웃)

  • 기능 변경:
    • 이미지 편집 오버레이 버튼: 너비 112dp → 116dp, 아이콘을 crop에서 ic_plus_green 기반 Icon으로 교체, 텍스트를 TextAutoSize.StepBased로 자동 크기 조정하여 maxLines=1과 ellipsis 적용(줄바꿈 방지).
    • 태그/폴더 요약 레이아웃: WriteSummaryLabelSpacing = 12.dp 상수 도입으로 레이블과 값 사이 간격을 고정(기존 widthIn(min=54.dp)+weight 제거).
  • 사용자 영향:
    • 이미지 편집 버튼 가독성 향상(더 넓고 텍스트 미개행).
    • 태그/폴더 타이틀과 값 사이 간격 일관성 향상.

2. WriteFolderScreen.kt (폴더 선택 스크린)

  • 기능 변경:
    • 썸네일 처리: folder.thumbnailImage가 존재하면 "${BuildConfig.BASE_URL}/images/$it" 형식의 URL 사용, 없으면 R.drawable.img_default_folder_dayo_logo로 폴백(thumbnailModel 계산 및 RoundImageView 호출 변경).
    • 선택 체크 아이콘: 기존 ic_check → 신규 ic_check_corner_round로 교체(크기 18.dp, ContentScale.Fit 등 렌더링 조정).
    • 비공개 폴더 락 아이콘 색상: Dark → #50545B(Gray1_50545B)로 변경.
    • 레이아웃 정렬: 프라이버시 아이콘/타이틀 Row를 verticalAlignment = CenterVertically로 정렬 및 아이콘 사이즈 통일(size=16.dp).
    • 리소스 속성 변경: 일부 벡터 drawable의 autoMirrored 속성/설정 변경(커밋에 auto mirror 비활성화 관련 변경 포함).
  • 사용자 영향:
    • 기본 폴더가 새 디자인 로고(img_default_folder_dayo_logo)로 표시됨.
    • 체크·락 아이콘의 색상/모양/크기가 디자인과 더 일치하여 선택/프라이버시 상태 인식 개선.

3. BottomSheetDialog.kt (카테고리 바텀시트)

  • 기능 변경:
    • 항목 패딩 조정: 전체 패딩 .padding(12.dp) → vertical=8.dp, horizontal=12.dp.
    • 텍스트 간격/정렬 재구성: offset 제거, Spacer(width=12.dp)로 고정 간격, Text에 weight 적용으로 남은 공간 사용.
  • 사용자 영향:
    • 바텀시트 항목의 수직 간격이 Figma에 맞게 더 컴팩트해짐(요소 간 간격 일관화).

해결된 이슈 참조


위험 포인트

  • 중간(주의)
    • 썸네일 URL/플레이스홀더 처리: thumbnailModel에서 빈 문자열/NULL 처리와 이미지 로더(네트워크 실패) 시 placeholder 정상 작동 여부 확인 필요.
    • TextAutoSize 동작: 다양한 언어(장문/긴 토큰)·화면 크기에서 한 줄 유지 및 가독성 보장 여부 검증 필요.
    • 리소스 autoMirrored/벡터 교체: 일부 drawable의 autoMirrored 속성 변경 및 새 벡터 도입(ic_check_corner_round, img_default_folder_dayo_logo, ic_lock 변경)이 미러링/RTL 환경에서 의도치 않은 표시 차이를 만들 수 있으므로 RTL/autoMirrored 동작 확인 필요.
  • 낮음
    • 이번 PR은 UI 변경 중심(리소스 추가/교체, 레이아웃 수정)이고 공개 함수/시그니처 변경 없음. 네트워크/스레딩/상태 관리 로직 변경은 없음.

필수 검증 및 테스트

  1. 기능 테스트

    • WriteFolderScreen
      • 썸네일이 있는 폴더: 네트워크 URL로 이미지 정상 로드.
      • 썸네일이 없는/빈 값 폴더: img_default_folder_dayo_logo 정상 표시.
      • 이미지 로드 실패(오프라인/404): placeholder로 대체 표시 확인.
      • 비공개 폴더: 락 아이콘 색상(#50545B) 및 크기 정상 표시.
      • 선택 상태: 체크 아이콘(ic_check_corner_round) 크기/위치/클리핑 여부 확인(이전 ic_check 클리핑 문제 해결 확인).
    • WriteScreen
      • 이미지 편집 버튼: 다양한 텍스트(짧음/김)와 로케일에서 항상 1줄로 표시되는지 확인(축소·ellipsis 동작).
      • 태그/폴더 요약: 레이블-값 간 12dp 간격이 의도대로 적용되는지 확인.
    • BottomSheetDialog
      • 카테고리 항목 패딩(위/아래 4? 실제 구현 반영 값 확인) 및 텍스트 정렬, 스페이서 동작 확인.
  2. 기기/언어별 검증

    • 여러 화면 크기(작은 폰 ~ 큰 폰/태블릿), DPI, 한국어·영어 등 다국어에서 텍스트 크기·잘림·레이아웃 깨짐 점검.
    • RTL/미러링 환경에서 vector drawable autoMirrored 속성 변경 영향 확인.
  3. 회귀 테스트

    • Write 관련 기존 UI(이미지 업로드, 태그 입력, 폴더 선택 플로우) 전체 동작 확인.
    • 레이아웃 정렬 변경으로 인한 다른 컴포넌트(타이틀 정렬, 터치 영역) 영향 여부 점검.

결론: UI/리소스 중심의 디자인 QA 수정으로 사용자 가시성 및 디자인 일관성이 개선되며, 주요 리스크는 이미지 로드 플로우와 텍스트 자동 크기 조정, 그리고 drawable autoMirrored 변경에 따른 RTL/미러링 동작이다. 위 항목 중심으로 기기·언어·네트워크 환경에서 검증을 권장한다.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 19, 2026

Warning

Rate limit exceeded

@DongJun-H has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 57 minutes and 14 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 57 minutes and 14 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b27148dc-65be-4cdf-ac22-0b94e293f9e9

📥 Commits

Reviewing files that changed from the base of the PR and between 4dcfc9e and 1341244.

📒 Files selected for processing (2)
  • presentation/src/main/res/drawable/ic_check_corner_round.xml
  • presentation/src/main/res/drawable/img_default_folder_dayo_logo.xml

Walkthrough

작성 화면의 폴더 선택, 이미지 편집 버튼, 바텀시트 항목 및 관련 드로어블들을 수정했습니다. 썸네일 폴백 로직·체크마크 아이콘·잠금 아이콘 색상·레이아웃 패딩/정렬과 새로운 벡터 리소스들이 추가/교체되었습니다.

Changes

Cohort / File(s) Summary
폴더 선택 UI
presentation/src/main/java/daily/dayo/presentation/screen/write/WriteFolderScreen.kt
폴더 썸네일 URL이 빈값이면 기본 벡터 로고로 폴백하도록 thumbnailModel 로직 추가. RoundImageViewimageUrl/placeholderResId 전달 방식 변경. 선택 체크 표시를 ic_check에서 새로 추가된 ic_check_corner_round로 교체(Crop→Fit 및 정렬/크기 조정). Privacy.ONLY_ME 잠금 아이콘 색상 변경 및 아이콘·타이틀 정렬/사이즈 단순화.
작성 화면(이미지/요약/레이아웃)
presentation/src/main/java/daily/dayo/presentation/screen/write/WriteScreen.kt
이미지 편집 버튼 컨테이너 너비 소폭 증가(112→116dp), 편집 아이콘을 이미지→Tinted Icon으로 변경 및 레이블에 텍스트 자동 크기(TextAutoSize.StepBased) 적용. 공통 스페이싱 상수 WriteSummaryLabelSpacing = 12.dp 추가 및 태그/폴더 레이아웃 스페이싱 통일.
바텀시트 항목 레이아웃
presentation/src/main/java/daily/dayo/presentation/view/dialog/BottomSheetDialog.kt
좌측 아이콘 버튼 행의 패딩을 .padding(vertical = 8.dp, horizontal = 12.dp)으로 조정, 텍스트 오프셋 제거 및 스페이서/가중치로 너비 제어 리팩토링.
드로어블 리소스 추가/수정
presentation/src/main/res/drawable/ic_check_corner_round.xml, presentation/src/main/res/drawable/ic_lock.xml, presentation/src/main/res/drawable/img_default_folder_dayo_logo.xml
새 체크마크 벡터(ic_check_corner_round) 추가(둥근 스트로크). 기존 ic_lock 벡터 경로/색상 재정의(단일 path, 색상 #50545B). 기본 폴더 썸네일 로고 벡터(img_default_folder_dayo_logo) 신규 추가(44×46dp, #E8EAEE).

Possibly related PRs

  • Write flow UI based on Design QA #1099 — 동일 Compose UI 파일(WriteFolderScreen.kt, WriteScreen.kt, BottomSheetDialog.kt) 및 동일 드로어블 리소스(ic_check_corner_round, ic_lock, img_default_folder_dayo_logo)에 변경이 있어 코드 레벨 연관성이 높음.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PR 제목이 주요 변경사항을 명확하게 요약하고 있습니다. 'Write flow UI based on Design QA'는 디자인 QA 기반의 쓰기 흐름 UI 수정을 정확하게 나타냅니다.
Linked Issues check ✅ Passed PR의 모든 코드 변경사항이 연결된 이슈들의 요구사항을 충족합니다. 이미지 편집 버튼 줄바꿈 방지(#1036), 태그 요약 잘림 조정(#1037), 체크 아이콘 수정(#1038), 자물쇠 아이콘 교체(#1039), 기본 폴더 썸네일 교체(#1040), 바텀시트 패딩 조정(#1041) 모두 구현되었습니다.
Out of Scope Changes check ✅ Passed 모든 코드 변경사항이 연결된 이슈들의 범위 내에 있습니다. 추가된 변경사항들은 모두 Design QA 기반의 UI/UX 수정과 직접 관련이 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch qa/write

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@DongJun-H DongJun-H marked this pull request as ready for review April 19, 2026 13:57
@DongJun-H DongJun-H requested a review from yuni-ju April 19, 2026 13:57
@DongJun-H DongJun-H self-assigned this Apr 19, 2026
@DongJun-H DongJun-H added the QA label Apr 19, 2026
Comment on lines +472 to +478
autoSize = TextAutoSize.StepBased(
minFontSize = 12.sp,
maxFontSize = 14.sp,
stepSize = 0.25.sp,
),
maxLines = 1,
overflow = TextOverflow.Ellipsis
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

autoSize 처리 좋네요!

@github-project-automation github-project-automation Bot moved this from Todo to In Progress in DAYO 2.0 Apr 20, 2026
@DongJun-H
Copy link
Copy Markdown
Member Author

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 21, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
presentation/src/main/java/daily/dayo/presentation/screen/write/WriteFolderScreen.kt (1)

268-291: ⚠️ Potential issue | 🟡 Minor

기본 폴더 로고가 썸네일 영역에서 세로로 잘릴 수 있습니다.

folder.thumbnailImage가 비어 있으면 thumbnailModelR.drawable.img_default_folder_dayo_logo가 되는데, RoundImageView는 항상 ContentScale.Crop을 적용합니다. 이 로고는 44×46 비율이므로 정사각형 컨테이너에서 위아래가 미세하게 잘립니다.

정사각형 로고 에셋을 사용하거나, 로고만 ContentScale.Fit으로 처리하는 조건문을 추가하면 일관된 렌더링을 보장할 수 있습니다.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@presentation/src/main/java/daily/dayo/presentation/screen/write/WriteFolderScreen.kt`
around lines 268 - 291, thumbnailModel currently becomes a drawable resource
(R.drawable.img_default_folder_dayo_logo) when folder.thumbnailImage is blank
but RoundImageView always uses ContentScale.Crop, which crops the default 44×46
logo; update the rendering branch that creates RoundImageView so it detects
whether thumbnailModel is a local drawable (Int) vs a remote URL (String) and
set the image scaling accordingly — use ContentScale.Fit (or equivalent) when
thumbnailModel is the drawable placeholder and keep ContentScale.Crop for URL
images; reference thumbnailModel, RoundImageView, folder.thumbnailImage and
placeholderResId to locate and adjust the component props or overload to accept
a contentScale parameter.
🧹 Nitpick comments (2)
presentation/src/main/java/daily/dayo/presentation/view/dialog/BottomSheetDialog.kt (1)

131-145: Arrangement.SpaceBetweenweight(1f) 조합 정리 제안 (nit).

TextModifier.weight(1f)가 적용되어 남는 공간을 전부 차지하므로, RowhorizontalArrangement = Arrangement.SpaceBetween은 사실상 동작하지 않습니다. 의도(좌 아이콘 – 텍스트 – 우 체크 아이콘 정렬)는 weight만으로 충분히 달성되니, 가독성 측면에서 Arrangement.Start로 바꾸거나 SpaceBetween을 제거하는 편이 깔끔합니다. 기능상 문제는 없습니다.

♻️ 제안 diff
                     Row(
                         modifier = Modifier
                             ...
                             .padding(vertical = 8.dp, horizontal = 12.dp),
-                        horizontalArrangement = Arrangement.SpaceBetween,
                         verticalAlignment = Alignment.CenterVertically
                     ) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@presentation/src/main/java/daily/dayo/presentation/view/dialog/BottomSheetDialog.kt`
around lines 131 - 145, The Row currently uses horizontalArrangement =
Arrangement.SpaceBetween while the Text uses Modifier.weight(1f), making
SpaceBetween redundant; in BottomSheetDialog (the Row that contains Icon,
Spacer, Text, etc.) replace Arrangement.SpaceBetween with Arrangement.Start (or
remove the arrangement) so layout intent (left icon - expanding text - right
check icon) is achieved by the weight alone and improves readability; update the
Row declaration where Arrangement.SpaceBetween appears and keep the existing
Modifier.weight(1f) on the Text and icons unchanged.
presentation/src/main/java/daily/dayo/presentation/screen/write/WriteScreen.kt (1)

693-708: 문자열 리소스 반복 조회 — 루프 밖으로 빼는 것을 권장

joinToString 람다 내부에서 태그마다 ContextCompat.getString(...)을 호출하고 있어 동일 리소스를 N번 로드합니다. 한 번만 읽어 format만 반복하도록 바꾸면 깔끔하고 리컴포지션 비용도 줄어듭니다. 또한 컴포저블에서는 stringResource(...)를 쓰는 편이 관용적입니다.

♻️ 제안 diff
-            val tag = tags.joinToString(separator = ", ") {
-                ContextCompat.getString(context, R.string.write_post_select_tag_contents).format(it)
-            }
+            val tagTemplate = stringResource(R.string.write_post_select_tag_contents)
+            val tag = tags.joinToString(separator = ", ") { tagTemplate.format(it) }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@presentation/src/main/java/daily/dayo/presentation/screen/write/WriteScreen.kt`
around lines 693 - 708, tags.joinToString 호출 내부에서 반복적으로 ContextCompat.getString을
호출해 동일 리소스를 N번 불러오고 있으니, getString 호출을 joinToString 밖으로 빼고 포맷 문자열만 반복 사용하도록
변경하세요; 구체적으로 WriteScreen의 tags 처리부에서 val tagFormat =
stringResource(R.string.write_post_select_tag_contents) (또는
ContextCompat.getString(context, ... ) 한 번만 호출)로 포맷 문자열을 미리 가져오고 joinToString {
tagFormat.format(it) }로 변경하여 리컴포지션 비용을 줄이세요.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In
`@presentation/src/main/java/daily/dayo/presentation/screen/write/WriteFolderScreen.kt`:
- Around line 300-308: Replace the hardcoded accessibility label "Selected"
passed to the Image composable's contentDescription with a string resource
lookup; update the Image call in WriteFolderScreen.kt (the Image that uses
painterResource(id = R.drawable.ic_check_corner_round) and contentDescription =
"Selected") to use contentDescription =
stringResource(R.string.some_selected_label) and add the corresponding entry in
strings.xml (e.g., <string name="some_selected_label">Selected</string>) so
TalkBack and localization are supported.

In `@presentation/src/main/res/drawable/ic_check_corner_round.xml`:
- Around line 1-6: The vector drawable sets android:autoMirrored="true" which
causes the checkmark to flip in RTL; update the vector drawable (root <vector>
element) to remove the android:autoMirrored attribute or set
android:autoMirrored="false" so the checkmark does not mirror in RTL
environments, leaving the rest of the <vector> attributes (android:width,
android:height, android:viewportWidth, android:viewportHeight) unchanged.

In `@presentation/src/main/res/drawable/img_default_folder_dayo_logo.xml`:
- Around line 1-6: The vector drawable currently sets
android:autoMirrored="true", which causes the brand logo to be flipped in RTL
locales; update the <vector> element to disable mirroring by setting
android:autoMirrored="false" (or remove the attribute) so the logo remains
unmirrored in RTL environments; locate the <vector> tag that contains
android:width/android:height/android:viewportWidth/android:viewportHeight and
change android:autoMirrored accordingly.

---

Outside diff comments:
In
`@presentation/src/main/java/daily/dayo/presentation/screen/write/WriteFolderScreen.kt`:
- Around line 268-291: thumbnailModel currently becomes a drawable resource
(R.drawable.img_default_folder_dayo_logo) when folder.thumbnailImage is blank
but RoundImageView always uses ContentScale.Crop, which crops the default 44×46
logo; update the rendering branch that creates RoundImageView so it detects
whether thumbnailModel is a local drawable (Int) vs a remote URL (String) and
set the image scaling accordingly — use ContentScale.Fit (or equivalent) when
thumbnailModel is the drawable placeholder and keep ContentScale.Crop for URL
images; reference thumbnailModel, RoundImageView, folder.thumbnailImage and
placeholderResId to locate and adjust the component props or overload to accept
a contentScale parameter.

---

Nitpick comments:
In
`@presentation/src/main/java/daily/dayo/presentation/screen/write/WriteScreen.kt`:
- Around line 693-708: tags.joinToString 호출 내부에서 반복적으로 ContextCompat.getString을
호출해 동일 리소스를 N번 불러오고 있으니, getString 호출을 joinToString 밖으로 빼고 포맷 문자열만 반복 사용하도록
변경하세요; 구체적으로 WriteScreen의 tags 처리부에서 val tagFormat =
stringResource(R.string.write_post_select_tag_contents) (또는
ContextCompat.getString(context, ... ) 한 번만 호출)로 포맷 문자열을 미리 가져오고 joinToString {
tagFormat.format(it) }로 변경하여 리컴포지션 비용을 줄이세요.

In
`@presentation/src/main/java/daily/dayo/presentation/view/dialog/BottomSheetDialog.kt`:
- Around line 131-145: The Row currently uses horizontalArrangement =
Arrangement.SpaceBetween while the Text uses Modifier.weight(1f), making
SpaceBetween redundant; in BottomSheetDialog (the Row that contains Icon,
Spacer, Text, etc.) replace Arrangement.SpaceBetween with Arrangement.Start (or
remove the arrangement) so layout intent (left icon - expanding text - right
check icon) is achieved by the weight alone and improves readability; update the
Row declaration where Arrangement.SpaceBetween appears and keep the existing
Modifier.weight(1f) on the Text and icons unchanged.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 1c2dce4a-ee55-476a-849c-578f3a2ae1fc

📥 Commits

Reviewing files that changed from the base of the PR and between 70ed45c and 4dcfc9e.

📒 Files selected for processing (6)
  • presentation/src/main/java/daily/dayo/presentation/screen/write/WriteFolderScreen.kt
  • presentation/src/main/java/daily/dayo/presentation/screen/write/WriteScreen.kt
  • presentation/src/main/java/daily/dayo/presentation/view/dialog/BottomSheetDialog.kt
  • presentation/src/main/res/drawable/ic_check_corner_round.xml
  • presentation/src/main/res/drawable/ic_lock.xml
  • presentation/src/main/res/drawable/img_default_folder_dayo_logo.xml

Comment thread presentation/src/main/res/drawable/ic_check_corner_round.xml
Comment thread presentation/src/main/res/drawable/img_default_folder_dayo_logo.xml
@DongJun-H DongJun-H merged commit 636069d into develop Apr 22, 2026
1 check passed
@github-project-automation github-project-automation Bot moved this from In Progress to Done in DAYO 2.0 Apr 22, 2026
@DongJun-H DongJun-H deleted the qa/write branch April 22, 2026 11:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

Status: Done

2 participants