woowacourse · woowahan-cron · Mar 12, 2023 · Feb 28, 2023 · Feb 28, 2023 · Feb 28, 2023
diff --git a/docs/REQUIREMENTS.md b/docs/REQUIREMENTS.md
@@ -1,91 +1,53 @@
 ## 점심 뭐먹지 기능 요구 사항
 
-- [ ] 음식점 목록을 확인할 수 있다.
-  - [ ] 카테고리별로 필터링해서 확인할 수 있다.
-  - [ ] 이름순으로 정렬해서 확인할 수 있다.
-  - [ ] 거리순으로 정렬해서 확인할 수 있다.
-- [ ] 음식점 목록에 새로운 음식점을 추가할 수 있다.
-  - [ ] 음식점의 카테고리, 이름, 거리(도보 이동 시간), 설명, 참고 링크를 입력해서 추가할 수 있다.
-  - [ ] 카테고리, 거리는 셀렉트 박스, 이름/설명/참고 링크는 텍스트 인풋을 사용한다.
-  - [ ] 카테고리, 이름, 거리는 입력 필수.
-    - [ ] 카테고리는 "한식", "중식", "일식", "아시안", "양식", "기타" 중 하나를 선택한다.
-    - [ ] 거리는 캠퍼스로부터 도보로 걸리는 시간(분). 5, 10, 15, 20, 30 중 하나를 선택한다.
-  - [ ] 설명, 참고 링크는 옵션. 입력하지 않아도 음식점을 추가할 수 있어야 한다.
-  - [ ] 입력값이 잘못되었을 때 사용자에게 알려주는 방식은 자유롭게 구현한다.
-- [ ] 새로고침해도 추가한 음식점 정보들이 유지되어야 한다.
+- [x] 음식점 목록을 확인할 수 있다.
+  - [x] 카테고리별로 필터링해서 확인할 수 있다.
+  - [x] 이름순으로 정렬해서 확인할 수 있다.
+  - [x] 거리순으로 정렬해서 확인할 수 있다.
+- [x] 음식점 목록에 새로운 음식점을 추가할 수 있다.
+  - [x] 음식점의 카테고리, 이름, 거리(도보 이동 시간), 설명, 참고 링크를 입력해서 추가할 수 있다.
+  - [x] 카테고리, 거리는 셀렉트 박스, 이름/설명/참고 링크는 텍스트 인풋을 사용한다.
+  - [x] 카테고리, 이름, 거리는 입력 필수.
+    - [x] 카테고리는 "한식", "중식", "일식", "아시안", "양식", "기타" 중 하나를 선택한다.
+    - [x] 거리는 캠퍼스로부터 도보로 걸리는 시간(분). 5, 10, 15, 20, 30 중 하나를 선택한다.
+  - [x] 설명, 참고 링크는 옵션. 입력하지 않아도 음식점을 추가할 수 있어야 한다.
+  - [x] 입력값이 잘못되었을 때 사용자에게 알려주는 방식은 자유롭게 구현한다.
+- [x] 새로고침해도 추가한 음식점 정보들이 유지되어야 한다.
+- [x] 음식점 상세 정보를 확인할 수 있다.
+  - [x] 카테고리, 이름, 거리, 설명, 참고 링크를 확인할 수 있다.
+  - [x] 음식점을 삭제할 수 있다.
+- [x] 자주 가는 음식점을 추가하고 목록으로 확인할 수 있다.
+  - [x] 음식점 목록에서 자주 가는 음식점을 추가할 수 있다.
+  - [x] 음식점 상세 정보에서 자주 가는 음식점으로 추가할 수 있다.
+  - [x] 자주 가는 음식점 탭에서 추가한 음식점 목록을 확인할 수 있다.
+- [x] 새로고침해도 추가한 정보들이 유지되어야 한다.
 
 ---
 
