Merge pull request #57 from Andrevile/feature/#45-TeamProfile

Feature/#45 team profile

apis/teams.api.ts

@@ -1,23 +1,29 @@
-import { TeamTypes } from 'types/team';
+import { PostType } from 'types/post';
+import { MemberTypes, TeamEditForm, TeamTypes } from 'types/team';
 import BaseAPI from './base.api';
 
 import type { CustomAxiosRequestConfig } from './type';
 
 class TeamsAPI extends BaseAPI {
   //https://apibora.shop/api/team/
+  createTeam(body: TeamEditForm, config: CustomAxiosRequestConfig) {
+    return this.post(``, body, config);
+  }
   checkTeamProfile(params: unknown) {
     return this.get<TeamTypes>(`/${params}`);
   }
-
-  //   editUser(params: unknown, body: UserEditForm, config: CustomAxiosRequestConfig) {
-  //     return this.put(`/${params}`, body, config);
-  //   }
-  //   kakaoOauth(body, config?: CustomAxiosRequestConfig) {
-  //     return this.post<PostOauthBody, PostOauthResponse>('kakao', body, { ...config });
-  //   }
-  //   googleOauth(body, config?: CustomAxiosRequestConfig) {
-  //     return this.post<PostOauthBody, PostOauthResponse>('google', body, { ...config });
-  //   }
+  getTeamMembers(params: unknown) {
+    return this.get<MemberTypes[]>(`/${params}/members`);
+  }
+  getTeamPosts(params: unknown) {
+    return this.get<PostType[]>(`/${params}/posts`);
+  }
+  editTeamProfile(params: unknown, body: TeamEditForm, config: CustomAxiosRequestConfig) {
+    return this.put(`${params}`, body, config);
+  }
+  deleteTeam(params: unknown, config: CustomAxiosRequestConfig) {
+    return this.delete(`${params}`, config);
+  }
 }
 
 export default new TeamsAPI('team');

apis/users.api.ts

@@ -4,8 +4,13 @@ import type { UserRegisterInfoType } from 'recoil/auth';
 import { User, UserEditForm } from 'types/user';
 import type { CustomAxiosRequestConfig } from './type';
 import { PostOauthBody, PostOauthResponse } from './type/users.types';
