feat: Modal actionButton에 아이콘 지원 추가

[choihooo]

📝 Summary

Modal 컴포넌트의 actionButton에 leftIcon, rightIcon 지원 추가

🎯 Changes

Added

• Modal actionButton 아이콘 지원
  • leftIcon: 버튼 왼쪽에 표시할 아이콘
  • rightIcon: 버튼 오른쪽에 표시할 아이콘
  • Button 컴포넌트와 동일한 방식으로 렌더링

Interface Changes

actionButton?: {
  label: string;
  onClick?: () => void;
  leftIcon?: ReactNode;  // 새로 추가
  rightIcon?: ReactNode; // 새로 추가
}

사용 예시

<Modal
  open={open}
  onOpenChange={setOpen}
  actionButton={{
    label: "119 신고하기",
    leftIcon: <PhoneIcon />,
    onClick: handleCall
  }}
>
  모달 내용
</Modal>

✅ Checklist

• Modal.tsx 인터페이스 확장
• actionButton props 전달 구현
• 테스트 4개 추가
  • leftIcon 단독 렌더링
  • rightIcon 단독 렌더링
  • leftIcon + rightIcon 동시 렌더링
  • 아이콘 + onClick 통합 동작
• 스토리북 예시 2개 추가
  • WithActionButtonLeftIcon
  • WithActionButtonRightIcon
• 버전 업데이트 (0.2.3 → 0.2.4)
• CHANGELOG 업데이트

📦 Version

0.2.3 → 0.2.4

Summary by CodeRabbit

• New Features
  • Modal action buttons now support optional left and right icons for improved visual customization.
• Documentation
  • Added Storybook examples demonstrating left-icon and right-icon action button variants.
• Tests
  • Added tests verifying icon rendering (left, right, both) and ensuring click handlers still fire.
• Chores
  • Release version bumped to 0.2.4 and changelog updated.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Warning

Rate limit exceeded

@choihooo has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 13 minutes and 17 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between 1ed858a and 05313ec.

📒 Files selected for processing (3)

• CHANGELOG.md
• package.json
• src/components/modal/Modal.test.tsx

📝 Walkthrough

Walkthrough

Adds optional leftIcon and rightIcon props to Modal's actionButton, updates Modal to pass these through to the Button, includes Storybook examples demonstrating each icon placement, adds tests for icon rendering and click integration, and bumps package version to 0.2.4.

Changes

Cohort / File(s)	Summary
Configuration package.json	Version bumped from 0.2.3 to 0.2.4.
Core Implementation src/components/modal/Modal.tsx	ModalProps.actionButton extended with optional leftIcon?: ReactNode and rightIcon?: ReactNode; Button rendering updated to pass leftIcon/rightIcon.
Stories src/components/modal/Modal.stories.tsx	Added WithActionButtonLeftIcon and WithActionButtonRightIcon Storybook stories demonstrating left/right icon usage and click behavior.
Tests src/components/modal/Modal.test.tsx	New tests covering leftIcon, rightIcon, combined icons, click handler invocation, and undefined onClick safety.
Exports / Index src/index.ts	Minor formatting (trailing newline) change only.

Sequence Diagram(s)

(omitted — changes are UI additions without a multi-component sequential control flow requiring visualization)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Modal 컴포넌트 개선: actionButton 추가 및 Header align 제거 #8: Introduced the actionButton prop on the Modal component; this PR extends that same actionButton surface with leftIcon/rightIcon support and related stories/tests.

Poem

🐰 A modal spruced with icons bright,
Left nibble, right hop — what a sight!
Buttons gleam with tiny charms,
Tests in place to keep it calm.
Version tucked, I thump with glee! 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: adding icon support (leftIcon and rightIcon) to the Modal component's actionButton, which is the primary objective of this PR.
Description check	✅ Passed	The description is comprehensive and well-structured, covering changes, interface updates, usage examples, checklist items, and version information. It aligns with the template's key sections despite being in a custom format.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/modal/Modal.test.tsx`:
- Around line 529-608: The test fails because the Button implementation
short-circuits to render only leftIcon, but the Modal tests (actionButton prop
on Modal) expect both leftIcon and rightIcon to render; update the Button
component (Button / ButtonProps in src/components/button/Button.tsx) to accept
and render both leftIcon and rightIcon simultaneously (ensure props include
rightIcon if missing, and render leftIcon before the label and rightIcon after
the label instead of choosing one or the other), keeping existing onClick/aria
behavior; alternatively, if you prefer the API to allow only one icon, relax the
Modal test to assert only a single icon is supported (adjust tests referencing
Modal's actionButton leftIcon/rightIcon accordingly).