fix(index.js): tab 추가 및 음식점 추가 모달에서 "submit" 이벤트 리스너 콜백 함수 내부 로직 변경(e…

….target[].value 로 submit 결과 가져오는 방법으로 변경)

src/index.js

@@ -1,59 +1,125 @@
 import "../templates/style.css";
 import "./image/add-button.png";
 
+import AllRestaurantList, { postRestaurant } from "./domain/AllRestaurantList";
 import { CATEGORY_WITH_ENTIRE, SORT_STANDARD } from "./constants/selectOptions";
 
-import AddRestaurantModal from "./view/components/AddRestaurantModal";
-import AllRestaurantList from "./domain/AllRestaurantList";
-import generateSelectBox from "./view/generateComponent/generateSelectBox";
+import AddingRestaurantModal from "./view/components/Modal/AddingRestaurantModal";
+import RestaurantList from "./domain/RestaurantList";
+import RestaurantListTab from "./view/components/Tab/RestaurantListTab";
+import generateRestaurantList from "./view/components/generateRestaurantList";
+import generateSelectBox from "./view/components/ReadableElement/generateSelectBox";
 import getLocalStorageItem from "./utils/getLocalStorageItem";
-import renderRestaurantItem from "./view/renderRestaurantItem";
 import { restaurantData } from "./data/restaurantData";
-import setLocalStorageItem from "./utils/setLocalStorageItem";
 
-const main = document.getElementById("main");
-const modal = new AddRestaurantModal();
-main.append(modal.element);
+// 음식점 스텁 데이터로 AllRestaurantList 설정
+const restaurants = getLocalStorageItem("allRestaurants", restaurantData);
 
-const filterContainer = document.getElementById("filter-container");
-const categorySelectBox = generateSelectBox(CATEGORY_WITH_ENTIRE);
-const sortStandardSelectBox = generateSelectBox(SORT_STANDARD);
-filterContainer.append(categorySelectBox, sortStandardSelectBox);
+AllRestaurantList.init(restaurants ?? []);
 
+// 음식점 추가 모달 추가
 const openButton = document.getElementById("add-restaurant-button");
+const addingModalContainer = document.getElementById(
+  "adding-restaurant-modal-container"
+);
+const addModal = new AddingRestaurantModal();
 
-const restaurants = getLocalStorageItem("allRestaurants", restaurantData);
+addingModalContainer.append(addModal.element);
 
-AllRestaurantList.init(restaurants ?? []);
+// 모든 음식점-자주 가는 음식점 탭 추가
+const tabContainer = document.getElementById("tab-container");
+const tab = new RestaurantListTab().tabElement;
 
-renderRestaurantItem({
+tabContainer.appendChild(tab);
+
+// 모든 음식점 탭 내부 filter 추가
+const filterContainer = document.getElementById("filter-container");
+const categorySelectBox = generateSelectBox({
+  options: CATEGORY_WITH_ENTIRE,
+  name: "category",
+});
+const sortStandardSelectBox = generateSelectBox({
+  options: SORT_STANDARD,
+  name: "sorting",
+});
+
+filterContainer.append(categorySelectBox, sortStandardSelectBox);
+
+// 모든 음식점 탭 내부 음식점 목록 추가
+const restaurantAllListContainer = document.getElementById(
+  "restaurant-all-list-container"
+);
+const restaurantList = generateRestaurantList({
   restaurantList: AllRestaurantList,
   category: CATEGORY_WITH_ENTIRE[0],
   sortStandard: SORT_STANDARD[0],
 });
 
+restaurantAllListContainer.append(restaurantList);
+
+//이벤트 리스너 등록
 openButton.addEventListener("click", () => {
-  modal.open();
+  addModal.toggle();
+});
+
+tab.addEventListener("click", () => {
+  if (tab.getAttribute("value") === "모든 음식점") {
+    renderFilteredContainer(restaurantAllListContainer, AllRestaurantList);
+  }
+  if (tab.getAttribute("value") === "자주 가는 음식점") {
+    const restaurantFavoriteListContainer = document.getElementById(
+      "restaurant-favorite-list-container"
+    );
+
+    if (restaurantFavoriteListContainer) {
+      const ul = generateRestaurantList({
+        restaurantList: new RestaurantList(AllRestaurantList.withFavorites()),
+        category: CATEGORY_WITH_ENTIRE[0],
+        sortStandard: SORT_STANDARD[0],
+      });
+
+      restaurantFavoriteListContainer.replaceChildren(ul);
+    }
+  }
 });
 
 filterContainer.addEventListener("change", () => {
-  renderRestaurantItem({
-    restaurantList: AllRestaurantList,
-    category: categorySelectBox.value,
-    sortStandard: sortStandardSelectBox.value,
-  });
+  renderFilteredContainer(restaurantAllListContainer, AllRestaurantList);
 });
 
-main.addEventListener("submit", (e) => {
+addingModalContainer.addEventListener("submit", (e) => {
   e.preventDefault();
 
-  renderRestaurantItem({
-    restaurantList: AllRestaurantList,
+  const name = e.target["name"].value;
+  const category = e.target["category"].value;
+  const distance = e.target["distance"].value;
+  const description = e.target["description"].value;
+  const link = e.target["link"].value;
+  const favorites = false;
+
+  addModal.toggle();
+
+  postRestaurant({
+    name,
+    category,
+    distance,
+    description,
+    link,
+    favorites,
+  });
+
+  renderFilteredContainer(restaurantAllListContainer, AllRestaurantList);
+});
+
+export const renderFilteredContainer = (
+  restaurantListContainer,
+  restaurantList
+) => {
+  const filteredList = generateRestaurantList({
+    restaurantList: restaurantList,
     category: categorySelectBox.value,
     sortStandard: sortStandardSelectBox.value,
   });
 
-  modal.hide();
-
-  setLocalStorageItem("allRestaurants", AllRestaurantList.getRestaurants());
-});
+  restaurantListContainer.replaceChildren(filteredList);
+};