History 정렬 기능 추가 #172
History 정렬 기능 추가 #172
Conversation
Walkthrough이번 변경 사항은 Changes
Poem
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
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post
Actionable comments posted: 3
Outside diff range, codebase verification and nitpick comments (1)
apps/web/src/app/shop/ProductTable.tsx (1)
20-21: 빈 인터페이스를 타입 별칭으로 바꾸는 것을 고려해 보세요.빈 인터페이스는
{}와 동일하므로 타입 별칭으로 대체할 수 있습니다. 하지만 이는 사소한 문제이며 기능에는 영향을 미치지 않습니다.-interface ProductTableProps {} +type ProductTableProps = {};Tools
Biome
[error] 20-21: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (16)
- apps/web/src/apis/auctions/useGetHistory.ts (1 hunks)
- apps/web/src/apis/auctions/useGetProducts.ts (1 hunks)
- apps/web/src/app/shop/HistoryTable.tsx (1 hunks)
- apps/web/src/app/shop/ProductTable.tsx (4 hunks)
- apps/web/src/app/shop/SearchOption/OrderTypeSelect.tsx (1 hunks)
- apps/web/src/app/shop/SearchOption/PersonaType.tsx (2 hunks)
- apps/web/src/app/shop/SearchOption/SearchOptionSelect.tsx (1 hunks)
- apps/web/src/app/shop/SearchOption/SortDirectionSelect.tsx (1 hunks)
- apps/web/src/app/shop/SearchOption/index.ts (1 hunks)
- apps/web/src/app/shop/SellListSection/index.tsx (3 hunks)
- apps/web/src/app/shop/useSearchOptions.ts (1 hunks)
- apps/web/src/components/ProductTable/ShopTableRowView.tsx (2 hunks)
- packages/api/src/auction/getProductHistories.ts (1 hunks)
- packages/api/src/auction/getProducts.ts (2 hunks)
- packages/api/src/auction/index.ts (1 hunks)
- packages/api/src/auction/schema.ts (2 hunks)
Files skipped from review due to trivial changes (2)
- apps/web/src/app/shop/SearchOption/PersonaType.tsx
- apps/web/src/app/shop/SearchOption/index.ts
Additional context used
Biome
apps/web/src/app/shop/HistoryTable.tsx
[error] 14-15: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
[error] 17-17: Unexpected empty object pattern.
(lint/correctness/noEmptyPattern)
apps/web/src/app/shop/ProductTable.tsx
[error] 20-21: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
[error] 23-23: Unexpected empty object pattern.
(lint/correctness/noEmptyPattern)
Additional comments not posted (39)
packages/api/src/auction/index.ts (1)
6-6: 잘 작성된 코드입니다!
getProductHistories모듈을 export하는 것은 History 탭에 정렬 기능을 도입한다는 PR 목표와 일치합니다. 이 변경으로index.ts파일에서getProductHistories기능에 접근할 수 있게 되어 모듈 인터페이스가 개선됩니다.apps/web/src/app/shop/SearchOption/SortDirectionSelect.tsx (1)
1-16: LGTM!코드 변경 사항이 승인되었습니다.
apps/web/src/apis/auctions/useGetProducts.ts (4)
1-2: LGTM!
@gitanimals/api에서 필요한 타입과 함수를 잘 가져왔습니다.
8-10: LGTM!
useGetProducts함수 시그니처에서 제네릭 타입 파라미터<T>를 제거하고,option파라미터의 타입을GetProductsResponse로 명시적으로 지정한 것이 좋습니다. 이렇게 하면 타입 안전성과 코드 명확성이 향상됩니다.
Line range hint
12-16: LGTM!
useQuery훅을 사용하여queryKey와queryFn을 잘 설정했습니다. 또한option파라미터를 스프레드 연산자로 전달하여 추가 옵션을useQuery훅에 전달할 수 있도록 했네요.
Line range hint
1-18: 전체적으로 잘 작성된 코드입니다!파일 전체를 살펴보았을 때, 필요한 타입과 함수를
@gitanimals/api에서 잘 가져왔고,getProductsQueryKey함수도 올바르게 구현되었습니다. 또한useGetProducts훅의 함수 시그니처를 업데이트하고useQuery훅을 사용하여 데이터를 가져오는 부분도 잘 작성되었네요.코드 구조가 깔끔하고 베스트 프랙티스를 잘 따르고 있습니다. 추가적인 코멘트나 제안 사항은 없습니다. 잘 작성된 코드라고 생각합니다!
apps/web/src/apis/auctions/useGetHistory.ts (4)
1-2: LGTM!
@gitanimals/api패키지에서 필요한 타입과 함수를 잘 가져왔습니다.
6-6: LGTM!
getHistoryQueryKey함수가useGetHistory훅을 위한 쿼리 키를 잘 생성하고 있습니다.
Line range hint
8-17: LGTM!
useGetHistory훅이@gitanimals/api의getHistory함수를 사용하여 데이터를 잘 가져오고 있습니다.useQuery훅의 사용도 적절해 보입니다.
Line range hint
1-17: 전반적으로 잘 구현된 것 같습니다!파일 전체적으로 봤을 때,
@gitanimals/api패키지를 잘 활용하여 코드를 리팩토링한 것으로 보입니다. 불필요한 타입 정의를 제거하고, API의 타입을 직접 사용함으로써 코드의 가독성과 유지보수성이 향상되었습니다. PR의 목표에 잘 부합하는 변경사항이라고 생각합니다.apps/web/src/app/shop/useSearchOptions.ts (1)
1-23: 잘 구현된 커스텀 훅입니다!
useSearchOptions커스텀 훅은 검색 옵션 상태를 관리하기 위해useState훅을 사용하고 있습니다. 초기 상태는 기본값으로 정의되어 있으며, 현재 상태와 상태를 업데이트하는 함수를 반환합니다.onSearchOptionChange함수는setSearchOptions의 함수형 업데이트 형식을 사용하여 이전 상태를 기반으로 상태를 업데이트합니다. 이는 모범 사례를 따르고 있습니다.packages/api/src/auction/getProducts.ts (3)
3-3: 스키마 import 업데이트 좋습니다!
OrderTypeSchema와SortDirectionSchema를 import하여orderType과sortDirection필드의 유효성 검사 로직을 별도의 스키마로 추출한 것은 코드 재사용성과 유지보수성을 높이는 좋은 변경입니다.
15-15:orderType필드 업데이트 좋습니다!
orderType필드가 이제OrderTypeSchema를 사용하여 유효성을 검사하도록 변경된 것은 코드의 모듈성을 높이는 좋은 변경입니다.
16-16:sortDirection필드 업데이트 좋습니다!
sortDirection필드가 이제SortDirectionSchema를 사용하여 유효성을 검사하도록 변경된 것은 코드의 모듈성을 높이는 좋은 변경입니다.apps/web/src/app/shop/SearchOption/SearchOptionSelect.tsx (1)
1-36: 컴포넌트가 잘 구현되었습니다!
SearchOptionSelect컴포넌트는 다음과 같은 모범 사례를 따르고 있습니다:
- 컴포넌트는 props를 받아 JSX를 반환하는 순수 함수입니다.
- 컴포넌트는 재사용 가능하며 애플리케이션의 다른 부분에서 사용할 수 있습니다.
- 컴포넌트는 스타일링을 위해 custom hook을 사용하고 있는데, 이는 관심사를 분리하는 좋은 방법입니다.
- 컴포넌트는 시맨틱 HTML 요소를 사용하고 있어 접근성에 좋습니다.
변경 사항이 승인되었습니다.
packages/api/src/auction/getProductHistories.ts (4)
1-4: 좋아 보입니다!코드 변경사항이 승인되었습니다.
6-12: 좋아 보입니다!코드 변경사항이 승인되었습니다.
14-17: 좋아 보입니다!코드 변경사항이 승인되었습니다.
22-26: 좋아 보입니다!코드 변경사항이 승인되었습니다.
convertCamelObjToKebab유틸리티 함수의 사용법을 확인하세요.코드베이스에서
convertCamelObjToKebab유틸리티 함수의 사용법이 일관되게 적용되었는지 확인하는 것이 좋겠습니다.다음 스크립트를 실행하여 함수 사용법을 확인할 수 있습니다:
Verification successful
convertCamelObjToKebab함수의 사용법이 일관됩니다.코드베이스 전반에 걸쳐
convertCamelObjToKebab함수가 일관되게 사용되고 있습니다. 이 함수는 API 요청 전에 객체 키를 camelCase에서 kebab-case로 변환하는 데 사용됩니다. 사용법에 문제가 없습니다.
- 정의 위치:
apps/web/src/utils/string.tspackages/api/src/utils.ts- 사용 위치:
apps/web/src/apis/auctions/useGetMyProduct.tspackages/api/src/auction/getProducts.tspackages/api/src/auction/getProductHistories.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: `convertCamelObjToKebab` 유틸리티 함수의 모든 사용법을 검색합니다. # Test: 함수 사용법을 검색합니다. Expect: 일관된 사용법 rg --type typescript -A 5 $'convertCamelObjToKebab'Length of output: 85
Script:
#!/bin/bash # Description: `convertCamelObjToKebab` 유틸리티 함수의 모든 사용법을 검색합니다. # Test: 함수 사용법을 검색합니다. Expect: 일관된 사용법 rg --type ts -A 5 $'convertCamelObjToKebab'Length of output: 3007
packages/api/src/auction/schema.ts (5)
12-12:paymentState속성의 타입 변경을 승인합니다.
paymentState속성을 특정 문자열 리터럴의 유니온 타입으로 변경하면 타입 안전성이 향상되어 데이터 모델의 명확성과 신뢰성이 개선됩니다.
16-16:ProductStatusType의 추가를 승인합니다.
ProductStatusType을 추가하면 코드베이스의 다른 부분에서 결제 상태를 보다 명시적으로 사용할 수 있어 더 나은 타입 관리가 가능합니다.
29-29:HistoryProductSchema의 변경을 승인합니다.
HistoryProductSchema가 스프레드 연산자를 사용하여ProductSchema를 확장하면HistoryProduct가 자체 특정 속성을 추가하면서Product타입과 일관성을 유지할 수 있습니다.
38-39:OrderTypeSchema와OrderType의 추가를 승인합니다.
OrderTypeSchema는 정렬 옵션에 대한 유니온 타입을 정의하고,OrderType은OrderTypeSchema에서 추론됩니다. 이러한 추가를 통해 애플리케이션에서 정렬 로직을 구조화되고 타입에 안전한 방식으로 처리할 수 있습니다.
41-42:SortDirectionSchema와SortDirection의 추가를 승인합니다.
SortDirectionSchema는 정렬 방향에 대한 가능한 값을 지정하고,SortDirection은SortDirectionSchema에서 추론됩니다. 이러한 추가를 통해 애플리케이션에서 정렬 로직을 구조화되고 타입에 안전한 방식으로 처리할 수 있습니다.apps/web/src/components/ProductTable/ShopTableRowView.tsx (3)
8-8: Props 인터페이스 변경 사항이 좋아 보입니다!
Props인터페이스가Product타입에서 필요한 속성만 선택하도록 변경되었습니다. 이는itemprop의 구조를 단순화하고 타입 안전성을 향상시킵니다.
9-9: onAction 함수의 매개변수 타입 변경이 좋습니다!
onAction함수의 매개변수 타입이ProductItemType에서Product['id']로 변경되었습니다. 이제 함수는 전체 아이템 객체 대신 제품의id만 필요로 합니다. 이는 상호작용에 필수적인 속성에 초점을 맞춤으로써 컴포넌트 API의 명확성을 향상시킵니다.
14-14: ShopTableRowView 함수의 매개변수 변경이 좋아 보입니다!함수 시그니처가
onAction,actionLabel,actionColor를 props에서 직접 구조 분해하도록 조정되었습니다.item의 나머지 속성은 rest 연산자(...item)를 사용하여 수집됩니다. 이 변경은 렌더링과 상호작용에 필수적인 속성에 초점을 맞춤으로써 컴포넌트 API의 명확성을 향상시킵니다.apps/web/src/app/shop/SellListSection/index.tsx (3)
2-2: LGTM!
Product타입을@gitanimals/api에서 가져오는 것은 좋은 변경사항입니다. 이는 제품 식별을 위해 더 구조화된 타입을 사용하는 것과 관련이 있습니다.
34-35: LGTM!
onEditAction함수의 매개변수 타입을ProductType에서Product['id']로 변경한 것은 좋은 결정입니다. 이는 타입 안전성과 명확성을 향상시킵니다. 함수 본문에서editProductId상태 변수를 제공된id로 설정하는 것도 올바른 방식입니다.
45-47: LGTM!
ShopTableRowView컴포넌트에 전체product객체를 전달하는 대신id,persona,price와 같은 개별 속성을 전달하는 것은 좋은 변경사항입니다. 이는 데이터 처리에서 성능과 명확성을 향상시킬 수 있습니다. 필요한 속성들이 컴포넌트에 올바르게 전달되고 있습니다.apps/web/src/app/shop/HistoryTable.tsx (5)
10-11: 코드 변경 사항이 승인되었습니다.검색 옵션을 관리하는 데 필요한 컴포넌트와 훅을 올바르게 가져오고 있습니다.
20-25: 코드 변경 사항이 승인되었습니다.
useSearchOptions훅을 사용하여 검색 옵션을 관리하고,useGetHistory훅을 사용하여 현재 페이지와 검색 옵션에 따라 히스토리 데이터를 가져오는 것이 올바르게 구현되었습니다.
27-31: 코드 변경 사항이 승인되었습니다.검색 옵션이 변경될 때마다
useEffect훅을 사용하여 현재 페이지를 0으로 재설정하는 것은 사용자 경험을 개선하는 좋은 방법입니다. 이렇게 하면 검색 매개변수를 변경한 후 페이지 매김 결과를 탐색할 때 혼동을 방지할 수 있습니다.
40-50: 코드 변경 사항이 승인되었습니다.
OrderTypeSelect,SortDirectionSelect및PersonaType컴포넌트를 사용하여 검색 옵션을 렌더링하고,useSearchOptions훅의onSearchOptionChange함수를 사용하여 사용자가 옵션을 선택할 때 검색 옵션을 업데이트하는 것이 올바르게 구현되었습니다. 이를 통해 사용자는 동시에 여러 기준을 선택할 수 있으며, 더 포괄적인 필터링 인터페이스를 제공합니다.
57-61: 코드 변경 사항이 승인되었습니다.히스토리 데이터의 각 제품을 렌더링하기 위해 필요한 props를
ShopTableRowView컴포넌트에 올바르게 전달하고 있습니다.apps/web/src/app/shop/ProductTable.tsx (4)
4-5: LGTM!코드 변경 사항이 승인되었습니다.
18-19: LGTM!코드 변경 사항이 승인되었습니다.
27-65: LGTM!코드 변경 사항이 승인되었습니다. 컴포넌트는 사용자 정의 훅을 효과적으로 사용하여 검색 옵션을 관리하고 제품을 가져옵니다. 렌더링 로직은 깨끗하고 읽기 쉽습니다.
Line range hint
66-129: LGTM!코드 변경 사항이 승인되었습니다. 컴포넌트는 훅을 효과적으로 사용하여 제품 작업을 처리하고 올바른 props로
ShopTableRowView컴포넌트를 렌더링합니다. 제품 상태 및 작업 레이블/색상을 결정하는 로직은 깨끗하고 읽기 쉽습니다.
Comments failed to post (3)
apps/web/src/app/shop/SearchOption/OrderTypeSelect.tsx (1)
1-17: 컴포넌트 구현이 잘 되었습니다!
OrderTypeSelect컴포넌트의 구현이 React 함수형 컴포넌트 문법을 잘 따르고 있습니다.
sizeprop을 설정 가능하게 만드는 것이 좋겠습니다.현재
sizeprop이 128로 고정되어 있는데, 이는 다양한 사용 사례에 유연하게 대응하기 어려울 수 있습니다.sizeprop을 부모 컴포넌트에서 설정할 수 있도록 변경하는 것이 좋겠습니다.
optionsprop을 설정 가능하게 만들거나 외부 소스에서 가져오는 것이 좋겠습니다.현재
optionsprop이 하드코딩된 옵션들로 고정되어 있는데, 이는 확장성이 떨어질 수 있습니다.optionsprop을 부모 컴포넌트에서 설정할 수 있도록 하거나, 외부 소스(예: API)에서 옵션을 가져오도록 변경하는 것이 좋겠습니다.apps/web/src/app/shop/HistoryTable.tsx (2)
14-15: 빈 인터페이스 대신 타입 별칭을 사용하세요.
ProductTableProps인터페이스가 비어 있습니다. 이는{}와 동일합니다. 빈 인터페이스 대신 타입 별칭을 사용하는 것이 더 좋은 방법입니다.다음과 같이 변경하세요:
-interface ProductTableProps {} +type ProductTableProps = {};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 ProductTableProps = {};Tools
Biome
[error] 14-15: An empty interface is equivalent to {}.
Safe fix: Use a type alias instead.
(lint/suspicious/noEmptyInterface)
17-17: 빈 객체 패턴을 제거하세요.
HistoryTable함수는 빈 객체 패턴을 매개변수로 사용하고 있습니다. 이는 예기치 않은 동작입니다.ProductTableProps인터페이스가 비어 있으므로 이 매개변수를 제거할 수 있습니다.다음과 같이 변경하세요:
-function HistoryTable({}: ProductTableProps) { +function HistoryTable() {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.function HistoryTable() {Tools
Biome
[error] 17-17: Unexpected empty object pattern.
(lint/correctness/noEmptyPattern)
# Conflicts: # apps/web/src/app/shop/HistoryTable.tsx # apps/web/src/app/shop/ProductTable.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- packages/api/src/auction/getProducts.ts (2 hunks)
Additional comments not posted (3)
packages/api/src/auction/getProducts.ts (3)
3-3: 수입 문 변경 승인새로운 스키마
OrderTypeSchema와SortDirectionSchema가 추가되어 유지보수성과 재사용성이 향상되었습니다.
15-15:orderType필드 변경 승인
OrderTypeSchema를 사용하여 스키마 정의가 간소화되고, 유효성 검사 규칙을 더 복잡하게 설정할 수 있는 가능성이 열렸습니다.
16-16:sortDirection필드 변경 승인
SortDirectionSchema를 사용함으로써 스키마 정의가 간소화되고, 유효성 검사 규칙을 더 복잡하게 설정할 수 있는 가능성이 열렸습니다.
💡 기능
packages/api에 API를 추가하여 사용하도록 변경하였습니다.🔎 기타
Summary by CodeRabbit
New Features
OrderTypeSelect,SortDirectionSelect,PersonaType컴포넌트가 추가되어 제품 정렬 및 필터링 기능이 향상되었습니다.useSearchOptions훅이 추가되어 검색 옵션 관리를 간소화했습니다.Bug Fixes
Refactor
useGetHistory및useGetProducts훅의 구조가 간소화되어 코드 유지보수성이 향상되었습니다.Style