+import { TeamTypes } from 'types/team';
+
 class UsersAPI extends BaseAPI {
   //https://apibora.shop/api/users/
+  getTeamList(config: CustomAxiosRequestConfig) {
+    return this.get<TeamTypes[]>(`/teams`, config);
+  }
   checkUserName(params: unknown) {
     return this.get('/check_nickname', { params });
   }
@@ -15,14 +20,17 @@ class UsersAPI extends BaseAPI {
   }
 
   registerUser(body: UserRegisterInfoType) {
-    // id값이 서버에서 발급 받은 token 값을 의미하는지?
     return this.post(`/id`, body);
   }
 
   editUser(params: unknown, body: UserEditForm, config: CustomAxiosRequestConfig) {
     return this.put(`/${params}`, body, config);
   }
 
+  followingUser(params: unknown, config: CustomAxiosRequestConfig) {
+    return this.post(`/${params}/follow`, {}, config);
+  }
+
   kakaoOauth(body, config?: CustomAxiosRequestConfig) {
     return this.post<PostOauthBody, PostOauthResponse>('kakao', body, { ...config });
   }

components/Layout/styles.ts

@@ -2,6 +2,6 @@ import styled from 'styled-components';
 
 export const Wrapper = styled.div`
   max-width: ${(props) => props.theme.desktop};
-  padding: 0 30px;
+  padding: 0 30px 10px;
   margin: 0 auto;
 `;

components/Profile/ItemList/index.tsx

@@ -2,18 +2,18 @@ import React, { useEffect } from 'react';
 import * as S from './styles';
 import AddItemCard from 'components/common/AddItemCard';
 import Thumbnail from 'components/common/Thumbnail';
+import { PostType } from 'types/post';
 interface Props {
-  itemList: string[]; //데이터 형식에따라 타입 변환할 것
+  dataList: PostType[]; //데이터 형식에따라 타입 변환할 것
+  isLeader: boolean;
   editMode?: boolean;
 }
-const ItemList: React.FC<Props> = ({ itemList, editMode }) => {
+const ItemList: React.FC<Props> = ({ dataList, isLeader, editMode }) => {
   return (
     <S.ItemListWrapper>
-      {itemList.length ? (
-        itemList.map((item, i) => <Thumbnail key={i} item={item} editMode={editMode}></Thumbnail>)
-      ) : (
-        <AddItemCard></AddItemCard>
-      )}
+      {dataList.length > 0
+        ? dataList.map((item) => <Thumbnail key={item.id} item={item} editMode={editMode} />)
+        : isLeader && <AddItemCard></AddItemCard>}
     </S.ItemListWrapper>
   );
 };

components/Team/Manangement/AcceptApplyButton/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+const AcceptApplyButton = () => {
+  return <AcceptButton>수락</AcceptButton>;
+};
+
+export default AcceptApplyButton;
+
+const AcceptButton = styled.button`
+  width: 153px;
+  height: 48px;
+  background: ${({ theme }) => theme.color.PressedPrimaryGreen};
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  font-size: 16px;
+  line-height: 1.4375;
+  margin-right: 10px;
+`;

components/Team/Manangement/ExportMemberButton/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+const ExportMemberButton = () => {
+  return <ExportButton>내보내기</ExportButton>;
+};
+
+export default ExportMemberButton;
+
+const ExportButton = styled.button`
+  width: 153px;
+  height: 48px;
+  background: ${({ theme }) => theme.color.gray_200};
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  font-size: 16px;
+  line-height: 1.4375;
+  margin-right: 10px;
+`;

components/Team/Manangement/ManagedMemberCard/index.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ImgWrapper } from 'pages/profile';
+
+import { default_profile } from 'constants/imgUrl';
+import { Keyword } from 'components/common/Atomic/Tabs/Keyword';
+import { numberWithCommas } from 'utils/numberWithCommas';
+
+interface Props {
+  leftButton: JSX.Element;
+  rightButton: JSX.Element;
+}
+
+const ManagedMemberCard = ({ leftButton, rightButton }: Props) => {
+  return (
+    <CardContainer>
+      <div>
+        <ImgWrapper alt="icon-profile" src={default_profile} width={58} height={58} />
+
+        <InfoSection>
+          <h1>멤버명</h1>
+          <div>
+            <Keyword>일러스트레이션</Keyword>
+          </div>
+          <CountContainer>
+            <span>팔로워</span>
+            <span>{numberWithCommas(22222)}</span>
+            <span>팔로잉</span>
+            <span>{numberWithCommas(2222)}</span>
+            <span>작업물</span>
+            <span>{numberWithCommas(2222)}</span>
+          </CountContainer>
+        </InfoSection>
+      </div>
+      <div>
+        {leftButton}
+        {rightButton}
+      </div>
+    </CardContainer>
+  );
+};
+
+export default ManagedMemberCard;
+
+const CardContainer = styled.div`
+  width: 364px;
+  height: 194px;
+  background-color: ${({ theme }) => theme.color.white};
+  border: 1px solid ${({ theme }) => theme.color.gray_400};
+  border-radius: 12px;
+  padding: 24px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const InfoSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 24px;
+  margin-bottom: 9px;
+  & h1 {
+    font-weight: ${({ theme }) => theme.fontWeight.medium};
+    font-size: 16px;
+    line-height: 1.4375;
+    letter-spacing: 0.02em;
+    color: ${({ theme }) => theme.color.profileNameBlack};
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  & > p {
+    width: 342px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+const CountContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  span {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 1.833333;
+    letter-spacing: -0.01em;
+    color: ${({ theme }) => theme.color.gray_400};
+    margin-right: 8px;
+  }
+  span:nth-child(2n-1) {
+    margin-right: 4px;
+    color: ${({ theme }) => theme.color.gray_700};
+  }
+`;

components/Team/Manangement/MessageButton/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Image from 'next/image';
+import styled from 'styled-components';
+import { message_icon } from 'constants/imgUrl';
+const MessageButton = () => {
+  return (
+    <MessageBtn>
+      <figure>
+        <Image src={message_icon} width={24} height={24} />
+      </figure>
+      메시지
+    </MessageBtn>
+  );
+};
+
+export default MessageButton;
+
+const MessageBtn = styled.button`
+  width: 153px;
+  height: 48px;
+  background: ${({ theme }) => theme.color.PressedPrimaryGreen};
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  font-size: 16px;
+  line-height: 1.4375;
+
+  & > figure {
+    margin-right: 12px;
+    position: relative;
+    top: 1.2px;
+    display: flex;
+    align-items: center;
+  }
+`;

components/Team/Manangement/QuitTeam/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { QuitButton } from 'components/common/Atomic/Tabs/Button';
+
+const QuitTeam = () => {
+  return (
+    <QuitButton>
+      <span>팀 나가기</span>
+    </QuitButton>
+  );
+};
+
+export default QuitTeam;

components/Team/Manangement/RejectApplyButton/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+const RejectApplyButton = () => {
+  return <RejectButton>거절</RejectButton>;
+};
+
+export default RejectApplyButton;
+
+const RejectButton = styled.button`
+  width: 153px;
+  height: 48px;
+  background: ${({ theme }) => theme.color.gray_200};
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  font-size: 16px;
+  line-height: 1.4375;
+  margin-right: 10px;
+`;