ModalContent의 overlay padding에 임의의 값을 줄 수 있도록 수정 (channel-io#1747)

<!--
  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)
- [ ] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Summary
<!-- Please brief explanation of the changes made -->
- Modal에서 사용되는 radix overlay의 padding은 '40px 0'으로 고정되어 있었습니다.
- 미트 새 창 프로덕트에서 해당 padding을 40px보다 더 작게 주어야 할 니즈가 생겨 이를 위한 prop을 추가합니다.

## Details
<!-- Please elaborate description of the changes -->
- MdoalContent에서 collisionPadding prop을 받도록 합니다. ([Radix
Popper](https://github.com/radix-ui/primitives/blob/main/packages/react/popper/src/Popper.tsx)
참고)
  - collisionPadding은 숫자 혹은 각 사이드별 크기를 담은 객체입니다.
  ```ts
type CollisionPadding = number | Partial<Record<'top' | 'right' |
'bottom' | 'left', number>>
  ```
- collisionPadding을 실제 padding string으로 변환해 overlay에 주입합니다.

### 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 -->
- [Radix
Popper](https://github.com/radix-ui/primitives/blob/main/packages/react/popper/src/Popper.tsx)

.changeset/wicked-pugs-build.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Add ModalContent's prop to allow custom value for overlay padding

packages/bezier-react/src/components/Modals/Modal/Modal.styled.ts

@@ -34,7 +34,7 @@ export const DialogPrimitiveOverlay = styled(DialogPrimitive.Overlay)`
   z-index: var(--bezier-modal-z-index);
   display: grid;
   place-items: center;
-  padding: 40px 0;
+  padding: var(--bezier-modal-collision-padding);
   overflow-y: auto;
   background-color: var(--bgtxt-absolute-black-lighter);
 

packages/bezier-react/src/components/Modals/Modal/Modal.types.ts

@@ -9,6 +9,8 @@ export enum ModalTitleSize {
   M = 'M',
 }
 
+type BoxSide = 'top' | 'right' | 'bottom' | 'left'
+
 interface ModalOptions {
   /**
    * The controlled open state of the modal.
@@ -50,7 +52,7 @@ interface ModalContentOptions {
 
   /**
    * Decides whether modal closes when clicked outside
-   * @default: false
+   * @default false
    */
   preventHideOnOutsideClick?: boolean
 
@@ -72,6 +74,12 @@ interface ModalContentOptions {
    * @default ZIndex.Modal
    */
   zIndex?: React.CSSProperties['zIndex']
+
+  /**
+   * Determine padding of overlay that contains modal content.
+   * @default { top: 40, bottom: 40 }
+   */
+  collisionPadding?: number | Partial<Record<BoxSide, number>>
 }
 
 interface ModalHeaderOptions {

packages/bezier-react/src/components/Modals/Modal/ModalContent.tsx

@@ -44,6 +44,7 @@ export const ModalContent = forwardRef(function ModalContent({
   width = 'max-content',
   height = 'fit-content',
   zIndex = ZIndex.Modal,
+  collisionPadding = { top: 40, bottom: 40 },
   ...rest
 }: ModalContentProps, forwardedRef: React.Ref<HTMLDivElement>) {
   const [contentContainer, setContentContainer] = useState<HTMLElement>()
@@ -55,9 +56,31 @@ export const ModalContent = forwardRef(function ModalContent({
     }, []),
   )
 
-  const overlayStyle = useMemo(() => ({
-    [cv('z-index')]: zIndex,
-  } as React.CSSProperties), [zIndex])
+  const overlayStyle = useMemo(() => {
+    const padding = (() => {
+      if (isNumber(collisionPadding)) {
+        return `${collisionPadding}px`
+      }
+
+      const { top, right, bottom, left } = {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        ...collisionPadding,
+      }
+
+      return `${top}px ${right}px ${bottom}px ${left}px`
+    })()
+
+    return ({
+      [cv('z-index')]: zIndex,
+      [cv('collision-padding')]: padding,
+    } as React.CSSProperties)
+  }, [
+    collisionPadding,
+    zIndex,
+  ])
 
   const contentStyle = useMemo(() => ({
     ...style,