[Day1] 1-1. Coz Shopping 메인 페이지 만들기

<유어 클래스 내용>

 

---

 

# 메인 페이지

 

용어 설명

• 미션(Mission): 페이즈 내에서 완수해야 할 구체적인 목표나 과제를 의미합니다. 각 미션은 수행해야 할 주요 작업들을 포괄합니다.
• 서브젝트(Subject): 미션 안에서 다루어야 할 개별적인 주제나 과제를 의미합니다. 각 서브젝트는 미션의 일부를 이루며, 구체적인 기능 개발이나 컴포넌트 구축과 같은 작업들로 구성됩니다. 여기에는 미션을 완수하기 위한 세부적인 단계들이 포함됩니다.
• 활동: 서브젝트를 달성하기 위해 수행하는 구체적인 행동이나 작업을 말합니다. 이는 프로젝트를 진행하면서 실제로 해야 할 작업들을 포함하며, 프로젝트의 세부 구현 사항에 초점을 맞춥니다.
  • 세부 지침: 활동을 수행하는 데 필요한 구체적인 지시사항을 제공합니다. 특정 기술이나 방법론, 코드 예시 등이 포함될 수 있으며, 이를 통해 활동을 효과적으로 완수하는 데 필요한 상세 정보를 얻을 수 있습니다.
  • 참고 사항: 활동과 세부 지침을 수행하는 데 있어서 유용한 추가 정보나 팁을 제공합니다. 이는 베스트 프랙티스, 주의해야 할 사항, 유용한 리소스 링크, 디버깅 팁 등이 포함됩니다. 이를 통해 프로젝트를 더욱 효율적이고 효과적으로 수행하는 데 도움을 줍니다.

 

---

# Mission 1. 카테고리 박스 UI 만들기

 

 

---

# 미션 개요

사용자가 다양한 상품을 카테고리별로 쉽게 탐색할 수 있는 카테고리 박스 UI를 만듭니다.

1. 소요 시간: 16h
2. 미션 타입
   • 개인
   • 그룹
3. 도구: Visual Studio Code, GitHub

---

# Subject 1. 상품을 담을 아이템 컴포넌트 만들기

 

 

활동

• 하나의 상품 데이터를 담을 아이템 컴포넌트(e.g., ItemCard)를 만듭니다.

세부 지침

1. 아이템 컴포넌트를 생성합니다.
2. 아래 제공된 더미 데이터를 활용하여 컴포넌트를 구현합니다.
   1. 컴포넌트는 최소한 상품 이미지, 제목, 가격을 포함해야 합니다.

 

{
  "id": 2,
  "type": "Clothing",
  "title": "Polraroid 320 티셔츠",
  "subTitle": null,
  "brandName": null,
  "price": 9900,
  "discountPercentage": 5,
  "discountPrice": 9405,
  "imageUrl": "https://images.unsplash.com/photo-1527181467037-80564ba4ac51?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
  "brandImageUrl": null,
  "category": {
    "id": 1,
    "category": "Clothing"
  }
}

 

참고 사항

• 상품 데이터에 제공되는 다른 정보들도 컴포넌트에 포함할 수 있습니다. (e.g., 할인율, 상품 타입)
• 스타일링은 별도의 파일로 관리하거나 CSS-in-JS 라이브러리를 사용하여 유지보수를 용이하게 할 수 있습니다.

---

# Subject 2. 상품 목록을 담을 컨테이너 컴포넌트 만들기

활동

• 상품 컴포넌트(e.g., ItemCard) 배열을 담을 컨테이너 컴포넌트(e.g., CategoryBox)를 만듭니다.

세부 지침

1. 컨테이너 컴포넌트를 생성합니다. 이 컴포넌트는 아이템 컴포넌트들을 그리드 형식으로 정렬하여 보여주는 역할을 합니다.
2. 상품 배열에 해당하는 더미 데이터는 CozShopping API로부터 API 요청을 테스트하여 받은 JSON 응답 데이터를 활용합니다.
   1. 먼저 몇 개의 아이템을 표시할 지 고민하고 이를 limit 쿼리 파라미터에 전달합니다. (기본값은 10입니다.)
3. map 함수를 사용하여 상품 데이터 배열을 상품 컴포넌트 배열로 변환합니다.

참고 사항

• 컴포넌트가 많아질 때의 효율적인 관리를 위해, 적절한 폴더 구조를 고민해봅시다.
• CSS Grid 또는 Flexbox를 사용하여, 다양한 화면 크기에서도 상품들이 적절하게 표시되도록 반응형 디자인을 적용할 수 있습니다. (e.g., 모바일 화면에서는 2열, 데스크탑에서는 4열로 표시).

