[FEAT/#106] 메인 화면 API 연동 및 제휴 목록 상태 UI 처리#112
Conversation
|
Thanks for the contribution! Please review the labels and make any necessary changes. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the partnership management system to replace mock data with actual API integrations using TanStack Query, guided by new architectural decisions (ADR-001 and ADR-002) that promote early return patterns for async states and pure display widgets. The changes introduce new API hooks, data adapters, and updated UI components for admin and partner homepages. Review feedback identifies missing data mappings in adapters for contract and recommendation details, a logic error in the maxItems prop handling within PartnershipListWidget, and a missing loading state in AdminHomePage that could degrade the user experience.
| companyName: "", | ||
| proposerName: "", |
There was a problem hiding this comment.
PartnershipContract 타입에서 요구하는 companyName과 proposerName 필드가 DTO(PartnershipDetailResponseDTO)에 존재하지 않아 빈 문자열로 하드코딩되어 있습니다. 이로 인해 상세 화면에서 해당 정보가 누락될 수 있습니다. API 응답에 해당 필드를 추가하거나, 모델 정의를 선택적(optional)으로 변경하는 것을 검토해 주세요.
| export function toAdminAffiliationSummary( | ||
| dto: AdminRecommendResponseDTO, | ||
| ): AdminAffiliationSummary { | ||
| const addressParts = [dto.partnerAddress, dto.partnerDetailAddress].filter( | ||
| Boolean, | ||
| ); | ||
| return { | ||
| title: dto.partnerName, | ||
| address: addressParts.join(" "), | ||
| partnerUrl: dto.partnerUrl, | ||
| }; | ||
| } |
There was a problem hiding this comment.
toAdminAffiliationSummary 함수에서 AdminAffiliationSummary 인터페이스의 status와 dateRange 필드를 설정하지 않고 있습니다. 기존 목데이터 기반 구현에서는 이 필드들을 활용해 '제휴 계약서 보기' 또는 '문의하기' 버튼 분기 처리를 수행했는데, 현재는 정보가 누락되어 항상 기본값('문의하기')으로만 노출될 것으로 보입니다. DTO에 관련 필드를 추가하여 연동하는 것이 좋겠습니다.
| onViewAll, | ||
| onPressCard, | ||
| }: PartnershipListWidgetProps) => { | ||
| const displayed = maxItems ? partnerships.slice(0, maxItems) : partnerships; |
There was a problem hiding this comment.
maxItems가 0일 경우 falsy한 값으로 취급되어 partnerships 전체가 노출되는 문제가 발생할 수 있습니다. undefined 여부를 명확히 체크하는 것이 안전합니다.
| const displayed = maxItems ? partnerships.slice(0, maxItems) : partnerships; | |
| const displayed = maxItems !== undefined ? partnerships.slice(0, maxItems) : partnerships; |
References
- When creating reusable UI blocks (widgets), design them as presentational components that receive data via props to separate UI from business logic.
| const { data: partnershipsData, isError: isPartnershipsError } = | ||
| useAdminPartnerships(); | ||
| const partnerships = partnershipsData?.content.map(toPartnership) ?? []; |
There was a problem hiding this comment.
데이터 로딩 중(isLoading)에 대한 처리가 누락되어 있습니다. 현재 로직으로는 로딩 중에 partnerships가 빈 배열([])이 되어, 실제 데이터가 있음에도 불구하고 '진행 중인 제휴가 없어요.'라는 EmptyState가 잠시 노출되는 UX 문제가 발생할 수 있습니다. 로딩 상태에 대한 처리를 추가하는 것을 권장합니다.
References
- Ensure that user-facing text maintains correct spelling, grammar, and consistent punctuation, especially regarding sentence-ending punctuation like adding a period.
| admins: AdminLiteDTO[]; | ||
| } | ||
|
|
||
| export interface BaseResponse<T> { |
There was a problem hiding this comment.
모든 API에서 공통적으로 사용하게 될테니 shared/types/api.ts로 옮기는건 어떨까요?
There was a problem hiding this comment.
좋은생각 같습니다 shared로 빼둘게욥
There was a problem hiding this comment.
PartnerListPage.tsx에 에러처리 관련 로직을 넣어두면 좋을거같습니다.
3 participants
📝 요약
⚙️ 작업 내용
entities/partnership에 API DTO 타입, 어댑터 함수, React Query 훅 구현PartnershipListWidget을 순수 display 컴포넌트로 설계 (fetch 상태 무관)maxItemsprop으로 메인 화면 최대 3개 노출 제한🔗 관련 이슈
✅ 체크리스트
💬 리뷰어에게
PartnershipListWidget에서isErrorprop을 제거하고 페이지에서 Early Return 패턴으로 처리했습니다. 관련 근거는docs/decisions/에 정리했어요.