woowacourse · ddongule · Mar 8, 2023 · Feb 28, 2023 · Feb 28, 2023 · Feb 28, 2023
diff --git a/README.md b/README.md
@@ -1,2 +1,7 @@
 # javascript-lunch
+
 우아한테크코스 레벨1 점심 뭐 먹지 미션
+
+## 미션 페이지
+
+https://hafnium1923.github.io/javascript-lunch/
diff --git a/__tests__/render.test.js b/__tests__/render.test.js
@@ -1,3 +1,51 @@
+import { screen, fireEvent } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import HeaderComponent from "../src/components/HeaderComponent";
+import ModalComponent from "../src/components/modal/ModalComponent";
+
 /**
  * @jest-environment jsdom
  */
+
+describe("모달 렌더링 테스트", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+  test("음식점 추가 버튼 클릭하면 모달 창이 열린다.", () => {
+    // given
+    const header = new HeaderComponent();
+    const modal = new ModalComponent();
+
+    document.body.innerHTML = `
+        <header-element></header-element>
+        <modal-element></modal-element>
+    `;
+
+    // when
+    fireEvent.click(screen.getByLabelText("음식점 추가"));
+
+    // then
+    expect(
+      document.querySelector(".modal").classList.contains("modal--open")
+    ).toBeTruthy();
+  });
+
+  test("취소하기 버튼 클릭하면 모달 창이 닫힌다.", () => {
+    //given
+    const header = new HeaderComponent();
+    const modal = new ModalComponent();
+    document.body.innerHTML = `
+        <header-element></header-element>
+        <modal-element></modal-element>
+    `;
+    header.show();
+
+    //when
+    fireEvent.click(screen.getByText("취소하기"));
+
+    //then
+    expect(
+      document.querySelector(".modal").classList.contains("modal--open")
+    ).toBeFalsy();
+  });
+});
diff --git a/__tests__/unit.test.ts b/__tests__/unit.test.ts
diff --git a/docs/REQUIREMENTS.md b/docs/REQUIREMENTS.md
@@ -0,0 +1,22 @@
+## 기능 요구 사항 STEP1
+
+- 음식점 목록 객체 Restaurants RestaurantList
+  - 카테고리 필터 기능
+  - 이름순 정렬기능, 거리순 정렬기능
+  - 음식점 추가하는 기능
+- 음식점 객체 Restaurant
+
+  - 필수: 카테고리, 이름, 거리 옵션: 설명, 참고링크
+
+- 새로고침해도 추가한 음식점 정보 유지 -> local storage
+
+- 컴포넌트 단위로 UI 나누기
+
+## 컴포넌트
+
+[x] 헤더
+[x] 필터/정렬하는 셀렉터
+[x] 음식점 리스트 컴포넌트
+[X] 음식점 컴포넌트
+[x] 모달 컴포넌트 - 음식점 추가 컴포넌트
+[X] 버튼(모달에 달려있는)
diff --git a/templates/add-button.png → img/add-button.png b/templates/add-button.png → img/add-button.png
diff --git a/templates/category-asian.png → img/category-asian.png b/templates/category-asian.png → img/category-asian.png
diff --git a/templates/category-chinese.png → img/category-chinese.png b/templates/category-chinese.png → img/category-chinese.png
diff --git a/templates/category-etc.png → img/category-etc.png b/templates/category-etc.png → img/category-etc.png
diff --git a/templates/category-japanese.png → img/category-japanese.png b/templates/category-japanese.png → img/category-japanese.png
diff --git a/templates/category-korean.png → img/category-korean.png b/templates/category-korean.png → img/category-korean.png
diff --git a/templates/category-western.png → img/category-western.png b/templates/category-western.png → img/category-western.png
diff --git a/templates/favorite-icon-filled.png → img/favorite-icon-filled.png b/templates/favorite-icon-filled.png → img/favorite-icon-filled.png
diff --git a/templates/favorite-icon-lined.png → img/favorite-icon-lined.png b/templates/favorite-icon-lined.png → img/favorite-icon-lined.png
diff --git a/index.html b/index.html
@@ -1,15 +1,25 @@
 <!DOCTYPE html>
 <html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <title>점심 뭐 먹지</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <!-- GNB -->
+    <header-element></header-element>
 
-<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>
+    <main>
+      <!-- 카테고리/정렬 필터 -->
+      <select-element></select-element>
 
-<body>
-
-</body>
+      <!-- 음식점 목록 -->
+      <section class="restaurant-list-container">
+        <restaurant-list></restaurant-list>
+      </section>
 
+      <!-- 음식점 추가 모달 -->
+      <modal-element></modal-element>
+    </main>
+  </body>
 </html>
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "watch": "webpack --watch",
     "start": "webpack serve",
     "build": "webpack --mode=production",
