feat: Search 컴포넌트 - 베이스 UI 구현

src/app/page.tsx

@@ -1,10 +1,12 @@
 import Header from '@/components/Layouts/Header/Header';
+import Search from '@/components/Layouts/Search/Search';
 import * as styles from '@/styles/rootStyles.css';
 
 export default function RootPage() {
   return (
     <div className={styles.wrapper}>
       <Header />
+      <Search />
     </div>
   );
 }

src/components/Layouts/Search/Search.css.ts

@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  backgroundColor: '#fff',
+
+  width: '30dvw',
+  height: '50px',
+  padding: '10px 20px',
+  borderRadius: '50px',
+
+  cursor: 'pointer',
+});
+
+export const textInput = style({
+  outlineColor: '#fff',
+  fontSize: '16px',
+});
+
+export const glassesWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  //   justifyContent: 'flex-end',
+  //   width: '5%',
+});
+
+export const tagWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  //   width: '95%',
+  marginRight: 'auto',
+});
+
+export const tagBox = style({
+  padding: '6px',
+  borderRadius: '50px',
+  backgroundColor: '#6A6868',
+  marginRight: '10px',
+});

src/components/Layouts/Search/Search.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+import * as styles from './Search.css';
+
+export default function Search() {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.tagWrapper}>
+        {new Array(5).fill('React').map((el) => (
+          <div key="test" className={styles.tagBox}>
+            {el}
+          </div>
+        ))}
+      </div>
+      <div className={styles.glassesWrapper}>
+        <Image src="/images/buttons/readingGlasses.png" alt="ReadingGlasses" width={22} height={30} />
+      </div>
+    </div>
+  );
+}

src/styles/rootStyles.css.ts

@@ -2,6 +2,6 @@ import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
   display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'center',
+  flexDirection: 'column',
+  alignItems: 'center',
 });