code connects for Avatar, AvatarGroup and StatusBadge (#2492)

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

## Summary

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

AlphaAvatar, AlphaAvatarGroup, AlphaStatusBadge에 대한 Code Connect 추가

## Details

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

<img width="333" alt="image"
src="https://github.com/user-attachments/assets/1da4e83e-b04e-4387-9064-790186a74fa1">

- Avatar의 status를 처리하는 방식이 굉장히 까다로웠습니다. example 문에서 props 변환외에 조건식을
평가하거나 하지 않기 때문에 모든 enum 경우의 수에서 같은 객체를 반환하도록 처리해야했습니다.
- nestedProps의 첫번째 인자는 피그마의 레이어명과 동일해야하는데, 피그마 내부의 사소한 결정에도 구현 의존성이 생기는
점이 아쉬웠습니다. 똑똑하게 처리해주면 좋을텐데요...
- StatusBadge의 `'lock'` 에 해당하는 구현이 추가되어야합니다.

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

-
https://github.com/figma/code-connect/blob/main/docs/react.md#nested-properties

packages/bezier-react/src/components/AlphaAvatar/Avatar.figma.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import figma from '@figma/code-connect'
+
+import { type StatusType } from '~/src/components/Status'
+
+import { Avatar as AlphaAvatar } from './Avatar'
+import { type AvatarProps } from './Avatar.types'
+
+figma.connect<
+  Pick<AvatarProps, 'size' | 'showBorder'> & {
+    status: {
+      value?: StatusType
+    }
+  }
+>(
+  AlphaAvatar,
+  'https://www.figma.com/design/aJJF4bU82uR0jAsmWp5wlE/Navigation?node-id=1%3A19155',
+  {
+    props: {
+      size: figma.enum('size', {
+        '16': '16',
+        '20': '20',
+        '24': '24',
+        '30': '30',
+        '36': '36',
+        '42': '42',
+        '48': '48',
+        '72': '72',
+        '90': '90',
+        '120': '120',
+      }),
+      status: figma.enum('badge', {
+        none: {
+          value: undefined,
+        },
+        chat: {
+          value: undefined,
+        },
+        status: figma.nestedProps('⛔️️ alpha/Common/StatusBadge', {
+          value: figma.boolean('online', {
+            true: figma.boolean('doNotDisturb', {
+              true: 'online-crescent',
+              false: 'online',
+            }),
+            false: figma.boolean('doNotDisturb', {
+              true: 'offline-crescent',
+              false: 'offline',
+            }),
+          }),
+        }),
+      }),
+      showBorder: figma.boolean('outlineBorder'),
+    },
+    example: (props) => (
+      <AlphaAvatar
+        size={props.size}
+        avatarUrl="/* TODO */"
+        name="/* TODO */"
+        showBorder={props.showBorder}
+        status={props.status.value}
+      />
+    ),
+  }
+)

packages/bezier-react/src/components/AlphaAvatarGroup/AvatarGroup.figma.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import figma from '@figma/code-connect'
+
+import { AvatarGroup as AlphaAvatarGroup } from './AvatarGroup'
+
+figma.connect(
+  AlphaAvatarGroup,
+  'https://www.figma.com/design/aJJF4bU82uR0jAsmWp5wlE/Navigation?node-id=1%3A19451',
+  {
+    props: {
+      size: figma.enum('size', {
+        '20': '20',
+        '24': '24',
+      }),
+      ellipsisType: figma.enum('variants', {
+        'icon (default)': 'icon',
+        count: 'count',
+      }),
+      max: figma.nestedProps('⛔️️ alpha/Common/$AvatarGroupSource', {
+        value: figma.enum('itemCount', {
+          '2': 2,
+          '3': 3,
+          '4': 4,
+          '5': 5,
+        }),
+      }),
+    },
+    example: (props) => (
+      <AlphaAvatarGroup
+        max={props.max.value}
+        size={props.size}
+        ellipsisType={props.ellipsisType}
+      />
+    ),
+  }
+)

packages/bezier-react/src/components/AlphaStatusBadge/StatusBadge.figma.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import figma from '@figma/code-connect'
+
+import { StatusBadge as AlphaStatusBadge } from './StatusBadge'
+
+figma.connect(
+  AlphaStatusBadge,
+  'https://www.figma.com/design/KyhPPZeeC0JBmTclJGe3nn/Status?node-id=6%3A34',
+  {
+    props: {
+      size: figma.enum('size', {
+        medium: 'm',
+        large: 'l',
+      }),
+      online: figma.boolean('online'),
+      doNotDisturb: figma.boolean('doNotDisturb'),
+    },
+    example: (props) => (
+      <AlphaStatusBadge
+        size={props.size}
+        online={props.online}
+        doNotDisturb={props.doNotDisturb}
+      />
+    ),
+  }
+)