ADCIO-3112) feat: option list

src/components/ColorPicker/index.tsx

@@ -4,7 +4,7 @@ import { HexAlphaColorPicker } from 'react-colorful';
 import styled from '@emotion/styled';
 
 import { TextInput } from '../Input';
-import useClickOutside from '../Input/hook';
+import useClickOutside from '../../utils/hooks/useClickOutside';
 import { B3 } from '../Text';
 import { color } from '../styles';
 

src/components/OptionList/index.ts

@@ -0,0 +1,4 @@
+import { type BasicOptionItem, OptionList, type SectionOptionItem } from './OptionList';
+
+export { OptionList };
+export type { BasicOptionItem, SectionOptionItem };

src/components/Select/Select.tsx

@@ -2,7 +2,7 @@ import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState }
 
 import styled from '@emotion/styled';
 
-import { type BasicOptionItem, OptionList } from './OptionList';
+import { type BasicOptionItem, OptionList } from '../OptionList';
 import { SelectInput, type SelectInputBaseProps } from './SelectInput';
 import Icon from '../Icon';
 

src/components/Select/index.ts

@@ -1,5 +1,3 @@
-import { type BasicOptionItem, OptionList, type SectionOptionItem } from './OptionList';
 import { Select } from './Select';
 
-export { OptionList, Select };
-export type { BasicOptionItem, SectionOptionItem };
+export { Select };

src/components/index.ts

@@ -21,3 +21,4 @@ export * from './Tooltip';
 export * from './Topbar';
 export * from './Filter';
 export * from './Spinner';
+export * from './OptionList';

src/stories/OptionList.stories.tsx

@@ -0,0 +1,98 @@
+import { StoryFn } from '@storybook/react';
+
+import styled from '@emotion/styled';
+
+import { type BasicOptionItem, OptionList, SectionOptionItem } from '../components';
+import Icon from '../components/Icon';
+
+export default {
+  title: 'Components/OptionList',
+  component: OptionList,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <Container>
+        <Story />
+      </Container>
+    ),
+  ],
+  parameters: {
+    design: {
+      type: 'figma',
+      // TODO: 나경
+      url: 'https://www.figma.com/file/tN7Q8dJZqVsjo2FWflOKfu/CDS(Corca-Design-System)?type=design&node-id=435-14814&mode=design&t=8a3wutSi3o4LHHer-4',
+    },
+  },
+};
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  min-height: 600px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 50px;
+  text-align: center;
+  line-height: normal;
+  gap: 20px;
+`;
+
+const BASIC: BasicOptionItem[] = [
+  { label: 'Label1 with Icon', value: '1', icon: Icon.QuestionCircle },
+  {
+    label: 'Label2 with Icon and disabled',
+    value: '2',
+    disabled: true,
+    icon: Icon.Shop,
+  },
+  { label: 'Label3 with just disabled', value: '3', disabled: true },
+  { label: 'Label4', value: '4' },
+  { label: 'Label5', value: '5' },
+];
+
+const SECTION_EXAMPLE: SectionOptionItem[] = [
+  {
+    sectionTitle: 'Section 1',
+    sectionItems: BASIC.slice(0, 2),
+  },
+  {
+    sectionTitle: 'Section 2',
+    sectionItems: BASIC.slice(2),
+  },
+];
+
+const Template: StoryFn<typeof OptionList> = args => {
+  return <OptionList {...args} />;
+};
+
+export const BasicControllable = Template.bind({});
+BasicControllable.args = {
+  value: '',
+  onChange: () => {},
+  width: 400,
+  option: { type: 'basic', items: BASIC },
+};
+
+export function Basic() {
+  return (
+    <OptionList
+      width={400}
+      option={{ type: 'basic', items: BASIC }}
+      onChange={() => {}}
+      value={''}
+    />
+  );
+}
+
+export function Section() {
+  return (
+    <OptionList
+      width={400}
+      option={{ type: 'section', items: SECTION_EXAMPLE }}
+      onChange={value => {}}
+      value={''}
+    />
+  );
+}

src/utils/hooks/index.tsx

@@ -0,0 +1,3 @@
+import useClickOutside from './useClickOutside';
+
+export { useClickOutside };

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './date';
 export * from './types/locale.types';
+export * from './hooks';