📝 원티드 프리 온보딩 3주차 과제 - 많은 데이터 출력 페이지

📌배포 링크

• 배포링크

📌프로젝트 소개

많은 데이터(정보)를 한눈에 보고 손쉽게 처리하기 위한 방식으로 제작된 프로젝트입니다.

📌기술 스택

📌팀원 소개

김기영	이도현
FE Developer	FE Developer

📌프로젝트 참고 사항

• 각 테이블 column의 우선순위를 설정해서 중요한 정보를 먼저 화면에 보일 수 있도록 했습니다.

• 뒤쪽에 존재하는 정보들도 어디서든 한번에 확인할 수 있게, 각 테이블의 row를 클릭하면 모든 정보를 보여주도록 구현했습니다.

• 다양한 모니터 크기 ~ 태블릿 pc 화면을 고려해서 UI를 설계했습니다.

• 화면의 50%를 차지했던 출고 신청 정보 메뉴를 각 테이블 메뉴에 넣어 공간활용을 했습니다.

  
  

📌구현 기능 목록

✔ 담당자 : 김기영

• 과제에 주어진 사진과 최대한 비슷하게 동작하기 위한 Mock Data 생성, 타입 선언
• 테이블 구현

✔ 담당자 : 이도현

• 테이블 컬럼 순서를 변경할 수 있는 모달 구현
• 드래그앤 드롭으로 테이블의 컬럼을 순서대로 변경할 수 있도록 구현

📌프로젝트 시연 영상

• 테이블 행 클릭 시 더 많은 정보 노출

• 상단 테이블 헤더 최우측 햄버거 버튼 클릭 시 필터 노출. 원하는 메뉴 선택, 삭제 가능. 선택된 메뉴 드래그 & 드롭으로 순서 조정 가능.
  

📌프로젝트 설치 및 시작

프로젝트 클론

$ git clone https://github.com/2201infinity/data-output.git

패키지 설치

$ yarn

서버 실행

$ yarn start