refactor: 코드 분리 및 파일명 변경 #81
Conversation
Walkthrough이번 변경 사항은 주식 거래 관련 컴포넌트의 리팩토링 및 새로운 기능 추가를 포함합니다. Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command 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: 15
🧹 Outside diff range and nitpick comments (19)
src/app/search/[id]/types/index.ts (1)
34-43: [Enum 값의 문자열 언어 일관성 유지 필요]
TradeTypeenum은 영어 문자열("buy","sell","edit")을 값으로 사용하고 있고,PriceTypeenum은 한글 문자열("현재가","지정가")을 값으로 사용하고 있습니다. Enum의 값으로 사용하는 문자열의 언어를 통일하여 일관성을 유지하는 것이 좋습니다. 예를 들어, 모두 영어로 하거나 모두 한글로 통일하는 것을 고려해보세요.src/app/search/[id]/hooks/use-limit-order-data.ts (1)
11-15: 쿼리 에러 처리 추가 권장쿼리 실패 시 사용자에게 적절한 피드백을 제공하기 위해 에러 처리를 추가하는 것이 좋습니다.
const queryResult = useQuery({ queryKey: ["limitOrder", stockName], queryFn: () => getTrade(token, stockName), enabled: !!isAuthenticated && !!token, + retry: 1, + onError: (error) => { + console.error('주문 데이터 조회 실패:', error); + } });src/app/search/[id]/_components/order-stock/login-notice.tsx (1)
20-25: 접근성 및 사용자 경험 개선 필요로그인 링크에 대한 접근성 및 사용자 경험을 개선할 수 있습니다.
<Link href="/login" - className="m-auto mt-40 block w-150 rounded-4 bg-lime-500 py-16 text-center text-16-700" + className="m-auto mt-40 block w-150 rounded-4 bg-lime-500 py-16 text-center text-16-700 hover:bg-lime-600 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2" + role="button" + aria-label="로그인 페이지로 이동" >src/app/search/[id]/hooks/use-limit-order-mutations.ts (1)
6-8: 의존성 주입 고려
showToast와queryClient를 외부에서 주입받는 것을 고려해보세요. 이는 테스트 용이성과 유연성을 향상시킬 수 있습니다.-export default function useOrderMutations() { +export default function useOrderMutations({ + onSuccess, + onError, + showToast, + queryClient +}: { + onSuccess?: () => void; + onError?: (error: Error) => void; + showToast: (message: string, type: string) => void; + queryClient: QueryClient; +}) { - const { showToast } = useToast(); - const queryClient = useQueryClient();src/app/search/[id]/_components/order-stock/buy-and-sell/price-type-dropdown.tsx (1)
3-3: 타입 안전성이 개선되었습니다.문자열 리터럴에서
TradeType과PriceTypeenum으로 변경한 것은 좋은 개선사항입니다. 하지만 더 나은 타입 안전성을 위해 다음과 같은 개선을 고려해보세요.// Dropdown 컴포넌트의 제네릭 타입 활용 interface DropdownProps<T> { selectedValue: T; onSelect: (value: T) => void; // ... }Also applies to: 6-8
src/app/search/[id]/_components/order-stock/buy-and-sell/form-buttons.tsx (2)
19-24: 매직 넘버를 상수로 분리하는 것이 좋습니다.
top-90와top-110와 같은 매직 넘버는 유지보수를 어렵게 만들 수 있습니다. 이러한 값들을 의미 있는 상수로 분리하는 것이 좋습니다.const POSITION_VALUES = { DEFAULT: 'top-90', EDIT: 'top-110', } as const; // 사용 className={cn( `relative ${POSITION_VALUES.DEFAULT} w-300`, orderType === TradeType.Edit && POSITION_VALUES.EDIT, )}
31-35: 스타일 로직을 분리하는 것이 좋습니다.버튼 스타일 조건부 로직이 복잡해 보입니다. 별도의 유틸리티 함수로 분리하면 가독성이 향상될 것 같습니다.
const getButtonStyle = (orderType: TradeType) => { const styles = { [TradeType.Buy]: "bg-red-500 hover:bg-red-500/80", [TradeType.Sell]: "bg-blue-500 hover:bg-blue-500/80", [TradeType.Edit]: "bg-green-500 hover:bg-green-500/80", }; return `ml-7 w-160 ${styles[orderType]}`; };src/app/search/[id]/_components/order-stock/edit-cancel/edit-table-row.tsx (1)
Line range hint
12-42: 컴포넌트 이름 변경이 적절합니다.
EditTableBody에서EditTableRow로의 이름 변경은 컴포넌트의 역할을 더 정확하게 표현합니다. 다만, props 인터페이스 이름도 함께 업데이트하는 것이 좋겠습니다.// EditTableBodyProps를 EditTableRowProps로 변경 interface EditTableRowProps { data: LimitPriceOrderHistory; isChecked: boolean; toggleSelection: (orderId: string) => void; }src/app/search/[id]/_components/order-stock/buy-and-sell/number-dropdown.tsx (1)
7-21: 컴포넌트 문서화를 추가하면 좋을 것 같습니다.컴포넌트의 이름이
CountDropdown에서NumberDropdown으로 변경된 것은 좋은 개선입니다. 하지만 다음 사항들을 추가하면 더욱 좋을 것 같습니다:
- 컴포넌트의 목적과 사용 사례에 대한 JSDoc 문서화
- 제네릭 타입
T의 제약 조건에 대한 설명- 각 props의 역할에 대한 설명
예시:
+/** + * 숫자 선택을 위한 드롭다운 컴포넌트 + * @template T - string 또는 number 타입의 값 + */ interface NumberDropdownProps<T> { + /** 현재 선택된 값 */ state: T; + /** 값 변경 핸들러 */ setState: Dispatch<SetStateAction<T>>; // ... 나머지 props에 대한 설명도 추가 }src/app/search/[id]/hooks/use-trade-mutations.ts (2)
27-30: 에러 처리를 더 구체적으로 개선하면 좋을 것 같습니다.현재 에러 처리가 모든 종류의 에러에 대해 동일한 방식으로 이루어지고 있습니다. 다음과 같은 개선사항을 고려해보세요:
- 에러 타입별 구체적인 처리
- 사용자 친화적인 에러 메시지 제공
- 네트워크 오류와 비즈니스 로직 오류의 구분
예시:
onError: (error: Error) => { if (error instanceof NetworkError) { showToast("네트워크 연결을 확인해주세요", "error"); } else if (error instanceof ValidationError) { showToast("입력값을 확인해주세요", "error"); } else { showToast("거래 처리 중 오류가 발생했습니다", "error"); } console.error(error); }
35-39: 메시지의 국제화(i18n) 적용을 고려해보세요.성공 메시지가 한국어로 하드코딩되어 있습니다. 다국어 지원을 위해 다음과 같은 개선을 제안드립니다:
- 메시지를 별도의 리소스 파일로 분리
- i18n 라이브러리 활용 (예: react-i18next)
- 메시지 키 기반의 관리 시스템 도입
예시:
createMutationConfig( t('trade.success.market_buy'), "history", "tradeHistory", )Also applies to: 43-47, 51-55, 59-63
src/app/search/[id]/_components/order-stock/buy-and-sell/input-field.tsx (1)
Line range hint
15-25: 타입 정의 개선 제안
type속성의 리터럴 타입을 별도의 enum으로 분리하는 것을 고려해보세요:enum InputFieldType { Count = "count", Bidding = "bidding" }이렇게 하면 타입 안전성이 향상되고 향후 확장이 용이해집니다.
src/app/search/[id]/_components/order-stock/index.tsx (2)
28-34: 인증 상태 처리 로직 개선 제안초기화 상태 체크 로직을 별도의 커스텀 훅으로 분리하는 것을 고려해보세요:
function useAuthInitialization() { const { isAuthenticated, isInitialized } = useAuth(); return { isLoading: !isInitialized, isAuthenticated }; }이렇게 하면 재사용성이 향상되고 로직이 더 명확해집니다.
71-72: 주석 스타일 개선 제안인라인 한글 주석보다는 JSDoc 스타일의 주석을 사용하는 것이 좋습니다:
- // 로그인 안되어있으면 로그인 유도 + /** 비인증 사용자에 대한 로그인 유도 화면 표시 */src/app/search/[id]/_components/order-stock/edit-cancel/edit-table.tsx (2)
50-53: 배열 정렬 최적화 필요매 렌더링마다 배열을 정렬하는 것은 성능에 영향을 줄 수 있습니다.
useMemo를 사용하여limitPriceHistory가 변경될 때만 정렬하도록 최적화하는 것이 좋습니다.- {limitPriceHistory && limitPriceHistory.length > 0 ? ( - [...limitPriceHistory] - .sort((a, b) => b.OrderId - a.OrderId) - .map((data) => ( + {limitPriceHistory && limitPriceHistory.length > 0 ? ( + useMemo( + () => + [...limitPriceHistory] + .sort((a, b) => b.OrderId - a.OrderId) + .map((data) => ( + <EditTableRow + key={data.OrderId} + data={data} + isChecked={selectedOrders.includes(data.OrderId.toString())} + toggleSelection={toggleOrderSelection} + /> + )), + [limitPriceHistory, selectedOrders] + )
38-47: 테이블 접근성 개선 필요스크린 리더 사용자를 위해 테이블 헤더에 적절한 ARIA 레이블을 추가하는 것이 좋습니다.
- <tr className="h-48 border-y border-solid text-gray-300"> + <tr className="h-48 border-y border-solid text-gray-300" role="row"> {titles.map((title, index) => ( <th key={`title-${index}`} + role="columnheader" + aria-label={typeof title === 'string' ? title : '선택'} > {title} </th> ))} </tr>src/app/search/[id]/page.tsx (1)
Line range hint
11-24: API 응답 검증 및 에러 처리 개선 필요API 응답의 구조와 데이터 유효성을 더 세밀하게 검증하고, 각 API 호출에 대한 구체적인 에러 메시지를 제공하는 것이 좋습니다.
const [chartResponse, volumeResponse, stockResponse] = await Promise.all([ fetch( `${process.env.NEXT_PUBLIC_API_URL}/search/chart/day?stockName=${id}`, { cache: "no-store", headers: { "Content-Type": "application/json" }, }, ), // ... other fetch calls ]); - if (!chartResponse.ok || !volumeResponse.ok || !stockResponse.ok) { - throw new Error(`HTTP error! status: ${chartResponse.status}`); - } + if (!chartResponse.ok) { + throw new Error(`차트 데이터 조회 실패: ${chartResponse.status}`); + } + if (!volumeResponse.ok) { + throw new Error(`거래량 데이터 조회 실패: ${volumeResponse.status}`); + } + if (!stockResponse.ok) { + throw new Error(`주식 정보 조회 실패: ${stockResponse.status}`); + }src/app/search/[id]/_components/order-stock/edit-cancel/index.tsx (1)
17-31: 컴포넌트 책임 분리 검토가 필요합니다.현재 컴포넌트가 상태 관리, 주문 수정, 취소 등 여러 책임을 담당하고 있습니다. 다음과 같이 분리하는 것을 고려해보세요:
- OrderSelection: 주문 선택 로직
- OrderModification: 수정 관련 로직
- OrderCancellation: 취소 관련 로직
이렇게 분리하면 코드의 유지보수성과 테스트 용이성이 향상될 것입니다.
tailwind.config.ts (1)
23-60: 색상 시스템이 체계적으로 구성되었습니다만, 의미론적 네이밍 검토가 필요합니다.현재 색상 시스템이 잘 구조화되어 있으나, 다음 개선사항을 고려해보세요:
- 의미론적 변수 추가:
colors: { + semantic: { + primary: 'var(--color-primary)', + success: 'var(--color-success)', + error: 'var(--color-error)', + warning: 'var(--color-warning)', + }, red: { // ... existing colors },
- 색상 사용 가이드 문서화 필요:
- 각 색상의 용도
- 접근성 고려사항
- 다크모드 대응 방안
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (32)
src/app/search/[id]/_components/order-stock/buy-and-sell/buyable-quantity.tsx(2 hunks)src/app/search/[id]/_components/order-stock/buy-and-sell/current-price.tsx(1 hunks)src/app/search/[id]/_components/order-stock/buy-and-sell/form-buttons.tsx(1 hunks)src/app/search/[id]/_components/order-stock/buy-and-sell/index.tsx(1 hunks)src/app/search/[id]/_components/order-stock/buy-and-sell/input-field.tsx(4 hunks)src/app/search/[id]/_components/order-stock/buy-and-sell/number-dropdown.tsx(2 hunks)src/app/search/[id]/_components/order-stock/buy-and-sell/price-type-dropdown.tsx(2 hunks)src/app/search/[id]/_components/order-stock/buy-and-sell/total-amount.tsx(1 hunks)src/app/search/[id]/_components/order-stock/edit-cancel/edit-table-row.tsx(2 hunks)src/app/search/[id]/_components/order-stock/edit-cancel/edit-table.tsx(1 hunks)src/app/search/[id]/_components/order-stock/edit-cancel/index.tsx(1 hunks)src/app/search/[id]/_components/order-stock/index.tsx(1 hunks)src/app/search/[id]/_components/order-stock/layout.tsx(1 hunks)src/app/search/[id]/_components/order-stock/login-notice.tsx(1 hunks)src/app/search/[id]/_components/order-stock/order-history/index.tsx(2 hunks)src/app/search/[id]/_components/order-stock/trade-table.tsx(1 hunks)src/app/search/[id]/_components/transaction-form/edit-cancel/edit-table-header.tsx(0 hunks)src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx(0 hunks)src/app/search/[id]/_components/transaction-form/index.tsx(0 hunks)src/app/search/[id]/_components/transaction-form/trade/bidding.tsx(0 hunks)src/app/search/[id]/_components/transaction-form/trade/buy-form-buttons.tsx(0 hunks)src/app/search/[id]/_components/transaction-form/trade/index.tsx(0 hunks)src/app/search/[id]/_components/transaction-form/transaction-table.tsx(0 hunks)src/app/search/[id]/hooks/use-limit-order-data.ts(1 hunks)src/app/search/[id]/hooks/use-limit-order-mutations.ts(1 hunks)src/app/search/[id]/hooks/use-trade-mutations.ts(1 hunks)src/app/search/[id]/page.tsx(2 hunks)src/app/search/[id]/types/index.ts(1 hunks)src/components/common/dropdown/index.tsx(1 hunks)src/components/common/tabs/index.tsx(1 hunks)src/constants/trade.ts(1 hunks)tailwind.config.ts(1 hunks)
💤 Files with no reviewable changes (7)
- src/app/search/[id]/_components/transaction-form/edit-cancel/edit-table-header.tsx
- src/app/search/[id]/_components/transaction-form/edit-cancel/index.tsx
- src/app/search/[id]/_components/transaction-form/trade/buy-form-buttons.tsx
- src/app/search/[id]/_components/transaction-form/index.tsx
- src/app/search/[id]/_components/transaction-form/transaction-table.tsx
- src/app/search/[id]/_components/transaction-form/trade/bidding.tsx
- src/app/search/[id]/_components/transaction-form/trade/index.tsx
✅ Files skipped from review due to trivial changes (3)
- src/app/search/[id]/_components/order-stock/buy-and-sell/current-price.tsx
- src/app/search/[id]/_components/order-stock/buy-and-sell/total-amount.tsx
- src/components/common/dropdown/index.tsx
🔇 Additional comments (10)
src/app/search/[id]/_components/order-stock/buy-and-sell/index.tsx (2)
174-174: [하드코딩된 'quantity' 값 확인 필요]
InputField 컴포넌트에 quantity={10}으로 하드코딩된 값이 전달되고 있습니다. 이 값이 의도된 것인지, 아니면 동적 값이나 상수를 사용해야 하는지 확인이 필요합니다.
127-127: [defaultData가 없는 경우 'orderId'가 undefined가 될 수 있음]
TradeType.Edit의 경우, defaultData가 제공되지 않으면 orderId가 undefined가 될 수 있습니다. 이는 의도된 동작인지 확인하고, 필요하다면 defaultData의 존재 여부를 검사하여 에러를 처리해야 합니다.
src/constants/trade.ts (1)
1-13: [컬러 및 텍스트 매핑 확인]
colorMap과 textMap이 TradeType과 적절하게 매핑되어 있습니다. 컬러 선택이 의도한 대로 설정되었는지 확인해주세요. 한국 주식 시장의 관례에 따라 '매수'는 빨간색, '매도'는 파란색으로 표현됩니다.
src/app/search/[id]/_components/order-stock/buy-and-sell/buyable-quantity.tsx (2)
9-12: 타입 안전성이 향상된 변경 사항입니다!
문자열 리터럴에서 TradeType enum으로의 변경은 타입 안전성을 크게 향상시킵니다. 이는 컴파일 시점에서 오류를 잡을 수 있게 해주며, 코드의 유지보수성을 높여줍니다.
32-38: 조건부 렌더링이 깔끔하게 개선되었습니다!
TradeType enum을 사용한 조건부 렌더링이 매우 명확하고 이해하기 쉽게 구현되었습니다. 특히 매수/매도 로직의 분기처리가 잘 되어있습니다.
src/app/search/[id]/_components/order-stock/order-history/index.tsx (2)
8-9: 경로 및 컴포넌트 이름 업데이트 검토 필요
상위 디렉토리로 이동된 LoadingSpinner 경로와 TransactionTable에서 TradeTable로의 변경이 다른 파일들과 일관성이 있는지 확인이 필요합니다.
✅ Verification successful
Based on the search results, I can now generate the final response as the verification is complete. The results show:
TradeTableis consistently used across multiple components in the order-stock directory, with no instances ofTransactionTableLoadingSpinnerimports are consistent with the component's location atloading-spiner.tsxin the_componentsdirectory
경로 변경 및 컴포넌트 이름이 일관성 있게 적용되었습니다
코드베이스 전체에서 TradeTable 컴포넌트가 일관되게 사용되고 있으며, LoadingSpinner 컴포넌트의 경로도 올바르게 참조되고 있습니다. 변경사항이 적절하게 반영되었습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify component naming consistency and imports
rg -g '*.tsx' -g '*.ts' "TransactionTable|TradeTable"
rg -g '*.tsx' -g '*.ts' "LoadingSpinner"
Length of output: 1990
Line range hint 35-46: TradeTable 컴포넌트 사용 검증 필요
TradeTable 컴포넌트로의 마이그레이션이 올바르게 이루어졌는지 확인이 필요합니다:
- color prop이 "red"/"blue" 값을 올바르게 처리하는지
- submittedData 객체의 구조가 새로운 컴포넌트와 호환되는지
✅ Verification successful
TradeTable 컴포넌트 검증 완료
TradeTable 컴포넌트의 구현을 확인한 결과:
- color prop이 "red"/"blue" 값을 올바르게 처리합니다. COLOR_VARIANTS 객체에 두 색상이 모두 정의되어 있으며, 배경색과 버튼 스타일이 적절히 적용됩니다.
- submittedData 객체의 구조가 TradeTableProps 인터페이스와 정확히 일치합니다:
- stockName (종목명)
- count (수량)
- bidding (가격)
- totalAmount (총액)
- buyOrder (매수/매도)
현재 구현된 마이그레이션이 정상적으로 이루어졌습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify TradeTable component implementation
ast-grep --pattern 'interface $interface {
$$$
color: $_
$$$
}'
Length of output: 71
Script:
#!/bin/bash
# Search for TradeTable component implementation and its props
ast-grep --pattern 'const TradeTable = ({ $$ }: { $$ }) => {
$$$
}'
# Search for TradeTable type definitions
rg -g '*.ts*' -A 5 'interface.*TradeTable'
# Search for color prop usage in TradeTable
rg -g '*.ts*' 'color.*=.*("red"|"blue")'
Length of output: 956
Script:
#!/bin/bash
# Check COLOR_VARIANTS definition and usage
rg -g '*.ts*' 'COLOR_VARIANTS'
# Check full TradeTable implementation
cat src/app/search/[id]/_components/order-stock/trade-table.tsx
Length of output: 3203
src/app/search/[id]/_components/order-stock/buy-and-sell/input-field.tsx (1)
Line range hint 75-82: NumberDropdown 컴포넌트 통합 검증 필요
NumberDropdown 컴포넌트의 props 전달이 올바른지 확인이 필요합니다:
type === "count"와type === "bidding"조건부 렌더링- setState 콜백에서의 타입 변환 처리
✅ Verification successful
NumberDropdown 컴포넌트 구현과 사용이 적절함을 확인했습니다
코드베이스 분석 결과, NumberDropdown 컴포넌트의 구현과 사용이 모두 적절합니다:
- 제네릭 타입을 사용하여
string | number타입을 올바르게 처리 type === "count"와type === "bidding"조건부 props 전달이 타입에 맞게 구현됨- setState 콜백에서의 타입 변환이 안전하게 처리됨
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify NumberDropdown implementation and usage
ast-grep --pattern 'function NumberDropdown({ $$ }: { $$ }) {
$$$
}'
Length of output: 72
Script:
#!/bin/bash
# Let's try to find the NumberDropdown component definition first
fd "NumberDropdown" --type f
# Then let's look for its usage patterns
rg "NumberDropdown" -A 5 -B 5
Length of output: 5475
src/app/search/[id]/_components/order-stock/index.tsx (1)
56-61:
TradeType enum 사용 일관성 검증 필요
TabsContent의 value prop과 BuyAndSell의 type prop에서 TradeType enum 사용이 일관되지 않습니다:
- 56행:
value={TradeType.Buy} - 57행:
type={TradeType.Buy}
하지만 53-54행의 다른 탭들은 문자열을 직접 사용하고 있습니다. 모든 탭 값에 대해 enum을 일관되게 사용하도록 수정이 필요합니다.
- <TabsTrigger value="history">체결내역</TabsTrigger>
- <TabsTrigger value="edit-cancel">정정 / 취소</TabsTrigger>
+ <TabsTrigger value={TradeType.History}>체결내역</TabsTrigger>
+ <TabsTrigger value={TradeType.EditCancel}>정정 / 취소</TabsTrigger>Likely invalid or redundant comment.
src/components/common/tabs/index.tsx (1)
93-95: 배경색 정의가 Tailwind 클래스로 개선되었습니다.
hex 코드에서 Tailwind 클래스로의 전환은 디자인 시스템의 일관성을 향상시킵니다. 이는 tailwind.config.ts에 정의된 새로운 색상 시스템과 잘 통합됩니다.
| {type !== "edit" && ( | ||
| <BuyableQuantity bidding={watchedBidding} type={type} /> | ||
| )} |
There was a problem hiding this comment.
[타입 비교 시 Enum을 사용하도록 수정 필요]
TradeType은 Enum으로 정의되어 있으므로, 문자열 리터럴 대신 Enum 값을 사용하여 비교하는 것이 좋습니다. 현재 코드에서는 type !== "edit"로 비교하고 있는데, 이는 type !== TradeType.Edit로 수정하는 것이 바람직합니다.
수정 제안:
- {type !== "edit" && (
+ {type !== TradeType.Edit && (📝 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.
| {type !== "edit" && ( | |
| <BuyableQuantity bidding={watchedBidding} type={type} /> | |
| )} | |
| {type !== TradeType.Edit && ( | |
| <BuyableQuantity bidding={watchedBidding} type={type} /> | |
| )} |
| if (type !== TradeType.Edit || !handleMutate) return; | ||
| handleMutate({ | ||
| token, | ||
| orderId: defaultData?.OrderId, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
[속성 명명 규칙 일관성 유지 필요]
TypeScript의 명명 규칙을 따르기 위해, defaultData?.OrderId의 OrderId를 소문자 카멜케이스인 orderId로 변경하는 것이 좋습니다.
수정 제안:
- orderId: defaultData?.OrderId,
+ orderId: defaultData?.orderId,또한, 관련된 인터페이스나 타입 정의에서도 속성 이름을 일관성 있게 변경해야 합니다.
Committable suggestion skipped: line range outside the PR's diff.
| }) { | ||
| return ( | ||
| <div className="ml-17 h-630 min-w-450 rounded-10 bg-white px-22 py-30"> | ||
| <h3 className="mb-25 text-20-700">거래하기</h3> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
[Tailwind CSS 클래스의 잘못된 사용]
className에 사용된 text-20-700 클래스는 Tailwind CSS의 기본 클래스가 아닙니다. 글자 크기와 굵기를 지정하려면 text-[크기] 및 font-[굵기]를 사용하거나, 임의의 값을 사용할 경우 대괄호 표기법을 이용해야 합니다.
수정 제안:
- <h3 className="mb-25 text-20-700">거래하기</h3>
+ <h3 className="mb-[25px] text-[20px] font-[700]">거래하기</h3>📝 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.
| <h3 className="mb-25 text-20-700">거래하기</h3> | |
| <h3 className="mb-[25px] text-[20px] font-[700]">거래하기</h3> |
| <div className="ml-17 h-630 min-w-450 rounded-10 bg-white px-22 py-30"> | ||
| <h3 className="mb-25 text-20-700">거래하기</h3> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
[Tailwind CSS 클래스의 임의 값 사용 개선 필요]
className에 사용된 Tailwind CSS 클래스 중 ml-17, h-630, min-w-450 등은 Tailwind CSS의 기본 클래스가 아닙니다. 임의의 값을 사용하려면 대괄호 표기법을 사용하여 [ml:17px]와 같이 작성하거나 Tailwind 설정을 확장하여 커스텀 값을 정의하는 것이 좋습니다.
수정 제안:
- <div className="ml-17 h-630 min-w-450 rounded-10 bg-white px-22 py-30">
+ <div className="ml-[17px] h-[630px] min-w-[450px] rounded-[10px] bg-white px-[22px] py-[30px]">📝 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.
| <div className="ml-17 h-630 min-w-450 rounded-10 bg-white px-22 py-30"> | |
| <h3 className="mb-25 text-20-700">거래하기</h3> | |
| <div className="ml-[17px] h-[630px] min-w-[450px] rounded-[10px] bg-white px-[22px] py-[30px]"> | |
| <h3 className="mb-25 text-20-700">거래하기</h3> |
| const findOrderById = (orderId: string) => | ||
| queryResult.data?.find((data) => data.OrderId.toString() === orderId); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
OrderId 타입 안전성 개선 필요
OrderId를 문자열로 비교하기 전에 타입 체크가 필요합니다. 현재 구현은 잠재적인 타입 불일치 문제가 있을 수 있습니다.
- const findOrderById = (orderId: string) =>
- queryResult.data?.find((data) => data.OrderId.toString() === orderId);
+ const findOrderById = (orderId: string) =>
+ queryResult.data?.find((data) => {
+ const currentOrderId = data.OrderId;
+ return typeof currentOrderId === 'number'
+ ? currentOrderId.toString() === orderId
+ : currentOrderId === orderId;
+ });📝 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 findOrderById = (orderId: string) => | |
| queryResult.data?.find((data) => data.OrderId.toString() === orderId); | |
| const findOrderById = (orderId: string) => | |
| queryResult.data?.find((data) => { | |
| const currentOrderId = data.OrderId; | |
| return typeof currentOrderId === 'number' | |
| ? currentOrderId.toString() === orderId | |
| : currentOrderId === orderId; | |
| }); |
| data.type === "매수" && "text-red-500", | ||
| data.type === "매도" && "text-blue-500", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
문자열 리터럴 대신 enum 사용을 권장합니다.
"매수", "매도" 같은 문자열 리터럴 대신 TradeType enum을 사용하면 타입 안전성이 향상됩니다.
import { TradeType } from "../../../types";
// 변경 전
data.type === "매수" && "text-red-500"
// 변경 후
data.type === TradeType.Buy && "text-red-500"| label={`${submittedData.buyOrder} 수량`} | ||
| value={getKoreanPrice(submittedData.count)} |
There was a problem hiding this comment.
가격 포맷팅 유효성 검사 추가 필요
getKoreanPrice 함수 호출 전에 입력값의 유효성을 검사하는 것이 좋습니다. 음수나 잘못된 값이 들어올 경우 처리가 필요합니다.
- value={getKoreanPrice(submittedData.count)}
+ value={submittedData.count >= 0 ? getKoreanPrice(submittedData.count) : '0'}
- value={getKoreanPrice(submittedData.bidding)}
+ value={submittedData.bidding >= 0 ? getKoreanPrice(submittedData.bidding) : '0'}Also applies to: 83-84
| <Button | ||
| variant="outline-gray" | ||
| className="w-140" | ||
| onClick={onClickGoBack} | ||
| > | ||
| 뒤로가기 | ||
| </Button> | ||
| <Button | ||
| variant="custom" | ||
| className={cn("ml-5 w-140", COLOR_VARIANTS[color].button)} | ||
| onClick={onClickConfirm} | ||
| > | ||
| 확인 | ||
| </Button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
버튼 접근성 및 로딩 상태 처리 개선 필요
버튼에 적절한 ARIA 레이블과 로딩 상태 처리를 추가하는 것이 좋습니다.
<Button
variant="outline-gray"
className="w-140"
onClick={onClickGoBack}
+ aria-label="주문 취소 및 뒤로가기"
+ disabled={isLoading}
>
뒤로가기
</Button>
<Button
variant="custom"
className={cn("ml-5 w-140", COLOR_VARIANTS[color].button)}
onClick={onClickConfirm}
+ aria-label="주문 확인"
+ disabled={isLoading}
>
확인
</Button>Committable suggestion skipped: line range outside the PR's diff.
| stockName={stockName} | ||
| stockInfo={initialData.stockData} | ||
| /> | ||
| <OrderStock stockName={stockName} stockInfo={initialData.stockData} /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
로딩 상태 처리 추가 필요
OrderStock 컴포넌트에 로딩 상태를 전달하여 사용자에게 데이터 로딩 중임을 표시하는 것이 좋습니다.
- <OrderStock stockName={stockName} stockInfo={initialData.stockData} />
+ <Suspense fallback={<LoadingSpinner />}>
+ <OrderStock stockName={stockName} stockInfo={initialData.stockData} />
+ </Suspense>📝 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.
| <OrderStock stockName={stockName} stockInfo={initialData.stockData} /> | |
| <Suspense fallback={<LoadingSpinner />}> | |
| <OrderStock stockName={stockName} stockInfo={initialData.stockData} /> | |
| </Suspense> |
| ) : ( | ||
| "취소 정보를 받아오지 못했습니다." | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
에러 메시지 개선이 필요합니다.
현재 에러 메시지가 단순 문자열로 표시되고 있습니다. 사용자 경험 향상을 위해 다음을 제안합니다:
- 에러 컴포넌트 생성
- 재시도 옵션 제공
- 구체적인 오류 원인 표시
- "취소 정보를 받아오지 못했습니다."
+ <ErrorMessage
+ message="취소 정보를 받아오지 못했습니다"
+ description="잠시 후 다시 시도해 주세요"
+ retryButton={true}
+ onRetry={() => setIsCancelTable(false)}
+ />Committable suggestion skipped: line range outside the PR's diff.
#️⃣ 이슈
📝 작업 내용
이번 PR에서 작업한 내용을 간략히 설명해주세요.
📸 스크린샷
✅ 체크 리스트
👩💻 공유 포인트 및 논의 사항
알아보기 어려운 파일명이나 이름 알려주세요!
일단 색상은 다 찾아서 정의했는데, 빠진게 있을 수 있습니다. 변경하면서 확인 부탁드려요.
기본 테일윈드로 지정했던 색도 변경하셔야 될 것 같습니다.
Summary by CodeRabbit
신규 기능
OrderStock컴포넌트 추가.FormButtons컴포넌트 추가.EditTable컴포넌트 추가.LoginNotice컴포넌트 추가.TradeTable컴포넌트 추가.useLimitOrderData,useOrderMutations,useTradeMutations추가.버그 수정
문서화
TradeType및PriceType열거형 추가.