React 코딩 챌린지 - React를 활용한 도시/상품 판매 브라우저

과제: React를 이용한 도시/상품 판매 브라우저

회사명 : 씨텔

결과 - 다음 라운드로 선정

목적

라우팅 및 동적 데이터 가져오기를 통해 도시 및 제품 판매 정보를 표시하는 간단한 React 애플리케이션을 개발합니다. 앱은 사용자가 여러 페이지 사이를 탐색할 수 있도록 해야 하며, 얼마나 많은 도시와 제품을 방문했는지 추적해야 합니다. 사용자 요청 시 데이터를 새로 고쳐야 합니다.

요구사항

1. 애플리케이션 개요:

   • 페이지 상단에 두 개의 카운터를 표시합니다.
     • 방문 도시: 0
     • 방문한 제품: 0
   • 카운터를 재설정하고 데이터를 다시 로드하는 새로 고침 버튼을 제공하세요.

2. 홈페이지:

   • URL: /
   • 두 개의 목록 표시:
     • API에서 가져온 도시 이름 목록
     • API에서 가져온 제품 이름 목록
   • 앱이 시작되면 방문한 도시 및 방문한 제품 카운터를 0으로 초기화합니다.

3. API 엔드포인트:

   • 모든 도시를 가져오려면: https://assessments.reliscore.com/api/cities
   • 모든 제품을 가져오려면: https://assessments.reliscore.com/api/sales/products

4. 도시 세부정보 페이지:

   • URL: /api/sales//
   • 홈페이지에서 도시명을 클릭하면 해당 도시 페이지로 이동합니다.
   • 다음 엔드포인트를 사용하여 선택한 도시에서 판매된 제품 이름 및 수량 목록을 가져오고 표시합니다. https://assessments.reliscore.com/api/sales/bcdc31c7cacdfaf7b3ae7ce431e2f16f/ (bcdc31c7cacdfaf7b3ae7ce431e2f16f을 실제 도시 이름으로 바꾸세요.)
   • 도시 페이지를 방문할 때마다 방문한 도시 카운터가 1씩 증가합니다.

5. 제품 세부정보 페이지:

   • URL: /sales/product//
   • 페이지에서 제품명을 클릭하면 해당 제품 페이지로 이동합니다.
   • 다음 엔드포인트를 사용하여 제품이 판매된 모든 도시 이름과 각 도시에서 판매된 금액 목록을 가져오고 표시합니다. https://assessments.reliscore.com/api/sales/product/30961b207d3ca386b11a733db8be279c/ (1b6a611d9c3c30014f762a7e6bcb25e8을 실제 제품 이름으로 바꾸세요.)
   • 제품 페이지를 방문할 때마다 방문한 제품 카운터가 1씩 증가합니다.

6. 새로고침 버튼:

   • 어느 페이지에서든 새로고침 버튼을 클릭하면 다음이 수행됩니다.
     • 각 API에서 모든 데이터를 다시 로드합니다.
     • 방문한 도시 및 방문한 제품 카운터를 0으로 재설정합니다.

7. 라우팅 기능이 있는 단일 페이지 애플리케이션(SPA):

   • React를 사용하여 단일 페이지 애플리케이션(SPA)으로 애플리케이션을 구현합니다.
   • 브라우저의 뒤로 및 앞으로 버튼이 올바르게 작동하는지 확인하면서 라우팅을 활용하여 여러 페이지(예: 도시 세부정보, 제품 세부정보) 간 탐색을 처리합니다.
   • 사용자가 적절한 URL을 사용하여 모든 페이지로 직접 이동할 수 있는지 확인하세요.

8. 평가 기준:

   • 재사용 가능한 React 구성요소의 적절한 사용
   • Hook, 상태 관리 등 React 기능을 효율적으로 사용합니다.
   • 다른 페이지를 시뮬레이션하기 위한 올바른 라우팅 구현
   • 코드 구조 및 모듈화 부문에서 모범 사례를 준수합니다.

결과물

• 위에 설명된 요구 사항을 충족하는 모든 기능을 갖춘 React 애플리케이션입니다.
• 프로젝트는 구조화되어 있고 설명이 잘 되어 있어야 하며 탐색하기 쉬워야 합니다.
• 애플리케이션이 데이터 누락이나 잘못된 URL과 같은 극단적인 경우를 처리하는지 확인하세요.

메모

• 애플리케이션을 철저히 테스트하여 모든 기능이 예상대로 작동하는지 확인하세요.
• 앱이 반응성이 있고 다양한 화면 크기에서 잘 작동하는지 확인하세요.

API 응답 개요

1. Cities API 응답:

   • 엔드포인트: https://assessments.reliscore.com/api/cities
   • 응답 형식:

     {
       "status": "success",
       "data": [
         "Bombay",
         "Bangalore",
         "Pune",
         "Kolkata",
         "Chennai",
         "New Delhi"
       ]
     }
   

설명: 이 API는 판매 데이터가 가능한 도시 이름 목록을 반환합니다. 데이터 배열에는 이러한 도시의 이름이 포함되어 있습니다.

1. 특정 도시 판매 데이터:

   • Endpoint: https://assessments.reliscore.com/api/sales/pune (Replace pune with any other city name as needed)
   • Response Format:

     {
       "status": "success",
       "data": {
         "product1": 137,
         "product2": 23,
         "product3": 77
       }
     }
   

Description: This API returns sales data for a specific city. The data object contains key-value pairs where the key is the product name and the value is the number of items sold in that city.

1. Products List API Response:

   • Endpoint: https://assessments.reliscore.com/api/sales/products
   • Response Format:

     {
       "status": "success",
       "data": {
         "product1": 137,
         "product2": 23,
         "product3": 77
       }
     }
   

Description: This API returns a list of all products with their total sales figures. The data object contains key-value pairs where the key is the product name and the value is the total number of items sold across all cities.

1. Product Detail API Response:

   • Endpoint: https://assessments.reliscore.com/api/sales/product/product1 (Replace product1 with any other product name as needed)
   • Response Format:

     {
       "status": "success",
       "data": {
         "product1": 137,
         "product2": 23,
         "product3": 77
       }
     }
   

Description: This API returns the sales data for a specific product across different cities. The data object contains key-value pairs where the key is the city name and the value is the number of items sold for that product in that city.

Note:

Please ensure that you fully understand the requirements before starting the implementation. There’s a minor issue with the API response for the product/a2146e9d12dacc62f0ab03879c7fd44b endpoint, but it can be worked around with the provided data. Adding the API responses for reference above.

You are encouraged to implement the solution and make any necessary modifications to the APIs as needed to meet the requirements. If you need more details or are interested in similar assignments, you can refer to my E-Commerce Project.

위 내용은 React 코딩 챌린지 - React를 활용한 도시/상품 판매 브라우저의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!