✨Feat: Input 컴포넌트 구현 #44
Conversation
|
""" Walkthrough사용자 인증 폼과 커스텀 Input 컴포넌트가 새롭게 추가되었습니다. 이메일과 비밀번호 입력 및 유효성 검증을 지원하며, 전역 CSS에 에러 스타일 클래스가 도입되었습니다. 비밀번호 입력란은 가시성 토글 기능을 포함합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MyForm
participant Input
User->>MyForm: 이메일/비밀번호 입력
MyForm->>Input: 입력값 전달 및 에러 상태 표시
Input-->>MyForm: 입력값/에러 반환
User->>MyForm: 폼 제출
MyForm->>MyForm: 유효성 검사
alt 유효성 통과
MyForm->>Console: 데이터 로그 출력
else 에러 발생
MyForm->>Input: 에러 메시지 표시
end
Possibly related issues
Poem
""" Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm error Exit handler never called! 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 4
🧹 Nitpick comments (1)
src/app/globals.css (1)
34-39: 다크 모드 대응 누락
.Text-error,.Border-error는 밝은 테마 색상만 지정돼 있습니다. 다크 모드에서도 일관된 접근성을 유지하려면dark:변형을 추가해주세요..Text-error { - @apply text-[#D6173A]; + @apply text-[#D6173A] dark:text-[#FF667F]; } .Border-error { - @apply border border-[#D6173A]; + @apply border border-[#D6173A] dark:border-[#FF667F]; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
public/images/visibility-off.svgis excluded by!**/*.svgpublic/images/visibility-on.svgis excluded by!**/*.svg
📒 Files selected for processing (3)
src/app/auth/page.tsx(1 hunks)src/app/globals.css(1 hunks)src/app/shared/components/Input.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/app/shared/components/Input.tsx (1)
src/app/shared/lib/cn.ts (1)
cn(4-6)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: eslint-check
🔇 Additional comments (1)
src/app/shared/components/Input.tsx (1)
31-34: 비밀번호 토글 시 type 결정 로직 단순화 가능불필요한 삼항 중첩 대신
inputType계산식을 분리하면 가독성이 향상됩니다. (선택 사항)
| const onSubmit = (data: FormData) => { | ||
| console.log(data) | ||
| } |
There was a problem hiding this comment.
민감 데이터 console.log 출력 자제
비밀번호가 그대로 브라우저 콘솔에 노출됩니다. 배포 전 반드시 제거하거나 서버 전송 로직으로 교체하세요.
🤖 Prompt for AI Agents
In src/app/auth/page.tsx around lines 20 to 22, the onSubmit function currently
logs the entire form data including sensitive information like passwords to the
browser console. Remove the console.log statement to prevent exposing sensitive
data, and replace it with logic that securely sends the form data to the server
for processing.
| {...register('email', { | ||
| required: '이메일을 입력해 주세요.', | ||
| pattern: { | ||
| value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, | ||
| message: '유효한 이메일 주소를 입력해주세요', | ||
| }, | ||
| })} | ||
| hasError={touchedFields.email && !!errors.email} | ||
| errorMessage={touchedFields.email ? errors.email?.message : ''} | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
에러 표시 조건이 제출 후에는 작동하지 않을 수 있음
touchedFields만 의존하면, 사용자가 필드를 건드리지 않고 제출했을 때 오류 메시지가 안 보일 수 있습니다.
isSubmitted 또는 errors만을 활용하여 제출 후에도 오류가 표시되도록 조건을 보완하는 것을 권장합니다.
Also applies to: 47-56
🤖 Prompt for AI Agents
In src/app/auth/page.tsx around lines 32 to 41 and similarly in lines 47 to 56,
the error display condition relies solely on touchedFields, which may prevent
error messages from showing after form submission if the user hasn't interacted
with the field. To fix this, update the error display condition to also consider
isSubmitted or directly check errors, ensuring that error messages appear after
submission regardless of field interaction.
There was a problem hiding this comment.
const Input = forwardRef<HTMLInputElement, CustomInputProps>(function Input(props, ref) {...}) 이 코드 구조가,
forwardRef에 컴포넌트를 통째로 넘기고, 호출되는 건 const Input인 건가요?
There was a problem hiding this comment.
네 맞습니다! 공식 문서 내용에서도 확인해보시면
const SomeComponent = forwardRef(render)이처럼 forwardRef 안에 render 함수를 인자로 받아서 ref를 지원하는새로운 컴포넌트로 반환합니다!
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
Input 컴포넌트 구현 수고많으셨어요~ 유효성 검사까지 완벽하게 구현해주셨네요!
특히 react-hook-form의 forwardRef 관련 설명 덕분에 명확하게 이해가 되었네요 👍
yuj2n
left a comment
yuj2n
left a comment
There was a problem hiding this comment.
인성님 Input 컴포넌트 구현 수고하셨습니다!!
| {isPassword ? ( | ||
| <div className="relative w-full"> | ||
| <input | ||
| id={name} | ||
| className={cn( | ||
| 'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal', | ||
| hasError ? 'Border-error' : 'Border-btn', | ||
| )} | ||
| type={inputType} | ||
| placeholder={placeholder} | ||
| name={name} | ||
| autoComplete={autoComplete} | ||
| {...rest} | ||
| ref={ref} | ||
| /> | ||
| <button | ||
| type="button" | ||
| onClick={() => setShowPassword(!showPassword)} | ||
| className="absolute right-16 top-1/2 translate-y-[-50%]" | ||
| > | ||
| <Image | ||
| src={`/images/visibility-${showPassword ? 'on' : 'off'}.svg`} | ||
| alt={showPassword ? '비밀번호 보기' : '비밀번호 숨기기'} | ||
| width={24} | ||
| height={24} | ||
| /> | ||
| </button> | ||
| </div> | ||
| ) : ( | ||
| <input | ||
| id={name} | ||
| className={cn( | ||
| 'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal', | ||
| hasError ? 'Border-error' : 'Border-btn', | ||
| )} |
There was a problem hiding this comment.
비밀번호 존재 유무에 따라 조건부 렌더링으로 보여주는 로직이군요!!
이 부분은 조금 코드가 길어서 가독성이 떨어져 보이는데 따로 분리해서 컴포넌트로 불러오는 방식은 어떨까용?
📌 변경 사항 개요
✨ 요약
📝 상세 내용
props
ref와...rest는 react-hook-form과 관련이 있기 때문에 아래에 자세하게 작성했습니다!labelName<label>{labelName}</label>name<input name={name} />,label htmlFor={name},register()식별자type<input type={type} />text,password사용시 비밀번호 보기 토글 지원autoComplete<input autoComplete={autoComplete} />placeholder<input placeholder={placeholder} />hasErrorerrorMessage<p>{errorMessage}</p>ref<input ref={ref} />...restonChange,onBlur,value,required등...register는 기존 react-hook-form 사용법과 동일 합니다./auth에서 확인 가능합니다.발생했던 문제점
이번에 구현하면서 react-hook-form을 사용하는 것을 고려 했을 때 발생한 상황을 말씀드리겠습니다.
요약
ref를 사용하므로 꼭 필요합니다.ref는 일반props처럼 전달되지 않아forwardRef로 명시적으로 넘겨줘야 합니다.register()가 반환하는onChange,onBlur,name,value등을 한 번에 전달하기 위해 사용합니다.1. ref를 넘기는 이유?(forwardRef) [공식 문서 (v19 부터 지원 종료)]
react-hook-form 에서는 내부적으로 DOM 노드에 직접 접근을 하게 되는데 이를 위해
register()에서ref를 넘겨줘야 해당 컴포넌트가 정상적으로 동작하게 됩니다. 그래서props로 넘겨줄 수 있지 않을까? 라는 생각을 할 수 있지만ref는 다르게 동작합니다.ref는 React에서 특별히 처리하는 예약 속성으로 React가 별도로 관리하기 때문에 컴포넌트에서 자동으로 전달 되지 않는다고 합니다!그래서 해당 문제를 해결하기 위해 나온 것이
forwardRef()라는 커스텀 훅입니다. 해당 훅은 ref를 props 처럼 전달할 수 있는 역할을 해주는 훅입니다. v19에서는 해당 문제가 해결 되면서 사용이 중지 되었지만 지금 사용하는 버전은 v18이기 때문에 해당 훅을 사용하여ref를 넘기게 되었습니다. (19 버전 부터는props로 넘기는 것이 가능해졌습니다.)2. ...rest를 사용한 이유 [참고 문서]
react-hook-form에
register()에서 반환 되는 값은onChange,onBlur,ref,name,value등의 이벤트 헨들러와 값이 포함이 되어 있습니다. 그렇기 때문에 해당 값들을 그대로 전달해주어야 react-hook-form이 정상적으로 동작하게 됩니다.06-12 추가
공식 문서를 살펴 보니 내부적으로도 이미 타입이 지정이 되어 있어서 따로 타입을 명시하지 않아도 되는 것을 확인했습니다.
내부 코드(1094줄)
🔗 관련 이슈
#38
🖼️ 스크린샷
✅ 체크리스트
💡 참고 사항
Summary by CodeRabbit
New Features
Style