🌐 React 온보딩 프로젝트: "Re-Act”

🎯 프로젝트 목표

이 프로젝트의 목표는 지금까지 HTML, CSS, JS를 이용하여 만든 프로젝트를 React로 다시 만들어보는 것입니다. 그리고, 주어진 사물함 대여 정보 JSON 데이터를 기반으로 웹 페이지에 사물함 정보를 동적으로 표시해봅시다. 이 프로젝트를 통해 React를 사용법과 API 호출을 통해 데이터를 가져오고, 이를 화면에 표시하는 방법을 배울 수 있습니다.

🛠️ 단계별 가이드

1️⃣ 프로젝트 설정

• Vite와 React를 사용하여 새 프로젝트를 생성합니다.
• 필요한 패키지(예: axios, json-server)를 설치합니다.

2️⃣ 사물함 정보 API 구현

• **json-server**를 사용하여 사물함 정보를 제공하는 API 서버를 설정합니다.
• 제공된 JSON 데이터를 db.json 파일에 저장하고, **json-server**로 서비스합니다.
  • db.json

3️⃣ 컴포넌트 작성

• 사물함 정보를 표시하는 CabinetInfo 컴포넌트를 작성합니다. 이 컴포넌트는 각 사물함의 상태와 사용자 정보를 표시합니다.
• 사물함 정보를 그룹화하여 표시하는 CabinetSection 컴포넌트를 작성합니다.

4️⃣ API 통신 및 데이터 표시

• **axios**를 사용하여 사물함 정보를 가져오는 함수를 작성합니다.
• GET /floors?floorNumber=2 또는 GET /floors?floorNumber=3 과 같은 API 요청으로 각 층의 사물함 정보를 가져올 수 있습니다.
• 가져온 데이터를 CabinetSection 컴포넌트에 전달하여 화면에 표시합니다.

5️⃣ 스타일링 및 반응형 디자인

• CSS 혹은 **styled-components**를 사용하여 사물함 정보를 보기 좋게 스타일링합니다.