- 프로젝트 소개
- 역할
- 프로젝트 요약
- 폴더 구조
- 구현
- 프로젝트 설치 및 실행
- 회의록
- 프로젝트 결과물
개요 : 원티드 프리온보딩 5기 2주차 세 번째 팀 과제
주제 : 광고 플랫폼 대시 보드
기간 : 2022.07.13 ~ 2022.07.20
| 이름 | 직책 | 역할 |
|---|---|---|
| 추연빈 | 팀장 | 📌카드 컴포넌트 구현 📌광고관리 페이지 조립 |
| 엄일경 | 팀원 | 📌누적 막대형 차트 구현 📌광고 수정 페이지 조립 📌사이드바 / 헤더바 |
| 임은지 | 팀원 | 📌대시보드 라인 차트 구현 📌대시보드 페이지 조립 |
| 오태권 | 팀원 | 📌대시보드 주요 지표 구현 |
| 이진희 | 팀원 | 📌매체현황 테이블 구현 📌광고 추가/수정 폼 구현 📌광고 추가 페이지 조립 |
| 문성운 | 팀원 | 📌http 통신 모듈 구현 📌react query 구현 |
- Server State를
패칭,캐싱,동기화,업데이트작업이 필요 - Server State를 관리하기 위해, 적절한
useQuery를 사용하도록 기획- Query Key에 따라, query caching을 관리
- 전반적인 플랫폼의 UI는 실용적이고 빠르게 구현할 수 있도록,
Meterail-UI라이브러리 사용 기획- 다소 편리한 사용법, styled component 사용하여 커스텀이 가능함
apexcharts라이브러리를 사용 기획- 권장 라이브러리보다 더 예쁜 디자인, 팀원들 사용 경험이 좋음
📁public
└──images
│ └──Logo.png
├──favicon.ico
├── 📁src
│ ├── 📁components
│ │ ├──📁adForm
│ │ │ ├─AdForm.tsx
│ │ │ ├─CurrencyField.tsx
│ │ │ └─index.tsx
│ │ └─📁Card
│ │ ├─HeaderBar.tsx
│ │ ├─MuiDrawer.tsx
│ │ └─SideBar.tsx
│ ├── 📁 database
│ │ ├─campaign.json
│ │ ├─index.js
│ │ ├─overall.json
│ │ └─platform.json
│ ├── 📁 hooks
│ │ └─useInput.ts
│ ├── 📁layouts
│ │ └─DefaultLayout.tsx
│ ├── 📁pages
│ │ ├─📁adAdd
│ │ │ └─index.tsx
│ │ ├─📁adEdit
│ │ │ └─index.tsx
│ │ ├─📁adManagement
│ │ │ ├─index.tsx
│ │ │ └─MyListCard.tsx
│ │ ├─📁adManagement
│ │ │ ├─index.tsx
│ │ │ └─Wrapper.tsx
│ │ └──📁dashboard
│ │ ├─Advertisement.tsx
│ │ ├─index.tsx
│ │ ├─Indicators.tsx
│ │ ├─IntergratedAd.tsx
│ │ ├─Loader.tsx
│ │ ├─PlatformChart.tsx
│ │ ├─PlatformChart.tsx
│ │ └─Wrapper.tsx
│ ├── 📁queries
│ │ ├─movieService.ts
│ │ ├─queryRequest.ts
│ │ └─service.ts
│ ├── 📁routes
│ │ └─DefultRouter.tsx
│ ├── 📁Styles
│ │ └─index.css
│ ├── 📁types
│ │ ├─campaign.d.ts
│ │ ├─overall.d.ts
│ │ └─platform.d.ts
│ ├── 📁utils
│ │ ├──📁constants
│ │ │ ├──chart.ts
│ │ │ ├──currency.ts
│ │ │ └──data.ts
│ │ └──📁helpers
│ │ │ ├──chart.ts
│ │ │ ├─compareValue.ts
│ │ │ └──formatters.ts
├── App.tsx
├── index.tsx- 메뉴에 각 페이지로 이동하는 탭이 포함 구현
- 메뉴는 모바일 환경에서 480px이하 접히며, 헤더에 포함되고,
hamburger icon으로 변경되며, 클릭 시 메뉴 탭을 볼 수 있도록 화면에 노출 구현
-
유저 아바타와유저이름,설정,알림 아이콘을 포함 구현- 설정과 알림 아이콘은 기능적인 요소 X
-
대시보드에는
Line chart와,stacked bar chart구현- ApexCharts 차트 라이브러리 사용
-
통합 광고 현황의 데이터를 활용하여 통합 광고 현황 컴포넌트를 개발하세요.
-
통합 광고 현황의
드랍다운을 클릭 할 때마다데이터가 변경구현-
uaeQuery를 사용하여, 데이터 패칭
-
-
주간 별 조회를 할 수 있어야 합니다. 조회 주간을 변경하면 두 개의 차트 데이터도 변경되어야 합니다.
-
Line chart의데이터는ROAS와클릭수를 출력 구현 -
매체 현황의 데이터를 활용하여 매체 현황 컴포넌트 개발 구현
-
PlatFormchart/PlatFormtable
-
- 광고 관리 페이지 상단의
드랍다운으로전체,현재 진행중인 광고,종료된 광고를filtering구현 - 수정 버튼을 클릭하여
수정할 수 있고, 광고 만들기로생성할 수 있어야 합니다.
- Git Clone
$ git clone
- 프로젝트 실행
$ npm install
$ npm run server
$ npm start
