feat: SearchField

src/ui/search-field/index.ts

@@ -0,0 +1 @@
+export { SearchField, type SearchFieldProps } from './search-field.tsx';

src/ui/search-field/search-field.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SearchField } from './search-field.tsx';
+
+const meta: Meta = {
+  title: 'ui/SearchField',
+  component: SearchField,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    hasResetButton: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    variant: {
+      options: ['default', 'home'],
+      control: {
+        type: 'radio',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SearchField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Default',
+    hasResetButton: true,
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'With Placeholder',
+    placeholder: '건강 불편 증상을 검색해 보세요',
+  },
+};
+
+export const Home: Story = {
+  args: {
+    label: 'Home',
+    value: 'Home에서 검색 창',
+    variant: 'home',
+  },
+};

src/ui/search-field/search-field.styles.css.ts

@@ -0,0 +1,67 @@
+import { style } from '@vanilla-extract/css';
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { typography } from '../typography.css.ts';
+import { globalVars } from './../theme.css.ts';
+
+const base = style([
+  typography('head_3_16_r'),
+  {
+    color: globalVars.color.black,
+    outline: 'none',
+    borderRadius: 20,
+    border: 'none',
+    width: '100%',
+    '::placeholder': {
+      color: globalVars.color.grey500,
+    },
+  },
+]);
+
+export const searchFieldVariants = recipe({
+  base,
+  variants: {
+    variant: {
+      default: {
+        padding: '8px 32px 8px 40px',
+        backgroundColor: globalVars.color.grey200,
+      },
+      home: {
+        padding: '14px 27px 14px 52px',
+        backgroundColor: globalVars.color.white,
+        border: '1px solid',
+        borderColor: globalVars.color.mainblue500,
+        borderRadius: 25,
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export type SearchFieldVariants = Exclude<
+  RecipeVariants<typeof searchFieldVariants>,
+  undefined
+>;
+
+export const searchFieldContainer = style({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const SearchFieldLeftElement = style({
+  position: 'absolute',
+  left: 12,
+  height: '100%',
+});
+
+export const SearchFieldRightElement = style({
+  all: 'unset',
+  position: 'absolute',
+  right: 4,
+  cursor: 'pointer',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+});

src/ui/search-field/search-field.tsx

@@ -0,0 +1,35 @@
+import { ComponentProps } from 'react';
+import { DeleteCir, Search } from '../../assets/index.ts';
+import { cx } from '../util.ts';
+import * as styles from './search-field.styles.css.ts';
+
+export type SearchFieldProps = ComponentProps<'input'> &
+  styles.SearchFieldVariants &
+  Partial<{
+    hasResetButton: boolean;
+    onClickResetButton: VoidFunction;
+  }>;
+
+export const SearchField = (props: SearchFieldProps) => {
+  const { className, variant, hasResetButton, ...restProps } = props;
+
+  return (
+    <div className={styles.searchFieldContainer}>
+      <Search className={styles.SearchFieldLeftElement} />
+      <input
+        {...restProps}
+        className={cx(
+          styles.searchFieldVariants({
+            variant,
+          }),
+          className,
+        )}
+      />
+      {hasResetButton && (
+        <button className={styles.SearchFieldRightElement}>
+          <DeleteCir />
+        </button>
+      )}
+    </div>
+  );
+};