notCoderJ/capa

💻 코딩 테스트 과제 수행(22.01.05 - 22.01.08)

⚙ 기술 스택

📝 구현 사항

• REST api를 통해 json-server와 통신 후 데이터 처리
• 가공 방식 또는 재료 조건 선택에 의한 데이터 필터링(둘 다 선택 시 교집합)
• 필터링 리셋 버튼 클릭 시 선택된 필터링 모두 해제 후 초기화
• 요청의 진행 상황에 따른 데이터 필터링
• 모바일 버전에서 햄버거 아이콘 클릭 시 메뉴 슬라이드 OPEN / CLOSE
• PC 및 모바일 버전 디자인 작업

🎄 Src Tree 구조

src
ㅤ|-- api: json-server 요청 api 구현
ㅤ|-- assets: 리소스
ㅤ|ㅤㅤㅤ|-- images: 이미지 리소스
ㅤ|-- components: 컴포넌트 구현
ㅤ|-- hooks: 커스텀 훅 구현
ㅤ|-- pages: 페이지 컴포넌트 구현
ㅤ|-- styles: 글로벌 스타일

🎮 데모

▶ 실행 방법

1. 패키지 설치

yarn install # or npm install

2. 소스 빌드

yarn build

3. 서버 및 App 실행

yarn start

4. 웹 사이트(http://localhost:3000) 접속