Input and select story/#26

.storybook/main.ts

@@ -1,4 +1,7 @@
+// optimization: https://storybook.js.org/blog/optimize-storybook-7-6/
+
 import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: ['../app/**/*.mdx', '../app/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -10,7 +13,19 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: '@storybook/nextjs',
-    options: {},
+    options: { builder: { useSWC: true } },
+  },
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        '@': path.resolve(__dirname, '../'),
+      };
+    }
+    return config;
+  },
+  typescript: {
+    reactDocgen: 'react-docgen', // or false if you don't need docgen at all
   },
   docs: {
     autodocs: 'tag',

app/ui/view/atom/text-input/text-input.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+
+import TextInput from './text-input';
+
+const meta = {
+  title: 'ui/view/atom/TextInput',
+  component: TextInput,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof TextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// fix: border 색깔 왜이럼?
+export const Default: Story = {
+  args: {
+    defaultValue: 'default',
+  },
+};
+
+// fix: 색 안변함
+export const Disabled: Story = {
+  args: {
+    defaultValue: 'Disabled',
+    disabled: true,
+  },
+};
+
+export const Password: Story = {
+  args: {
+    type: 'password',
+    defaultValue: 'asd',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    defaultValue: '',
+    icon: MagnifyingGlassIcon,
+  },
+};
+
+export const DisabledWithIcon: Story = {
+  args: {
+    defaultValue: 'Disabled with icon',
+    disabled: true,
+    icon: MagnifyingGlassIcon,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    defaultValue: '',
+    error: true,
+    errorMessage: 'error message',
+  },
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    defaultValue: '',
+    placeholder: 'placeholder',
+  },
+};

app/ui/view/atom/text-input.tsx → app/ui/view/atom/text-input/text-input.tsx

@@ -44,7 +44,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(function Te
           className,
         )}
       >
-        {Icon ? <Icon className="shrink-0 h-5 w-5 ml-2.5 text-gray-400" /> : null}
+        {Icon ? <Icon className="shrink-0 h-5 w-5 ml-2.5 text-gray-6" /> : null}
         <input
           {...props}
           ref={ref}
@@ -53,10 +53,10 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(function Te
           type={type}
           className={twMerge(
             'w-full focus:outline-none focus:ring-0 border-none bg-transparent text-sm rounded-lg transition duration-100 py-2',
-            'text-color-gray-700',
+            'text-black-1',
             Icon ? 'pl-2' : 'pl-3',
             error ? 'pr-3' : 'pr-4',
-            disabled ? 'placeholder:text-gray-400' : 'placeholder:text-gray-500',
+            disabled ? 'text-gray-6 placeholder:text-gray-6' : 'placeholder:text-gray-6',
           )}
           placeholder={placeholder}
           disabled={disabled}
@@ -65,7 +65,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(function Te
           }}
         />
       </div>
-      {error && errorMessage ? <p className={twMerge('text-sm text-red-500 mt-1')}>{errorMessage}</p> : null}
+      {error && errorMessage ? <p className={twMerge('text-sm text-etc-red mt-1')}>{errorMessage}</p> : null}
     </>
   );
 });

app/ui/view/molecule/select/select-root.tsx

@@ -60,7 +60,7 @@ export const SelectRoot = React.forwardRef<HTMLInputElement, SelectProps>(functi
               <Icon className={twMerge('flex-none h-5 w-5', 'text-gray-600')} />
             </span>
           )}
-          <span className="block truncate p-0">{selectedPlaceholder}</span>
+          <span className={twMerge('block truncate p-0', disabled && 'text-gray-6')}>{selectedPlaceholder}</span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center mr-3">
             <ChevronUpDownIcon className={twMerge('flex-none h-5 w-5', 'text-gray-400')} />
           </span>

app/ui/view/molecule/select/select.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ShieldExclamationIcon } from '@heroicons/react/24/outline';
+
+import Select from '.';
+
+const meta = {
+  title: 'ui/view/molecule/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-52">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type SelectTemplateProps = {
+  placeholder: string;
+  defaultValue?: string;
+  icon?: React.ElementType;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+};
+
+const SelectTemplate: Story = {
+  render: ({ placeholder, ...arg }: SelectTemplateProps) => {
+    return (
+      <Select placeholder={placeholder} {...arg}>
+        <Select.Item value="1" placeholder="data1" />
+        <Select.Item value="2" placeholder="data2" />
+        <Select.Item value="3" placeholder="data3" />
+      </Select>
+    );
+  },
+};
+
+export const Default = {
+  ...SelectTemplate,
+  args: {
+    placeholder: 'Select..',
+  },
+};
+
+export const Disabled = {
+  ...SelectTemplate,
+  args: {
+    placeholder: 'Select..',
+    disabled: true,
+  },
+};
+
+export const WithDefaultValue = {
+  ...SelectTemplate,
+  args: {
+    placeholder: 'Select..',
+    defaultValue: '2',
+  },
+};
+
+export const WithIcon = {
+  ...SelectTemplate,
+  args: {
+    placeholder: 'Select..',
+    icon: ShieldExclamationIcon,
+  },
+};
+
+export const WithError = {
+  ...SelectTemplate,
+  args: {
+    placeholder: 'Select..',
+    error: true,
+    errorMessage: 'error message',
+  },
+};

app/utils/style/color.util.ts

@@ -2,10 +2,10 @@ import { twMerge } from 'tailwind-merge';
 
 export const getInputColors = (isDisabled: boolean, hasError = false) => {
   return twMerge(
-    isDisabled ? 'bg-gray-100' : 'bg-white',
+    isDisabled ? 'bg-gray-1' : 'bg-white',
     !isDisabled && 'hover:bg-gray-50',
-    isDisabled && 'bg-gray-100',
-    hasError && 'text-red-500',
-    hasError ? 'border-red-500' : 'border-gray-200',
+    isDisabled && 'bg-gray-1',
+    hasError && 'text-etc-red',
+    hasError ? 'border-etc-red' : 'border-gray-2',
   );
 };

tailwind.config.ts

@@ -38,9 +38,11 @@ const config: Config = {
         'black-2': '#2F2F2F',
         'black-3': '#262626',
         'black-4': '#090909',
-        yellow: '#FFF38B',
-        pink: '#FFC8C8',
-        red: '#FF6D6D',
+        etc: {
+          yellow: '#FFF38B',
+          pink: '#FFC8C8',
+          red: '#FF6D6D',
+        },
         'white-hover': '#f3f4f6',
       },
     },