Feature/#11 designsystem inputtext #12

jinukeu · 2025-01-12T08:36:11Z

💡 Issue

Resolved: [Feature] Design System InputText #11

🌱 Key changes

InputText 구현

✅ To Reviewers

Android Material Component의 내부 구현을 참고했습니다. (내부 구현 코드를 살펴보느라 좀 늦었습니다 ... ㅜㅜ)
InputText MedIum은 아직 디자인이 나오지 않아 구현하지 않았습니다.
Password의 경우 어느정도는 stateful하게 구현했습니다.

📸 스크린샷

스크린샷

Summary by CodeRabbit

새로운 기능
- 사용자 지정 가능한 입력 텍스트 필드 컴포넌트 추가
- 비밀번호 입력을 위한 토글 기능 포함
- 입력 필드의 상태에 따른 시각적 피드백 제공
디자인 시스템 개선
- 입력 텍스트 컴포넌트의 기본 스타일 및 색상 구성 추가
- 아이콘 리소스 확장 (눈 아이콘 및 눈금 아이콘)
테마 업데이트
- 컬러 스키마 참조 방식 간소화
- 테마 관련 변수명 일관성 개선

- 추후 다크모드 지원 시, lightColorScheme의 네이밍이 문제가 있음

coderabbitai · 2025-01-12T08:36:17Z

Walkthrough

이 풀 리퀘스트는 디자인 시스템의 입력 텍스트 컴포넌트를 개선하고 확장합니다. 새로운 Kotlin 파일들을 추가하여 YappInputTextBasic과 YappInputTextLarge 컴포저블 함수를 구현했으며, 입력 필드의 다양한 상태와 스타일을 지원합니다. 색상 체계와 테마 관련 파일도 업데이트되었고, 눈 아이콘 벡터 드로어블이 추가되었습니다.

Changes

파일	변경 요약
`InputText.kt`	입력 텍스트 컴포넌트 추가 (기본 및 대형 버전)
`InputTextDefaults.kt`	입력 텍스트 기본 속성 및 스타일 정의
`Color.kt`	`LocalLightColorScheme` → `LocalColorScheme` 리네임
`Theme.kt`	색상 체계 참조 업데이트
`icon_eye.xml`, `icon_eye_slash.xml`	눈 아이콘 벡터 드로어블 추가
`ExampleUnitTest.kt`	테스트 파일 삭제

Assessment against linked issues

목표	해결 여부	설명
Design System InputText 구현	✅

Possibly related PRs

feat/#6: Typo, Color, Theme 구현 #8: 색상 체계 및 타이포그래피 시스템 도입

Suggested reviewers

ashwon12

Poem

🐰 토끼의 디자인 시스템 노래 🎨
입력 필드에 생명을 불어넣어
스타일과 기능이 춤을 추네
눈 아이콘은 윙크하고
컴포넌트는 반짝이며 빛나네
코드의 마법, 여기 있어요! 🌟

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

‼️ IMPORTANT
Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged.

Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

…있게 추가

ashwon12

진욱님 리뷰가 늦어져서 죄송합니다 🥲 !!
고생하셨습니다!

ashwon12 · 2025-01-15T03:09:27Z

...signsystem/src/main/java/com/yapp/core/designsystem/component/inputtext/InputTextDefaults.kt

+    val errorOutlineColor: Color,
+    val successOutlineColor: Color,
+) {
+    @Stable


@immutable @stable
두 개가 의미가 비슷한 것 같은데 나눠서 쓰신 이유가 있을까요 ?!

InputTextColors은 한번 값이 생성되면 불변하므로 Immutable을, inputTextColor은 상태에 따라 값이 변경되므로 Stable을 사용했습니다!

https://velog.io/@skydoves/compose-stability

ashwon12 · 2025-01-15T03:20:28Z

core/designsystem/src/main/java/com/yapp/core/designsystem/component/inputtext/InputText.kt

+    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
+    keyboardActions: KeyboardActions = KeyboardActions.Default,


YappInputTextBasic 안에서도 해당 값들을 초기화해주고 있으니
여기서는 nullable 하게 값을 입력받는게 유지보수측면에서 좋을 것 같다는 의견 드립니닷

엇 혹시 nullable로 만들면 어떤 이점이 있나요!? 저는 큰 차이가 있을 것 같지 않아서요

YappInputTextLarge 랑 YappInputTextBasic 에서 모두 기본값 설정을 해주고 있어서
기본값 설정의 책임을 내부로 위임하는게 어떨까 하는 의견이었습니다 !
외부에 있는 YappInputTextLarge 에서는 nullable 한 값을 두어 유연하게 사용할 수 있을 것 같아서요 !

엇 ... 죄송해요 이해가 잘 안가서 그런데 코드로 예시 하나 보여주실 수 있나요?

음 ...

keyboardAction: Action = Action.Default를

keyboardAction: Action? = null

이렇게 바꾸자는 말씀 맞으시죠??

기록) 별 차이 없는 것으로 서로 얘기함.

