Deprecate imageUrl props in Emoji component (#2400)

<!--
  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 -->

- resolves #2335 

## Summary

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

- `Emoji` 컴포넌트에서 url 을 직접 받는 로직을 제거하고 컴포넌트 내부에서 `name`, `size` 속성으로부터
url 을 만드는 것으로 변경합니다.


## Details

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

- breaking change를 발생시키지 않기 위해 imageUrl 만 optional 로 변경하고 `name` 타입을 아이콘
이름의 union type(e.g. 'smiley' | 'grinning' | ... )으로 좁히지 않았습니다.
- 채널톡 데스크에서 자이언트 이모지를 보여주는 경우는 size=60 일 때이고, 이때는 asset size가 160인 url 을
넣어주고 있습니다. 이 기조에 맞춰서 size >= 60일 떄는 asset size 160으로 url 을 만들었습니다.

### 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 -->

- None

.changeset/dry-icons-search.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Deprecate `imageUrl` props of `Emoji` component.

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

@@ -3,25 +3,15 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { Emoji } from './Emoji'
 import { type EmojiProps } from './Emoji.types'
 
-const MOCK_EMOJI_URL =
-  'https://cf.exp.channel.io/asset/emoji/images/80/blush.png'
-
-const meta: Meta<typeof Emoji> = {
+const meta = {
   component: Emoji,
-  argTypes: {
-    imageUrl: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-}
+} satisfies Meta<EmojiProps>
 
 export default meta
 
-export const Primary: StoryObj<EmojiProps> = {
+export const Primary = {
   args: {
     size: '24',
-    imageUrl: MOCK_EMOJI_URL,
+    name: 'blush',
   },
-}
+} satisfies StoryObj<typeof meta>

packages/bezier-react/src/components/Emoji/Emoji.test.tsx

@@ -5,10 +5,8 @@ import { render } from '~/src/utils/test'
 import { EMOJI_TEST_ID, Emoji } from './Emoji'
 import { type EmojiProps } from './Emoji.types'
 
-const MOCK_EMOJI_URL = 'https://cf.exp.channel.io/asset/emoji/images/80/a.png'
-
 describe('Emoji Test >', () => {
-  const defaultProps: EmojiProps = { imageUrl: MOCK_EMOJI_URL, name: 'a' }
+  const defaultProps: EmojiProps = { size: '24', name: 'a' }
 
   const renderComponent = (props?: Partial<EmojiProps>) =>
     render(

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

@@ -2,6 +2,7 @@ import React, { type CSSProperties, forwardRef } from 'react'
 
 import classNames from 'classnames'
 
+import { isDev } from '~/src/utils/assert'
 import { cssUrl } from '~/src/utils/style'
 
 import { type EmojiProps } from './Emoji.types'
@@ -10,13 +11,16 @@ import styles from './Emoji.module.scss'
 
 export const EMOJI_TEST_ID = 'bezier-emoji'
 
+const getEmojiUrl = (name: EmojiProps['name'], size: '160' | '80' | '44') => {
+  return `https://cf${isDev() ? '.exp' : ''}.channel.io/asset/emoji/images/${size}/${name}.png`
+}
+
 /**
  * `Emoji` is a component for representing emoji with variant size.
  * @example
  * ```tsx
  * <Emoji
  *   name="A"
- *   imageUrl="https://cf.exp.channel.io/asset/emoji/images/80/a.png"
  *   size="20"
  * />
  * ```
@@ -25,14 +29,18 @@ export const Emoji = forwardRef<HTMLDivElement, EmojiProps>(function Emoji(
   { style, imageUrl, className, name, size = '24', ...rest },
   forwardedRef
 ) {
+  const assetSize = Number(size) >= 60 ? '160' : '80'
+
   return (
     <div
       ref={forwardedRef}
       role="img"
       aria-description={name}
       style={
         {
-          '--b-emoji-background-image': cssUrl(imageUrl),
+          '--b-emoji-background-image': cssUrl(
+            imageUrl ?? getEmojiUrl(name, assetSize)
+          ),
           ...style,
         } as CSSProperties
       }

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

@@ -14,8 +14,15 @@ export type EmojiSize =
   | '120'
 
 interface EmojiOwnProps {
+  /**
+   * Name of the emoji. e.g. 'grinning', 'smiley', etc.
+   */
   name: string
-  imageUrl: string
+  /**
+   * @deprecated
+   * `imageUrl` is created in the component and will be removed in the next major version.
+   */
+  imageUrl?: string
 }
 
 export interface EmojiProps