🔗 :: (#399) 인증하기 텍스트 필드 높이 수정 #401

parkuiery · 2024-10-18T08:17:16Z

개요

인증하기 버튼을 텍스트 필드 안에 추가하였습니다.

작업 내용

할 말

없음

Summary by CodeRabbit

새로운 기능
- 인증 버튼을 포함한 JobisTextField 컴포넌트 업데이트, 사용자가 텍스트 필드에서 직접 인증 작업을 수행할 수 있도록 개선.
- 이메일 입력 화면과 인증 화면에서 버튼을 대체하는 매개변수화된 접근 방식 적용.
문서화
- 인증 관련 기능을 위한 새로운 문자열 리소스 추가: "인증 하기", "재발송".

coderabbitai · 2024-10-18T08:17:22Z

Walkthrough

이 변경 사항은 JobisTextField 구성 요소에 여러 가지 수정을 도입합니다. 새로운 컴포저블 함수인 JobisVerificationButton이 추가되어 인증 코드 전송 상태에 따라 다른 텍스트를 표시합니다. TextField 함수는 새로운 매개변수인 showVerificationButton, onVerificationClick, isSendAuthenticationCode를 포함하도록 업데이트되어, 인증 버튼의 가시성과 동작을 제어합니다. 이와 함께 여러 파일에서 UI 구성 요소의 기능을 간소화하고 향상시키는 변경이 이루어졌습니다.

Changes

파일 경로	변경 요약
`core/design-system/src/main/java/team/.../JobisTextField.kt`	`JobisVerificationButton` 추가, `TextField` 및 `JobisTextField`에 새로운 매개변수 추가.
`core/design-system/src/main/res/values/strings.xml`	새로운 문자열 리소스 `authentication` 및 `re_send_authentication_code` 추가.
`feature/signup/src/main/java/team/.../InputEmailScreen.kt`	`JobisSmallButton` 제거, `JobisTextField`에 매개변수 추가하여 기능 통합.
`feature/verify-email/src/main/java/team/.../VerifyEmailScreen.kt`	`JobisSmallButton` 제거, `JobisTextField`에 매개변수 추가하여 인증 코드 전송 모델 통합.
`feature/verify-email/src/main/java/team/.../VerifyEmailViewModel.kt`	`onAuthenticationClick` 메서드에서 이메일 주소 구성 수정, 일관성 향상.

Possibly related issues

인증하기 텍스트 필드 높이 수정 #399: 인증하기 버튼이 있는 텍스트 필드의 높이를 수정하는 작업이 이 PR의 텍스트 필드 관련 변경 사항과 관련이 있습니다.

Possibly related PRs

🔗 :: (#369) 인증코드 전송 버그 #376: 인증 코드 전송과 관련된 JobisTextField의 기능 향상과 직접적으로 연결된 버그 수정.
🔗 :: (#396) 이메일 주소 중복 버그 #397: 이메일 주소 처리 방식에 대한 변경 사항이 포함되어 있으며, 이는 이 PR의 업데이트와 관련이 있습니다.

Suggested labels

리팩토링

Suggested reviewers

Tmdhoon2

Poem

🐰
텍스트 필드에 버튼이 생겼네,
인증하기, 이제 쉽게 할 수 있네.
클릭 한 번에 코드가 날아가,
Rabbit의 기쁨, 여기서 시작하네!
🥕✨

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?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
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 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.

coderabbitai

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (3)

core/design-system/src/main/res/values/strings.xml (1)
27-27: 새로운 문자열 리소스가 추가되었습니다. 명명 규칙에 대한 작은 제안이 있습니다.

"re_send_authentication_code" 키와 "재발송" 값을 가진 새로운 문자열 리소스가 적절히 추가되었습니다. 이는 인증 코드 재전송 기능에 적합한 텍스트입니다.

다만, 기존 파일의 명명 규칙과의 일관성을 위해 키 이름을 "resendauthenticationcode"로 변경하는 것을 고려해 보시기 바랍니다. 예를 들어:
-    <string name="re_send_authentication_code">재발송</string>
+    <string name="resendauthenticationcode">재발송</string>
이렇게 하면 파일 내의 다른 문자열 리소스와 일관된 형식을 유지할 수 있습니다.
feature/verify-email/src/main/java/team/retum/jobis/verify/email/ui/VerifyEmailScreen.kt (1)
153-156: UI 개선을 위한 좋은 변경사항입니다.

이메일 입력 필드에 인증 버튼을 통합한 것은 사용자 경험을 향상시키는 좋은 접근 방식입니다. 코드가 간결해지고 UI가 더 직관적으로 변경되었습니다.

가독성을 더욱 높이기 위해 다음과 같이 매개변수를 정렬하는 것을 고려해 보세요:
JobisTextField(
    title = stringResource(id = R.string.email),
    value = email,
    hint = stringResource(id = R.string.hint_email),
    onValueChange = onEmailChange,
    showEmailHint = true,
    checkDescription = stringResource(id = R.string.description_email_sent),
    errorDescription = stringResource(id = R.string.description_conflict_email),
    showDescription = showEmailDescription,
    descriptionType = emailDescriptionType,
    showVerificationButton = true,
    onVerificationClick = onAuthenticationClick,
    isSendAuthenticationCode = sendAuthenticationCode(),
)
이렇게 하면 새로 추가된 매개변수들이 더 눈에 띄게 됩니다.
core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt (1)
135-135: 텍스트 색상을 onPrimary로 변경하여 가독성을 향상시키세요.

버튼의 배경색이 JobisTheme.colors.primary이므로, 텍스트 색상을 JobisTheme.colors.onPrimary로 변경하면 대비가 높아져 사용자에게 더 명확하게 보일 것입니다.

제안된 수정 사항:
-            color = JobisTheme.colors.onSurfaceVariant,
+            color = JobisTheme.colors.onPrimary,

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between e765c1b and 5772cf3.

📒 Files selected for processing (5)

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt (6 hunks)
core/design-system/src/main/res/values/strings.xml (1 hunks)
feature/signup/src/main/java/team/retum/signup/ui/InputEmailScreen.kt (1 hunks)
feature/verify-email/src/main/java/team/retum/jobis/verify/email/ui/VerifyEmailScreen.kt (1 hunks)
feature/verify-email/src/main/java/team/retum/jobis/verify/email/viewmodel/VerifyEmailViewModel.kt (1 hunks)

🧰 Additional context used

🔇 Additional comments (3)

core/design-system/src/main/res/values/strings.xml (1)

26-26: LGTM: 새로운 문자열 리소스가 적절히 추가되었습니다.

"authentication" 키와 "인증 하기" 값을 가진 새로운 문자열 리소스가 올바르게 추가되었습니다. 이는 기존의 명명 규칙을 따르고 있으며, 인증 기능에 적합한 텍스트입니다.

feature/verify-email/src/main/java/team/retum/jobis/verify/email/viewmodel/VerifyEmailViewModel.kt (1)

73-73: 이메일 주소 구성 개선

이 변경은 onAuthenticationClick 메서드에서 이메일 주소를 구성하는 방식을 개선했습니다. EMAIL_ADDRESS를 일관되게 추가함으로써 onNextClick 메서드와 동일한 방식으로 이메일 주소를 처리하게 되었습니다.

이러한 변경은 다음과 같은 이점을 제공합니다:

코드의 일관성 향상

이메일 주소 처리의 통일성 확보

잠재적인 버그 예방

feature/signup/src/main/java/team/retum/signup/ui/InputEmailScreen.kt (1)

148-151: JobisTextField 컴포넌트의 개선된 기능성을 승인합니다.

JobisTextField 컴포넌트에 새로운 매개변수를 추가한 것은 좋은 개선입니다. 이러한 변경으로 인해:

컴포넌트의 재사용성이 향상되었습니다.

인증 버튼 기능이 텍스트 필드에 직접 통합되어 코드가 더 모듈화되었습니다.

UI 구성이 더 유연해져 다양한 상황에 쉽게 적용할 수 있게 되었습니다.

이러한 변경은 코드의 유지보수성과 가독성을 크게 향상시킵니다.

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt

coderabbitai

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt (2)
104-136: 인증 버튼 구현이 잘 되었습니다. 클릭 영역 개선을 위한 제안이 있습니다.

JobisVerificationButton 함수가 잘 구현되었습니다. 하지만 클릭 가능한 영역을 최대화하기 위해 modifier 순서를 약간 조정하는 것이 좋겠습니다.

다음과 같이 수정하는 것을 고려해보세요:
        modifier = modifier
-           .clickable(
-               onClick = onVerificationClick,
-           )
            .background(
                color = JobisTheme.colors.primary,
                shape = RoundedCornerShape(8.dp),
            )
            .padding(
                horizontal = 8.dp,
                vertical = 4.dp,
            )
+           .clickable(
+               onClick = onVerificationClick,
+           )
이렇게 하면 패딩을 포함한 전체 영역이 클릭 가능해집니다.

363-365: JobisTextField 함수에 새 매개변수가 적절히 추가되었습니다. 문서 업데이트를 고려해보세요.

JobisTextField 함수에 인증 버튼 관련 새 매개변수들이 잘 추가되었습니다. 기본값을 제공하여 이전 버전과의 호환성을 유지한 것도 좋습니다.

함수 주석(KDoc)에 새로 추가된 매개변수들에 대한 설명을 추가하는 것을 고려해보세요. 이는 다른 개발자들이 이 컴포넌트를 사용할 때 도움이 될 것입니다.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 5772cf3 and 9b2f636.

📒 Files selected for processing (1)

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt (6 hunks)

🧰 Additional context used

🔇 Additional comments (2)

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt (2)

52-52: 새로운 import 문이 적절히 추가되었습니다.

clickable 유틸리티를 가져오는 import 문이 추가되었습니다. 이는 새로운 인증 버튼 기능과 관련이 있어 보입니다.

150-152: TextField 함수에 인증 버튼 기능이 잘 통합되었습니다.

TextField 함수에 새로운 매개변수들이 추가되었고, JobisVerificationButton이 조건부로 렌더링되도록 구현되었습니다. 이 변경사항들은 기존 컴포넌트의 구조를 잘 따르고 있으며, 새로운 기능을 적절히 통합하고 있습니다.

Also applies to: 234-239

Tmdhoon2 · 2024-10-18T09:37:11Z

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt

이거 위에 Kdoc 한 번 작성해주실 수 있나요??

추가하였습니당

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

coderabbitai

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt (2)
104-136: 새로운 JobisVerificationButton 컴포저블이 잘 구현되었습니다.

이 컴포저블은 인증 버튼의 기능을 잘 캡슐화하고 있으며, 재사용 가능한 방식으로 구현되었습니다. 다음과 같은 점이 특히 좋습니다:

stringResource를 사용하여 다국어 지원을 용이하게 했습니다.

JobisTheme와 JobisTypography를 사용하여 디자인 시스템과의 일관성을 유지했습니다.

clickable 수정자를 올바르게 적용하여 전체 영역이 클릭 가능하도록 했습니다.

접근성을 개선하기 위해 Box에 semantics 수정자를 추가하는 것을 고려해보세요. 예를 들어:
.semantics { role = Role.Button }
이렇게 하면 스크린 리더 사용자에게 이 요소가 버튼임을 명확히 알릴 수 있습니다.

317-319: JobisTextField 컴포저블이 인증 기능을 지원하도록 적절히 수정되었습니다.

새로운 매개변수 showVerificationButton, onVerificationClick, isSendAuthenticationCode를 추가하고 이를 내부 TextField에 전달하는 방식으로 인증 기능을 잘 통합했습니다. 특히 다음 사항들이 잘 처리되었습니다:

새 매개변수에 대한 기본값 설정으로 기존 사용 코드와의 호환성을 유지했습니다.

KDoc에 새 매개변수에 대한 설명을 추가하여 문서화를 잘 유지했습니다.

KDoc의 가독성을 더욱 개선하기 위해, 새로 추가된 매개변수들에 대한 설명을 조금 더 상세히 작성하는 것이 좋겠습니다. 예를 들어:
/**
 * @param showVerificationButton 인증 버튼을 표시할지 여부를 결정합니다. 기본값은 false입니다.
 * @param onVerificationClick 인증 버튼을 클릭했을 때 호출될 함수입니다. 기본값은 빈 람다 함수입니다.
 * @param isSendAuthenticationCode 인증 코드가 이미 전송되었는지 여부를 나타냅니다. 이 값에 따라 버튼의 텍스트가 변경됩니다. 기본값은 false입니다.
 */
이렇게 하면 각 매개변수의 역할과 기본값에 대해 더 명확하게 이해할 수 있습니다.

Also applies to: 366-368, 405-407

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 6b44275 and e5f767c.

📒 Files selected for processing (1)

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt (7 hunks)

🧰 Additional context used

🔇 Additional comments (2)

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt (2)

52-52: 새로운 import 문이 적절히 추가되었습니다.

team.retum.jobisdesignsystemv2.utils.clickable를 import하여 커스텀 clickable 수정자를 사용할 수 있게 되었습니다. 이는 프로젝트 전반에 걸쳐 일관된 클릭 동작을 제공하는 데 도움이 될 것입니다.

150-152: TextField 컴포저블에 인증 버튼 기능이 적절히 통합되었습니다.

새로운 매개변수 showVerificationButton, onVerificationClick, isSendAuthenticationCode를 추가하고, 조건부로 JobisVerificationButton을 렌더링하는 방식으로 인증 기능을 텍스트 필드에 잘 통합했습니다. 이러한 접근 방식은 다음과 같은 이점이 있습니다:

재사용성: 인증 버튼의 표시 여부를 외부에서 제어할 수 있어 유연성이 향상되었습니다.

관심사의 분리: 인증 로직이 TextField 내부로 캡슐화되어 사용하는 쪽의 코드가 간결해집니다.

일관성: 기존 TextField 구조를 유지하면서 새로운 기능을 자연스럽게 추가했습니다.

Also applies to: 234-239

parkuiery added 2 commits October 18, 2024 17:13

refactor :: 인증 버튼 추가

7552862

refactor :: 이메일 추가

5772cf3

parkuiery added the 버그 버그를 수정합니다. label Oct 18, 2024

parkuiery self-assigned this Oct 18, 2024

parkuiery requested a review from a team as a code owner October 18, 2024 08:17

parkuiery linked an issue Oct 18, 2024 that may be closed by this pull request

인증하기 텍스트 필드 높이 수정 #399

Closed

coderabbitai bot reviewed Oct 18, 2024

View reviewed changes

core/design-system/src/main/java/team/retum/jobisdesignsystemv2/textfield/JobisTextField.kt Outdated Show resolved Hide resolved

refactor :: ktlint

9b2f636

coderabbitai bot reviewed Oct 18, 2024

View reviewed changes

Tmdhoon2 requested changes Oct 18, 2024

View reviewed changes

parkuiery and others added 2 commits October 18, 2024 23:34

refactor :: click 영역 확장

6b44275

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

docs :: 인증하기 버튼 주석 추가

e5f767c

coderabbitai bot reviewed Oct 18, 2024

View reviewed changes

parkuiery requested a review from Tmdhoon2 October 18, 2024 23:24

Tmdhoon2 approved these changes Oct 20, 2024

View reviewed changes

parkuiery merged commit 28d318a into develop Oct 20, 2024
2 checks passed

parkuiery deleted the feature/399-인증하기-텍스트-필드-높이-수정 branch October 20, 2024 12:02

This was referenced Nov 8, 2024

🔗 :: (#427) 이메일 중복 버그 #429

Merged

🔗 :: (#430) 비밀번호 찾기 이메일 인증 버그 #431

Merged

🔗 :: (#436) 인증 버튼 활성화 #439

Merged

coderabbitai bot mentioned this pull request Nov 21, 2024

🔗 :: (#444) 회원가입 비밀번호 디코딩 #445

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🔗 :: (#399) 인증하기 텍스트 필드 높이 수정 #401

🔗 :: (#399) 인증하기 텍스트 필드 높이 수정 #401

parkuiery commented Oct 18, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 18, 2024 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

coderabbitai bot left a comment

Tmdhoon2 Oct 18, 2024

parkuiery Oct 18, 2024

coderabbitai bot left a comment

🔗 :: (#399) 인증하기 텍스트 필드 높이 수정 #401

🔗 :: (#399) 인증하기 텍스트 필드 높이 수정 #401

Conversation

parkuiery commented Oct 18, 2024 • edited by coderabbitai bot Loading

개요

작업 내용

할 말

Summary by CodeRabbit

coderabbitai bot commented Oct 18, 2024 • edited Loading

Walkthrough

Changes

Possibly related issues

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

Tmdhoon2 Oct 18, 2024

Choose a reason for hiding this comment

parkuiery Oct 18, 2024

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

parkuiery commented Oct 18, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 18, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)