프리온보딩 프론트 3팀 1주차 2번미션

프로젝트 설명

• 바딧 센서 관리 웹 페이지 통해 상태를 관리합니다.
• 서버 API, JSON데이터를 활용하여 UI에 정보를 출력합니다.
• 동적 라우팅을 통해 페이지를 구성합니다.
• 캘린더UI를 적용해서 날짜별로 그래프를 표시합니다.
• 웹에서 그래프 데이터를 CSV파일로 Export가능하도록 합니다.
  
  

언어

• JavaScript
• React.js
  
  

라이브러리

• styled-components
• styled-reset
• react-beautiful-dnd
• react-datepicker
• react-dom
• react-router-dom
• react-icons
• react-reveal
• react-tooltip
• axios
• date-fns
• prettier
• save
  
  

프로젝트 설치 및 실행 방법

✅ 설치방법

1. Node.JS를 다운받아 설치해주세요. vite를 사용하였기 때문에 최소 14.18 버전 이상이 요구됩니다.

https://nodejs.org/

2. 리포지토리를 클론해주세요.
   

git clone https://github.com/Poylib/pre-onboarding-3team-2nd.git

3.dependencies를 설치해주세요.

npm install

✅ 실행방법

1. 다음 명령어를 이용해 Dev server를 실행시켜주세요.

npm run dev

2. 브라우저에서 http://localhost:3000/pre-onboarding-3team-2nd/ 로 접속하거나, 배포주소로 접속해주시면 됩니다.

   
   
   
   

저작권, 라이선스 정보

[저작권] (주)바딧

• ✅ 프로젝트내 이미지는 모두 (주)바딧 에서 제공받았습니다.
  
  

기능 분담

구현 - [그래프페이지] 그래프UI, 좌표 클릭시 해당 시간대 그래프 출력, 해당 데이터 csv로 export

박찬영 - [리스트페이지] 리스트UI, 카테고리별 필터링(오름차순,내림차순)

이동호 - [리스트페이지] 리스트UI, 카테고리별 필터링(체크박스)

이유나 - [그래프페이지] 달력 UI, 달력 날짜 지정시 해당 날짜 그래프 출력

최승철 - [전체페이지] Nav UI, 해당 카테고리로 이동, 레이아웃 및 반응형

주요기능 및 설명

✅ 메인 카테고리별 Nav 구현

✅ 리스트 UI구현

✅ 리스트 카테고리별 필터링 구현

✅ 그래프 UI구현

✅ 시간별 그래프UI 구현

✅ 데이터 csv export 구현

✅ 캘린더 UI 구현

✅ 리스트 반응형UI 구현

✅ 그래프 반응형UI 구현

팀원소개

✅ 프론트엔드 구현

• 깃허브 https://github.com/Goohyun3436
• 블로그 https://velog.io/@3436rngus

✅ 프론트엔드 박찬영

• 깃허브 https://github.com/Poylib
• 블로그 https://poylib.tistory.com/

✅ 프론트엔드 이동호

• 깃허브 https://github.com/cratuss
• 블로그 https://cratuss.tistory.com/

✅ 프론트엔드 이유나

• 깃허브 https://github.com/yoon1257
• 블로그 https://velog.io/@yoon_reve

✅ 프론트엔드 최승철

• 깃허브 https://github.com/tmdcjf152
• 블로그 https://choa-ri.tistory.com/