Hide dividers adjacent to selected item in SegmentedControl (#2691)

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

Hide dividers adjacent to selected item in `SegmentedControl`

## Details

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

선택된 탭 요소의 양옆 디바이더가 보여지지 않는 기획을 적용합니다. 디바이더 컴포넌트를 분리하고 투명도 및 짧은 트랜지션을
적용했습니다.

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


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- Style
- SegmentedControl에서 선택된 항목 양옆의 구분선을 자동으로 숨겨 가독성과 집중도를 높였습니다. 숨김/표시 시
부드러운 불투명도 전환이 적용되며, 선택된 항목과 인접하지 않은 구분선은 기존처럼 표시됩니다. 선택 상태가 없을 때는 기존 동작을
유지합니다.
- Chores
  - 패키지 패치 릴리스를 위한 변경 이력이 추가되었습니다.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: sungik-choi

.changeset/rude-cities-watch.md

@@ -0,0 +1,5 @@
+---
+'@channel.io/bezier-react': patch
+---
+
+Hide dividers adjacent to selected item in `SegmentedControl`.

packages/bezier-react/src/components/SegmentedControl/SegmentedControl.module.scss

@@ -186,3 +186,12 @@
 .SegmentedControlItemLabel {
   padding: 1px 0;
 }
+
+.SegmentedControlDivider {
+  opacity: 1;
+  transition: opacity var(--transition-s);
+
+  &.hidden {
+    opacity: 0;
+  }
+}

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

@@ -65,6 +65,29 @@ const [
   'SegmentedControlItemList'
 )
 
+function SegmentedControlDivider({
+  index,
+  selectedItemIndex,
+}: {
+  index: number
+  selectedItemIndex: number | null
+}) {
+  const isAdjacentToSelectedItem =
+    !isNil(selectedItemIndex) &&
+    (selectedItemIndex + 1 === index || selectedItemIndex === index)
+
+  return (
+    <Divider
+      className={classNames(
+        styles.SegmentedControlDivider,
+        isAdjacentToSelectedItem && styles.hidden
+      )}
+      withoutParallelIndent
+      orientation="vertical"
+    />
+  )
+}
+
 function SegmentedControlItemListImpl<
   Type extends SegmentedControlType,
   Value extends string,
@@ -120,9 +143,9 @@ function SegmentedControlItemListImpl<
           {React.Children.map(children, (child, index) => (
             <>
               {index !== 0 && (
-                <Divider
-                  withoutParallelIndent
-                  orientation="vertical"
+                <SegmentedControlDivider
+                  index={index}
+                  selectedItemIndex={selectedItemIndex}
                 />
               )}
               <SegmentedControlItemContextProvider value={index}>