[2단계 - 자주 가는 음식점] 해리(최현웅) 미션 제출합니다.

README.md

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

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";

src/components/BaseComponent.js → src/components/BaseComponent.ts

@@ -1,20 +1,22 @@
+import { TotalMenuAppEvent } from "../types/event";
+
 export default class BaseComponent extends HTMLElement {
   constructor() {
     super();
   }
 
-  connectedCallback() {
+  protected connectedCallback() {
     this.render();
     this.setEvent();
   }
 
-  disconnectedCallback() {}
+  protected disconnectedCallback() {}
 
-  render() {}
+  protected render() {}
 
-  setEvent() {}
+  protected setEvent() {}
 
-  emitEvent(event, data) {
+  protected emitEvent<T>(event: TotalMenuAppEvent, data?: T) {
     this.dispatchEvent(
       new CustomEvent(event, {
         bubbles: true,

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);

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);

src/components/MenuApp.ts

@@ -0,0 +1,33 @@
+import BaseComponent from "./BaseComponent";
+import { MENU_APP_EVENTS } from "../constants/event";
+import { initRestaurantStorage } from "../domains/Restaurants";
+
+class MenuApp extends BaseComponent {
+  constructor() {
+    initRestaurantStorage();
+    super();
+  }
+
+  render() {
+    this.innerHTML = /*html*/ `
+      <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>
+    `;
+  }
+}
+
+customElements.define("menu-app", MenuApp);