Add truncated props in Badge (#2603)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

Fixes #2591 

## Summary

<!-- Please brief explanation of the changes made -->

- Add ellipsis to Badge

## Details

<!-- Please elaborate description of the changes -->

- Added `truncated` props to Badge and added the story of truncated
Badge. It supports ellipses in Badge text.
- The `width` must be specified from the outside or on itself.
Otherwise, even if `truncated` props are specified, the length will
increase because of `flex`.
- Same truncated feature of Text.

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

.changeset/funny-eyes-shop.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': minor
+---
+
+Add `truncated` props in the Badge

packages/bezier-react/src/components/Badge/Badge.stories.tsx

@@ -1,6 +1,8 @@
 import { AppleIcon } from '@channel.io/bezier-icons'
 import { type Meta, type StoryFn, type StoryObj } from '@storybook/react'
 
+import { Box } from '~/src/components/Box'
+
 import { Badge } from './Badge'
 import { type BadgeProps } from './Badge.types'
 
@@ -14,6 +16,12 @@ const Template: StoryFn<BadgeProps> = ({ children, ...badgeProps }) => (
   <Badge {...badgeProps}>{children}</Badge>
 )
 
+const Truncated: StoryFn<BadgeProps> = ({ children, ...badgeProps }) => (
+  <Box width={200}>
+    <Badge {...badgeProps}>{children}</Badge>
+  </Box>
+)
+
 export const Primary: StoryObj<BadgeProps> = {
   render: Template,
 
@@ -23,4 +31,24 @@ export const Primary: StoryObj<BadgeProps> = {
     icon: AppleIcon,
     variant: 'default',
   },
+  argTypes: {
+    truncated: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export const Secondary: StoryObj<BadgeProps> = {
+  render: Truncated,
+
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    size: 'm',
+    icon: AppleIcon,
+    variant: 'default',
+    truncated: true,
+  },
+  name: 'Truncated',
 }

packages/bezier-react/src/components/Badge/Badge.tsx

@@ -26,7 +26,7 @@ export const BADGE_TEST_ID = 'bezier-badge'
  */
 export const Badge = memo(
   forwardRef<HTMLDivElement, BadgeProps>(function Badge(
-    { size = 'm', variant = 'default', icon, children, ...rest },
+    { size = 'm', variant = 'default', truncated ,icon, children, ...rest },
     forwardedRef
   ) {
     return (
@@ -48,6 +48,7 @@ export const Badge = memo(
           <BaseTagBadgeText
             size={size}
             marginHorizontal={3}
+            truncated={truncated}
           >
             {children}
           </BaseTagBadgeText>

packages/bezier-react/src/components/Badge/Badge.types.ts

@@ -21,6 +21,12 @@ interface BadgeOwnProps {
    * Icon to be shown on the left side of the badge.
    */
   icon?: BezierIcon
+  /**
+   * Whether the text is truncated.
+   * If it is a positive integer, it means the maximum number of lines.
+   * @default false
+   */
+  truncated?: boolean | number
 }
 
 export interface BadgeProps