[2단계 - 자주 가는 음식점] 버건디(전태헌) 미션 제출합니다. (#145)

* feat: setup build configurations and templates * docs: 기능 구현 목록 작성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * init: eslint setting Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 객체 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 리스트 도메인 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: index.js 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 파일 이름 오타 수정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: header 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: filter bar 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 리스트 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 도메인에서 로컬스토리지 사용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 모달 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 사진 아이콘 import Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 컴포넌트 사진 임포트 및 컴포넌트 수정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 모달 이벤트 리스너 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 모달 오픈 이벤트 핸들러 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: dimmer 클릭시 모달 닫기 기능 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 모달 버튼 분리 및 카테고리 선택자 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: modal 내부 컴포넌트 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 탬플릿 변수 이름 수정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 데이터 store 및 필터링 서비스 분리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 카테고리 필터링 기능 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 문자열을 html dom 으로 변환하는 유틸 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 솔팅 메뉴 기능 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 거리순 솔팅 중 같은 거리일 시 이름순으로 지정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 솔팅과 필터링 모두 적용 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 새로운 레스트랑 추가 기능 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 변경사항 이후리랜더 기능 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 추가 모달 내부 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: filter bar 메서드 분리 및 format 함수 적용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: header 메서드 분리 및 format 함수 적용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: restaurant 컴포넌트 메서드 분리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: modal content format 함수 적용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: app 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: template 이름 변경 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: 랜더 함수 호출 없애기 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 서브밋 버튼 클릭 후 validate 체크 및 에러 메세지 출력 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 에러 메세지 이후 수정시 메세지 삭제 기능 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: 핸들러 함수 분리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: css 클래스 이름 변경 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 서브밋 시 이전 에러 메세지 삭제 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 폼 제출/취소시 이전 데이터 삭제 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 등록된 가게 중복 체크 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: 불필요한 메서드 병합 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: handler 분리 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: handler 분리 작업 및 불필요한 라인 정리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: eslint 세팅 후 리팩토링 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: mapped interface 사용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 파일 이름 변경 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: template 파일 이름 변경 후 import 수정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: 랜더 핸들러 분리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 사용하지 않는 선언 삭제 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: package.json 불필요한 내용 삭제 * refactor: 문자열 DOM요소 변환 유틸함수 DOMParser API 사용으로 변경 * refactor: eventHandler 파일명 수정 및 함수명 변경 * feat: 공용으로 사용할 Select 컴포넌트 생성 * style: prettier 룰 추가 * style: prettier 룰 적용 * feat: 받은 옵션을 통해 공용 Select 컴포넌트를 만들어주는 함수 생성 * feat: 셀렉트 태그 관련 정보들 상수로 분리 후 바인딩 * refactor: 음식점 리스트 컴포넌트 초기화 함수 랩핑 삭제 * refactor: 헤더 컴포넌트 이벤트 핸들러 관련 파일명 수정 * refactor: eslint 룰 맞게 임포트 수정 * refactor: 컴포넌트마다 렌더함수 삭제 * feat: 공용 버튼 컴포넌트 생성 * feat: 버튼 관련 컴포넌트 데이터 생성 및 바인딩 * feat: 공용 Label 컴포넌트 생성 * refactor: 컴포넌트 생성 유틸함수 파일명 변경 * refactor: 공용 컴포넌트 타입 파일 분리 및 적용 * style: prettier 적용 * feat: 공용 Input 컴포넌트 생성 및 바인딩 * feat: 공용 Span 컴포넌트 생성 * feat: 링크 컴포넌트 공용 컴포넌트로 바인딩 * refactor: 공용 span 컴포넌트 생성 유틸함수 임포트 순서 변경 * feat: 음식점 이름 입력 컴포넌트 공용 컴포넌트로 바인딩 * refactor: 내부 변수명 변경 * style: 기존 파일 prettier 적용 * refactor: Select 공용 컴포넌트 required 속성 받도록 수정 * feat: 모달 내 카테고리 셀렉트 공용 컴포넌트 바인딩 * feat: 음식점 카테고리 데이터 상수 분리 * refactor: 기존 handlers였던 파일명 eventHandlers로 변경 * style: 기존 헤더 템플릿 prettier 적용 * refactor: handlers 파일명 eventHandlers로 변경 * feat: 공용 TextArea 컴포넌트 생성 및 바인딩 * refactor: 음식점 셀렉트 옵션 데이터 상수 분리 * feat: 거리 선택 셀렉트 공용 컴포넌트로 바인딩 * refactor: 기존 handlers.ts eventHandlers.ts 로 파일명 변경 * feat: description 컴포넌트 공용 컴포넌트로 바인딩 * refactor: eslint룰에 맞게 수정 * refactor: 독립된 ui를 위해 컨테이너 클래스명 추가 * refactor: 컴포넌트 옵션 데이터들 폴더별로 분리 * refactor: Helper 클래스 폴더 분리 * refactor : isValid 프로퍼티 success 로 변경 * refactor: 에러메세지 상수 분리 * refactor: eslint 룰 맞게 수정 * refactor: 공용 컴포넌트 생성 Object.assign으로 변경 * refactor: App 메인 컴포넌트에서 render 함수 삭제 * refactor: 공용 TextArea 컴포넌트 수정 * reafctor: 파일명 수정 * refactor: 컴포넌트 관련 데이터 폴더 위치 변경 * refactor: 유틸함수 수정 * refactor: 함수명 수정 * refactor: 파일명 변경 * feat: 공용 컨테이너, 리스트 컴포넌트 생성 * feat: 공용 헤딩 컴포넌트 생성 * feat: 공용 이미지 컴포넌트 생성 * feat: 공용 P 컴포넌트 생성 * feat: RestaurantListItem 컴포넌트 생성 및 바인딩 * feat: 탭 컴포넌트 구현 * refactor: 클로저를 활용하여 로컬스토리지 값 캐싱 * refactor: 음식점 목록 컴포넌트 외부에서 값 주입 받는 방식으로 변경 * refactor: restaurantList map 함수로 변경 * feat: 즐겨찾기 아이콘 컴포넌트 추가 및 데이터 프로퍼티 추가 * feat: 즐겨찾기 버튼 토글 버튼 기능 추가 * refactor: 헤더 컴포넌트 공용 컴포넌트 렌더링 방식으로 교체 * feat: 공용 Form 컴포넌트 생성 * refactor: 모달 컴포넌트 컨텐츠 외부 주입 받는 방식으로 변경 * feat: 공용 A태그 컴포넌트 생성 * feat: 음식점 리스트 태그 클릭시 상세모달 렌더링 * refactor: 모달 초기화 수정 및 컴포넌트 생성 파일 폴더로 분리 * feat: 상세모달 함수 바인딩 * feat: 상세모달에서 좋아요 토글 기능 메인창과 동기화 * refactor: 좋아요 버튼 관련 리팩토링 * feat: 바텀시트내에서 버튼 컴포넌트 구현 * feat: 공용 Main, Section 태그 컴포넌트 생성 * refactor: 필터바 공용 컴포넌트로 구성방식 변경 후 바인딩 * refactor: 카테고리 필터 관련 이벤트 재바인딩 * fix: 이벤트 버블링 오류 수정 * feat: 공용 Ul 태그 생성 * feat: ul컨테이너 작성 및 바텀시트 컴포넌트 생성 * refactor: 모달 관련 이벤트 리팩토링 * refactor: 바텀시트 스타일링 및 리팩 * chore : cypress 테스트를 위한 tsconfig.json 설정 * chore : cypress 셋팅 * test: cypress 테스트 코드 작성 * chore: eslint 수정 * chore : package-lock.json * refactor: 코드 10줄 넘는 함수들 분리 * test: 테스트코드 추가 작성 * feat: setup build configurations and templates * feat: 탭 컴포넌트 구현 * feat: 즐겨찾기 버튼 토글 버튼 기능 추가 * feat: 바텀시트내에서 버튼 컴포넌트 구현 * refactor: 모달 관련 이벤트 리팩토링 * refactor: 바텀시트 스타일링 및 리팩 * refactor: repush * refactor: repush * [1단계 - 음식점 목록] - 버건디(전태헌) 미션 제출합니다. (#104) * feat: setup build configurations and templates * docs: 기능 구현 목록 작성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * init: eslint setting Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 객체 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 리스트 도메인 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: index.js 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 파일 이름 오타 수정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: header 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: filter bar 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 리스트 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 도메인에서 로컬스토리지 사용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 모달 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 사진 아이콘 import Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 컴포넌트 사진 임포트 및 컴포넌트 수정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 모달 이벤트 리스너 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 모달 오픈 이벤트 핸들러 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: dimmer 클릭시 모달 닫기 기능 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 모달 버튼 분리 및 카테고리 선택자 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: modal 내부 컴포넌트 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 탬플릿 변수 이름 수정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 데이터 store 및 필터링 서비스 분리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 카테고리 필터링 기능 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 문자열을 html dom 으로 변환하는 유틸 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 솔팅 메뉴 기능 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 거리순 솔팅 중 같은 거리일 시 이름순으로 지정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 솔팅과 필터링 모두 적용 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 새로운 레스트랑 추가 기능 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 변경사항 이후리랜더 기능 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 레스토랑 추가 모달 내부 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: filter bar 메서드 분리 및 format 함수 적용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: header 메서드 분리 및 format 함수 적용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: restaurant 컴포넌트 메서드 분리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: modal content format 함수 적용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: app 컴포넌트 생성 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: template 이름 변경 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: 랜더 함수 호출 없애기 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 서브밋 버튼 클릭 후 validate 체크 및 에러 메세지 출력 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 에러 메세지 이후 수정시 메세지 삭제 기능 추가 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: 핸들러 함수 분리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: css 클래스 이름 변경 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 서브밋 시 이전 에러 메세지 삭제 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 폼 제출/취소시 이전 데이터 삭제 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * feat: 등록된 가게 중복 체크 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: 불필요한 메서드 병합 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: handler 분리 작업 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: handler 분리 작업 및 불필요한 라인 정리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: eslint 세팅 후 리팩토링 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: mapped interface 사용 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 파일 이름 변경 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: template 파일 이름 변경 후 import 수정 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * refactor: 랜더 핸들러 분리 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: 사용하지 않는 선언 삭제 Co-Authored-By: JEON TAEHEON <109535991+brgndyy@users.noreply.github.com> * chore: package.json 불필요한 내용 삭제 * refactor: 문자열 DOM요소 변환 유틸함수 DOMParser API 사용으로 변경 * refactor: eventHandler 파일명 수정 및 함수명 변경 * feat: 공용으로 사용할 Select 컴포넌트 생성 * style: prettier 룰 추가 * style: prettier 룰 적용 * feat: 받은 옵션을 통해 공용 Select 컴포넌트를 만들어주는 함수 생성 * feat: 셀렉트 태그 관련 정보들 상수로 분리 후 바인딩 * refactor: 음식점 리스트 컴포넌트 초기화 함수 랩핑 삭제 * refactor: 헤더 컴포넌트 이벤트 핸들러 관련 파일명 수정 * refactor: eslint 룰 맞게 임포트 수정 * refactor: 컴포넌트마다 렌더함수 삭제 * feat: 공용 버튼 컴포넌트 생성 * feat: 버튼 관련 컴포넌트 데이터 생성 및 바인딩 * feat: 공용 Label 컴포넌트 생성 * refactor: 컴포넌트 생성 유틸함수 파일명 변경 * refactor: 공용 컴포넌트 타입 파일 분리 및 적용 * style: prettier 적용 * feat: 공용 Input 컴포넌트 생성 및 바인딩 * feat: 공용 Span 컴포넌트 생성 * feat: 링크 컴포넌트 공용 컴포넌트로 바인딩 * refactor: 공용 span 컴포넌트 생성 유틸함수 임포트 순서 변경 * feat: 음식점 이름 입력 컴포넌트 공용 컴포넌트로 바인딩 * refactor: 내부 변수명 변경 * style: 기존 파일 prettier 적용 * refactor: Select 공용 컴포넌트 required 속성 받도록 수정 * feat: 모달 내 카테고리 셀렉트 공용 컴포넌트 바인딩 * feat: 음식점 카테고리 데이터 상수 분리 * refactor: 기존 handlers였던 파일명 eventHandlers로 변경 * style: 기존 헤더 템플릿 prettier 적용 * refactor: handlers 파일명 eventHandlers로 변경 * feat: 공용 TextArea 컴포넌트 생성 및 바인딩 * refactor: 음식점 셀렉트 옵션 데이터 상수 분리 * feat: 거리 선택 셀렉트 공용 컴포넌트로 바인딩 * refactor: 기존 handlers.ts eventHandlers.ts 로 파일명 변경 * feat: description 컴포넌트 공용 컴포넌트로 바인딩 * refactor: eslint룰에 맞게 수정 * refactor: 독립된 ui를 위해 컨테이너 클래스명 추가 * refactor: 컴포넌트 옵션 데이터들 폴더별로 분리 * refactor: Helper 클래스 폴더 분리 * refactor : isValid 프로퍼티 success 로 변경 * refactor: 에러메세지 상수 분리 * refactor: eslint 룰 맞게 수정 * refactor: 공용 컴포넌트 생성 Object.assign으로 변경 * refactor: App 메인 컴포넌트에서 render 함수 삭제 * refactor: 공용 TextArea 컴포넌트 수정 * reafctor: 파일명 수정 * refactor: 컴포넌트 관련 데이터 폴더 위치 변경 * refactor: 유틸함수 수정 * refactor: 함수명 수정 * refactor: 파일명 변경 * feat: 공용 컨테이너, 리스트 컴포넌트 생성 * feat: 공용 헤딩 컴포넌트 생성 * feat: 공용 이미지 컴포넌트 생성 * feat: 공용 P 컴포넌트 생성 * feat: RestaurantListItem 컴포넌트 생성 및 바인딩 --------- Co-authored-by: woowapark <shinyoung.park@woowahan.com> Co-authored-by: Hyelim Choi <HyelimChoi01@gmail.com> * fix: conflict로 인해 안올라갔던 파일들 재업로드 * chore: .gitignore에 DS파일 추가 * refactor: 테스트 코드 수정 * refactor: ATag => A로 변경 * refactor: 렌더 함수 분리 * refactor: as 선언 줄이기 * refactor: as 단언 if로 교체 * feat: filter sort 필터 관련 서비스레이어 생성 * refactor: filter, sort서비스 레이어 바인딩 * refactor: 타입가드 유틸함수 생성 후 바인딩 * refactor: 주석삭제 * refactor: 이벤트 핸들러 로직 세분화 * refactor: 컴포넌트 데이터 각 항목별 한 파일로 병합 * refactor: 파일 한곳에서 가져오기 * chore: eslint 룰 변경 * feat: localStorage 객체 생성 * feat: 로컬 스토리지 핸들러 생성 * refactor: RestaurantStorageService를 로컬스토리지로 변경 * refactor: 유틸함수 한줄로 분리 * feat: 스토리지 서비스 분리 --------- Co-authored-by: woowapark <shinyoung.park@woowahan.com> Co-authored-by: Hyelim Choi <HyelimChoi01@gmail.com>
woowacourse · Mar 18, 2024 · f83cb75 · f83cb75
1 parent dc54253
commit f83cb75
Show file tree

Hide file tree

Showing 127 changed files with 1,954 additions and 620 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,63 +1,16 @@
 {
   "rules": {
+    "import/order": ["off"],
     "import/extensions": ["off"],
     "no-await-in-loop": "off",
     "no-constant-condition": "off",
     "max-lines-per-function": ["error", 10],
     "max-depth": ["error", 1],
     "no-console": "off",
     "class-methods-use-this": "off",
+    "import/no-cycle": "off",
     "spaced-comment": "off",
-    "lines-between-class-members": [
-      "error",
-      "always",
-      { "exceptAfterSingleLine": true }
-    ],
-    "sort-imports": [
-      "error",
-      {
-        "ignoreCase": true,
-        "ignoreDeclarationSort": true,
-        "ignoreMemberSort": false,
-        "allowSeparatedGroups": true
-      }
-    ],
-    "import/order": [
-      "error",
-      {
-        "newlines-between": "always",
-        "groups": [
-          ["builtin", "external"],
-          "internal",
-          "parent",
-          "sibling",
-          "index"
-        ],
-        "pathGroups": [
-          {
-            "pattern": "next",
-            "group": "builtin"
-          },
-          {
-            "pattern": "react",
-            "group": "builtin"
-          },
-          {
-            "pattern": "@MyDesignSystem/**",
-            "group": "internal"
-          },
-          {
-            "pattern": "src/**",
-            "group": "internal"
-          }
-        ],
-        "pathGroupsExcludedImportTypes": ["src/**", "@MyDesignSystem/**"],
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        }
-      }
-    ]
+    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }]
   },
   "env": {
     "node": true,

diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 *.tsbuildinfo
 .npm
 .eslintcache
+.DS_Store
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+    baseUrl: 'http://localhost:8080',
+    specPattern: 'cypress/e2e/**/*.{spec,cy}.ts',
+  },
+});
diff --git a/cypress/e2e/RestaurantListItemBottomSheet.spec.ts b/cypress/e2e/RestaurantListItemBottomSheet.spec.ts
@@ -0,0 +1,37 @@
+import mockRestaurants from './mocks/mockRestaurants';
+
+describe('음식점 바텀시트 모달에 관한 테스트', () => {
+  beforeEach(() => {
+    cy.fixture('mockRestaurants.json').then((restaurants) => {
+      cy.window().then((win) => {
+        win.localStorage.setItem('restaurantList', JSON.stringify(restaurants));
+      });
+    });
+  });
+
+  it('메인 페이지에 있는 음식점 li태그를 클릭하면 바텀시트 모달이 띄워진다', () => {
+    cy.visitMainPage();
+
+    cy.get('li.restaurant').first().click();
+
+    cy.get('.detail-container').should('be.visible');
+  });
+
+  it('바텀시트의 즐겨찾기 버튼을 클릭하면, 메인 페이지의 좋아요 태그도 변화한다.', () => {
+    cy.visitMainPage();
+
+    cy.get('li.restaurant').first().click();
+
+    cy.get('.detail-container').should('be.visible');
+
+    cy.get('.favorited-icon').first().click();
+
+    cy.visitMainPage();
+    cy.get('li.restaurant').first().click();
+
+    cy.get('li.restaurant')
+      .first()
+      .find('img.favorited-icon')
+      .should('have.attr', 'src', 'http://localhost:8080/favorite-icon-filled.png');
+  });
+});
diff --git a/cypress/e2e/addNewRestaurantModal.spec.ts b/cypress/e2e/addNewRestaurantModal.spec.ts
@@ -0,0 +1,50 @@
+describe('모달에서 새로운 레스토랑을 등록할때의 테스트', () => {
+  it('헤더의 모달 아이콘 버튼을 누르면 모달창이 열린다.', () => {
+    cy.visitMainPage();
+
+    cy.get('.gnb__button').click();
+
+    cy.get('.modal').should('have.class', 'modal--open');
+  });
+
+  it('유효한 음식점을 추가하면 모달이 제거 된다.', () => {
+    cy.openModal();
+
+    cy.get('#category').select('양식', { force: true });
+    cy.get('#name').type('스테이크집');
+    cy.get('#distance').select(5);
+    cy.get('#description').type('음식점에 대한 설명');
+    cy.get('#link').type('http://example.com');
+
+    cy.get('.button--primary').click();
+    cy.get('.modal').should('not.have.class', 'modal--open');
+  });
+
+  it('거리 값이 유효하지 않은 음식점을 추가하면, 유효하지 않은 거리 값에 대한 에러메세지를 띄워준다.', () => {
+    cy.openModal();
+
+    cy.get('#category').select('', { force: true });
+    cy.get('#name').type('이름');
+    cy.get('#distance').select('');
+    cy.get('#description').type('음식점에 대한 설명');
+    cy.get('#link').type('http://example.com');
+
+    cy.get('.button--primary').click();
+    cy.get('.modal').should('have.class', 'modal--open');
+    cy.get('.form-item').should('contain', '거리를 필수적으로 선택해주세요.');
+  });
+
+  it('음식점 이름이 유효하지 않은 음식점을 추가하면, 유효하지 않은 음식점 이름에 대한 에러메세지를 띄워준다.', () => {
+    cy.openModal();
+
+    cy.get('#category').select('', { force: true });
+    cy.get('#name').type();
+    cy.get('#distance').select(5);
+    cy.get('#description').type('음식점에 대한 설명');
+    cy.get('#link').type('http://example.com');
+
+    cy.get('.button--primary').click();
+    cy.get('.modal').should('have.class', 'modal--open');
+    cy.get('.form-item').should('contain', '이름을 필수적으로 선택해주세요.');
+  });
+});
diff --git a/cypress/e2e/tabComponent.spec.ts b/cypress/e2e/tabComponent.spec.ts
@@ -0,0 +1,16 @@
+describe('메인 페이지 탭 컴포넌트에 관한 테스트', () => {
+  beforeEach(() => {
+    cy.visitMainPage();
+  });
+  it('모든 음식점 탭을 클릭하면 카테고리와 거리순 or 이름순을 고를 수 있는 셀렉트 태그가 있다', () => {
+    cy.get('#allRestaurantTabButton').click();
+
+    cy.get('main .restaurant-filter-container').should('exist');
+  });
+
+  it('자주 가는 음식점 탭을 클릭하면 카테고리와 거리순 or 이름순을 고를 수 있는 셀렉트 태그가 사라진다', () => {
+    cy.get('#favoriteRestaurantTabButton').click();
+
+    cy.get('main .restaurant-filter-container').should('not.exist');
+  });
+});
diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/cypress/fixtures/mockRestaurants.json b/cypress/fixtures/mockRestaurants.json
@@ -0,0 +1,20 @@
+[
+  {
+    "id": 1,
+    "name": "음식점1",
+    "category": "한식",
+    "distance": 5,
+    "description": "맛있어요",
+    "link": "https://google.com",
+    "isFavorited": false
+  },
+  {
+    "id": 2,
+    "name": "음식점2",
+    "category": "아시안",
+    "distance": 10,
+    "description": "",
+    "link": "",
+    "isFavorited": true
+  }
+]
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -0,0 +1,65 @@
+/// <reference types="cypress" />
+
+Cypress.Commands.add('visitMainPage', () => {
+  cy.visit('http://localhost:8080/');
+});
+
+Cypress.Commands.add('openModal', () => {
+  cy.visitMainPage();
+
+  cy.get('.gnb__button').click();
+
+  cy.get('.modal').should('have.class', 'modal--open');
+});
+
+Cypress.Commands.add('closeModal', () => {
+  cy.get('.modal.modal--open').invoke('removeClass', 'modal--open');
+});
+
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * 메인 페이지 방문
+     */
+    visitMainPage(): Chainable<Element>;
+    openModal(): Chainable<Element>;
+    closeModal(): Chainable<Element>;
+  }
+}
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/components/.DS_Store b/src/components/.DS_Store
diff --git a/src/components/addRestaurantForm/AddRestaurantForm.ts b/src/components/addRestaurantForm/AddRestaurantForm.ts
@@ -0,0 +1,9 @@
+import renderAddNewRestaurantForm from './renderHandlers';
+
+function AddRestaurantForm() {
+  const addNewRestaurantForm = renderAddNewRestaurantForm();
+
+  return addNewRestaurantForm;
+}
+
+export default AddRestaurantForm;
diff --git a/src/components/addRestaurantForm/componentsData/AddRestaurantFormComponentDatat.ts b/src/components/addRestaurantForm/componentsData/AddRestaurantFormComponentDatat.ts
@@ -0,0 +1,10 @@
+export const ADD_RESTAURANT_FORM_COMPONENT_DATA = Object.freeze({
+  TAG_ID: 'modal-form',
+  TAG_CLASS_NAME: 'modal-form',
+});
+
+export const ADD_RESTAURANT_FORM_H2_COMPONENT_DATA = Object.freeze({
+  TAG_LEVEL: 2,
+  TAG_CLASS_NAME: 'modal-title text-title',
+  TAG_TEXT_CONTENT: '새로운 음식점',
+});
diff --git a/src/components/addRestaurantForm/eventHandlers.ts b/src/components/addRestaurantForm/eventHandlers.ts
@@ -0,0 +1,18 @@
+import inputNameHandler from '../modal/inputName/eventHandlers';
+import inputRestaurantLinkHandler from '../modal/inputLink/eventHandlers';
+import inputDescriptionHandler from '../modal/inputDescription/eventHandlers';
+import { submitHandler, cancelHandler } from '../modal/modalButton/eventHandlers';
+import categoryChange from '../modal/selectCategory/eventHandlers';
+import distanceChange from '../modal/selectDistance/eventHandlers';
+
+const addNewRestaurantFormEventHandler = () => {
+  inputNameHandler();
+  inputRestaurantLinkHandler();
+  inputDescriptionHandler();
+  submitHandler();
+  cancelHandler();
+  categoryChange();
+  distanceChange();
+};
+
+export default addNewRestaurantFormEventHandler;
diff --git a/src/components/addRestaurantForm/renderHandlers.ts b/src/components/addRestaurantForm/renderHandlers.ts
@@ -0,0 +1,36 @@
+import generateHeadingComponent from '../../uiUtils/generateHeadingComponent';
+import {
+  ADD_RESTAURANT_FORM_H2_COMPONENT_DATA,
+  ADD_RESTAURANT_FORM_COMPONENT_DATA,
+} from './componentsData/AddRestaurantFormComponentDatat';
+import generateFormComponent from '../../uiUtils/generateFormComponent';
+import SelectCategory from '../modal/selectCategory/SelectCategory';
+import InputName from '../modal/inputName/InputName';
+import SelectDistance from '../modal/selectDistance/SelectDistance';
+import InputDescription from '../modal/inputDescription/InputDescription';
+import InputLink from '../modal/inputLink/InputLink';
+import ModalButton from '../modal/modalButton/ModalButton';
+
+const rendereAddNewRestaurantFormElements = () => {
+  const selectCategory = SelectCategory();
+  const inputName = InputName();
+  const selectDistance = SelectDistance();
+  const inputDescription = InputDescription();
+  const inputLink = InputLink();
+  const modalButton = ModalButton();
+
+  return { selectCategory, inputName, selectDistance, inputDescription, inputLink, modalButton };
+};
+
+const renderAddNewRestaurantForm = () => {
+  const h2Component = generateHeadingComponent(ADD_RESTAURANT_FORM_H2_COMPONENT_DATA);
+  const formComponent = generateFormComponent(ADD_RESTAURANT_FORM_COMPONENT_DATA);
+  const formElements = rendereAddNewRestaurantFormElements();
+  const elementsToAdd = [h2Component, ...Object.values(formElements)];
+  elementsToAdd.forEach((element) => {
+    formComponent.appendChild(element);
+  });
+  return formComponent;
+};
+
+export default renderAddNewRestaurantForm;