🔨refactor: api로 분리해서 추상화

Neogasogaeseo · Jan 19, 2022 · 1f4d6c9 · 1f4d6c9
1 parent 0e3bb1d
commit 1f4d6c9
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 51 deletions.
diff --git a/src/infrastructure/api/team.ts b/src/infrastructure/api/team.ts
@@ -3,6 +3,7 @@ import {
   PostFeedbackBookmarkResponse,
   TeamProfileData,
   TeamIssueData,
+  TeamInfoData,
   TeamInviteData,
 } from './types/team';
 
@@ -11,6 +12,7 @@ export interface TeamService {
   postFeedbackBookmark(feedbackID: string): Promise<PostFeedbackBookmarkResponse>;
   getTeamProfile(): Promise<TeamProfileData>;
   getMyTeamIssue(): Promise<TeamIssueData>;
+  getTeamInfo(teamID: number): Promise<TeamInfoData>;
   getTeamIssue(teamID: string): Promise<TeamIssueData>;
   getMyIssue(teamID:string): Promise<TeamIssueData>;
   getInviteInfo(): Promise<TeamInviteData>;

diff --git a/src/infrastructure/api/types/team.ts b/src/infrastructure/api/types/team.ts
@@ -65,13 +65,19 @@ export type TeamProfileData = {
   profileListData: TeamMemberNoneId[];
 };
 
-export type TeamInfoData = {
-  teamID: string;
+export type TeamDetail = {
+  teamID: number;
   teamImage?: string;
   teamName: string;
   teamDescription: string;
-  teamMemberCount: number;
-  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
@@ -188,32 +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벤처창업 동아리',
-    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',
+    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
@@ -17,6 +17,11 @@ export function teamDataMock(): TeamService {
     return TEAM_DATA.TEAM_PROFILE;
   };
 
+  const getTeamInfo = async () => {
+    await wait(2000);
+    return TEAM_DATA.TEAM_DETAIL_INFO;
+  };
+
   const getMyTeamIssue = async () => {
     await wait(2000);
     return TEAM_DATA.TEAM_ISSUE_INFO;
@@ -41,6 +46,7 @@ export function teamDataMock(): TeamService {
     getIssueInfo,
     postFeedbackBookmark,
     getTeamProfile,
+    getTeamInfo,
     getMyTeamIssue,
     getTeamIssue,
     getMyIssue,

diff --git a/src/infrastructure/remote/team.ts b/src/infrastructure/remote/team.ts
@@ -73,6 +73,27 @@ export function teamDataRemote(): TeamService {
     else throw '서버 통신 실패';
   };
 
+  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` });
     if (response.status === 200)
@@ -111,6 +132,7 @@ export function teamDataRemote(): TeamService {
   return {
     postFeedbackBookmark,
     getTeamProfile,
+    getTeamInfo,
     getMyTeamIssue,
     getTeamIssue,
     getMyIssue,

diff --git a/src/presentation/pages/Team/Main/index.tsx b/src/presentation/pages/Team/Main/index.tsx
@@ -7,7 +7,6 @@ import { api } from '@api/index';
 import { TeamInfoData, TeamIssueCard } from '@api/types/team';
 import { imgEmptyProfile } from '@assets/images';
 import TeamMemberPopup from './MemberPopup';
-import { privateAPI } from '@infrastructure/remote/base';
 
 function TeamMain() {
   const [isMemberPopupOpened, setIsMemberPopupOpened] = useState(false);
@@ -21,20 +20,8 @@ function TeamMain() {
   useEffect(() => {
     (async () => {
       if (teamID === undefined) return;
-      const response = await privateAPI.get({ url: `/team/detail/${teamID}` });
-      if (response.status === 200)
-        setTeamInfoData({
-          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 teamDetailData = await api.teamService.getTeamInfo(Number(teamID));
+      setTeamInfoData(teamDetailData);
     })();
   }, []);
 
@@ -68,23 +55,23 @@ function TeamMain() {
           <div>
             <button onClick={() => navigate(`/team/register`)}>수정</button>
           </div>
-          <img src={teamInfoData.teamImage ?? imgEmptyProfile} />
+          <img src={teamInfoData.teamDetailData.teamDetail.teamImage ?? imgEmptyProfile} />
           <div>
-            <h1>{teamInfoData.teamName}</h1>
+            <h1>{teamInfoData.teamDetailData.teamDetail.teamName}</h1>
             <h3>
               <button onClick={() => setIsMemberPopupOpened(!isMemberPopupOpened)}>
                 <img src={icPerson} />
-                <span>{teamInfoData.teamMemberCount}명</span>
-                {isMemberPopupOpened && <TeamMemberPopup members={teamInfoData.teamMemberList} />}
+                <span>{teamInfoData.teamDetailData.teamMemberCount}명</span>
+                {isMemberPopupOpened && <TeamMemberPopup members={teamInfoData.teamDetailData.teamMemberList} />}
               </button>
-              {teamInfoData.teamMemberList.map((member, index) => (
+              {teamInfoData.teamDetailData.teamMemberList.map((member, index) => (
                 <span key={member.id}>
                   {member.profileName}
-                  {index < teamInfoData.teamMemberCount - 1 ? ',\u00a0' : ''}
+                  {index < teamInfoData.teamDetailData.teamMemberCount - 1 ? ',\u00a0' : ''}
                 </span>
               ))}
             </h3>
-            <h2>{teamInfoData.teamDescription}</h2>
+            <h2>{teamInfoData.teamDetailData.teamDetail.teamDescription}</h2>
           </div>
         </StTeamInfo>
       )}