jinukeu · 2025-01-15T13:56:34Z

@coderabbitai review

coderabbitai · 2025-01-15T13:56:39Z

✅ 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.

coderabbitai

Actionable comments posted: 6

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5fd6341 and efeab1e.

📒 Files selected for processing (8)

core/designsystem/src/main/java/com/yapp/core/designsystem/component/inputtext/InputText.kt (1 hunks)
core/designsystem/src/main/java/com/yapp/core/designsystem/component/inputtext/InputTextDefaults.kt (1 hunks)
core/designsystem/src/main/java/com/yapp/core/designsystem/theme/Color.kt (1 hunks)
core/designsystem/src/main/java/com/yapp/core/designsystem/theme/Preview.kt (2 hunks)
core/designsystem/src/main/java/com/yapp/core/designsystem/theme/Theme.kt (2 hunks)
core/designsystem/src/main/res/drawable/icon_eye.xml (1 hunks)
core/designsystem/src/main/res/drawable/icon_eye_slash.xml (1 hunks)
core/designsystem/src/test/java/com/yapp/designsystem/ExampleUnitTest.kt (0 hunks)

💤 Files with no reviewable changes (1)

core/designsystem/src/test/java/com/yapp/designsystem/ExampleUnitTest.kt

🔇 Additional comments (7)

core/designsystem/src/main/java/com/yapp/core/designsystem/theme/Theme.kt (1)

15-15: 컬러 스키마 네이밍이 개선되었습니다!

lightColorScheme에서 colorScheme로의 변경은 더 간단하고 명확한 네이밍을 제공합니다.

Also applies to: 19-19, 32-35

core/designsystem/src/main/java/com/yapp/core/designsystem/component/inputtext/InputTextDefaults.kt (2)

96-107: 상태에 따른 색상 처리가 잘 구현되었습니다!

@Stable 어노테이션과 함께 구현된 색상 로직이 각 상태(에러, 성공, 활성화 등)를 명확하게 처리합니다.

62-67: 🧹 Nitpick (assertive)

Medium 변형에 대한 구현이 필요합니다.

TODO 주석에 표시된 대로 Medium 변형의 스타일이 아직 정의되지 않았습니다. 현재는 Unspecified 값을 사용하고 있습니다.

Medium 변형의 디자인 명세가 준비되면 구현을 도와드릴 수 있습니다.

Also applies to: 73-74

core/designsystem/src/main/java/com/yapp/core/designsystem/theme/Preview.kt (1)

31-31: 컬러 스키마 참조가 일관되게 업데이트되었습니다!

Theme.kt의 변경사항과 일치하도록 모든 lightColorScheme 참조가 colorScheme로 업데이트되었습니다.

Also applies to: 39-39, 58-58

core/designsystem/src/main/java/com/yapp/core/designsystem/component/inputtext/InputText.kt (1)

280-308: 프리뷰가 잘 구현되었습니다!

기본 상태와 에러 상태를 모두 보여주는 프리뷰가 잘 구현되었습니다.
core/designsystem/src/main/java/com/yapp/core/designsystem/theme/Color.kt (2)

Line range hint 90-125: Color.Unspecified 사용에 대한 검토가 필요합니다.

모든 색상값이 Color.Unspecified로 초기화되어 있습니다. 이는 다음과 같은 잠재적 문제를 야기할 수 있습니다:

런타임에 색상이 지정되지 않은 경우 시각적 오류 발생 가능

컴파일 타임에 색상 누락 감지 불가

기본 색상값을 지정하거나 초기화 시점에 대한 명확한 문서화를 추가하는 것을 권장드립니다.

90-90: LocalColorScheme로의 이름 변경에 대한 검토가 필요합니다.

LocalLightColorScheme에서 LocalColorScheme로의 이름 변경이 확인되었습니다. 이는 다음과 같은 고려사항이 필요해 보입니다:

다크 테마 지원 계획이 있다면, 현재의 이름 변경이 향후 테마 확장에 제한이 될 수 있습니다

다크 테마를 지원하지 않을 계획이라면 현재의 변경이 적절합니다

다크 테마 지원 계획을 확인하기 위해 다음 스크립트를 실행해보세요:

✅ Verification successful

LocalColorScheme로의 이름 변경이 적절합니다.

코드베이스 분석 결과, 현재 앱은 라이트 테마만을 명시적으로 사용하도록 설계되어 있으며, 다크 테마 구현이 계획되어 있지 않음이 확인되었습니다. 따라서 LocalLightColorScheme에서 LocalColorScheme로의 이름 변경은 다음과 같은 이유로 적절합니다:

