fix: 6. 상품 검색 적용

* 초반 로딩 화면 플래그 설정

Author: heojungseok

src/main.js

@@ -28,10 +28,11 @@ const mainStatus = {
 
 // 라우터 인스턴스를 전역적으로 접근 가능하도록 선언
 let appRouter;
-
+let isInit = true;
 // API 호출 및 렌더링을 담당하는 함수
 async function loadProductsAndUpdateUI() {
-  mainStatus.loading = true;
+  isInit && (mainStatus.loading = true);
+
   appRouter.updateStateAndRender(mainStatus); // 로딩 상태 먼저 반영
 
   try {
@@ -45,16 +46,17 @@ async function loadProductsAndUpdateUI() {
     console.error("loadProductsAndUpdateUI", "데이터를 불러오는 중 오류가 발생했습니다:", error);
   } finally {
     mainStatus.loading = false;
+    isInit = false;
     appRouter.updateStateAndRender(mainStatus); // 최종 상태 반영
   }
 }
 
 // 이벤트 핸들러 설정 함수
 function setupEventListeners() {
   /** change */
+  let shouldUpdate = false;
   document.body.addEventListener("change", (e) => {
     const target = e.target;
-    let shouldUpdate = false;
 
     if (target.id === "limit-select") {
       mainStatus.params.limit = parseInt(target.value, 10);
@@ -70,6 +72,18 @@ function setupEventListeners() {
     }
   });
 
+  document.body.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && e.target.id === "search-input") {
+      mainStatus.params.search = e.target.value;
+      shouldUpdate = true;
+    } else {
+      return;
+    }
+    if (shouldUpdate) {
+      mainStatus.params.page = 1; // 필터 변경 시 첫 페이지로 초기화
+      loadProductsAndUpdateUI();
+    }
+  });
   // TODO: 그 외 다른 이벤트 설정.....
 }
 

src/router.js

@@ -47,7 +47,7 @@ const routes = {
 
 // 라우터 인스턴스 생성 및 관리 함수
 export const createRouter = (initialmainStatus) => {
-  let currentmainStatus = initialmainStatus; // main.js에서 전달받은 mainStatus 객체
+  let currentmainStatus = JSON.parse(JSON.stringify(initialmainStatus)); // main.js에서 전달받은 mainStatus 객체
   const appRoot = document.querySelector("#root"); // 콘텐츠가 렌더링될 DOM 요소
 
   // 현재 URL 경로에 맵핑된 컴포넌트 렌더링 함수
@@ -70,7 +70,7 @@ export const createRouter = (initialmainStatus) => {
 
   // 외부에서 mainStatus을 업데이트하고 렌더링을 트리거할 수 있는 함수
   const updateStateAndRender = (newmainStatus) => {
-    currentmainStatus = newmainStatus; // 상태 업데이트
+    currentmainStatus = JSON.parse(JSON.stringify(newmainStatus)); // 상태 업데이트
     render(); // 업데이트된 상태로 다시 렌더링
   };