✨ feat :: 사용자 입력에 관한 컴포넌트 (Label, InputFields, ) 개발

src/components/InputField/InputField.styles.ts

@@ -0,0 +1,97 @@
+import { css } from '@emotion/react';
+
+import type { InputFieldProps } from '@components/InputField/InputField';
+
+import { Theme } from '../../styles/Theme';
+
+export const inputContainerStyling = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: Theme.spacer.spacing2,
+});
+
+export const inputWrapperStyling = (isError: Required<InputFieldProps>['isError']) => {
+  return css({
+    display: 'flex',
+    gap: '12px',
+    alignItems: 'center',
+
+    paddingTop: 0,
+    paddingBottom: 0,
+    borderRadius: Theme.borderRadius.small,
+
+    backgroundColor: isError ? `${Theme.color.red100} !important` : 'transparent',
+
+    transition: 'all .2s ease-in',
+
+    '&:focus-within': {
+      backgroundColor: isError ? Theme.color.red100 : Theme.color.white,
+      boxShadow: isError
+        ? `inset 0 0 0 1px ${Theme.color.red200}`
+        : `inset 0 0 0 1px ${Theme.color.gray300}`,
+    },
+
+    '& svg': {
+      width: '16px',
+      height: '16px',
+    },
+  });
+};
+
+export const getVariantStyling = (variant: Required<InputFieldProps>['variant']) => {
+  const style = {
+    default: css({
+      backgroundColor: Theme.color.gray100,
+    }),
+
+    text: css({
+      backgroundColor: 'transparent',
+    }),
+    focus: css({
+      backgroundColor: 'transparent',
+    }),
+    error: css({
+      backgroundColor: 'transparent',
+    }),
+  };
+
+  return style[variant];
+};
+
+export const getSizeStyling = (size: Required<InputFieldProps>['size']) => {
+  const style = {
+    large: css({
+      padding: '14px 16px',
+
+      fontSize: Theme.text.medium.fontSize,
+      lineHeight: Theme.text.medium.lineHeight,
+    }),
+
+    medium: css({
+      padding: '12px 16px',
+
+      fontSize: Theme.text.medium.fontSize,
+      lineHeight: Theme.text.medium.lineHeight,
+    }),
+
+    small: css({
+      padding: '8px 12px',
+
+      fontSize: Theme.text.small.fontSize,
+      lineHeight: Theme.text.small.lineHeight,
+    }),
+  };
+
+  return style[size];
+};
+
+export const getInputStyling = css({
+  width: '100%',
+  paddingLeft: 0,
+  paddingRight: 0,
+  border: 'none',
+  borderRadius: Theme.borderRadius.small,
+  outline: 0,
+
+  backgroundColor: 'transparent',
+});

src/components/InputField/InputField.tsx

@@ -0,0 +1,48 @@
+import type { Size } from '@type/index';
+import type { ComponentPropsWithRef, ForwardedRef, ReactElement } from 'react';
+import { forwardRef } from 'react';
+
+import {
+  getInputStyling,
+  getSizeStyling,
+  getVariantStyling,
+  inputContainerStyling,
+  inputWrapperStyling,
+} from '@components/InputField/InputField.styles';
+import Label from '@components/TextLabel/TextLabel';
+
+export interface InputFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
+  label?: string;
+  variant?: 'default' | 'text' | 'focus' | 'error';
+  size?: Extract<Size, 'small' | 'medium' | 'large'>;
+  isError?: boolean;
+  icon?: ReactElement;
+}
+
+const InputField = (
+  {
+    label,
+    variant = 'default',
+    size = 'medium',
+    isError = false,
+    icon,
+    ...attributes
+  }: InputFieldProps,
+  ref: ForwardedRef<HTMLInputElement>
+) => {
+  return (
+    <div css={inputContainerStyling}>
+      {label && (
+        <Label id={attributes.id}>
+          {label}
+        </Label>
+      )}
+      <div css={[getSizeStyling(size), inputWrapperStyling(isError), getVariantStyling(variant)]}>
+        {icon}
+        <input ref={ref} css={[getSizeStyling(size), getInputStyling]} {...attributes} />
+      </div>
+    </div>
+  );
+};
+
+export default forwardRef(InputField);

src/components/TextLabel/TextLabel.style.ts

@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+
+
+import { Theme } from '../../styles/Theme';
+
+export const labelStyling = css({
+  fontSize: Theme.text.small.fontSize,
+  lineHeight: Theme.text.small.lineHeight,
+  fontWeight: 600,
+});

src/components/TextLabel/TextLabel.tsx

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+import { labelStyling } from '@components/TextLabel/TextLabel.style';
+
+export interface LabelProps extends ComponentPropsWithoutRef<'label'> {}
+
+const TextLabel = ({ id, children, ...attributes }: LabelProps) => {
+  return (
+    <label css={labelStyling} htmlFor={id} {...attributes}>
+      {children}
+    </label>
+  );
+};
+
+export default TextLabel;

src/stories/InputField.stories.tsx

@@ -0,0 +1,115 @@
+import { containerStyle, informationStyle } from './style';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import InputField from '@components/InputField/InputField';
+
+const meta = {
+  title: 'InputField',
+  component: InputField,
+  argTypes: {
+    label: {
+      control: { type: 'text' },
+    },
+    variant: {
+      control: { type: 'radio' },
+      options: ['default', 'text'],
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['small', 'medium', 'large'],
+    },
+    isError: {
+      control: { type: 'boolean' },
+    },
+  },
+  args: {
+    variant: 'default',
+    size: 'medium',
+    placeholder: 'placeholder',
+    isError: false,
+    id: 'input',
+  },
+} satisfies Meta<typeof InputField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Variants: Story = {
+  render: ({ size, isError, placeholder }) => {
+    return (
+      <ul css={containerStyle}>
+        <li css={informationStyle}>
+          <h6>Default</h6>
+          <InputField size={size} isError={isError} placeholder={placeholder} />
+        </li>
+        <li css={informationStyle}>
+          <h6>Text</h6>
+          <InputField variant="text" size={size} isError={isError} placeholder={placeholder} />
+        </li>
+      </ul>
+    );
+  },
+  argTypes: {
+    variant: {
+      control: false,
+    },
+  },
+};
+
+export const Sizes: Story = {
+  render: ({ variant, isError, placeholder }) => {
+    return (
+      <ul css={containerStyle}>
+        <li css={informationStyle}>
+          <h6>Small</h6>
+          <InputField size="small" variant={variant} isError={isError} placeholder={placeholder} />
+        </li>
+        <li css={informationStyle}>
+          <h6>Medium</h6>
+          <InputField variant={variant} isError={isError} placeholder={placeholder} />
+        </li>
+        <li css={informationStyle}>
+          <h6>Large</h6>
+          <InputField size="large" variant={variant} isError={isError} placeholder={placeholder} />
+        </li>
+      </ul>
+    );
+  },
+  argTypes: {
+    size: {
+      control: false,
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+  argTypes: {
+    variant: {
+      control: false,
+    },
+  },
+};
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+  },
+  argTypes: {
+    variant: {
+      control: false,
+    },
+  },
+};
+
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Label',
+  },
+  name: 'Input with Label',
+};

src/stories/Textlabel.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Label from '@components/TextLabel/TextLabel';
+
+const meta: Meta<typeof Label> = {
+  title: 'TextLabel',
+  component: Label,
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    children: 'Label',
+  },
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {};

tsconfig.json

@@ -27,6 +27,6 @@
   },
   "include": [
     "src/**/*.ts",
-    "src/**/*.tsx"
+    "src/**/*.tsx" 
   ]  
 }