Material3 네이밍 컨벤션과 일치

단일 테마 구현에 더 적합한 명명
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:
#!/bin/bash
# Description: Check for any dark theme related implementations or plans

# Search for dark theme related code
echo "Searching for dark theme related implementations..."
rg -i "darktheme|darkmode|night|dark.*color.*scheme" --type kotlin

# Check design documentation
echo "Checking design documentation..."
fd -e md -e txt | xargs rg -i "dark.*theme|dark.*mode"
Length of output: 313

Script:
#!/bin/bash
# Search for theme related configurations and implementations
echo "Checking theme configurations..."
rg -i "theme|isSystemInDark|uiMode" --type kotlin -A 3

echo "Checking color scheme implementations..."
ast-grep --pattern 'class $_ : ColorScheme { $$$ }'

echo "Checking design system configurations..."
fd "Theme.kt|Colors.kt|ColorScheme.kt" --type f --exec cat {}
Length of output: 15967

core/designsystem/src/main/java/com/yapp/core/designsystem/component/inputtext/InputText.kt

core/designsystem/src/main/res/drawable/icon_eye.xml

core/designsystem/src/main/res/drawable/icon_eye_slash.xml

jinukeu added 4 commits January 11, 2025 17:30

rename/#11: ColorScheme에 Light 네이밍 제거

fbb3ef3

- 추후 다크모드 지원 시, lightColorScheme의 네이밍이 문제가 있음

remove/#11: 사용하지 않는 테스트 코드 제거

f97e69c

feat/#11: InputTextDefaults 및 관련 데이터 클래스 정의

2ab70e5

feat/#11: YappInputTextBasic, Large 구현

681dbfd

jinukeu added the Feature 기능 추가, 개발 label Jan 12, 2025

jinukeu requested a review from ashwon12 January 12, 2025 08:36

jinukeu self-assigned this Jan 12, 2025

refactor/#11: YappInputText Token(shape, textStyles ...)을 파라미터로 받을 수 …

efeab1e

…있게 추가

ashwon12 approved these changes Jan 15, 2025

View reviewed changes

jinukeu added the CodeRabbit CodeRabbit 코드 리뷰 요청 label Jan 15, 2025

coderabbitai bot reviewed Jan 15, 2025

View reviewed changes

jinukeu merged commit 674328c into develop Jan 15, 2025
1 check passed

jinukeu deleted the feature/#11-designsystem-inputtext branch January 15, 2025 14:19

This was referenced Jan 15, 2025

Feature/#13 designsystem solid button #14

Merged

Feature/#17 designsystem nestedcheckbox #19

Merged

This was referenced Jan 25, 2025

Featrue/#36 signup step 1 2 #39

Merged

Featrue/#40 signup step 3 4 #41

Merged

ashwon12 added a commit that referenced this pull request Apr 7, 2025

fix: #12 대기중인 계정 회원가입시 대기중 화면으로 이동

88e7288

ashwon12 added a commit that referenced this pull request Apr 8, 2025

fix: #12 대기중인 계정 회원가입시 대기중 화면으로 이동

b6f18f1

ashwon12 added a commit that referenced this pull request Apr 8, 2025

fix: #12 대기중인 계정 회원가입시 대기중 화면으로 이동

d78ffdf

		keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
		keyboardActions: KeyboardActions = KeyboardActions.Default,

Feature/#11 designsystem inputtext #12

Feature/#11 designsystem inputtext #12

Uh oh!

Conversation

jinukeu commented Jan 12, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💡 Issue

🌱 Key changes

✅ To Reviewers

📸 스크린샷

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Assessment against linked issues

Possibly related PRs

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

ashwon12 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ashwon12 Jan 15, 2025

Choose a reason for hiding this comment

Uh oh!

jinukeu Jan 15, 2025

Choose a reason for hiding this comment

Uh oh!

ashwon12 Jan 15, 2025

Choose a reason for hiding this comment

Uh oh!

jinukeu Jan 15, 2025

Choose a reason for hiding this comment

Uh oh!

ashwon12 Jan 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jinukeu Jan 15, 2025

Choose a reason for hiding this comment

Uh oh!

jinukeu Jan 15, 2025

Choose a reason for hiding this comment

Uh oh!

jinukeu Jan 15, 2025

Choose a reason for hiding this comment

Uh oh!

jinukeu commented Jan 15, 2025

Uh oh!

coderabbitai bot commented Jan 15, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jinukeu commented Jan 12, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 12, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

ashwon12 left a comment •

edited

Loading

ashwon12 Jan 15, 2025 •

edited

Loading