---

# Subject 3. 카테고리 목록을 담을 탭 메뉴 컴포넌트 만들기

 

활동

• 다양한 카테고리를 나열할 수 있는 탭 메뉴 컴포넌트(e.g., CategoryTab)를 만듭니다.
• 탭 메뉴와 상품 목록을 포함하는 컨테이너 컴포넌트를 만듭니다.

세부 지침

1. 탭 메뉴 컴포넌트를 생성합니다. 사용자가 다양한 상품 카테고리를 쉽게 탐색하고 전환할 수 있게 해주는 인터페이스를 제공합니다.
2. 각 탭은 카테고리의 이름을 표시하며, 선택된 탭은 시각적으로 구분될 수 있어야 합니다.
   1. 카테고리 배열에 해당하는 더미 데이터는 Swagger API 문서에서 API 요청을 테스트하여 받은 JSON 응답 데이터를 활용합니다.
3. 컴포넌트의 재사용성을 위해, 카테고리 데이터를 외부로부터 props를 통해 전달받을 수 있도록 설계합니다.

참고 사항

• 선택된 탭을 표시하기 위한 시각적 피드백(예: 밑줄, 색상 변경)을 제공할 수 있습니다.
• 반응형 디자인을 적용하여 모바일과 데스크탑에서 모두 사용자 경험이 일관되게 유지되도록 구현할 수 있습니다.

---

# Subject 4. API에서 받은 데이터를 컴포넌트에 전달하기

 

활동

• 더미 데이터가 아닌 API 호출을 통해 받은 데이터를 컴포넌트에 전달하고 화면에 렌더링합니다.

세부 지침

1. fetch 함수 또는 axios 라이브러리를 사용하여 CozShopping API로부터 카테고리 데이터를 요청합니다.
2. API로부터 받은 데이터를 상태에 저장하기 위해 useState 훅을 활용합니다.
3. 컴포넌트가 마운트될 때 API 호출이 실행되도록 useEffect 훅을 사용합니다.
4. 데이터가 성공적으로 로드되면, 이를 탭 메뉴 및 상품 목록 컴포넌트로 전달하여 UI를 동적으로 업데이트합니다.

참고 사항

• 데이터 로딩 중에는 사용자에게 로딩 상태를 알리는 UI 요소(e.g., 스켈레톤, 로딩 인디케이터)를 표시할 수 있습니다.
• 데이터 요청과 관련된 에러가 발생할 경우 사용자에게 피드백을 제공하기 위한 에러 처리 로직을 포함할 수 있습니다.
• 네트워크 요청은 개발자 도구를 통해 확인 가능하므로, API 호출 과정을 모니터링하여, 필요한 경우 디버깅할 수 있습니다.

---

# Subject 5. 특정 카테고리 선택 시 해당 카테고리의 상품 목록 가져오기

 

• 사용자가 탭 메뉴에서 특정 카테고리를 선택하면, 해당 카테고리에 속하는 상품들만을 렌더링하는 기능을 구현합니다.

세부 지침

1. 탭 메뉴 컴포넌트에 각 카테고리를 선택하는 이벤트 핸들러를 구현합니다.
2. 선택된 카테고리에 따라 상품 목록을 필터링하여 표시하는 로직을 컴포넌트 내에 추가합니다.
3. 상태 관리를 통해 사용자가 선택한 카테고리를 추적하고, 해당 상태에 따라 필터링된 상품 목록을 관리합니다.
4. 선택된 카테고리의 상품 목록을 가져오기 위해 API 요청을 보낼 때, 선택된 카테고리에 해당하는 파라미터를 요청에 포함시킵니다.

참고 사항

• 카테고리 선택 시 사용자에게 시각적으로 활성화된 상태를 표시할 수 있습니다. 이는 다른 탭 메뉴와 명확하게 구분되는 것이 좋습니다.
• 데이터 로딩 중에는 사용자에게 로딩 상태를 알리는 UI 요소(e.g., 스켈레톤, 로딩 인디케이터)를 표시할 수 있습니다.
• 네트워크 요청은 개발자 도구를 통해 확인 가능하므로, API 호출 과정을 모니터링하여, 필요한 경우 디버깅할 수 있습니다.
• 일정 시간이 지나면 상품 카테고리가 자동으로 변경되는 로직을 개발 해 보세요.

---

---

# Mission 2. 랭킹별/추천별 상품 슬라이더 UI 만들기

미션 개요

랭킹별 및 추천별 상품을 표시하는 슬라이더 UI 그룹을 만듭니다.

1. 소요 시간: 8h
2. 미션 타입
   • 개인
   • 그룹
3. 도구: Visual Studio Code, GitHub

