[Feat/#37] Input 컴포넌트 구현

src/assets/svgs/IcFormDot.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react';
+const SvgIcFormDot = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <circle cx={10} cy={10} r={1.5} fill="#454545" />
+  </svg>
+);
+export default SvgIcFormDot;

src/assets/svgs/IcFormDotdot.tsx

@@ -0,0 +1,13 @@
+import type { SVGProps } from 'react';
+const SvgIcFormDotdot = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 10 20"
+    {...props}
+  >
+    <circle cx={5} cy={7} r={1} fill="#454545" />
+    <circle cx={5} cy={13} r={1} fill="#454545" />
+  </svg>
+);
+export default SvgIcFormDotdot;

src/assets/svgs/index.ts

@@ -5,12 +5,16 @@ export { default as IcArrowUp20 } from './IcArrowUp20';
 export { default as IcCheck } from './IcCheck';
 export { default as IcFillLikeOff36 } from './IcFillLikeOff36';
 export { default as IcFillLikeOn36 } from './IcFillLikeOn36';
+export { default as IcFormDot } from './IcFormDot';
+export { default as IcFormDotdot } from './IcFormDotdot';
 export { default as IcGpsmarkerOff } from './IcGpsmarkerOff';
 export { default as IcGpsmarkerOn } from './IcGpsmarkerOn';
 export { default as IcKakao } from './IcKakao';
 export { default as IcLineLikeOff20 } from './IcLineLikeOff20';
 export { default as IcLineLikeOn20 } from './IcLineLikeOn20';
+export { default as IcLocation } from './IcLocation';
 export { default as IcMy } from './IcMy';
+export { default as IcMypageArrowRight24 } from './IcMypageArrowRight24';
 export { default as IcSavedOff24 } from './IcSavedOff24';
 export { default as IcSavedOn24 } from './IcSavedOn24';
 export { default as IcSearchCategoryAnivUnactivate } from './IcSearchCategoryAnivUnactivate';
@@ -19,12 +23,10 @@ export { default as IcSearchCategoryCheerUnactivate } from './IcSearchCategoryCh
 export { default as IcSearchCategorySeasonUnactivate } from './IcSearchCategorySeasonUnactivate';
 export { default as IcToastCheck } from './IcToastCheck';
 export { default as IcToastError } from './IcToastError';
-export { default as IcLocation } from './IcLocation';
 export { default as ImgLogo } from './ImgLogo';
+export { default as ImgMypageProfileLogin } from './ImgMypageProfileLogin';
 export { default as ImgStore11Cm } from './ImgStore11Cm';
 export { default as ImgStore13Cm } from './ImgStore13Cm';
 export { default as ImgStore16Cm } from './ImgStore16Cm';
 export { default as ImgStore19Cm } from './ImgStore19Cm';
 export { default as ImgStore22Cm } from './ImgStore22Cm';
-export { default as ImgMypageProfileLogin } from './ImgMypageProfileLogin';
-export { default as IcMypageArrowRight24 } from './IcMypageArrowRight24';

src/components/common/Input/Input.css.ts

@@ -0,0 +1,42 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { flexGenerator } from '@styles/generator.css';
+import { vars } from '@styles/theme.css';
+
+export const inputContainer = style([
+  flexGenerator('column', 'center', 'flex-start'),
+  {
+    gap: '0.4rem',
+  },
+]);
+
+export const inputTitle = style([
+  flexGenerator(),
+  vars.fonts.body05_m_14,
+  {
+    color: vars.colors.gray700,
+  },
+]);
+
+export const inputStyle = recipe({
+  base: {
+    width: '100%',
+    backgroundColor: vars.colors.gray100,
+    borderRadius: '8px',
+    padding: '1.4rem 2rem',
+    transition: 'border-color 0.3s ease',
+  },
+  variants: {
+    state: {
+      default: { color: vars.colors.gray400 },
+      active: {
+        color: vars.colors.gray900,
+        border: `1px solid ${vars.colors.red1}`,
+      },
+    },
+  },
+  defaultVariants: {
+    state: 'default',
+  },
+});

src/components/common/Input/Input.tsx

@@ -0,0 +1,31 @@
+import { IcFormDot, IcFormDotdot } from '@svgs';
+
+import { inputTitle, inputContainer, inputStyle } from './Input.css';
+
+type InputProps = {
+  inputLabel?: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  placeholder?: string;
+};
+
+const Input = ({ inputLabel, value, onChange, placeholder }: InputProps) => {
+  return (
+    <div className={inputContainer}>
+      <label htmlFor={value} className={inputTitle}>
+        <IcFormDot width={20} height={20} />
+        {inputLabel} <IcFormDotdot width={10} height={20} />
+      </label>
+      <input
+        className={inputStyle({ state: value ? 'active' : 'default' })}
+        type="text"
+        id={value}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+};
+
+export default Input;

src/components/common/index.ts

@@ -6,6 +6,7 @@ import FilteringButton from './FilteringButton/FilteringButton';
 import Header from './Header/Header';
 import IconButton from './IconButton/IconButton';
 import Image from './Image/Image';
+import Input from './Input/Input';
 import Label from './Label/Label';
 import Modal from './Modal/Modal';
 import SocialLoginButton from './SocialLoginButton/SocialLoginButton';
@@ -30,4 +31,5 @@ export {
   BottomSheet,
   DesignCard,
   Toast,
+  Input,
 };

src/stories/Input.stories.tsx

@@ -0,0 +1,30 @@
+import { Input } from '@components';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    inputLabel: { control: 'text' },
+    value: { control: 'text' },
+    onChange: { action: 'changed' },
+    placeholder: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    inputLabel: '픽업 날짜/요일/시간(30분 단위로)',
+    value: '',
+    onChange: () => {},
+    placeholder: '예: 01.03/금/16:30',
+  },
+};