Migrate CheckableAvatar component with scss (#1921)

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

- #1733

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

Migrate `CheckableAvatar` component with scss

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

- Checkbox PR base
- as 속성을 제거합니다.

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

Yes

.changeset/dry-schools-draw.md

@@ -0,0 +1,7 @@
+---
+"@channel.io/bezier-react": major
+---
+
+**Breaking Changes: Property updates in `CheckableAvatar` component**
+
+No longer support `interpolation` property. Replace any usage of `interpolation` property with appropriate `style` or `className` implementations.

packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.module.scss

@@ -0,0 +1,133 @@
+@use '../../../styles/mixins/position';
+@use '../../../styles/mixins/interaction';
+
+.CheckIcon {
+  @include position.absolute-center;
+
+  position: absolute;
+  z-index: var(--z-index-floating);
+  visibility: hidden;
+
+  &:where(.size-20) {
+    width: 14px;
+    height: 14px;
+  }
+
+  &:where(.size-24) {
+    width: 16px;
+    height: 16px;
+  }
+
+  &:where(.size-30) {
+    width: 20px;
+    height: 20px;
+  }
+
+  &:where(.size-36) {
+    width: 22px;
+    height: 22px;
+  }
+
+  &:where(.size-42) {
+    width: 24px;
+    height: 24px;
+  }
+
+  &:where(.size-48) {
+    width: 28px;
+    height: 28px;
+  }
+
+  &:where(.size-72) {
+    width: 42px;
+    height: 42px;
+  }
+
+  &:where(.size-90) {
+    width: 52px;
+    height: 52px;
+  }
+
+  &:where(.size-120) {
+    width: 68px;
+    height: 68px;
+  }
+}
+
+@mixin common-focus-styles {
+  & :where(.CheckIcon) {
+    visibility: visible;
+  }
+
+  & :where(.Avatar > div) {
+    --b-smooth-corners-box-background-image: none !important;
+  }
+}
+
+@mixin unchecked-focus-styles {
+  & :where(.Avatar > div) {
+    --b-smooth-corners-box-background-color: var(--bg-grey-dark) !important;
+  }
+}
+
+@mixin checked-focus-styles {
+  & :where(.Avatar > div) {
+    --b-smooth-corners-box-background-color: var(--bgtxt-green-dark) !important;
+  }
+}
+
+.Checkbox {
+  all: unset;
+
+  cursor: pointer;
+
+  position: relative;
+  z-index: var(--z-index-base);
+
+  outline: none;
+
+  &:where([data-disabled]) {
+    cursor: not-allowed;
+  }
+
+  &:where(:not([data-state='unchecked'])) {
+    & :where(.CheckIcon) {
+      visibility: visible;
+    }
+
+    & :where(.Avatar > div) {
+      --b-smooth-corners-box-background-image: none !important;
+      --b-smooth-corners-box-background-color: var(--bgtxt-green-normal) !important;
+    }
+  }
+
+  &:where(:not([data-disabled])) {
+    @include interaction.touchable-hover {
+      @include common-focus-styles;
+    }
+
+    &:where(:focus-visible) {
+      @include common-focus-styles;
+    }
+
+    &:where([data-state='unchecked']) {
+      @include interaction.touchable-hover {
+        @include unchecked-focus-styles;
+      }
+
+      &:where(:focus-visible) {
+        @include unchecked-focus-styles;
+      }
+    }
+
+    &:where(:not([data-state='unchecked'])) {
+      @include interaction.touchable-hover {
+        @include checked-focus-styles;
+      }
+
+      &:where(:focus-visible) {
+        @include checked-focus-styles;
+      }
+    }
+  }
+}

packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.tsx

@@ -1,15 +1,21 @@
 import React, { forwardRef } from 'react'
 
+import { CheckIcon } from '@channel.io/bezier-icons'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import classNames from 'classnames'
 
 import useId from '~/src/hooks/useId'
 
-import { AvatarSize } from '~/src/components/Avatars/Avatar'
+import {
+  Avatar,
+  AvatarSize,
+} from '~/src/components/Avatars/Avatar'
+import { Icon } from '~/src/components/Icon'
 import { VisuallyHidden } from '~/src/components/VisuallyHidden'
 
 import type { CheckableAvatarProps } from './CheckableAvatar.types'
 
-import * as Styled from './CheckableAvatar.styled'
+import styles from './CheckableAvatar.module.scss'
 
 /**
  * `CheckableAvatar` is a checkbox component that looks like `Avatar`.
@@ -35,6 +41,7 @@ import * as Styled from './CheckableAvatar.styled'
  */
 export const CheckableAvatar = forwardRef<HTMLButtonElement, CheckableAvatarProps>(function CheckableAvatar({
   children,
+  className,
   id: idProp,
   name,
   size = AvatarSize.Size24,
@@ -48,7 +55,11 @@ export const CheckableAvatar = forwardRef<HTMLButtonElement, CheckableAvatarProp
   const id = useId(idProp, 'bezier-checkable-avatar')
 
   return (
-    <Styled.CheckboxPrimitiveRoot
+    <CheckboxPrimitive.Root
+      className={classNames(
+        styles.Checkbox,
+        className,
+      )}
       ref={forwardedRef}
       id={id}
       name={name}
@@ -59,10 +70,18 @@ export const CheckableAvatar = forwardRef<HTMLButtonElement, CheckableAvatarProp
         asChild
         forceMount
       >
-        <Styled.CheckIcon className={`size-${size}`} />
+        <Icon
+          className={classNames(
+            styles.CheckIcon,
+            styles[`size-${size}`],
+          )}
+          source={CheckIcon}
+          color="bgtxt-absolute-white-normal"
+        />
       </CheckboxPrimitive.Indicator>
 
-      <Styled.Avatar
+      <Avatar
+        className={styles.Avatar}
         aria-hidden
         size={size}
         name={name}
@@ -73,11 +92,11 @@ export const CheckableAvatar = forwardRef<HTMLButtonElement, CheckableAvatarProp
         showBorder={showBorder}
       >
         { children }
-      </Styled.Avatar>
+      </Avatar>
 
       <VisuallyHidden>
         <label htmlFor={id}>{ name }</label>
       </VisuallyHidden>
-    </Styled.CheckboxPrimitiveRoot>
+    </CheckboxPrimitive.Root>
   )
 })

packages/bezier-react/src/components/Avatars/CheckableAvatar/CheckableAvatar.types.ts

@@ -2,7 +2,7 @@ import type React from 'react'
 
 import type { AvatarProps } from '~/src/components/Avatars/Avatar'
 
-interface CheckableAvatarPropsOptions {
+interface CheckableAvatarPropsOwnProps {
   /**
    * The controlled checked state of the checkbox.
    * Must be used in conjunction with `onCheckedChange`.
@@ -30,6 +30,6 @@ interface CheckableAvatarPropsOptions {
 }
 
 export interface CheckableAvatarProps extends
-  Omit<AvatarProps, 'as' | keyof React.HTMLAttributes<HTMLDivElement>>,
+  Omit<AvatarProps, keyof React.HTMLAttributes<HTMLDivElement>>,
   React.HTMLAttributes<HTMLButtonElement>,
-  CheckableAvatarPropsOptions {}
+  CheckableAvatarPropsOwnProps {}