sourcery-ai[bot]
commented
6 days ago 리뷰어 가이드 by Sourcery
이 PR은 전략 세부 정보 페이지의 기본 정보를 위한 MSW(Mock Service Worker)를 구현합니다. 변경 사항에는 API 목(mock) 설정, 날짜 형식화 유틸리티 추가, 새로운 데이터 구조와 함께 작동하도록 전략 세부 구성 요소 리팩토링이 포함됩니다. 이 구현은 실제 API 엔드포인트 및 TanStack Query와의 향후 통합을 준비합니다.
전략 세부 정보 가져오기 시퀀스 다이어그램
sequenceDiagram
participant User
participant StrategyDetailPage
participant useFetchStrategyDetail
participant API
User->>StrategyDetailPage: 전략 세부 정보 페이지에 접근
StrategyDetailPage->>useFetchStrategyDetail: strategyId로 훅 호출
useFetchStrategyDetail->>API: fetchDefaultStrategyDetail(strategyId)
API-->>useFetchStrategyDetail: 전략 데이터 반환
useFetchStrategyDetail-->>StrategyDetailPage: 전략 데이터 제공
StrategyDetailPage-->>User: 전략 세부 정보 표시전략 세부 정보 페이지 클래스 다이어그램
classDiagram
class StrategyDetailPage {
+useFetchStrategyDetail(strategyId: string)
}
class StrategyTitleSection {
+id: number
+title: string
+traderId: string
+traderName: string
+imgUrl: string
+date: string
+followers: number
+minimumInvestment: string
+lastUpdatedDate: string
}
class StrategyContent {
+content: string
}
class useFetchStrategyDetail {
+strategy: StrategyDetailRes
}
class StrategyDetailRes {
+tradingTypeName: string
+tradingTypeIcon: string
+strategyIACEntities: InvestmentAssetClass[]
+tradingCycleName: string
+tradingCycleIcon: string
+traderId: string
+traderName: string
+traderImage: string
+strategyId: number
+strategyTitle: string
+minInvestmentAmout: string
+strategyOverview: string
+followersCount: number
+writedAt: string
+isPosted: 'Y' | 'N'
+isGranted: 'Y' | 'N'
}
StrategyDetailPage --> useFetchStrategyDetail
StrategyTitleSection --> StrategyDetailRes
StrategyContent --> StrategyDetailRes파일 수준 변경 사항
| 변경 사항 | 세부 사항 | 파일 |
|---|---|---|
| 전략 세부 데이터에 대한 MSW 핸들러 구현 |
|
src/mocks/handlers/strategyDetail.handlers.tssrc/mocks/handlers/index.ts |
| 전략 세부 정보에 대한 API 통합 레이어 추가 |
|
src/api/strategyDetail.tssrc/hooks/useFetchStrategyDetail.ts |
| 전략 세부 페이지 구성 요소 리팩토링 |
|
src/pages/strategy/StrategyDetailPage.tsxsrc/components/page/strategy-detail/StrategyTitleSection.tsxsrc/components/page/strategy-detail/StrategyContent.tsx |
| 날짜 형식화 유틸리티 추가 |
|
src/utils/dateFormat.ts |
팁 및 명령어
#### Sourcery와 상호작용하기 - **새로운 리뷰 트리거:** 풀 리퀘스트에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속하기:** Sourcery의 리뷰 댓글에 직접 답장합니다. - **리뷰 댓글에서 GitHub 이슈 생성:** 리뷰 댓글에서 Sourcery에게 이슈 생성을 요청합니다. - **풀 리퀘스트 제목 생성:** 풀 리퀘스트 제목 어디에나 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **풀 리퀘스트 요약 생성:** 풀 리퀘스트 본문 어디에나 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령어를 사용하여 요약이 삽입될 위치를 지정할 수도 있습니다. #### 경험 맞춤화 [대시보드](https://app.sourcery.ai)에 접속하여: - Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있는 경우 [지원 팀에 문의](mailto:support@sourcery.ai)하십시오. - 자세한 가이드와 정보를 보려면 [문서](https://docs.sourcery.ai)를 방문하십시오. - [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) 또는 [GitHub](https://github.com/sourcery-ai)에서 Sourcery 팀을 팔로우하여 소식을 받아보세요.Original review guide in English
## Reviewer's Guide by Sourcery This PR implements MSW (Mock Service Worker) for the strategy detail page's basic information. The changes include setting up API mocks, adding date formatting utilities, and refactoring the strategy detail components to work with the new data structure. The implementation prepares for future integration with real API endpoints and TanStack Query. #### Sequence diagram for fetching strategy details ```mermaid sequenceDiagram participant User participant StrategyDetailPage participant useFetchStrategyDetail participant API User->>StrategyDetailPage: Access strategy detail page StrategyDetailPage->>useFetchStrategyDetail: Call hook with strategyId useFetchStrategyDetail->>API: fetchDefaultStrategyDetail(strategyId) API-->>useFetchStrategyDetail: Return strategy data useFetchStrategyDetail-->>StrategyDetailPage: Provide strategy data StrategyDetailPage-->>User: Display strategy details ``` #### Class diagram for Strategy Detail Page ```mermaid classDiagram class StrategyDetailPage { +useFetchStrategyDetail(strategyId: string) } class StrategyTitleSection { +id: number +title: string +traderId: string +traderName: string +imgUrl: string +date: string +followers: number +minimumInvestment: string +lastUpdatedDate: string } class StrategyContent { +content: string } class useFetchStrategyDetail { +strategy: StrategyDetailRes } class StrategyDetailRes { +tradingTypeName: string +tradingTypeIcon: string +strategyIACEntities: InvestmentAssetClass[] +tradingCycleName: string +tradingCycleIcon: string +traderId: string +traderName: string +traderImage: string +strategyId: number +strategyTitle: string +minInvestmentAmout: string +strategyOverview: string +followersCount: number +writedAt: string +isPosted: 'Y' | 'N' +isGranted: 'Y' | 'N' } StrategyDetailPage --> useFetchStrategyDetail StrategyTitleSection --> StrategyDetailRes StrategyContent --> StrategyDetailRes ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Implemented MSW handlers for strategy detail data |- Created new strategyDetail.handlers.ts with mock data structure
- Added strategy detail API endpoint mock (/api/strategy-list/:id)
- Integrated mock handlers into the main handlers configuration
`src/mocks/handlers/index.ts` | | Added API integration layer for strategy detail |
- Created API client function for fetching strategy details
- Implemented custom hook useFetchStrategyDetail for data fetching
- Added TypeScript interfaces for API response types
`src/hooks/useFetchStrategyDetail.ts` | | Refactored strategy detail page components |
- Updated StrategyDetailPage to use the new data fetching hook
- Modified StrategyTitleSection to handle optional props and new data structure
- Made StrategyContent component more flexible with optional content
`src/components/page/strategy-detail/StrategyTitleSection.tsx`
`src/components/page/strategy-detail/StrategyContent.tsx` | | Added date formatting utility |
- Created formatDate utility function for consistent date formatting
- Added support for different date format types (withDayTime, onlyDate)
netlify[bot]
🚀 풀 리퀘스트 제안
📋 작업 내용
🔧 변경 사항
주요 변경 사항을 요약해 주세요.
📸 스크린샷 (선택 사항)
수정된 화면 또는 기능을 시연할 수 있는 스크린샷을 첨부해 주세요.
📄 기타
추가적으로 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.
Sourcery에 의한 요약
초기 데이터를 처리하기 위해 전략 세부 페이지에 MSW를 적용하고, 전략 세부 정보를 가져오는 새로운 훅을 구현합니다. 날짜 형식을 위한 유틸리티 함수를 도입하고, 이러한 새로운 기능을 활용하도록 컴포넌트를 업데이트합니다.
새로운 기능:
개선 사항:
테스트:
Original summary in English
## Summary by Sourcery Apply MSW to the strategy detail page for handling initial data and implement a new hook for fetching strategy details. Introduce a utility function for date formatting and update components to utilize these new features. New Features: - Introduce a new hook, useFetchStrategyDetail, to fetch strategy details using a strategy ID. - Add a new utility function, formatDate, to format timestamps into human-readable date strings. Enhancements: - Refactor StrategyDetailPage to use the new useFetchStrategyDetail hook for fetching strategy details. - Update StrategyTitleSection to include additional fields such as minimum investment and last updated date. Tests: - Add mock handlers for strategy detail API requests to support testing with MSW.