/dashboard

Primary LanguageTypeScript

프로젝트 소개

원티드 프리온보딩 2주차

광고 대시보드 서비스 팀프로젝트 입니다.

팀원

이름 팀 구성 기능 구현 및 역할
김수빈 팀원
Frontend
- mui 라이브러리로 ui 구현
- table data api 작업
김민주 팀원
Frontend
- mui 라이브러리로 ui 구현
- 광고관리 페이지 작업
이상지 팀장
Frontend
- 기획, UI/UX 디자인 및 레이아웃
- 프로젝트 초기세팅
- 헤더 구현
- 드롭다운 연관 검색어 기능 구현
- 스크럼 진행 및 개발일정 관리
이혜림 팀원
Frontend
- ReChart.js 로 차트들 제작
- Recoil로 날짜 데이터를 전역으로 관리 / 동기화
- 차트 테마를 바뀌게 하는 기능!
홍승연 팀원
Frontend
- 수빈님과 함께 table data api 작업
- table chart 렌더링


기술 스택

React.js TypeScript

recoil axois date-fns MUI json-server classnames styled-components



구현 조건

  1. 라우터를 활용하여 sub routing을 구현한다.
  2. chart 라이브러리를 이용하여 라인 차트, 스택차트를 구현한다.
  3. table을 구현한다.

폴더 구조

폴더 구조 정리

추가예정


상세 기능 구현 설명

수빈

UI 구현

  • MUI 라이브러리를 사용하여 UI 구현
  • 반응형

main



mobile_main



table data api platform_sum 각 회사 별 데이터들을 합산하여 {name: 'keyname', sum: 값} 구조로 리턴


혜림

  • ReChart.js 로 차트들 제작
    • 동적으로 바뀌는 차트 제작!
  • Recoil로 날짜 데이터를 전역으로 관리 / 동기화
    • 주말 기준으로 일주일씩 끊고 start날짜가 주말이 아닐 경우에는 앞을 끊어서 보여줍니다.
  • 차트 테마를 바뀌게 하는 기능!
    • 드롭다운을 누르면 차트의 테마를 바꿀수 있음!

승연

  • 수빈님과 함께 table data api 작업

1

  • table chart 렌더링

1

민주

  • MUI 라이브러리를 사용한 광고관리 페이지 UI 구현
  • 광고 상태에 따른 필터링 기능
  • 광고json을 불러와 카드로 출력 후 광고 수정하기 버튼으로 해당 정보만 input에 삽입