Feat/56: 체결내역 불러오기 #63
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (3)
src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx (1)
137-149: 빈 상태 처리가 잘 구현되었습니다만, 이미지 경로 처리를 개선해야 합니다.빈 상태 UI가 사용자 친화적으로 구현되었습니다. 하지만 이미지 경로가 하드코딩되어 있어 유지보수성이 떨어질 수 있습니다.
상수나 환경 변수로 이미지 경로를 관리하는 것을 고려해보세요:
-src="/images/green-wallet.png" +src={IMAGE_PATHS.GREEN_WALLET}src/app/search/[id]/_components/transaction-form/history.tsx (1)
20-38: 조건부 렌더링 개선 및 로딩/에러 상태 처리 필요현재 구현은 기본적인 조건부 렌더링만 수행하고 있습니다. 로딩 상태와 에러 상태를 포함한 더 완성도 높은 사용자 경험을 제공할 수 있습니다.
return ( <div className="flex h-470 flex-col gap-20 overflow-auto"> + {isLoading && <div>거래 내역을 불러오는 중입니다...</div>} + {error && <div>거래 내역을 불러오는데 실패했습니다. 다시 시도해 주세요.</div>} {tradeHistoryData && tradeHistoryData?.length > 0 ? ( tradeHistoryData.map((history) => ( <TransactionTable - key={history.OrderId} + key={`${history.OrderId}-${history.stockName}`} color="green" isSubmit={false} submittedData={{src/api/transaction/index.ts (1)
Line range hint
1-284: API 응답 처리의 일관성 개선 필요파일 전체적으로 API 응답 처리 방식이 일관적이지 않습니다. 일부는
text()를 사용하고 일부는json()을 사용합니다. 또한 에러 처리 방식도 통일이 필요합니다.다음 사항들을 고려해주세요:
- 응답 형식의 일관성 유지 (JSON 권장)
- 에러 처리 패턴 통일
- HTTP 상태 코드에 따른 구체적인 에러 메시지 제공
- 타입 안전성 강화를 위한 응답 데이터 검증 로직 추가
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
public/images/green-wallet.pngis excluded by!**/*.png
📒 Files selected for processing (5)
src/api/transaction/index.ts(2 hunks)src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx(3 hunks)src/app/search/[id]/_components/transaction-form/history.tsx(1 hunks)src/app/search/[id]/_components/transaction-form/trade/index.tsx(1 hunks)src/app/search/[id]/_components/transaction-form/transaction-table.tsx(3 hunks)
🔇 Additional comments (5)
src/app/search/[id]/_components/transaction-form/transaction-table.tsx (2)
13-13: 인터페이스 타입 정의가 명확합니다!
옵셔널 프로퍼티로 정의하여 하위 호환성을 잘 유지하고 있습니다.
58-58: 동적 테이블 헤더 구현이 개선되었습니다.
매수/매도 구분을 동적으로 표시하여 사용자 경험이 향상되었습니다.
Also applies to: 71-71
src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx (2)
107-107: 거래 타입 정보가 올바르게 전달됩니다.
order.type을 통해 매수/매도 구분을 명확하게 전달하고 있습니다.
124-124: 높이 변경이 레이아웃에 영향을 줄 수 있습니다.
h-430에서 h-400으로의 변경이 다른 컴포넌트나 반응형 레이아웃에 영향을 줄 수 있습니다.
✅ Verification successful
높이 변경이 제한적인 영향만을 미칩니다.
검색 결과를 보면 높이 클래스(h-4XX)는 두 곳에서만 사용되고 있습니다:
history.tsx에서h-470클래스 사용edit-cancel/index.tsx에서h-400클래스 사용
두 컴포넌트는 서로 독립적으로 렌더링되며, 하나의 높이 변경이 다른 컴포넌트에 직접적인 영향을 주지 않습니다. 또한 overflow-scroll과 overflow-auto 속성이 각각 적용되어 있어 내용이 넘칠 경우 스크롤이 생성됩니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 변경된 높이가 다른 컴포넌트에 영향을 주는지 확인
# 높이 관련 스타일이 사용된 파일 검색
rg "h-4[0-9]0" --type tsx
Length of output: 55
Script:
#!/bin/bash
# Description: 높이 관련 스타일이 사용된 파일 검색 (확장자 수정)
# 모든 TypeScript/React 파일에서 높이 관련 클래스 검색
rg "h-4[0-9]0" --type ts --type tsx
# 파일 확장자로 직접 검색
rg "h-4[0-9]0" -g "*.tsx" -g "*.ts"
# 특정 파일의 전체 내용 확인
cat "src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx"
Length of output: 5256
src/app/search/[id]/_components/transaction-form/trade/index.tsx (1)
187-187: 거래 유형에 따른 조건부 처리가 명확합니다.
type 프로퍼티를 기반으로 매수/매도를 구분하는 로직이 간단하고 이해하기 쉽게 구현되었습니다.
| const { data: tradeHistoryData } = useQuery({ | ||
| queryKey: ["tradeHistory"], | ||
| queryFn: () => getTradeHistory(token, stockName), | ||
| enabled: !!isAuthenticated && !!token, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
useQuery 구현에 에러 처리와 로딩 상태 추가 필요
데이터 페칭 중 발생할 수 있는 에러 상태와 로딩 상태를 처리하지 않고 있습니다. 사용자 경험 향상을 위해 이러한 상태들을 처리하는 것이 좋습니다.
- const { data: tradeHistoryData } = useQuery({
+ const { data: tradeHistoryData, isLoading, error } = useQuery({
queryKey: ["tradeHistory"],
queryFn: () => getTradeHistory(token, stockName),
enabled: !!isAuthenticated && !!token,
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { data: tradeHistoryData } = useQuery({ | |
| queryKey: ["tradeHistory"], | |
| queryFn: () => getTradeHistory(token, stockName), | |
| enabled: !!isAuthenticated && !!token, | |
| }); | |
| const { data: tradeHistoryData, isLoading, error } = useQuery({ | |
| queryKey: ["tradeHistory"], | |
| queryFn: () => getTradeHistory(token, stockName), | |
| enabled: !!isAuthenticated && !!token, | |
| }); |
| if (token === null) { | ||
| throw new Error(); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
에러 메시지 구체화 필요
현재 구현된 에러 처리는 구체적인 에러 메시지를 제공하지 않아 디버깅이 어려울 수 있습니다.
if (token === null) {
- throw new Error();
+ throw new Error('인증 토큰이 필요합니다.');
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (token === null) { | |
| throw new Error(); | |
| } | |
| if (token === null) { | |
| throw new Error('인증 토큰이 필요합니다.'); | |
| } |
| // 매수/매도 체결내역 | ||
| export async function getTradeHistory( | ||
| token: string | null, | ||
| stockName: string, | ||
| ): Promise<OrderHistory[]> { | ||
| if (token === null) { | ||
| throw new Error(); | ||
| } | ||
|
|
||
| const response = await fetch( | ||
| `${process.env.NEXT_PUBLIC_API_URL}/api/account/accounts/save/${stockName}`, | ||
| { | ||
| headers: { | ||
| Authorization: `Bearer ${token}`, | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| if (!response.ok) { | ||
| throw new Error("Failed to fetch stocks"); | ||
| } | ||
|
|
||
| return response.json(); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
getTradeHistory 함수의 에러 처리 및 타입 안전성 개선 필요
새로 추가된 getTradeHistory 함수에서 에러 처리가 미흡하며, 타입 안전성을 개선할 수 있습니다.
export async function getTradeHistory(
token: string | null,
stockName: string,
): Promise<OrderHistory[]> {
if (token === null) {
- throw new Error();
+ throw new Error('거래 내역 조회를 위한 인증 토큰이 필요합니다.');
}
+ if (!stockName) {
+ throw new Error('종목명이 필요합니다.');
+ }
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/account/accounts/save/${stockName}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
},
);
if (!response.ok) {
- throw new Error("Failed to fetch stocks");
+ throw new Error(`거래 내역 조회 실패: ${response.status} ${response.statusText}`);
}
- return response.json();
+ const data = await response.json();
+ if (!Array.isArray(data)) {
+ throw new Error('잘못된 응답 형식입니다.');
+ }
+ return data;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // 매수/매도 체결내역 | |
| export async function getTradeHistory( | |
| token: string | null, | |
| stockName: string, | |
| ): Promise<OrderHistory[]> { | |
| if (token === null) { | |
| throw new Error(); | |
| } | |
| const response = await fetch( | |
| `${process.env.NEXT_PUBLIC_API_URL}/api/account/accounts/save/${stockName}`, | |
| { | |
| headers: { | |
| Authorization: `Bearer ${token}`, | |
| }, | |
| }, | |
| ); | |
| if (!response.ok) { | |
| throw new Error("Failed to fetch stocks"); | |
| } | |
| return response.json(); | |
| } | |
| // 매수/매도 체결내역 | |
| export async function getTradeHistory( | |
| token: string | null, | |
| stockName: string, | |
| ): Promise<OrderHistory[]> { | |
| if (token === null) { | |
| throw new Error('거래 내역 조회를 위한 인증 토큰이 필요합니다.'); | |
| } | |
| if (!stockName) { | |
| throw new Error('종목명이 필요합니다.'); | |
| } | |
| const response = await fetch( | |
| `${process.env.NEXT_PUBLIC_API_URL}/api/account/accounts/save/${stockName}`, | |
| { | |
| headers: { | |
| Authorization: `Bearer ${token}`, | |
| }, | |
| }, | |
| ); | |
| if (!response.ok) { | |
| throw new Error(`거래 내역 조회 실패: ${response.status} ${response.statusText}`); | |
| } | |
| const data = await response.json(); | |
| if (!Array.isArray(data)) { | |
| throw new Error('잘못된 응답 형식입니다.'); | |
| } | |
| return data; | |
| } |
#️⃣ 이슈
📝 작업 내용
이번 PR에서 작업한 내용을 간략히 설명해주세요.
📸 스크린샷
✅ 체크 리스트
👩💻 공유 포인트 및 논의 사항
Summary by CodeRabbit
New Features
Bug Fixes
Style