Merge branch 'main' into SKRF-167-feat-tab-component

src/components/SearchInputForm/SearchInputForm.style.ts

@@ -0,0 +1,38 @@
+import Theme from '@/styles/Theme';
+import styled from '@emotion/styled';
+
+const SearchInputContainerStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60%;
+  height: 100%;
+`;
+
+const SearchBarStyled = styled.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  width: 90%;
+  height: 60%;
+  border: 0.05rem solid ${Theme.color.lineColor};
+  border-radius: 1rem;
+`;
+
+const SearchInputStyled = styled.input`
+  flex-grow: 1;
+  height: 70%;
+  margin: 0 1rem;
+  outline: none;
+  border: none;
+`;
+
+const IconContainerStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 0.5rem;
+  color: ${Theme.color.lineColor};
+`;
+
+export { SearchInputContainerStyled, SearchBarStyled, SearchInputStyled, IconContainerStyled };

src/components/SearchInputForm/SearchInputForm.tsx

@@ -0,0 +1,23 @@
+import { CiSearch } from 'react-icons/ci';
+
+import {
+  IconContainerStyled,
+  SearchBarStyled,
+  SearchInputContainerStyled,
+  SearchInputStyled,
+} from './SearchInputForm.style';
+
+const SearchInputForm = () => {
+  return (
+    <SearchInputContainerStyled>
+      <SearchBarStyled>
+        <SearchInputStyled />
+        <IconContainerStyled>
+          <CiSearch size="1.5rem" />
+        </IconContainerStyled>
+      </SearchBarStyled>
+    </SearchInputContainerStyled>
+  );
+};
+
+export default SearchInputForm;

src/pages/MainPage.tsx

@@ -1,5 +1,14 @@
+import SearchInputForm from '@/components/SearchInputForm/SearchInputForm';
+import Header from '@/components/common/Header/Header';
+
 const MainPage = () => {
-  return <div>main</div>;
+  return (
+    <div>
+      <Header>
+        <SearchInputForm />
+      </Header>
+    </div>
+  );
 };
 
 export default MainPage;