React 중급 개념 챕터에서 배운 내용을 종합적으로 활용할 수 있는 아래의 실습들을 진행해주세요.

1. 컴포넌트 리스트 만들기

1.1 직원 정보 카드 만들기

다음 직원 정보를 사용하여 직원 목록과 상세 정보를 표시하는 컴포넌트를 만들어보세요.

const employees = [
  { id: 1, name: 'Wade', email: 'wade@example.com', job: 'Designer' },
  { id: 2, name: 'Zeezee', email: 'zeezee@example.com', job: 'Manager' },
  { id: 3, name: 'Rosy', email: 'rosy@example.com', job: 'Engineer' },
  { id: 4, name: 'Hati', email: 'hati@example.com', job: 'Engineer' },
];

[요구사항]

• 직원 목록을 카드 형태로 표시합니다.
• 각 카드에는 직원 이름만 먼저 표시됩니다.
• 이름을 클릭하면 해당 직원의 이메일과 직무가 표시됩니다. (토글 기능)

1.2 반려동물 관리 앱 만들기

다음 반려동물 정보를 사용하여 목록을 표시하고 새로운 반려동물을 추가할 수 있는 앱을 만들어보세요.

const initialPets = [
  { name: '나나', species: '고양이', age: '1', id: 111 },
  { name: '망고', species: '고양이', age: '3', id: 112 },
  { name: '하뚱', species: '토끼', age: '2', id: 113 },
  { name: '호두', species: '고양이', age: '1', id: 114 },
  { name: '솜이', species: '강아지', age: '6', id: 115 },
];

[요구사항]

• 반려동물 목록을 테이블 형태로 표시
• 새로운 반려동물을 추가하는 폼 생성
  • 이름 입력 필드
  • 종 선택 드롭다운: 고양이, 강아지, 토끼 중 선택
  • 나이 입력 필드: 숫자만 입력 가능
  • 모든 입력 필드는 필수

2. 조건부 렌더링 구현하기

2.1 네비게이션 웹페이지 만들기

3개의 다른 컴포넌트를 내비게이션으로 전환하는 간단한 웹 페이지를 만들어보세요.

[요구사항]

• Home, Products, Contact 세 가지 내비게이션 메뉴를 만듭니다
• 각 메뉴를 클릭하면 해당하는 컴포넌트가 렌더링됩니다
• 현재 선택된 메뉴는 시각적으로 구분되어야 합니다

3. TodoList 앱 만들기

[요구사항]

1. 상태 관리

   • 할 일 목록 배열 상태 관리
   • 입력창의 값 상태 관리

2. 스타일 적용

   • styled-components를 사용하여 스타일 적용
   • 완료된 할 일은 취소선과 배경 색상 적용

3. 합성 컴포넌트

   • TodoInput: 입력 폼 컴포넌트
   • TodoItem: 각 할 일 항목 컴포넌트

4. 기능 구현

   • 새로운 할 일 추가
   • 할 일 완료/미완료 토글
   • 할 일 삭제
   • 다크모드 구현

4. 쇼핑몰 상품 목록 만들기

다음 상품 정보를 사용하여 상품 목록과 장바구니 정보를 표시하는 컴포넌트를 만들어보세요.

const products = [
  { id: 1, name: '상품 1', price: 10000 },
  { id: 2, name: '상품 2', price: 20000 },
  { id: 3, name: '상품 3', price: 30000 },
];

[요구사항]

1. 상태 관리

   • 상품 목록 데이터 상태 관리
   • 장바구니 상태 관리

2. 스타일 적용

   • CSS Module을 사용하여 스타일 적용

3. 합성 컴포넌트

   • ProductCard: 상품 카드 컴포넌트
   • CartItem: 장바구니 아이템 컴포넌트
   • PriceDisplay: 총 금액 표시 컴포넌트 (가격은 천단위 마다 콤마 추가)

4. 기능 구현

   • 상품 목록 표시
   • 장바구니 담기
   • 수량 조절
   • 총 금액 계산