Conversation
|
Warning Rate limit exceeded@parkuiery has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 14 minutes and 18 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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. 📒 Files selected for processing (1)
개요Walkthrough이 풀 리퀘스트는 디자인 시스템의 여러 구성 요소에 대한 광범위한 업데이트를 포함하고 있습니다. 주요 변경 사항은 타이포그래피 리네이밍, 버튼 컴포넌트 재설계, 텍스트 필드 및 앱 바 스타일 조정, 그리고 새로운 유틸리티 함수 추가를 포함합니다. 전반적으로 디자인 시스템의 일관성과 유연성을 개선하는 데 중점을 두고 있습니다. Changes
Possibly related PRs
Suggested labels
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (10)
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/foundation/DmsTypography.kt (4)
9-12: 기존 폰트 리소스 정리 권장
Pretendard 계열을 쓰는 상황에서 wanted_sans_* 관련 import가 더 이상 필요 없다면 사용되지 않는 부분을 제거하는 편이 좋습니다.
110-116: Body3 12sp 사용 시 가독성 주의
12sp는 작을 수 있으므로 UI 환경에 따라 텍스트 인식이 어려워질 위험이 있습니다.
146-152: Button1 라인 높이 16sp
폰트 크기와 라인 높이가 동일하면, 세로 여백이 다소 부족해 보일 수 있습니다.
155-161: Button2 12sp 크기
버튼 텍스트가 12sp면 터치 영역이 좁아 보여 UX 측면에서 주의해야 합니다.core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt (2)
Line range hint
361-399: 주석 처리된 DmsButton 코드
필요가 없다면 제거 또는 Deprecated 표기를 통해 코드베이스를 깔끔하게 유지할 수 있습니다.
Line range hint
400-445: 주석 처리된 DmsSmallButton
마찬가지로 비활성화된 코드라면 유지 여부를 팀과 협의하고 정리하길 권장합니다.core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/appbar/DmsTopAppBar.kt (1)
66-66: 아이콘 틴트 색상 변경 확인
tint가DmsTheme.colors.surfaceContainerLow에서DmsTheme.colors.onBackground로 변경되었습니다. 다크 모드나 대비를 고려했을 때 가시성이 충분한지 확인하시기 바랍니다.core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/textfield/DmsTextField.kt (3)
59-63: 제목 표시 로직 개선
title프로퍼티를 활용해DmsText를 바로 렌더링하는 방식으로 전환되었습니다. 간결하고 직관적이지만,title이 너무 길거나 여러 줄로 넘어가는 경우 레이아웃 오버플로 문제가 없는지 확인해 주세요.
82-86: 에러 메시지 스타일 변경에러 시
DmsTypography.Label과DmsTheme.colors.outline색상을 사용하여 시각적 구분이 명확해졌습니다. 다른 컴포넌트와의 일관성을 위해 에러 메시지 색상이나 스타일을 동일하게 적용해 보는 것을 권장드립니다.
157-192: 힌트와 아이콘 처리 로직
hintAlpha로 힌트를 제어하고,showVisibleIcon,showClearIcon을 통해 아이콘 표출을 유연하게 조절하는 방식이 깔끔합니다. 단, 다국어 지원 시 힌트 길이가 길어질 수 있으니 레이아웃 테스트도 병행해 보시면 좋겠습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
core/design-system/src/commonMain/composeResources/font/pretendard_bold.otfis excluded by!**/*.otfcore/design-system/src/commonMain/composeResources/font/pretendard_medium.otfis excluded by!**/*.otfcore/design-system/src/commonMain/composeResources/font/pretendard_regular.otfis excluded by!**/*.otfcore/design-system/src/commonMain/composeResources/font/pretendard_semi_bold.otfis excluded by!**/*.otfcore/design-system/src/commonMain/composeResources/font/wanted_sans_medium.ttfis excluded by!**/*.ttfcore/design-system/src/commonMain/composeResources/font/wanted_sans_semi_bold.ttfis excluded by!**/*.ttf
📒 Files selected for processing (8)
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/appbar/DmsTopAppBar.kt(5 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt(6 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsOutlineButton.kt(0 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/foundation/DmsTypography.kt(1 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/text/DmsText.kt(1 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/textfield/DmsTextField.kt(4 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/util/Clickable.kt(1 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/util/KeyboardAsState.kt(1 hunks)
💤 Files with no reviewable changes (1)
- core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsOutlineButton.kt
🔇 Additional comments (41)
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/foundation/DmsTypography.kt (13)
18-34: Pretendard 폰트 리소스와 FontWeight 불일치 가능성
pretendard_regular 파일에 FontWeight.Thin을 매핑하는 부분이 실제 폰트 속성과 일치하는지 확인 바랍니다.
38-44: Header1 스타일 구조 적절
32sp, SemiBold는 최상위 헤더로 시인성이 좋아 보입니다.
47-53: Header2와 Header1 간 크기 차이
Header1(32sp)와 Header2(30sp)가 크게 차이나지 않아 보일 수 있으니 디자인 팀과 협의해 보세요.
56-62: Header3 라인 높이 안정적
24sp 대비 34sp 라인 높이는 충분히 여백을 확보하여 가독성이 좋습니다.
65-71: Title1와 Header3 중복 우려
둘 다 24sp를 사용하되 Weight만 다르므로, 사용처가 명확히 분리되어 있는지 재확인이 필요합니다.
74-80: Title2 스타일 무난
20sp Medium은 중간급 콘텐츠 타이틀로 용도 구분이 명확해 보입니다.
83-89: Title3 라인 높이 확인
18sp 폰트 크기에 28sp 라인 높이 적용은 무난하지만, 다른 타이틀 대비 여백이 부족할 수 있어 실제 UI 상황에서 검토가 필요합니다.
92-98: Body1 일반 본문 스타일
16sp Medium으로 가독성이 좋아 기본 텍스트로 활용하기 충분합니다.
101-107: Body2 최소 글자 크기 정책 점검
14sp 폰트는 모바일에서 자주 쓰이지만, 접근성 요구 사항을 고려해 더 큰 크기가 필요한지 확인해 보세요.
119-125: Caption에 Thin 사용
Caption까지 Thin 폰트 적용 시 작은 사이즈에서 가독성 문제가 없도록 테스트가 필요합니다.
128-134: Label 스타일 구성
16sp Medium 조합은 라벨 표시용으로 무난하게 보입니다.
137-143: Button0 폰트웨이트 Thin 재검토
버튼 텍스트는 일반적으로 좀 더 두꺼운 Weight를 쓰는 경우가 많으므로, 의도와 맞는지 확인해 주세요.
164-169: Button3 Bold 적용
14sp Bold는 버튼 가독성을 위한 적절한 선택으로 보입니다.
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt (18)
5-14: 새로운 import 체크
border, PaddingValues, Button 등의 추가 import가 의도대로 잘 쓰이고 있습니다.
17-19: Compose 상태 관리 import
mutableStateOf, remember 등은 버튼 상태 관리를 위해 적절히 사용되고 있습니다.
23-25: Shape, TextDecoration import
버튼 모양과 텍스트 꾸밈 설정에 필요한 import로 보이며 문제 없어 보입니다.
30-34: 유틸 함수 import
DEFAULT_PRESS_DEPTH, MIN_PRESS_DEPTH, clickable 등 재사용 유틸 라이브러리를 적절히 도입했습니다.
35-39: ButtonState 데이터 클래스
버튼 상태별 색상 테마를 가지는 구조가 확장성 있고 의미가 명확합니다.
41-46: ButtonColor 열거형
Primary, Gray, Error, Refuse 등 색상 분류가 직관적이며 유지 관리에 용이합니다.
48-54: ButtonType 열거형
Contained, Outlined, Text, Underline, Rounded 구분은 버튼 용도별로 분명하게 보입니다.
56-60: ButtonTheme 데이터 모델
텍스트/배경/테두리 색을 별도로 설정 가능해 버튼 시각적 구현에 유연합니다.
62-123: containedColors()
ButtonColor별로 상태를 잘 나누어 관리합니다. 디자인 가이드와 실제 UI 확인을 통해 색상 정의가 올바른지 점검해 보세요.
125-173: outlinedColors()
Outlined 버튼에서 누른 상태(pressed) 시 borderColor가 변경되는 부분이 UX 관점에서 적정한지 확인 바랍니다.
175-214: textColors()
텍스트 버튼에서 상태에 따른 색상 분기는 명확하나, Error나 Gray 등 예외 상황에 대한 UI 적합성은 별도 검토가 필요해 보입니다.
216-255: underlineColors()
언더라인 버튼은 누른 상태 시 색상 변화가 충분히 인지될 수 있도록 실제 화면에서 테스트해 보세요.
257-318: roundedColors()
둥근 모서리 버튼 색상 처리가 잘 되어 있습니다. Refuse 색상 사용이 유저 경험에 혼동을 주지 않는지 다시 점검 부탁드립니다.
324-327: BasicButton 파라미터 구조
shape, onPressed, keyboardInteractionEnabled 등을 분리해 재활용성과 유연성을 모두 얻고 있습니다.
340-346: 키보드 표시 상태로 모양 변환
keyboardAsState를 활용해 키보드가 보이면 모서리를 없애는 로직은 독특합니다. 실제 UX 목적과 잘 맞는지 확인 권장합니다.
349-354: clip + clickable 조합
clip으로 Shape를 적용 후, 자체 clickable 확장은 코드 가독성과 유지 보수에 유리합니다.
446-501: DmsContainedButton 구현
containedColors() 반환값을 사용해 순서대로 배경, 텍스트 색을 적용하고 pressed 상태를 remember로 관리하는 구조가 명확합니다.
586-597: border 확장 함수
ButtonType이 Outlined일 때만 border를 적용하는 방식이 짧고 직관적입니다.
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/util/KeyboardAsState.kt (2)
1-2: 키보드 상태 관리 파일 생성
keyboardAsState.kt를 별도 유틸로 분리해 재활용도를 높인 점이 좋습니다.
10-14: keyboardAsState() 함수 구현
IME 하단 inset을 통해 키보드가 열렸는지 간단히 판별 가능하며, rememberUpdatedState 사용으로 최신 상태가 잘 반영됩니다. iOS/Android 등 타 플랫폼에서도 문제없이 작동하는지 최종 확인 부탁드립니다.
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/text/DmsText.kt (1)
16-16: 기본 텍스트 색상 onBackground로 변경
기존 surfaceContainerLow에서 onBackground로 바뀌어 전반적으로 가독성 향상에 도움이 될 것으로 보입니다.
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/util/Clickable.kt (2)
18-22: 클릭 상수 설정
DEFAULT_PRESS_DEPTH, MIN_PRESS_DEPTH, DEFAULT_DISABLED_MILLIS 값들로 클릭 반응 속도와 애니메이션 깊이를 조절하는 구조가 명확합니다.
23-73: clickable 확장 함수
pointerInput, animateFloatAsState 등을 이용해 간결하면서도 애니메이션 효과가 자연스럽습니다. 다중 플랫폼(KMM)에서 timeNow.toNanosecondOfDay()가 동일하게 동작하는지 한번 더 확인하면 좋겠습니다.
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/appbar/DmsTopAppBar.kt (2)
39-42: 새로운 패딩 값 확인 필요
이전에는 동일한 간격(16.dp)으로 패딩을 주었으나, 이제 가로 24.dp / 세로 12.dp로 변경되었습니다. 디자인 가이드라인이나 다른 컴포넌트들의 패딩과 일관성을 맞추는지 검토해 보시는 것을 권장드립니다.
81-82: 텍스트 스타일 및 색상 변경
제목의 스타일이 SubtitleSemiBold에서 Body1로 바뀌고, 색상으로 onBackground가 추가되었습니다. 전반적인 텍스트 계층 구조와 통일성을 위해 다른 화면의 제목 스타일도 동일하게 적용되는지 점검해 보세요.
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/textfield/DmsTextField.kt (3)
42-42: 인자명 label에서 title로 변경
컴포저블에서 label 대신 title을 사용하는 것은 좀 더 직관적인 네이밍으로 보입니다. 다만, 기존 호출부에서도 해당 인자명을 모두 반영했는지 확인해 주세요.
55-55: 에러 메시지 파라미터 변경
errorDescription에서 errorMessage로 이름이 바뀌어 가독성이 향상되었습니다. 다른 곳에서 동일한 파라미터를 호출하는 부분들이 누락되지 않았는지 살펴보시기 바랍니다.
136-142: 최대 글자 수 제한 처리 로직
value.take(maxLength)를 통해 사용자가 입력할 문자열을 제한하는 로직은 효과적입니다. 다만, 필요한 경우 입력 중간 삽입 등 다양한 시나리오에서도 의도한 대로 동작하는지 테스트를 통해 확인해 보세요.
...esign-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/appbar/DmsTopAppBar.kt (1)
DmsLargeTopAppBar컴포넌트가 회원가입 기능의 여러 화면에서 사용되고 있습니다회원가입 기능의 다음 화면들에서
DmsLargeTopAppBar컴포넌트를 사용하고 있어 수정이 필요합니다:
feature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/ui/SetPasswordScreen.ktfeature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/ui/SetIdScreen.ktfeature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/ui/EnterSchoolVerificationCodeScreen.ktfeature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/ui/EnterEmailVerificationCodeScreen.ktfeature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/ui/EnterEmailScreen.ktfeature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/ui/EnterSchoolVerificationQuestionScreen.ktfeature/signup/src/commonMain/kotlin/team/aliens/dms/kmp/feature/signup/ui/TermsScreen.kt🔗 Analysis chain
Line range hint
1-82: DmsLargeTopAppBar 제거의 영향을 확인해주세요.
DmsLargeTopAppBar가 제거되었습니다. 이 컴포넌트를 사용하는 화면들이 있는지 확인이 필요합니다.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # DmsLargeTopAppBar 사용 여부 확인 rg "DmsLargeTopAppBar"Length of output: 2121
♻️ Duplicate comments (1)
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt (1)
467-475:⚠️ Potential issuecontentColor 상태 처리 오류
enabled 상태일 때 pressed 색상을 사용하고 있습니다.
- buttonColors.pressed.textColor + buttonColors.enabled.textColor
🧹 Nitpick comments (2)
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt (1)
Line range hint
359-396: 미사용 코드 제거 필요더 이상 사용하지 않는 주석 처리된 코드는 제거하는 것이 좋습니다. 나중에 필요한 경우 Git 히스토리에서 복원할 수 있습니다.
Also applies to: 398-442
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/foundation/DmsTypography.kt (1)
36-167: 타이포그래피 시스템이 체계적으로 개선되었습니다.새로운 타이포그래피 계층 구조가 더 명확하고 일관성 있게 구성되었습니다. 다만 몇 가지 개선사항이 있습니다:
Button 스타일의 라인 하이트가 일관적이지 않습니다:
- Button0: 28.sp
- Button1: 16.sp
- Button2: 16.sp
- Button3: 라인 하이트 미지정
Caption과 Label의 폰트 크기가 동일한데 (16.sp) 구분이 필요해 보입니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/appbar/DmsTopAppBar.kt(3 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt(6 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/foundation/DmsTypography.kt(1 hunks)core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/textfield/DmsTextField.kt(4 hunks)
🔇 Additional comments (7)
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt (2)
338-344: 키보드 상호작용 처리가 잘 구현되었습니다!
키보드 표시 상태에 따른 shape과 pressDepth 조정이 적절하게 구현되었습니다.
541-549:
contentColor 상태 처리 오류
enabled 상태일 때 pressed 색상을 사용하고 있습니다.
- buttonColors.pressed.textColor
+ buttonColors.enabled.textColorLikely invalid or redundant comment.
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/appbar/DmsTopAppBar.kt (2)
35-38: 패딩 값이 개선되었습니다.
수평 및 수직 패딩을 분리하여 시각적 계층 구조가 개선되었습니다.
62-62: 색상 및 타이포그래피 스타일이 일관되게 적용되었습니다.
onBackground 색상과 Body1 스타일을 사용하여 디자인 시스템의 일관성이 향상되었습니다.
Also applies to: 77-78
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/foundation/DmsTypography.kt (1)
16-32: Pretendard 폰트 패밀리가 적절하게 구성되었습니다.
폰트 웨이트가 체계적으로 구성되어 있으며, 필요한 모든 스타일이 포함되어 있습니다.
core/design-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/textfield/DmsTextField.kt (2)
40-40: 매개변수 이름이 더 명확해졌습니다.
label → title, errorDescription → errorMessage로의 변경이 의미를 더 잘 전달합니다.
Also applies to: 53-53
Line range hint 57-86: 텍스트필드 구조가 개선되었습니다.
타이틀과 에러 메시지의 스타일링이 디자인 시스템과 일관되게 적용되었습니다.
| enum class ButtonColor { | ||
| Primary, | ||
| Gray, | ||
| Error, | ||
| Refuse, | ||
| } |
There was a problem hiding this comment.
ButtonColor.Refuse 처리 일관성 개선 필요
ButtonColor.Refuse가 outlinedColors(), textColors(), underlineColors()에서 처리되지 않고 있어 런타임 예외가 발생할 수 있습니다.
다음과 같이 모든 색상 함수에서 Refuse 케이스를 일관되게 처리해주세요:
outlinedColors()textColors()underlineColors()
Also applies to: 170-171, 211-212, 252-253
...esign-system/src/commonMain/kotlin/team/aliens/dms/kmp/core/designsystem/button/DmsButton.kt
Outdated
Show resolved
Hide resolved
| } | ||
| }, | ||
| modifier = Modifier.padding(16.dp), | ||
| textStyle = DmsTypography.Body1, | ||
| singleLine = singleLine, | ||
| enabled = enabled, | ||
| readOnly = readOnly, | ||
| visualTransformation = visualTransformation, | ||
| keyboardOptions = KeyboardOptions( | ||
| keyboardType = keyboardType, | ||
| imeAction = imeAction, | ||
| ), | ||
| keyboardActions = keyboardActions, | ||
| interactionSource = interactionSource, | ||
| cursorBrush = SolidColor(DmsTheme.colors.onBackground), | ||
| ) { innerTextField -> | ||
| Row( | ||
| modifier = Modifier.fillMaxWidth(), | ||
| verticalAlignment = Alignment.CenterVertically, | ||
| ) { | ||
| Box( | ||
| modifier = Modifier.weight(1f), | ||
| contentAlignment = Alignment.CenterStart, | ||
| ) { | ||
| innerTextField() | ||
| Row(verticalAlignment = Alignment.CenterVertically) { | ||
| DmsText( | ||
| modifier = Modifier.alpha(hintAlpha), | ||
| text = hint, | ||
| style = DmsTypography.Body1, | ||
| color = DmsTheme.colors.inverseOnSurface, | ||
| ) | ||
| } | ||
| }, | ||
| modifier = Modifier.padding(16.dp), | ||
| textStyle = DmsTypography.Body1SemiBold, | ||
| singleLine = singleLine, | ||
| enabled = enabled, | ||
| readOnly = readOnly, | ||
| visualTransformation = visualTransformation, | ||
| keyboardOptions = KeyboardOptions( | ||
| keyboardType = keyboardType, | ||
| imeAction = imeAction, | ||
| ), | ||
| keyboardActions = keyboardActions, | ||
| interactionSource = interactionSource, | ||
| cursorBrush = SolidColor(DmsTheme.colors.surfaceContainerLow), | ||
| ) { innerTextField -> | ||
| } | ||
| Row( | ||
| modifier = Modifier.fillMaxWidth(), | ||
| modifier = Modifier.height(24.dp), | ||
| verticalAlignment = Alignment.CenterVertically, | ||
| horizontalArrangement = Arrangement.spacedBy(12.dp), | ||
| ) { | ||
| Box( | ||
| modifier = Modifier.weight(1f), | ||
| contentAlignment = Alignment.CenterStart, | ||
| ) { | ||
| innerTextField() | ||
| Row(verticalAlignment = Alignment.CenterVertically) { | ||
| DmsText( | ||
| modifier = Modifier.alpha(hintAlpha), | ||
| text = hint, | ||
| style = DmsTypography.Body1SemiBold, | ||
| color = DmsTheme.colors.surface, | ||
| ) | ||
| } | ||
| if (showVisibleIcon) { | ||
| DmsIconButton( | ||
| resource = icon, | ||
| tint = DmsTheme.colors.inverseOnSurface, | ||
| onClick = { visible = !visible }, | ||
| ) | ||
| } | ||
| Row( | ||
| modifier = Modifier.height(24.dp), | ||
| verticalAlignment = Alignment.CenterVertically, | ||
| horizontalArrangement = Arrangement.spacedBy(12.dp), | ||
| ) { | ||
| if (showVisibleIcon) { | ||
| DmsIconButton( | ||
| resource = icon, | ||
| tint = DmsTheme.colors.surfaceContainerLow, | ||
| onClick = { visible = !visible }, | ||
| ) | ||
| } | ||
| if (showClearIcon && value.isNotEmpty()) { | ||
| DmsIconButton( | ||
| resource = DmsIcon.Cancel, | ||
| tint = DmsTheme.colors.surface, | ||
| onClick = { onValueChange("") }, | ||
| ) | ||
| } | ||
| if (showClearIcon && value.isNotEmpty()) { | ||
| DmsIconButton( | ||
| resource = DmsIcon.Cancel, | ||
| tint = DmsTheme.colors.inverseOnSurface, | ||
| onClick = { onValueChange("") }, | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
텍스트필드 내부 구조가 최적화되었습니다만, 접근성 개선이 필요합니다.
아이콘 버튼에 contentDescription이 누락되어 있어 스크린 리더 사용자의 접근성이 제한될 수 있습니다.
다음과 같이 수정을 제안합니다:
DmsIconButton(
resource = icon,
tint = DmsTheme.colors.inverseOnSurface,
+ contentDescription = if (visible) "비밀번호 숨기기" else "비밀번호 표시",
onClick = { visible = !visible },
)
DmsIconButton(
resource = DmsIcon.Cancel,
tint = DmsTheme.colors.inverseOnSurface,
+ contentDescription = "입력 내용 지우기",
onClick = { onValueChange("") },
)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| BasicTextField( | |
| value = value.take(maxLength), | |
| onValueChange = { newValue -> | |
| if (newValue.length <= maxLength) { | |
| onValueChange(newValue) | |
| } | |
| }, | |
| modifier = Modifier.padding(16.dp), | |
| textStyle = DmsTypography.Body1, | |
| singleLine = singleLine, | |
| enabled = enabled, | |
| readOnly = readOnly, | |
| visualTransformation = visualTransformation, | |
| keyboardOptions = KeyboardOptions( | |
| keyboardType = keyboardType, | |
| imeAction = imeAction, | |
| ), | |
| keyboardActions = keyboardActions, | |
| interactionSource = interactionSource, | |
| cursorBrush = SolidColor(DmsTheme.colors.onBackground), | |
| ) { innerTextField -> | |
| Row( | |
| modifier = Modifier.fillMaxWidth(), | |
| verticalAlignment = Alignment.CenterVertically, | |
| ) { | |
| Box( | |
| modifier = Modifier.weight(1f), | |
| contentAlignment = Alignment.CenterStart, | |
| ) { | |
| innerTextField() | |
| Row(verticalAlignment = Alignment.CenterVertically) { | |
| DmsText( | |
| modifier = Modifier.alpha(hintAlpha), | |
| text = hint, | |
| style = DmsTypography.Body1, | |
| color = DmsTheme.colors.inverseOnSurface, | |
| ) | |
| } | |
| }, | |
| modifier = Modifier.padding(16.dp), | |
| textStyle = DmsTypography.Body1SemiBold, | |
| singleLine = singleLine, | |
| enabled = enabled, | |
| readOnly = readOnly, | |
| visualTransformation = visualTransformation, | |
| keyboardOptions = KeyboardOptions( | |
| keyboardType = keyboardType, | |
| imeAction = imeAction, | |
| ), | |
| keyboardActions = keyboardActions, | |
| interactionSource = interactionSource, | |
| cursorBrush = SolidColor(DmsTheme.colors.surfaceContainerLow), | |
| ) { innerTextField -> | |
| } | |
| Row( | |
| modifier = Modifier.fillMaxWidth(), | |
| modifier = Modifier.height(24.dp), | |
| verticalAlignment = Alignment.CenterVertically, | |
| horizontalArrangement = Arrangement.spacedBy(12.dp), | |
| ) { | |
| Box( | |
| modifier = Modifier.weight(1f), | |
| contentAlignment = Alignment.CenterStart, | |
| ) { | |
| innerTextField() | |
| Row(verticalAlignment = Alignment.CenterVertically) { | |
| DmsText( | |
| modifier = Modifier.alpha(hintAlpha), | |
| text = hint, | |
| style = DmsTypography.Body1SemiBold, | |
| color = DmsTheme.colors.surface, | |
| ) | |
| } | |
| if (showVisibleIcon) { | |
| DmsIconButton( | |
| resource = icon, | |
| tint = DmsTheme.colors.inverseOnSurface, | |
| onClick = { visible = !visible }, | |
| ) | |
| } | |
| Row( | |
| modifier = Modifier.height(24.dp), | |
| verticalAlignment = Alignment.CenterVertically, | |
| horizontalArrangement = Arrangement.spacedBy(12.dp), | |
| ) { | |
| if (showVisibleIcon) { | |
| DmsIconButton( | |
| resource = icon, | |
| tint = DmsTheme.colors.surfaceContainerLow, | |
| onClick = { visible = !visible }, | |
| ) | |
| } | |
| if (showClearIcon && value.isNotEmpty()) { | |
| DmsIconButton( | |
| resource = DmsIcon.Cancel, | |
| tint = DmsTheme.colors.surface, | |
| onClick = { onValueChange("") }, | |
| ) | |
| } | |
| if (showClearIcon && value.isNotEmpty()) { | |
| DmsIconButton( | |
| resource = DmsIcon.Cancel, | |
| tint = DmsTheme.colors.inverseOnSurface, | |
| onClick = { onValueChange("") }, | |
| ) | |
| BasicTextField( | |
| value = value.take(maxLength), | |
| onValueChange = { newValue -> | |
| if (newValue.length <= maxLength) { | |
| onValueChange(newValue) | |
| } | |
| }, | |
| modifier = Modifier.padding(16.dp), | |
| textStyle = DmsTypography.Body1, | |
| singleLine = singleLine, | |
| enabled = enabled, | |
| readOnly = readOnly, | |
| visualTransformation = visualTransformation, | |
| keyboardOptions = KeyboardOptions( | |
| keyboardType = keyboardType, | |
| imeAction = imeAction, | |
| ), | |
| keyboardActions = keyboardActions, | |
| interactionSource = interactionSource, | |
| cursorBrush = SolidColor(DmsTheme.colors.onBackground), | |
| ) { innerTextField -> | |
| Row( | |
| modifier = Modifier.fillMaxWidth(), | |
| verticalAlignment = Alignment.CenterVertically, | |
| ) { | |
| Box( | |
| modifier = Modifier.weight(1f), | |
| contentAlignment = Alignment.CenterStart, | |
| ) { | |
| innerTextField() | |
| Row(verticalAlignment = Alignment.CenterVertically) { | |
| DmsText( | |
| modifier = Modifier.alpha(hintAlpha), | |
| text = hint, | |
| style = DmsTypography.Body1, | |
| color = DmsTheme.colors.inverseOnSurface, | |
| ) | |
| } | |
| } | |
| Row( | |
| modifier = Modifier.height(24.dp), | |
| verticalAlignment = Alignment.CenterVertically, | |
| horizontalArrangement = Arrangement.spacedBy(12.dp), | |
| ) { | |
| if (showVisibleIcon) { | |
| DmsIconButton( | |
| resource = icon, | |
| tint = DmsTheme.colors.inverseOnSurface, | |
| contentDescription = if (visible) "비밀번호 숨기기" else "비밀번호 표시", | |
| onClick = { visible = !visible }, | |
| ) | |
| } | |
| if (showClearIcon && value.isNotEmpty()) { | |
| DmsIconButton( | |
| resource = DmsIcon.Cancel, | |
| tint = DmsTheme.colors.inverseOnSurface, | |
| contentDescription = "입력 내용 지우기", | |
| onClick = { onValueChange("") }, | |
| ) |
개요
작업사항
추가 로 할 말
Summary by CodeRabbit
릴리즈 노트
새로운 기능
디자인 시스템 업데이트
사용성 개선