ADCIO-3466) add CurrencyInput component (#100)

* feat: add CurrencyInput component

* fix: update Storybook configuration to use glob pattern for stories

.storybook/main.js

@@ -1,14 +1,14 @@
 module.exports = {
-  framework: "@storybook/react-vite",
-  stories: ["../src/stories/*.stories.@(js|jsx|ts|tsx)"],
+  framework: '@storybook/react-vite',
+  stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-storysource",
-    "@storybook/addon-designs",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-storysource',
+    '@storybook/addon-designs',
   ],
   core: {
-    builder: "@storybook/builder-vite",
+    builder: '@storybook/builder-vite',
   },
 };

src/components/Input/CurrencyInput.tsx

@@ -0,0 +1,69 @@
+import type { DatePickerLocale } from 'src/utils';
+import Icon from '../Icon';
+import { NumberInput } from './NumberInput';
+import type { NumberInputProps } from './NumberInput';
+import { IconProps } from '../Icon/type';
+import { color } from '../styles';
+
+export interface CurrencyInputProps extends Omit<NumberInputProps, 'leftSection'> {
+  language: DatePickerLocale;
+}
+
+export function CurrencyInput(props: CurrencyInputProps) {
+  const { language, ...restProps } = props;
+  return <NumberInput leftSection={<LanguageIcon language={language} />} {...restProps} />;
+}
+
+// TODO: 다른 분기 유틸성 컴포넌트를 추가하는게 좋을것 같다.
+function LanguageIcon({ language }: { language: DatePickerLocale }) {
+  switch (language) {
+    case 'ko':
+      return <Icon.CurrencyWon />;
+    case 'en':
+      return <DollarIcon />;
+    case 'vi':
+      return <DongIcon />;
+    default:
+      return null;
+  }
+}
+
+function DollarIcon({ color: c = color['grey-80'], size = 20 }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 20 20"
+    >
+      <path
+        stroke={c}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M13.733 6.4a2.556 2.556 0 00-1.015-.9 2.907 2.907 0 00-1.385-.3H8.667c-.708 0-1.386.253-1.886.703C6.281 6.353 6 6.963 6 7.6c0 .636.28 1.247.781 1.697.5.45 1.178.703 1.886.703h2.666c.708 0 1.386.253 1.886.703.5.45.781 1.06.781 1.697 0 .636-.281 1.247-.781 1.697-.5.45-1.178.703-1.886.703H8.667a2.908 2.908 0 01-1.385-.3 2.555 2.555 0 01-1.015-.9M10 4v12"
+      ></path>
+    </svg>
+  );
+}
+
+function DongIcon({ color: c = color['grey-80'], size = 20 }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M5 16H14.6M13 13.6V4M13.8 4.8H10.6M6.6 10.4C6.6 11.2487 6.93714 12.0626 7.53726 12.6627C8.13737 13.2629 8.95131 13.6 9.8 13.6C10.6487 13.6 11.4626 13.2629 12.0627 12.6627C12.6629 12.0626 13 11.2487 13 10.4C13 9.55131 12.6629 8.73737 12.0627 8.13726C11.4626 7.53714 10.6487 7.2 9.8 7.2C8.95131 7.2 8.13737 7.53714 7.53726 8.13726C6.93714 8.73737 6.6 9.55131 6.6 10.4Z"
+        stroke={c}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/stories/Input.stories.tsx → src/components/Input/Input.stories.tsx

@@ -11,12 +11,13 @@ import {
   type TextInputProps,
   color,
   ColorPickerInput,
-} from '../components';
-import Icon from '../components/Icon';
-import { BaseInput, type InputTooltipProps } from '../components/Input/InputContainer';
-import { NumberInput } from '../components/Input/NumberInput';
+} from '..';
+import Icon from '../Icon';
+import { BaseInput, type InputTooltipProps } from './InputContainer';
+import { NumberInput } from './NumberInput';
 import { useState } from 'react';
-import { FileInput, FileInputProps } from '../components/Input/FileInput';
+import { FileInput, FileInputProps } from './FileInput';
+import { CurrencyInput } from './CurrencyInput';
 
 export default {
   title: 'Components/Input',
@@ -338,3 +339,43 @@ const IconTextWrapper = styled.div`
   align-items: center;
   gap: 50px;
 `;
+
+export const CurrencyInputDefault: StoryFn<typeof CurrencyInput> = args => {
+  const [value, setValue] = useState<number>(0);
+  return <CurrencyInput {...args} value={value} onChange={value => value && setValue(value)} />;
+};
+
+CurrencyInputDefault.args = {
+  language: 'ko',
+};
+
+CurrencyInputDefault.argTypes = {
+  language: { type: { name: 'enum', value: ['ko', 'en', 'vi'] } },
+};
+
+export const CurrencyLanguageValdationStory = () => {
+  return (
+    <div>
+      <CurrencyInput language="ko" value={0} onChange={() => {}} />
+      <CurrencyInput language="en" value={0} onChange={() => {}} />
+      <CurrencyInput language="vi" value={0} onChange={() => {}} />
+    </div>
+  );
+};
+
+export const CurrencyRangeStory: StoryFn<typeof CurrencyInput> = args => {
+  const [value, setValue] = useState<number>(49);
+  return (
+    <CurrencyInput
+      {...args}
+      value={value}
+      language="ko"
+      onChange={value => value && setValue(value)}
+    />
+  );
+};
+
+CurrencyRangeStory.args = {
+  min: 50,
+  max: 100,
+};

src/components/Input/index.tsx

@@ -4,13 +4,24 @@ import { PasswordInput, PasswordInputProps } from './PasswordInput';
 import { TextInput, TextInputProps } from './TextInput';
 import { ColorPickerInput, ColorPickerInputProps } from './ColorPickerInput';
 import { FileInput, FileInputProps } from './FileInput';
+import { CurrencyInput, CurrencyInputProps } from './CurrencyInput';
+
+export {
+  InputContainer,
+  TextInput,
+  PasswordInput,
+  NumberInput,
+  ColorPickerInput,
+  FileInput,
+  CurrencyInput,
+};
 
-export { InputContainer, TextInput, PasswordInput, NumberInput, ColorPickerInput, FileInput };
 export type {
   InputBaseProps,
   TextInputProps,
   PasswordInputProps,
   NumberInputProps,
   ColorPickerInputProps,
   FileInputProps,
+  CurrencyInputProps,
 };