input 옮기기 & 리드미 작성

.storybook/preview-body.html

@@ -0,0 +1,2 @@
+<div id="custom-root"></div>
+<div id="dialog-container"></div>

src/Input/Input.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Input from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Input',
+  component: Input,
+  argTypes: {
+    rightIcon: {
+      control: { type: 'boolean' },
+      mapping: { false: '', true: '🔎' },
+    },
+  },
+  args: {
+    customWidth: '300px',
+    isError: false,
+    rightIcon: false,
+    errorMessage: '',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {};
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: '상품 이름을 검색하세요.',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    placeholder: '상품 이름을 검색하세요.',
+    rightIcon: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    isError: true,
+    errorMessage: '10글자 이내로 입력해주세요.',
+  },
+};
+
+export const Disabled: Story = {
+  render: () => <Input disabled />,
+};

src/Input/Input.tsx

@@ -0,0 +1,98 @@
+import type { ComponentPropsWithRef, ForwardedRef, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+import Text from '../Text';
+
+export interface InputProps extends ComponentPropsWithRef<'input'> {
+  /**
+   *  Input 컴포넌트의 너비값입니다.
+   */
+  customWidth?: string;
+  /**
+   * Input 컴포넌트의 최소 너비값입니다.
+   */
+  minWidth?: string;
+  /**
+   * Input value에 에러가 있는지 여부입니다.
+   */
+  isError?: boolean;
+  /**
+   * Input 컴포넌트 오른쪽에 위치할 아이콘입니다.
+   */
+  rightIcon?: ReactNode;
+  /**
+   * isError가 true일 때 보여줄 에러 메시지입니다.
+   */
+  errorMessage?: string;
+}
+
+const Input = forwardRef(
+  (
+    { customWidth = '300px', minWidth, isError = false, rightIcon, errorMessage, ...props }: InputProps,
+    ref: ForwardedRef<HTMLInputElement>
+  ) => {
+    return (
+      <>
+        <InputContainer customWidth={customWidth} minWidth={minWidth}>
+          <CustomInput ref={ref} isError={isError} {...props} />
+          {rightIcon && <IconWrapper>{rightIcon}</IconWrapper>}
+        </InputContainer>
+        {isError && <ErrorMessage>{errorMessage}</ErrorMessage>}
+      </>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export default Input;
+
+type InputContainerStyleProps = Pick<InputProps, 'customWidth' | 'minWidth'>;
+type CustomInputStyleProps = Pick<InputProps, 'isError'>;
+
+const InputContainer = styled.div<InputContainerStyleProps>`
+  position: relative;
+  min-width: ${({ minWidth }) => minWidth ?? 0};
+  max-width: ${({ customWidth }) => customWidth};
+  text-align: center;
+`;
+
+const CustomInput = styled.input<CustomInputStyleProps>`
+  width: 100%;
+  height: 40px;
+  padding: 10px 0 10px 12px;
+  color: ${({ isError, theme }) => (isError ? theme.colors.error : theme.textColors.default)};
+  border: 1px solid ${({ isError, theme }) => (isError ? theme.colors.error : theme.borderColors.default)};
+  border-radius: 5px;
+
+  &:focus {
+    border: 2px solid ${({ isError, theme }) => (isError ? theme.colors.error : theme.borderColors.strong)};
+    outline: none;
+  }
+
+  &:disabled {
+    border: 1px solid ${({ theme }) => theme.borderColors.disabled};
+    background: ${({ theme }) => theme.colors.gray1};
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.textColors.disabled};
+    font-size: ${({ theme }) => theme.fontSizes.sm};
+  }
+`;
+
+const IconWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-right: 8px;
+`;
+
+const ErrorMessage = styled(Text)`
+  color: ${({ theme }) => theme.colors.error};
+  font-size: ${({ theme }) => theme.fontSizes.xs};
+`;

src/Input/index.ts

@@ -0,0 +1,5 @@
+import Input from './Input';
+
+export type { InputProps } from './Input';
+
+export default Input;

src/index.ts

@@ -14,3 +14,4 @@ export { default as Link } from './Link';
 export { default as Spacing } from './Spacing';
 export { default as Text } from './Text';
 export { default as Textarea } from './Textarea';
+export { default as Input } from './Input';