From 62ed2680044e0233c6841ca1e1f3eb1809b674dd Mon Sep 17 00:00:00 2001
From: zoomkoding <zoomkoding@gmail.com>
Date: Sun, 14 Nov 2021 10:45:39 +0900
Subject: [PATCH] =?UTF-8?q?[#46]=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=EC=97=90=20=EB=93=A4=EC=96=B4=EA=B0=80=EB=8A=94=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page-header/style.scss |  2 +-
 src/components/post-search/index.js   | 25 +++++++----------
 src/components/post-search/style.scss | 39 ++++++++++++++++++++++++---
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/components/page-header/style.scss b/src/components/page-header/style.scss
index 805e4d83..b009b49e 100644
--- a/src/components/page-header/style.scss
+++ b/src/components/page-header/style.scss
@@ -4,7 +4,7 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 80px;
+  height: 60px;
 
 
   .page-header {
diff --git a/src/components/post-search/index.js b/src/components/post-search/index.js
index 84d85a0b..ff83006f 100644
--- a/src/components/post-search/index.js
+++ b/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>
       )}
     />
   );
diff --git a/src/components/post-search/style.scss b/src/components/post-search/style.scss
index fcefce7b..d4040ca3 100644
--- a/src/components/post-search/style.scss
+++ b/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);
+    }
 }
\ No newline at end of file