xodms0309/react-lunch

🍴

level2 - 점심 뭐 먹지?

리액트로 구현하는 음식점 어플리케이션

결과물: 점심 뭐 먹지

🚀 1단계 학습 목표

✔️ CRA를 사용하여 리액트 템플릿 생성
✔️ Class Component로 구현하기
✔️ Typescript 적용하기
✔️ 반복 되는 컴포넌트는 분리하여 재사용하기

📝 1단계 필수 요구사항

• 레스토랑 목록 렌더링
• 레스토랑 클릭시 모달 렌더링
• 카테고리 필터링
• 이름순/거리순 정렬
• LocalStorage에 데이터 저장

💻 페어프로그래밍

타미	센트

🧱 컴포넌트 구성

🌲 파일 구조

📦src
 ┣ 📂components
 ┃ ┣ 📂modal
 ┃ ┃ ┣ 📜Modal.tsx
 ┃ ┃ ┗ 📜RestaurantDetail.tsx
 ┃ ┣ 📂restaurant
 ┃ ┃ ┣ 📜RestaurantItem.tsx
 ┃ ┃ ┗ 📜RestaurantList.tsx
 ┃ ┗ 📜SelectBox.tsx
 ┣ 📂layout
 ┃ ┣ 📜Header.tsx
 ┃ ┗ 📜index.tsx
 ┣ 📂styles
 ┃ ┗ 📜GlobalStyle.ts
 ┣ 📂utils
 ┃ ┣ 📜storage.ts
 ┃ ┗ 📜util.ts
 ┣ 📜App.tsx
 ┣ 📜constants.ts
 ┣ 📜index.tsx
 ┣ 📜mockData.json
 ┗ 📜type.ts