Skip to content

Fix/69: input 에러 해결 #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cindycho0423 merged 1 commit into from
Dec 9, 2024
+40 −14
Merged

Fix/69: input 에러 해결 #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function EditCancel() {
isLoading,
isPending,
} = useQuery({
queryKey: ["limitOrder"],
queryKey: ["limitOrder", `${stockName}`],
Copy link

@coderabbitai coderabbitai bot Dec 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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

queryFn: () => getTrade(token, stockName),
enabled: !!isAuthenticated && !!token,
});
Expand Down Expand Up @@ -170,7 +170,7 @@ export default function EditCancel() {
<div className="mt-20 text-center">
<Button
variant="red"
className="mr-10 w-120 text-black bg-[#0FED78] hover:bg-[#0FED78]/95"
className="mr-10 w-120 bg-[#0FED78] text-black hover:bg-[#0FED78]/95"
onClick={handleEdit}
>
정정
Expand Down
43 changes: 35 additions & 8 deletions src/app/search/[id]/_components/transaction-form/trade/order-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,39 @@ export default function OrderField({
quantity,
}: OrderFieldProps) {
const { stockInfo } = useStockInfoContext();
const numberRegex = /^[0-9,]*$/;

const handleInputChange = (
value: string,
field: {
onChange: (value: number | undefined) => void;
value: number | undefined;
},
) => {
if (value === "") {
field.onChange(undefined);
return;
}

if (!numberRegex.test(value)) {
return;
}

const cleanValue = value.replace(/,/g, "");

if (cleanValue === "") {
field.onChange(undefined);
return;
}

const numValue = Number(cleanValue);

if (Number.isNaN(numValue) || !Number.isFinite(numValue) || numValue <= 0) {
return;
}

field.onChange(numValue);
};

return (
<div className="relative flex justify-between gap-6">
Expand All @@ -54,14 +87,8 @@ export default function OrderField({
isForm
placeholder={placeholder}
inputSuffix={inputSuffix}
value={
field.value ? getKoreanPrice(field.value) : (field.value ?? "")
}
onChange={(e) =>
field.onChange(
e.target.value === "" ? undefined : Number(e.target.value),
)
}
value={field.value !== undefined ? getKoreanPrice(field.value) : ""}
onChange={(e) => handleInputChange(e.target.value, field)}
error={errors?.message}
/>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/app/search/[id]/_components/transaction-form/trade/total-amount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function TotalAmount({ count, bidding }: TotalAmountProps) {
<>
<div className="flex items-center gap-14">
<div>총 주문 금액</div>
<div className="flex-1 rounded-8 bg-[#F5F6F8] p-8 text-right">
<div className="max-w-167 flex-1 overflow-scroll rounded-8 bg-[#F5F6F8] p-8 text-right">
{totalAmount}원
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ function Item({ children, value, className }: ItemProps): JSX.Element {
<button
type="button"
className={cn(
"transition-linear text-black/80 rounded-2 relative w-full py-10 text-left hover:bg-gray-100 focus:bg-green-700/5 focus:!text-green-900",
"transition-linear text-black/80 rounded-2 relative w-full py-10 px-8 text-left hover:bg-gray-100 focus:bg-green-700/5 focus:!text-green-900",
{
"bg-green-500/10 !text-green-900": isSelected,
},
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/input/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
};

return (
<div className={cn(!isForm && "relative w-full")}>
<div className={cn("relative", !isForm && "relative w-full")}>
<input
className={cn(
isForm
Expand Down
1 change: 0 additions & 1 deletion src/utils/price.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ export const getKoreanPrice = (price: string | number | null): string => {

return new Intl.NumberFormat("ko-KR").format(Number(price));
};

export const calculateTotalOrderAmount = (
count: number | null,
bidding: number | null,
Expand Down
Loading