docs: BoxButton, TextButton 컴포넌트 문서에 아이콘 관련 내용을 추가

src/components/BoxButton/BoxButton.mdx

@@ -69,6 +69,19 @@ import { BoxButton } from '@yourssu/design-system-react';
 
 <Canvas of={BoxButtonStories.Width} withSource="none" />
 
+### leftIcon / rightIcon
+
+`leftIcon` 또는 `rightIcon` prop으로 원하는 아이콘을 삽입합니다.<br />
+아이콘과 텍스트는 동일한 색상으로 스타일링되어 있으므로, 별도의 색상을 지정하지 말아 주세요.
+
+```tsx
+<BoxButton size="large" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+ with leftIcon
+</BoxButton>
+```
+
+<Canvas of={BoxButtonStories.WithIcon} withSource="none" />
+
 ### BoxButton 클릭 시 이벤트 할당
 
 `onClick` 메서드를 이용하여 원하는 이벤트를 할당할 수 있습니다.

src/components/BoxButton/BoxButton.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { IcExternalLinkLine } from '@/style';
+
 import { BoxButton } from './BoxButton';
 
 const meta: Meta<typeof BoxButton> = {
@@ -101,3 +103,16 @@ export const Click: Story = {
  },
  },
 };
+
+export const WithIcon: Story = {
+ render: () => (
+ <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+ <BoxButton size="large" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+ with leftIcon
+ </BoxButton>
+ <BoxButton size="large" hierarchy="primary" disabled rightIcon={<IcExternalLinkLine />}>
+ with rightIcon
+ </BoxButton>
+ </div>
+ ),
+};

src/components/TextButton/TextButton.mdx

@@ -69,6 +69,19 @@ import { TextButton } from '@yourssu/design-system-react';
 
 <Canvas of={TextButtonStories.Width} withSource="none" />
 
+### leftIcon / rightIcon
+
+`leftIcon` 또는 `rightIcon` prop으로 원하는 아이콘을 삽입합니다.<br />
+아이콘과 텍스트는 동일한 색상으로 스타일링되어 있으므로, 별도의 색상을 지정하지 말아 주세요.
+
+```tsx
+<TextButton size="medium" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+ with leftIcon
+</TextButton>
+```
+
+<Canvas of={TextButtonStories.WithIcon} withSource="none" />
+
 ### TextButton 클릭 시 이벤트 할당
 
 `onClick` 메서드를 이용하여 원하는 이벤트를 할당할 수 있습니다.

src/components/TextButton/TextButton.stories.tsx

@@ -98,3 +98,16 @@ export const Click: Story = {
  },
  },
 };
+
+export const WithIcon: Story = {
+ render: () => (
+ <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+ <TextButton size="medium" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+ with leftIcon
+ </TextButton>
+ <TextButton size="medium" hierarchy="primary" disabled rightIcon={<IcExternalLinkLine />}>
+ with rightIcon
+ </TextButton>
+ </div>
+ ),
+};