-    "test-unit": "jest --watch",
+    "test-unit": "jest --watch --env=jsdom",
     "test-e2e": "cypress open"
   },
   "repository": {

diff --git a/src/abstracts/CustomElement.js b/src/abstracts/CustomElement.js
@@ -0,0 +1,16 @@
+class CustomElement extends HTMLElement {
+  connectedCallback() {
+    this.render();
+    this.setEvent();
+  }
+
+  render() {
+    this.insertAdjacentHTML("beforeend", this.template());
+  }
+
+  template() {}
+
+  setEvent() {}
+}
+
+export default CustomElement;
diff --git a/src/abstracts/constants.ts b/src/abstracts/constants.ts
@@ -0,0 +1,25 @@
+import { RestaurantAction } from "./types";
+
+export const RESTAURANT_ACTION: RestaurantAction = {
+  ADD_RESTAURANT: "add_restaurant",
+  FILTER_BY_CATEGORY: "filter_by_category",
+  SORT_RESTAURANTS: "sort_restaurants",
+} as const;
+
+export const CATEGORY_IMG = {
+  한식: "./category-korean.png",
+  중식: "./category-chinese.png",
+  일식: "./category-japanese.png",
+  아시안: "./category-asian.png",
+  양식: "./category-western.png",
+  기타: "./category-etc.png",
+} as const;
+
+export const RESTAURANTS_STORAGE = "restaurantList";
+
+export const CATEGORY_DEFAULT = "전체";
+
+export const SORT_METHOD = {
+  NAME: "name",
+  DISTANCE: "distance",
+} as const;
diff --git a/src/abstracts/types.ts b/src/abstracts/types.ts
@@ -0,0 +1,38 @@
+export type Category =
+  | "전체"
+  | "한식"
+  | "중식"
+  | "일식"
+  | "아시안"
+  | "양식"
+  | "기타";
+
+export type SortMethod = "name" | "distance";
+
+export interface Restaurant {
+  category: Category;
+  name: string;
+  distance: number;
+  description?: string;
+  link?: string;
+}
+
+export interface CustomElement extends HTMLElement {
+  render: () => void;
+  template: () => string;
+  setEvent: () => void;
+  show: () => void;
+  hide: () => void;
+  rerender: (data: Restaurant[] | Category | SortMethod) => void;
+}
+
+export interface Action {
+  type: string;
+  data?: Restaurant | Category | SortMethod;
+}
+
+export interface RestaurantAction {
+  ADD_RESTAURANT: string;
+  FILTER_BY_CATEGORY: string;
+  SORT_RESTAURANTS: string;
+}
diff --git a/src/components/HeaderComponent.js b/src/components/HeaderComponent.js
@@ -0,0 +1,28 @@
+import CustomElement from "../abstracts/CustomElement";
+
+class HeaderComponent extends CustomElement {
+  show() {
+    document.querySelector(".modal").classList.add("modal--open");
+  }
+
+  setEvent() {
+    document
+      .querySelector(".gnb__button")
+      .addEventListener("click", () => this.show());
+  }
+
+  template() {
+    return `
+    <header class="gnb">
+      <h1 class="gnb__title text-title">점심 뭐 먹지</h1>
+      <button type="button" class="gnb__button" aria-label="음식점 추가">
+        <img src="./add-button.png" alt="음식점 추가" />
+      </button>
+    </header>
+    `;
+  }
+}
+
+customElements.define("header-element", HeaderComponent);
+
+export default HeaderComponent;
diff --git a/src/components/SelectComponent.js b/src/components/SelectComponent.js
@@ -0,0 +1,49 @@
+import CustomElement from "../abstracts/CustomElement";
+import dispatcher from "../domain/Dispatcher";
+import { RESTAURANT_ACTION } from "../abstracts/constants";
+
+class SelectComponent extends CustomElement {
+  changeCategory() {
+    const category = document.querySelector("#category-filter").value;
+    dispatcher(RESTAURANT_ACTION.FILTER_BY_CATEGORY, category);
+  }
+
+  changeSortMethod() {
+    const sortMethod = document.querySelector("#sorting-filter").value;
+    dispatcher(RESTAURANT_ACTION.SORT_RESTAURANTS, sortMethod);
+  }
+
+  setEvent() {
+    document
+      .querySelector("#category-filter")
+      .addEventListener("change", () => this.changeCategory());
+    document
+      .querySelector("#sorting-filter")
+      .addEventListener("change", () => this.changeSortMethod());
+  }
+
+  template() {
+    return `
+    <section class="restaurant-filter-container">
+        <select name="category" id="category-filter" class="restaurant-filter">
+            <option value="전체">전체</option>
+            <option value="한식">한식</option>
+            <option value="중식">중식</option>
+            <option value="일식">일식</option>
+            <option value="양식">양식</option>
+            <option value="아시안">아시안</option>
+            <option value="기타">기타</option>
+        </select>
+        <select name="sorting" id="sorting-filter" class="restaurant-filter">
+            <option value="name">이름순</option>
+            <option value="distance">거리순</option>
+        </select>
+    </section>
+
+    `;
+  }
+}
+
+customElements.define("select-element", SelectComponent);
+
+export default SelectComponent;
diff --git a/src/components/modal/ModalComponent.js b/src/components/modal/ModalComponent.js
@@ -0,0 +1,28 @@
+import CustomElement from "../../abstracts/CustomElement";
+
+class ModalComponent extends CustomElement {
+  hide() {
+    document.querySelector(".modal").classList.remove("modal--open");
+  }
+
+  setEvent() {
+    document
+      .querySelector(".button--secondary")
+      .addEventListener("click", () => this.hide());
+  }
+
+  template() {
+    return `
+      <div class="modal">
+        <div class="modal-backdrop"></div>
+        <div class="modal-container">
+          <restaurant-add-form></restaurant-add-form>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("modal-element", ModalComponent);
+
+export default ModalComponent;