Feat: 상세 페이지 요약 카드 구현

[nakyoung98]

📌요구사항

• 상세 페이지 요약 카드 컴포넌트 구현

📌작업 진행 상황 (에러, 막혔던 부분, 그외 궁금한것 등등)

ProjectDetailCard

• 프로젝트의 상세 정보를 집약적으로 보여주는 컴포넌트
• Table컴포넌트 내의 Row에 데이터를 map하여 보여줌

Prop

• ProjectCategory
  • 스터디 / 프로젝트
• ProjectDetailContentType
  ProjectDetailKey를 기준으로 만들어진 Type
  • recruitEndAt: 모집 마감일
  • progressPeriod: 프로젝트의 진행 기간
  • progressWay: 프로젝트의 진행 방식 (온라인, 오프라인 등)
  • contactWay: 연락 방법 (예: 이메일, 오픈톡 등)
  • capacity: 모집 인원
  • positions: 모집 포지션 (배열 형태로 여러 포지션 지정 가능)
  • stacks: 사용 기술 스택 (배열 형태로 여러 기술 지정 가능)

데이터 예시

const projectDetailContents: ProjectDetailContentType = {
  'recruitEndAt': '2024.3.8',
  'progressPeriod': '2개월',
  'progressWay': '온/오프라인',
  'contactWay': '오픈톡',
  'capacity': '2명',
  'positions': ['프론트엔드','백엔드','기획','안드로이드'],
  'stacks': ['React','Node.js','MongoDB','Express','Java','Kotlin']
}

ProjectDetailTable

• 테이블 디자인만 존재함
• 내부의 ProjectDetailRow를 넣으면 정해진 gap으로 배치됨
  
  
  

ProjectDetailRow

• RenderType에 따라 데이터를 Render해서 Row를 만드는 컴포넌트

Prop

• label: 제목
• content:내용, string 혹은 string 배열
• renderType: 렌더될 타입 - types.ts에 정의된 RenderType을 따릅니다

export type RenderType = "text" | "positionChip" | "stackIcon";
//Chip이랑 Icon은 배열이어야만 정상적으로 render함

types

ProjectDetailConfig

• ProjectDetailCard 내부에서 Table에게 전달할 Table Config
• label에 붙을 이름과, 내부 내용, 렌더타입을 지정해주면됨
• 현재는 ProjectDetailCard 내에 직접적으로 객체를 만들었는데, 나중에 수정해야할 것 같습니다

export type ProjectDetailConfig = {
    [key in ProjectDetailKey]: {
        label: string;
        content: string | string[];
        renderType: RenderType;
    }
}

📌스크린샷 / 테스트결과 (선택)

co-KKIRI.-.Chrome.2024-03-13.11-25-57.mp4

📌이슈 번호

Closes: #21

[github-actions]

올바른 PR 형식

올바른 PR 형식입니다.
코드 작성하시느라 수고 많으셨습니다 :)