diff --git a/src/shared/ui/Accordion/Accordion.stories.tsx b/src/shared/ui/Accordion/Accordion.stories.tsx index a0178f88..1defd073 100644 --- a/src/shared/ui/Accordion/Accordion.stories.tsx +++ b/src/shared/ui/Accordion/Accordion.stories.tsx @@ -63,6 +63,7 @@ export const NoneArrowAccordion: Story = { ); }, }; + export const InputAccordion: Story = { render: () => { return ( @@ -74,3 +75,18 @@ export const InputAccordion: Story = { ); }, }; + +export const DefaultValueAccordion: Story = { + render: () => { + return ( + + + 초기 render시 조회되지 않아요 + + + 초기 render시 조회돼요 + + + ); + }, +}; diff --git a/src/shared/ui/Accordion/Accordion.tsx b/src/shared/ui/Accordion/Accordion.tsx index 95299930..b68011c6 100644 --- a/src/shared/ui/Accordion/Accordion.tsx +++ b/src/shared/ui/Accordion/Accordion.tsx @@ -17,6 +17,11 @@ type AccordionRootProps = { * The content of the Accordion, typically AccordionItem components. */ children: ReactNode; + /** + * The default value of the Accordion item that should be open on initial render. + */ + defaultValue?: string[]; + /** * Additional class names to apply to the AccordionRoot. */ @@ -27,9 +32,11 @@ export function AccordionRoot({ type = 'single', className = '', children, + defaultValue, ...props }: AccordionRootProps) { - const [openItems, setOpenItems] = useState([]); + const defaultOpenItem = defaultValue ? defaultValue : []; + const [openItems, setOpenItems] = useState(defaultOpenItem); const toggleItem = (value: string) => { if (type === 'single') {