From 6f0d55a8a2e177fb2a75912851a17f4ffcca7b0f Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Thu, 14 Mar 2024 11:27:47 +0900
Subject: [PATCH 01/70] =?UTF-8?q?docs(README.md):=20=EC=8A=A4=ED=85=9D2?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=B6=94=EA=B0=80=EB=90=9C=20=EC=9A=94?=
 =?UTF-8?q?=EA=B5=AC=EC=82=AC=ED=95=AD=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 103 +++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 74 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index c576f5568..cd5bdfc3d 100644
--- a/README.md
+++ b/README.md
@@ -4,39 +4,95 @@
 
 # 기능 요구사항
 
-## 1. UI
+# Domain
 
-### header
+- [x] 음식점을 카테고리별로 필터링 한다.
+- [x] 음식점을 이름순, 거리순으로 정렬한다.
+- [x] 음식점 등록 폼을 제출하면 추가한다.
+- [ ] 추가하기 버튼을 클릭할 경우 입력에 대한 유효성 검증을 한다
+  - 음식점 이름은 10글자 이하여야한다.
+  - 음식점 설명은 300자 이하여야한다.
+  - 유효한 참고 링크인지 검증한다.
+- [ ] 유효한 입력일 경우 localStorage에 추가한다.
+- [ ] 전체 음식점 목록에서 자주 가는 음식점을 추가하거나, 되돌린다.
+- [ ] 전체 음식점 목록, 자주 가는 음식점을 필터링한다
+- [ ] 음식점 목록에 있는 음식점을 삭제한다.
+
+```ts
+addFavoriteRestaurant(restaurantName ; string) : boolean
+getFavoriteRestaurant() : Restaurant[]
+delete(restaurantName : string) : boolean
+```
 
-- [x] 점심 뭐 먹지 타이틀
-- [x] 음식점 추가 버튼
+# UI
 
-#### event
+## header
 
-- [x] 음식점 추가 버튼을 클릭하면 음식점 추가 폼 모달이 보여져야한다.
+- UI
+  - [x] 점심 뭐 먹지 타이틀
+  - [x] 음식점 추가 버튼
+- Event
+  - [x] 음식점 추가 버튼을 클릭하면 음식점 추가 폼 모달이 보여져야한다.
 
-### option-selector
+## option-selector
+
+- UI
 
 - [x] 카테고리를 필터링할 수 있는 옵션 버튼
 - [x] 이름, 거리순을 정렬할 수 있는 옵션 버튼
 
-#### event
+- Event
 
 - [x] 카테코리를 선택하면 선택된 카테고리에 해당되는 레스토랑 리스트를 보여준다
 - [x] 이름, 거리순을 정렬하는 버튼을 클릭하면 정렬된 레스토랑 리스트를 보여준다.
 
-### restaurant-list
+## restaurant-list
+
+- UI
+
+- restaurant-item
+
+  - 음식점 목록을 확인할 수 있다.
+  - 카테고리
+  - 레스토랑 이름
+  - (캠퍼스로 부터의) 거리
+  - 설명, 설명은 2줄 이상이 넘어가면 ...으로 내용을 숨긴다
+
+- Event
+
+- [x] 카테고리별 필터링, 정렬 옵션이 변경되는 이벤트가 발생하면 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
+- [ ] 모든 음식점, 자주 가는 음식점을 클릭할 경우 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
+
+## restaurant-detail
+
+- UI
 
-- [x] 선택된 옵션에 따라 레스토랑 리스트를 보여준다
+  - 음식점 목록 중 하나를 클릭하면 해당 음식점에 대한 세부 정보를 나타낸다.
+  - [ ] 음식점 이름, 카테고리, 캠퍼스로부터의 거리, 자주 가는 음식점인지의 여부
+  - [ ] 음식점 상세 설명, ...으로 표시하지 않고 모든 내용을 보여준다,
+  - [ ] 참고링크
 
-- 음식점 목록을 확인할 수 있다.
-- 카테고리
-- 레스토랑 이름
-- (캠퍼스로 부터의) 거리
-- 설명
-  - 설명은 2줄 이상이 넘어가면 ...으로 내용을 숨긴다
+- Event
 
-### restaurant-add-form
+- [ ] 음식점 세부 정보의 바깥 영역을 클릭하거나, 닫기 버튼을 클릭하면 `restaurant-detail` 컴포넌트는 사라져야한다.
+- [ ] 음식점 세부 정보에서 자주 가는 음식점인지의 여부를 변경하면, 변경이 반영되어야한다.
+- [ ] 참고 링크를 클릭하면 해당 링크로 이동시킨다.
+- [ ] 삭제하기 버튼을 클릭할 경우, 해당 음식점을 삭제한 후 `restaurant-detail` 컴포넌트는 사라져야한다.
+
+## 모든 음식점, 자주 가는 음식점 구분 버튼 (이름 미정)
+
+- UI
+
+- [ ] 식당 목록 선택 옵션 (모든 음식점, 자주 가는 음식점)
+- [ ] 클릭한 버튼에 액티브 스타일이 적용되어야 하며, 이전에 클릭한 버튼의 액티브 스타일은 사라져야한다.
+
+- Event
+
+- [ ] 특정 버튼을 클릭할 때마다, 보여줘야 할 음식점 목록의 변경을 트리거한다.
+
+## restaurant-add-form
+
+- UI
 
 - [x] 새로운 음식점 타이틀
 - [x] 카테코리 선택 옵션 (한식, 중식, 일식, 양식, 아시안, 기타)
@@ -46,19 +102,8 @@
 - [x] 취소, 추가 버튼
 - [ ] 유효하지 않은 입력값이 들어온 경우 해당 입력값 아래에 빨간색 에러 메시지를 보여준다.
 
-#### event
+- Event
 
 - [x] 취소 버튼을 클릭하면 추가 폼을 리셋하고 닫는다.
 - [x] 추가하기 버튼을 클릭하면 추가 폼을 닫고, 추가된 레스토랑을 레스토랑 리스트에 반영한다.
 - [x] 추가 폼 외부를 클릭 시 폼을 닫는다. 외부를 클릭할 경우 입력한 값들을 리셋하지 않고 닫기만 한다.
-
-## 2. Domain
-
-- [x] 음식점을 카테고리별로 필터링 한다.
-- [x] 음식점을 이름순, 거리순으로 정렬한다.
-- [x] 음식점 등록 폼을 제출하면 추가한다.
-- [ ] 추가하기 버튼을 클릭할 경우 입력에 대한 유효성 검증을 한다
-  - 음식점 이름은 10글자 이하여야한다.
-  - 음식점 설명은 300자 이하여야한다.
-  - 유효한 참고 링크인지 검증한다.
-- [ ] 유효한 입력일 경우 localStorage에 추가한다.

From 13e87fa6a734b67d342843cbba88d8e9c8d4a389 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Thu, 14 Mar 2024 12:04:58 +0900
Subject: [PATCH 02/70] =?UTF-8?q?docs(README.md):=20=EC=8A=A4=ED=85=9D2?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=B6=94=EA=B0=80=EB=90=9C=20=EC=9A=94?=
 =?UTF-8?q?=EA=B5=AC=EC=82=AC=ED=95=AD=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CategoryIcon 컴포넌트 분리 내용 추가
---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index cd5bdfc3d..be0068791 100644
--- a/README.md
+++ b/README.md
@@ -63,6 +63,12 @@ delete(restaurantName : string) : boolean
 - [x] 카테고리별 필터링, 정렬 옵션이 변경되는 이벤트가 발생하면 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
 - [ ] 모든 음식점, 자주 가는 음식점을 클릭할 경우 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
 
+## category-icon
+
+- UI
+
+  - 전체, 한식, 중식,,, 등 카테고리에 따라 다른 이미지를 보여준다.
+
 ## restaurant-detail
 
 - UI

From 5eb7e3e62928b885fb50255c7e6f25b6b288f1d7 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Fri, 15 Mar 2024 22:25:33 +0900
Subject: [PATCH 03/70] =?UTF-8?q?chore(delete=20js=20file):=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20js=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseComponent.js               |  25 ----
 src/components/Header.js                      |  28 -----
 src/components/MenuApp.js                     |  32 ------
 src/components/OptionSelector.js              |  43 -------
 .../RestaurantAddForm/RestaurantNameInput.js  |  52 ---------
 .../RestaurantAddForm/RestaurantOption.js     |  67 -----------
 src/components/RestaurantAddForm/index.js     | 107 ------------------
 src/components/RestaurantItem.js              |  61 ----------
 src/components/RestaurantList.js              |  70 ------------
 src/utils/dom.js                              |   1 -
 10 files changed, 486 deletions(-)
 delete mode 100644 src/components/BaseComponent.js
 delete mode 100644 src/components/Header.js
 delete mode 100644 src/components/MenuApp.js
 delete mode 100644 src/components/OptionSelector.js
 delete mode 100644 src/components/RestaurantAddForm/RestaurantNameInput.js
 delete mode 100644 src/components/RestaurantAddForm/RestaurantOption.js
 delete mode 100644 src/components/RestaurantAddForm/index.js
 delete mode 100644 src/components/RestaurantItem.js
 delete mode 100644 src/components/RestaurantList.js
 delete mode 100644 src/utils/dom.js

diff --git a/src/components/BaseComponent.js b/src/components/BaseComponent.js
deleted file mode 100644
index 22d75fd4c..000000000
--- a/src/components/BaseComponent.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export default class BaseComponent extends HTMLElement {
-  constructor() {
-    super();
-  }
-
-  connectedCallback() {
-    this.render();
-    this.setEvent();
-  }
-
-  disconnectedCallback() {}
-
-  render() {}
-
-  setEvent() {}
-
-  emitEvent(event, data) {
-    this.dispatchEvent(
-      new CustomEvent(event, {
-        bubbles: true,
-        detail: data,
-      })
-    );
-  }
-}
diff --git a/src/components/Header.js b/src/components/Header.js
deleted file mode 100644
index ccbcaee92..000000000
--- a/src/components/Header.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { addButton } from "../assets/index.js";
-import { $ } from "../utils/dom.js";
-import BaseComponent from "./BaseComponent.js";
-
-class Header extends BaseComponent {
-  constructor() {
-    super();
-  }
-
-  render() {
-    this.innerHTML = `
-    <header class="gnb">
-        <h1 class="gnb__title text-title">점심 뭐 먹지</h1>
-        <button type="button" class="gnb__button" aria-label="음식점 추가">
-          <img src=${addButton} alt="음식점 추가">
-        </button>
-    </header>
-  `;
-  }
-
-  setEvent() {
-    $(".gnb__button").addEventListener("click", (e) => {
-      this.emitEvent("modal-open");
-    });
-  }
-}
-
-customElements.define("app-header", Header);
diff --git a/src/components/MenuApp.js b/src/components/MenuApp.js
deleted file mode 100644
index 9f0f52690..000000000
--- a/src/components/MenuApp.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { CATEGORIES } from "../constants/menu";
-import { initRestaurantStorage } from "../domains/Restaurants";
-import BaseComponent from "./BaseComponent.js";
-
-class MenuApp extends BaseComponent {
-  constructor() {
-    initRestaurantStorage();
-    super();
-  }
-
-  render() {
-    this.innerHTML = `
-    <app-header></app-header>
-    <main> 
-      <section class="restaurant-filter-container">
-        <option-selector type="category" options=${[
-          "전체",
-          ...CATEGORIES,
-        ]} ></option-selector>
-        <option-selector type="sort" options=${[
-          "이름순",
-          "거리순",
-        ]}></option-selector>
-      </section>
-      <restaurant-list></restaurant-list>
-      <restaurant-add-form></restaurant-add-form>
-    </main>
-    `;
-  }
-}
-
-customElements.define("menu-app", MenuApp);
diff --git a/src/components/OptionSelector.js b/src/components/OptionSelector.js
deleted file mode 100644
index 742819317..000000000
--- a/src/components/OptionSelector.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import BaseComponent from "./BaseComponent.js";
-
-class OptionSelector extends BaseComponent {
-  #selectType = null;
-
-  constructor() {
-    super();
-    this.#selectType = this.getAttribute("type");
-  }
-
-  #createOptionHTML(options) {
-    return options.reduce(
-      (accOptions, currOption) =>
-        accOptions + `<option value=${currOption}>${currOption}</option>;`,
-      ""
-    );
-  }
-
-  render() {
-    const options = this.getAttribute("options").split(",");
-
-    this.innerHTML = `
-      <select name="category" id="category-filter" class="restaurant-filter-select select-arrow-down arrow-down-black" aria-label="${
-        this.#selectType
-      }-select">
-        ${this.#createOptionHTML(options)}
-      </select> 
-    `;
-  }
-
-  setEvent() {
-    this.addEventListener("change", (e) => {
-      const selectedValue = e.target.value;
-
-      this.emitEvent("select-change", {
-        type: this.#selectType,
-        option: selectedValue,
-      });
-    });
-  }
-}
-
-customElements.define("option-selector", OptionSelector);
diff --git a/src/components/RestaurantAddForm/RestaurantNameInput.js b/src/components/RestaurantAddForm/RestaurantNameInput.js
deleted file mode 100644
index 1376f878a..000000000
--- a/src/components/RestaurantAddForm/RestaurantNameInput.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { $ } from "../../utils/dom";
-import restaurantValidator from "../../validators/restaurantValidator";
-import BaseComponent from "../BaseComponent";
-
-class RestaurantNameInput extends BaseComponent {
-  #errorMessageClassList = null;
-
-  constructor() {
-    super();
-  }
-
-  render() {
-    this.innerHTML = `
-      <div class="form-item form-item--required" id="name-input">
-        <label for="name">이름</label>
-        <input type="text" name="name" id="name" class="text-caption">
-        <p class="hidden text-caption error-message" id="name-error-message">1글자 이상 10글자 이하로 작성해주세요</p>
-      </div>`;
-
-    this.#errorMessageClassList = $("#name-error-message").classList;
-  }
-
-  #isValidName(value) {
-    return restaurantValidator.isInRange(value, 0, 10);
-  }
-
-  #renderErrorMessage() {
-    this.#errorMessageClassList.remove("hidden");
-  }
-
-  #hideErrorMessage() {
-    this.#errorMessageClassList.add("hidden");
-  }
-
-  #handleErrorMessage(value) {
-    this.#isValidName(value)
-      ? this.#hideErrorMessage()
-      : this.#renderErrorMessage();
-  }
-
-  setEvent() {
-    document.addEventListener("add-form-submit", () => {
-      this.#handleErrorMessage($("#name").value);
-    });
-
-    $("#name").addEventListener("focusout", (e) => {
-      this.#handleErrorMessage(e.target.value);
-    });
-  }
-}
-
-customElements.define("restaurant-name-input", RestaurantNameInput);
diff --git a/src/components/RestaurantAddForm/RestaurantOption.js b/src/components/RestaurantAddForm/RestaurantOption.js
deleted file mode 100644
index 85712aaf9..000000000
--- a/src/components/RestaurantAddForm/RestaurantOption.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { $ } from "../../utils/dom";
-import restaurantValidator from "../../validators/restaurantValidator";
-import BaseComponent from "../BaseComponent";
-
-class RestaurantOptions extends BaseComponent {
-  #errorMessageClassList = null;
-
-  constructor() {
-    super();
-  }
-
-  #getOptionText(id) {
-    if (id === "category") return "카테고리";
-    if (id === "distance") return "거리(도보 이동 시간)";
-  }
-
-  #isSelected() {
-    const id = this.getAttribute("id");
-    return restaurantValidator.isSelected($(`#${id}-select`).value);
-  }
-
-  #renderErrorMessage() {
-    this.#errorMessageClassList.remove("hidden");
-  }
-
-  #hideErrorMessage() {
-    this.#errorMessageClassList.add("hidden");
-  }
-
-  #handleErrorMessage() {
-    this.#isSelected() ? this.#hideErrorMessage() : this.#renderErrorMessage();
-  }
-
-  #createOptionHTML(options, values) {
-    return options.reduce(
-      (accOptions, currOption, index) =>
-        accOptions + `<option value=${values[index]}>${currOption}</option>;`,
-      ""
-    );
-  }
-
-  render() {
-    const options = this.getAttribute("options").split(",");
-    const values = this.getAttribute("values").split(",");
-    const id = this.getAttribute("id");
-    const text = this.#getOptionText(id);
-
-    this.innerHTML = `        
-      <div class="form-item form-item--required">
-          <label for="${id}-select">${text}</label>
-          <select name="${id}" id=${id}-select class="select-arrow-down arrow-down-grey">
-            ${this.#createOptionHTML(options, values)}
-          </select>
-          <p class="hidden text-caption error-message" id=${id}-select-error-message>옵션을 선택해주세요</p>
-      </div>`;
-
-    this.#errorMessageClassList = $(`#${id}-select-error-message`).classList;
-  }
-
-  setEvent() {
-    document.addEventListener("add-form-submit", () => {
-      this.#handleErrorMessage();
-    });
-  }
-}
-
-customElements.define("restaurant-option", RestaurantOptions);
diff --git a/src/components/RestaurantAddForm/index.js b/src/components/RestaurantAddForm/index.js
deleted file mode 100644
index 8d0c15d33..000000000
--- a/src/components/RestaurantAddForm/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import { CATEGORIES, DISTANCES } from "../../constants/menu";
-import { add } from "../../domains/Restaurants";
-import { $ } from "../../utils/dom";
-import BaseComponent from "../BaseComponent";
-
-class RestaurantAddForm extends BaseComponent {
-  constructor() {
-    super();
-  }
-
-  render() {
-    this.innerHTML = `
-    <div class="modal">
-      <div class="modal-backdrop"></div>
-      <div class="modal-container">
-        <h2 class="modal-title text-title">새로운 음식점</h2>
-        <form id="restaurant-add-form">
-        
-          <restaurant-option 
-            id="category" 
-            options="${["선택해주세요", ...CATEGORIES]}"
-            values="${["", ...CATEGORIES]}" 
-            ></restaurant-option>
-          <restaurant-name-input></restaurant-name-input>
-          <restaurant-option 
-            id="distance" 
-            options="${["선택해주세요", ...DISTANCES.map((v) => `${v}분 내`)]}"
-            values="${["", ...DISTANCES.map((v) => String(v))]}" 
-            ></restaurant-option>
-      
-          <div class="form-item">
-            <label for="description">설명</label>
-            <textarea name="description" id="description" cols="30" rows="5" maxlength="300"></textarea>
-            <span class="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
-            <p class="hidden" id="error-message">10글자 이하로 작성해주세요</p>
-          </div>
-
-          <div class="form-item">
-            <label for="link">참고 링크</label>
-            <input type="text" name="link" id="link">
-            <span class="help-text text-caption">매장 정보를 확인할 수 있는 링크를 입력해 주세요.</span>
-          </div>
-
-          <div class="button-container">
-            <button type="reset" id="reset-button" class="button button--secondary text-caption">취소하기</button>
-            <button type="submit" class="button button--primary text-caption">추가하기</button>
-          </div>
-        </form>
-      </div>
-    </div>
-    `;
-  }
-
-  #getFormData() {
-    const formData = new FormData($("#restaurant-add-form"));
-    return Object.fromEntries(formData.entries());
-  }
-
-  #resetFormData() {
-    $("#restaurant-add-form").reset();
-  }
-
-  #renderFormModal() {
-    $(".modal").classList.add("modal--open");
-    document.body.classList.add("stop-scroll");
-  }
-
-  #hideFormModal() {
-    document.body.classList.remove("stop-scroll");
-    $(".modal").classList.remove("modal--open");
-  }
-
-  setEvent() {
-    document.addEventListener("modal-open", () => {
-      this.#renderFormModal();
-    });
-
-    $("#restaurant-add-form").addEventListener("submit", (e) => {
-      e.preventDefault();
-      this.emitEvent("add-form-submit");
-
-      const formData = this.#getFormData();
-
-      try {
-        if (add(formData)) {
-          this.emitEvent("add-restaurant");
-          this.#hideFormModal();
-          this.#resetFormData();
-        }
-      } catch (error) {
-        alert(error.message);
-      }
-    });
-
-    $("#reset-button").addEventListener("click", () => {
-      this.#hideFormModal();
-    });
-
-    $(".modal-backdrop").addEventListener("click", (event) => {
-      if (event.target === event.currentTarget) {
-        this.#hideFormModal();
-      }
-    });
-  }
-}
-
-customElements.define("restaurant-add-form", RestaurantAddForm);
diff --git a/src/components/RestaurantItem.js b/src/components/RestaurantItem.js
deleted file mode 100644
index f1cfa9d19..000000000
--- a/src/components/RestaurantItem.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import {
-  categoryAsian,
-  categoryChinese,
-  categoryEtc,
-  categoryJapanese,
-  categoryKorean,
-  categoryWestern,
-} from "../assets/index.js";
-import BaseComponent from "./BaseComponent.js";
-
-class RestaurantItem extends BaseComponent {
-  constructor() {
-    super();
-  }
-
-  #categoryToImg(category) {
-    switch (category) {
-      case "한식":
-        return categoryKorean;
-      case "중식":
-        return categoryChinese;
-      case "아시안":
-        return categoryAsian;
-      case "일식":
-        return categoryJapanese;
-      case "양식":
-        return categoryWestern;
-      case "기타":
-        return categoryEtc;
-      default:
-        break;
-    }
-  }
-
-  render() {
-    const category = this.getAttribute("category");
-    const name = this.getAttribute("name");
-    const distance = this.getAttribute("distance");
-    const description = this.getAttribute("description");
-    const img = this.#categoryToImg(category);
-
-    this.innerHTML = `
-      <div class="restaurant">
-        <div class="restaurant__category">
-          <img src=${img} alt="한식" class="category-icon">
-        </div>
-        <div class="restaurant__info">
-          <span class="restaurant__name text-subtitle">${name}</span>
-          <span class="restaurant__distance text-body">캠퍼스부터 ${distance}분 내</span>
-          ${
-            description
-              ? `<p class="restaurant__description text-body">${description}</p>`
-              : ""
-          }
-        </div>
-      </div>
-      `;
-  }
-}
-
-customElements.define("restaurant-item", RestaurantItem);
diff --git a/src/components/RestaurantList.js b/src/components/RestaurantList.js
deleted file mode 100644
index 797f0b82d..000000000
--- a/src/components/RestaurantList.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { filterByCategory, sortByType } from "../domains/Restaurants";
-import BaseComponent from "./BaseComponent.js";
-
-class RestaurantList extends BaseComponent {
-  #currentCategory;
-
-  constructor() {
-    super();
-    this.#currentCategory = "전체";
-  }
-
-  #getCurrentList(sortOption) {
-    return sortOption
-      ? sortByType(this.#currentCategory, sortOption)
-      : filterByCategory(this.#currentCategory);
-  }
-
-  #sortRestaurantList(sortOption) {
-    this.render(sortOption);
-  }
-
-  #filterRestaurantList(option) {
-    this.#currentCategory = option;
-    this.render();
-  }
-
-  #createRestaurantListHTML(restaurantList) {
-    return restaurantList.reduce((accRestaurants, currentRestaurant) => {
-      const { name, category, distance, description } = currentRestaurant;
-
-      return (
-        accRestaurants +
-        `
-        <restaurant-item
-          name="${name}"
-          category="${category}"
-          distance="${distance}"
-          description="${description}"
-        ></restaurant-item>
-        `
-      );
-    }, "");
-  }
-
-  render(sortOption) {
-    const currentList = this.#getCurrentList(sortOption);
-
-    this.innerHTML = `
-      <section class="restaurant-list-container">
-        ${this.#createRestaurantListHTML(currentList)}
-      </section>
-    `;
-  }
-
-  setEvent() {
-    document.addEventListener("select-change", (event) => {
-      const { type, option } = event.detail;
-
-      type === "sort"
-        ? this.#sortRestaurantList(option)
-        : this.#filterRestaurantList(option);
-    });
-
-    document.addEventListener("add-restaurant", () => {
-      this.render();
-    });
-  }
-}
-
-customElements.define("restaurant-list", RestaurantList);
diff --git a/src/utils/dom.js b/src/utils/dom.js
deleted file mode 100644
index 8df86b003..000000000
--- a/src/utils/dom.js
+++ /dev/null
@@ -1 +0,0 @@
-export const $ = (selector) => document.querySelector(selector);

From ec3f0552446a375da76e703ceda41d82d5f97071 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Fri, 15 Mar 2024 22:27:07 +0900
Subject: [PATCH 04/70] =?UTF-8?q?feat(Restauran):=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=EB=90=9C=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EC=9A=94=EA=B5=AC?=
 =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 음식점 이름으로 식당 정보를 찾을 수 있다.
- 유효한 입력일 경우 로컬 스토리지에 식당을 추가한다.
- 음식점 목록에 있는 한 식당을 삭제한다
---
 README.md                  |  5 ++-
 src/domains/Restaurants.ts | 86 ++++++++++++++++++++++++++------------
 2 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index be0068791..8cd840f32 100644
--- a/README.md
+++ b/README.md
@@ -13,10 +13,11 @@
   - 음식점 이름은 10글자 이하여야한다.
   - 음식점 설명은 300자 이하여야한다.
   - 유효한 참고 링크인지 검증한다.
-- [ ] 유효한 입력일 경우 localStorage에 추가한다.
+- [x] 음식점 이름으로 식당의 정보를 찾을 수 있도록 한다.
+- [x] 유효한 입력일 경우 localStorage에 추가한다.
 - [ ] 전체 음식점 목록에서 자주 가는 음식점을 추가하거나, 되돌린다.
 - [ ] 전체 음식점 목록, 자주 가는 음식점을 필터링한다