-## 점심 뭐먹지 src 폴더 구조 및 역할 목록
-
-# components
-
-: 독립적이고 재사용가능한 ui요소들을 분리하고 정의한다.
-
-1. NavBar
-
-2. AddRestaurant
-
-- 레스토랑 추가를 위한 ui와 인풋 태그들을 가진다.
-
-3. BottomSheet
-
-- 위로 올라갔다가 내려가는 애니메이션 효과를 가진다.
-
-4. RestaurantItem
-
-- 레스토랑 이름, 거리, 설명, 카테고리 정보를 담는다.
-
-5. RestaurantList
-
-- RestaurantItem을 리스트로 나열한다.
-
-6. CategorySelectBox
-
-- 카테고리를 선택한다.
-
-7. SortingSelectBox
-
-- 정렬순서를 선택한다.
-
-# domain
-
-## Controller.ts
-
-- restaurant 객체들을 반환한다.
-- 새로운 restaurant 객체를 추가한다.
-- restaurant 객체들을 localStorage에 저장한다.
-- localSorage에 있는 정보를 불러온다.
-- restaurant 객체들을 이름순 및 거리순으로 정렬한다.
-- restaurant 객체들을 카테고리별로 필터링한다.
-
-## model
-
-1. Restaurant
-
-- restaurant 객체를 올바르게 생성한다.(inputValidator를 호출하며)
-
-## inputValidator
-
-- 카테고리, 이름, 거리(도보 이동 시간), 설명, 참고 링크에 대한 유효성을 검사한다.
-
-# index.js
-
-- customElement들을 정의한다.
-
-## 구현 순서
-
-[1]
-NavBar => BottomSheet => form => 음식점 추가하는 기능 완성
-
-[2]
-음식점 리스트를 영구저장 기능 + 복구하는 기능
-
-# 리팩토링 리스트
-
-// any 없애기
-// 은닉화
-// util함수
-// bottomSheet 열고 닫을 때, 위에 겹겹이 쌓이는 버그 존재
-// map 안의 new 없애기
-// sortRestaurnat 함수
+## 점심 뭐먹지 폴더 구조 및 역할 목록
+
+```
+.
+├─src
+│  ├─assets
+│  ├─components
+│  │  ├─AddRestaurant // 식당 정보를 추가하는 폼
+│  │  ├─BottomSheet // 모달
+│  │  ├─FavoriteButton // 즐겨찾기 버튼
+│  │  ├─MenuTab // 즐겨찾기 모아보기 버튼
+│  │  ├─RestaurantItem // 식당 리스트에 표기될 카드
+│  │  ├─RestaurantList // 식당 리스트
+│  │  ├─RestaurantView // 식당의 상세 정보를 표시
+│  │  ├─CategoryImage // 카테고리에 맞는 이미지를 태그로 제작해주는 기능
+│  │  ├─CategorySelectBox // 카테고리를 선택하는 박스
+│  │  ├─NavBar // 헤더
+│  │  └─SortingSelectBox // 정렬 기준을 선택하는 박스
+│  ├─constants
+│  ├─css
+│  ├─domain
+│  │  ├─restaurant // 레스토랑 관련 도메인 로직 모음
+│  │  └─restaurants // 레스토랑 데이터를 Proxy로 관리해주는 객체
+│  ├─tools
+│  └─type
+└─index.html
+```
diff --git a/index.html b/index.html
@@ -7,13 +7,22 @@
     <title>점심 뭐 먹지</title>
   </head>
 
-  <body>
-    <nav-bar></nav-bar>
-    <section class="restaurant-filter-container">
-      <category-select-box></category-select-box>
-      <sorting-select-box></sorting-select-box>
-    </section>
-    <restaurant-list id="restaurantList"></restaurant-list>
-    <bottom-sheet id="bottomSheet" class="modal"></bottom-sheet>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>점심 뭐 먹지</title>
+</head>
+
+<body>
+  <nav-bar></nav-bar>
+  <menu-tab></menu-tab>
+  <section class="restaurant-filter-container">
+    <category-select-box></category-select-box>
+    <sorting-select-box></sorting-select-box>
+  </section>
+  <restaurant-list id="restaurantList"></restaurant-list>
+  <bottom-sheet id="bottomSheet" class="modal"></bottom-sheet>
+</body>
+
 </html>
diff --git a/package.json b/package.json
@@ -51,5 +51,8 @@
       "\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
       "\\.(css|less)$": "<rootDir>/mocks/fileMock.js"
     }
