인풋 공통 컴포넌트 구현 by jungwon123 · Pull Request #15 · codeit-part4-final/workers

jungwon123 · 2026-01-31T19:04:59Z

Summary

atoms 와 molecules로 작업을 하다가 통일성이 안맞아서 처음 pull 해온 컴포넌트 폴더 형식에 맞추어 작업했습니다.
제가 정의했던 인풋 atom은 아래 이미지 2개이고 나머지는 아이콘, 버튼 조합의 molecule로 생각했습니다.

구현된 컴포넌트

이메일 인풋
비밀번호 인풋
텍스트 박스 인풋
댓글 인풋
읽기 전용 인풋

Issue

#4

gemini-code-assist · 2026-01-31T19:05:16Z

Summary of Changes

Hello @jungwon123, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 애플리케이션의 인풋 필드에 대한 일관된 사용자 경험과 개발 효율성을 제공하기 위해 여러 공통 인풋 컴포넌트를 도입합니다. 컴포넌트 폴더 구조를 표준화하고, 재사용 가능한 모듈을 구축하여 코드의 응집도를 높이고 확장성을 개선하는 데 중점을 둡니다.

Highlights

공통 인풋 컴포넌트 구현: 이메일 인풋, 비밀번호 인풋, 텍스트 박스 인풋, 댓글 인풋, 읽기 전용 인풋 등 다양한 유형의 공통 인풋 컴포넌트가 구현되었습니다.
컴포넌트 구조 통일: 기존 atoms 및 molecules 작업 시 발생했던 통일성 문제를 해결하기 위해 초기 컴포넌트 폴더 형식에 맞춰 구조를 재정비했습니다.
재사용성 및 유지보수성 향상: 표준화된 인풋 컴포넌트 세트를 제공하여 애플리케이션 전반의 일관성을 높이고, 향후 개발 및 유지보수를 용이하게 합니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

이번 PR은 공통 인풋 컴포넌트들을 구현한 것으로, 전반적으로 잘 작성되었습니다. 몇 가지 접근성 및 사용성 개선을 위한 제안과 함께, React의 ref 전달 표준 패턴을 따르도록 수정을 제안했습니다. 특히, 포커스 스타일과 label 연결은 웹 접근성 향상을 위해 중요합니다. 자세한 내용은 각 파일에 남긴 코멘트를 참고해주세요.

gemini-code-assist · 2026-01-31T19:07:22Z

+      <div className={styles.field}>
+        <label className={styles.label}>새 비밀번호</label>
+        <Input
+          type="password"
+          placeholder="새 비밀번호를 입력해 주세요."
+          disabled={!isEditing}
+          {...newPasswordProps}
+        />
+      </div>
+      <div className={styles.field}>
+        <label className={styles.label}>새 비밀번호 확인</label>
+        <Input
+          type="password"
+          placeholder="새 비밀번호를 다시 한 번 입력해 주세요."
+          disabled={!isEditing}
+          {...confirmPasswordProps}
+        />
+      </div>


이 컴포넌트의 사용성과 접근성을 개선하기 위해 두 가지를 제안합니다:

접근성 향상: label과 입력 필드를 htmlFor와 id 속성으로 연결하여 스크린 리더 사용자들이 더 쉽게 양식을 탐색할 수 있도록 해야 합니다. React.useId() 훅을 사용하면 고유 ID를 생성할 수 있습니다.

사용성 향상: Input 대신 PasswordInput 컴포넌트를 사용하면 사용자가 입력한 비밀번호를 확인할 수 있는 토글 기능을 제공하여 사용자 경험을 개선할 수 있습니다.

이 변경을 적용하려면 Input 대신 PasswordInput을 import해야 합니다.

Suggested change

<div className={styles.field}>

<label className={styles.label}>새 비밀번호</label>

<Input

type="password"

placeholder="새 비밀번호를 입력해 주세요."

disabled={!isEditing}

{...newPasswordProps}

/>

</div>

<div className={styles.field}>

<label className={styles.label}>새 비밀번호 확인</label>

<Input

type="password"

placeholder="새 비밀번호를 다시 한 번 입력해 주세요."

disabled={!isEditing}

{...confirmPasswordProps}

/>

</div>

<div className={styles.field}>

<label htmlFor="new-password" className={styles.label}>새 비밀번호</label>

<PasswordInput

id="new-password"

placeholder="새 비밀번호를 입력해 주세요."

disabled={!isEditing}

{...newPasswordProps}

