팀원소개서 메인 일부, 상세 페이지 실서버 API 붙이기 #114
Conversation
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
| TeamInviteData, | ||
| } from './types/team'; | ||
|
|
||
| export interface TeamService { | ||
| getIssueInfo(teamID: string, issueID: string): Promise<IssueData>; | ||
| postFeedbackBookmark(feedbackID: string): Promise<PostFeedbackBookmarkResponse>; | ||
| getTeamProfile(): Promise<TeamProfileData>; | ||
| getMyIssue(): Promise<TeamIssueData>; | ||
| getMyTeamIssue(): Promise<TeamIssueData>; |
src/infrastructure/remote/team.ts
Outdated
| const response = await privateAPI.get({ url: `/team/detail/${teamID}/issue/my` }); | ||
| if (response.status === 200) | ||
| return { | ||
| issueListData: response.data.map((team: any) => ({ |
| if (teamID === undefined) return; | ||
| const teamDetailData = await api.teamService.getTeamInfo(teamID); | ||
| const response = await privateAPI.get({ url: `/team/detail/${teamID}` }); |
There was a problem hiding this comment.
이렇게 받는 과정을 api로 추상화하고 컴포넌트에선 기냥 쓰는건 어떨까유..?
api에는 teamID 값만 던져주고 리턴값을 이렇게 컴포넌트에서 쓰이는 값으로 바꾸는 건 api 단에서 하는 게 좋을 것 같아요!!
만약 목데이터 쓰기가 번거로워서 그랬다면 내가 써주께..
There was a problem hiding this comment.
아래의 getTeamIssue 했던 것처럼 api로 분리해서 추상화하는게 좋을 것 같아유!!
| const checkMyIssue = () => { | ||
| setIsChecked(!isChecked); | ||
| if (!isChecked) { | ||
| (async () => { | ||
| if (teamID === undefined) return; | ||
| const { issueListData } = await api.teamService.getMyIssue(teamID); | ||
| setIssueListData(issueListData); | ||
| })(); | ||
| } else { | ||
| (async () => { | ||
| if (teamID === undefined) return; | ||
| const { issueListData } = await api.teamService.getTeamIssue(teamID); | ||
| setIssueListData(issueListData); | ||
| })(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
checkMyIssue 함수에서는 setIsChecked만 바꿔주고,
isChecked의 변화에 대한 콜백 함수는 useEffect안에서 돌려주면 좋을 것 같아유!
그리고 set할 때도 상태에 직접적으로 접근하기보다는 원래 값을 바꾸는 식이 더 좋을 것 같아유!
const checkMyIssue = () => setIsChecked(prev => !prev);useEffect( () => {
if (teamID === undefined) return;
if (!isChecked) {
(async () => {
const { issueListData } = await api.teamService.getMyIssue(teamID);
setIssueListData(issueListData);
})();
} else {
(async () => {
const { issueListData } = await api.teamService.getTeamIssue(teamID);
setIssueListData(issueListData);
})();
}
} , [isChecked, teamID ] )There was a problem hiding this comment.
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
|
울 웹쁜이 고생많았어 ! 여기서 미리보기로 보면서 쉬어~ 다른 웹쁜이들한테도 자랑해줘~ |
⛓ Related Issues
📋 작업 내용
📌 PR Point
checkMyIssue)의 코드가 마음에 들지 않네요..👀 스크린샷 / GIF / 링크
메인 페이지 : https://naegasogaeseo-dev.kro.kr/home/team
상세 페이지 : https://naegasogaeseo-dev.kro.kr/team/1