[#46] 페이지 헤더에 들어가는 검색 기능 구현

Author: zoomkoding

src/components/page-header/style.scss

@@ -4,7 +4,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 80px;
+  height: 60px;
 
 
   .page-header {

src/components/post-search/index.js

@@ -1,25 +1,18 @@
-import { Autocomplete } from '@mui/material';
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { navigate } from 'gatsby';
-import { TextField } from '@material-ui/core';
-import { SearchOutlined } from '@material-ui/icons';
-import { Box } from '@mui/system';
+import { Autocomplete, TextField } from '@mui/material';
+import SearchIcon from '@mui/icons-material/SearchOutlined';
 import './style.scss';
 
 function PostSearch({ posts }) {
-  const [searchState, setSearchState] = useState({
-    query: '',
-    results: posts,
-  });
-
   return (
     <Autocomplete
       freeSolo
       disableClearable
-      options={searchState.results}
+      options={posts}
       onInputChange={(event, value, reason) => {
         if (reason === 'reset' && value) {
-          const item = searchState.results.find((item) => item.title === value);
+          const item = posts.find((item) => item.title === value);
           if (!item) return;
           navigate(item.slug);
         }
@@ -31,10 +24,10 @@ function PostSearch({ posts }) {
       }
       getOptionLabel={(option) => option.title}
       renderInput={(params) => (
-        <Box sx={{ display: 'flex', alignItems: 'flex-end', width: 120 }}>
-          <SearchOutlined sx={{ color: 'action.active', marginRight: 5, mr: 1, my: 0.5 }} />
-          <TextField className="search-input" {...params} size="medium" />
-        </Box>
+        <div className="search-input-wrapper">
+          <SearchIcon className="search-icon" />
+          <TextField className="search-input" variant="standard" {...params} size="medium" />
+        </div>
       )}
     />
   );

src/components/post-search/style.scss

@@ -1,10 +1,43 @@
 @use '../../styles/variables'as *;
+@use '../../styles/mixins'as *;
+
+
+.search-input-wrapper {
+    display: none;
+    align-items: flex-end;
+    width: 180px;
+    margin-bottom: 6px;
+
+    @include md {
+        display: flex;
+    }
+}
+
+.search-icon {
+    margin-right: 2px;
+    font-size: 22px;
+    color: var(--primary-text-color);
+}
 
 .search-input {
     width: 100%;
     height: 100%;
-    font-family: $font-family;
-    color: var(--primary-text-color) !important;
+    margin-left: 5px;
+    padding-left: 2px;
     vertical-align: center;
-    transition: width 300ms ease;
+
+    .MuiInputBase-input {
+        font-family: $font-family;
+        font-size: 15px;
+        color: var(--primary-text-color) !important;
+    }
+
+    .MuiInput-underline:before {
+        border-bottom-color: var(--primary-text-color);
+        border-bottom-width: 1px;
+    }
+
+    .MuiInput-underline:after {
+        border-bottom-color: var(--primary-text-color);
+    }
 }