---

# Subject 1. 상품 슬라이더 컴포넌트 만들기

활동

• 다양한 유형의 상품 데이터(랭킹별, 추천별 등)를 표시할 수 있는 슬라이더 컴포넌트(e.g., ItemSlider)를 만듭니다.

세부 지침

1. 슬라이더 컴포넌트를 메인 컴포넌트 영역 아래에 생성합니다. 이 컴포넌트는 10개의 상품 데이터를 담은 배열을 입력(props)으로 받아 슬라이더 형태로 표시합니다.
2. 슬라이더 내에 표시될 상품 아이템 컴포넌트는 이전에 만든 아이템 컴포넌트(e.g., ItemCard)를 재사용합니다.
3. 슬라이더는 10개의 상품을 한번에 보여주지 않습니다. 대신, 사용자가 좌우 버튼을 통해 상품 목록을 스와이프할 수 있도록 구현합니다.
4. 더미 데이터를 사용하여 슬라이더의 기능과 레이아웃을 테스트합니다. 이를 통해 실제 API 연결 전에 컴포넌트의 동작을 확인할 수 있습니다.

참고 사항

• 다양한 데이터 소스(랭킹별, 추천별 등)를 받을 수 있도록 재사용 가능한 형태로 컴포넌트를 개발할 수 있습니다.
• 슬라이더의 반응형 디자인을 고려합니다. 필요에 따라 외부 라이브러리(e.g., React Slick)를 활용할 수 있습니다.
• 메인 컴포넌트 영역과 상품 슬라이더 영역이 조화롭게 연결 되도록 레이아웃을 설정 할 수 있습니다.

---

# Subject 2. 랭킹별 상품 슬라이더 만들기

활동

• 랭킹별 상품 데이터를 표시하는 슬라이더 컴포넌트를 만듭니다. 이 컴포넌트는 CozShopping API에서 제공하는 랭킹별 상품 데이터를 활용합니다.

세부 지침

1. fetch 함수 또는 axios 라이브러리를 사용하여 랭킹별 상품 데이터를 가져옵니다.
2. API로부터 받은 랭킹별 상품 데이터를 표시하는 컴포넌트를 만듭니다. 이 컴포넌트는 이전에 만든 슬라이더 컴포넌트를 재사용합니다.
3. API로부터 받은 데이터를 컴포넌트에 전달하고, 상품들을 슬라이더 형태로 표시합니다.

참고 사항

• 데이터를 로딩하는 동안 사용자에게 로딩 상태를 알리는 UI 요소(e.g., 로딩 인디케이터, 스켈레톤)를 표시할 수 있습니다.
• API 요청 중 발생할 수 있는 에러에 대한 적절한 처리를 고민해봅니다. 예를 들어, 네트워크 오류나 데이터 로딩 실패 시 사용자에게 알림을 제공할 수 있습니다.
• API 요청 시, 쿼리 파라미터를 사용하여 각 카테고리의 해당하는 랭킹별 상품 데이터를 보여주는 슬라이더를 추가 구현할 수 있습니다.

---

# Subject 3. 추천별 상품 슬라이더 만들기

활동

• 추천별 상품 데이터를 표시하는 슬라이더 컴포넌트를 만듭니다. 이 컴포넌트는 CozShopping API에서 제공하는 추천별 상품 데이터를 활용합니다.

세부 지침

1. fetch 함수 또는 axios 라이브러리를 사용하여 랭킹별 상품 데이터를 가져옵니다.
2. API로부터 받은 추천별 상품 데이터를 표시하는 컴포넌트를 만듭니다. 이 컴포넌트는 이전에 만든 슬라이더 컴포넌트를 재사용합니다.
3. API로부터 받은 데이터를 컴포넌트에 전달하고, 상품들을 슬라이더 형태로 표시합니다.

참고 사항

• 데이터를 로딩하는 동안 사용자에게 로딩 상태를 알리는 UI 요소(e.g., 로딩 인디케이터, 스켈레톤)를 표시할 수 있습니다.
• API 요청 중 발생할 수 있는 에러에 대한 적절한 처리를 고민해봅니다. 예를 들어, 네트워크 오류나 데이터 로딩 실패 시 사용자에게 알림을 제공할 수 있습니다.
• API 요청 시, 쿼리 파라미터를 사용하여 좋아요 또는 만족도 순에 따른 상품 데이터를 보여주도록 정렬 옵션을 슬라이더 상단에 추가할 수 있습니다.
• 사용자의 시각적 편의성을 고려하여, 모든 상품 슬라이더가 일관된 너비와 여백을 갖도록 레이아웃을 조정할 수 있습니다.

---