가격 Input에 문자가 적히는 오류 해결 & 천 단위로 쉼표 추가 #247
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📝 WalkthroughWalkthroughPriceInput 컴포넌트가 완전히 제어 컴포넌트로 리팩토링되어, 명시적 value 및 onChange props를 사용하도록 변경되었습니다. 이에 따라 가격 입력 필드는 react-hook-form의 register에서 Controller로 관리 방식이 전환되었으며, PriceInput과의 연동이 명확해졌습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PriceInput
participant Controller
participant Form
User->>PriceInput: 입력값 변경 (숫자/텍스트)
PriceInput->>PriceInput: 입력값 포맷팅, 숫자 변환
PriceInput->>Controller: onChange(숫자 값)
Controller->>Form: 폼 상태 업데이트
Form->>Controller: price 값 변경 감지
Controller->>PriceInput: value prop 업데이트
PriceInput->>PriceInput: display 값 재포맷팅
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
🚀 오늘뭐해 Preview Deploy 완료! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/what-today/src/components/experiences/PriceInput.tsx (1)
25-36: 입력 처리 로직에서 개선 가능한 부분이 있습니다.현재 구현에서 유효하지 않은 입력 시
onChange(0)을 호출하는데, 이는 사용자가 입력 필드를 지울 때도 0으로 설정됩니다. 빈 문자열 입력 시에는 별도 처리를 고려해보세요.다음과 같이 개선할 수 있습니다:
const handleChange = (e: ChangeEvent<HTMLInputElement>) => { const raw = unformatNumber(e.target.value); + + // 빈 입력의 경우 별도 처리 + if (raw === '') { + setDisplay(''); + onChange(0); // 또는 필요에 따라 다른 기본값 + return; + } + const numeric = Number(raw); if (!isNaN(numeric)) { setDisplay(formatNumber(numeric)); onChange(numeric); } else { setDisplay(''); onChange(0); } };
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/what-today/src/components/experiences/PriceInput.tsx(1 hunks)apps/what-today/src/pages/experiences/index.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (7)
📓 Common learnings
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#119
File: apps/what-today/src/pages/mypage/edit-profile/index.tsx:63-92
Timestamp: 2025-07-24T08:30:12.556Z
Learning: MyungJiwoo indicated they will implement validation checks for the edit profile page (password confirmation validation) immediately after PR #119 is merged, following their incremental development approach.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#57
File: packages/design-system/src/components/select/SelectRoot.tsx:37-38
Timestamp: 2025-07-17T01:20:26.915Z
Learning: In the SelectRoot component (packages/design-system/src/components/select/SelectRoot.tsx), MyungJiwoo questioned the need for implementing controlled component pattern. The current implementation only handles internal→external state changes via onChangeValue callback, but doesn't handle external→internal changes when the value prop is updated, which breaks the typical React controlled component contract.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#79
File: packages/design-system/src/components/ProfileImageInput.tsx:44-45
Timestamp: 2025-07-19T17:03:39.193Z
Learning: ProfileImageInput 컴포넌트(packages/design-system/src/components/ProfileImageInput.tsx)에서 previewUrl은 의도적으로 내부 상태로 관리됩니다. 이는 미리보기 이미지 관리와 API로 받아온 원본 이미지와의 비교를 위한 용도로, 외부에서 제어할 필요가 없는 uncontrolled 컴포넌트 + 콜백 패턴입니다.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#63
File: packages/design-system/src/pages/NoResultDoc.tsx:8-8
Timestamp: 2025-07-17T11:29:24.913Z
Learning: MyungJiwoo indicated that code duplication in documentation files (like design system documentation) is acceptable and doesn't need to be fixed, as it's not actual service code but rather demo/documentation code with different standards.
📚 Learning: in the selectroot component (packages/design-system/src/components/select/selectroot.tsx), myungjiwo...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#57
File: packages/design-system/src/components/select/SelectRoot.tsx:37-38
Timestamp: 2025-07-17T01:20:26.915Z
Learning: In the SelectRoot component (packages/design-system/src/components/select/SelectRoot.tsx), MyungJiwoo questioned the need for implementing controlled component pattern. The current implementation only handles internal→external state changes via onChangeValue callback, but doesn't handle external→internal changes when the value prop is updated, which breaks the typical React controlled component contract.
Applied to files:
apps/what-today/src/components/experiences/PriceInput.tsxapps/what-today/src/pages/experiences/index.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), the input type s...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:18:33.545Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), the input type should be 'checkbox' rather than 'radio' to support the intended toggle behavior where users can click a selected option again to deselect it. The handleChange function already implements this toggle logic with `onSelect?.(isSelected ? '' : value);`.
Applied to files:
apps/what-today/src/components/experiences/PriceInput.tsxapps/what-today/src/pages/experiences/index.tsx
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Applied to files:
apps/what-today/src/components/experiences/PriceInput.tsxapps/what-today/src/pages/experiences/index.tsx
📚 Learning: profileimageinput 컴포넌트(packages/design-system/src/components/profileimageinput.tsx)에서 previewurl은 의도...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#79
File: packages/design-system/src/components/ProfileImageInput.tsx:44-45
Timestamp: 2025-07-19T17:03:39.193Z
Learning: ProfileImageInput 컴포넌트(packages/design-system/src/components/ProfileImageInput.tsx)에서 previewUrl은 의도적으로 내부 상태로 관리됩니다. 이는 미리보기 이미지 관리와 API로 받아온 원본 이미지와의 비교를 위한 용도로, 외부에서 제어할 필요가 없는 uncontrolled 컴포넌트 + 콜백 패턴입니다.
Applied to files:
apps/what-today/src/components/experiences/PriceInput.tsx
📚 Learning: myungjiwoo plans to implement form validation using zod and react-hook-form in a future iteration ra...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#90
File: apps/what-today/src/pages/signup/index.tsx:67-71
Timestamp: 2025-07-21T05:32:48.443Z
Learning: MyungJiwoo plans to implement form validation using zod and react-hook-form in a future iteration rather than adding quick validation checks in the current signup page implementation in apps/what-today/src/pages/signup/index.tsx.
Applied to files:
apps/what-today/src/pages/experiences/index.tsx
📚 Learning: taeil08이 what-today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 ...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
Applied to files:
apps/what-today/src/pages/experiences/index.tsx
🧬 Code Graph Analysis (1)
apps/what-today/src/components/experiences/PriceInput.tsx (1)
packages/design-system/src/components/input/index.ts (1)
Input(37-46)
🔇 Additional comments (6)
apps/what-today/src/components/experiences/PriceInput.tsx (5)
6-9: 인터페이스 정의가 올바르게 구현되었습니다.
PriceInputProps인터페이스가InputProps를 확장하여 제어 컴포넌트에 필요한value와onChange속성을 명확히 정의했습니다. 타입 안전성이 보장되어 있습니다.
12-13: 숫자 포맷팅 함수들이 적절히 구현되었습니다.천 단위 구분 기호 추가/제거 로직이 정규식을 사용하여 효율적으로 구현되어 있습니다.
replaceAll메서드 사용도 적절합니다.
17-23: useEffect에서 value 변경 처리가 적절합니다.외부에서 전달받은
valueprop이 변경될 때 내부display상태를 올바르게 동기화하고 있으며, NaN 체크도 포함되어 있어 안전합니다.
38-43: onBlur 처리가 잘 구현되었습니다.포커스를 잃을 때 포맷팅을 다시 적용하여 일관된 표시를 유지하는 로직이 적절합니다.
49-56: Input.Field 속성들이 올바르게 설정되었습니다.
type='text'와inputMode='numeric'의 조합으로 모바일에서 숫자 키보드를 표시하면서 커스텀 포맷팅을 지원합니다. 제어 컴포넌트 패턴도 올바르게 구현되어 있습니다.apps/what-today/src/pages/experiences/index.tsx (1)
294-300: Controller를 사용한 가격 입력 필드 통합이 올바르게 구현되었습니다.
PriceInput컴포넌트가 제어 컴포넌트로 변경됨에 따라register대신Controller를 사용하여 올바르게 통합했습니다.field.value와field.onChange를 통한 양방향 데이터 바인딩과 에러 처리가 적절히 구현되어 있습니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
default.mov
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit