[SP4] 소개탭 하단 작업 (#353)

* feat: 소개탭 SectionTop 컴포넌트 구현

* style: 배너 스타일링

* feat: 핵심 가치 작업

* style: 소개탭 레이아웃 수정

* chore: 사용하지 않는 코드 제거

* chore: 오탈자 수정

* style: 커리큘럼 스타일링

* style: 핵심 가치 배경 이미지 크기 조정

* feat: 커리큘럼 이미지 sizes props 설정

* feat: 멤버 섹션을 파트장 섹션으로 변경

* feat: 활동 레코드 부분 수정

* fix: 임원진 반응형 스타일 수정

* fix: 활동 레코드 반응형 수정

* fix: 스터디 잘못된 링크 없애기

---------

Co-authored-by: solar3070 <>

src/lib/api/mock/about.ts

@@ -51,18 +51,112 @@ const getAboutInfo = async (): Promise<GetAboutInfoResponse> => ({
   },
 });
 
-const getMemberInfo = async (part?: Part): Promise<GetMembersInfoResponse> => ({
-  members: Array.from({ length: 12 }, () =>
-    (part ? [part] : [Part.PLAN, Part.ANDROID, Part.DESIGN, Part.IOS, Part.SERVER, Part.WEB]).map(
-      (part) => ({
-        id: Math.floor(Math.random() * 200),
-        name: '이주함',
-        description: `2023년 현존하는 최고의 ${part}`,
-        part,
-        src: SRC,
-      }),
-    ),
-  ).flat(),
+const getMemberInfo = async (): Promise<GetMembersInfoResponse> => ({
+  members: [
+    {
+      id: 80,
+      name: '양정윤',
+      position: '회장',
+      currentProject: 'palmspring',
+      description: '알은 세계이다. 태어나려는 자는 세계를 부숴야 한다.',
+      imageSrc: '/images/members/80.png',
+      gmail: '[email protected]',
+    },
+    {
+      id: 291,
+      name: '김대덕',
+      position: '부회장',
+      currentProject: 'palmspring',
+      imageSrc: '/images/members/291.png',
+      gmail: '[email protected]',
+    },
+    {
+      id: 49,
+      name: '이호재',
+      position: '총무',
+      currentProject: 'ZOOC',
+      description: '함께 성장하는 환경',
+      imageSrc: '/images/members/49.png',
+      gmail: '[email protected]',
+    },
+    {
+      id: 246,
+      name: '김해린',
+      position: '미디어 팀장',
+      currentProject: '타투어',
+      description: '순간의 감정까지 쌓이도록 온 마음을 담아 기록합니다',
+      imageSrc: '/images/members/246.png',
+      gmail: '[email protected]',
+      linkedin: '해린-김-bb4a8027a',
+    },
+    {
+      id: 354,
+      name: '이승준',
+      position: '운영 팀장',
+      currentProject: '엄빠도 어렸다',
+      description: '안녕하세요',
+      imageSrc: '/images/members/354.png',
+      gmail: '[email protected]',
+    },
+    {
+      id: 408,
+      name: '서지원',
+      position: '기획 파트장',
+      currentProject: 'ASAP',
+      description: '프로덕트 성공에 대한 모든 책임을 질 것',
+      imageSrc: '/images/members/408.png',
+      gmail: '[email protected]',
+    },
+    {
+      id: 174,
+      name: '김채현',
+      position: '디자인 파트장',
+      currentProject: '타투어',
+      imageSrc: '/images/members/174.png',
+      gmail: '[email protected]',
+    },
+    {
+      id: 57,
+      name: '이태희',
+      position: '안드로이드 파트장',
+      currentProject: 'SPARKLE',
+      description: '안드로이드 그 자체가 되고 싶은 남자',
+      imageSrc: '/images/members/57.png',
+      gmail: '[email protected]',
+      github: 'taeheeL',
+      linkedin: '태희-이-b4988a272',
+    },
+    {
+      id: 387,
+      name: '박익범',
+      position: 'iOS 파트장',
+      currentProject: 'SPARKLE',
+      imageSrc: '/images/members/387.png',
+      gmail: '[email protected]',
+      github: 'parkikbum',
+    },
+    {
+      id: 209,
+      name: '김서현',
+      position: '웹 파트장',
+      currentProject: 'palmspring',
+      description: '사용자를 생각하는 개발자',
+      imageSrc: '/images/members/209.png',
+      gmail: '[email protected]',
+      github: 'seobbang',
+      linkedin: 'seohyun-kim-9784ab29a',
+    },
+    {
+      id: 152,
+      name: '최윤한',
+      position: '서버 파트장',
+      currentProject: '스밈, 포포리, 캐쳡',
+      description: '아슈파',
+      imageSrc: '/images/members/152.png',
+      gmail: '[email protected]',
+      github: 'unanchoi',
+    },
+  ],
 });
 
 const getStudyInfo = async (): Promise<GetStudyInfoResponse> => ({

src/lib/api/remote/about.ts

@@ -4,11 +4,11 @@ import {
   GetMembersInfoResponse,
   GetStudyInfoResponse,
 } from '@src/lib/types/about';
-import { CoreValueResponseDto, MemberResponseDto, StudyResponseDto } from '@src/lib/types/dto';
+import { CoreValueResponseDto, StudyResponseDto } from '@src/lib/types/dto';
 import { Part } from '@src/lib/types/universal';
 import { parseStringToPart } from '@src/lib/utils/parseStringToPart';
 import axios from 'axios';
-import qs from 'qs';
+import { mockAboutAPI } from '../mock/about';
 
 const client = axios.create({
   baseURL: BASE_URL,
@@ -51,43 +51,8 @@ const getAboutInfo = async (): Promise<GetAboutInfoResponse> => {
   };
 };
 
-const partToFilterParam: Record<Part, number> = {
-  PLAN: 1,
-  DESIGN: 2,
-  WEB: 3,
-  SERVER: 4,
-  ANDROID: 5,
-  iOS: 6,
-};
-
-const getMemberInfoParams = (part?: Part): { filter?: number; generation: number } => {
-  const generation = 32;
-
-  if (!part) return { generation };
-
-  const filter = partToFilterParam[part];
-
-  return { filter, generation };
-};
-
-const getMemberInfo = async (part?: Part): Promise<GetMembersInfoResponse> => {
-  const parameter = qs.stringify(getMemberInfoParams(part));
-
-  const {
-    data: { members },
-  } = await client.get<{ members: MemberResponseDto[] }>(`/member?${parameter}`);
-
-  return {
-    members: members
-      .filter((member) => member.name && member.part)
-      .map((member) => ({
-        id: member.id,
-        name: member.name,
-        description: member.introduction,
-        part: member.part,
-        src: member.profileImage,
-      })),
-  };
+const getMemberInfo = async (): Promise<GetMembersInfoResponse> => {
+  return mockAboutAPI.getMemberInfo(); // todo : implement server connection
 };
 
 const getStudyInfo = async (): Promise<GetStudyInfoResponse> => {

src/lib/types/about.ts

@@ -9,11 +9,29 @@ export interface CoreValueType {
 export interface MemberType {
   id: number;
   name: string;
+  position: PositionType;
+  currentProject: string;
   description?: string;
-  part: string;
-  src?: string;
+  imageSrc?: string;
+  gmail?: string;
+  linkedin?: string;
+  github?: string;
 }
 
+export type PositionType =
+  | '회장'
+  | '부회장'
+  | '총무'
+  | '미디어 팀장'
+  | '운영 팀장'
+  | '기획 파트장'
+  | '디자인 파트장'
+  | '안드로이드 파트장'
+  | 'iOS 파트장'
+  | '웹 파트장'
+  | '서버 파트장'
+  | '';
+
 export interface AboutInfoType {
   generation: number;
   title: string;
@@ -56,7 +74,7 @@ export interface GetStudyInfoResponse {
 
 export interface AboutAPI {
   getAboutInfo(): Promise<GetAboutInfoResponse>;
-  getMemberInfo(part?: Part): Promise<GetMembersInfoResponse>;
+  getMemberInfo(): Promise<GetMembersInfoResponse>;
   getStudyInfo(generation?: number): Promise<GetStudyInfoResponse>;
 }
 

src/pages/about.tsx

@@ -22,11 +22,11 @@ const AboutPage = ({ aboutInfo }: InferGetServerSidePropsType<typeof getStaticPr
           coreValues={aboutInfo.aboutInfo.coreValue.eachValues}
         />
         <CurriculumSection curriculums={aboutInfo.aboutInfo.curriculums} />
+        <MemberSection generation={aboutInfo.aboutInfo.generation} />
         <RecordSection
           generation={aboutInfo.aboutInfo.generation}
           records={aboutInfo.aboutInfo.records}
         />
-        <MemberSection generation={aboutInfo.aboutInfo.generation} />
       </Root>
     </PageLayout>
   );

src/views/AboutPage/components/Member/Card/index.tsx

@@ -1,22 +1,59 @@
+import { ReactComponent as IcGithub } from '@src/assets/icons/ic_github.svg';
+import { ReactComponent as IcLinkedin } from '@src/assets/icons/ic_linkedin.svg';
+import { ReactComponent as IcMail } from '@src/assets/icons/mail.svg';
 import NullImage from '@src/assets/images/null_image.png';
+import { PositionType } from '@src/lib/types/about';
 import * as St from './style';
 
 type MeberCardProps = {
-  imgSrc?: string;
   name: string;
+  position: PositionType;
   description?: string;
-  part: string;
+  currentProject: string;
+  imageSrc?: string;
+  gmail?: string;
+  linkedin?: string;
+  github?: string;
 };
 
-const MemberCard = ({ imgSrc, name, description, part }: MeberCardProps) => {
+const MemberCard = ({
+  name,
+  position,
+  description,
+  currentProject,
+  imageSrc,
+  gmail,
+  linkedin,
+  github,
+}: MeberCardProps) => {
   return (
     <St.Card>
       <St.ImageWrapper>
-        <St.ProfileImage src={imgSrc || NullImage.src} alt={`${name}의 프로필`} fill />
+        <St.ProfileImage src={imageSrc || NullImage.src} alt={`${name}의 프로필`} fill />
       </St.ImageWrapper>
-      <St.Name>{name}</St.Name>
+      <St.NameWrapper>
+        <St.Position>{position}</St.Position>
+        <St.Name>{name}</St.Name>
+      </St.NameWrapper>
+      <St.CurrentProject>{currentProject}</St.CurrentProject>
       <St.Desc>{description || '-'}</St.Desc>
-      <St.Part>{part}</St.Part>
+      <St.LinkWrapper>
+        {gmail && (
+          <St.AnchorIconWrapper href={`mailto:${gmail}`}>
+            <IcMail />
+          </St.AnchorIconWrapper>
+        )}
+        {linkedin && (
+          <St.AnchorIconWrapper href={`https://www.linkedin.com/in/${linkedin}`}>
+            <IcLinkedin />
+          </St.AnchorIconWrapper>
+        )}
+        {github && (
+          <St.AnchorIconWrapper href={`https://github.com/${github}`}>
+            <IcGithub />
+          </St.AnchorIconWrapper>
+        )}
+      </St.LinkWrapper>
     </St.Card>
   );
 };