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') {