원티드 프리 온보딩 - 견적 요청 페이지 구현

에이팀벤처스 / 견적 요청 페이지 구현

프로젝트 소개

• 에이팀벤처스의 파트너스 견적요청을 확인하는 페이지 구현

• typescript로 안정적인 개발 환경 구현

• json-server & mock rest-api server 연동 및 배포

• 에이팀벤처스의 파트너 요청 페이지, 필터 같은 옵션에 따라 해당하는 아이템만 받아올 수 있는 페이지 구현

• UI 라이브러리를 사용하지 않고 직접 구현

• 미디어 쿼리로 모바일에서도 가독성이 높은 반응형 페이지 구현

팀원 소개

🏃‍ 민지연(팀장)
🏃‍ 박서윤
🏃‍ 양다혜
🏃‍ 박서영

배포 주소

배포 사이트 바로가기

과제 구현 목록

(박서윤)

☑️ checkbox filter UI 구현

☑️ checkbox filter 카테고리별로 교차 선택 및 메뉴 구성 확장 가능하도록 구성

☑️ [가공] 방식 필터가 선택되면, 해당 방식 조건이 포함된 카드를 모두 노출함

☑️ [재료] 필터가 선택되면, 해당 재료 조건이 포함된 카드를 모두 노출함.

☑️ 가봉 방식과 재료 필터가 둘 다 선택되면, 두 조건의 교집합 노출함

☑️ 선택된 필터의 합계를 자동으로 계산하여 노출

(박서영)

☑️ '상담 중인 요청만 보기' 토글을 활성화하면 대시보드에 '상담중' 뱃지가 달려있는 카드만 노출함

☑️ checkbox filter UI 구현

☑️ hover 이벤트 발생 시 checkbox filter 스타일링 적용

☑️ checkbox filter 클릭 시 옵션 리스트가 화면에 노출됨

☑️ 옵션 선택 시 옵션 합계가 노출됨

☑️ 옵션을 선택했을 경우 셀렉트박스 스타일 적용(선택된 옵션이 없을 경우 디폴트 스타일 적용)

(민지연)

☑️ json-server & dev-server 세팅하여 가상의 데이터 서버를 구성할 수 있도록 구현

☑️ json-server로 mock rest-api server 연동

☑️ mock rest-api로 data 호출 및 type 지정

☑️ theme, global style 지정

☑️ 대시보드 메인 UI 스타일링

☑️ 대시보드 메인 반응형 UI 스타일링

☑️ 대시보드 Modal UI 및 기능 구현

☑️ heroku를 이용한 json-server 배포

(양다혜)

☑️ header UI 스타일링

☑️ Toggle UI 스타일링

☑️ Toggle 컴포넌트 생성 및 기능 추가

☑️ filtering reset 버튼 UI 스타일링

기능 구현 영상

☑️ 셀렉트박스 카테고리별 액션

☑️ 필터링 리셋

☑️ 상담중 토글

프로젝트 과정 소개

과제 후기

🙋‍♀️ 박서윤

🙋‍♀️ 양다혜

🙋‍♀️ 박서영

이번 프로젝트를 통해 json server 라이브러리를 이용해 정말 간단하게 REST API Mockserver를 구축하고 유의미한 데이터핸들링 시뮬레이션 할 수 있다는 것을 배우게 되었다. 그리고 사용자 이벤트(셀렉트 박스 클릭, 재료 및 메서드 선택 등)이 발생할 때마다 스타일링을 적용해야하는 미션을 수행하면서 props를 통한 조건부 스타일링을 깊게 이해하게 되었다.

🙋‍♀️ 민지연

(프로젝트 회고 주소 첨부 예정)

설치 및 시작하는 법

프로젝트 클론

$ git clone https://github.com/On-Basic/Ateam-Ventures.git

패키지 설치

$ yarn

서버 실행

$ yarn dev