이름 | Github | 담당 기능 |
---|---|---|
우종원 | Ubermensch0608 | 카드 컴포넌트 구현, 재사용 가능 컴포넌트 구현, 컴포넌트 분리 |
박중섭 | crucial-sub | 반응형 헤더 & 메뉴 구현 |
이태림 | ttaerrim | 필터링 기능 구현 |
임수영 | penguin311 | CRA 초기 세팅, 토글 기능 구현 |
담당 기능은 일단 pull request 보고 적었는데 수정하시면 돼요~~!
# clone the project
$ git clone https://github.com/console-lo9/requests-for-partner.git
# install modules
$ cd requests-for-partner
$ npm ci
# start
$ npm run dev
⠀
⠀ You can now view this project in the browser.
⠀ http://localhost:3000/
⠀
⠀ Resources
⠀ http://localhost:4000/requests
⠀
"dependencies": {
"@types/jest": "^27.4.0",
"@types/node": "^16.11.22",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"axios": "^0.25.0",
"concurrently": "^7.0.0",
"json-server": "^0.17.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"styled-components": "^5.3.3",
"styled-normalize": "^8.0.7",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
안 쓰는 패키지 있으면 삭제하고 올리기
├── public
└── src
├── assets
├── components
│ ├── Cards
│ ├── Filter
│ ├── Header
│ └── Toggle
├── layout # 재사용 가능 컴포넌트
├── pages
└── utils
└── constants # 상수 관리
작성 후 삭제 참고 (https://www.lesstif.com/lpt/linux-tree-54952142.html)
$ tree -N -L 2 -d -I "node_modules"
또는 vscode File-tree-generator extension 사용
-
typescript 구현
-
헤더
-
json-server 사용
- concurrently 라이브러리 사용해 json-server와 react 동시 실행
-
견적 요청 카드
- 프로젝트 명
- 요청한 고객사
- 고객의 희망 납기일
- 요청한 도면 개수
- 요청한 제품 총 수량
- 가공 방식: 도면 별로 밀링, 선반 중 한 가지 방식 선택
- 재료: 도면 별로 한 가지 재료 선택
- ❗️ 재료 필터의 합금강을 스테인리스강으로 수정
- 카드 전체 영역에 마우스 hover시 보더 스타일
-
필터링
- 가공 방식 필터가 선택되면 해당 방식 조건이 포함된 카드 모두 노출
- 재료 필터 선택되면 해당 재료 조건 포함된 카드 모두 노출
- 가공 방식과 재료 필터가 둘 다 선택되면 교집합 노출
- 필터링 리셋 누르면 전체 필터 선택 해제
-
토글
- 상담 중인 요청만 보기 토글 활성화하면 상담 중 뱃지가 달린 카드만 노출
-
빈 화면일 때 '조건에 맞는 견적 요청이 없습니다.' 문구 출력
-
반응형 구현
- 햄버거 메뉴 아이콘 탭하면
- 백그라운드 #000000 50%
- 메뉴 화면이 왼쪽에서 들어옴
- 백그라운드 영역 탭하면 메뉴 close
- 햄버거 메뉴 아이콘 탭하면