+  },
+  "dependencies": {
+    "@types/uuid": "^9.0.1"
   }
-}
+}
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -5,6 +5,8 @@ import categoryKorean from "../assets/category-korean.png";
 import categoryWestern from "../assets/category-western.png";
 import categoryEtc from "../assets/category-etc.png";
 import addButton from "../assets/add-button.png";
+import favoriteFilled from "../assets/favorite-icon-filled.png";
+import favoriteLined from "../assets/favorite-icon-lined.png";
 
 export {
   categoryAsian,
@@ -14,4 +16,6 @@ export {
   categoryWestern,
   categoryEtc,
   addButton,
+  favoriteFilled,
+  favoriteLined,
 };
diff --git a/src/components/BottomSheet/handleBottomSheet.ts b/src/components/BottomSheet/handleBottomSheet.ts
@@ -1,8 +1,24 @@
 import BottomSheet from ".";
 
+export const onClickBackdrop = () => {
+  const modalBackdrop = document.getElementById("modalBackdrop");
+  modalBackdrop?.addEventListener("click", () => {
+    closeBottomSheet();
+  });
+};
+
+export const openBottomSheet = (children: string) => {
+  const bottomSheet = document.getElementById("bottomSheet");
+  if (bottomSheet instanceof BottomSheet) {
+    bottomSheet.classList.add("modal--open");
+    bottomSheet.render(children);
+  }
+};
+
 export const closeBottomSheet = () => {
   const bottomSheet = document.getElementById("bottomSheet");
   if (bottomSheet instanceof BottomSheet) {
-    bottomSheet.close();
+    bottomSheet.classList.remove("modal--open");
+    bottomSheet.render("");
   }
 };
diff --git a/src/components/BottomSheet/index.ts b/src/components/BottomSheet/index.ts
@@ -1,3 +1,5 @@
+import { onClickBackdrop } from "./handleBottomSheet";
+
 class BottomSheet extends HTMLElement {
   constructor() {
     super();
@@ -10,26 +12,7 @@ class BottomSheet extends HTMLElement {
     ${children}
     </div>
     `;
-    this.onClickBackdrop();
-  }
-
-  onClickBackdrop() {
-    const modalBackdrop = document.getElementById("modalBackdrop");
-    modalBackdrop?.addEventListener("click", () => {
-      this.close();
-    });
-  }
-
-  open(children: string) {
-    const bottomSheet = document.getElementById("bottomSheet");
-    bottomSheet?.classList.add("modal--open");
-    this.render(children);
-  }
-
-  close() {
-    const bottomSheet = document.getElementById("bottomSheet");
-    bottomSheet?.classList.remove("modal--open");
-    this.render("");
+    onClickBackdrop();
   }
 }
 

diff --git a/src/components/CategoryImage.ts b/src/components/CategoryImage.ts
@@ -0,0 +1,9 @@
+import findImage from "../tools/findImage";
+
+export const CategoryImage = (category: string) => `
+  <img
+    src="${findImage(category)}" 
+    alt="${category}" 
+    class="category-icon"
+  >
+`;
diff --git a/src/components/CategorySelectBox.ts b/src/components/CategorySelectBox.ts
@@ -1,6 +1,6 @@
 import { categoryOptions } from "../domain/restaurant";
+import { restaurants } from "../domain/restaurants";
 import { TCategory } from "../type/TCategory";
-import RestaurantList from "./RestaurantList";
 
 class CategorySelectBox extends HTMLElement {
   constructor() {
@@ -28,10 +28,7 @@ class CategorySelectBox extends HTMLElement {
   }
 
   filterCategory(key: TCategory) {
-    const restaurantList = document.getElementById("restaurantList");
-    if (restaurantList instanceof RestaurantList) {
-      restaurantList.filterBy(key);
-    }
+    restaurants.state.filter = key;
   }
 }
 

diff --git a/src/components/FavoriteButton/handleFavoriteButton.ts b/src/components/FavoriteButton/handleFavoriteButton.ts
diff --git a/src/components/FavoriteButton/index.ts b/src/components/FavoriteButton/index.ts
@@ -0,0 +1,49 @@
+import { updateFavorite } from "../../domain/restaurant";
+import { restaurants } from "../../domain/restaurants";
+import findImage from "../../tools/findImage";
+import Storage from "../../tools/Storage";
+import { renderRestaurantList } from "../RestaurantList/handleRestaurantList";
+
+class FavoriteButton extends HTMLElement {
+  restaurantId: string | null;
+  favorite: string | null;
+  constructor() {
+    super();
+    this.restaurantId = this.getAttribute("restaurant-id");
+    this.favorite = JSON.parse(this.getAttribute("favorite") as string);
+    this.render();
+    this.onClickFavoriteButton(this.restaurantId as string);
+  }
+  render() {
+    this.innerHTML = `
+    <img
+      src="${findImage(this.favorite ? "favoriteFilled" : "favoriteLined")}" 
+      alt="즐겨찾기 버튼" 
+      class="category-icon"
+    >
+    `;
+  }
+
+  static get observedAttributes() {
+    return ["favorite"];
+  }
+
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    this.favorite = JSON.parse(newValue);
+    this.render();
+  }
+
+  onClickFavoriteButton(id: string) {
+    this.addEventListener("click", (event) => {
+      event.stopPropagation();
+      updateFavorite(id);
+      const buttons = document.querySelectorAll(
+        `.favorite-button-${this.restaurantId}`
+      );
+      buttons.forEach((button) => {
+        button.setAttribute("favorite", `${!this.favorite}`);
+      });
+    });
+  }
+}
+export default FavoriteButton;
diff --git a/src/components/MenuTab/handleMenuTab.ts b/src/components/MenuTab/handleMenuTab.ts
@@ -0,0 +1,11 @@
+import { restaurants } from "../../domain/restaurants";
+
+export const onChangeMenuTabs = () => {
+  const form = document.getElementById("menuTabForm");
+  form?.addEventListener("change", (event) => {
+    if (event.target instanceof HTMLInputElement) {
+      const newMenu = event.target.value;
+      restaurants.state.menuTab = newMenu;
-      const newMenu = event.target.value;
-      restaurants.state.menuTab = newMenu;
+      restaurants.state.menuTab = event.target.value;
-      const newMenu = event.target.value;
-      restaurants.state.menuTab = newMenu;
+      restaurants.state.menuTab = event.target.value;
+    }
+  });
+};
diff --git a/src/components/MenuTab/index.ts b/src/components/MenuTab/index.ts
@@ -0,0 +1,24 @@
+import { onChangeMenuTabs } from "./handleMenuTab";
+
+class MenuTab extends HTMLElement {
+  constructor() {
+    super();
+    this.render();
+    onChangeMenuTabs();
+  }
+  render() {
+    this.innerHTML = `
+      <form id="menuTabForm" class="d-flex justify-content-between mx-2">
+        <label class="tab-menu w-100 text-center py-1">  
+          <input type="radio" name="tab-menu" value="tab-all" checked>
+          모든 음식점
+        </label>
+        <label class="tab-menu w-100 text-center py-1">
+          <input type="radio" name="tab-menu" value="tab-favorites">
+          자주 가는 음식점
+        </label>
+      </form>
+    `;
+  }
+}
+export default MenuTab;
diff --git a/src/components/NavBar.ts b/src/components/NavBar.ts
@@ -1,5 +1,6 @@
 import { addButton } from "../assets";
 import BottomSheet from "./BottomSheet";
+import { openBottomSheet } from "./BottomSheet/handleBottomSheet";
 
 class NavBar extends HTMLElement {
   constructor() {
@@ -22,10 +23,7 @@ class NavBar extends HTMLElement {
   onClickAddIcon() {
     const addIcon = document.getElementById("addIcon");
     addIcon?.addEventListener("click", () => {
-      const bottomSheet = document.getElementById("bottomSheet");
-      if (bottomSheet instanceof BottomSheet) {
-        bottomSheet.open("<add-restaurant />");
-      }
+      openBottomSheet("<add-restaurant></add-restaurant>");
     });
   }
 }