/>

</div>

<div className={styles.field}>

<label htmlFor="confirm-password" className={styles.label}>새 비밀번호 확인</label>

<PasswordInput

id="confirm-password"

placeholder="새 비밀번호를 다시 한 번 입력해 주세요."

disabled={!isEditing}

{...confirmPasswordProps}

/>

</div>

스크린 리더가 무엇인지 몰라 지피티 한테 물어보니 시각장애인 (전맹 / 저시력), 키보드만 사용하는 유저 등 일반적인 상황보다 좀 특수한 상황에서 웹을 사용할때 쓰는 장치같습니다. 그 부분의 디테일도 챙겨야 할지 의문이긴 합니다. 스크린리더 접근성도 챙긴다면 seo 도 자연스레 따라 온다라고 하기는 하는데 논의 해보아야 할거같습니다.

gemini-code-assist · 2026-01-31T19:07:22Z

+  outline: none;
+}


outline: none;은 키보드 사용자를 위한 포커스 표시를 제거하므로 웹 접근성을 해칠 수 있습니다. 포커스 상태를 시각적으로 표시하는 것이 중요합니다. outline을 제거하는 대신, 커스텀 포커스 스타일을 :focus-visible 가상 클래스에 추가하는 것을 권장합니다.

Suggested change

outline: none;

}

outline: none;

}

.input:focus-visible {

border-color: #74A1FB;

box-shadow: 0 0 0 2px rgba(116, 161, 251, 0.4);

}

gemini-code-assist · 2026-01-31T19:07:22Z

+  outline: none;
+  resize: none;
+  overflow-y: auto;


outline: none;은 키보드 사용자를 위한 포커스 표시를 제거하므로 웹 접근성을 해칠 수 있습니다. 포커스 상태를 시각적으로 표시하는 것이 중요합니다. outline을 제거하는 대신, 커스텀 포커스 스타일을 :focus-visible 가상 클래스에 추가하는 것을 권장합니다.

Suggested change

outline: none;

resize: none;

overflow-y: auto;

outline: none;

resize: none;

overflow-y: auto;

}

.textarea:focus-visible {

border-color: #74A1FB;

box-shadow: 0 0 0 2px rgba(116, 161, 251, 0.4);

}

gemini-code-assist · 2026-01-31T19:07:22Z

+      <div className={styles.field}>
+        <label className={styles.label}>이메일</label>
+        <Input type="email" value={email} disabled className={styles.readOnly} />
+      </div>
+      <div className={styles.field}>
+        <label className={styles.label}>비밀번호</label>
+        <Input type="password" value="••••••••" disabled className={styles.readOnly} />
+      </div>


label과 Input을 htmlFor와 id 속성으로 연결하면 웹 접근성을 향상시킬 수 있습니다. 스크린 리더 사용자가 각 입력 필드가 어떤 라벨에 해당하는지 명확히 알 수 있게 됩니다. React.useId 훅을 사용하면 고유한 ID를 쉽게 생성할 수 있습니다.

Suggested change

<div className={styles.field}>

<label className={styles.label}>이메일</label>

<Input type="email" value={email} disabled className={styles.readOnly} />

</div>

<div className={styles.field}>

<label className={styles.label}>비밀번호</label>

<Input type="password" value="••••••••" disabled className={styles.readOnly} />

</div>

<div className={styles.field}>

<label htmlFor="account-email" className={styles.label}>이메일</label>

<Input id="account-email" type="email" value={email} disabled className={styles.readOnly} />

</div>

<div className={styles.field}>

<label htmlFor="account-password" className={styles.label}>비밀번호</label>

<Input id="account-password" type="password" value="••••••••" disabled className={styles.readOnly} />

</div>

gemini-code-assist · 2026-01-31T19:07:22Z

+export default function TextArea({ className, ref, ...props }: TextAreaProps) {
+  return <textarea ref={ref} className={clsx(styles.textarea, className)} {...props} />;
+}


ref를 일반 prop으로 전달하는 것은 React의 표준 패턴이 아니며 혼란을 야기할 수 있습니다. 컴포넌트가 ref를 받을 수 있도록 React.forwardRef를 사용하는 것이 좋습니다. 이렇게 하면 부모 컴포넌트에서 ref 어트리뷰트를 사용하여 DOM 노드에 직접 접근할 수 있습니다.

이를 위해 이 컴포넌트를 forwardRef로 감싸고, types/types.ts의 TextAreaProps에서 ref 속성을 제거해야 합니다:
export type TextAreaProps = ComponentPropsWithoutRef<'textarea'>;

