@@ -1,9 +1,100 @@
-function Header(logo, searchBox) {
+import Input from './Input';
+import Button from './Button';
+import { handleSearch } from '../services/handleSeach';
+
+function Header({ logoSrc, logoAlt, onSearch }) {
     const headerElement = document.createElement('header');
-    headerElement.classList.add('header');
 
-    headerElement.appendChild(logo);
-    headerElement.appendChild(searchBox);
+    headerElement.innerHTML = `
+        <h1><img src="${logoSrc}" alt="${logoAlt}" loading="lazy"></h1>
+        <div class="search-box"></div>
+    `;
+
+    let page = 1;
+
+    const searchInput = Input({
+        id: 'search-input',
+        type: 'text',
+        placeholder: '검색',
+        onKeyDown: async (event) => {
+            if (event.code === 'Enter') {
+                document.getElementById('more-movies').remove();
+                const sectionContainer = document.querySelector('.item-view');
+
+                sectionContainer.appendChild(
+                    Button({
+                        classNames: ['btn', 'primary', 'full-width'],
+                        type: 'button',
+                        id: 'more-movies',
+                        name: '더 보기',
+                        onClick: () => {
+                            page += 1;
+                            handleSearch(searchInput.value, page);
+                        }
+                    })
+                );
+
+                await onSearch(event.target.value, page);
+            }
+        }
+    });
+
+    const searchButton = Button({
+        classNames: ['search-button'],
+        name: '검색',
+        type: 'button',
+        onClick: async () => {
+            document.getElementById('more-movies').remove();
+            const sectionContainer = document.querySelector('.item-view');
+
+            sectionContainer.appendChild(
+                Button({
+                    classNames: ['btn', 'primary', 'full-width'],
+                    type: 'button',
+                    id: 'more-movies',
+                    name: '더 보기',
+                    onClick: () => {
+                        page += 1;
+                        handleSearch(searchInput.value, page);
+                    }
+                })
+            );
+
+            const inputValue = document.getElementById('search-input').value;
+            await onSearch(inputValue, page);
+        }
+    });
+
+    const searchBox = headerElement.querySelector('.search-box');
+
+    searchBox.addEventListener('mouseenter', () => {
+        const width = document.querySelector('body').getBoundingClientRect().width;
+
+        if (width <= 390) {
+            const input = document.getElementById('search-input');
+            const logo = document.querySelector('header h1');
+
+            searchBox.classList.add('search-box-toggle');
+            input.classList.add('input-toggle');
+            logo.classList.add('logo-toggle');
+        }
+    });
+
+    searchBox.addEventListener('mouseleave', () => {
+        const width = document.querySelector('body').getBoundingClientRect().width;
+
+        if (width <= 390) {
+            const input = document.getElementById('search-input');
+            const logo = document.querySelector('header h1');
+
+            searchBox.classList.remove('search-box-toggle');
+            input.classList.remove('input-toggle');
+            logo.classList.remove('logo-toggle');
+        }
+    });
+
+    searchBox.appendChild(searchInput);
+    searchBox.appendChild(searchButton);
 
     return headerElement;
 }

리뷰: 저는 이벤트의 이름이 의미하는게 "행위의 발생" 이라고 생각해요.

가령, `onChange` 는 실제로 change가 일어났을 때이고, `onKeyDown` 은 키를 눌렀을 때 입니다.

`onSearch`는 "검색이 되었을 때 발생" 인데, 이 컴포넌트에서 실제로 "검색"이라는 행위가 일어났다고 할 수 있을까요?

지금은 "검색"이라는 행위를 밖에서 주입해주고, 이 컴포넌트 내부에서 일어난 일은 "엔터키를 눌렀음" 입니다.

즉, 이벤트는 "검색했을 때 발생함"을 이야기하고 있는데 검색이라는 기능은 밖에서 주입해줄 수 밖에 없는 상황인거죠.