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

src/App.tsx

@@ -1,7 +1,9 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { useState } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
+import { Input } from '@components';
 import { ToastProvider } from '@contexts';
 import { pageRoutes } from '@routes';
 
@@ -12,10 +14,22 @@ import '@styles/global.css';
 const router = createBrowserRouter(pageRoutes);
 
 const App = () => {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
   return (
     <QueryClientProvider client={queryClient}>
       <ToastProvider>
         <RouterProvider router={router} />
+        <Input
+          inputLabel={'성함/연락처'}
+          value={inputValue}
+          onChange={handleInputChange}
+          placeholder={'입력하세요'}
+        />
       </ToastProvider>
       <div style={{ fontSize: '16px' }}>
         <ReactQueryDevtools />

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,49 @@
+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: [
+    vars.fonts.body07_r_14,
+    {
+      width: '100%',
+      backgroundColor: vars.colors.white,
+      border: `1px solid ${vars.colors.gray300}`,
+      borderRadius: '8px',
+      padding: '1.4rem 2rem',
+      selectors: {
+        '&:focus': {
+          border: `1px solid ${vars.colors.gray500}`,
+        },
+      },
+    },
+  ],
+  variants: {
+    state: {
+      default: { color: vars.colors.gray400 },
+      active: {
+        color: vars.colors.gray900,
+      },
+    },
+  },
+  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',
+  },
+};