gemini-code-assist · 2026-01-31T19:07:22Z

+export type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & {
+  ref?: Ref<HTMLTextAreaElement>;
+};


TextArea 컴포넌트에서 ref를 prop으로 직접 다루는 대신 React.forwardRef를 사용하는 것이 좋습니다. 이를 위해 TextAreaProps에서 ref 프로퍼티를 제거하고, TextArea 컴포넌트를 forwardRef로 감싸야 합니다. 이렇게 하면 React의 표준 ref 전달 메커니즘을 따르게 되어 코드의 일관성과 예측 가능성이 높아집니다. 이 변경 후에는 TextArea.tsx도 React.forwardRef를 사용하도록 수정해야 합니다.

export type TextAreaProps = ComponentPropsWithoutRef<'textarea'>;

…into feat/input

Jieunsse

일부 스타일링 코드에 Var 적용 안된 부분이 있어서 그 부분확인해보시면 좋을 것 같습니다!
제미나이 리뷰도 확인해보시고 반영할 부분 반영해보면 좋을 것 같아요!
Approved 드렸습니다!
고생하셨어요 👍

Jieunsse · 2026-02-03T14:08:29Z

+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: #0f172a;


컬러 속성 var로 적용해주시면 좋을 것 같습니다!

Jieunsse · 2026-02-03T14:08:50Z

+}
+
+.readOnly {
+  background: #f1f5f9;


여기도 컬러속성 바꿔보면 좋을 것 같네요!

Jieunsse · 2026-02-03T14:09:32Z

+
+.errorMessage {
+  font-size: 12px;
+  color: #fc4b4b;


컬러 체크 부탁드려요!

…into feat/input

jungwon123 added 4 commits January 31, 2026 23:40

feat: 아토믹 인풋, 비밀번호를 조합한 인풋 구현

0a9f2ce

feat: 아토믹 박스 인풋 구현, 아토믹 인풋의 조합으로 댓글 인풋 구현

73168b7

chore: 테스트 페이지 삭제

e9d4bce

fix: 제미나이 코드 리뷰 크리티컬 수정

e3d2636

jungwon123 added this to the 컴포넌트 milestone Jan 31, 2026

jungwon123 requested review from HWAN0218, Jieunsse and yooolleee January 31, 2026 19:04

jungwon123 assigned Jieunsse, HWAN0218 and yooolleee Jan 31, 2026

jungwon123 added the 기능추가 기능개발 및 추가할 때 사용해주세요. label Jan 31, 2026

jungwon123 added this to workers Jan 31, 2026

github-project-automation Bot moved this to 개발 대기중 in workers Jan 31, 2026

gemini-code-assist Bot reviewed Jan 31, 2026

View reviewed changes

Jieunsse assigned jungwon123 and unassigned Jieunsse, HWAN0218 and yooolleee Feb 1, 2026

Jieunsse moved this from 개발 대기중 to PR 리뷰중 in workers Feb 2, 2026

jungwon123 added 2 commits February 2, 2026 22:07

fix: 접근성 고려와 비밀번호 복사 금지 추가

225f9fa

Merge branch 'main' of https://github.com/codeit-part4-final/workers …

928df83

…into feat/input

Jieunsse approved these changes Feb 3, 2026

View reviewed changes

jungwon123 added 2 commits February 4, 2026 14:38

Merge branch 'main' of https://github.com/codeit-part4-final/workers …

7ecb576

…into feat/input

fix: color 토큰 사용, 스토리븍 추가 및jsdoc 추가

7a596f6

jungwon123 merged commit 4522e5c into main Feb 4, 2026
1 check passed

github-project-automation Bot moved this from PR 리뷰중 to 개발 완료 in workers Feb 4, 2026

jungwon123 deleted the feat/input branch February 4, 2026 06:01

-  outline: none;
-}
+  outline: none;
+}
+.input:focus-visible {
+  border-color: #74A1FB;
+  box-shadow: 0 0 0 2px rgba(116, 161, 251, 0.4);
+}

Uh oh!

Conversation

jungwon123 commented Jan 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Issue

Uh oh!

gemini-code-assist Bot commented Jan 31, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

jungwon123 Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

Jieunsse left a comment

Choose a reason for hiding this comment

Uh oh!

Jieunsse Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Jieunsse Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Jieunsse Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jungwon123 commented Jan 31, 2026 •

edited

Loading