feat: 로고 클릭할 경우 searchBox value 초기화 해주는 기능 구현

Hain-tain · Mar 21, 2024 · 9e9c476 · 9e9c476
1 parent 57f874a
commit 9e9c476
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/MovieHeader/MovieHeader.ts b/src/components/MovieHeader/MovieHeader.ts
@@ -27,13 +27,18 @@ class MovieHeader {
     const $h1 = createElement({
       tagName: "h1",
       children: [$logo],
-      addEventListener: { click: logoClickHandler },
+      addEventListener: {
+        click: () => {
+          searchBox.clear();
+          logoClickHandler();
+        },
+      },
     });
-    const $searchBox = new MovieSearchBox({
+    const searchBox = new MovieSearchBox({
       searchBoxSubmitHandler,
-    }).$element;
+    });
 
-    return generateHeader({ children: [$h1, $searchBox] });
+    return generateHeader({ children: [$h1, searchBox.$element] });
   }
 }
 

diff --git a/src/components/MovieHeader/MovieSearchBox.ts b/src/components/MovieHeader/MovieSearchBox.ts
@@ -22,6 +22,12 @@ class MovieSearchBox {
     });
   }
 
+  clear() {
+    if (this.$element instanceof HTMLFormElement) {
+      this.$element.reset();
+    }
+  }
+
   private searchByQuery(e: Event) {
     e.preventDefault();