chore(storybook): setting up AlphaAppProvider (#1796)

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

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

스토리북에 `AlphaAppProvider` 를 적용합니다.

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

- CSS variable 테스트를 할 수 있도록 환경을 구축합니다. #1733 마이그레이션이 완료되면,
BezierProvider를 제거할 수 있습니다.
- 중복되거나 불필요한 글로벌 스타일, Provider를 제거했습니다.

<img width="926" alt="image"
src="https://github.com/channel-io/bezier-react/assets/58209009/d52ff885-768b-4e0e-a861-f58d1ce14a37">

적용된 모습

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

No

Author: sungik-choi

packages/bezier-react/.storybook/WithFoundationProvider.jsx

@@ -3,13 +3,11 @@ import React from 'react'
 import {
   LightFoundation,
   DarkFoundation,
-  createGlobalStyle,
 } from '~/src/foundation'
-import {
-  FeatureProvider,
-  SmoothCornersFeature,
-} from '~/src/features'
+import { SmoothCornersFeature } from '~/src/features'
 import BezierProvider from '~/src/providers/BezierProvider'
+import { AlphaAppProvider } from '~/src/providers/AlphaAppProvider'
+import { InvertedThemeProvider } from '~/src/providers/ThemeProvider'
 import { Text } from '~/src/components/Text'
 
 import '~/src/styles/index.scss'
@@ -28,12 +26,6 @@ function getFoundation(keyword) {
   }
 }
 
-const GlobalStyle = createGlobalStyle`
-  :root {
-    font-family: Inter, sans-serif;
-  }
-`
-
 const wrapperStyle = {
   display: 'flex',
   flexDirection: 'row',
@@ -60,6 +52,7 @@ const innerWrapperStyle = {
   borderRadius: 20,
 }
 
+// TODO: Migrate to AlphaAppProvider
 export function WithFoundationProvider(Story, context) {
   const {
     isDarkFoundation,
@@ -79,40 +72,41 @@ export function WithFoundationProvider(Story, context) {
   })()
 
   return (
-    <FeatureProvider features={[SmoothCornersFeature]}>
-      <GlobalStyle />
-
-      <BezierProvider foundation={foundation}>
+    <AlphaAppProvider
+      themeName={isDarkFoundation ? "dark" : "light"}
+      features={[SmoothCornersFeature]}
+    >
+      <BezierProvider
+        foundation={foundation}
+        themeVarsScope=".theme"
+      >
         <div style={wrapperStyle}>
-          <BezierProvider
-            foundation={foundation}
-            themeVarsScope=".theme"
-          >
-            <div className="theme" style={storyWrapperStyle}>
-              <div style={{ ...innerWrapperStyle, backgroundColor }}>
-                { Story(context) }
-              </div>
-              <Text bold color="bgtxt-absolute-black-light">
-                { themeName }
-              </Text>
+          <div className="theme" style={storyWrapperStyle}>
+            <div style={{ ...innerWrapperStyle, backgroundColor }}>
+              { Story(context) }
             </div>
-          </BezierProvider>
+            <Text bold color="bgtxt-absolute-black-light">
+              { themeName }
+            </Text>
+          </div>
 
           <BezierProvider
             foundation={invertedFoundation}
             themeVarsScope=".inverted-theme"
           >
-            <div className="inverted-theme" style={storyWrapperStyle}>
-              <div style={{ ...innerWrapperStyle, backgroundColor: invertedBackgroundColor }}>
-                { Story(context) }
+            <InvertedThemeProvider>
+              <div className="inverted-theme" style={storyWrapperStyle}>
+                <div style={{ ...innerWrapperStyle, backgroundColor: invertedBackgroundColor }}>
+                  { Story(context) }
+                </div>
+                <Text bold color="bgtxt-absolute-black-light">
+                  { invertedThemeName }
+                </Text>
               </div>
-              <Text bold color="bgtxt-absolute-black-light">
-                { invertedThemeName }
-              </Text>
-            </div>
+            </InvertedThemeProvider>
           </BezierProvider>
         </div>
       </BezierProvider>
-    </FeatureProvider>
+    </AlphaAppProvider>
   )
 }

packages/bezier-react/src/providers/BezierProvider.tsx

@@ -22,6 +22,9 @@ interface BezierProviderProps {
   externalWindow?: Window
 }
 
+/**
+ * @deprecated Migration to `AlphaAppProvider` is in progress.
+ */
 function BezierProvider({
   foundation,
   children,