Feat/98/crew api 연결 : 바뀐 백엔드 API 다시 적용 #119
Conversation
commit 51cfe2f Author: Lee Youl <[email protected]> Date: Sat Nov 9 11:40:05 2024 +0900 🐛 Fix: MockData 날짜 형식 수정 commit 7b68352 Author: Lee Youl <[email protected]> Date: Sat Nov 9 11:38:06 2024 +0900 🐛 Fix: 이전날짜 선택 방지, isToday 날짜 비교 수정 commit f101987 Author: Lee Youl <[email protected]> Date: Sat Nov 9 11:19:20 2024 +0900 🐛 Fix: 폼 동작 개선 commit c408058 Author: Lee Youl <[email protected]> Date: Sat Nov 9 10:51:40 2024 +0900 🐛 Fix: isToday 함수 개선, 데이터 한국시간 기준으로 변경 commit 0683f5a Author: Lee Youl <[email protected]> Date: Fri Nov 8 21:49:45 2024 +0900 🐛 Fix: 버튼 링크로 교체 commit 43cdfa7 Author: Lee Youl <[email protected]> Date: Fri Nov 8 21:43:11 2024 +0900 🚨 Fix: 린트 오류 제거 commit 9657201 Author: Lee Youl <[email protected]> Date: Fri Nov 8 21:34:56 2024 +0900 🐛 Fix: 스크롤바 두개로 보이는 문제 수정 commit 63a8e1c Author: Lee Youl <[email protected]> Date: Fri Nov 8 21:27:25 2024 +0900 🐛 Fix: 유효성 검사 날짜 선택 오류 수정 commit 80f8554 Author: Lee Youl <[email protected]> Date: Fri Nov 8 21:24:46 2024 +0900 🐛 Fix: 에러상태인데 새로 값 채울 때 에러 해제하기, 리팩토링 commit af9fb91 Author: Lee Youl <[email protected]> Date: Fri Nov 8 20:46:00 2024 +0900 🐛 Fix: 크루 생성시 디테일 페이지로 이동, 리팩토링 commit f1fe204 Author: Lee Youl <[email protected]> Date: Fri Nov 8 20:31:17 2024 +0900 🐛 Fix: 텍스트 수정(약속 잡기 > 약속 만들기) commit 5cc6746 Author: Lee Youl <[email protected]> Date: Fri Nov 8 20:29:52 2024 +0900 🐛 Fix: 드롭다운 값 선택시 포커스 아웃 되도록 수정
…1/Team-1-Codeit into Feat/98/CrewAPI
…1/Team-1-Codeit into Feat/98/CrewAPI
Walkthrough이 변경 사항은 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
src/_apis/crew/crew-list.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't determine the plugin "react-hooks" uniquely.
Please remove the "plugins" setting from either config or remove either plugin installation. If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 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: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
src/_apis/crew/crew-list.ts(1 hunks)src/components/common/crew-list/crew-card-list.tsx(2 hunks)src/types/crew-card.d.ts(1 hunks)
🔇 Additional comments (3)
src/types/crew-card.d.ts (1)
68-70: 인터페이스 속성 이름 변경이 일관성을 개선했습니다.
MainCrewListResponse와 동일한 패턴을 따르도록 속성 이름을 변경한 것이 좋습니다.
src/components/common/crew-list/crew-card-list.tsx (2)
34-35: 데이터 매핑 로직이 개선되었습니다!
페이지 데이터 매핑 로직이 content 프로퍼티를 일관되게 사용하도록 통합되어 코드가 더 간결해졌습니다. 널 병합 연산자(??)를 사용한 안전한 폴백 처리도 잘 되어있습니다.
66-70: 이미지 URL 처리 로직 검토가 필요합니다.
imageUrl === 'string' 조건은 API에서 기본값이 올바르게 처리되지 않고 있을 가능성을 시사합니다. 임시 해결책으로는 작동하지만, 근본적인 원인 파악이 필요해 보입니다.
다음 스크립트로 API 응답에서 이 패턴이 일관되게 발생하는지 확인해보시기 바랍니다:
백엔드 팀과 협의하여 다음 사항들을 검토해주시기 바랍니다:
- API 응답에서 기본값 처리 방식 개선
- 이미지 URL이 없는 경우 명시적인 null 또는 빈 문자열 반환
| }, | ||
| ); | ||
|
|
||
| return response?.data; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
응답 데이터 유효성 검증이 필요합니다.
response?.data를 바로 반환하기 전에 데이터의 유효성을 검증하는 것이 안전합니다.
다음과 같이 데이터 검증을 추가하는 것을 제안드립니다:
- return response?.data;
+ if (!response?.data) {
+ throw new Error('서버로부터 유효하지 않은 응답을 받았습니다.');
+ }
+ return response.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.
| return response?.data; | |
| if (!response?.data) { | |
| throw new Error('서버로부터 유효하지 않은 응답을 받았습니다.'); | |
| } | |
| return response.data; |
| const response: { data: MainCrewListResponse } = await fetchApi( | ||
| `/api/crews/search?keyword=${keyword}&mainLocation=${mainLocation}&mainCategory=${mainCategory}&subCategory=${subCategory}&sortType=${sortType}&page=${page}&size=${size}&sort=${sort}`, | ||
| { | ||
| method: 'GET', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| ); | ||
| return response; | ||
| } catch (error) { | ||
| // eslint-disable-next-line no-console | ||
| console.error(error); | ||
| return undefined; | ||
| } | ||
| credentials: 'include', // 인증 정보를 요청에 포함 | ||
| }, | ||
| ); | ||
|
|
||
| return response?.data; |
There was a problem hiding this comment.
💡 Codebase verification
API 응답 구조가 변경되지 않았습니다.
src/_apis/crew/crew-list.ts 파일의 8-19번째 줄에서 여전히 .data를 사용하고 있습니다. MyCrewListResponse 인터페이스에 따라 data를 content로 변경해야 합니다.
src/_apis/crew/crew-list.ts파일 (8-19번째 줄)
🔗 Analysis chain
API 응답 구조 변경 사항 확인이 필요합니다.
AI 요약에 따르면 MyCrewListResponse 인터페이스에서 data가 content로 변경되었다고 합니다. 이 변경사항이 현재 구현과 일치하는지 확인이 필요합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check the interface definition and its usage
ast-grep --pattern 'interface $interface {
$$$
content: $type
$$$
}'
# Check for any remaining uses of the old property name
rg -l "\.data\b" --type ts
Length of output: 635
| const response: { data: MainCrewListResponse } = await fetchApi( | ||
| `/api/crews/search?keyword=${keyword}&mainLocation=${mainLocation}&mainCategory=${mainCategory}&subCategory=${subCategory}&sortType=${sortType}&page=${page}&size=${size}&sort=${sort}`, | ||
| { | ||
| method: 'GET', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| ); | ||
| return response; | ||
| } catch (error) { | ||
| // eslint-disable-next-line no-console | ||
| console.error(error); | ||
| return undefined; | ||
| } | ||
| credentials: 'include', // 인증 정보를 요청에 포함 | ||
| }, | ||
| ); |
There was a problem hiding this comment.
API 호출에서 오류 처리가 누락되었습니다.
API 호출 시 발생할 수 있는 네트워크 오류나 서버 오류에 대한 처리가 없습니다. 사용자 경험 향상을 위해 적절한 오류 처리가 필요합니다.
다음과 같이 오류 처리를 추가하는 것을 제안드립니다:
async function getCrewList(condition: ConditionTypes, pageable: PageableTypes) {
const { keyword, mainLocation, mainCategory, subCategory, sortType } = condition;
const { page, size, sort = ['string'] } = pageable;
+ try {
const response: { data: MainCrewListResponse } = await fetchApi(
`/api/crews/search?keyword=${keyword}&mainLocation=${mainLocation}&mainCategory=${mainCategory}&subCategory=${subCategory}&sortType=${sortType}&page=${page}&size=${size}&sort=${sort}`,
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
},
);
return response?.data;
+ } catch (error) {
+ console.error('크루 목록을 불러오는 중 오류가 발생했습니다:', 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.
| const response: { data: MainCrewListResponse } = await fetchApi( | |
| `/api/crews/search?keyword=${keyword}&mainLocation=${mainLocation}&mainCategory=${mainCategory}&subCategory=${subCategory}&sortType=${sortType}&page=${page}&size=${size}&sort=${sort}`, | |
| { | |
| method: 'GET', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| ); | |
| return response; | |
| } catch (error) { | |
| // eslint-disable-next-line no-console | |
| console.error(error); | |
| return undefined; | |
| } | |
| credentials: 'include', // 인증 정보를 요청에 포함 | |
| }, | |
| ); | |
| async function getCrewList(condition: ConditionTypes, pageable: PageableTypes) { | |
| const { keyword, mainLocation, mainCategory, subCategory, sortType } = condition; | |
| const { page, size, sort = ['string'] } = pageable; | |
| try { | |
| const response: { data: MainCrewListResponse } = await fetchApi( | |
| `/api/crews/search?keyword=${keyword}&mainLocation=${mainLocation}&mainCategory=${mainCategory}&subCategory=${subCategory}&sortType=${sortType}&page=${page}&size=${size}&sort=${sort}`, | |
| { | |
| method: 'GET', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| credentials: 'include', // 인증 정보를 요청에 포함 | |
| }, | |
| ); | |
| return response?.data; | |
| } catch (error) { | |
| console.error('크루 목록을 불러오는 중 오류가 발생했습니다:', error); | |
| throw new Error('크루 목록을 불러오는데 실패했습니다.'); | |
| } | |
| } |
| content: MyCrewList[]; | ||
| hasNext: boolean; | ||
| } |
There was a problem hiding this comment.
💡 Codebase verification
일부 관련 컴포넌트들이 아직 'data' 속성을 사용하고 있습니다.
src/components/common/review-list/review-card-list.tsxsrc/components/common/writable-gathering-card/writable-gathering-card-list.tsx
🔗 Analysis chain
관련 컴포넌트들의 업데이트 여부를 확인해주세요.
이 인터페이스를 사용하는 모든 컴포넌트들이 새로운 속성 이름(content)을 올바르게 참조하는지 확인이 필요합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 이 인터페이스를 사용하는 컴포넌트들을 검색하여 업데이트가 필요한 부분을 확인합니다.
# MyCrewListResponse 타입을 사용하는 파일들을 검색
echo "MyCrewListResponse를 사용하는 파일 검색:"
rg "MyCrewListResponse" --type ts --type tsx
# 이전 속성명 'data'를 여전히 사용하고 있는 코드를 검색
echo "\n이전 속성명 'data'를 사용하는 코드 검색:"
rg "data\?\.pages" --type ts --type tsx
Length of output: 288
Script:
#!/bin/bash
# Description: 이 인터페이스를 사용하는 컴포넌트들을 다시 검색하여 업데이트가 필요한 부분을 확인합니다.
# MyCrewListResponse 타입을 사용하는 파일들을 검색 (.ts, .tsx 파일)
echo "MyCrewListResponse를 사용하는 파일 검색 (ts, tsx):"
rg "MyCrewListResponse" -g "*.ts" -g "*.tsx"
# 이전 속성명 'data'를 여전히 사용하는 코드를 검색 (.ts, .tsx 파일)
echo "\n이전 속성명 'data'를 사용하는 코드 검색 (ts, tsx):"
rg "data\?\.pages" -g "*.ts" -g "*.tsx"
Length of output: 1202
🔖 Issue Ticket
Ticket
✍️ Description
✅ Checklist
PR
Test
Summary by CodeRabbit
새로운 기능
CrewCardList컴포넌트에서 이미지 URL 처리 방식 개선.버그 수정
문서화
MyCrewListResponse인터페이스의data속성을content로 이름 변경하여 일관성 유지.