🍛 점심 뭐 먹지 🍛

우아한테크코스 레벨1 점심 뭐 먹지 미션

🧑‍🤝‍🧑 페어 (페어 프로그래밍으로 개발)


헤다(윤다혜)	해온(백솔비)

📍 학습 목표

어플리케이션을 컴포넌트 단위로 모듈화하여 개발
UI를 컴포넌트 단위로 생각하고 개발하는 연습
재사용할 수 있는 컴포넌트를 고민해보기
웹 UI 환경에서의 테스트 기초
컴포넌트 단위 테스트 (1단계)
사용자 관점에서 중요하다고 생각하는 기능을 스스로 정의하고 E2E 테스트로 검증해보기 (2단계)
TypeScript의 기본 문법을 익히며 필요성을 경험

📝 실행 방법

앱 바로 실행하기

🎯 기능 목록

캠퍼스 주변의 점심 식사 스팟 목록을 관리하는 앱을 만든다.

음식점 목록을 확인할 수 있다.
카테고리별로 필터링해서 확인할 수 있다.
이름순/거리순으로 정렬해서 확인할 수 있다.
음식점 목록에 새로운 음식점을 추가할 수 있다.
음식점의 카테고리, 이름, 거리(도보 이동 시간), 설명, 참고 링크를 입력해서 추가할 수 있다.
카테고리, 거리는 셀렉트 박스, 이름/설명/참고 링크는 텍스트 인풋을 사용한다.
카테고리, 이름, 거리는 입력 필수.
카테고리는 "한식", "중식", "일식", "아시안", "양식", "기타" 중 하나를 선택한다.
거리는 캠퍼스로부터 도보로 걸리는 시간(분). 5, 10, 15, 20, 30 중 하나를 선택한다.
설명, 참고 링크는 옵션. 입력하지 않아도 음식점을 추가할 수 있어야 한다.
입력값이 잘못되었을 때 사용자에게 알려주는 방식은 자유롭게 구현한다.
새로고침해도 추가한 음식점 정보들이 유지되어야 한다.

✅ 프로그래밍 요구 사항

컴포넌트 단위로 구현하는 것을 고민하고 적용해본다.
정적으로 렌더링할 영역과 동적으로 렌더링할 영역을 구분해서 고민한다.
재사용할 수 있는 컴포넌트에 대해 고민하고 적용해본다.
컴포넌트 단위 테스트를 적용한다.
도메인 영역을 TypeScript를 사용해 구현한다. (UI 영역은 선택)
any를 사용하지 않는다.
interface 또는 type alias 를 이용하여, 주요 도메인 객체의 타입을 정의하고 설계한다.
데이터 유지를 위해 localStorage를 활용한다.
개발한 앱에서 핵심이 되는 기능이라고 생각하는 기능 플로우를 선정하고 그에 대한 E2E 테스트를 추가한다.