diff --git a/src/infrastructure/api/team.ts b/src/infrastructure/api/team.ts index 2a48b9eb..634d9ad4 100644 --- a/src/infrastructure/api/team.ts +++ b/src/infrastructure/api/team.ts @@ -11,8 +11,9 @@ export interface TeamService { getIssueInfo(teamID: string, issueID: string): Promise; postFeedbackBookmark(feedbackID: string): Promise; getTeamProfile(): Promise; - getMyIssue(): Promise; + getMyTeamIssue(): Promise; + getTeamInfo(teamID: number): Promise; getTeamIssue(teamID: string): Promise; - getTeamInfo(teamID: string): Promise; + getMyIssue(teamID:string): Promise; getInviteInfo(): Promise; } diff --git a/src/infrastructure/api/types/team.ts b/src/infrastructure/api/types/team.ts index d04c1506..30fd7288 100644 --- a/src/infrastructure/api/types/team.ts +++ b/src/infrastructure/api/types/team.ts @@ -65,12 +65,19 @@ export type TeamProfileData = { profileListData: TeamMemberNoneId[]; }; -export type TeamInfoData = { - teamID: string; +export type TeamDetail = { + teamID: number; teamImage?: string; teamName: string; teamDescription: string; - teamMemberList: TeamMemberNoneId[]; +}; + +export type TeamInfoData = { + teamDetailData: { + teamDetail: TeamDetail; + teamMemberCount: number; + teamMemberList: TeamMemberNoneId[]; + }; }; export type TeamInvite = { diff --git a/src/infrastructure/mock/team.data.ts b/src/infrastructure/mock/team.data.ts index ac0da5c1..58af227c 100644 --- a/src/infrastructure/mock/team.data.ts +++ b/src/infrastructure/mock/team.data.ts @@ -188,31 +188,36 @@ export const TEAM_DATA: { ], }, TEAM_DETAIL_INFO: { - teamID: '0', - teamImage: 'https://cdn.pixabay.com/photo/2021/07/13/11/34/cat-6463284_1280.jpg', - teamName: '너가소개서', - teamDescription: '대학생연합 IT벤처창업 동아리', - teamMemberList: [ - { - id: 1, - profileName: '캐서린', - }, - { - id: 12, - profileName: '웬디', - profileImage: 'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg', - }, - { - id: 13, - profileName: '콩콩이', - profileImage: 'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg', - }, - { - id: 14, - profileName: '크왕', - profileImage: 'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg', + teamDetailData: { + teamDetail: { + teamID: 1, + teamImage: 'https://cdn.pixabay.com/photo/2021/07/13/11/34/cat-6463284_1280.jpg', + teamName: '너가소개서', + teamDescription: '대학생연합 IT벤처창업 동아리', }, - ], + teamMemberCount: 4, + teamMemberList: [ + { + id: 1, + profileName: '캐서린', + }, + { + id: 12, + profileName: '웬디', + profileImage: 'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg', + }, + { + id: 13, + profileName: '콩콩이', + profileImage: 'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg', + }, + { + id: 14, + profileName: '크왕', + profileImage: 'https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_1280.jpg', + }, + ], + }, }, TEAM_INVITE_INFO: { inviteListData: [ diff --git a/src/infrastructure/mock/team.ts b/src/infrastructure/mock/team.ts index 9d00da51..c65dabc3 100644 --- a/src/infrastructure/mock/team.ts +++ b/src/infrastructure/mock/team.ts @@ -17,7 +17,12 @@ export function teamDataMock(): TeamService { return TEAM_DATA.TEAM_PROFILE; }; - const getMyIssue = async () => { + const getTeamInfo = async () => { + await wait(2000); + return TEAM_DATA.TEAM_DETAIL_INFO; + }; + + const getMyTeamIssue = async () => { await wait(2000); return TEAM_DATA.TEAM_ISSUE_INFO; }; @@ -27,9 +32,9 @@ export function teamDataMock(): TeamService { return TEAM_DATA.TEAM_ISSUE_INFO; }; - const getTeamInfo = async () => { + const getMyIssue = async () => { await wait(2000); - return TEAM_DATA.TEAM_DETAIL_INFO; + return TEAM_DATA.TEAM_ISSUE_INFO; }; const getInviteInfo = async () => { @@ -41,9 +46,10 @@ export function teamDataMock(): TeamService { getIssueInfo, postFeedbackBookmark, getTeamProfile, - getMyIssue, - getTeamIssue, getTeamInfo, + getMyTeamIssue, + getTeamIssue, + getMyIssue, getInviteInfo, }; } diff --git a/src/infrastructure/remote/team.ts b/src/infrastructure/remote/team.ts index 2dd5d1d2..b9f27065 100644 --- a/src/infrastructure/remote/team.ts +++ b/src/infrastructure/remote/team.ts @@ -4,21 +4,64 @@ import { TEAM_DATA } from '../mock/team.data'; import { privateAPI } from './base'; export function teamDataRemote(): TeamService { + const postFeedbackBookmark = async () => { + await wait(1000); + return { isSuccess: true }; + }; + const getIssueInfo = async () => { await wait(2000); return TEAM_DATA.ISSUE_INFO; }; const getTeamIssue = async (teamID: string) => { - const response = await privateAPI.get({ url: `/team/detail/${teamID}` }); - if (response.status === 200) console.log(response.data); + const response = await privateAPI.get({ url: `/team/detail/${teamID}/issue` }); + if (response.status === 200) + return { + issueListData: response.data + ? response.data.map((team: any) => ({ + issueNumber: team.id, + issueMembers: team.feedback.map((member: any) => ({ + id: member.userId, + profileName: member.name, + profileImage: member.image, + })), + category: team.categoryName, + createdAt: team.dates, + content: team.content, + teamID: team.teamId, + issueCardImage: team.teamImage, + teamName: team.teamname, + memberName: team.username, + })) + : [], + }; else throw '서버 통신 실패'; - return TEAM_DATA.TEAM_ISSUE_INFO; }; - const postFeedbackBookmark = async () => { - await wait(1000); - return { isSuccess: true }; + const getMyIssue = async (teamID: string) => { + const response = await privateAPI.get({ url: `/team/detail/${teamID}/issue/my` }); + if (response.status === 200) + return { + issueListData: response.data + ? response.data.map((team: any) => ({ + issueNumber: team.id, + issueMembers: team.feedback.map((member: any) => ({ + id: member.userId, + profileName: member.name, + profileImage: member.image, + })), + category: team.categoryName, + createdAt: team.dates, + content: team.content, + teamID: team.teamId, + issueCardImage: team.teamImage, + teamName: team.teamname, + memberName: team.username, + })) + : [], + }; + else throw '서버 통신 실패'; }; const getTeamProfile = async () => { @@ -36,9 +79,29 @@ export function teamDataRemote(): TeamService { else throw '서버 통신 실패'; }; - const getMyIssue = async () => { + const getTeamInfo = async (teamID: number) => { + const response = await privateAPI.get({ url: `/team/detail/${teamID}` }); + if (response.status === 200) + return { + teamDetailData: { + teamDetail: { + teamID: response.data.team.id, + teamImage: response.data.team.image ?? imgEmptyProfile, + teamName: response.data.team.name, + teamDescription: response.data.team.description, + }, + teamMemberCount: response.data.memberCount, + teamMemberList: response.data.member.map((memberDetail: any) => ({ + id: memberDetail.id, + profileName: memberDetail.name, + profileImage: memberDetail.image ?? imgEmptyProfile, + })), + }, + }; + }; + + const getMyTeamIssue = async () => { const response = await privateAPI.get({ url: `/team/issue` }); - console.log(response); if (response.status === 200) return { issueListData: response.data @@ -60,19 +123,16 @@ export function teamDataRemote(): TeamService { else throw '서버 통신 실패'; }; - const getTeamInfo = async () => { - await wait(2000); - return TEAM_DATA.TEAM_DETAIL_INFO; - }; - const getInviteInfo = async () => { const response = await privateAPI.get({ url: `/team/invite` }); if (response.status === 200) return { - inviteListData: response.data.map((team: any) => ({ - id: team.id, - name: team.name, - })), + inviteListData: response.data + ? response.data.map((team: any) => ({ + id: team.id, + name: team.name, + })) + : [], }; else throw '서버 통신 실패'; }; @@ -80,9 +140,10 @@ export function teamDataRemote(): TeamService { return { postFeedbackBookmark, getTeamProfile, - getMyIssue, - getTeamIssue, getTeamInfo, + getMyTeamIssue, + getTeamIssue, + getMyIssue, getInviteInfo, getIssueInfo, }; diff --git a/src/presentation/pages/Home/Team/index.tsx b/src/presentation/pages/Home/Team/index.tsx index 216ae7f2..749480d7 100644 --- a/src/presentation/pages/Home/Team/index.tsx +++ b/src/presentation/pages/Home/Team/index.tsx @@ -23,7 +23,7 @@ function HomeTeam() { useEffect(() => { (async () => { - const { issueListData } = await api.teamService.getMyIssue(); + const { issueListData } = await api.teamService.getMyTeamIssue(); setIssueListData(issueListData); })(); }, []); diff --git a/src/presentation/pages/Team/Main/index.tsx b/src/presentation/pages/Team/Main/index.tsx index dd252d76..b53071ed 100644 --- a/src/presentation/pages/Team/Main/index.tsx +++ b/src/presentation/pages/Team/Main/index.tsx @@ -1,6 +1,6 @@ import { useNavigate, useParams } from 'react-router-dom'; import { StTeamMain, StTeamInfo, StCheckWrapper } from './style'; -import { icPerson, icPlusMini, icCoralCheck, icGrayCheck } from '@assets/icons'; +import { icPerson, icCoralCheck, icGrayCheck } from '@assets/icons'; import IssueCardList from '@components/common/IssueCardList'; import { useState, useEffect } from 'react'; import { api } from '@api/index'; @@ -11,68 +11,77 @@ import TeamMemberPopup from './MemberPopup'; function TeamMain() { const [isMemberPopupOpened, setIsMemberPopupOpened] = useState(false); const [isChecked, setIsChecked] = useState(false); - const [teamInfoData, setTeamInfoData] = useState(null); + const [teamInfoData, setTeamInfoData] = useState(undefined); const [issueListData, setIssueListData] = useState(null); - const [isValidating, setIsValidating] = useState(false); const { teamID } = useParams(); const navigate = useNavigate(); + const checkMyIssue = () => setIsChecked((prev) => !prev); useEffect(() => { (async () => { - setIsValidating(true); if (teamID === undefined) return; - const teamDetailData = await api.teamService.getTeamInfo(teamID); - const { issueListData } = await api.teamService.getTeamIssue(teamID); + const teamDetailData = await api.teamService.getTeamInfo(Number(teamID)); setTeamInfoData(teamDetailData); - setIssueListData(issueListData); - setIsValidating(false); })(); + }, []); - return () => { - setTeamInfoData(null); - setIssueListData(null); - }; + useEffect(() => { + (async () => { + if (teamID === undefined) return; + const { issueListData } = await api.teamService.getTeamIssue(teamID); + setIssueListData(issueListData); + })(); }, []); + 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]); + return ( - {isValidating &&
로딩중
} {teamInfoData && (
- +
-

{teamInfoData.teamName}

+

{teamInfoData.teamDetailData.teamDetail.teamName}

- {teamInfoData.teamMemberList.map((member, index) => ( + {teamInfoData.teamDetailData.teamMemberList.map((member, index) => ( {member.profileName} - {index < teamInfoData.teamMemberList.length - 1 ? ',\u00a0' : ''} + {index < teamInfoData.teamDetailData.teamMemberCount - 1 ? ',\u00a0' : ''} ))}

-

{teamInfoData.teamDescription}

+

{teamInfoData.teamDetailData.teamDetail.teamDescription}

 )} - + - 나와 관련된 이슈만 보기 - {isValidating &&
로딩중
} {issueListData && (