refactor: Input을 기존에 있던 공통 컴포넌트로 변경

woowacourse-teams · Nov 8, 2024 · eea33b4 · eea33b4
1 parent 7ba27f8
commit eea33b4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 13 deletions.
diff --git a/frontend/src/components/common/searchBar/SearchBar.style.ts b/frontend/src/components/common/searchBar/SearchBar.style.ts
@@ -3,21 +3,9 @@ import styled from "styled-components";
 export const SearchBarContainer = styled.div`
   position: relative;
   width: 100%;
-  height: 100%;
   height: 40px;
 `;
 
-export const SearchBar = styled.input`
-  width: 100%;
-  height: 100%;
-  padding: 0.6rem 3rem 0.6rem 0.6rem;
-
-  font: ${({ theme }) => theme.TEXT.small};
-
-  border: 1px solid ${({ theme }) => theme.COLOR.grey1};
-  border-radius: 6px;
-`;
-
 export const SearchIconWrapper = styled.div`
   cursor: pointer;
 

diff --git a/frontend/src/components/common/searchBar/SearchBar.tsx b/frontend/src/components/common/searchBar/SearchBar.tsx
@@ -1,6 +1,7 @@
 import * as S from "./SearchBar.style";
 import { InputHTMLAttributes } from "react";
 import Icon from "@/components/common/icon/Icon";
+import { Input } from "@/components/common/input/Input";
 
 interface SearchBarProps extends InputHTMLAttributes<HTMLInputElement> {
   value: string;
@@ -17,7 +18,12 @@ const SearchBar = ({ value, handleValue, handleSearch, ...props }: SearchBarProp
 
   return (
     <S.SearchBarContainer>
-      <S.SearchBar value={value} onChange={handleValue} onKeyDown={handleKeyDown} {...props} />
+      <Input
+        value={value}
+        onChange={handleValue}
+        onKeyDown={handleKeyDown}
+        style={{ paddingRight: "3rem", height: "40px" }}
+      />
       <S.SearchIconWrapper onClick={handleSearch}>
         <Icon kind="search" />
       </S.SearchIconWrapper>