Skip to content

[REFACTOR] 아코디언 컴포넌트 아이콘 위치 조정 및 크기 조정 #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JangYEhoon00 merged 4 commits into from
Mar 10, 2026
Merged

[REFACTOR] 아코디언 컴포넌트 아이콘 위치 조정 및 크기 조정 #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ce48dc3
refactor: 아이콘 크기, 위치 조정
JangYEhoon00 Mar 4, 2026
3ca1cd7
refactor: 속성 객체화 및 아이콘 사이즈 정규화
JangYEhoon00 Mar 6, 2026
510e296
refactor: 아이콘 사이즈 조절
JangYEhoon00 Mar 6, 2026
3066185
refactor: 아이콘 기본값 크기 변경
JangYEhoon00 Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/shared/ui/Accordion/Accordion.context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ type AccordionContextType = {
type: 'single' | 'multiple';
openItems: string[];
toggleItem: (value: string) => void;
iconSize?: number;
};

export const AccordionContext = createContext<AccordionContextType | null>(null);
Expand Down
56 changes: 56 additions & 0 deletions src/shared/ui/Accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,59 @@ export const DefaultValueAccordion: Story = {
);
},
};
export const IconSizeAccordion: Story = {
Copy link
Copy Markdown
Contributor

@keemsebin keemsebin Mar 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iconsize를 컨트롤할수있는 속성이 있음 좋을 것 같네용

Copy link
Copy Markdown
Collaborator Author

@JangYEhoon00 JangYEhoon00 Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

510e296 수정완료입니당

render: () => {
return (
<Accordion type="single" iconSize={12}>
<AccordionItem value="item-1" trigger={<div>사용자 입력값에 따라</div>}>
<div>아이콘의 크기를 조절합니다.</div>
</AccordionItem>
</Accordion>
);
},
};

export const IconAlignAccordion: Story = {
render: () => {
return (
<Accordion type="multiple">
<AccordionItem
value="item-1"
trigger={
<div>
<div>질문 1</div>
<div>아이콘은 요소의 상단에 위치합니다</div>
</div>
}
iconAlign="start"
>
<div>아이콘 정렬 top</div>
</AccordionItem>
<AccordionItem
value="item-2"
trigger={
<div>
<div>질문 2</div>
<div>아이콘은 요소의 가운데 위치합니다</div>
</div>
}
iconAlign="center"
>
<div>아이콘 정렬 center</div>
</AccordionItem>
<AccordionItem
value="item-3"
trigger={
<div>
<div>아이콘 정렬 bottom</div>
<div>아이콘은 요소의 하단에 위치합니다</div>
</div>
}
iconAlign="end"
>
<div>아이콘 정렬 bottom</div>
</AccordionItem>
</Accordion>
);
},
};
41 changes: 38 additions & 3 deletions src/shared/ui/Accordion/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,18 @@ type AccordionRootProps = {
* Additional class names to apply to the AccordionRoot.
*/
className?: string;
/**
* Default icon size for all AccordionItems.
*/
iconSize?: number;
};

export function AccordionRoot({
type = 'single',
className = '',
children,
defaultValue,
iconSize,
...props
}: AccordionRootProps) {
const defaultOpenItem = defaultValue ? defaultValue : [];
Expand All @@ -49,7 +54,7 @@ export function AccordionRoot({
};

return (
<AccordionContext.Provider value={{ openItems, toggleItem, type }}>
<AccordionContext.Provider value={{ openItems, toggleItem, type, iconSize }}>
<div className={cn(`w-full`, className)} {...props}>
{children}
</div>
Expand Down Expand Up @@ -83,6 +88,24 @@ type AccordionItemProps = {
* The class name for the content container.
*/
contentClassName?: string;
/**
* Additional class names for the arrow icon wrapper.
*/
iconWrapperClassName?: string;
/**
* Additional class names for the SVG arrow icon itself.
*/
iconClassName?: string;
/**
* icon size
* @default 20
*/
iconSize?: number;
Comment on lines +99 to +103
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

JSDoc의 @default 값이 실제 기본값과 불일치합니다.

JSDoc에서 @default 20으로 명시되어 있지만, 실제 코드(Line 146)에서는 iconSize ?? context.iconSize ?? 13.5로 기본값이 13.5입니다. 문서와 구현이 일치하도록 수정이 필요합니다.

📝 수정 제안 
   /**
    * icon size
-   * `@default` 20
+   * `@default` 13.5
    */
   iconSize?: number;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/**
* icon size
* @default 20
*/
iconSize?: number;
/**
* icon size
* `@default` 13.5
*/
iconSize?: number;
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/shared/ui/Accordion/Accordion.tsx` around lines 99 - 103, The JSDoc
`@default` for the iconSize prop is incorrect: update the JSDoc comment for
iconSize in Accordion.tsx to match the implementation (iconSize ??
context.iconSize ?? 13.5) by changing `@default` 20 to `@default` 13.5 so the
documented default aligns with the actual default used by the iconSize prop.

/**
* icon vertical alignment position.
* @default 'center'
*/
iconAlign?: 'start' | 'center' | 'end';
};

const ACCORDION_MOTION = {
Expand All @@ -95,6 +118,12 @@ const ACCORDION_MOTION = {
},
};

const ALIGN_ICON = {
start: 'self-start',
center: 'self-center',
end: 'self-end',
};

const isInteractiveElement = (element: HTMLElement) => {
const INTERACTIVE_TAGS = ['INPUT', 'TEXTAREA', 'A'];
return INTERACTIVE_TAGS.includes(element.tagName);
Expand All @@ -106,10 +135,16 @@ export function AccordionItem({
value,
btnClassName,
contentClassName,
iconWrapperClassName,
iconClassName,
iconSize,
iconAlign = 'center',
children,
...props
}: AccordionItemProps) {
const context = useAccordion();
const rawIconSize = iconSize ?? context.iconSize ?? 13.5;
const normalizedIconSize = Number.isFinite(rawIconSize) && rawIconSize > 0 ? rawIconSize : 13.5;
const uid = useId();
const triggerId = `accordion-trigger-${uid}`;
const contentId = `accordion-content-${uid}`;
Expand Down Expand Up @@ -145,9 +180,9 @@ export function AccordionItem({
<motion.div
animate={{ rotate: isOpen ? 180 : 0 }}
transition={{ duration: 0.2 }}
className="ml-2"
className={cn('ml-2', ALIGN_ICON[iconAlign], iconWrapperClassName)}
>
<Icon name="arrowDown" size={20} />
<Icon name="arrowDown" size={normalizedIconSize} className={iconClassName} />
</motion.div>
)}
</div>
Expand Down