Fix/69: input 에러 해결 #70
Conversation
Walkthrough이 변경 사항은 Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
Han-wo
added
🛠️ FIX
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx(2 hunks)src/app/search/[id]/_components/transaction-form/trade/order-field.tsx(2 hunks)src/app/search/[id]/_components/transaction-form/trade/total-amount.tsx(1 hunks)src/components/common/dropdown/index.tsx(1 hunks)src/components/common/input/index.tsx(1 hunks)src/utils/price.ts(0 hunks)
💤 Files with no reviewable changes (1)
- src/utils/price.ts
✅ Files skipped from review due to trivial changes (1)
- src/app/search/[id]/_components/transaction-form/trade/total-amount.tsx
🔇 Additional comments (6)
src/app/search/[id]/_components/transaction-form/trade/order-field.tsx (2)
39-71: 입력값 검증 로직이 잘 구현되었습니다.
숫자 입력 검증과 에러 처리가 체계적으로 구현되었습니다:
- 정규식을 통한 숫자와 쉼표만 허용
- 빈 값 처리
- NaN과 Infinity 같은 엣지 케이스 처리
- 음수 값 방지
입력값 검증이 실제로 NaN 에러를 방지하는지 확인하기 위해 다음 테스트 케이스들을 검증해보세요:
const testCases = [
"", // 빈 문자열
"123", // 유효한 숫자
"1,234", // 쉼표가 있는 숫자
"-123", // 음수
"abc", // 문자
"123.45", // 소수점
"Infinity", // Infinity
"NaN" // NaN
];
// 각 테스트 케이스에 대해 handleInputChange 함수 실행90-91: 입력값 표시 방식이 개선되었습니다.
undefined처리가 추가되어 초기 상태에서 "undefined" 텍스트가 표시되는 문제가 해결되었습니다- 한국식 가격 표시 형식이 적용되어 사용자 경험이 향상되었습니다
src/components/common/input/index.tsx (1)
46-46: 스타일링 로직이 개선되었습니다.
relative 클래스가 항상 적용되도록 수정되어 입력 필드의 위치 지정이 일관되게 동작합니다.
src/components/common/dropdown/index.tsx (1)
161-161: 드롭다운 아이템의 여백이 개선되었습니다.
수평 패딩(px-8)이 추가되어 드롭다운 아이템의 좌우 여백이 더 일관되고 보기 좋아졌습니다.
src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx (2)
173-173: 클래스 순서 변경이 적절합니다.
스타일 속성의 순서만 변경되었으며, 기능상의 변화는 없습니다.
Line range hint 1-183: 입력 오류 수정과 관련된 추가 컨텍스트가 필요합니다.
이 컴포넌트는 직접적인 입력 처리를 하지 않지만, PR의 주요 목적인 NaN 입력 오류 수정과 관련이 있을 수 있습니다. 전체적인 수정 사항이 어떻게 입력 오류 해결에 기여하는지 설명이 필요합니다.
✅ Verification successful
입력 오류 처리가 적절히 구현되어 있음을 확인했습니다.
이 컴포넌트는 Trade 컴포넌트를 통해 주문 수정 기능을 제공하며, OrderField 컴포넌트에서 NaN 검사를 포함한 적절한 입력 유효성 검사가 이루어지고 있습니다. 특히:
- 숫자 입력값에 대해 Number.isNaN() 검사
- 무한대 값 체크 (Number.isFinite())
- 0 이하 값 검사
- 콤마 처리 등 문자열 정제
따라서 PR의 입력 오류 수정 목적에 부합하는 안전한 구현이 확인되었습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 입력 처리 관련 컴포넌트 검색
# Input 관련 컴포넌트 검색
rg -l "handleInputChange|onChange.*input" --type ts --type tsx
# NaN 관련 로직 검색
rg "NaN|isNaN" --type ts --type tsx
Length of output: 158
Script:
#!/bin/bash
# Let's try without file type restrictions and focus on specific patterns
# Search for input handling patterns
rg -l "handleInputChange|onChange.*input"
# Search for NaN-related logic
rg "NaN|isNaN"
# Search for form-related components that might handle input
rg -l "form.*component|input.*validation"
Length of output: 337
Script:
#!/bin/bash
# Let's examine the order-field.tsx component that contains both input handling and NaN checks
# Show the content of order-field.tsx with context
rg -A 10 -B 10 "isNaN" src/app/search/[id]/_components/transaction-form/trade/order-field.tsx
# Check if this component is used in the edit-cancel component
rg -l "order-field|OrderField" src/app/search/[id]/_components/transaction-form/trade/index.tsx
Length of output: 685
Script:
#!/bin/bash
# Let's check the Trade component to understand how OrderField is used in the edit flow
# Show the Trade component content
cat src/app/search/[id]/_components/transaction-form/trade/index.tsx
# Check how EditCancel uses Trade component
rg -A 5 -B 5 "<Trade" src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx
Length of output: 7435
| isPending, | ||
| } = useQuery({ | ||
| queryKey: ["limitOrder"], | ||
| queryKey: ["limitOrder", `${stockName}`], |
There was a problem hiding this comment.
💡 Codebase verification
queryKey 변경이 안전하지 않습니다
limitOrder 쿼리키 사용을 분석한 결과, 다음과 같은 불일치가 발견되었습니다:
edit-cancel/index.tsx에서는["limitOrder", stockName]을 사용trade/index.tsx에서는["limitOrder"]만을 사용하여 invalidate 수행
이로 인해:
- 거래 완료/수정/취소 시 캐시 무효화가 제대로 동작하지 않을 수 있음
- 데이터 일관성 문제가 발생할 수 있음
다음 중 하나의 방식으로 수정이 필요합니다:
- 모든
invalidateQueries호출에stockName을 포함 - 또는
edit-cancel/index.tsx의queryKey에서stockName제거
🔗 Analysis chain
캐시 키 변경이 다른 컴포넌트에 영향을 주지 않는지 확인이 필요합니다.
stockName을 queryKey에 추가한 변경이 적절해 보이나, 다른 컴포넌트에서 이 캐시를 참조하는 부분이 있는지 확인이 필요합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 다른 컴포넌트에서 limitOrder queryKey 사용 여부 확인
# limitOrder queryKey 사용 검색
rg -l "queryKey.*limitOrder" --type ts --type tsx
Length of output: 79
Script:
#!/bin/bash
# Search for limitOrder queryKey usage with proper file extensions
rg -l "queryKey.*limitOrder" -t ts -t typescript -t jsx -t tsx
# Also search for any limitOrder related cache operations
rg -l "useQuery.*limitOrder|invalidateQueries.*limitOrder" -t ts -t typescript -t jsx -t tsx
Length of output: 229
Script:
#!/bin/bash
# Find all TypeScript/React files first
fd "\.(ts|tsx)$"
# Then search for limitOrder query usage in those files
fd "\.(ts|tsx)$" --exec rg -l "queryKey.*limitOrder|useQuery.*limitOrder|invalidateQueries.*limitOrder" {}
Length of output: 5027
Script:
#!/bin/bash
# Check the actual usage of limitOrder query in the found files
rg "queryKey.*limitOrder|useQuery.*limitOrder|invalidateQueries.*limitOrder" -A 2 -B 2 ./src/app/search/\[id\]/_components/transaction-form/edit-cancel/index.tsx ./src/app/search/\[id\]/_components/transaction-form/trade/index.tsx
Length of output: 2865
#️⃣ 이슈
📝 작업 내용
이번 PR에서 작업한 내용을 간략히 설명해주세요.
📸 스크린샷
✅ 체크 리스트
👩💻 공유 포인트 및 논의 사항
Summary by CodeRabbit
New Features
OrderField컴포넌트에서 입력 값 검증 로직이 추가되었습니다.Bug Fixes
TotalAmount컴포넌트에서 총 금액 표시의 최대 너비와 스크롤 속성이 개선되었습니다.Style
Chores