From b6655f592e28075adf38c17f98123962faee6d2c Mon Sep 17 00:00:00 2001
From: Thunnini <yunjh1994@gmail.com>
Date: Tue, 20 Dec 2022 17:13:36 +0900
Subject: [PATCH] Minor transition improvements to search input component

---
 components/search-input/index.tsx | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/components/search-input/index.tsx b/components/search-input/index.tsx
index d585012..ceb9c04 100644
--- a/components/search-input/index.tsx
+++ b/components/search-input/index.tsx
@@ -1,4 +1,4 @@
-import { Dispatch, FunctionComponent, SetStateAction } from "react";
+import { Dispatch, FunctionComponent, SetStateAction, useState } from "react";
 
 import styled from "styled-components";
 import color from "../../styles/color";
@@ -13,9 +13,11 @@ interface Props {
 export const SearchInput: FunctionComponent<Props> = (props) => {
   const { searchValue, setSearchValue } = props;
 
+  const [isFocused, setIsFocused] = useState(false);
+
   return (
     <SearchContainer>
-      <SearchIconContainer>
+      <SearchIconContainer focused={isFocused}>
         <SearchIcon />
       </SearchIconContainer>
 
@@ -26,6 +28,12 @@ export const SearchInput: FunctionComponent<Props> = (props) => {
         onChange={(event) => {
           setSearchValue(event.target.value);
         }}
+        onFocus={() => {
+          setIsFocused(true);
+        }}
+        onBlur={() => {
+          setIsFocused(false);
+        }}
       />
     </SearchContainer>
   );
@@ -44,11 +52,19 @@ const SearchContainer = styled.div`
   background-color: ${color.grey["700"]};
 `;
 
-const SearchIconContainer = styled.div`
+const SearchIconContainer = styled.div<{
+  focused: boolean;
+}>`
   position: relative;
 
-  width: 1.3rem;
+  width: ${({ focused }) => (focused ? 0 : "1.3rem")};
   height: 1.3rem;
+
+  transition: width 0.2s ease-out;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const SearchText = styled.input`
@@ -75,5 +91,10 @@ const SearchText = styled.input`
     outline: none;
 
     width: 10rem;
+
+    ::placeholder,
+    ::-webkit-input-placeholder {
+      color: ${color.grey["600"]};
+    }
   }
 `;