gkdfo40 / madup-2b

매드업 2B팀

소개

• 차트가 있는 웹사이트 개발
• 팀원: 김준엽 김항래 김보현 최덕희 최민정
• 기간: 5/23 ~ 5/25
• 배포: https://master--madup2b.netlify.app/

기술스택

• React, TypeScript
• 상태관리: Recoil
• 차트 라이브러리: Victory
• datepicker 라이브러리: react-datepicker

폴더구조

├─assets
│  ├─json
│  └─svgs
├─components
│  ├─Loading
│  └─Profile
├─hooks
│  └─state
├─recoil
├─routes
│  ├─dashboardPage
│  │  ├─DashBoardHeader
│  │  ├─Media
│  │  │  ├─PercentColumnChart
│  │  │  │  └─ChartLegend
│  │  │  └─Table
│  │  ├─Status
│  │  │  ├─InfoList
│  │  │  └─IntergratedAdStatus
│  │  │      ├─DropDown
│  │  │      └─InterChart
│  │  └─_shared
│  │      └─ContentBox
│  ├─managementPage
│  │  ├─ManagementItem
│  │  ├─ManagementList
│  │  └─OptionBar
│  │      └─Dropbar
│  └─_shared
│      └─GNB
├─services
├─styles
│  ├─base
│  ├─constants
│  └─mixins
├─types
└─utils

기능

• 대시보드: 선택된 날짜에 따라 통합광고 현황과 매체 현황이 표시됩니다.
  • 날짜선택: 달력으로 날짜를 선택합니다.
  • 통합광고현황: 상황판, 선차트
  • 광고 현황 데이터 : 선택한 날짜 범위의 데이터 총합을 보여줍니다. 선택한 날짜의 범위만큼 이전과 비교하여 데이터의 증감량을 표시하고, 데이터가 충분하지 않아서 증감량을 표시할 수 없을때에는 데이터의 총합만 표시합니다.
  • 매체현황: 매체현황 데이터를 퍼센트 막대 차트로 각 회사에서 차지하는 비율을 보여줍니다. 그리고 표로 데이터를 보여줍니다.
• 광고관리: 광고관리 데이터를 필터에 따라 조회합니다.

동작

• 통합광고현황

• 광고관리