-- [ ] 음식점 목록에 있는 음식점을 삭제한다.
+- [x] 음식점 목록에 있는 음식점을 삭제한다.
 
 ```ts
 addFavoriteRestaurant(restaurantName ; string) : boolean
diff --git a/src/domains/Restaurants.ts b/src/domains/Restaurants.ts
index b03b77c25..cf999325a 100644
--- a/src/domains/Restaurants.ts
+++ b/src/domains/Restaurants.ts
@@ -1,14 +1,23 @@
-import { DEFAULT_DATA, ERROR_MESSAGES } from "../constants/menu";
-import { Category, RestaurantItem } from "../types/menu";
+import {
+  CATEGORIES,
+  DEFAULT_DATA,
+  ERROR_MESSAGES,
+  SORT_TYPE,
+} from "../constants/menu";
+import {
+  CategoryString,
+  RestaurantAddItem,
+  RestaurantItem,
+  SortOptionString,
+} from "../types/menu";
 import restaurantValidator from "../validators/restaurantValidator";
 
-type SortType = "이름순" | "거리순";
 const RESTAURANT_KEY = "restaurants";
 
 const getRestaurantFromStorage = () => {
   const storedRestaurants = localStorage.getItem(RESTAURANT_KEY);
   if (!storedRestaurants) return [];
-
+  // TODO : type assertion을 사용하지 않는 방법을 고민해본다.
   return JSON.parse(storedRestaurants) as RestaurantItem[];
 };
 
@@ -20,7 +29,29 @@ const isAlreadyExist = (newRestaurantName: string) => {
   );
 };
 
-export const validateRestaurantData = (restaurantInfo: RestaurantItem) => {
+const sortByName = (restaurants: RestaurantItem[]) => {
+  return [...restaurants.sort((a, b) => (a.name < b.name ? -1 : 1))];
+};
+
+const sortByDistance = (restaurants: RestaurantItem[]) => {
+  return [...restaurants.sort((a, b) => a.distance - b.distance)];
+};
+
+const trimAllSpace = (str: string): string => {
+  return str.replaceAll(" ", "");
+};
+
+export const initRestaurantStorage = () => {
+  if (getRestaurantFromStorage().length > 0) {
+    return;
+  }
+
+  DEFAULT_DATA.forEach((data: RestaurantItem) => {
+    add(data);
+  });
+};
+
+export const validateRestaurantData = (restaurantInfo: RestaurantAddItem) => {
   const { name, category, distance, description, link } = restaurantInfo;
 
   if (!restaurantValidator.isSelected(category)) {
@@ -43,52 +74,53 @@ export const validateRestaurantData = (restaurantInfo: RestaurantItem) => {
   }
 };
 
-const sortByName = (restaurants: RestaurantItem[]) => {
-  return [...restaurants.sort((a, b) => (a.name < b.name ? -1 : 1))];
-};
+export const findRestaurantByName = (
+  restaurantName: string
+): RestaurantItem | undefined => {
+  const storedRestaurants = getRestaurantFromStorage();
 
-const sortByDistance = (restaurants: RestaurantItem[]) => {
-  return [...restaurants.sort((a, b) => a.distance - b.distance)];
+  return storedRestaurants.find(({ name }) => name === restaurantName);
 };
 
-const trimAllSpace = (str: string): string => {
-  return str.replaceAll(" ", "");
-};
-
-export const initRestaurantStorage = () => {
-  if (getRestaurantFromStorage().length > 0) {
-    return;
-  }
+export const deleteRestaurantByName = (restaurantName: string): void => {
+  const storedRestaurants = getRestaurantFromStorage();
+  const filteredRestaurants = storedRestaurants.filter(
+    ({ name }) => restaurantName !== name
+  );
 
-  DEFAULT_DATA.forEach((data: RestaurantItem) => {
-    add(data);
-  });
+  localStorage.setItem(RESTAURANT_KEY, JSON.stringify(filteredRestaurants));
 };
 
-export const add = (restaurantInfo: RestaurantItem) => {
+export const add = (restaurantInfo: RestaurantAddItem) => {
   const storedRestaurants = getRestaurantFromStorage();
   validateRestaurantData(restaurantInfo);
 
   localStorage.setItem(
     RESTAURANT_KEY,
-    JSON.stringify([...storedRestaurants, restaurantInfo])
+    JSON.stringify([
+      ...storedRestaurants,
+      { ...restaurantInfo, isFavorite: false },
+    ])
   );
 
   return true;
 };
 
-export const filterByCategory = (category: Category) => {
+export const filterByCategory = (category: CategoryString) => {
   const restaurants: RestaurantItem[] = getRestaurantFromStorage();
 
-  if (category === "전체") return restaurants;
+  if (category === CATEGORIES.all) return restaurants;
 
   return restaurants.filter((item) => item.category === category);
 };
 
-export const sortByType = (category: Category, type: SortType) => {
+export const sortByType = (
+  category: CategoryString,
+  type: SortOptionString
+) => {
   const filteredRestaurants = filterByCategory(category);
 
-  return type === "이름순"
+  return type === SORT_TYPE.name
     ? sortByName(filteredRestaurants)
     : sortByDistance(filteredRestaurants);
 };

From 72a62ee430ceb7bb124438e24870c29be1f9bf14 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Fri, 15 Mar 2024 22:30:01 +0900
Subject: [PATCH 05/70] =?UTF-8?q?refactor(BaseComponent):=20TS=EB=A1=9C=20?=
 =?UTF-8?q?=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 자식 클래스에게 상속할 메서드 protected 키워드 사용
- 커스텀 이벤트를 실행시키는 추상화 메서드 제네릭 타입 적용
---
 src/components/BaseComponent.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/components/BaseComponent.ts

diff --git a/src/components/BaseComponent.ts b/src/components/BaseComponent.ts
new file mode 100644
index 000000000..67090a8fd
--- /dev/null
+++ b/src/components/BaseComponent.ts
@@ -0,0 +1,31 @@
+import { MENU_APP_EVENTS } from "../constants/event";
+
+type MenuAppEvent =
+  | keyof HTMLElementEventMap
+  | (typeof MENU_APP_EVENTS)[keyof typeof MENU_APP_EVENTS];
+
+export default class BaseComponent extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  protected connectedCallback() {
+    this.render();
+    this.setEvent();
+  }
+
+  protected disconnectedCallback() {}
+
+  protected render() {}
+
+  protected setEvent() {}
+
+  protected emitEvent<T>(event: MenuAppEvent, data?: T) {
+    this.dispatchEvent(
+      new CustomEvent(event, {
+        bubbles: true,
+        detail: data,
+      })
+    );
+  }
+}

From c09a809fa993325052c4af7d95a85969475a04d1 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Fri, 15 Mar 2024 22:31:29 +0900
Subject: [PATCH 06/70] =?UTF-8?q?refactor(MenuApp):=20UI=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20TS=EB=A1=9C=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MenuApp.ts | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/MenuApp.ts

diff --git a/src/components/MenuApp.ts b/src/components/MenuApp.ts
new file mode 100644
index 000000000..c68ec14a1
--- /dev/null
+++ b/src/components/MenuApp.ts
@@ -0,0 +1,33 @@
+import { MENU_APP_EVENTS } from "../constants/event";
+import { CATEGORIES, SORT_TYPE } from "../constants/menu";
+import { initRestaurantStorage } from "../domains/Restaurants";
+import BaseComponent from "./BaseComponent";
+
+class MenuApp extends BaseComponent {
+  constructor() {
+    initRestaurantStorage();
+    super();
+  }
+
+  render() {
+    this.innerHTML = /*html*/ `
+    <app-header></app-header>
+    <main> 
+      <section class="restaurant-filter-container">
+        <option-selector type="category" options=${[
+          ...Object.values(CATEGORIES),
+        ]} ></option-selector>
+        <option-selector type="sort" options=${[
+          ...Object.values(SORT_TYPE),
+        ]}></option-selector>
+      </section>
+      <restaurant-list></restaurant-list>
+    </main>
+    <modal-wrapper id='add-form' open-type=${MENU_APP_EVENTS.openAddForm}>
+      <restaurant-add-form></restaurant-add-form>
+    </modal-wrapper>
+    `;
+  }
+}
+
+customElements.define("menu-app", MenuApp);

From db3dea75786812bd0bf090e9d2118d77083b5ca8 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:08:11 +0900
Subject: [PATCH 07/70] =?UTF-8?q?feat(Restaurants):=20=EC=9D=8C=EC=8B=9D?=
 =?UTF-8?q?=EC=A0=90=20=EB=8F=84=EB=A9=94=EC=9D=B8=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 자주가는 음식점인지 아닌지에 대한 상태 변경
- 자주가는 음식점 목록만 필터링
---
 README.md                  |  4 +--
 src/domains/Restaurants.ts | 67 +++++++++++++++++++-------------------
 2 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index 8cd840f32..dc5207c0f 100644
--- a/README.md
+++ b/README.md
@@ -15,8 +15,8 @@
   - 유효한 참고 링크인지 검증한다.
 - [x] 음식점 이름으로 식당의 정보를 찾을 수 있도록 한다.
 - [x] 유효한 입력일 경우 localStorage에 추가한다.
-- [ ] 전체 음식점 목록에서 자주 가는 음식점을 추가하거나, 되돌린다.
-- [ ] 전체 음식점 목록, 자주 가는 음식점을 필터링한다
+- [x] 자주 가는 음식점인지 아닌지에 대해 상태를 변경(토글)한다.
+- [x] 자주 가는 음식점 목록을 필터링한다.
 - [x] 음식점 목록에 있는 음식점을 삭제한다.
 
 ```ts
diff --git a/src/domains/Restaurants.ts b/src/domains/Restaurants.ts
index cf999325a..4d307bbd1 100644
--- a/src/domains/Restaurants.ts
+++ b/src/domains/Restaurants.ts
@@ -1,15 +1,5 @@
-import {
-  CATEGORIES,
-  DEFAULT_DATA,
-  ERROR_MESSAGES,
-  SORT_TYPE,
-} from "../constants/menu";
-import {
-  CategoryString,
-  RestaurantAddItem,
-  RestaurantItem,
-  SortOptionString,
-} from "../types/menu";
+import { CATEGORIES, DEFAULT_DATA, ERROR_MESSAGES, SORT_TYPE } from "../constants/menu";
+import { CategoryString, RestaurantAddItem, RestaurantItem, SortOptionString } from "../types/menu";
 import restaurantValidator from "../validators/restaurantValidator";
 
 const RESTAURANT_KEY = "restaurants";
@@ -17,16 +7,14 @@ const RESTAURANT_KEY = "restaurants";
 const getRestaurantFromStorage = () => {
   const storedRestaurants = localStorage.getItem(RESTAURANT_KEY);
   if (!storedRestaurants) return [];
-  // TODO : type assertion을 사용하지 않는 방법을 고민해본다.
+
   return JSON.parse(storedRestaurants) as RestaurantItem[];
 };
 
 const isAlreadyExist = (newRestaurantName: string) => {
   const storedRestaurants = getRestaurantFromStorage();
 
-  return storedRestaurants.some(
-    ({ name }) => trimAllSpace(newRestaurantName) === trimAllSpace(name)
-  );
+  return storedRestaurants.some(({ name }) => trimAllSpace(newRestaurantName) === trimAllSpace(name));
 };
 
 const sortByName = (restaurants: RestaurantItem[]) => {
@@ -74,33 +62,49 @@ export const validateRestaurantData = (restaurantInfo: RestaurantAddItem) => {
   }
 };
 
