2차 프로젝트 정리

프로젝트 소개

Awwwards를 모티브로한 여행지사진 투표 및 추천 사이트(Front-end 3명 Back-end 2명 팀 Project)
Main Page와 Trip Detail Page 구현
투표 데이터를 백앤드 API로 전송하고, 결과를 반영하는 기능 구현
공통 컴포넌트의 선제적 구현을 통한 팀 시너지 창출
styled-component 사용된 파일의 분리로 가독성 및 유지보수성 증대

메인페이지

상단 랜덤피드와 하단 리스트들을 표시하는 컴포넌트.

<TripListDiv>
  {mainVisual && tripLists && mainList && (
     <>
       <MainVisual mainVisualData={mainVisual} />
       <ListDisplay tripLists={tripLists} />
       <ListDisplay tripLists={mainList} />
     </>
    )}
</TripListDiv>

랜덤피드는 공통컴포넌트(RatingCircle) 활용해 점수 시각화. 하단 리스트는 백엔드로부터 받은 특정 리스트들과 피드 전체를 표시하는 리스트로 구성.(메인 flow)

디테일페이지 - Body

선택한 피드의 디테일을 표시하고, 투표기능이 있는 컴포넌트.

<TripDetailBodyDiv>
  <TripCard listItem={detailData} />
  <TripDetailBodyDescription detailData={detailData} />
</TripDetailBodyDiv>

상단부는 공통컴포넌트(TripCard) 재활용. 투표기록을 객체형태의 state로 관리하며 승인버튼을 누르면 백엔드로 POST요청. response가 이미 투표한 피드라면 경고창 발생.(디테일 flow)

아쉬운점

Styled component 사용법과 사용이유에 대해 이해하고 있었다면 리팩토링 기간 줄일 수 있었을 것 같음.

메인에서 load more버튼 컴포넌트 분리 모호로 제외. 어떻게 작동될지 미리 생각했다면 구현할 수 있었을 것 같음.

느낀점

간단명료한 스프린트/스탠드업 미팅으로 프로젝트 진행상태 파악과 협업이 잘됐던 것 같음.

공통컴포넌트를 적극적으로 사용하며 팀 시너지를 증대.