필터링 기능이 있는 대시보드를 구현한 과제입니다.
배포 링크
Table of Contents
 |
 |
 |
 |
| 👑 윤희준 (팀장) | 정서영 | 염상권 | 김재원 |
| GNB 및 레이아웃 | 드롭다운 버튼 | 슬라이더 버튼 | 견적 요청 카드 |
- 필터링 기능
- mobile 버전
- GNB
- 'CAPA 파트너스' 로고, 가공 업체, 로그아웃 버튼 구현
- mobile 화면에서 메뉴 버튼 클릭 시 슬라이드 메뉴 생성
- 버튼
- 드롭다운 버튼 클릭 시 서브메뉴 표시
- 서브메뉴 선택 시 '필터링 리셋' 버튼 생성
- '필터링 리셋' 버튼 클릭 시 선택된 서브메뉴 요소 초기화
- 슬라이더 버튼 구현
- 견적 요청 카드
- 서브메뉴 선택 혹은 필터링 리셋 버튼 클릭 시 조건에 맞는 카드만 표시
- 조건에 맞는 카드가 없을 경우 빈 화면 표시
- GNB, 버튼, 견적 요청 카드에 반응형 레이아웃 구현
배포 링크가 동작하지 않을 시, local에서 프로젝트를 실행하는 방법을 작성할 영역입니다.
- NPM을 설치한다
npm install npm@latest -g
- json-server를 설치한다
npm i -g json-server
- Repository를 clone한다.
git clone https://github.com/team-tyranno/wanted-Ateamventures.git- NPM Package들을 설치한다.
npm install- 빌드 파일을 만든다.
npm run build- Localhost 환경에서 프로젝트를 실행한다.
npm start
# 이후 http://localhost:3000에서 결과물 확인.
├── @types
├── public
│ └── index.html
├── server
│ ├── db.json
│ └── index.js
└── src
├── assets // font, images
├── commons // constants
├── components // Atomic Design에 따른 컴포넌트
├── pages
├── styles // global styles
├── types
└── index.tsx라이센스를 표시할 영역입니다.
Distributed under the MIT License. See LICENSE for more information.