Migrate NavItem and NavGroup component with scss (channel-io#1905)

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

- channel-io#1733 

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

- NavItem, NavGroup 컴포넌트를 scss로 마이그레이션 하고 as, interpolation 속성을 제거합니다. 두
개가 겹치는 속성이 꽤 많아서 공통 속성을 ~src/components/Navigator/Navigator.module.scss
에 두었습니다.

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

- Yes. 

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

- None

.changeset/proud-feet-drum.md

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

packages/bezier-react/src/components/Navigator/NavGroup/NavGroup.module.scss

@@ -0,0 +1,14 @@
+.ChevronWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 20px;
+  max-width: 20px;
+  margin-left: 2px;
+}
+
+.ChildrenWrapper {
+  margin: 0;
+  padding: 0 0 8px;
+}

packages/bezier-react/src/components/Navigator/NavGroup/NavGroup.stories.tsx

@@ -16,8 +16,8 @@ import {
 } from '~/src/components/Icon'
 import { NavItem } from '~/src/components/Navigator/NavItem'
 
-import NavGroup from './NavGroup'
-import type NavGroupProps from './NavGroup.types'
+import { NavGroup } from './NavGroup'
+import type { NavGroupProps } from './NavGroup.types'
 
 const meta: Meta<typeof NavGroup> = {
   component: NavGroup,

packages/bezier-react/src/components/Navigator/NavGroup/NavGroup.test.tsx

@@ -9,11 +9,12 @@ import {
   IconSize,
 } from '~/src/components/Icon'
 
-import NavGroup, {
+import {
   NAV_GROUP_LEFT_ICON_TEST_ID,
   NAV_GROUP_TEST_ID,
+  NavGroup,
 } from './NavGroup'
-import type NavGroupProps from './NavGroup.types'
+import type { NavGroupProps } from './NavGroup.types'
 
 describe('NavGroup Test >', () => {
   let props: NavGroupProps

packages/bezier-react/src/components/Navigator/NavGroup/NavGroup.tsx

@@ -1,13 +1,10 @@
-import React, {
-  forwardRef,
-  memo,
-  useCallback,
-} from 'react'
+import React, { forwardRef } from 'react'
 
 import {
   ChevronSmallDownIcon,
   ChevronSmallRightIcon,
 } from '@channel.io/bezier-icons'
+import classNames from 'classnames'
 
 import { noop } from '~/src/utils/function'
 import { isNil } from '~/src/utils/type'
@@ -16,106 +13,99 @@ import {
   Icon,
   IconSize,
 } from '~/src/components/Icon'
+import commonStyles from '~/src/components/Navigator/Navigator.module.scss'
 import { Text } from '~/src/components/Text'
 
-import type NavGroupProps from './NavGroup.types'
+import type { NavGroupProps } from './NavGroup.types'
 
-import {
-  ChevronWrapper,
-  ChildrenWrapper,
-  Item,
-  LeftIconWrapper,
-  RightContentWrapper,
-  Wrapper,
-} from './NavGroup.styled'
+import styles from './NavGroup.module.scss'
 
 export const NAV_GROUP_TEST_ID = 'bezier-react-nav-group'
 export const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-react-nav-group-left-icon'
 
-const NavGroup = forwardRef<HTMLButtonElement, NavGroupProps>(function NavGroup({
-  as,
-  testId = NAV_GROUP_TEST_ID,
-  name,
-  style,
-  className,
-  interpolation,
-  children,
-  content,
-  rightContent,
-  leftIcon,
-  open,
-  active,
-  onClick = noop,
-  ...rest
-}, forwardedRef) {
-  const handleClickItem = useCallback((e?: React.MouseEvent) => {
-    onClick(e, name)
-  }, [
+export const NavGroup = forwardRef<HTMLButtonElement, NavGroupProps>(function NavGroup(props, forwardedRef) {
+  const {
+    testId = NAV_GROUP_TEST_ID,
     name,
-    onClick,
-  ])
+    className,
+    children,
+    content,
+    rightContent,
+    leftIcon,
+    open,
+    active,
+    onClick = noop,
+    ...rest
+  } = props
+
+  const handleClickItem = (e?: React.MouseEvent) => {
+    onClick(e, name)
+  }
 
   const hasChildren = !isNil(children)
   const chevronIconSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon
   const ariaName = `${name}Menu`
 
   return (
-    <Wrapper role="none">
-      <Item
-        {...rest}
+    <li
+      className={commonStyles.Wrapper}
+      role="none"
+    >
+      <button
         ref={forwardedRef}
-        as={as}
-        active={active}
-        style={style}
-        className={className}
-        interpolation={interpolation}
-        onClick={handleClickItem}
+        type="button"
+        className={classNames(
+          commonStyles.Item,
+          active && commonStyles.active,
+          className,
+        )}
         data-testid={testId}
         role="menuitem"
         aria-haspopup={hasChildren}
         aria-expanded={open}
         aria-controls={ariaName}
+        onClick={handleClickItem}
+        {...rest}
       >
-        <LeftIconWrapper>
+        <div className={commonStyles.LeftIconWrapper}>
           <Icon
             testId={NAV_GROUP_LEFT_ICON_TEST_ID}
             source={leftIcon}
             size={IconSize.S}
             color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}
           />
-        </LeftIconWrapper>
+        </div>
 
         <Text typo="14" truncated>
           { content }
         </Text>
 
         { hasChildren && (
-          <ChevronWrapper>
+          <div className={styles.ChevronWrapper}>
             <Icon
               source={chevronIconSource}
               size={IconSize.S}
               color="txt-black-dark"
             />
-          </ChevronWrapper>
+          </div>
         ) }
 
         { rightContent && (
-          <RightContentWrapper>
+          <div className={commonStyles.RightContentWrapper}>
             { rightContent }
-          </RightContentWrapper>
+          </div>
         ) }
-      </Item>
+      </button>
 
       { open && (
-        <ChildrenWrapper
+        <ul
+          className={styles.ChildrenWrapper}
           role="menu"
           id={ariaName}
         >
           { open && children }
-        </ChildrenWrapper>
+        </ul>
       ) }
-    </Wrapper>
+    </li>
   )
 })
-
-export default memo(NavGroup)

packages/bezier-react/src/components/Navigator/NavGroup/NavGroup.types.ts

@@ -2,24 +2,24 @@ import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import type {
   ActivatableProps,
-  BezierComponentProps,
+  AlphaBezierComponentProps,
   ChildrenProps,
   ContentProps,
   SideContentProps,
 } from '~/src/types/ComponentProps'
 
-interface NavGroupOptions {
+interface NavGroupOwnProps {
   open?: boolean
   leftIcon: BezierIcon
   name: string
   onClick?: (e?: React.MouseEvent, name?: string) => void
 }
 
-export default interface NavGroupProps extends
-  BezierComponentProps,
+export interface NavGroupProps extends
+  AlphaBezierComponentProps,
   ChildrenProps,
   ContentProps,
   Pick<SideContentProps, 'rightContent'>,
   Pick<ActivatableProps, 'active'>,
   Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick' | 'content'>,
-  NavGroupOptions {}
+  NavGroupOwnProps {}