sgsg9447 / ad-platform-dashboard

원티드 프리온보딩 프론트엔드 코스 5팀 2주차 과제 - 광고 플랫폼 대시보드

1. 프로젝트 설치 및 실행

git clone https://github.com/sgsg9447/ad-platform-dashboard.git

npm i
npm run server
npm start  

2. 프로젝트 소개

주제: 광고 플랫폼 대시보드

프로젝트 기간: 2022.07.14 ~ 2022.07.20

3. 기술 스택

react type-script styled-components axios json server recoil

4. 기술스택

typescript json-server recoil styled-components styled-reset react-hook-form react-router-dom mui

5. 역할 분담

1. 대시보드 페이지

팀원 이름	기능
이유미	대시보드 차트 구현
김연진	통합관리 테이블 구현

2. 광고관리 페이지

팀원 이름	기능
김슬기	광고카드 보여주기, 수정, 삭제, 생성(CRUD)

6. 광고관리 페이지 상세 제작 과정

1일차 2일차 3일차 4일차

7. 프로젝트 구조

database
 ┣ database.json
src
 ┣ api
 ┃ ┗ api.ts
 ┣ components
 ┃ ┣ admanagement
 ┃ ┃ ┣ AdCreateItem.tsx
 ┃ ┃ ┣ AdItem.tsx
 ┃ ┃ ┗ AdList.tsx
 ┃ ┗ dashboard
 ┃ ┃ ┣ channelStatus
 ┃ ┃ ┃ ┣ BasicTable.tsx
 ┃ ┃ ┃ ┣ ChannelStatus.tsx
 ┃ ┃ ┃ ┗ StackedBarChart.tsx
 ┃ ┃ ┗ totalAdStatus
 ┃ ┃ ┃ ┣ LegendItem.tsx
 ┃ ┃ ┃ ┗ TotalAdStatus.tsx
 ┣ layouts
 ┃ ┣ DefaultLayout.tsx
 ┃ ┣ Dropdown.tsx
 ┃ ┣ DropdownItem.tsx
 ┃ ┣ Header.tsx
 ┃ ┗ Sidebar.tsx
 ┣ models
 ┃ ┣ types
 ┃ ┃ ┗ index.d.ts
 ┃ ┣ useAdListModel.ts
 ┃ ┗ useFormatModel.ts
 ┣ pages
 ┃ ┣ AdManagement.tsx
 ┃ ┗ Dashboard.tsx
 ┣ router
 ┃ ┗ Router.tsx
 ┣ store
 ┃ ┣ atom.ts
 ┃ ┣ dateAtom.ts
 ┃ ┣ queryAtom.ts
 ┃ ┗ statusAtom.ts
 ┣ styles
 ┃ ┗ Item.tsx
 ┣ App.css
 ┣ App.tsx
 ┣ index.css
 ┣ index.tsx
 ┣ react-app-env.d.ts
 ┗ setupTests.ts