[1단계 - 음식점 목록] 센트(김영우) 미션 제출합니다. (#5)

* chore: package-lock.json gitignore 추가

* docs: 기능 목록 작성

* test: Restaurants 클래스 테스트 작성

* feat: Restaurants 클래스 새로운 음식점 추가 메서드 구현

* test: Restaurants 클래스 이름순 정렬 기능 테스트 작성

* feat: Restaurants 클래스 이름순 정렬 기능 구현

* test: Restaurants 클래스 거리순 정렬 기능 테스트 작성

* feat: Restaurants 클래스 거리순 정렬 기능 구현

* feat: Restaurants 클래스 카테고리별 필터링 기능 구현

* docs: 기능 목록 업데이트 - restaurants 클래스 추상화 완료

* feat: RestaurantCard 컴포넌트 구현

* chore: package-lock

* feat: RestaurantList 컴포넌트 구현

* feat: 기본 구조 렌더링 기능 구현

* feat: CustomSelect 컴포넌트 구현

* feat: CustomModal 컴포넌트 구현

* feat: CustomHeader 컴포넌트 구현

* feat: CustomModal 토글 기능 구현

* feat: 이름순/거리순 선택시 해당 기준으로 정렬한 결과를 보여주는 기능 구현

* feat: 카테고리 선택시 해당 카테고리로 필터링된 결과를 보여주는 기능 구현

* refactor: 정렬, 필터링 정보 저장할 showState 추가

* refactor: 모달 내 customElement 추가

* feat: 새로운 식당 등록 기능 구현

* feat: 전체 기능 완성

* style: 메서드명 수정

* refactor: CustomSelect 클래스 상속 받는 클래스 수정

* test: unit test 도메인 로직 수정내용 반영

* test: CustomSelect 렌더링 테스트 추가

* chore: 배포 환경 설정

* style: dom 테스트 html 템플릿 들여쓰기 수정

* docs: 리드미에 배포 링크 추가

* fix: CustomSelect 컴포넌트에 id가 존재하지 않을 때 innerHTML을 수정하지 않도록 변경

* refactor: customElements 이벤트 바인딩 내부에서 진행하도록 수정 (새 음식점 등록 컴포넌트 제외)

* refactor: 새 음식점 등록 컴포넌트 이벤트 바인딩 위치 수정

* refactor: customElements의 connectedCallback 메서드 사용

* style: 타입 import 문을 가장 위에 작성하는 컨벤션 적용

* refactor: 입력 받아오는 부분 컴포넌트화

* style: 모달 컴포넌트 파일명 수정

* feat: esc키 입력시 모달 닫히는 기능 구현

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 *.tsbuildinfo
 .npm
 .eslintcache
+package-lock.json

README.md

@@ -1,2 +1,5 @@
 # javascript-lunch
+
 우아한테크코스 레벨1 점심 뭐 먹지 미션
+
+# [배포 링크](https://kyw0716.github.io/javascript-lunch/)

__tests__/render.test.js

@@ -1,3 +1,26 @@
 /**
  * @jest-environment jsdom
  */
+import { screen } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import createCustomSelect from "../src/components/CustomSelect";
+import createModal from "../src/components/CustomModal";
+
+createCustomSelect();
+createModal();
+
+test.each([
+  ["distance", "15분 내"],
+  ["category", "한식"],
+  ["category-filter", "한식"],
+  ["sorting-filter", "이름순"],
+])(
+  "CustomSelect 생성시 id에 따라 적절한 옵션값이 추가된다.",
+  (id, optionText) => {
+    document.body.innerHTML = `
+      <select is="custom-select" id=${id}></select>
+    `;
+
+    expect(screen.getByText(optionText));
+  }
+);

__tests__/unit.test.ts

@@ -0,0 +1,132 @@
+import type { Restaurant } from "../src/types/restaurant";
+import Restaurants from "../src/domain/Restaurants";
+
+const mockList: Restaurant[] = [
+  {
+    category: "일식",
+    name: "스시야좋아",
+    distance: 15,
+  },
+  {
+    category: "아시안",
+    name: "쌀국수맛있다",
+    distance: 20,
+  },
+  {
+    category: "한식",
+    name: "경주 은희네 해장국",
+    distance: 10,
+  },
+];
+
+const restaurants = new Restaurants(mockList);
+
+test("새로운 음식점을 음식점 리스트에 추가한다.", () => {
+  restaurants.add({
+    category: "한식",
+    name: "제주 은희네 해장국",
+    distance: 5,
+  });
+
+  expect(
+    restaurants.getListByOption({ filter: "전체", sort: "name" })
+  ).toMatchObject([
+    {
+      category: "한식",
+      name: "경주 은희네 해장국",
+      distance: 10,
+    },
+    {
+      category: "일식",
+      name: "스시야좋아",
+      distance: 15,
+    },
+    {
+      category: "아시안",
+      name: "쌀국수맛있다",
+      distance: 20,
+    },
+    {
+      category: "한식",
+      name: "제주 은희네 해장국",
+      distance: 5,
+    },
+  ]);
+});
+
+test("음식점 리스트를 이름순으로 정렬한다.", () => {
+  const sortedList = restaurants.getListByOption({
+    filter: "전체",
+    sort: "name",
+  });
+
+  expect(sortedList).toMatchObject([
+    {
+      category: "한식",
+      name: "경주 은희네 해장국",
+      distance: 10,
+    },
+    {
+      category: "일식",
+      name: "스시야좋아",
+      distance: 15,
+    },
+    {
+      category: "아시안",
+      name: "쌀국수맛있다",
+      distance: 20,
+    },
+    {
+      category: "한식",
+      name: "제주 은희네 해장국",
+      distance: 5,
+    },
+  ]);
+});
+
+test("음식점 리스트를 거리순으로 정렬한다.", () => {
+  const sortedList = restaurants.getListByOption({
+    filter: "전체",
+    sort: "distance",
+  });
+
+  expect(sortedList).toMatchObject([
+    {
+      category: "한식",
+      name: "제주 은희네 해장국",
+      distance: 5,
+    },
+    {
+      category: "한식",
+      name: "경주 은희네 해장국",
+      distance: 10,
+    },
+    {
+      category: "일식",
+      name: "스시야좋아",
+      distance: 15,
+    },
+    {
+      category: "아시안",
+      name: "쌀국수맛있다",
+      distance: 20,
+    },
+  ]);
+});
+
+test("음식점 리스트를 카테고리별로 필터링한다.", () => {
+  const filteredList = restaurants.filterByCategory("한식");
+
+  expect(filteredList).toMatchObject([
+    {
+      category: "한식",
+      name: "경주 은희네 해장국",
+      distance: 10,
+    },
+    {
+      category: "한식",
+      name: "제주 은희네 해장국",
+      distance: 5,
+    },
+  ]);
+});

docs/REQUIREMENTS.md

@@ -0,0 +1,37 @@
+- [x] restaurants 클래스 추상화
+
+  - [x] 음식점 리스트에 새로운 음식점을 추가하는 기능
+  - [x] 음식점 리스트를 이름순으로 정렬하는 기능
+  - [x] 음식점 리스트를 거리순으로 정렬하는 기능
+  - [x] 음식점 리스트를 카테고리별로 필터링하는 기능
+
+<br>
+
+- [x] 새로고침시 초기화되지 않는 기능(localstorage 활용)
+
+<br>
+
+- [x] 화면 구현
+  - [x] 기본 구조
+  - [x] 컴포넌트 분리
+    - [x] SelectBox 컴포넌트
+    - [x] RestaurantCard 컴포넌트
+      - [x] params: Restaurant 정보
+    - [x] RestaurantList 컴포넌트
+      - [x] params: RestaurantCard[]
+    - [x] Modal 컴포넌트
+      - [x] 토글기능
+      - [x] 새로운 음식점 등록 기능
+    - [x] Header 컴포넌트
+  - [x] 카테고리 선택시 해당 카테고리로 필터링된 결과를 보여주는 기능
+  - [x] 이름순/거리순 선택시 해당 기준으로 정렬한 결과를 보여주는 기능
+
+<br>
+
+- [x] 음식점 추가 모달
+  - [x] 취소하기 버튼 누르면 음식점 추가 모달이 사라지는 기능
+    - [x] esc
+    - [x] 배경 클릭
+  - [x] 필수정보 입력 후 추가하기 버튼 누르면 새로운 음식점 추가하는 기능
+    - [x] 카테고리, 이름, 거리 (필수정보)
+    - [x] 설명, 참고링크 (추가정보)

index.html

@@ -1,15 +1,11 @@
 <!DOCTYPE html>
 <html lang="ko">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>점심 뭐 먹지</title>
-</head>
-
-<body>
-
-</body>
-
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>점심 뭐 먹지</title>
+  </head>
+
+  <body></body>
 </html>