-export const findRestaurantByName = (
-  restaurantName: string
-): RestaurantItem | undefined => {
+export const findRestaurantByName = (restaurantName: string): RestaurantItem | null => {
+  const storedRestaurants = getRestaurantFromStorage();
+  const foundRestaurant = storedRestaurants.find(({ name }) => name === restaurantName);
+
+  return foundRestaurant ? foundRestaurant : null;
+};
+
+export const toggleFavoriteStateByName = (targetName: string) => {
   const storedRestaurants = getRestaurantFromStorage();
+  const updatedRestaurants = storedRestaurants.map((restaurant) => {
+    return restaurant.name !== targetName
+      ? {
+          ...restaurant,
+        }
+      : {
+          ...restaurant,
+          isFavorite: restaurant.isFavorite ? false : true,
+        };
+  });
 
-  return storedRestaurants.find(({ name }) => name === restaurantName);
+  localStorage.setItem(RESTAURANT_KEY, JSON.stringify(updatedRestaurants));
 };
 
 export const deleteRestaurantByName = (restaurantName: string): void => {
   const storedRestaurants = getRestaurantFromStorage();
-  const filteredRestaurants = storedRestaurants.filter(
-    ({ name }) => restaurantName !== name
-  );
+  const filteredRestaurants = storedRestaurants.filter(({ name }) => restaurantName !== name);
 
   localStorage.setItem(RESTAURANT_KEY, JSON.stringify(filteredRestaurants));
 };
 
+export const getFavoriteRestaurants = (): RestaurantItem[] | [] => {
+  const storedRestaurants = getRestaurantFromStorage();
+
+  return storedRestaurants.filter(({ isFavorite }) => isFavorite);
+};
+
 export const add = (restaurantInfo: RestaurantAddItem) => {
   const storedRestaurants = getRestaurantFromStorage();
   validateRestaurantData(restaurantInfo);
 
   localStorage.setItem(
     RESTAURANT_KEY,
-    JSON.stringify([
-      ...storedRestaurants,
-      { ...restaurantInfo, isFavorite: false },
-    ])
+    JSON.stringify([...storedRestaurants, { ...restaurantInfo, isFavorite: false }])
   );
 
   return true;
@@ -114,13 +118,8 @@ export const filterByCategory = (category: CategoryString) => {
   return restaurants.filter((item) => item.category === category);
 };
 
-export const sortByType = (
-  category: CategoryString,
-  type: SortOptionString
-) => {
+export const sortByType = (category: CategoryString, type: SortOptionString) => {
   const filteredRestaurants = filterByCategory(category);
 
-  return type === SORT_TYPE.name
-    ? sortByName(filteredRestaurants)
-    : sortByDistance(filteredRestaurants);
+  return type === SORT_TYPE.name ? sortByName(filteredRestaurants) : sortByDistance(filteredRestaurants);
 };

From 46653ca6679d40699d09fc5a2fbd8bf59e535d2d Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:15:39 +0900
Subject: [PATCH 08/70] =?UTF-8?q?feat(style.css):=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 음식점 상세 정보
- 모든 음식점, 자주 가는 음식점 구분 탭
- 레이아웃, 폰트 크기, 굵기 공통 CSS 속성 추가
---
 templates/style.css | 127 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 104 insertions(+), 23 deletions(-)

diff --git a/templates/style.css b/templates/style.css
index 1feff2bbc..72ee1adbc 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -34,7 +34,6 @@ select {
 }
 
 /* Typography *************************************/
-
 .text-title {
   font-size: 20px;
   line-height: 24px;
@@ -97,11 +96,7 @@ select {
 
 /* 카테고리/정렬 필터 */
 .restaurant-filter-container {
-  display: flex;
-  justify-content: space-between;
-
   padding: 0 16px;
-  margin-top: 24px;
 }
 
 .restaurant-filter-select {
@@ -121,15 +116,7 @@ select {
   background-size: 0.75rem auto;
 }
 
-.arrow-down-grey {
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23667085%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-}
-
-.arrow-down-black {
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-}
-
-/* 음식점 목록 */
+/* 음식점 목록, 음식점 상세 정보 */
 .restaurant-list-container {
   display: flex;
   flex-direction: column;
@@ -139,14 +126,18 @@ select {
 }
 
 .restaurant {
+  min-height: 7rem;
   display: flex;
   align-items: flex-start;
 
   padding: 16px 8px;
 
   border-bottom: 1px solid #e9eaed;
+}
 
-  min-height: 7rem;
+.restaurant-detail {
+  display: flex;
+  flex-direction: column;
 }
 
 .restaurant__category {
@@ -164,17 +155,45 @@ select {
   background: var(--lighten-color);
 }
 
+.detail-link {
+  color: var(--grey-500);
+}
+
+.font-orange {
+  color: var(--primary-color);
+}
+
+.font-gray {
+  color: var(--grey-300);
+}
+
 .category-icon {
   width: 36px;
   height: 36px;
 }
 
+.restaurant__info__layout {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.restaurant__info__layout > favorite-icon {
+  height: 32px;
+}
+
 .restaurant__info {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 }
 
+.restaurant__detail__info {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
 .restaurant__name {
   margin: 0;
 }
@@ -195,6 +214,21 @@ select {
   word-break: break-all;
 }
 
+.tab-container {
+  padding: 32px 16px;
+  width: 100%;
+}
+
+.restaurant-tab {
+  display: flex;
+  width: 100%;
+}
+
+.tab-border-bottom {
+  width: 100%;
+  margin-top: 9px;
+}
+
 /* 음식점 추가 모달 *****************************************/
 .modal {
   display: none;
@@ -226,11 +260,6 @@ select {
   background: var(--grey-100);
 }
 
-.stop-scroll {
-  height: 100%;
-  overflow: hidden;
-}
-
 .modal-title {
   margin-bottom: 36px;
 }
@@ -291,6 +320,7 @@ input[name="link"] {
 }
 
 .button-container {
+  margin-top: 32px;
   display: flex;
 }
 
@@ -324,10 +354,61 @@ input[name="link"] {
   color: var(--grey-100);
 }
 
-.hidden {
-  visibility: hidden;
-}
+/* 공통 CSS 속성 *****************************************/
 
 .error-message {
   color: var(--error-color);
 }
+
+.stop-scroll {
+  height: 100%;
+  overflow: hidden;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.hidden {
+  display: none;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.border-orange {
+  border: 2px solid var(--primary-color);
+}
+
+.border-gray {
+  border: 2px solid var(--grey-300);
+}
+
+.arrow-down-grey {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23667085%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+
+.arrow-down-black {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}

From 41f1b08eebadddc0cadc1fd84feda6eb3c468999 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:20:47 +0900
Subject: [PATCH 09/70] =?UTF-8?q?feat(RestaurantTab):=20=EB=AA=A8=EB=93=A0?=
 =?UTF-8?q?=20=EC=9D=8C=EC=8B=9D=EC=A0=90,=20=EC=9E=90=EC=A3=BC=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=94=20=EC=9D=8C=EC=8B=9D=EC=A0=90=20=EA=B5=AC?=
 =?UTF-8?q?=EB=B6=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 탭이 변경될 경우, currentTab 상태를 변경시키고 다시 렌더링
- 음식점 목록 컴포넌트에서 변경된 상태를 전달받고, 상황에 맞게 목록을 렌더링
---
 README.md                                     |  6 +--
 .../RestaurantTap/RestaurantTabContainer.ts   | 50 +++++++++++++++++++
 src/components/RestaurantTap/index.ts         | 19 +++++++
 3 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 src/components/RestaurantTap/RestaurantTabContainer.ts
 create mode 100644 src/components/RestaurantTap/index.ts

diff --git a/README.md b/README.md
index dc5207c0f..d4f3e7ba9 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 - [x] 음식점을 카테고리별로 필터링 한다.
 - [x] 음식점을 이름순, 거리순으로 정렬한다.
 - [x] 음식점 등록 폼을 제출하면 추가한다.
-- [ ] 추가하기 버튼을 클릭할 경우 입력에 대한 유효성 검증을 한다
+- [x] 추가하기 버튼을 클릭할 경우 입력에 대한 유효성 검증을 한다
   - 음식점 이름은 10글자 이하여야한다.
   - 음식점 설명은 300자 이하여야한다.
   - 유효한 참고 링크인지 검증한다.
@@ -51,7 +51,7 @@ delete(restaurantName : string) : boolean
 
 - UI
 
-- restaurant-item
+- [x]restaurant-item
 
   - 음식점 목록을 확인할 수 있다.
   - 카테고리
@@ -62,7 +62,7 @@ delete(restaurantName : string) : boolean
 - Event
 
 - [x] 카테고리별 필터링, 정렬 옵션이 변경되는 이벤트가 발생하면 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
-- [ ] 모든 음식점, 자주 가는 음식점을 클릭할 경우 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
+- [x] 모든 음식점, 자주 가는 음식점을 클릭할 경우 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
 
 ## category-icon
 
diff --git a/src/components/RestaurantTap/RestaurantTabContainer.ts b/src/components/RestaurantTap/RestaurantTabContainer.ts
new file mode 100644
index 000000000..fd9201735
--- /dev/null
+++ b/src/components/RestaurantTap/RestaurantTabContainer.ts
@@ -0,0 +1,50 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { RESTAURANT_TABS } from "../../constants/menu";
+import { RestaurantTab } from "../../types/menu";
+
+class RestaurantTabContainer extends BaseComponent {
+  private currentTab: RestaurantTab = "all";
+
+  protected render() {
+    this.innerHTML = /*html*/ `
+    <restaurant-tab 
+      class="w-full flex flex-col" 
+      text="${RESTAURANT_TABS.all}"
+      is-active=${this.currentTab === "all"}></restaurant-tab>    
+    <restaurant-tab 
+      class="w-full flex flex-col" 
+      text="${RESTAURANT_TABS.favorite}"
+      is-active=${this.currentTab === "favorite"}></restaurant-tab>
+    `;
+  }
+
+  private getChangedTabType(tabText: string): RestaurantTab {
+    if (tabText === RESTAURANT_TABS.all) return "all";
+    if (tabText === RESTAURANT_TABS.favorite) return "favorite";
+  }
+
+  private shouldChangeTab(tabType: RestaurantTab): boolean | undefined {
+    return tabType && tabType !== this.currentTab;
+  }
+
+  private handleTabChange(tabText: string) {
+    const changedTabType = this.getChangedTabType(tabText);
+    if (!this.shouldChangeTab(changedTabType)) return;
+
+    this.currentTab = changedTabType;
+    this.render();
+    this.emitEvent<{ tab: RestaurantTab }>(MENU_APP_EVENTS.changeTabState, {
+      tab: this.currentTab,
+    });
+  }
+
+  protected setEvent() {
+    this.addEventListener("click", (event) => {
+      if (!(event.target instanceof HTMLSpanElement)) return;
+      this.handleTabChange(event.target.innerText);
+    });
+  }
+}
+
+customElements.define("restaurant-tab-container", RestaurantTabContainer);
diff --git a/src/components/RestaurantTap/index.ts b/src/components/RestaurantTap/index.ts
new file mode 100644
index 000000000..d4c5c126b
--- /dev/null
+++ b/src/components/RestaurantTap/index.ts
@@ -0,0 +1,19 @@
+import BaseComponent from "../BaseComponent";
+
+class RestaurantTab extends BaseComponent {
+  protected render() {
+    const text = this.getAttribute("text") ?? "";
+    const isActive = this.getAttribute("is-active") === "true" ? true : false;
+
+    this.innerHTML = /*html*/ `
+      <span class="${
+        isActive ? "font-orange" : "font-gray"
+      } text-body font-bold text-center">${text}</span>
+      <div class="${
+        isActive ? "border-orange" : "border-gray"
+      } tab-border-bottom"></div>
+    `;
+  }
+}
+
+customElements.define("restaurant-tab", RestaurantTab);

From a3b60ad1c6ace0dcfe9322556ad865d023c4d4f6 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:24:15 +0900
Subject: [PATCH 10/70] =?UTF-8?q?feat(CategoryImage):=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 음식점 아이템, 음식점 상세 정보 컴포넌트에서 동일한 카테고리 이미지 UI를 사용하기 때문에, 재사용할 수 있도록 컴포넌트 분리
---
 README.md                             |  2 +-
 src/components/CategoryImage/index.ts | 52 +++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CategoryImage/index.ts

diff --git a/README.md b/README.md
index d4f3e7ba9..09d12c75a 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,7 @@ delete(restaurantName : string) : boolean
 
 - UI
 
-  - 전체, 한식, 중식,,, 등 카테고리에 따라 다른 이미지를 보여준다.
+- [x] 전체, 한식, 중식,,, 등 카테고리에 따라 다른 이미지를 보여준다.
 
 ## restaurant-detail
 
diff --git a/src/components/CategoryImage/index.ts b/src/components/CategoryImage/index.ts
new file mode 100644
index 000000000..03039ca6e
--- /dev/null
+++ b/src/components/CategoryImage/index.ts
@@ -0,0 +1,52 @@
+import BaseComponent from "../BaseComponent";
+import { CATEGORIES } from "../../constants/menu";
+import { CategoryStringWithoutAll } from "../../types/menu";
+import {
+  categoryKorean,
+  categoryAsian,
+  categoryChinese,
+  categoryJapanese,
+  categoryWestern,
+  categoryEtc,
+} from "../../assets";
+
+class CategoryImage extends BaseComponent {
+  private isCategoryType(category: string): category is CategoryStringWithoutAll {
+    return ["한식", "아시안", "일식", "중식", "양식", "기타"].includes(category);
+  }
+
+  private categoryToImg(category: CategoryStringWithoutAll) {
+    if (!category) return;
+
+    switch (category) {
+      case CATEGORIES.korean:
+        return categoryKorean;
+      case CATEGORIES.asian:
+        return categoryAsian;
+      case CATEGORIES.japanese:
+        return categoryJapanese;
+      case CATEGORIES.chinese:
+        return categoryChinese;
+      case CATEGORIES.western:
+        return categoryWestern;
+      case CATEGORIES.etc:
+        return categoryEtc;
+      default:
+        break;
+    }
+  }
+
+  render() {
+    const category = this.getAttribute("category") ?? "";
+    if (!this.isCategoryType(category)) return;
+
+    const categoryImage = this.categoryToImg(category);
+    this.innerHTML = /*html*/ `
+      <div class="restaurant__category">
+        <img src=${categoryImage} alt=${category} class="category-icon">
+      </div>
+    `;
+  }
+}
+
+customElements.define("category-image", CategoryImage);

From 6d9f200fba5fdc57606894107a7eed43b71760fd Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:31:31 +0900
Subject: [PATCH 11/70] =?UTF-8?q?feat(RestaurantDetail):=20=EC=9D=8C?=
 =?UTF-8?q?=EC=8B=9D=EC=A0=90=20=EC=83=81=EC=84=B8=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 음식점 상세 정보를 보여준다
- 음식점 목록 컴포넌트에서 이벤트를 보내고, 이벤트와 함께 온 세부 정보를 사용해서 렌더링한다
- 음식점 상세 정보를 여는 이벤트가 발생할 때마다, document에 이벤트 핸들러가 쌓이는 문제가 있어, addEventListener의 3번째 인자에 once를 true로 설정
---
 README.md                                | 20 +++---
 src/components/RestaurantDetail/index.ts | 85 ++++++++++++++++++++++++
 2 files changed, 95 insertions(+), 10 deletions(-)
 create mode 100644 src/components/RestaurantDetail/index.ts

diff --git a/README.md b/README.md
index 09d12c75a..380e46d65 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ delete(restaurantName : string) : boolean
 
 - UI
 
-- [x]restaurant-item
+- [x] restaurant-item
 
   - 음식점 목록을 확인할 수 있다.
   - 카테고리
@@ -64,7 +64,7 @@ delete(restaurantName : string) : boolean
 - [x] 카테고리별 필터링, 정렬 옵션이 변경되는 이벤트가 발생하면 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
 - [x] 모든 음식점, 자주 가는 음식점을 클릭할 경우 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
 
-## category-icon
+## category-image
 
 - UI
 
@@ -73,18 +73,18 @@ delete(restaurantName : string) : boolean
 ## restaurant-detail
 
 - UI
+- 음식점 목록 중 하나를 클릭하면 해당 음식점에 대한 세부 정보를 나타낸다.
 
-  - 음식점 목록 중 하나를 클릭하면 해당 음식점에 대한 세부 정보를 나타낸다.
-  - [ ] 음식점 이름, 카테고리, 캠퍼스로부터의 거리, 자주 가는 음식점인지의 여부
-  - [ ] 음식점 상세 설명, ...으로 표시하지 않고 모든 내용을 보여준다,
-  - [ ] 참고링크
+  - [x] 음식점 이름, 카테고리, 캠퍼스로부터의 거리, 자주 가는 음식점인지의 여부
+  - [x] 음식점 상세 설명, ...으로 표시하지 않고 모든 내용을 보여준다,
+  - [x] 참고링크
 
 - Event
 
-- [ ] 음식점 세부 정보의 바깥 영역을 클릭하거나, 닫기 버튼을 클릭하면 `restaurant-detail` 컴포넌트는 사라져야한다.
-- [ ] 음식점 세부 정보에서 자주 가는 음식점인지의 여부를 변경하면, 변경이 반영되어야한다.
-- [ ] 참고 링크를 클릭하면 해당 링크로 이동시킨다.
-- [ ] 삭제하기 버튼을 클릭할 경우, 해당 음식점을 삭제한 후 `restaurant-detail` 컴포넌트는 사라져야한다.
+- [x] 음식점 세부 정보의 바깥 영역을 클릭하거나, 닫기 버튼을 클릭하면 `restaurant-detail` 컴포넌트는 사라져야한다.
+- [x] 음식점 세부 정보에서 자주 가는 음식점인지의 여부를 변경하면, 변경이 반영되어야한다.
+- [x] 참고 링크를 클릭하면 해당 링크로 이동시킨다.
+- [x] 삭제하기 버튼을 클릭할 경우, 해당 음식점을 삭제한 후 `restaurant-detail` 컴포넌트는 사라져야한다.
 
 ## 모든 음식점, 자주 가는 음식점 구분 버튼 (이름 미정)
 
diff --git a/src/components/RestaurantDetail/index.ts b/src/components/RestaurantDetail/index.ts
new file mode 100644
index 000000000..84d49d9b8
--- /dev/null
+++ b/src/components/RestaurantDetail/index.ts
@@ -0,0 +1,85 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { RestaurantItem } from "../../types/menu";
+import { deleteRestaurantByName } from "../../domains/Restaurants";
+import { $ } from "../../utils/dom";
+import { isRestaurantItemType } from "../../utils/types";
+
+const RESTAURANT_KEYS = ["name", "category", "distance", "isFavorite", "description", "link"];
+
+class RestaurantDetail extends BaseComponent {
+  private detailInfo: RestaurantItem | null = null;
+
+  private getDetailTemplate(): string {
+    if (!this.detailInfo) return ``;
+
+    const { name, category, distance, description, isFavorite, link } = this.detailInfo;
+
+    return /*html*/ `
+      <div class="restaurant__info gap-4">
+        <div class="flex justify-between">
+          <div class="flex flex-col gap-4">
+            <category-image category="${category}"></category-image>
+            <h3 class="restaurant__name text-subtitle">${name}</h3>
+            <span class="restaurant__distance text-body">캠퍼스부터 ${distance}분 내</span>
+          </div>
+          <favorite-icon is-favorite="${isFavorite}" restaurant-name="${name}"></favorite-icon>
+        </div>
+        <p class="text-body">${description}</p>
+        ${
+          link
+            ? `<a href=${link} target="_blank" class="detail-link">${link}</a>`
+            : '<p class="text-body font-orange">참고 링크가 존재하지 않습니다.</p>'
+        }
+      </div>
+    `;
+  }
+
+  render() {
+    this.innerHTML = /*html*/ `
+      <div class="modal-container">
+        <div class="restaurant-detail">
+          ${this.getDetailTemplate()}
+          <div class="button-container">
+            <button type="reset" id="delete-button" class="button button--secondary text-caption">삭제하기</button>
+            <button type="submit" id="detail-close-button" class="button button--primary text-caption">닫기</button>
+          </div>
+        </div>
+      <div>
+    `;
+  }
+
+  private handleShowRestaurantDetailModal(event: CustomEvent) {
+    const { detailInfo } = event.detail;
+    if (!isRestaurantItemType<RestaurantItem>(detailInfo, RESTAURANT_KEYS)) {
+      return;
+    }
+
+    this.detailInfo = detailInfo;
+    this.connectedCallback();
+  }
+
+  setEvent() {
+    document.addEventListener(
+      MENU_APP_EVENTS.openRestaurantDetail,
+      (event) => {
+        event instanceof CustomEvent && this.handleShowRestaurantDetailModal(event);
+      },
+      {
+        once: true,
+      }
+    );
+
+    $<HTMLButtonElement>(`#detail-close-button`)?.addEventListener("click", () => {
+      this.emitEvent(MENU_APP_EVENTS.closeModal);
+    });
+
+    $<HTMLButtonElement>(`#delete-button`)?.addEventListener("click", () => {
+      this.detailInfo && deleteRestaurantByName(this.detailInfo.name);
+      this.emitEvent(MENU_APP_EVENTS.closeModal);
+      this.emitEvent(MENU_APP_EVENTS.renderRestaurants);
+    });
+  }
+}
+
+customElements.define("restaurant-detail", RestaurantDetail);

From ecadfc62a911926bfb2f159593516f10234284ba Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:35:47 +0900
Subject: [PATCH 12/70] =?UTF-8?q?docs(README.md):=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=EB=90=9C=20=EA=B8=B0=EB=8A=A5=20=EC=9A=94=EA=B5=AC=20=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD=20=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 음식점 목록 구분 탭 컴포넌트 구현 여부 반영
---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 380e46d65..ac7e00871 100644
--- a/README.md
+++ b/README.md
@@ -86,16 +86,16 @@ delete(restaurantName : string) : boolean
 - [x] 참고 링크를 클릭하면 해당 링크로 이동시킨다.
 - [x] 삭제하기 버튼을 클릭할 경우, 해당 음식점을 삭제한 후 `restaurant-detail` 컴포넌트는 사라져야한다.
 
-## 모든 음식점, 자주 가는 음식점 구분 버튼 (이름 미정)
+## restaurant-tab
 
 - UI
 
-- [ ] 식당 목록 선택 옵션 (모든 음식점, 자주 가는 음식점)
-- [ ] 클릭한 버튼에 액티브 스타일이 적용되어야 하며, 이전에 클릭한 버튼의 액티브 스타일은 사라져야한다.
+- [x] 식당 목록 선택 옵션 (모든 음식점, 자주 가는 음식점)
+- [x] 클릭한 버튼에 액티브 스타일이 적용되어야 하며, 이전에 클릭한 버튼의 액티브 스타일은 사라져야한다.
 
 - Event
 
-- [ ] 특정 버튼을 클릭할 때마다, 보여줘야 할 음식점 목록의 변경을 트리거한다.
+- [x] 특정 버튼을 클릭할 때마다, 보여줘야 할 음식점 목록의 변경을 트리거한다.
 
 ## restaurant-add-form
 

From b7329e57a7992947db92024693e2a63eb4dfe785 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:44:15 +0900
Subject: [PATCH 13/70] =?UTF-8?q?chore(assets):=20=EC=9E=90=EC=A3=BC=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=94=20=EC=9D=8C=EC=8B=9D=EC=A0=90=20=EB=B3=84=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/index.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/assets/index.js b/src/assets/index.js
index 72a5bb905..a8ce248ff 100644
--- a/src/assets/index.js
+++ b/src/assets/index.js
@@ -1,7 +1,9 @@
 export { default as addButton } from "../../templates/add-button.png";
+export { default as categoryKorean } from "../../templates/category-korean.png";
 export { default as categoryAsian } from "../../templates/category-asian.png";
-export { default as categoryChinese } from "../../templates/category-chinese.png";
-export { default as categoryEtc } from "../../templates/category-etc.png";
 export { default as categoryJapanese } from "../../templates/category-japanese.png";
-export { default as categoryKorean } from "../../templates/category-korean.png";
+export { default as categoryChinese } from "../../templates/category-chinese.png";
 export { default as categoryWestern } from "../../templates/category-western.png";
+export { default as categoryEtc } from "../../templates/category-etc.png";
+export { default as linedFavoriteIcon } from "../../templates/favorite-icon-lined.png";
+export { default as filledFavoriteIcon } from "../../templates/favorite-icon-filled.png";

From 188b413a6e7b8b3949f2df2da63da4343f2df031 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:44:38 +0900
Subject: [PATCH 14/70] =?UTF-8?q?chore(delete=20unused=20files):=20?=
 =?UTF-8?q?=ED=8F=B4=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RestaurantDetail/index.ts      | 85 -------------------
 .../RestaurantTap/RestaurantTabContainer.ts   | 50 -----------
 src/components/RestaurantTap/index.ts         | 19 -----
 3 files changed, 154 deletions(-)
 delete mode 100644 src/components/RestaurantDetail/index.ts
 delete mode 100644 src/components/RestaurantTap/RestaurantTabContainer.ts
 delete mode 100644 src/components/RestaurantTap/index.ts

diff --git a/src/components/RestaurantDetail/index.ts b/src/components/RestaurantDetail/index.ts
deleted file mode 100644
index 84d49d9b8..000000000
--- a/src/components/RestaurantDetail/index.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import BaseComponent from "../BaseComponent";
-import { MENU_APP_EVENTS } from "../../constants/event";
-import { RestaurantItem } from "../../types/menu";
-import { deleteRestaurantByName } from "../../domains/Restaurants";
-import { $ } from "../../utils/dom";
-import { isRestaurantItemType } from "../../utils/types";
-
-const RESTAURANT_KEYS = ["name", "category", "distance", "isFavorite", "description", "link"];
-
-class RestaurantDetail extends BaseComponent {
-  private detailInfo: RestaurantItem | null = null;
-
-  private getDetailTemplate(): string {
-    if (!this.detailInfo) return ``;
-
-    const { name, category, distance, description, isFavorite, link } = this.detailInfo;
-
-    return /*html*/ `
-      <div class="restaurant__info gap-4">
-        <div class="flex justify-between">
-          <div class="flex flex-col gap-4">
-            <category-image category="${category}"></category-image>
-            <h3 class="restaurant__name text-subtitle">${name}</h3>
-            <span class="restaurant__distance text-body">캠퍼스부터 ${distance}분 내</span>
-          </div>
-          <favorite-icon is-favorite="${isFavorite}" restaurant-name="${name}"></favorite-icon>
-        </div>
-        <p class="text-body">${description}</p>
-        ${
-          link
-            ? `<a href=${link} target="_blank" class="detail-link">${link}</a>`
-            : '<p class="text-body font-orange">참고 링크가 존재하지 않습니다.</p>'
-        }
-      </div>
-    `;
-  }
-
-  render() {
-    this.innerHTML = /*html*/ `
-      <div class="modal-container">
-        <div class="restaurant-detail">
-          ${this.getDetailTemplate()}
-          <div class="button-container">
-            <button type="reset" id="delete-button" class="button button--secondary text-caption">삭제하기</button>
-            <button type="submit" id="detail-close-button" class="button button--primary text-caption">닫기</button>
-          </div>
-        </div>
-      <div>
-    `;
-  }
-
-  private handleShowRestaurantDetailModal(event: CustomEvent) {
-    const { detailInfo } = event.detail;
-    if (!isRestaurantItemType<RestaurantItem>(detailInfo, RESTAURANT_KEYS)) {
-      return;
-    }
-
-    this.detailInfo = detailInfo;
-    this.connectedCallback();
-  }
-
-  setEvent() {
-    document.addEventListener(
-      MENU_APP_EVENTS.openRestaurantDetail,
-      (event) => {
-        event instanceof CustomEvent && this.handleShowRestaurantDetailModal(event);
-      },
-      {
-        once: true,
-      }
-    );
-
-    $<HTMLButtonElement>(`#detail-close-button`)?.addEventListener("click", () => {
-      this.emitEvent(MENU_APP_EVENTS.closeModal);
-    });
-
-    $<HTMLButtonElement>(`#delete-button`)?.addEventListener("click", () => {
-      this.detailInfo && deleteRestaurantByName(this.detailInfo.name);
-      this.emitEvent(MENU_APP_EVENTS.closeModal);
-      this.emitEvent(MENU_APP_EVENTS.renderRestaurants);
-    });
-  }
-}
-
-customElements.define("restaurant-detail", RestaurantDetail);
diff --git a/src/components/RestaurantTap/RestaurantTabContainer.ts b/src/components/RestaurantTap/RestaurantTabContainer.ts
deleted file mode 100644
index fd9201735..000000000
--- a/src/components/RestaurantTap/RestaurantTabContainer.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import BaseComponent from "../BaseComponent";
-import { MENU_APP_EVENTS } from "../../constants/event";
-import { RESTAURANT_TABS } from "../../constants/menu";
-import { RestaurantTab } from "../../types/menu";
-
-class RestaurantTabContainer extends BaseComponent {
-  private currentTab: RestaurantTab = "all";
-
-  protected render() {
-    this.innerHTML = /*html*/ `
-    <restaurant-tab 
-      class="w-full flex flex-col" 
-      text="${RESTAURANT_TABS.all}"
-      is-active=${this.currentTab === "all"}></restaurant-tab>    
-    <restaurant-tab 
-      class="w-full flex flex-col" 
-      text="${RESTAURANT_TABS.favorite}"
-      is-active=${this.currentTab === "favorite"}></restaurant-tab>
-    `;
-  }
-
-  private getChangedTabType(tabText: string): RestaurantTab {
-    if (tabText === RESTAURANT_TABS.all) return "all";
-    if (tabText === RESTAURANT_TABS.favorite) return "favorite";
-  }
-
-  private shouldChangeTab(tabType: RestaurantTab): boolean | undefined {
-    return tabType && tabType !== this.currentTab;
-  }
-
-  private handleTabChange(tabText: string) {
-    const changedTabType = this.getChangedTabType(tabText);
-    if (!this.shouldChangeTab(changedTabType)) return;
-
-    this.currentTab = changedTabType;
-    this.render();
-    this.emitEvent<{ tab: RestaurantTab }>(MENU_APP_EVENTS.changeTabState, {
-      tab: this.currentTab,
-    });
-  }
-
-  protected setEvent() {
-    this.addEventListener("click", (event) => {
-      if (!(event.target instanceof HTMLSpanElement)) return;
-      this.handleTabChange(event.target.innerText);
-    });
-  }
-}
-
-customElements.define("restaurant-tab-container", RestaurantTabContainer);
diff --git a/src/components/RestaurantTap/index.ts b/src/components/RestaurantTap/index.ts
deleted file mode 100644
index d4c5c126b..000000000
--- a/src/components/RestaurantTap/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import BaseComponent from "../BaseComponent";
-
-class RestaurantTab extends BaseComponent {
-  protected render() {
-    const text = this.getAttribute("text") ?? "";
-    const isActive = this.getAttribute("is-active") === "true" ? true : false;
-
-    this.innerHTML = /*html*/ `
-      <span class="${
-        isActive ? "font-orange" : "font-gray"
-      } text-body font-bold text-center">${text}</span>
-      <div class="${
-        isActive ? "border-orange" : "border-gray"
-      } tab-border-bottom"></div>
-    `;
-  }
-}
-
-customElements.define("restaurant-tab", RestaurantTab);

From f9f8200c4becf0cae49c34d1f3bf460698c1f1a2 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:49:54 +0900
Subject: [PATCH 15/70] =?UTF-8?q?refactor(BaseComponent):=20=EC=A0=90?=
 =?UTF-8?q?=EC=8B=AC=20=EB=AD=90=20=EB=A8=B9=EC=A7=80=20=EC=95=A0=ED=94=8C?=
 =?UTF-8?q?=EB=A6=AC=EC=BC=80=EC=9D=B4=EC=85=98=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EB=B0=9C=EC=83=9D=ED=95=98=EB=8A=94=20=EC=9D=B4=EB=B2=A4?=
 =?UTF-8?q?=ED=8A=B8=20=ED=83=80=EC=9E=85=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseComponent.ts | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/BaseComponent.ts b/src/components/BaseComponent.ts
index 67090a8fd..d80ebbc76 100644
--- a/src/components/BaseComponent.ts
+++ b/src/components/BaseComponent.ts
@@ -1,8 +1,4 @@
-import { MENU_APP_EVENTS } from "../constants/event";
-
-type MenuAppEvent =
-  | keyof HTMLElementEventMap
-  | (typeof MENU_APP_EVENTS)[keyof typeof MENU_APP_EVENTS];
+import { TotalMenuAppEvent } from "../types/event";
 
 export default class BaseComponent extends HTMLElement {
   constructor() {
@@ -20,7 +16,7 @@ export default class BaseComponent extends HTMLElement {
 
   protected setEvent() {}
 
-  protected emitEvent<T>(event: MenuAppEvent, data?: T) {
+  protected emitEvent<T>(event: TotalMenuAppEvent, data?: T) {
     this.dispatchEvent(
       new CustomEvent(event, {
         bubbles: true,

From 77b811022b1539bd2d2b5bf703db139a4c0fff76 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 11:51:10 +0900
Subject: [PATCH 16/70] =?UTF-8?q?refactor(MenuApp):=20html=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MenuApp.ts | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/MenuApp.ts b/src/components/MenuApp.ts
index c68ec14a1..84eefc30f 100644
--- a/src/components/MenuApp.ts
+++ b/src/components/MenuApp.ts
@@ -1,7 +1,6 @@
+import BaseComponent from "./BaseComponent";
 import { MENU_APP_EVENTS } from "../constants/event";
-import { CATEGORIES, SORT_TYPE } from "../constants/menu";
 import { initRestaurantStorage } from "../domains/Restaurants";
-import BaseComponent from "./BaseComponent";
 
 class MenuApp extends BaseComponent {
   constructor() {
@@ -11,21 +10,22 @@ class MenuApp extends BaseComponent {
 
   render() {
     this.innerHTML = /*html*/ `
-    <app-header></app-header>
-    <main> 
-      <section class="restaurant-filter-container">
-        <option-selector type="category" options=${[
-          ...Object.values(CATEGORIES),
-        ]} ></option-selector>
-        <option-selector type="sort" options=${[
-          ...Object.values(SORT_TYPE),
-        ]}></option-selector>
-      </section>
-      <restaurant-list></restaurant-list>
-    </main>
-    <modal-wrapper id='add-form' open-type=${MENU_APP_EVENTS.openAddForm}>
-      <restaurant-add-form></restaurant-add-form>
-    </modal-wrapper>
+      <app-header></app-header>
+      <restaurant-tab-container class="flex justify-between tab-container"></restaurant-tab-container>
+      <main> 
+        <option-selector-container></option-selector-container>
+        <restaurant-list></restaurant-list>
+      </main>
+      <modal-wrapper 
+        open-type=${MENU_APP_EVENTS.openAddForm} 
+        id='add-form'>
+        <restaurant-add-form></restaurant-add-form>
+      </modal-wrapper>
+      <modal-wrapper 
+        open-type=${MENU_APP_EVENTS.openRestaurantDetail} 
+        id="restaurant-detail" >
+        <restaurant-detail></restaurant-detail>
+      </modal-wrapper>
     `;
   }
 }

From 12ebc289c37b4fa4c71195cfb74841b651c702f6 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 12:03:16 +0900
Subject: [PATCH 17/70] =?UTF-8?q?feat(FavoriteIcon):=20=EC=9E=90=EC=A3=BC?=
 =?UTF-8?q?=20=EA=B0=80=EB=8A=94=20=EC=8B=9D=EB=8B=B9=EC=9D=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8A=94=20=EB=B3=84?=
 =?UTF-8?q?=20=EB=AA=A8=EC=96=91=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                            | 12 ++++++++
 src/components/FavoriteIcon/index.ts | 43 ++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 src/components/FavoriteIcon/index.ts

diff --git a/README.md b/README.md
index ac7e00871..0628aa5a0 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,18 @@ delete(restaurantName : string) : boolean
 - [x] 카테고리별 필터링, 정렬 옵션이 변경되는 이벤트가 발생하면 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
 - [x] 모든 음식점, 자주 가는 음식점을 클릭할 경우 그에 맞춰 보여줘야 할 음식점 목록을 변경한다.
 
+## favorite-icon
+
+- UI
+
+- [x] 별 모양 아이콘
+
+- Event
+
+- [x] 아이콘을 클릭할 때마다, 아이콘 이미지가 토글되어야 한다. (filled <-> lined)
+- [x] 아이콘을 클릭할 때마다, 식당 아이템의 isFavorite 상태가 토글되어야 한다. (true <-> false)
+- [x] 아이콘을 클릭할 때마다, 식당 목록 컴포넌트가 렌더링 되어 변경된 상태를 보여줄 수 있어야한다.
+
 ## category-image
 
 - UI
diff --git a/src/components/FavoriteIcon/index.ts b/src/components/FavoriteIcon/index.ts
new file mode 100644
index 000000000..e0ee7e591
--- /dev/null
+++ b/src/components/FavoriteIcon/index.ts
@@ -0,0 +1,43 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { toggleFavoriteStateByName } from "../../domains/Restaurants";
+import { filledFavoriteIcon, linedFavoriteIcon } from "../../assets/index";
+
+class FavoriteIcon extends BaseComponent {
+  protected render() {
+    const isFavorite = this.getAttribute("is-favorite") === "true" ? true : false;
+
+    this.innerHTML = /*html*/ `
+      <img alt="favorite-icon" class="favorite-icon" 
+      src=${isFavorite ? filledFavoriteIcon : linedFavoriteIcon}></img>
+      `;
+  }
+
+  private toggleFavoriteIcon(iconElement: HTMLImageElement) {
+    const prevIcon = iconElement?.getAttribute("src");
+    iconElement?.setAttribute("src", prevIcon === linedFavoriteIcon ? filledFavoriteIcon : linedFavoriteIcon);
+  }
+
+  private toggleFavoriteState() {
+    const restaurantName = this.getAttribute("restaurant-name") ?? "";
+    toggleFavoriteStateByName(restaurantName);
+  }
+
+  private handleToggleFavoriteIcon(element: HTMLElement) {
+    const iconElement = element.closest("img");
+    if (!(iconElement instanceof HTMLImageElement)) return;
+
+    this.toggleFavoriteIcon(iconElement);
+    this.toggleFavoriteState();
+    this.emitEvent(MENU_APP_EVENTS.renderRestaurants);
+  }
+
+  protected setEvent() {
+    this.addEventListener("click", (event) => {
+      if (!(event.target instanceof HTMLElement)) return;
+      this.handleToggleFavoriteIcon(event.target);
+    });
+  }
+}
+
+customElements.define("favorite-icon", FavoriteIcon);

From 2d2b05e593105029af05e15e54f79a1a08e32203 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 12:04:05 +0900
Subject: [PATCH 18/70] =?UTF-8?q?feat(Modal):=20=EC=9E=AC=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8A=94=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/index.ts | 63 +++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/Modal/index.ts

diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
new file mode 100644
index 000000000..7d11abab5
--- /dev/null
+++ b/src/components/Modal/index.ts
@@ -0,0 +1,63 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+
+import { $ } from "../../utils/dom";
+import { MenuAppEvent } from "../../types/event";
+
+class Modal extends BaseComponent {
+  private modalId: string | null = null;
+
+  constructor() {
+    super();
+  }
+
+  private getModalTemplate(): string {
+    this.modalId = this.getAttribute("id") ?? "";
+    const children = this.innerHTML;
+
+    return /*html*/ `
+      <div class="modal" id=${this.modalId}-wrapper>
+        <div class="modal-backdrop" id=${this.modalId}-backdrop></div>
+        ${children}
+      </div>
+    `;
+  }
+
+  private showModal() {
+    document.body.classList.add("stop-scroll");
+    $(`#${this.modalId}-wrapper`)!.classList.add("modal--open");
+  }
+
+  private hideModal() {
+    document.body.classList.remove("stop-scroll");
+    $(`#${this.modalId}-wrapper`)!.classList.remove("modal--open");
+  }
+
+  render() {
+    this.innerHTML = this.getModalTemplate();
+  }
+
+  checkEventType(type: string): type is MenuAppEvent {
+    return ["open-add-form", "open-restaurant-detail"].includes(type);
+  }
+
+  setEvent() {
+    $<HTMLDivElement>(`#${this.modalId}-backdrop`)!.addEventListener("click", (event) => {
+      if (event.target === event.currentTarget) {
+        this.hideModal();
+      }
+    });
+
+    const openType = this.getAttribute("open-type") ?? "";
+    this.checkEventType(openType) &&
+      document.addEventListener(openType, () => {
+        this.showModal();
+      });
+
+    document.addEventListener(MENU_APP_EVENTS.closeModal, () => {
+      this.hideModal();
+    });
+  }
+}
+
+customElements.define("modal-wrapper", Modal);

From 5e184f65ac3870ab11440dbfab47c648827a4775 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 12:10:54 +0900
Subject: [PATCH 19/70] =?UTF-8?q?refactor(RestaurantAddForm):=20=EC=8B=9D?=
 =?UTF-8?q?=EB=8B=B9=20=EC=B6=94=EA=B0=80=20=ED=8F=BC=20UI=20TS=EB=A1=9C?=
 =?UTF-8?q?=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 유요한 음식점 추가 데이터인지 타입 확인하는 메서드 추가 구현
- 음식점 추가 데이터를 가져오는 동작, 도메인 로직을 호출하고 도메인의 응답에 대해 이후 동작을 하는 메서드 분리
---
 .../RestaurantAddForm/RestaurantNameInput.ts  |  59 +++++++++
 .../RestaurantAddForm/RestaurantOption.ts     |  66 ++++++++++
 src/components/RestaurantAddForm/index.ts     | 114 ++++++++++++++++++
 3 files changed, 239 insertions(+)
 create mode 100644 src/components/RestaurantAddForm/RestaurantNameInput.ts
 create mode 100644 src/components/RestaurantAddForm/RestaurantOption.ts
 create mode 100644 src/components/RestaurantAddForm/index.ts

diff --git a/src/components/RestaurantAddForm/RestaurantNameInput.ts b/src/components/RestaurantAddForm/RestaurantNameInput.ts
new file mode 100644
index 000000000..77020a538
--- /dev/null
+++ b/src/components/RestaurantAddForm/RestaurantNameInput.ts
@@ -0,0 +1,59 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { $ } from "../../utils/dom";
+import restaurantValidator from "../../validators/restaurantValidator";
+
+class RestaurantNameInput extends BaseComponent {
+  private errorMessageClassList: DOMTokenList | null = null;
+
+  constructor() {
+    super();
+  }
+
+  private isValidName(value: string) {
+    return restaurantValidator.isInRange(value, 0, 10);
+  }
+
+  private renderErrorMessage() {
+    this.errorMessageClassList!.remove("hidden");
+  }
+
+  private hideErrorMessage() {
+    this.errorMessageClassList!.add("hidden");
+  }
+
+  private handleErrorMessage(value: string) {
+    this.isValidName(value)
+      ? this.hideErrorMessage()
+      : this.renderErrorMessage();
+  }
+
+  render() {
+    this.innerHTML = /*html*/ `
+      <div class="form-item form-item--required" id="name-input">
+        <label for="name">이름</label>
+        <input type="text" name="name" id="name" class="text-caption">
+        <p class="hidden text-caption error-message" id="name-error-message">1글자 이상 10글자 이하로 작성해주세요</p>
+      </div>`;
+
+    this.errorMessageClassList = $("#name-error-message")!.classList;
+  }
+
+  setEvent() {
+    document.addEventListener(MENU_APP_EVENTS.restaurantFormSubmit, () => {
+      const inputElement = $("#name");
+
+      if (!(inputElement instanceof HTMLInputElement)) return;
+
+      this.handleErrorMessage(inputElement.value);
+    });
+
+    $("#name")!.addEventListener("focusout", (event: Event) => {
+      if (!(event.target instanceof HTMLInputElement)) return;
+
+      this.handleErrorMessage(event.target.value);
+    });
+  }
+}
+
+customElements.define("restaurant-name-input", RestaurantNameInput);
diff --git a/src/components/RestaurantAddForm/RestaurantOption.ts b/src/components/RestaurantAddForm/RestaurantOption.ts
new file mode 100644
index 000000000..3d8924534
--- /dev/null
+++ b/src/components/RestaurantAddForm/RestaurantOption.ts
@@ -0,0 +1,66 @@
+import BaseComponent from "../BaseComponent";
+import { $ } from "../../utils/dom";
+import restaurantValidator from "../../validators/restaurantValidator";
+
+class RestaurantOptions extends BaseComponent {
+  private errorMessageClassList: DOMTokenList | null = null;
+
+  constructor() {
+    super();
+  }
+
+  private isSelected() {
+    const id = this.getAttribute("id");
+
+    const selectElement = $(`#${id}-select`);
+    if (!(selectElement instanceof HTMLSelectElement)) return;
+
+    return restaurantValidator.isSelected(selectElement.value);
+  }
+
+  private renderErrorMessage() {
+    this.errorMessageClassList!.remove("hidden");
+  }
+
+  private hideErrorMessage() {
+    this.errorMessageClassList!.add("hidden");
+  }
+
+  private handleErrorMessage() {
+    this.isSelected() ? this.hideErrorMessage() : this.renderErrorMessage();
+  }
+
+  #createOptionHTML(options: string[], values: string[]) {
+    return options.reduce(
+      (accOptions, currOption, index) =>
+        accOptions + `<option value=${values[index]}>${currOption}</option>;`,
+      ""
+    );
+  }
+
+  render() {
+    const options = this.getAttribute("options")!.split(",");
+    const values = this.getAttribute("values")!.split(",");
+    const id = this.getAttribute("id") ?? "";
+    const label = this.getAttribute("label") ?? "";
+
+    this.innerHTML = /*html*/ `        
+      <div class="form-item form-item--required">
+          <label for="${id}-select">${label}</label>
+          <select name="${id}" id=${id}-select class="select-arrow-down arrow-down-grey">
+            ${this.#createOptionHTML(options, values)}
+          </select>
+          <p class="hidden text-caption error-message" id=${id}-select-error-message>옵션을 선택해주세요</p>
+      </div>`;
+
+    this.errorMessageClassList = $(`#${id}-select-error-message`)!.classList;
+  }
+
+  setEvent() {
+    document.addEventListener("add-form-submit", () => {
+      this.handleErrorMessage();
+    });
+  }
+}
+
+customElements.define("restaurant-option", RestaurantOptions);
diff --git a/src/components/RestaurantAddForm/index.ts b/src/components/RestaurantAddForm/index.ts
new file mode 100644
index 000000000..eddeb4013
--- /dev/null
+++ b/src/components/RestaurantAddForm/index.ts
@@ -0,0 +1,114 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { CATEGORIES, DISTANCES } from "../../constants/menu";
+import { RestaurantAddItem } from "../../types/menu";
+import { add } from "../../domains/Restaurants";
+import { $ } from "../../utils/dom";
+
+class RestaurantAddForm extends BaseComponent {
+  private addFormElement: HTMLFormElement | null = null;
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    this.innerHTML = /*html*/ `
+      <div class="modal-container">
+        <h2 class="modal-title text-title">새로운 음식점</h2>
+        <form id="restaurant-add-form">  
+          <restaurant-option 
+            id="category" 
+            label="카테고리"
+            options="${["선택해주세요", ...Object.values(CATEGORIES)]}"
+            values="${["", ...Object.values(CATEGORIES)]}" 
+            ></restaurant-option>
+          <restaurant-name-input></restaurant-name-input>
+          <restaurant-option 
+            id="distance" 
+            label="거리(도보 이동 시간)"
+            values="${["", ...DISTANCES.map((v) => String(v))]}" 
+            options="${[
+              "선택해주세요",
+              ...DISTANCES.map((v) => `${v}분 내`),
+            ]}"></restaurant-option>
+      
+          <div class="form-item">
+            <label for="description">설명</label>
+            <textarea name="description" id="description" cols="30" rows="5" maxlength="300"></textarea>
+            <span class="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
+            <p class="hidden" id="error-message">10글자 이하로 작성해주세요</p>
+          </div>
+          <div class="form-item">
+            <label for="link">참고 링크</label>
+            <input type="text" name="link" id="link">
+            <span class="help-text text-caption">매장 정보를 확인할 수 있는 링크를 입력해 주세요.</span>
+          </div>
+          <div class="button-container">
+            <button type="reset" id="reset-button" class="button button--secondary text-caption">취소하기</button>
+            <button type="submit" class="button button--primary text-caption">추가하기</button>
+          </div>
+        </form>
+      </div> 
+    `;
+
+    this.addFormElement = $<HTMLFormElement>("#restaurant-add-form");
+  }
+
+  private isRestaurantItemType(
+    addingItem: object | undefined
+  ): addingItem is RestaurantAddItem {
+    if (!addingItem) return false;
+    return Object.keys(addingItem).every((key) =>
+      ["name", "category", "distance", "description", "link"].includes(key)
+    );
+  }
+
+  private resetFormData() {
+    const restaurantFormElement = $<HTMLFormElement>("#restaurant-add-form");
+    restaurantFormElement && restaurantFormElement.reset();
+  }
+
+  private getAddingItem() {
+    if (!this.addFormElement) return;
+    const formData = new FormData(this.addFormElement);
+
+    const addItem = [...formData.entries()].reduce((accItems, currItem) => {
+      const [key, value] = currItem;
+      return {
+        ...accItems,
+        [key]: value,
+      };
+    }, {});
+
+    return addItem;
+  }
+
+  private handleAddFormSubmit(addingItem: RestaurantAddItem) {
+    try {
+      if (add(addingItem)) {
+        this.emitEvent(MENU_APP_EVENTS.renderRestaurants);
+        this.emitEvent(MENU_APP_EVENTS.closeModal);
+        this.resetFormData();
+      }
+    } catch (error) {
+      error instanceof Error && alert(error);
+    }
+  }
+
+  setEvent() {
+    $("#restaurant-add-form")!.addEventListener("submit", (e) => {
+      e.preventDefault();
+      this.emitEvent(MENU_APP_EVENTS.restaurantFormSubmit);
+
+      const addItem = this.getAddingItem();
+      this.isRestaurantItemType(addItem) && this.handleAddFormSubmit(addItem);
+    });
+
+    $("#reset-button")!.addEventListener("click", () => {
+      this.emitEvent(MENU_APP_EVENTS.closeModal);
+    });
+  }
+}
+
+customElements.define("restaurant-add-form", RestaurantAddForm);

From dbd43176d7473dcb373f4348bd762b56006f2ee6 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 12:12:51 +0900
Subject: [PATCH 20/70] =?UTF-8?q?chore(change=20directory):=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 음식점 목록, 아이템, 상세 정보, 탭 구분 컴포넌트를 Restaurants 폴더로 이동
---
 .../Restaurants/RestaurantDetail.ts           |  85 +++++++++++++
 src/components/Restaurants/RestaurantItem.ts  |  31 +++++
 src/components/Restaurants/RestaurantList.ts  | 118 ++++++++++++++++++
 src/components/Restaurants/RestaurantTab.ts   |  15 +++
 .../Restaurants/RestaurantTabContainer.ts     |  50 ++++++++
 5 files changed, 299 insertions(+)
 create mode 100644 src/components/Restaurants/RestaurantDetail.ts
 create mode 100644 src/components/Restaurants/RestaurantItem.ts
 create mode 100644 src/components/Restaurants/RestaurantList.ts
 create mode 100644 src/components/Restaurants/RestaurantTab.ts
 create mode 100644 src/components/Restaurants/RestaurantTabContainer.ts

diff --git a/src/components/Restaurants/RestaurantDetail.ts b/src/components/Restaurants/RestaurantDetail.ts
new file mode 100644
index 000000000..84d49d9b8
--- /dev/null
+++ b/src/components/Restaurants/RestaurantDetail.ts
@@ -0,0 +1,85 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { RestaurantItem } from "../../types/menu";
+import { deleteRestaurantByName } from "../../domains/Restaurants";
+import { $ } from "../../utils/dom";
+import { isRestaurantItemType } from "../../utils/types";
+
+const RESTAURANT_KEYS = ["name", "category", "distance", "isFavorite", "description", "link"];
+
+class RestaurantDetail extends BaseComponent {
+  private detailInfo: RestaurantItem | null = null;
+
+  private getDetailTemplate(): string {
+    if (!this.detailInfo) return ``;
+
+    const { name, category, distance, description, isFavorite, link } = this.detailInfo;
+
+    return /*html*/ `
+      <div class="restaurant__info gap-4">
+        <div class="flex justify-between">
+          <div class="flex flex-col gap-4">
+            <category-image category="${category}"></category-image>
+            <h3 class="restaurant__name text-subtitle">${name}</h3>
+            <span class="restaurant__distance text-body">캠퍼스부터 ${distance}분 내</span>
+          </div>
+          <favorite-icon is-favorite="${isFavorite}" restaurant-name="${name}"></favorite-icon>
+        </div>
+        <p class="text-body">${description}</p>
+        ${
+          link
+            ? `<a href=${link} target="_blank" class="detail-link">${link}</a>`
+            : '<p class="text-body font-orange">참고 링크가 존재하지 않습니다.</p>'
+        }
+      </div>
+    `;
+  }
+
+  render() {
+    this.innerHTML = /*html*/ `
+      <div class="modal-container">
+        <div class="restaurant-detail">
+          ${this.getDetailTemplate()}
+          <div class="button-container">
+            <button type="reset" id="delete-button" class="button button--secondary text-caption">삭제하기</button>
+            <button type="submit" id="detail-close-button" class="button button--primary text-caption">닫기</button>
+          </div>
+        </div>
+      <div>
+    `;
+  }
+
+  private handleShowRestaurantDetailModal(event: CustomEvent) {
+    const { detailInfo } = event.detail;
+    if (!isRestaurantItemType<RestaurantItem>(detailInfo, RESTAURANT_KEYS)) {
+      return;
+    }
+
+    this.detailInfo = detailInfo;
+    this.connectedCallback();
+  }
+
+  setEvent() {
+    document.addEventListener(
+      MENU_APP_EVENTS.openRestaurantDetail,
+      (event) => {
+        event instanceof CustomEvent && this.handleShowRestaurantDetailModal(event);
+      },
+      {
+        once: true,
+      }
+    );
+
+    $<HTMLButtonElement>(`#detail-close-button`)?.addEventListener("click", () => {
+      this.emitEvent(MENU_APP_EVENTS.closeModal);
+    });
+
+    $<HTMLButtonElement>(`#delete-button`)?.addEventListener("click", () => {
+      this.detailInfo && deleteRestaurantByName(this.detailInfo.name);
+      this.emitEvent(MENU_APP_EVENTS.closeModal);
+      this.emitEvent(MENU_APP_EVENTS.renderRestaurants);
+    });
+  }
+}
+
+customElements.define("restaurant-detail", RestaurantDetail);
diff --git a/src/components/Restaurants/RestaurantItem.ts b/src/components/Restaurants/RestaurantItem.ts
new file mode 100644
index 000000000..a265a7b90
--- /dev/null
+++ b/src/components/Restaurants/RestaurantItem.ts
@@ -0,0 +1,31 @@
+import BaseComponent from "../BaseComponent";
+
+class RestaurantItem extends BaseComponent {
+  constructor() {
+    super();
+  }
+
+  render() {
+    const category = this.getAttribute("category") ?? "";
+    const name = this.getAttribute("name") ?? "";
+    const distance = this.getAttribute("distance") ?? "";
+    const description = this.getAttribute("description") ?? "";
+    const isFavorite = this.getAttribute("is-favorite") ?? "";
+
+    this.innerHTML = /*html*/ `
+      <div class="restaurant">
+        <category-image category="${category}"></category-image>
+        <div class="restaurant__info__layout">
+          <div class="restaurant__info">
+            <span class="restaurant__name text-subtitle">${name}</span>
+            <span class="restaurant__distance text-body">캠퍼스부터 ${distance}분 내</span>
+            ${description ? `<p class="restaurant__description text-body">${description}</p>` : ""}
+          </div>
+          <favorite-icon is-favorite="${isFavorite}" restaurant-name="${name}"></favorite-icon>
+        </div>
+      </div>
+      `;
+  }
+}
+
+customElements.define("restaurant-item", RestaurantItem);
diff --git a/src/components/Restaurants/RestaurantList.ts b/src/components/Restaurants/RestaurantList.ts
new file mode 100644
index 000000000..c740aca2c
--- /dev/null
+++ b/src/components/Restaurants/RestaurantList.ts
@@ -0,0 +1,118 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { CategoryString, RestaurantItem, RestaurantTab, SortOptionString } from "../../types/menu";
+import {
+  filterByCategory,
+  findRestaurantByName,
+  getFavoriteRestaurants,
+  sortByType,
+} from "../../domains/Restaurants";
+
+class RestaurantList extends BaseComponent {
+  private currentCategory: CategoryString;
+  private currentTab: RestaurantTab;
+
+  constructor() {
+    super();
+    this.currentCategory = "전체";
+    this.currentTab = "all";
+  }
+
+  private getCurrentList(sortOption?: SortOptionString) {
+    if (this.currentTab === "favorite") {
+      return getFavoriteRestaurants();
+    }
+    return sortOption ? sortByType(this.currentCategory, sortOption) : filterByCategory(this.currentCategory);
+  }
+
+  private sortRestaurantList(sortOption: SortOptionString) {
+    this.render(sortOption);
+  }
+
+  private filterRestaurantList(option: CategoryString) {
+    this.currentCategory = option;
+    this.render();
+  }
+
+  private handleTabChange(tab: RestaurantTab) {
+    if (tab === this.currentTab) return;
+    if (tab === "all") {
+      this.currentCategory = "전체";
+    }
+    this.currentTab = tab;
+    this.render();
+  }
+
+  private getRestaurantName(element: Element): string | null {
+    const restaurantName = element?.querySelector(".restaurant__name");
+    if (!(restaurantName instanceof HTMLSpanElement)) return null;
+    return restaurantName.innerText;
+  }
+
+  private handleShowRestaurantDetailModal(element: Element) {
+    const restaurantName = this.getRestaurantName(element);
+    if (!restaurantName) return;
+
+    this.emitEvent<{ detailInfo: RestaurantItem | null }>(MENU_APP_EVENTS.openRestaurantDetail, {
+      detailInfo: findRestaurantByName(restaurantName),
+    });
+  }
+
+  private createRestaurantListHTML(restaurantList: RestaurantItem[]) {
+    return restaurantList.reduce((accRestaurants, currentRestaurant) => {
+      const { name, category, distance, description, isFavorite } = currentRestaurant;
+
+      return (
+        accRestaurants +
+        /*html*/ `
+        <restaurant-item
+          name="${name}"
+          category="${category}"
+          distance="${distance}"
+          description="${description}"
+          is-favorite="${isFavorite}"
+        ></restaurant-item>
+        `
+      );
+    }, "");
+  }
+
+  render(sortOption?: SortOptionString) {
+    const currentList = this.getCurrentList(sortOption);
+
+    this.innerHTML = /*html*/ `
+      <section class="restaurant-list-container">
+        ${this.createRestaurantListHTML(currentList)}
+      </section>
+    `;
+  }
+
+  setEvent() {
+    document.addEventListener(MENU_APP_EVENTS.renderRestaurants, () => {
+      this.render();
+    });
+
+    document.addEventListener(MENU_APP_EVENTS.changeTabState, (event) => {
+      if (!(event instanceof CustomEvent)) return;
+
+      const { tab } = event.detail;
+      this.handleTabChange(tab);
+    });
+
+    document.addEventListener(MENU_APP_EVENTS.selectChange, (event) => {
+      if (!(event instanceof CustomEvent)) return;
+
+      const { type, option } = event.detail;
+      type === "sort" ? this.sortRestaurantList(option) : this.filterRestaurantList(option);
+    });
+
+    this.addEventListener("click", (event) => {
+      if (!(event.target instanceof HTMLElement) || event.target.matches("img")) return;
+
+      const targetRestaurantElement = event.target.closest(".restaurant");
+      targetRestaurantElement && this.handleShowRestaurantDetailModal(targetRestaurantElement);
+    });
+  }
+}
+
+customElements.define("restaurant-list", RestaurantList);
diff --git a/src/components/Restaurants/RestaurantTab.ts b/src/components/Restaurants/RestaurantTab.ts
new file mode 100644
index 000000000..38d135832
--- /dev/null
+++ b/src/components/Restaurants/RestaurantTab.ts
@@ -0,0 +1,15 @@
+import BaseComponent from "../BaseComponent";
+
+class RestaurantTab extends BaseComponent {
+  protected render() {
+    const text = this.getAttribute("text") ?? "";
+    const isActive = this.getAttribute("is-active") === "true" ? true : false;
+
+    this.innerHTML = /*html*/ `
+      <span class="${isActive ? "font-orange" : "font-gray"} text-body font-bold text-center">${text}</span>
+      <div class="${isActive ? "border-orange" : "border-gray"} tab-border-bottom"></div>
+    `;
+  }
+}
+
+customElements.define("restaurant-tab", RestaurantTab);
diff --git a/src/components/Restaurants/RestaurantTabContainer.ts b/src/components/Restaurants/RestaurantTabContainer.ts
new file mode 100644
index 000000000..fd9201735
--- /dev/null
+++ b/src/components/Restaurants/RestaurantTabContainer.ts
@@ -0,0 +1,50 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { RESTAURANT_TABS } from "../../constants/menu";
+import { RestaurantTab } from "../../types/menu";
+
+class RestaurantTabContainer extends BaseComponent {
+  private currentTab: RestaurantTab = "all";
+
+  protected render() {
+    this.innerHTML = /*html*/ `
+    <restaurant-tab 
+      class="w-full flex flex-col" 
+      text="${RESTAURANT_TABS.all}"
+      is-active=${this.currentTab === "all"}></restaurant-tab>    
+    <restaurant-tab 
+      class="w-full flex flex-col" 
+      text="${RESTAURANT_TABS.favorite}"
+      is-active=${this.currentTab === "favorite"}></restaurant-tab>
+    `;
+  }
+
+  private getChangedTabType(tabText: string): RestaurantTab {
+    if (tabText === RESTAURANT_TABS.all) return "all";
+    if (tabText === RESTAURANT_TABS.favorite) return "favorite";
+  }
+
+  private shouldChangeTab(tabType: RestaurantTab): boolean | undefined {
+    return tabType && tabType !== this.currentTab;
+  }
+
+  private handleTabChange(tabText: string) {
+    const changedTabType = this.getChangedTabType(tabText);
+    if (!this.shouldChangeTab(changedTabType)) return;
+
+    this.currentTab = changedTabType;
+    this.render();
+    this.emitEvent<{ tab: RestaurantTab }>(MENU_APP_EVENTS.changeTabState, {
+      tab: this.currentTab,
+    });
+  }
+
+  protected setEvent() {
+    this.addEventListener("click", (event) => {
+      if (!(event.target instanceof HTMLSpanElement)) return;
+      this.handleTabChange(event.target.innerText);
+    });
+  }
+}
+
+customElements.define("restaurant-tab-container", RestaurantTabContainer);

From 794955cf4c464a6334992f922e2538e3d00d5ef2 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 12:37:26 +0900
Subject: [PATCH 21/70] =?UTF-8?q?refactor(OptionSelector):=20=EC=8B=9D?=
 =?UTF-8?q?=EB=8B=B9=20=EB=AA=A9=EB=A1=9D=20=ED=95=84=ED=84=B0=EB=A7=81,?=
 =?UTF-8?q?=20=EC=A0=95=EB=A0=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 자주 가는 음식점을 볼 경우 해당 컴포넌트가 보여지지 않도록 동작하는 메서드 구현
- 유효한 필터링, 정렬 값인지 타입 확인하는 메서드 구현
---
 .../OptionSelector/OPtionSelectorContainer.ts | 36 ++++++++++
 src/components/OptionSelector/index.ts        | 71 +++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 src/components/OptionSelector/OPtionSelectorContainer.ts
 create mode 100644 src/components/OptionSelector/index.ts

diff --git a/src/components/OptionSelector/OPtionSelectorContainer.ts b/src/components/OptionSelector/OPtionSelectorContainer.ts
new file mode 100644
index 000000000..4dce6482d
--- /dev/null
+++ b/src/components/OptionSelector/OPtionSelectorContainer.ts
@@ -0,0 +1,36 @@
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { CATEGORIES, SORT_TYPE } from "../../constants/menu";
+import { RestaurantTab } from "../../types/menu";
+import { $ } from "../../utils/dom";
+import BaseComponent from "../BaseComponent";
+
+class OptionSelectorContainer extends BaseComponent {
+  protected render() {
+    this.innerHTML = /*html*/ `
+      <section id="option-selector-container" class="flex justify-between restaurant-filter-container">
+        <option-selector type="category" options=${[...Object.values(CATEGORIES)]} ></option-selector>
+        <option-selector type="sort" options=${[...Object.values(SORT_TYPE)]}></option-selector>
+      </section>
+    `;
+  }
+
+  private hideOptionSelector() {
+    $<HTMLDivElement>("#option-selector-container")?.classList.add("hidden");
+  }
+
+  private handleOptionSelectorVisibility(tab: RestaurantTab) {
+    if (!tab) return;
+    tab === "favorite" ? this.hideOptionSelector() : this.render();
+  }
+
+  protected setEvent() {
+    document.addEventListener(MENU_APP_EVENTS.changeTabState, (event) => {
+      if (!(event instanceof CustomEvent)) return;
+
+      const { tab } = event.detail;
+      this.handleOptionSelectorVisibility(tab);
+    });
+  }
+}
+
+customElements.define("option-selector-container", OptionSelectorContainer);
diff --git a/src/components/OptionSelector/index.ts b/src/components/OptionSelector/index.ts
new file mode 100644
index 000000000..0ebb6183a
--- /dev/null
+++ b/src/components/OptionSelector/index.ts
@@ -0,0 +1,71 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { CATEGORIES } from "../../constants/menu";
+import { CategoryStringWithoutAll, SortOptionString } from "../../types/menu";
+
+interface OptionDetail {
+  type: string;
+  option: string;
+}
+
+class OptionSelector extends BaseComponent {
+  private selectType;
+
+  constructor() {
+    super();
+    this.selectType = this.getAttribute("type");
+  }
+
+  private createOptionHTML(options: string[]) {
+    return options.reduce(
+      (accOptions, currOption) => accOptions + /*html*/ `<option value=${currOption}>${currOption}</option>;`,
+      ""
+    );
+  }
+
+  private isCategoryType(category: string): category is CategoryStringWithoutAll {
+    return ["한식", "아시안", "일식", "중식", "양식", "기타"].includes(category);
+  }
+
+  private isSortType(category: string): category is SortOptionString {
+    return ["이름순", "거리순"].includes(category);
+  }
+
+  private isValidOptionType(value: string) {
+    return this.isCategoryType(value) || this.isSortType(value);
+  }
+
+  private handleChangeOption(element: HTMLSelectElement) {
+    const selectedValue = element.value;
+    if (!this.isValidOptionType(selectedValue)) return;
+
+    this.emitEvent<OptionDetail>(MENU_APP_EVENTS.selectChange, {
+      type: this.selectType ?? "",
+      option: selectedValue,
+    });
+  }
+
+  render() {
+    const options = this.getAttribute("options")!.split(",");
+
+    this.innerHTML = /*html*/ `
+      <select name="category" id="category-filter" class="restaurant-filter-select select-arrow-down arrow-down-black" aria-label="${
+        this.selectType
+      }-select">
+        ${this.createOptionHTML(options)}
+      </select> 
+    `;
+  }
+
+  setEvent() {
+    this.addEventListener("change", (event: Event) => {
+      if (!(event.target instanceof HTMLSelectElement)) {
+        return;
+      }
+
+      this.handleChangeOption(event.target);
+    });
+  }
+}
+
+customElements.define("option-selector", OptionSelector);

From 4774765497bd6f7a2340a215181917dee952f3eb Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 12:37:55 +0900
Subject: [PATCH 22/70] =?UTF-8?q?chore(event=20constants):=20=EC=A0=90?=
 =?UTF-8?q?=EC=8B=AC=20=EB=AD=90=20=EB=A8=B9=EC=A7=80=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EB=B0=9C=EC=83=9D=ED=95=98=EB=8A=94=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=83=81=EC=88=98?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/event.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 src/constants/event.ts

diff --git a/src/constants/event.ts b/src/constants/event.ts
new file mode 100644
index 000000000..3eb41ca40
--- /dev/null
+++ b/src/constants/event.ts
@@ -0,0 +1,10 @@
+export const MENU_APP_EVENTS = {
+  renderRestaurants: "render-restaurants",
+  selectChange: "select-change",
+  openAddForm: "open-add-form",
+  openRestaurantDetail: "open-restaurant-detail",
+  restaurantFormSubmit: "restaurant-form-submit",
+  closeModal: "close-modal",
+  toggleFavoriteIcon: "toggle-favorite-icon",
+  changeTabState: "change-tab-state",
+} as const;

From 665177712fa31f0ff4636858030e81259a402cb9 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 12:38:43 +0900
Subject: [PATCH 23/70] =?UTF-8?q?chore(menu=20constants):=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC,=20=EC=A0=95=EB=A0=AC=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A4=80,=20=ED=83=AD=20=EB=A9=94=EB=89=B4=20=EB=AC=B8?=
 =?UTF-8?q?=EC=9E=90=20=EC=83=81=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/menu.ts | 41 ++++++++++++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/constants/menu.ts b/src/constants/menu.ts
index ce8856616..6749261be 100644
--- a/src/constants/menu.ts
+++ b/src/constants/menu.ts
@@ -1,44 +1,56 @@
-import { Category, Distance, RestaurantItem } from "../types/menu";
+import { Distance, RestaurantItem } from "../types/menu";
 
 export const DEFAULT_DATA: RestaurantItem[] = [
   {
     name: "피양콩 할마니",
     category: "한식",
     distance: 10,
+    isFavorite: false,
     description:
       "평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, ‘피양’은 평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다.",
+    link: "",
   },
   {
     name: "친친",
     category: "중식",
     distance: 5,
+    isFavorite: false,
     description:
       "Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다",
+    link: "",
   },
   {
     name: "잇쇼우",
     category: "일식",
     distance: 10,
+    isFavorite: false,
     description:
       "잇쇼우는 정통 자가제면 사누끼 우동이 대표메뉴입니다. 기술은 정성을 이길 수 없다는 신념으로 모든 음식에 최선을 다하는 잇쇼우는 고객 한분 한분께 최선을 다하겠습니다",
+    link: "",
   },
   {
     name: "이태리키친",
     category: "양식",
     distance: 20,
+    isFavorite: false,
     description: "늘 변화를 추구하는 이태리키친입니다.",
+    link: "",
   },
   {
     name: "호아빈 삼성점",
     category: "아시안",
     distance: 15,
+    isFavorite: false,
     description: "푸짐한 양에 국물이 일품인 쌀국수",
+    link: "",
   },
   {
     name: "도스타코스 선릉점",
     category: "기타",
     distance: 5,
+    isFavorite: false,
     description: "멕시칸 캐주얼 그릴",
+    link: "",
   },
 ];
 
@@ -51,13 +63,24 @@ export const ERROR_MESSAGES = {
   invalidRestaurantUniqueness: "이미 존재하는 식당입니다!",
 };
 
-export const CATEGORIES: Category[] = [
-  "한식",
-  "중식",
-  "일식",
-  "양식",
-  "아시안",
-  "기타",
-];
+export const CATEGORIES = {
+  all: "전체",
+  korean: "한식",
+  asian: "아시안",
+  japanese: "일식",
+  chinese: "중식",
+  western: "양식",
+  etc: "기타",
+} as const;
+
+export const SORT_TYPE = {
+  name: "이름순",
+  distance: "거리순",
+} as const;
 
 export const DISTANCES: Distance[] = [5, 10, 15, 20, 30];
+
+export const RESTAURANT_TABS = {
+  all: "모든 음식점",
+  favorite: "자주 가는 음식점",
+} as const;

From d0caaf6fee730de4fcad95df4cafa240b3e7177c Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 12:40:34 +0900
Subject: [PATCH 24/70] =?UTF-8?q?refactor(index.js):=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=EB=90=9C=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/index.js b/src/index.js
index 47827ef71..cb3f1ed7c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,16 @@
 import "../templates/style.css";
-import "./components/Header.js";
-import "./components/OptionSelector.js";
-import "./components/RestaurantList.js";
-import "./components/RestaurantItem.js";
-import "./components/RestaurantAddForm/RestaurantNameInput.js";
-import "./components/RestaurantAddForm/RestaurantOption.js";
-import "./components/RestaurantAddForm/index.js";
-import "./components/MenuApp.js";
+import "./components/Header/index";
+import "./components/Restaurants/RestaurantDetail";
+import "./components/Restaurants/RestaurantItem";
+import "./components/Restaurants/RestaurantList";
+import "./components/Restaurants/RestaurantTab";
+import "./components/Restaurants/RestaurantTabContainer";
+import "./components/RestaurantAddForm/index";
+import "./components/RestaurantAddForm/RestaurantNameInput";
+import "./components/RestaurantAddForm/RestaurantOption";
+import "./components/OptionSelector/OPtionSelectorContainer";
+import "./components/OptionSelector/index";
+import "./components/FavoriteIcon/index";
+import "./components/CategoryImage/index";
+import "./components/Modal/index";
+import "./components/MenuApp";

From 54352197262187c593cda50e39506297bbd4d88e Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 15:09:17 +0900
Subject: [PATCH 25/70] =?UTF-8?q?feat(type=20checker):=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=EC=9D=84=20=ED=99=95=EC=9D=B8=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=EC=9C=A0=ED=8B=B8=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 새로운 식당을 추가하기 전, 식당 상세정보 모달을 렌더링하기 전 타입 확인
- 필터링, 정렬 옵션이 변경되기 전 타입 확인
---
 src/utils/types.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/utils/types.ts

diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 000000000..c32d56eb0
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,7 @@
+export const isRestaurantItemType = <T extends object>(item: object, candidates: string[]): item is T => {
+  return Object.keys(item).every((key) => candidates.includes(key));
+};
+
+export const isValidOption = <T extends string>(options: T[], value: string): value is T => {
+  return options.includes(value as T);
+};

From dafd4c619aded0cd08540384a2279b8b9456464b Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 15:09:46 +0900
Subject: [PATCH 26/70] =?UTF-8?q?feat(dom=20utils):=20DOM=20=EB=85=B8?=
 =?UTF-8?q?=EB=93=9C=EB=A5=BC=20=EC=B0=BE=EB=8A=94=20=EC=9C=A0=ED=8B=B8=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/dom.ts | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/utils/dom.ts

diff --git a/src/utils/dom.ts b/src/utils/dom.ts
new file mode 100644
index 000000000..acd2619c8
--- /dev/null
+++ b/src/utils/dom.ts
@@ -0,0 +1,3 @@
+export const $ = <E extends Element>(selector: string, baseElement: E | Document = document): E | null => {
+  return baseElement.querySelector(selector) as E;
+};

From 75ea25da5b0252b984bcea6fa8b938ac2fe51a96 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 15:11:16 +0900
Subject: [PATCH 27/70] =?UTF-8?q?refactor(OptionSelector):=20=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=EB=A7=81,=20=EC=A0=95=EB=A0=AC=20=EA=B0=92=EC=9D=98?=
 =?UTF-8?q?=20=ED=83=80=EC=9E=85=20=ED=99=95=EC=9D=B8=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OptionSelector/index.ts | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/OptionSelector/index.ts b/src/components/OptionSelector/index.ts
index 0ebb6183a..ce0b1bd77 100644
--- a/src/components/OptionSelector/index.ts
+++ b/src/components/OptionSelector/index.ts
@@ -2,6 +2,7 @@ import BaseComponent from "../BaseComponent";
 import { MENU_APP_EVENTS } from "../../constants/event";
 import { CATEGORIES } from "../../constants/menu";
 import { CategoryStringWithoutAll, SortOptionString } from "../../types/menu";
+import { isValidOption } from "../../utils/types";
 
 interface OptionDetail {
   type: string;
@@ -23,16 +24,11 @@ class OptionSelector extends BaseComponent {
     );
   }
 
-  private isCategoryType(category: string): category is CategoryStringWithoutAll {
-    return ["한식", "아시안", "일식", "중식", "양식", "기타"].includes(category);
-  }
-
-  private isSortType(category: string): category is SortOptionString {
-    return ["이름순", "거리순"].includes(category);
-  }
-
-  private isValidOptionType(value: string) {
-    return this.isCategoryType(value) || this.isSortType(value);
+  private isValidOptionType(value: string): value is CategoryStringWithoutAll | SortOptionString {
+    return (
+      isValidOption<CategoryStringWithoutAll>(["한식", "아시안", "일식", "중식", "양식", "기타"], value) ||
+      isValidOption<SortOptionString>(["거리순", "이름순"], value)
+    );
   }
 
   private handleChangeOption(element: HTMLSelectElement) {

From e37988e777c177040e65fa85bec87a826a76d303 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 15:11:38 +0900
Subject: [PATCH 28/70] =?UTF-8?q?feat(Header):=20=EC=A0=90=EC=8B=AC=20?=
 =?UTF-8?q?=EB=AD=90=20=EB=A8=B9=EC=A7=80=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20TS=20=EB=A7=88=EC=9D=B4=EA=B7=B8?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/index.ts | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/components/Header/index.ts

diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
new file mode 100644
index 000000000..40f7fb4f5
--- /dev/null
+++ b/src/components/Header/index.ts
@@ -0,0 +1,29 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { addButton } from "../../assets";
+import { $ } from "../../utils/dom";
+
+class Header extends BaseComponent {
+  constructor() {
+    super();
+  }
+
+  render() {
+    this.innerHTML = /*html*/ `
+    <header class="gnb">
+        <h1 class="gnb__title text-title">점심 뭐 먹지</h1>
+        <button type="button" class="gnb__button" aria-label="음식점 추가">
+          <img src=${addButton} alt="음식점 추가">
+        </button>
+    </header>
+  `;
+  }
+
+  setEvent() {
+    $(".gnb__button")!.addEventListener("click", () => {
+      this.emitEvent(MENU_APP_EVENTS.openAddForm);
+    });
+  }
+}
+
+customElements.define("app-header", Header);

From a1e1a89188fd3802da0e3912182c3691bcdab392 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 15:12:41 +0900
Subject: [PATCH 29/70] =?UTF-8?q?config(types):=20=EC=A0=90=EC=8B=AC=20?=
 =?UTF-8?q?=EB=AD=90=20=EB=A8=B9=EC=A7=80=20=EC=9D=B4=EB=B2=A4=ED=8A=B8,?=
 =?UTF-8?q?=20=EC=83=81=EC=88=98=20=ED=83=80=EC=9E=85=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/event.ts |  5 +++++
 src/types/menu.ts  | 24 +++++++++++++++---------
 2 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 src/types/event.ts

diff --git a/src/types/event.ts b/src/types/event.ts
new file mode 100644
index 000000000..0c4af4d86
--- /dev/null
+++ b/src/types/event.ts
@@ -0,0 +1,5 @@
+import { MENU_APP_EVENTS } from "../constants/event";
+
+export type MenuAppEvent = (typeof MENU_APP_EVENTS)[keyof typeof MENU_APP_EVENTS];
+
+export type TotalMenuAppEvent = keyof HTMLElementEventMap | MenuAppEvent;
diff --git a/src/types/menu.ts b/src/types/menu.ts
index 675c59dab..265fb4e84 100644
--- a/src/types/menu.ts
+++ b/src/types/menu.ts
@@ -1,18 +1,24 @@
-export type Category =
-  | "한식"
-  | "일식"
-  | "아시안"
-  | "양식"
-  | "중식"
-  | "전체"
-  | "기타";
+import { MENU_APP_EVENTS } from "../constants/event";
+import { CATEGORIES, RESTAURANT_TABS, SORT_TYPE } from "../constants/menu";
 
 export type Distance = 5 | 10 | 15 | 20 | 30;
 
+export type Category = keyof typeof CATEGORIES;
+export type CategoryString = (typeof CATEGORIES)[Category];
+export type CategoryStringWithoutAll = (typeof CATEGORIES)[Exclude<Category, "all">];
+
+export type SortOption = keyof typeof SORT_TYPE;
+export type SortOptionString = (typeof SORT_TYPE)[SortOption];
+
 export interface RestaurantItem {
   name: string;
-  category: Category;
+  category: CategoryStringWithoutAll;
   distance: Distance;
+  isFavorite: boolean;
   description?: string;
   link?: string;
 }
+
+export type RestaurantAddItem = Omit<RestaurantItem, "isFavorite">;
+
+export type RestaurantTab = keyof typeof RESTAURANT_TABS | undefined;

From 003fa7c084152eb371210c7618808610bb43ecf9 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 15:15:12 +0900
Subject: [PATCH 30/70] =?UTF-8?q?chore(index.js):=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=EB=AA=85=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index cb3f1ed7c..b6ba18445 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,7 @@ import "./components/Restaurants/RestaurantTabContainer";
 import "./components/RestaurantAddForm/index";
 import "./components/RestaurantAddForm/RestaurantNameInput";
 import "./components/RestaurantAddForm/RestaurantOption";
-import "./components/OptionSelector/OPtionSelectorContainer";
+import "./components/OptionSelector/OptionSelectorContainer";
 import "./components/OptionSelector/index";
 import "./components/FavoriteIcon/index";
 import "./components/CategoryImage/index";

From c0158c9777e844165de95c28960fa542e2161e66 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 21:41:10 +0900
Subject: [PATCH 31/70] =?UTF-8?q?config(cypress):=20cypress=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=ED=99=98=EA=B2=BD=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- baseUrl 설정
- tsconfig 설정
---
 cypress.config.ts     |  4 +---
 cypress/tsconfig.json | 11 +++++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 cypress/tsconfig.json

diff --git a/cypress.config.ts b/cypress.config.ts
index 17161e32e..4119602c9 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -2,8 +2,6 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
+    baseUrl: "http://localhost:8080",
   },
 });
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
new file mode 100644
index 000000000..e05c8f20f
--- /dev/null
+++ b/cypress/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2016",
+    "lib": ["ES2016", "dom"],
+    "types": ["cypress", "node"],
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true
+  },
+  "include": ["**/*.ts"]
+}

From 02794317edf8d255b470f2fd5c452bc15bd113c6 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 21:44:39 +0900
Subject: [PATCH 32/70] =?UTF-8?q?test(RestaurantAddForm):=20=EC=9D=8C?=
 =?UTF-8?q?=EC=8B=9D=EC=A0=90=20=EC=B6=94=EA=B0=80=20=ED=8F=BC=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 유효한 입력일 경우, 정상적으로 추가 되는지 테스트
- 새로고침 해도, 추가한 음식점 정보가 유지 되는지 테스트
- 유효하지 않은 입력일 경우, 예외 상황에 대한 메시지를 alert로 확인할 수 있는지 테스트"
---
 cypress/e2e/ResturantAddTest.cy.ts | 180 +++++++++++++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 cypress/e2e/ResturantAddTest.cy.ts

diff --git a/cypress/e2e/ResturantAddTest.cy.ts b/cypress/e2e/ResturantAddTest.cy.ts
new file mode 100644
index 000000000..1c95298eb
--- /dev/null
+++ b/cypress/e2e/ResturantAddTest.cy.ts
@@ -0,0 +1,180 @@
+import { ERROR_MESSAGES } from "../../src/constants/menu";
+
+const VALID_TEST_DATA = [
+  {
+    name: "써니식당",
+    category: "한식",
+    distance: 5,
+    isFavorite: false,
+    description: "",
+    link: "",
+  },
+  {
+    name: "시루식당",
+    category: "아시안",
+    distance: 10,
+    isFavorite: false,
+    description: "브리튀시 숏헤어 김시루가 운영하는 식당. 까칠한 고양이 사장님이지만, 맛은 보장된다. 🐈‍⬛",
+    link: "",
+  },
+  {
+    name: "해리식당",
+    category: "일식",
+    distance: 15,
+    isFavorite: false,
+    description: "우아한테크코스 6기 FE 해리가 운영하는 식당. 선릉 캠퍼스와 매우 까우며, 맛집으로 유명하다.",
+    link: "https://github.com/hwinkr",
+  },
+  {
+    name: "하루식당",
+    category: "중식",
+    distance: 20,
+    isFavorite: false,
+    description: "우아한테크코스 웹 프론트엔드 리뷰어 하루가 운영하는 식당. 사장님의 리뷰가 정말 좋은 것으로 유명하다. 😊",
+    link: "",
+  },
+  {
+    name: "칙바이칙",
+    category: "양식",
+    distance: 30,
+    isFavorite: false,
+    description: "선릉역에서 맛있다고 소문이 난 햄버거집이다. 🍔",
+    link: "",
+  },
+];
+
+export const INVALID_TEST_DATA = [
+  {
+    invalidData: {
+      name: "고양이",
+      category: "",
+      distance: 5,
+      description: "",
+      link: "",
+    },
+    errorMessage: ERROR_MESSAGES.invalidCategory,
+  },
+  {
+    invalidData: {
+      name: "",
+      category: "한식",
+      distance: 10,
+      description: "",
+      link: "",
+    },
+    errorMessage: ERROR_MESSAGES.invalidRestaurantName,
+  },
+  {
+    invalidData: {
+      name: "점심뭐먹을지고민하지마세요",
+      category: "일식",
+      distance: 10,
+      description: "",
+      link: "",
+    },
+    errorMessage: ERROR_MESSAGES.invalidRestaurantName,
+  },
+  {
+    invalidData: {
+      name: "해리식당",
+      category: "중식",
+      distance: "",
+      description: "",
+      link: "",
+    },
+    errorMessage: ERROR_MESSAGES.invalidDistance,
+  },
+  {
+    invalidData: {
+      name: "멕시카나",
+      category: "양식",
+      distance: 5,
+      description:
+        "멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴",
+      link: "",
+    },
+    errorMessage: ERROR_MESSAGES.invalidDescriptionLength,
+  },
+];
+
+describe("새로운 음식점 추가 테스트", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("식당 입력값이 유효할 경우, 음식점 목록의 가장 마지막에 추가된다.", () => {
+    VALID_TEST_DATA.forEach(({ name, category, distance, description, link }) => {
+      cy.get(".gnb__button").click();
+
+      cy.get("select#category-select").select(category);
+      cy.get("input#name").type(name);
+      cy.get("select#distance-select").select(String(distance));
+      description && cy.get("textarea#description").type(description);
+      link && cy.get("input#link").type(link);
+
+      cy.get("#restaurant-add-form").submit();
+
+      cy.get(".restaurant-list-container")
+        .children()
+        .last()
+        .should("have.attr", "name", name)
+        .and("have.attr", "category", category)
+        .and("have.attr", "distance", distance)
+        .and("have.attr", "description", description)
+        .and("have.attr", "is-favorite", "false");
+    });
+  });
+
+  it("새로고침을 해도 새로 추가한 음식점 정보가 유지된다.", () => {
+    const { name, category, distance, description, link } = VALID_TEST_DATA[0];
+    const EXPECTED_RESTAURANT_LENGTH = 7;
+
+    cy.get(".gnb__button").click();
+
+    cy.get("select#category-select").select(category);
+    cy.get("input#name").type(name);
+    cy.get("select#distance-select").select(String(distance));
+    description && cy.get("textarea#description").type(description);
+    link && cy.get("input#link").type(link);
+
+    cy.get("#restaurant-add-form").submit();
+
+    cy.reload();
+
+    cy.get(".restaurant-list-container").children().should("have.length", EXPECTED_RESTAURANT_LENGTH);
+
+    cy.get(".restaurant-list-container")
+      .children()
+      .last()
+      .should("have.attr", "name", name)
+      .and("have.attr", "category", category)
+      .and("have.attr", "distance", distance)
+      .and("have.attr", "description", description)
+      .and("have.attr", "is-favorite", "false");
+  });
+
+  it("식당 입력값이 유효하지 않을 경우, alert로 에러 메시지가 확인된다.", () => {
+    INVALID_TEST_DATA.forEach(({ invalidData, errorMessage }) => {
+      const { name, category, distance, description, link } = invalidData;
+
+      cy.get(".gnb__button").click();
+
+      category && cy.get("select#category-select").select(category);
+      name && cy.get("input#name").type(name);
+      distance && cy.get("select#distance-select").select(String(distance));
+      description && cy.get("textarea#description").type(description);
+      link && cy.get("input#link").type(link);
+
+      const alertStub = cy.stub();
+      cy.on("window:alert", alertStub);
+
+      cy.get("#restaurant-add-form")
+        .submit()
+        .then(() => {
+          expect(alertStub).to.be.calledWith(errorMessage);
+        });
+
+      cy.reload();
+    });
+  });
+});

From 8ecc48e53d1cb63f3b8be5528cb2c1a5f3dea3e9 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 21:49:17 +0900
Subject: [PATCH 33/70] =?UTF-8?q?test(RestaurantList):=20=EC=9D=8C?=
 =?UTF-8?q?=EC=8B=9D=EC=A0=90=20=EB=AA=A9=EB=A1=9D=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 첫 방문 시 디폴트 데이터 렌더링 테스트
- 카테고리 필터링, 이름순/거리순 정렬 테스트
- 자주 가는 음식점 상태 변경에 따른 렌더링 테스트
---
 cypress/e2e/RestaurantList.cy.ts | 104 +++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 cypress/e2e/RestaurantList.cy.ts

diff --git a/cypress/e2e/RestaurantList.cy.ts b/cypress/e2e/RestaurantList.cy.ts
new file mode 100644
index 000000000..73716da36
--- /dev/null
+++ b/cypress/e2e/RestaurantList.cy.ts
@@ -0,0 +1,104 @@
+const FILTERING_TEST_DATA = [
+  {
+    category: "한식",
+    expectedRestaurantName: "피양콩 할마니",
+  },
+  {
+    category: "아시안",
+    expectedRestaurantName: "호아빈 삼성점",
+  },
+  {
+    category: "일식",
+    expectedRestaurantName: "잇쇼우",
+  },
+  {
+    category: "중식",
+    expectedRestaurantName: "친친",
+  },
+
+  {
+    category: "양식",
+    expectedRestaurantName: "이태리키친",
+  },
+  {
+    category: "기타",
+    expectedRestaurantName: "도스타코스 선릉점",
+  },
+];
+
+describe("음식점 목록 테스트", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("사용자가 처음 방문할 경우 기본 제공 음식점 목록이 렌더링된다", () => {
+    const EXPECTED_RESTAURANT_LENGTH = 6;
+    cy.get(".restaurant-list-container").children().should("have.length", EXPECTED_RESTAURANT_LENGTH);
+  });
+
+  it("사용자가 선택한 카테고리에 맞는 음식점 목록이 보여져야 한다.", () => {
+    FILTERING_TEST_DATA.forEach(({ category, expectedRestaurantName }) => {
+      const FILTERED_RESTAURANT_LIST = 1;
+
+      cy.get("select#category-option-select").select(category);
+
+      cy.get(".restaurant-list-container").children().should("have.length", FILTERED_RESTAURANT_LIST);
+      cy.get(".restaurant-list-container").children().last().should("have.attr", "name", expectedRestaurantName);
+    });
+
+    const EXPECTED_RESTAURANT_LENGTH = 6;
+    cy.get("select#category-option-select").select("전체");
+    cy.get(".restaurant-list-container").children().should("have.length", EXPECTED_RESTAURANT_LENGTH);
+  });
+
+  it("사용자가 이름순 정렬 옵션을 선택할 경우, 이름순으로 목록이 정렬된다", () => {
+    const EXPECTED_NAME_SEQUENCE = ["도스타코스 선릉점", "친친", "잇쇼우", "피양콩 할마니", "호아빈 삼성점", "이태리키친"];
+
+    cy.get("select#sort-option-select").select("거리순");
+
+    cy.get(".restaurant-list-container")
+      .children()
+      .each((element, index) => {
+        cy.wrap(element.attr("name")).should("equal", EXPECTED_NAME_SEQUENCE[index]);
+      });
+  });
+
+  it("사용자가 거리순 정렬 옵션을 선택할 경우, 거리순으로 음식점 목록이 정렬된다", () => {
+    const EXPECTED_NAME_SEQUENCE = ["도스타코스 선릉점", "이태리키친", "잇쇼우", "친친", "피양콩 할마니", "호아빈 삼성점"];
+
+    cy.get("select#sort-option-select").select("이름순");
+
+    cy.get(".restaurant-list-container")
+      .children()
+      .each((element, index) => {
+        cy.wrap(element.attr("name")).should("equal", EXPECTED_NAME_SEQUENCE[index]);
+      });
+  });
+
+  it("사용자가 별 아이콘을 클릭하면, 자주 가는 음식점 탭에서 확인할 수 있다.", () => {
+    const EXPECTED_FAVORITE_RESTAURANT_LENGTH = 2;
+
+    cy.get("favorite-icon").first().click();
+    cy.get("favorite-icon").last().click();
+
+    cy.get("restaurant-tab[text='자주 가는 음식점']").click();
+
+    cy.get(".restaurant-list-container").children().should("have.length", EXPECTED_FAVORITE_RESTAURANT_LENGTH);
+  });
+
+  it("자주 가는 음식점 탭에서 별 아이콘을 클릭하면, 모든 음식점에서 탭에서만 확인할 수 있다.", () => {
+    const EMPTY_FAVORITE_RESTAURANT_LENGTH = 0;
+
+    cy.get("favorite-icon").first().click();
+    cy.get("favorite-icon").last().click();
+
+    cy.get("restaurant-tab[text='자주 가는 음식점']").click();
+
+    cy.get("favorite-icon").first().click();
+    cy.get("favorite-icon").last().click();
+
+    cy.get("restaurant-tab[text='자주 가는 음식점']").click();
+
+    cy.get(".restaurant-list-container").children().should("have.length", EMPTY_FAVORITE_RESTAURANT_LENGTH);
+  });
+});

From e52abc168df3b00e53ce37387caf3fdeac26961a Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 21:50:57 +0900
Subject: [PATCH 34/70] =?UTF-8?q?test(RestaurantDetail):=20=EC=9D=8C?=
 =?UTF-8?q?=EC=8B=9D=EC=A0=90=20=EC=83=81=EC=84=B8=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 상세 정보 모달 렌더링 테스트
- 닫기 버튼, 모달 외부 영역 클릭 시 언마운트 되는지 테스트
- 삭제하기 버튼 클릭 시 해당 음식점이 사라지고 렌더링에 반영 되는지 테스트
---
 cypress/e2e/RestaurantDetail.cy.ts | 36 ++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 cypress/e2e/RestaurantDetail.cy.ts

diff --git a/cypress/e2e/RestaurantDetail.cy.ts b/cypress/e2e/RestaurantDetail.cy.ts
new file mode 100644
index 000000000..cae0785aa
--- /dev/null
+++ b/cypress/e2e/RestaurantDetail.cy.ts
@@ -0,0 +1,36 @@
+describe("음식점 상세 정보 테스트", () => {
+  beforeEach(() => {
+    cy.visit("/");
+    cy.get(".restaurant-list-container").children().first().click();
+    cy.get("#restaurant-detail-wrapper").should("have.class", "modal--open");
+  });
+
+  it("음식점 목록 중 하나의 음식점을 클릭하면, 해당 음식점 상세 정보를 보여주는 모달이 렌더링된다.", () => {
+    cy.get("div.restaurant-detail").should("contain", "도스타코스 선릉점");
+  });
+
+  it("음식점 상세 정보를 보여주는 모달에서 닫기 버튼을 클릭하면 모달이 사라진다.", () => {
+    cy.get("#detail-close-button").click();
+
+    cy.get("#restaurant-detail-wrapper").should("not.have.class", "modal--open");
+  });
+
+  it("음식점 상세 정보를 보여주는 모달에서 모달 영역 외부를 클릭하면 모달이 사라진다.", () => {
+    cy.get("#restaurant-detail-backdrop").click("top", {
+      force: true,
+    });
+
+    cy.get("#restaurant-detail-wrapper").should("not.have.class", "modal--open");
+  });
+
+  it("음식점 상세 정보를 보여주는 모달에서 삭제하기 버튼을 클릭하면 해당 음식점은 사라져야한다.", () => {
+    const EXPECTED_RESTAURANT_LENGTH = 5;
+
+    cy.get("#delete-button").click();
+
+    cy.get(".restaurant-list-container").children().should("have.length", EXPECTED_RESTAURANT_LENGTH);
+    cy.get("#restaurant-detail-wrapper").should("not.have.class", "modal--open");
+
+    cy.get(".restaurant-list-container").children().first().should("contain", "이태리키친");
+  });
+});

From 842dc6711f23172c62d5912f3b28dfbd7f23be38 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 21:53:31 +0900
Subject: [PATCH 35/70] =?UTF-8?q?refactor(OptionSelector):=20=ED=95=84?=
 =?UTF-8?q?=ED=84=B0=EB=A7=81,=20=EC=A0=95=EB=A0=AC=20=EC=98=B5=EC=85=98?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=84=B0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 유효한 필터링 옵션 타입에 전체 타입 추가
- 필터링, 정렬 옵션 select 태그 id 구분
---
 src/components/OptionSelector/index.ts | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/OptionSelector/index.ts b/src/components/OptionSelector/index.ts
index ce0b1bd77..9aeee9644 100644
--- a/src/components/OptionSelector/index.ts
+++ b/src/components/OptionSelector/index.ts
@@ -1,7 +1,6 @@
 import BaseComponent from "../BaseComponent";
 import { MENU_APP_EVENTS } from "../../constants/event";
-import { CATEGORIES } from "../../constants/menu";
-import { CategoryStringWithoutAll, SortOptionString } from "../../types/menu";
+import { CategoryString, SortOptionString } from "../../types/menu";
 import { isValidOption } from "../../utils/types";
 
 interface OptionDetail {
@@ -18,15 +17,12 @@ class OptionSelector extends BaseComponent {
   }
 
   private createOptionHTML(options: string[]) {
-    return options.reduce(
-      (accOptions, currOption) => accOptions + /*html*/ `<option value=${currOption}>${currOption}</option>;`,
-      ""
-    );
+    return options.reduce((accOptions, currOption) => accOptions + /*html*/ `<option value=${currOption}>${currOption}</option>;`, "");
   }
 
-  private isValidOptionType(value: string): value is CategoryStringWithoutAll | SortOptionString {
+  private isValidOptionType(value: string): value is CategoryString | SortOptionString {
     return (
-      isValidOption<CategoryStringWithoutAll>(["한식", "아시안", "일식", "중식", "양식", "기타"], value) ||
+      isValidOption<CategoryString>(["전체", "한식", "아시안", "일식", "중식", "양식", "기타"], value) ||
       isValidOption<SortOptionString>(["거리순", "이름순"], value)
     );
   }
@@ -43,11 +39,12 @@ class OptionSelector extends BaseComponent {
 
   render() {
     const options = this.getAttribute("options")!.split(",");
+    this.selectType = this.getAttribute("type");
 
     this.innerHTML = /*html*/ `
-      <select name="category" id="category-filter" class="restaurant-filter-select select-arrow-down arrow-down-black" aria-label="${
-        this.selectType
-      }-select">
+      <select name="category" id="${this.selectType}-option-select" class="restaurant-filter-select select-arrow-down arrow-down-black" aria-label="${
+      this.selectType
+    }-select">
         ${this.createOptionHTML(options)}
       </select> 
     `;

From f634e1cb629cc09009d99e6a31a19055084b8726 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 21:55:12 +0900
Subject: [PATCH 36/70] =?UTF-8?q?chore(RestaurantAddForm):=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EA=B0=9D=EC=B2=B4=EC=9D=98=20=EB=A9=94=EC=8B=9C?=
 =?UTF-8?q?=EC=A7=80=20=ED=94=84=EB=A1=9C=ED=8D=BC=ED=8B=B0=EB=A5=BC=20ale?=
 =?UTF-8?q?rt=20=ED=95=A8=EC=88=98=EB=A1=9C=20=EC=A0=84=EB=8B=AC=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RestaurantAddForm/index.ts | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/RestaurantAddForm/index.ts b/src/components/RestaurantAddForm/index.ts
index eddeb4013..c736634c8 100644
--- a/src/components/RestaurantAddForm/index.ts
+++ b/src/components/RestaurantAddForm/index.ts
@@ -28,14 +28,11 @@ class RestaurantAddForm extends BaseComponent {
             id="distance" 
             label="거리(도보 이동 시간)"
             values="${["", ...DISTANCES.map((v) => String(v))]}" 
-            options="${[
-              "선택해주세요",
-              ...DISTANCES.map((v) => `${v}분 내`),
-            ]}"></restaurant-option>
+            options="${["선택해주세요", ...DISTANCES.map((v) => `${v}분 내`)]}"></restaurant-option>
       
           <div class="form-item">
             <label for="description">설명</label>
-            <textarea name="description" id="description" cols="30" rows="5" maxlength="300"></textarea>
+            <textarea name="description" id="description" cols="30" rows="5"></textarea>
             <span class="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
             <p class="hidden" id="error-message">10글자 이하로 작성해주세요</p>
           </div>
@@ -55,13 +52,9 @@ class RestaurantAddForm extends BaseComponent {
     this.addFormElement = $<HTMLFormElement>("#restaurant-add-form");
   }
 
-  private isRestaurantItemType(
-    addingItem: object | undefined
-  ): addingItem is RestaurantAddItem {
+  private isRestaurantItemType(addingItem: object | undefined): addingItem is RestaurantAddItem {
     if (!addingItem) return false;
-    return Object.keys(addingItem).every((key) =>
-      ["name", "category", "distance", "description", "link"].includes(key)
-    );
+    return Object.keys(addingItem).every((key) => ["name", "category", "distance", "description", "link"].includes(key));
   }
 
   private resetFormData() {
@@ -92,7 +85,7 @@ class RestaurantAddForm extends BaseComponent {
         this.resetFormData();
       }
     } catch (error) {
-      error instanceof Error && alert(error);
+      error instanceof Error && alert(error.message);
     }
   }
 

From 05cbb0aa1936c6227f887e8db8290e7f5f946eed Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 21:55:49 +0900
Subject: [PATCH 37/70] =?UTF-8?q?chore(RestaurantDetail):=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=82=B4=EB=B6=80=20=EB=B2=84=ED=8A=BC=20type=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Restaurants/RestaurantDetail.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Restaurants/RestaurantDetail.ts b/src/components/Restaurants/RestaurantDetail.ts
index 84d49d9b8..2b36b0ccf 100644
--- a/src/components/Restaurants/RestaurantDetail.ts
+++ b/src/components/Restaurants/RestaurantDetail.ts
@@ -41,8 +41,8 @@ class RestaurantDetail extends BaseComponent {
         <div class="restaurant-detail">
           ${this.getDetailTemplate()}
           <div class="button-container">
-            <button type="reset" id="delete-button" class="button button--secondary text-caption">삭제하기</button>
-            <button type="submit" id="detail-close-button" class="button button--primary text-caption">닫기</button>
+            <button id="delete-button" class="button button--secondary text-caption">삭제하기</button>
+            <button id="detail-close-button" class="button button--primary text-caption">닫기</button>
           </div>
         </div>
       <div>

From 66606027ae6cf8f863c153f8255333ec6b601b4b Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 21:56:56 +0900
Subject: [PATCH 38/70] =?UTF-8?q?chore(constants):=20=EC=9D=8C=EC=8B=9D?=
 =?UTF-8?q?=EC=A0=90=20=EB=94=94=ED=8F=B4=ED=8A=B8=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=88=9C=EC=84=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/menu.ts | 43 +++++++++++++++++++++----------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/constants/menu.ts b/src/constants/menu.ts
index 6749261be..495b9247a 100644
--- a/src/constants/menu.ts
+++ b/src/constants/menu.ts
@@ -2,21 +2,19 @@ import { Distance, RestaurantItem } from "../types/menu";
 
 export const DEFAULT_DATA: RestaurantItem[] = [
   {
-    name: "피양콩 할마니",
-    category: "한식",
-    distance: 10,
+    name: "도스타코스 선릉점",
+    category: "기타",
+    distance: 5,
     isFavorite: false,
-    description:
-      "평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, ‘피양’은 평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다.",
+    description: "멕시칸 캐주얼 그릴",
     link: "",
   },
   {
-    name: "친친",
-    category: "중식",
-    distance: 5,
+    name: "이태리키친",
+    category: "양식",
+    distance: 20,
     isFavorite: false,
-    description:
-      "Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다",
+    description: "늘 변화를 추구하는 이태리키친입니다.",
     link: "",
   },
   {
@@ -29,27 +27,28 @@ export const DEFAULT_DATA: RestaurantItem[] = [
     link: "",
   },
   {
-    name: "이태리키친",
-    category: "양식",
-    distance: 20,
+    name: "친친",
+    category: "중식",
+    distance: 5,
     isFavorite: false,
-    description: "늘 변화를 추구하는 이태리키친입니다.",
+    description: "Since 2004 편리한 교통과 주차, 그리고 관록만큼 깊은 맛과 정성으로 정통 중식의 세계를 펼쳐갑니다",
     link: "",
   },
   {
-    name: "호아빈 삼성점",
-    category: "아시안",
-    distance: 15,
+    name: "피양콩 할마니",
+    category: "한식",
+    distance: 10,
     isFavorite: false,
-    description: "푸짐한 양에 국물이 일품인 쌀국수",
+    description:
+      "평양 출신의 할머니가 수십 년간 운영해온 비지 전문점 피양콩 할마니. 두부를 빼지 않은 되비지를 맛볼 수 있는 곳으로, ‘피양’은 평안도 사투리로 ‘평양’을 의미한다. 딸과 함께 운영하는 이곳에선 맷돌로 직접 간 콩만을 사용하며, 일체의 조미료를 넣지 않은 건강식을 선보인다. 콩비지와 피양 만두가 이곳의 대표 메뉴지만, 할머니가 옛날 방식을 고수하며 만들어내는 비지전골 또한 이 집의 역사를 느낄 수 있는 특별한 메뉴다. 반찬은 손님들이 먹고 싶은 만큼 덜어 먹을 수 있게 준비돼 있다.",
     link: "",
   },
   {
-    name: "도스타코스 선릉점",
-    category: "기타",
-    distance: 5,
+    name: "호아빈 삼성점",
+    category: "아시안",
+    distance: 15,
     isFavorite: false,
-    description: "멕시칸 캐주얼 그릴",
+    description: "푸짐한 양에 국물이 일품인 쌀국수",
     link: "",
   },
 ];

From 266038010580890865cc86c80d962dcbd5bcd0f7 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sun, 17 Mar 2024 21:59:02 +0900
Subject: [PATCH 39/70] =?UTF-8?q?chore(type):=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=9D=98=EC=A1=B4?=
 =?UTF-8?q?=EC=84=B1=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/menu.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/types/menu.ts b/src/types/menu.ts
index 265fb4e84..84326f2b1 100644
--- a/src/types/menu.ts
+++ b/src/types/menu.ts
@@ -1,11 +1,13 @@
-import { MENU_APP_EVENTS } from "../constants/event";
 import { CATEGORIES, RESTAURANT_TABS, SORT_TYPE } from "../constants/menu";
 
 export type Distance = 5 | 10 | 15 | 20 | 30;
 
 export type Category = keyof typeof CATEGORIES;
 export type CategoryString = (typeof CATEGORIES)[Category];
-export type CategoryStringWithoutAll = (typeof CATEGORIES)[Exclude<Category, "all">];
+export type CategoryStringWithoutAll = (typeof CATEGORIES)[Exclude<
+  Category,
+  "all"
+>];
 
 export type SortOption = keyof typeof SORT_TYPE;
 export type SortOptionString = (typeof SORT_TYPE)[SortOption];

From a695f129940092698a761a28f7a8fbd898e3acc2 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 00:17:18 +0900
Subject: [PATCH 40/70] =?UTF-8?q?chore(delete=20unused=20file):=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RestaurantAddForm/RestaurantNameInput.ts  | 59 -------------------
 src/validators/restaurantValidator.js         | 19 ------
 2 files changed, 78 deletions(-)
 delete mode 100644 src/components/RestaurantAddForm/RestaurantNameInput.ts
 delete mode 100644 src/validators/restaurantValidator.js

diff --git a/src/components/RestaurantAddForm/RestaurantNameInput.ts b/src/components/RestaurantAddForm/RestaurantNameInput.ts
deleted file mode 100644
index 77020a538..000000000
--- a/src/components/RestaurantAddForm/RestaurantNameInput.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import BaseComponent from "../BaseComponent";
-import { MENU_APP_EVENTS } from "../../constants/event";
-import { $ } from "../../utils/dom";
-import restaurantValidator from "../../validators/restaurantValidator";
-
-class RestaurantNameInput extends BaseComponent {
-  private errorMessageClassList: DOMTokenList | null = null;
-
-  constructor() {
-    super();
-  }
-
-  private isValidName(value: string) {
-    return restaurantValidator.isInRange(value, 0, 10);
-  }
-
-  private renderErrorMessage() {
-    this.errorMessageClassList!.remove("hidden");
-  }
-
-  private hideErrorMessage() {
-    this.errorMessageClassList!.add("hidden");
-  }
-
-  private handleErrorMessage(value: string) {
-    this.isValidName(value)
-      ? this.hideErrorMessage()
-      : this.renderErrorMessage();
-  }
-
-  render() {
-    this.innerHTML = /*html*/ `
-      <div class="form-item form-item--required" id="name-input">
-        <label for="name">이름</label>
-        <input type="text" name="name" id="name" class="text-caption">
-        <p class="hidden text-caption error-message" id="name-error-message">1글자 이상 10글자 이하로 작성해주세요</p>
-      </div>`;
-
-    this.errorMessageClassList = $("#name-error-message")!.classList;
-  }
-
-  setEvent() {
-    document.addEventListener(MENU_APP_EVENTS.restaurantFormSubmit, () => {
-      const inputElement = $("#name");
-
-      if (!(inputElement instanceof HTMLInputElement)) return;
-
-      this.handleErrorMessage(inputElement.value);
-    });
-
-    $("#name")!.addEventListener("focusout", (event: Event) => {
-      if (!(event.target instanceof HTMLInputElement)) return;
-
-      this.handleErrorMessage(event.target.value);
-    });
-  }
-}
-
-customElements.define("restaurant-name-input", RestaurantNameInput);
diff --git a/src/validators/restaurantValidator.js b/src/validators/restaurantValidator.js
deleted file mode 100644
index d66c42da8..000000000
--- a/src/validators/restaurantValidator.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const restaurantValidator = {
-  isValidLink(link) {
-    const regex =
-      /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(:[0-9]+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
-    return regex.test(link);
-  },
-
-  isInRange(value, min, max) {
-    const valueLength = value.length;
-
-    return valueLength <= max && valueLength > min;
-  },
-
-  isSelected(value) {
-    return value !== "";
-  },
-};
-
-export default restaurantValidator;

From b7852b827ba99ca67f4c47c6994def3312de4a9d Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 00:17:45 +0900
Subject: [PATCH 41/70] =?UTF-8?q?chore(change=20file=20name):=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=A6=84=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index b6ba18445..237bba4a1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ import "./components/Restaurants/RestaurantList";
 import "./components/Restaurants/RestaurantTab";
 import "./components/Restaurants/RestaurantTabContainer";
 import "./components/RestaurantAddForm/index";
-import "./components/RestaurantAddForm/RestaurantNameInput";
+import "./components/RestaurantAddForm/RestaurantTextInput";
 import "./components/RestaurantAddForm/RestaurantOption";
 import "./components/OptionSelector/OptionSelectorContainer";
 import "./components/OptionSelector/index";

From bcb84add7ea37afb27033286d86697637762fd30 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 00:18:43 +0900
Subject: [PATCH 42/70] =?UTF-8?q?refactor(RestaurantValidator):=20?=
 =?UTF-8?q?=EC=9D=8C=EC=8B=9D=EC=A0=90=20=EC=B6=94=EA=B0=80=20=ED=8F=BC=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=EA=B0=92=EC=97=90=20=EB=8C=80=ED=95=9C=20?=
 =?UTF-8?q?=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=A6=9D=20TS=EB=A1=9C?=
 =?UTF-8?q?=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/validators/restaurantValidator.ts | 32 +++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/validators/restaurantValidator.ts

diff --git a/src/validators/restaurantValidator.ts b/src/validators/restaurantValidator.ts
new file mode 100644
index 000000000..aeb42fe86
--- /dev/null
+++ b/src/validators/restaurantValidator.ts
@@ -0,0 +1,32 @@
+import { CATEGORIES, DISTANCES } from "../constants/menu";
+import { CategoryString, Distance } from "../types/menu";
+
+const restaurantValidator = {
+  isValidLink(link: string): boolean {
+    if (link === "") return true;
+
+    const regex =
+      /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(:[0-9]+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
+    return regex.test(link);
+  },
+
+  isValidCategory(category: string): boolean {
+    return Object.values(CATEGORIES).includes(category as CategoryString);
+  },
+
+  isValidDistance(distance: number): boolean {
+    return Object.values(DISTANCES).includes(Number(distance) as Distance);
+  },
+
+  isInRange(value: string, min: number, max: number): boolean {
+    const valueLength = value.length;
+
+    return valueLength <= max && valueLength > min;
+  },
+
+  isSelected(value: string): boolean {
+    return value !== "";
+  },
+};
+
+export default restaurantValidator;

From af74fab8e24c4491e7e59adc4feb94662642a29a Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 00:19:51 +0900
Subject: [PATCH 43/70] =?UTF-8?q?refactor(Restaurants):=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC,=20=EB=8F=84=EB=B3=B4=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99=20=EA=B1=B0=EB=A6=AC=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?=
 =?UTF-8?q?=EA=B2=80=EC=A6=9D=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domains/Restaurants.ts | 48 +++++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/domains/Restaurants.ts b/src/domains/Restaurants.ts
index 4d307bbd1..f430a63f6 100644
--- a/src/domains/Restaurants.ts
+++ b/src/domains/Restaurants.ts
@@ -1,5 +1,15 @@
-import { CATEGORIES, DEFAULT_DATA, ERROR_MESSAGES, SORT_TYPE } from "../constants/menu";
-import { CategoryString, RestaurantAddItem, RestaurantItem, SortOptionString } from "../types/menu";
+import {
+  CATEGORIES,
+  DEFAULT_DATA,
+  ERROR_MESSAGES,
+  SORT_TYPE,
+} from "../constants/menu";
+import {
+  CategoryString,
+  RestaurantAddItem,
+  RestaurantItem,
+  SortOptionString,
+} from "../types/menu";
 import restaurantValidator from "../validators/restaurantValidator";
 
 const RESTAURANT_KEY = "restaurants";
@@ -14,7 +24,9 @@ const getRestaurantFromStorage = () => {
 const isAlreadyExist = (newRestaurantName: string) => {
   const storedRestaurants = getRestaurantFromStorage();
 
-  return storedRestaurants.some(({ name }) => trimAllSpace(newRestaurantName) === trimAllSpace(name));
+  return storedRestaurants.some(
+    ({ name }) => trimAllSpace(newRestaurantName) === trimAllSpace(name)
+  );
 };
 
 const sortByName = (restaurants: RestaurantItem[]) => {
@@ -42,13 +54,13 @@ export const initRestaurantStorage = () => {
 export const validateRestaurantData = (restaurantInfo: RestaurantAddItem) => {
   const { name, category, distance, description, link } = restaurantInfo;
 
-  if (!restaurantValidator.isSelected(category)) {
+  if (!restaurantValidator.isValidCategory(category)) {
     throw new Error(ERROR_MESSAGES.invalidCategory);
   }
   if (!restaurantValidator.isInRange(name, 0, 10)) {
     throw new Error(ERROR_MESSAGES.invalidRestaurantName);
   }
-  if (!restaurantValidator.isSelected(distance)) {
+  if (!restaurantValidator.isValidDistance(distance)) {
     throw new Error(ERROR_MESSAGES.invalidDistance);
   }
   if (description && !restaurantValidator.isInRange(description, 0, 300)) {
@@ -62,9 +74,13 @@ export const validateRestaurantData = (restaurantInfo: RestaurantAddItem) => {
   }
 };
 
-export const findRestaurantByName = (restaurantName: string): RestaurantItem | null => {
+export const findRestaurantByName = (
+  restaurantName: string
+): RestaurantItem | null => {
   const storedRestaurants = getRestaurantFromStorage();
-  const foundRestaurant = storedRestaurants.find(({ name }) => name === restaurantName);
+  const foundRestaurant = storedRestaurants.find(
+    ({ name }) => name === restaurantName
+  );
 
   return foundRestaurant ? foundRestaurant : null;
 };
@@ -87,7 +103,9 @@ export const toggleFavoriteStateByName = (targetName: string) => {
 
 export const deleteRestaurantByName = (restaurantName: string): void => {
   const storedRestaurants = getRestaurantFromStorage();
-  const filteredRestaurants = storedRestaurants.filter(({ name }) => restaurantName !== name);
+  const filteredRestaurants = storedRestaurants.filter(
+    ({ name }) => restaurantName !== name
+  );
 
   localStorage.setItem(RESTAURANT_KEY, JSON.stringify(filteredRestaurants));
 };
@@ -104,7 +122,10 @@ export const add = (restaurantInfo: RestaurantAddItem) => {
 
   localStorage.setItem(
     RESTAURANT_KEY,
-    JSON.stringify([...storedRestaurants, { ...restaurantInfo, isFavorite: false }])
+    JSON.stringify([
+      ...storedRestaurants,
+      { ...restaurantInfo, isFavorite: false },
+    ])
   );
 
   return true;
@@ -118,8 +139,13 @@ export const filterByCategory = (category: CategoryString) => {
   return restaurants.filter((item) => item.category === category);
 };
 
-export const sortByType = (category: CategoryString, type: SortOptionString) => {
+export const sortByType = (
+  category: CategoryString,
+  type: SortOptionString
+) => {
   const filteredRestaurants = filterByCategory(category);
 
-  return type === SORT_TYPE.name ? sortByName(filteredRestaurants) : sortByDistance(filteredRestaurants);
+  return type === SORT_TYPE.name
+    ? sortByName(filteredRestaurants)
+    : sortByDistance(filteredRestaurants);
 };

From b14deddc67dd7adc07dbaf85953bf7f5a4817ba9 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 00:21:01 +0900
Subject: [PATCH 44/70] =?UTF-8?q?refactor(RestaurantAddForm):=20=EC=9D=8C?=
 =?UTF-8?q?=EC=8B=9D=EC=A0=90=20=EC=B6=94=EA=B0=80=20=ED=8F=BC=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=84=B0?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 이름, 참고 링크 입력 컴포넌트 재사용
- 입력값 추가 함수 동작 분리
---
 src/components/RestaurantAddForm/index.ts | 56 +++++++++++++++--------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/components/RestaurantAddForm/index.ts b/src/components/RestaurantAddForm/index.ts
index c736634c8..26be0c47e 100644
--- a/src/components/RestaurantAddForm/index.ts
+++ b/src/components/RestaurantAddForm/index.ts
@@ -1,9 +1,10 @@
 import BaseComponent from "../BaseComponent";
 import { MENU_APP_EVENTS } from "../../constants/event";
-import { CATEGORIES, DISTANCES } from "../../constants/menu";
+import { CATEGORIES, DISTANCES, ERROR_MESSAGES } from "../../constants/menu";
 import { RestaurantAddItem } from "../../types/menu";
 import { add } from "../../domains/Restaurants";
 import { $ } from "../../utils/dom";
+import { isRestaurantItemType } from "../../utils/types";
 
 class RestaurantAddForm extends BaseComponent {
   private addFormElement: HTMLFormElement | null = null;
@@ -23,12 +24,19 @@ class RestaurantAddForm extends BaseComponent {
             options="${["선택해주세요", ...Object.values(CATEGORIES)]}"
             values="${["", ...Object.values(CATEGORIES)]}" 
             ></restaurant-option>
-          <restaurant-name-input></restaurant-name-input>
+          <restaurant-text-input
+            label-text="이름"
+            input-type="name"
+            error-message="${ERROR_MESSAGES.invalidRestaurantName}"
+          ></restaurant-text-input>
           <restaurant-option 
             id="distance" 
             label="거리(도보 이동 시간)"
             values="${["", ...DISTANCES.map((v) => String(v))]}" 
-            options="${["선택해주세요", ...DISTANCES.map((v) => `${v}분 내`)]}"></restaurant-option>
+            options="${[
+              "선택해주세요",
+              ...DISTANCES.map((v) => `${v}분 내`),
+            ]}"></restaurant-option>
       
           <div class="form-item">
             <label for="description">설명</label>
@@ -36,11 +44,12 @@ class RestaurantAddForm extends BaseComponent {
             <span class="help-text text-caption">메뉴 등 추가 정보를 입력해 주세요.</span>
             <p class="hidden" id="error-message">10글자 이하로 작성해주세요</p>
           </div>
-          <div class="form-item">
-            <label for="link">참고 링크</label>
-            <input type="text" name="link" id="link">
-            <span class="help-text text-caption">매장 정보를 확인할 수 있는 링크를 입력해 주세요.</span>
-          </div>
+          <restaurant-text-input
+            label-text="참고 링크"
+            input-type="link"
+            error-message="${ERROR_MESSAGES.invalidLink}"
+            description="매장 정보를 확인할 수 있는 링크를 입력해 주세요."
+          ></restaurant-text-input>
           <div class="button-container">
             <button type="reset" id="reset-button" class="button button--secondary text-caption">취소하기</button>
             <button type="submit" class="button button--primary text-caption">추가하기</button>
@@ -52,14 +61,8 @@ class RestaurantAddForm extends BaseComponent {
     this.addFormElement = $<HTMLFormElement>("#restaurant-add-form");
   }
 
-  private isRestaurantItemType(addingItem: object | undefined): addingItem is RestaurantAddItem {
-    if (!addingItem) return false;
-    return Object.keys(addingItem).every((key) => ["name", "category", "distance", "description", "link"].includes(key));
-  }
-
   private resetFormData() {
-    const restaurantFormElement = $<HTMLFormElement>("#restaurant-add-form");
-    restaurantFormElement && restaurantFormElement.reset();
+    this.addFormElement && this.addFormElement.reset();
   }
 
   private getAddingItem() {
@@ -77,7 +80,7 @@ class RestaurantAddForm extends BaseComponent {
     return addItem;
   }
 
-  private handleAddFormSubmit(addingItem: RestaurantAddItem) {
+  private addFormItem(addingItem: RestaurantAddItem) {
     try {
       if (add(addingItem)) {
         this.emitEvent(MENU_APP_EVENTS.renderRestaurants);
@@ -89,13 +92,28 @@ class RestaurantAddForm extends BaseComponent {
     }
   }
 
+  private handleFormSubmit() {
+    const addItem = this.getAddingItem();
+
+    if (
+      addItem &&
+      isRestaurantItemType<RestaurantAddItem>(addItem, [
+        "name",
+        "category",
+        "distance",
+        "description",
+        "link",
+      ])
+    ) {
+      this.addFormItem(addItem);
+    }
+  }
+
   setEvent() {
     $("#restaurant-add-form")!.addEventListener("submit", (e) => {
       e.preventDefault();
       this.emitEvent(MENU_APP_EVENTS.restaurantFormSubmit);
-
-      const addItem = this.getAddingItem();
-      this.isRestaurantItemType(addItem) && this.handleAddFormSubmit(addItem);
+      this.handleFormSubmit();
     });
 
     $("#reset-button")!.addEventListener("click", () => {

From b4ca7334031174d8d85dc3e27b72b16c9f2dd6e7 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 00:21:46 +0900
Subject: [PATCH 45/70] =?UTF-8?q?refactor(ResturantOption):=20=EC=9D=8C?=
 =?UTF-8?q?=EC=8B=9D=EC=A0=90=20=EC=98=B5=EC=85=98=20=EC=84=A0=ED=83=9D=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=BB=A4=EC=8A=A4?=
 =?UTF-8?q?=ED=85=80=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=9D=B4=EB=A6=84=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RestaurantAddForm/RestaurantOption.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/RestaurantAddForm/RestaurantOption.ts b/src/components/RestaurantAddForm/RestaurantOption.ts
index 3d8924534..c5eadcaaf 100644
--- a/src/components/RestaurantAddForm/RestaurantOption.ts
+++ b/src/components/RestaurantAddForm/RestaurantOption.ts
@@ -1,6 +1,7 @@
 import BaseComponent from "../BaseComponent";
 import { $ } from "../../utils/dom";
 import restaurantValidator from "../../validators/restaurantValidator";
+import { MENU_APP_EVENTS } from "../../constants/event";
 
 class RestaurantOptions extends BaseComponent {
   private errorMessageClassList: DOMTokenList | null = null;
@@ -57,7 +58,7 @@ class RestaurantOptions extends BaseComponent {
   }
 
   setEvent() {
-    document.addEventListener("add-form-submit", () => {
+    document.addEventListener(MENU_APP_EVENTS.restaurantFormSubmit, () => {
       this.handleErrorMessage();
     });
   }

From eaf0992d50a0ca7b5231d6df04b5cddf3bec207f Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 00:22:08 +0900
Subject: [PATCH 46/70] =?UTF-8?q?feat(RestaurantTextInput):=20=EC=9E=AC?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=20=EA=B0=80=EB=8A=A5=ED=95=9C=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RestaurantAddForm/RestaurantTextInput.ts  | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 src/components/RestaurantAddForm/RestaurantTextInput.ts

diff --git a/src/components/RestaurantAddForm/RestaurantTextInput.ts b/src/components/RestaurantAddForm/RestaurantTextInput.ts
new file mode 100644
index 000000000..b79028c6b
--- /dev/null
+++ b/src/components/RestaurantAddForm/RestaurantTextInput.ts
@@ -0,0 +1,87 @@
+import BaseComponent from "../BaseComponent";
+import { MENU_APP_EVENTS } from "../../constants/event";
+import { $ } from "../../utils/dom";
+import restaurantValidator from "../../validators/restaurantValidator";
+
+interface InputValidator {
+  name: (value: string) => boolean;
+  link: (value: string) => boolean;
+}
+
+type TextInput = keyof InputValidator;
+
+class RestaurantTextInput extends BaseComponent {
+  private errorMessageClassList: DOMTokenList | null = null;
+
+  private inputValidator: InputValidator = {
+    name: this.isValidName.bind(this),
+    link: restaurantValidator.isValidLink.bind(this),
+  };
+
+  constructor() {
+    super();
+  }
+
+  private isValidName(value: string) {
+    return restaurantValidator.isInRange(value, 0, 10);
+  }
+
+  private showErrorMessage() {
+    this.errorMessageClassList!.remove("hidden");
+  }
+
+  private hideErrorMessage() {
+    this.errorMessageClassList!.add("hidden");
+  }
+
+  private isValidTextType(value: string): value is TextInput {
+    return ["name", "link"].includes(value);
+  }
+
+  private handleErrorMessage(value: string) {
+    const inputType = this.getAttribute("input-type") ?? "";
+    if (!this.isValidTextType(inputType)) return;
+
+    const validator = this.inputValidator[inputType];
+    validator(value) ? this.hideErrorMessage() : this.showErrorMessage();
+  }
+
+  render() {
+    const labelText = this.getAttribute("label-text") ?? "";
+    const inputType = this.getAttribute("input-type") ?? "";
+    const errorMessage = this.getAttribute("error-message") ?? "";
+    const description = this.getAttribute("description") ?? "";
+
+    this.innerHTML = /*html*/ `
+      <div class="form-item form-item--required">
+        <label for="${inputType}-input">${labelText}</label>
+        <input type="text" name="${inputType}" id="${inputType}-input" class="text-caption">
+        ${
+          description &&
+          `<span class="help-text text-caption">${description}</span>`
+        }
+        <p class="hidden text-caption error-message" id="${inputType}-error-message">${errorMessage}</p>
+      </div>`;
+
+    this.errorMessageClassList = $(`#${inputType}-error-message`)!.classList;
+  }
+
+  setEvent() {
+    document.addEventListener(MENU_APP_EVENTS.restaurantFormSubmit, () => {
+      const inputType = this.getAttribute("input-type") ?? "";
+      const inputElement = $<HTMLInputElement>(`#${inputType}-input`);
+      if (!(inputElement instanceof HTMLInputElement)) return;
+
+      this.handleErrorMessage(inputElement.value);
+    });
+
+    const inputType = this.getAttribute("input-type") ?? "";
+    $(`#${inputType}-input`)!.addEventListener("focusout", (event: Event) => {
+      if (!(event.target instanceof HTMLInputElement)) return;
+
+      this.handleErrorMessage(event.target.value);
+    });
+  }
+}
+
+customElements.define("restaurant-text-input", RestaurantTextInput);

From d73df872b32a71ea541db14d36590dd0d0475eee Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 00:25:23 +0900
Subject: [PATCH 47/70] =?UTF-8?q?test(RestaurantAddTest):=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EB=90=9C=20id=20=EC=9D=B4=EB=A6=84=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/ResturantAddTest.cy.ts | 63 +++++++++++++++++-------------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/cypress/e2e/ResturantAddTest.cy.ts b/cypress/e2e/ResturantAddTest.cy.ts
index 1c95298eb..1d54b9500 100644
--- a/cypress/e2e/ResturantAddTest.cy.ts
+++ b/cypress/e2e/ResturantAddTest.cy.ts
@@ -14,7 +14,8 @@ const VALID_TEST_DATA = [
     category: "아시안",
     distance: 10,
     isFavorite: false,
-    description: "브리튀시 숏헤어 김시루가 운영하는 식당. 까칠한 고양이 사장님이지만, 맛은 보장된다. 🐈‍⬛",
+    description:
+      "브리튀시 숏헤어 김시루가 운영하는 식당. 까칠한 고양이 사장님이지만, 맛은 보장된다. 🐈‍⬛",
     link: "",
   },
   {
@@ -22,7 +23,8 @@ const VALID_TEST_DATA = [
     category: "일식",
     distance: 15,
     isFavorite: false,
-    description: "우아한테크코스 6기 FE 해리가 운영하는 식당. 선릉 캠퍼스와 매우 까우며, 맛집으로 유명하다.",
+    description:
+      "우아한테크코스 6기 FE 해리가 운영하는 식당. 선릉 캠퍼스와 매우 까우며, 맛집으로 유명하다.",
     link: "https://github.com/hwinkr",
   },
   {
@@ -30,7 +32,8 @@ const VALID_TEST_DATA = [
     category: "중식",
     distance: 20,
     isFavorite: false,
-    description: "우아한테크코스 웹 프론트엔드 리뷰어 하루가 운영하는 식당. 사장님의 리뷰가 정말 좋은 것으로 유명하다. 😊",
+    description:
+      "우아한테크코스 웹 프론트엔드 리뷰어 하루가 운영하는 식당. 사장님의 리뷰가 정말 좋은 것으로 유명하다. 😊",
     link: "",
   },
   {
@@ -103,26 +106,28 @@ describe("새로운 음식점 추가 테스트", () => {
   });
 
   it("식당 입력값이 유효할 경우, 음식점 목록의 가장 마지막에 추가된다.", () => {
-    VALID_TEST_DATA.forEach(({ name, category, distance, description, link }) => {
-      cy.get(".gnb__button").click();
-
-      cy.get("select#category-select").select(category);
-      cy.get("input#name").type(name);
-      cy.get("select#distance-select").select(String(distance));
-      description && cy.get("textarea#description").type(description);
-      link && cy.get("input#link").type(link);
-
-      cy.get("#restaurant-add-form").submit();
-
-      cy.get(".restaurant-list-container")
-        .children()
-        .last()
-        .should("have.attr", "name", name)
-        .and("have.attr", "category", category)
-        .and("have.attr", "distance", distance)
-        .and("have.attr", "description", description)
-        .and("have.attr", "is-favorite", "false");
-    });
+    VALID_TEST_DATA.forEach(
+      ({ name, category, distance, description, link }) => {
+        cy.get(".gnb__button").click();
+
+        cy.get("select#category-select").select(category);
+        cy.get("input#name-input").type(name);
+        cy.get("select#distance-select").select(String(distance));
+        description && cy.get("textarea#description").type(description);
+        link && cy.get("input#link-input").type(link);
+
+        cy.get("#restaurant-add-form").submit();
+
+        cy.get(".restaurant-list-container")
+          .children()
+          .last()
+          .should("have.attr", "name", name)
+          .and("have.attr", "category", category)
+          .and("have.attr", "distance", distance)
+          .and("have.attr", "description", description)
+          .and("have.attr", "is-favorite", "false");
+      }
+    );
   });
 
   it("새로고침을 해도 새로 추가한 음식점 정보가 유지된다.", () => {
@@ -132,16 +137,18 @@ describe("새로운 음식점 추가 테스트", () => {
     cy.get(".gnb__button").click();
 
     cy.get("select#category-select").select(category);
-    cy.get("input#name").type(name);
+    cy.get("input#name-input").type(name);
     cy.get("select#distance-select").select(String(distance));
     description && cy.get("textarea#description").type(description);
-    link && cy.get("input#link").type(link);
+    link && cy.get("input#link-input").type(link);
 
     cy.get("#restaurant-add-form").submit();
 
     cy.reload();
 
-    cy.get(".restaurant-list-container").children().should("have.length", EXPECTED_RESTAURANT_LENGTH);
+    cy.get(".restaurant-list-container")
+      .children()
+      .should("have.length", EXPECTED_RESTAURANT_LENGTH);
 
     cy.get(".restaurant-list-container")
       .children()
@@ -160,10 +167,10 @@ describe("새로운 음식점 추가 테스트", () => {
       cy.get(".gnb__button").click();
 
       category && cy.get("select#category-select").select(category);
-      name && cy.get("input#name").type(name);
+      name && cy.get("input#name-input").type(name);
       distance && cy.get("select#distance-select").select(String(distance));
       description && cy.get("textarea#description").type(description);
-      link && cy.get("input#link").type(link);
+      link && cy.get("input#link-input").type(link);
 
       const alertStub = cy.stub();
       cy.on("window:alert", alertStub);

From 309dcca5b61d0a55b21d1b920603e367f248ee27 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 10:40:12 +0900
Subject: [PATCH 48/70] =?UTF-8?q?feat(text=20utils):=20=EB=AC=B8=EC=9E=90?=
 =?UTF-8?q?=EC=97=B4=20=EC=82=AC=EC=9D=B4=EC=9D=98=20=EB=AA=A8=EB=93=A0=20?=
 =?UTF-8?q?=EA=B3=B5=EB=B0=B1=EC=9D=84=20=EC=A0=9C=EA=B1=B0=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EC=9C=A0=ED=8B=B8=20=ED=95=A8=EC=88=98=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/format-text.ts | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/utils/format-text.ts

diff --git a/src/utils/format-text.ts b/src/utils/format-text.ts
new file mode 100644
index 000000000..0ee4fa9fc
--- /dev/null
+++ b/src/utils/format-text.ts
@@ -0,0 +1,3 @@
+export const trimAllSpace = (str: string): string => {
+  return str.replaceAll(" ", "");
+};

From fb86be636bfd1546f8f250f0672dcb64784e042c Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 10:40:31 +0900
Subject: [PATCH 49/70] =?UTF-8?q?chore(change=20method=20name):=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=EC=9D=84=20=EC=97=AC=EB=8A=94=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=EC=9D=B8=EC=A7=80=20=ED=99=95=EC=9D=B8?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=A9=94=EC=84=9C=EB=93=9C=20=EB=84=A4?=
 =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/index.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index 7d11abab5..8285548d3 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -37,19 +37,22 @@ class Modal extends BaseComponent {
     this.innerHTML = this.getModalTemplate();
   }
 
-  checkEventType(type: string): type is MenuAppEvent {
+  isModalOpenEvent(type: string): type is MenuAppEvent {
     return ["open-add-form", "open-restaurant-detail"].includes(type);
   }
 
   setEvent() {
-    $<HTMLDivElement>(`#${this.modalId}-backdrop`)!.addEventListener("click", (event) => {
-      if (event.target === event.currentTarget) {
-        this.hideModal();
+    $<HTMLDivElement>(`#${this.modalId}-backdrop`)!.addEventListener(
+      "click",
+      (event) => {
+        if (event.target === event.currentTarget) {
+          this.hideModal();
+        }
       }
-    });
+    );
 
     const openType = this.getAttribute("open-type") ?? "";
-    this.checkEventType(openType) &&
+    this.isModalOpenEvent(openType) &&
       document.addEventListener(openType, () => {
         this.showModal();
       });

From c73d982375a95707a28b209d79bd7753b5095ea6 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 10:41:05 +0900
Subject: [PATCH 50/70] =?UTF-8?q?chore(RestaurantAddForm):=20restaurant-op?=
 =?UTF-8?q?tion=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20?=
 =?UTF-8?q?=EC=A0=84=EB=8B=AC=ED=95=98=EB=8A=94=20=EC=96=B4=ED=8A=B8?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=ED=8A=B8=20=EC=88=9C=EC=84=9C=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RestaurantAddForm/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RestaurantAddForm/index.ts b/src/components/RestaurantAddForm/index.ts
index 26be0c47e..9215a7654 100644
--- a/src/components/RestaurantAddForm/index.ts
+++ b/src/components/RestaurantAddForm/index.ts
@@ -21,8 +21,8 @@ class RestaurantAddForm extends BaseComponent {
           <restaurant-option 
             id="category" 
             label="카테고리"
-            options="${["선택해주세요", ...Object.values(CATEGORIES)]}"
             values="${["", ...Object.values(CATEGORIES)]}" 
+            options="${["선택해주세요", ...Object.values(CATEGORIES)]}"
             ></restaurant-option>
           <restaurant-text-input
             label-text="이름"

From cd60e5fd9213804d4c4e9489bb6a59772f5f528d Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Mon, 18 Mar 2024 10:41:58 +0900
Subject: [PATCH 51/70] =?UTF-8?q?chore(add=20dependency):=20=EB=AC=B8?=
 =?UTF-8?q?=EC=9E=90=EC=97=B4=20=EC=82=AC=EC=9D=B4=20=EB=AA=A8=EB=93=A0=20?=
 =?UTF-8?q?=EA=B3=B5=EB=B0=B1=EC=9D=84=20=EC=A0=9C=EA=B1=B0=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=20=EC=9D=98=EC=A1=B4=EC=84=B1=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/domains/Restaurants.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/domains/Restaurants.ts b/src/domains/Restaurants.ts
index f430a63f6..69549e475 100644
--- a/src/domains/Restaurants.ts
+++ b/src/domains/Restaurants.ts
@@ -10,6 +10,7 @@ import {
   RestaurantItem,
   SortOptionString,
 } from "../types/menu";
+import { trimAllSpace } from "../utils/format-text";
 import restaurantValidator from "../validators/restaurantValidator";
 
 const RESTAURANT_KEY = "restaurants";
@@ -37,10 +38,6 @@ const sortByDistance = (restaurants: RestaurantItem[]) => {
   return [...restaurants.sort((a, b) => a.distance - b.distance)];
 };
 
-const trimAllSpace = (str: string): string => {
-  return str.replaceAll(" ", "");
-};
-
 export const initRestaurantStorage = () => {
   if (getRestaurantFromStorage().length > 0) {
     return;

From 97ceeea5873ac80e2c35d8b05256e7e0715d2267 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 13:07:01 +0900
Subject: [PATCH 52/70] =?UTF-8?q?chore(change=20file=20name):=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=EC=9D=B4=EB=A6=84=20=EC=98=A4=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OptionSelectorContainer.ts}                                   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{OptionSelector/OPtionSelectorContainer.ts => FavoriteIcon/OptionSelectorContainer.ts} (100%)

diff --git a/src/components/OptionSelector/OPtionSelectorContainer.ts b/src/components/FavoriteIcon/OptionSelectorContainer.ts
similarity index 100%
rename from src/components/OptionSelector/OPtionSelectorContainer.ts
rename to src/components/FavoriteIcon/OptionSelectorContainer.ts

From e58c478293e695b78d417df3220b849f3f973ce7 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 13:08:05 +0900
Subject: [PATCH 53/70] =?UTF-8?q?change(change=20directory):=20OptionSelec?=
 =?UTF-8?q?torContainer=20=ED=8C=8C=EC=9D=BC=20=EA=B2=BD=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{FavoriteIcon => OptionSelector}/OptionSelectorContainer.ts   | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{FavoriteIcon => OptionSelector}/OptionSelectorContainer.ts (100%)

diff --git a/src/components/FavoriteIcon/OptionSelectorContainer.ts b/src/components/OptionSelector/OptionSelectorContainer.ts
similarity index 100%
rename from src/components/FavoriteIcon/OptionSelectorContainer.ts
rename to src/components/OptionSelector/OptionSelectorContainer.ts

From 7501413c6ebb16018b3a277161a9ecb65664bb17 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 20:58:38 +0900
Subject: [PATCH 54/70] =?UTF-8?q?refactor(dom=20utils):=20type=20asseriton?=
 =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/dom.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index acd2619c8..a8a4a1275 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -1,3 +1,3 @@
 export const $ = <E extends Element>(selector: string, baseElement: E | Document = document): E | null => {
-  return baseElement.querySelector(selector) as E;
+  return baseElement.querySelector(selector);
 };

From 3fb961a775082cef075a9eed303037ad0f15c7f5 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:00:01 +0900
Subject: [PATCH 55/70] =?UTF-8?q?refactor(type=20utils):=20=EC=97=AC?=
 =?UTF-8?q?=EB=9F=AC=20=EC=83=81=ED=99=A9=EC=97=90=EC=84=9C=20=EB=B2=94?=
 =?UTF-8?q?=EC=9A=A9=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/types.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/types.ts b/src/utils/types.ts
index c32d56eb0..f45c65a80 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,7 +1,7 @@
-export const isRestaurantItemType = <T extends object>(item: object, candidates: string[]): item is T => {
+export const isObjectWithKeys = <T extends object>(item: object, candidates: string[]): item is T => {
   return Object.keys(item).every((key) => candidates.includes(key));
 };
 
-export const isValidOption = <T extends string>(options: T[], value: string): value is T => {
-  return options.includes(value as T);
+export const isArrayElement = <T extends string>(options: string[], target: string): target is T => {
+  return options.includes(target);
 };

From c3612a2c3b1c857c7d5635bb1ae87bbdeefafc1d Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:03:00 +0900
Subject: [PATCH 56/70] =?UTF-8?q?test(RestaurantDetail):=20=EC=9D=8C?=
 =?UTF-8?q?=EC=8B=9D=EC=A0=90=20=EC=83=81=EC=84=B8=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 첫 번째 음식점 클릭시 모달이 렌더링 된다는 제목으로 테스트 케이스 수정
- 모든 음식점을 삭제할 경우 디폴트 데이터가 렌더링 되는지 테스트 추가
---
 cypress/e2e/RestaurantDetail.cy.ts | 79 +++++++++++++++++++++++++-----
 1 file changed, 68 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/RestaurantDetail.cy.ts b/cypress/e2e/RestaurantDetail.cy.ts
index cae0785aa..f3869b38b 100644
--- a/cypress/e2e/RestaurantDetail.cy.ts
+++ b/cypress/e2e/RestaurantDetail.cy.ts
@@ -1,36 +1,93 @@
+// 디폴트 데이터가 수정되어도
+
+// - 음식점 목록 중 하나의 음식점을 클릭하면, 해당 음식점 상세 정보를 보여주는 모달이 렌더링된다
+
+// 해당 테스트가 통과될 수 있도록 한다.
+
 describe("음식점 상세 정보 테스트", () => {
   beforeEach(() => {
     cy.visit("/");
+  });
+
+  it("음식점 목록 중 첫번째 음식점을 클릭하면, 해당 음식점 상세 정보를 보여주는 모달이 렌더링된다.", () => {
     cy.get(".restaurant-list-container").children().first().click();
+
     cy.get("#restaurant-detail-wrapper").should("have.class", "modal--open");
-  });
 
-  it("음식점 목록 중 하나의 음식점을 클릭하면, 해당 음식점 상세 정보를 보여주는 모달이 렌더링된다.", () => {
-    cy.get("div.restaurant-detail").should("contain", "도스타코스 선릉점");
+    cy.get("div.restaurant-detail")
+      .children()
+      .first()
+      .should("have.class", "restaurant__info");
   });
 
   it("음식점 상세 정보를 보여주는 모달에서 닫기 버튼을 클릭하면 모달이 사라진다.", () => {
+    cy.get(".restaurant-list-container").children().first().click();
+
     cy.get("#detail-close-button").click();
 
-    cy.get("#restaurant-detail-wrapper").should("not.have.class", "modal--open");
+    cy.get("#restaurant-detail-wrapper").should(
+      "not.have.class",
+      "modal--open"
+    );
   });
 
   it("음식점 상세 정보를 보여주는 모달에서 모달 영역 외부를 클릭하면 모달이 사라진다.", () => {
+    cy.get(".restaurant-list-container").children().first().click();
+
     cy.get("#restaurant-detail-backdrop").click("top", {
       force: true,
     });
 
-    cy.get("#restaurant-detail-wrapper").should("not.have.class", "modal--open");
+    cy.get("#restaurant-detail-wrapper").should(
+      "not.have.class",
+      "modal--open"
+    );
   });
 
-  it("음식점 상세 정보를 보여주는 모달에서 삭제하기 버튼을 클릭하면 해당 음식점은 사라져야한다.", () => {
-    const EXPECTED_RESTAURANT_LENGTH = 5;
+  it("첫번째 음식점 상세 정보를 보여주는 모달에서 삭제하기 버튼을 클릭하면 해당 음식점은 사라져야한다.", () => {
+    cy.get(".restaurant-list-container")
+      .children()
+      .then((children) => {
+        const childLength = children.length;
+
+        cy.get(".restaurant-list-container").children().first().click();
+
+        cy.get("#delete-button").click();
+
+        cy.get(".restaurant-list-container")
+          .children()
+          .should("have.length", childLength - 1);
+
+        cy.get("#restaurant-detail-wrapper").should(
+          "not.have.class",
+          "modal--open"
+        );
+      });
+  });
+
+  it("사용자가 모든 음식점을 삭제하고, 새로고침할 경우 디폴트 데이터가 다시 보여진다.", () => {
+    const DEFAULT_RESTAURANT_LENGTH = 6;
+    const EMPTY_RESTAURANT_LENGTH = 0;
+
+    cy.get(".restaurant-list-container")
+      .children()
+      .then((children) => {
+        const childLength = children.length;
+        console.log(childLength);
+        Array.from({ length: childLength }, () => {
+          cy.get(".restaurant-list-container").children().first().click();
+          cy.get("#delete-button").click();
+        });
+      });
 
-    cy.get("#delete-button").click();
+    cy.get(".restaurant-list-container")
+      .children()
+      .should("have.length", EMPTY_RESTAURANT_LENGTH);
 
-    cy.get(".restaurant-list-container").children().should("have.length", EXPECTED_RESTAURANT_LENGTH);
-    cy.get("#restaurant-detail-wrapper").should("not.have.class", "modal--open");
+    cy.reload();
 
-    cy.get(".restaurant-list-container").children().first().should("contain", "이태리키친");
+    cy.get(".restaurant-list-container")
+      .children()
+      .should("have.length", DEFAULT_RESTAURANT_LENGTH);
   });
 });

From 2f2cf84c539e72ae394cf12c05e871c19f68198c Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:04:08 +0900
Subject: [PATCH 57/70] =?UTF-8?q?test(RestaurantList):=20=EC=9D=8C?=
 =?UTF-8?q?=EC=8B=9D=EC=A0=90=20=EB=AA=A9=EB=A1=9D=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 처음 방문할 경우 디폴트 데이터가 이름순으로 정렬되어있는지 테스트 추가
---
 cypress/e2e/RestaurantList.cy.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/RestaurantList.cy.ts b/cypress/e2e/RestaurantList.cy.ts
index 73716da36..26295e526 100644
--- a/cypress/e2e/RestaurantList.cy.ts
+++ b/cypress/e2e/RestaurantList.cy.ts
@@ -36,6 +36,16 @@ describe("음식점 목록 테스트", () => {
     cy.get(".restaurant-list-container").children().should("have.length", EXPECTED_RESTAURANT_LENGTH);
   });
 
+  it("사용자가 처음 방문할 경우 기본 제공 음식점 목록이 이름순으로 정렬된 상태로 보여진다", () => {
+    const EXPECTED_NAME_SEQUENCE = ["도스타코스 선릉점", "이태리키친", "잇쇼우", "친친", "피양콩 할마니", "호아빈 삼성점"];
+
+    cy.get(".restaurant-list-container")
+      .children()
+      .each((element, index) => {
+        cy.wrap(element.attr("name")).should("equal", EXPECTED_NAME_SEQUENCE[index]);
+      });
+  });
+
   it("사용자가 선택한 카테고리에 맞는 음식점 목록이 보여져야 한다.", () => {
     FILTERING_TEST_DATA.forEach(({ category, expectedRestaurantName }) => {
       const FILTERED_RESTAURANT_LIST = 1;
@@ -51,7 +61,7 @@ describe("음식점 목록 테스트", () => {
     cy.get(".restaurant-list-container").children().should("have.length", EXPECTED_RESTAURANT_LENGTH);
   });
 
-  it("사용자가 이름순 정렬 옵션을 선택할 경우, 이름순으로 목록이 정렬된다", () => {
+  it("사용자가 거리순 정렬 옵션을 선택할 경우, 거리순으로 목록이 정렬된다", () => {
     const EXPECTED_NAME_SEQUENCE = ["도스타코스 선릉점", "친친", "잇쇼우", "피양콩 할마니", "호아빈 삼성점", "이태리키친"];
 
     cy.get("select#sort-option-select").select("거리순");
@@ -63,7 +73,7 @@ describe("음식점 목록 테스트", () => {
       });
   });
 
-  it("사용자가 거리순 정렬 옵션을 선택할 경우, 거리순으로 음식점 목록이 정렬된다", () => {
+  it("사용자가 이름순 정렬 옵션을 선택할 경우, 이름순으로 음식점 목록이 정렬된다", () => {
     const EXPECTED_NAME_SEQUENCE = ["도스타코스 선릉점", "이태리키친", "잇쇼우", "친친", "피양콩 할마니", "호아빈 삼성점"];
 
     cy.get("select#sort-option-select").select("이름순");

From 323add75c8b20546a15d6ec2f84ee6a8c1ac660a Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:04:50 +0900
Subject: [PATCH 58/70] =?UTF-8?q?test(RestaurantAddTest):=20=EC=9C=A0?=
 =?UTF-8?q?=ED=9A=A8=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=83=81?=
 =?UTF-8?q?=ED=99=A9=EC=9D=84=20=EC=A3=BC=EC=84=9D=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/ResturantAddTest.cy.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/cypress/e2e/ResturantAddTest.cy.ts b/cypress/e2e/ResturantAddTest.cy.ts
index 1d54b9500..bd2848c74 100644
--- a/cypress/e2e/ResturantAddTest.cy.ts
+++ b/cypress/e2e/ResturantAddTest.cy.ts
@@ -55,7 +55,7 @@ export const INVALID_TEST_DATA = [
       description: "",
       link: "",
     },
-    errorMessage: ERROR_MESSAGES.invalidCategory,
+    errorMessage: ERROR_MESSAGES.invalidCategory, // 카테고리 입력 누락
   },
   {
     invalidData: {
@@ -65,17 +65,17 @@ export const INVALID_TEST_DATA = [
       description: "",
       link: "",
     },
-    errorMessage: ERROR_MESSAGES.invalidRestaurantName,
+    errorMessage: ERROR_MESSAGES.invalidRestaurantName, // 식당 이름 입력 누락
   },
   {
     invalidData: {
-      name: "점심뭐먹을지고민하지마세요",
+      name: "오늘점심은과연무엇일까",
       category: "일식",
       distance: 10,
       description: "",
       link: "",
     },
-    errorMessage: ERROR_MESSAGES.invalidRestaurantName,
+    errorMessage: ERROR_MESSAGES.invalidRestaurantName, // 식당 이름 길이 제한(10) 초과
   },
   {
     invalidData: {
@@ -85,7 +85,7 @@ export const INVALID_TEST_DATA = [
       description: "",
       link: "",
     },
-    errorMessage: ERROR_MESSAGES.invalidDistance,
+    errorMessage: ERROR_MESSAGES.invalidDistance, // 거리(도보 이동 시간) 입력 누락
   },
   {
     invalidData: {
@@ -93,10 +93,10 @@ export const INVALID_TEST_DATA = [
       category: "양식",
       distance: 5,
       description:
-        "멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴",
+        "그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그릴멕시칸 캐주얼 그",
       link: "",
     },
-    errorMessage: ERROR_MESSAGES.invalidDescriptionLength,
+    errorMessage: ERROR_MESSAGES.invalidDescriptionLength, // 식당 설명 입력 길이 제한(300) 초과
   },
 ];
 

From 8ec47cf17307b1adf27867d7efe63e3b153b05dd Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:08:19 +0900
Subject: [PATCH 59/70] =?UTF-8?q?refactor(CategoryImage):=20=EC=B6=94?=
 =?UTF-8?q?=EC=83=81=ED=99=94=20=EB=90=9C=20=ED=83=80=EC=9E=85=20=EA=B0=80?=
 =?UTF-8?q?=EB=93=9C=20=ED=95=A8=EC=88=98=EB=A5=BC=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B2=83=EC=9C=BC=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CategoryImage/index.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/CategoryImage/index.ts b/src/components/CategoryImage/index.ts
index 03039ca6e..29894941f 100644
--- a/src/components/CategoryImage/index.ts
+++ b/src/components/CategoryImage/index.ts
@@ -9,12 +9,9 @@ import {
   categoryWestern,
   categoryEtc,
 } from "../../assets";
+import { isArrayElement } from "../../utils/types";
 
 class CategoryImage extends BaseComponent {
-  private isCategoryType(category: string): category is CategoryStringWithoutAll {
-    return ["한식", "아시안", "일식", "중식", "양식", "기타"].includes(category);
-  }
-
   private categoryToImg(category: CategoryStringWithoutAll) {
     if (!category) return;
 
@@ -38,7 +35,13 @@ class CategoryImage extends BaseComponent {
 
   render() {
     const category = this.getAttribute("category") ?? "";
-    if (!this.isCategoryType(category)) return;
+    if (
+      !isArrayElement<CategoryStringWithoutAll>(
+        Object.values(CATEGORIES),
+        category
+      )
+    )
+      return;
 
     const categoryImage = this.categoryToImg(category);
     this.innerHTML = /*html*/ `

From 17691a0b8e5b3163e40bbf33aee6b39a5d7d2b0b Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:08:45 +0900
Subject: [PATCH 60/70] =?UTF-8?q?refactor(MenuApp):=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?=
 =?UTF-8?q?=EC=96=B4=ED=8A=B8=EB=A6=AC=EB=B7=B0=ED=8A=B8=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MenuApp.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/MenuApp.ts b/src/components/MenuApp.ts
index 84eefc30f..2aed2ce76 100644
--- a/src/components/MenuApp.ts
+++ b/src/components/MenuApp.ts
@@ -1,5 +1,4 @@
 import BaseComponent from "./BaseComponent";
-import { MENU_APP_EVENTS } from "../constants/event";
 import { initRestaurantStorage } from "../domains/Restaurants";
 
 class MenuApp extends BaseComponent {
@@ -17,12 +16,10 @@ class MenuApp extends BaseComponent {
         <restaurant-list></restaurant-list>
       </main>
       <modal-wrapper 
-        open-type=${MENU_APP_EVENTS.openAddForm} 
         id='add-form'>
         <restaurant-add-form></restaurant-add-form>
       </modal-wrapper>
       <modal-wrapper 
-        open-type=${MENU_APP_EVENTS.openRestaurantDetail} 
         id="restaurant-detail" >
         <restaurant-detail></restaurant-detail>
       </modal-wrapper>

From 42d0917ee5ec635b6653db2569b466d4b1e230a4 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:09:28 +0900
Subject: [PATCH 61/70] =?UTF-8?q?refactor(Modal):=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=EB=B6=80?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20id=20=EC=96=B4=ED=8A=B8=EB=A6=AC=EB=B7=B0?=
 =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=EB=A5=BC=20=EA=B2=B0=EC=A0=95?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B2=83=EC=9C=BC=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/index.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index 8285548d3..d74eac770 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -3,6 +3,14 @@ import { MENU_APP_EVENTS } from "../../constants/event";
 
 import { $ } from "../../utils/dom";
 import { MenuAppEvent } from "../../types/event";
+import { isArrayElement } from "../../utils/types";
+
+const idToModalEventConvertor = {
+  "add-form": MENU_APP_EVENTS.openAddForm,
+  "restaurant-detail": MENU_APP_EVENTS.openRestaurantDetail,
+} as const;
+
+type ModalId = keyof typeof idToModalEventConvertor;
 
 class Modal extends BaseComponent {
   private modalId: string | null = null;
@@ -51,9 +59,10 @@ class Modal extends BaseComponent {
       }
     );
 
-    const openType = this.getAttribute("open-type") ?? "";
-    this.isModalOpenEvent(openType) &&
-      document.addEventListener(openType, () => {
+    const modalId = this.getAttribute("id") ?? "";
+
+    isArrayElement<ModalId>(Object.keys(idToModalEventConvertor), modalId) &&
+      document.addEventListener(idToModalEventConvertor[modalId], () => {
         this.showModal();
       });
 

From 9e4b00f25eb4014d5ac3ade046a8c10b0e6837da Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:10:36 +0900
Subject: [PATCH 62/70] =?UTF-8?q?refactor(OptionSelector):=20=EC=B6=94?=
 =?UTF-8?q?=EC=83=81=ED=99=94=EB=90=9C=20=ED=83=80=EC=9E=85=20=EA=B0=80?=
 =?UTF-8?q?=EB=93=9C=20=ED=95=A8=EC=88=98=EB=A5=BC=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B2=83=EC=9C=BC=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OptionSelector/index.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/OptionSelector/index.ts b/src/components/OptionSelector/index.ts
index 9aeee9644..41c551f58 100644
--- a/src/components/OptionSelector/index.ts
+++ b/src/components/OptionSelector/index.ts
@@ -1,7 +1,8 @@
 import BaseComponent from "../BaseComponent";
 import { MENU_APP_EVENTS } from "../../constants/event";
 import { CategoryString, SortOptionString } from "../../types/menu";
-import { isValidOption } from "../../utils/types";
+import { isArrayElement } from "../../utils/types";
+import { CATEGORIES, SORT_TYPE } from "../../constants/menu";
 
 interface OptionDetail {
   type: string;
@@ -21,10 +22,7 @@ class OptionSelector extends BaseComponent {
   }
 
   private isValidOptionType(value: string): value is CategoryString | SortOptionString {
-    return (
-      isValidOption<CategoryString>(["전체", "한식", "아시안", "일식", "중식", "양식", "기타"], value) ||
-      isValidOption<SortOptionString>(["거리순", "이름순"], value)
-    );
+    return isArrayElement<CategoryString>(Object.values(CATEGORIES), value) || isArrayElement<SortOptionString>(Object.values(SORT_TYPE), value);
   }
 
   private handleChangeOption(element: HTMLSelectElement) {

From 1cb1d02db8ef748625f4a0341c641ec148a5d0fa Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:12:03 +0900
Subject: [PATCH 63/70] =?UTF-8?q?refactor(RestaurantAddForm):=20=EA=B0=9D?=
 =?UTF-8?q?=EC=B2=B4=20=ED=83=80=EC=9E=85=20=EA=B0=80=EB=93=9C=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/RestaurantAddForm/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/RestaurantAddForm/index.ts b/src/components/RestaurantAddForm/index.ts
index 9215a7654..d9742758b 100644
--- a/src/components/RestaurantAddForm/index.ts
+++ b/src/components/RestaurantAddForm/index.ts
@@ -4,7 +4,7 @@ import { CATEGORIES, DISTANCES, ERROR_MESSAGES } from "../../constants/menu";
 import { RestaurantAddItem } from "../../types/menu";
 import { add } from "../../domains/Restaurants";
 import { $ } from "../../utils/dom";
-import { isRestaurantItemType } from "../../utils/types";
+import { isObjectWithKeys } from "../../utils/types";
 
 class RestaurantAddForm extends BaseComponent {
   private addFormElement: HTMLFormElement | null = null;
@@ -97,7 +97,7 @@ class RestaurantAddForm extends BaseComponent {
 
     if (
       addItem &&
-      isRestaurantItemType<RestaurantAddItem>(addItem, [
+      isObjectWithKeys<RestaurantAddItem>(addItem, [
         "name",
         "category",
         "distance",

From 4d0c2f374f4c328d2d381f82f46309179566e953 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:23:34 +0900
Subject: [PATCH 64/70] =?UTF-8?q?refactor(RestaurantDetail):=20=EA=B0=9D?=
 =?UTF-8?q?=EC=B2=B4=20=ED=83=80=EC=9E=85=20=EA=B0=80=EB=93=9C=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Restaurants/RestaurantDetail.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Restaurants/RestaurantDetail.ts b/src/components/Restaurants/RestaurantDetail.ts
index 2b36b0ccf..a65253ee5 100644
--- a/src/components/Restaurants/RestaurantDetail.ts
+++ b/src/components/Restaurants/RestaurantDetail.ts
@@ -3,7 +3,7 @@ import { MENU_APP_EVENTS } from "../../constants/event";
 import { RestaurantItem } from "../../types/menu";
 import { deleteRestaurantByName } from "../../domains/Restaurants";
 import { $ } from "../../utils/dom";
-import { isRestaurantItemType } from "../../utils/types";
+import { isObjectWithKeys } from "../../utils/types";
 
 const RESTAURANT_KEYS = ["name", "category", "distance", "isFavorite", "description", "link"];
 
@@ -12,9 +12,7 @@ class RestaurantDetail extends BaseComponent {
 
   private getDetailTemplate(): string {
     if (!this.detailInfo) return ``;
-
     const { name, category, distance, description, isFavorite, link } = this.detailInfo;
-
     return /*html*/ `
       <div class="restaurant__info gap-4">
         <div class="flex justify-between">
@@ -51,7 +49,7 @@ class RestaurantDetail extends BaseComponent {
 
   private handleShowRestaurantDetailModal(event: CustomEvent) {
     const { detailInfo } = event.detail;
-    if (!isRestaurantItemType<RestaurantItem>(detailInfo, RESTAURANT_KEYS)) {
+    if (!isObjectWithKeys<RestaurantItem>(detailInfo, RESTAURANT_KEYS)) {
       return;
     }
 

From 4599c6c85801e17bbc7a41c902b304be4727a083 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Tue, 19 Mar 2024 21:26:51 +0900
Subject: [PATCH 65/70] =?UTF-8?q?chore(RestaurantList):=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EA=B5=AC=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Restaurants/RestaurantList.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/Restaurants/RestaurantList.ts b/src/components/Restaurants/RestaurantList.ts
index c740aca2c..7599abb3e 100644
--- a/src/components/Restaurants/RestaurantList.ts
+++ b/src/components/Restaurants/RestaurantList.ts
@@ -1,12 +1,7 @@
 import BaseComponent from "../BaseComponent";
 import { MENU_APP_EVENTS } from "../../constants/event";
 import { CategoryString, RestaurantItem, RestaurantTab, SortOptionString } from "../../types/menu";
-import {
-  filterByCategory,
-  findRestaurantByName,
-  getFavoriteRestaurants,
-  sortByType,
-} from "../../domains/Restaurants";
+import { filterByCategory, findRestaurantByName, getFavoriteRestaurants, sortByType } from "../../domains/Restaurants";
 
 class RestaurantList extends BaseComponent {
   private currentCategory: CategoryString;

From c7010281bf870f986feccd5a969b0339f5c00398 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Wed, 20 Mar 2024 00:06:35 +0900
Subject: [PATCH 66/70] =?UTF-8?q?config:=20img=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/index.d.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/types/index.d.ts

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
new file mode 100644
index 000000000..49977505d
--- /dev/null
+++ b/src/types/index.d.ts
@@ -0,0 +1 @@
+declare module "*.png";

From c5ade2174438216259f01b4caf95f74cfc9b7813 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Wed, 20 Mar 2024 00:07:06 +0900
Subject: [PATCH 67/70] =?UTF-8?q?chore(change=20file):=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=ED=8C=8C=EC=9D=BC=EC=9D=84=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=ED=95=98=EB=8A=94=20asset=20=ED=8C=8C=EC=9D=BC=20TS?=
 =?UTF-8?q?=EB=A1=9C=20=ED=99=95=EC=9E=A5=EC=9E=90=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/{index.js => index.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/assets/{index.js => index.ts} (100%)

diff --git a/src/assets/index.js b/src/assets/index.ts
similarity index 100%
rename from src/assets/index.js
rename to src/assets/index.ts

From 2bebec1e5b550dce0a08f33e763eb418d6b4863e Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Wed, 20 Mar 2024 00:08:53 +0900
Subject: [PATCH 68/70] =?UTF-8?q?refactor(FavoriteIcon):=20isFavorite(bool?=
 =?UTF-8?q?ean)=20=EC=83=81=ED=83=9C=20=EA=B0=92=20=EA=B2=B0=EC=A0=95=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=82=BC=ED=95=AD=20=EC=97=B0=EC=82=B0?=
 =?UTF-8?q?=EC=9E=90=EC=97=90=EC=84=9C=20=EB=B9=84=EA=B5=90=20=EC=97=B0?=
 =?UTF-8?q?=EC=82=B0=EC=9E=90=20=EC=82=AC=EC=9A=A9=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FavoriteIcon/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FavoriteIcon/index.ts b/src/components/FavoriteIcon/index.ts
index e0ee7e591..4c4f36167 100644
--- a/src/components/FavoriteIcon/index.ts
+++ b/src/components/FavoriteIcon/index.ts
@@ -5,7 +5,7 @@ import { filledFavoriteIcon, linedFavoriteIcon } from "../../assets/index";
 
 class FavoriteIcon extends BaseComponent {
   protected render() {
-    const isFavorite = this.getAttribute("is-favorite") === "true" ? true : false;
+    const isFavorite = this.getAttribute("is-favorite") === "true";
 
     this.innerHTML = /*html*/ `
       <img alt="favorite-icon" class="favorite-icon" 

From 191f542ff4609085925ac7d7bc284d634c940387 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Wed, 20 Mar 2024 00:13:17 +0900
Subject: [PATCH 69/70] =?UTF-8?q?chore(Modal):=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=A9=94=EC=84=9C?=
 =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/index.ts | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/components/Modal/index.ts b/src/components/Modal/index.ts
index d74eac770..5c88e5b15 100644
--- a/src/components/Modal/index.ts
+++ b/src/components/Modal/index.ts
@@ -45,19 +45,12 @@ class Modal extends BaseComponent {
     this.innerHTML = this.getModalTemplate();
   }
 
-  isModalOpenEvent(type: string): type is MenuAppEvent {
-    return ["open-add-form", "open-restaurant-detail"].includes(type);
-  }
-
   setEvent() {
-    $<HTMLDivElement>(`#${this.modalId}-backdrop`)!.addEventListener(
-      "click",
-      (event) => {
-        if (event.target === event.currentTarget) {
-          this.hideModal();
-        }
+    $<HTMLDivElement>(`#${this.modalId}-backdrop`)!.addEventListener("click", (event) => {
+      if (event.target === event.currentTarget) {
+        this.hideModal();
       }
-    );
+    });
 
     const modalId = this.getAttribute("id") ?? "";
 

From c818b2daf73947453e52cf6f8f7e899970c8af64 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Wed, 20 Mar 2024 00:14:01 +0900
Subject: [PATCH 70/70] =?UTF-8?q?chore(RestaurantDetail):=20=EC=B0=B8?=
 =?UTF-8?q?=EA=B3=A0=20=EB=A7=81=ED=81=AC=EA=B0=80=20=EC=A1=B4=EC=9E=AC?=
 =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20?=
 =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A3=BC=EB=8A=94=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=83=89=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Restaurants/RestaurantDetail.ts           | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/Restaurants/RestaurantDetail.ts b/src/components/Restaurants/RestaurantDetail.ts
index a65253ee5..5c27e7a60 100644
--- a/src/components/Restaurants/RestaurantDetail.ts
+++ b/src/components/Restaurants/RestaurantDetail.ts
@@ -5,14 +5,22 @@ import { deleteRestaurantByName } from "../../domains/Restaurants";
 import { $ } from "../../utils/dom";
 import { isObjectWithKeys } from "../../utils/types";
 
-const RESTAURANT_KEYS = ["name", "category", "distance", "isFavorite", "description", "link"];
+const RESTAURANT_KEYS = [
+  "name",
+  "category",
+  "distance",
+  "isFavorite",
+  "description",
+  "link",
+];
 
 class RestaurantDetail extends BaseComponent {
   private detailInfo: RestaurantItem | null = null;
 
   private getDetailTemplate(): string {
     if (!this.detailInfo) return ``;
-    const { name, category, distance, description, isFavorite, link } = this.detailInfo;
+    const { name, category, distance, description, isFavorite, link } =
+      this.detailInfo;
     return /*html*/ `
       <div class="restaurant__info gap-4">
         <div class="flex justify-between">
@@ -27,7 +35,7 @@ class RestaurantDetail extends BaseComponent {
         ${
           link
             ? `<a href=${link} target="_blank" class="detail-link">${link}</a>`
-            : '<p class="text-body font-orange">참고 링크가 존재하지 않습니다.</p>'
+            : '<p class="text-body">참고 링크가 존재하지 않습니다.</p>'
         }
       </div>
     `;
@@ -61,16 +69,20 @@ class RestaurantDetail extends BaseComponent {
     document.addEventListener(
       MENU_APP_EVENTS.openRestaurantDetail,
       (event) => {
-        event instanceof CustomEvent && this.handleShowRestaurantDetailModal(event);
+        event instanceof CustomEvent &&
+          this.handleShowRestaurantDetailModal(event);
       },
       {
         once: true,
       }
     );
 
-    $<HTMLButtonElement>(`#detail-close-button`)?.addEventListener("click", () => {
-      this.emitEvent(MENU_APP_EVENTS.closeModal);
-    });
+    $<HTMLButtonElement>(`#detail-close-button`)?.addEventListener(
+      "click",
+      () => {
+        this.emitEvent(MENU_APP_EVENTS.closeModal);
+      }
+    );
 
     $<HTMLButtonElement>(`#delete-button`)?.addEventListener("click", () => {
       this.detailInfo && deleteRestaurantByName(this.detailInfo.name);