[litae] 아마존 쇼핑 5주차 Peer Review PR(TOKO)

src/js/carousel/Carousel.js

@@ -1,5 +1,5 @@
 import { querySelector } from "../query.js";
-import { CAROUSEL, TIME } from "../constant.js";
+import { CAROUSEL, DELAY_TIME } from "../constant.js";
 import { delay } from "../util/delay.js";
 
 class Slider {
@@ -71,7 +71,7 @@ export class SliderMover extends Slider {
   }
 
   async autoToNextSlide() {
-    await delay(TIME.AUTO_SLIDE_DELAY);
+    await delay(DELAY_TIME.AUTO_SLIDE_DELAY);
     this.moveToNextSlide();
     this.autoToNextSlide();
   }

src/js/common/dim.js

@@ -1,5 +1,5 @@
 import { querySelector } from "../query.js";
-import { Z_INDEX, OPACITY, TIME } from "../constant.js";
+import { Z_INDEX, OPACITY, DELAY_TIME } from "../constant.js";
 import { setZindex, setOpacity } from "../util/set-style.js";
 import { delay } from "../util/delay.js";
 
@@ -10,7 +10,7 @@ export function dim() {
 
 export async function undim() {
   setOpacity(querySelector.mainDimmed(), OPACITY.ZERO);
-  await delay(TIME.DIM_DELAY);
+  await delay(DELAY_TIME.DIM_DELAY);
   setZindex(querySelector.mainDimmed(), Z_INDEX.LOWEST_Z);
 }
 

src/js/constant.js

@@ -24,7 +24,7 @@ export const CAROUSEL = {
   NO_EFFECT: "none",
 };
 
-export const TIME = {
+export const DELAY_TIME = {
   NONE_TO_BLOCK: 10,
   FETCH_FROM_DB: 50,
   DIM_DELAY: 300,
@@ -44,6 +44,8 @@ export const RES_QUERY = {
   EARLY: "/earlySetting",
   EXPAND: "/moreDepartment",
   CAR: "/carSupplies",
+  AUTO: "/autoKeyword",
+  RECOMMEND: "/recommendKeyword",
 };
 
 export const STATE = {

src/js/keyword/KeywordController.js

@@ -1,4 +1,6 @@
-import { BASE_URL } from "../constant.js";
+import { BASE_URL, RES_QUERY } from "../constant.js";
+import { delay } from "../util/delay.js";
+import { DELAY_TIME } from "../constant.js";
 
 export class KeywordController {
   constructor(view, store) {
@@ -10,43 +12,48 @@ export class KeywordController {
   // KeywordController의 인스턴스가 생성되고 init을 호출하는 타이밍은 언제??
   init() {
     this.bindControllerThis();
-    this.view.addKeywordEventListner();
+    this.view.addKeywordEventListener();
   }
 
   bindControllerThis() {
+    this.view.setRecentKeywords = this.setRecentKeywords.bind(this);
     this.view.showRecentAndRecommendKeyword = this.showRecentAndRecommendKeyword.bind(this);
     this.view.showAutoKeyword = this.showAutoKeyword.bind(this);
   }
 
-  // 작동하지 않는 코드
-  setRecentKeywordStorage(userInput) {
-    const rawKeywords = localStorage.getItem("recent");
-    if (rawKeywords) {
-      const keywordsList = JSON.parse(rawKeywords);
-      const newRecentList = keywordsList.concat(userInput);
-      const isFull = newRecentList.length === 6;
+  setRecentKeywords(userInput) {
+    this.store.resetKeywords();
+    const recentKeywords = JSON.parse(localStorage.getItem("recent"));
 
-      if (isFull) {
-        newRecentList.shift();
-      }
-      this.store.setKeywords(newRecentList);
+    if (!recentKeywords) {
+      this.store.keywords.push(userInput);
+      localStorage.setItem("recent", JSON.stringify(this.store.keywords));
+      return;
     }
+
+    recentKeywords.push(userInput);
+    const isFull = recentKeywords.length === 6;
+
+    if (isFull) {
+      recentKeywords.shift();
+    }
+
+    localStorage.setItem("recent", JSON.stringify(recentKeywords));
   }
 
-  // 작동하지 않는 코드
-  setRecentList(userInput) {
-    this.setRecentKeywordStorage(userInput);
-    localStorage.setItem("recent", JSON.stringify(this.store.getKeywords()));
-    const rawRecentKeywords = localStorage.getItem("recent");
-    const recentKeywordsList = JSON.parse(rawRecentKeywords);
-    this.store.resetKeywords();
-    this.view.renderRecentKeywords(recentKeywordsList);
+  setRecentList() {
+    const recentKeywords = JSON.parse(localStorage.getItem("recent"));
+
+    if (!recentKeywords) {
+      return;
+    }
+
+    this.view.template += this.view.generateRecentTemplate(recentKeywords);
   }
 
   // 미완성 코드
   setAutoList() {
-    const query = "/autoKeyword";
-    fetch(this.url + query)
+    fetch(`${this.url}${RES_QUERY.AUTO}`)
       .then((response) => response.json())
       .then((autoKeyword) => {
         this.store.resetKeywords();
@@ -55,22 +62,26 @@ export class KeywordController {
   }
 
   setRecommendList() {
-    const query = "/recommendKeyword";
-    fetch(this.url + query) // new URL() 알아보기
+    fetch(`${this.url}${RES_QUERY.RECOMMEND}`) // new URL() 알아보기
       .then((response) => response.json())
       .then((recommendKeyword) => {
         this.store.resetKeywords();
         this.store.setKeywords(recommendKeyword);
-        this.view.renderRecommendKeywords(this.store.getKeywords());
+        this.view.template += this.view.generateRecommendTemplate(this.store.getKeywords());
       });
   }
 
-  showRecentAndRecommendKeyword() {
+  async showRecentAndRecommendKeyword() {
     this.setRecentList();
     this.setRecommendList();
+    await delay(DELAY_TIME.FETCH_FROM_DB);
+    this.view.render();
+    this.view.resetTemplate();
   }
 
   showAutoKeyword() {
     this.setAutoList();
+    this.view.render();
+    this.view.resetTemplate();
   }
 }

src/js/keyword/KeywordView.js

@@ -1,52 +1,65 @@
 export class KeywordView {
-  constructor(layer, searchBar) {
+  constructor(layer, searchBar, searchInput, searchBtn) {
     this.layer = layer;
     this.searchBar = searchBar;
+    this.searchInput = searchInput;
+    this.searchBtn = searchBtn;
+    this.template = "";
   }
 
-  renderAutoKeywords(keywords) {
-    keywords.map((keyword) => (this.layer.innerHTML += this.getAutoTemplate(keyword)));
+  render() {
+    this.layer.innerHTML = this.template;
   }
 
-  renderRecentKeywords(keywords) {
-    keywords.map((keyword) => (this.layer.innerHTML += this.getRecentTemplate(keyword)));
+  resetTemplate() {
+    this.template = "";
   }
 
-  renderRecommendKeywords(keywords) {
-    keywords.map((keyword) => (this.layer.innerHTML += this.getRecommendTemplate(keyword.text)));
+  generateAutoTemplate(keywords) {
+    return keywords
+      .map(
+        (keyword) =>
+          `<li class="auto-keyword">
+            ${keyword}
+          </li>`
+      )
+      .join("");
   }
 
-  getAutoTemplate(keyword) {
-    return `
-      <li class="auto-keyword">
-        ${keyword}
-      </li>
-    `;
+  generateRecentTemplate(keywords) {
+    return keywords
+      .map(
+        (keyword) =>
+          `<li class="recent-keyword">
+            ${keyword}
+            <img src="./src/assets/svg/close.svg" class="delete-btn">
+          </li>`
+      )
+      .join("");
   }
 
-  getRecentTemplate(keyword) {
-    return `
-      <li class="recent-keyword">
-        ${keyword}
-        <img src="./src/assets/svg/close.svg" class="delete-btn">
-      </li>
-    `;
+  generateRecommendTemplate(keywords) {
+    return keywords
+      .map(
+        (keyword) =>
+          `<li class="recommend-keyword">
+            <img src="./src/assets/svg/arrow-top-right.svg">
+            ${keyword.text}
+          </li>`
+      )
+      .join("");
   }
 
-  getRecommendTemplate(keyword) {
-    return `
-      <li class="recommend-keyword">
-        <img src="./src/assets/svg/arrow-top-right.svg">
-        ${keyword}
-      </li>
-    `;
-  }
-
-  addKeywordEventListner() {
-    this.searchBar.addEventListener("input", (e) => {
-      const userInput = e.target.value;
-      this.showAutoKeyword(userInput);
+  addKeywordEventListener() {
+    this.searchBtn.addEventListener("click", () => {
+      const userInput = this.searchInput.value;
+      this.setRecentKeywords(userInput);
+    });
+    const deleteBtn = document.querySelector(".delete-btn");
+    deleteBtn.addEventListener("click", (event) => {
+      event.target.parentNode.remove();
     });
-    this.searchBar.addEventListener("click", this.showRecentAndRecommendKeyword, { once: true });
+    // this.searchBar.addEventListener("input", this.showAutoKeyword);
+    // this.searchBar.addEventListener("click", this.showRecentAndRecommendKeyword);
   }
 }

src/js/keyword/index.js

@@ -5,7 +5,9 @@ import { KeywordController } from "./KeywordController.js";
 export function initKeyword() {
   const searchLayer = document.querySelector(".search-layer > ul");
   const searchBar = document.querySelector(".search-bar");
-  const newKeywordView = new KeywordView(searchLayer, searchBar);
+  const searchInput = document.querySelector(".search-input");
+  const searchBtn = document.querySelector(".search-button");
+  const newKeywordView = new KeywordView(searchLayer, searchBar, searchInput, searchBtn);
   const newKeywordStore = new KeywordStore();
   const newKeywordController = new KeywordController(newKeywordView, newKeywordStore);
   newKeywordController.init();

src/js/modal-event/Login-modal.js

@@ -1,5 +1,5 @@
 import { querySelector } from "../query.js";
-import { Z_INDEX, OPACITY, DISPLAY, TIME } from "../constant.js";
+import { Z_INDEX, OPACITY, DISPLAY, DELAY_TIME } from "../constant.js";
 import { delay } from "../util/delay.js";
 import { dim, undim } from "../common/dim.js";
 import { setOpacity, setSize, setZindex, setTransform, setDisplay } from "../util/set-style.js";
@@ -12,10 +12,10 @@ async function expandLoginModalWithDelay() {
 
   for (const element of querySelector.loginModalExpandContainer()) {
     setDisplay(element, DISPLAY.BLOCK);
-    await delay(TIME.NONE_TO_BLOCK);
+    await delay(DELAY_TIME.NONE_TO_BLOCK);
     setSize(element, expandWidthSize, expandHeightSize);
   }
-  await delay(TIME.LOGIN_EXPAND_DELAY);
+  await delay(DELAY_TIME.LOGIN_EXPAND_DELAY);
   setOpacity(querySelector.loginModalExpand(), OPACITY.FULL);
   setTransform(querySelector.loginModalTail(), moveToX, moveToY);
 }
@@ -26,7 +26,7 @@ async function hideLoginModal() {
 }
 
 export async function openLoginModalWithDelay() {
-  await delay(TIME.LOGIN_OPACITY_DELAY);
+  await delay(DELAY_TIME.LOGIN_OPACITY_DELAY);
   setOpacity(querySelector.loginModal(), OPACITY.FULL);
 }
 

src/js/search/Search-event.js

@@ -1,5 +1,5 @@
 import { querySelector } from "../query.js";
-import { DISPLAY, TIME } from "../constant.js";
+import { DISPLAY, DELAY_TIME } from "../constant.js";
 import { dim, undim } from "../common/dim.js";
 import { setDisplay } from "../util/set-style.js";
 import { delay } from "../util/delay.js";
@@ -16,7 +16,7 @@ export function searchBarEventHandler() {
   });
 
   querySelector.searchInput().addEventListener("blur", async () => {
-    await delay(TIME.NONE_TO_BLOCK);
+    await delay(DELAY_TIME.NONE_TO_BLOCK);
     setSearchLayerDisplay(DISPLAY.NONE);
     undim();
   });

src/js/sidebar/Handle-sidebar-click.js

@@ -3,12 +3,12 @@ import { ExpandEarlySidebar } from "./Sidebar-expand.js";
 import { DetailSidebar } from "./Sidebar-detail.js";
 import { querySelector } from "../query.js";
 import { setZindex } from "../util/set-style.js";
-import { Z_INDEX, TIME } from "../constant.js";
+import { Z_INDEX, DELAY_TIME } from "../constant.js";
 import { delay } from "../util/delay.js";
 
 async function addAndRenderTemplate(sidebar) {
   sidebar.addTemplate();
-  await delay(TIME.FETCH_FROM_DB);
+  await delay(DELAY_TIME.FETCH_FROM_DB);
   sidebar.renderTemplate();
 }
 

src/styles/scss/_modal.scss

@@ -49,6 +49,13 @@
   }
   .login-modal-container {
     @include modalContainer;
+    ::before {
+      content: "";
+      position: absolute;
+      top: -15px;
+      width: 300px;
+      height: 15px;
+    }
 
     .login-button {
       width: 160px;