diff --git a/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx b/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx
index 4734837ba6..056fb3bfcb 100644
--- a/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx
+++ b/packages/bezier-react/src/components/Forms/FormControl/FormControl.tsx
@@ -28,7 +28,7 @@ import {
   type HelperTextPropsGetter,
   type LabelPropsGetter,
 } from './FormControl.types'
-import { FormControlContext } from './FormControlContext'
+import { FormControlContextProvider } from './FormControlContext'
 
 import * as Styled from './FormControl.styled'
 
@@ -203,7 +203,7 @@ export const FormControl = forwardRef<HTMLElement, FormControlProps>(function Fo
   if (!children) { return null }
 
   return (
-    <FormControlContext.Provider value={contextValue}>
+    <FormControlContextProvider value={contextValue}>
       <Container
         {...bezierProps}
         ref={forwardedRef}
@@ -213,6 +213,6 @@ export const FormControl = forwardRef<HTMLElement, FormControlProps>(function Fo
       >
         { children }
       </Container>
-    </FormControlContext.Provider>
+    </FormControlContextProvider>
   )
 })
diff --git a/packages/bezier-react/src/components/Forms/FormControl/FormControlContext.ts b/packages/bezier-react/src/components/Forms/FormControl/FormControlContext.ts
index 69c5546c1f..5b83b71956 100644
--- a/packages/bezier-react/src/components/Forms/FormControl/FormControlContext.ts
+++ b/packages/bezier-react/src/components/Forms/FormControl/FormControlContext.ts
@@ -1,5 +1,8 @@
-import { createContext } from 'react'
+import { createContext } from '~/src/utils/reactUtils'
 
 import { type FormControlContextValue } from '~/src/components/Forms/FormControl'
 
-export const FormControlContext = createContext<FormControlContextValue | undefined>(undefined)
+export const [
+  FormControlContextProvider,
+  useFormControlContext,
+] = createContext<FormControlContextValue | undefined>(undefined)
diff --git a/packages/bezier-react/src/components/Forms/FormControl/index.ts b/packages/bezier-react/src/components/Forms/FormControl/index.ts
index 3d5ab0e603..b03edace25 100644
--- a/packages/bezier-react/src/components/Forms/FormControl/index.ts
+++ b/packages/bezier-react/src/components/Forms/FormControl/index.ts
@@ -1,6 +1,6 @@
 export { FormControl } from './FormControl'
 
-export { FormControlContext } from './FormControlContext'
+export { useFormControlContext } from './FormControlContext'
 
 export type {
   FormControlProps,
diff --git a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx b/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx
index 14b665e860..6acf489dd8 100644
--- a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx
+++ b/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx
@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react'
 import useMergeRefs from '~/src/hooks/useMergeRefs'
 import { noop } from '~/src/utils/functionUtils'
 
-import useFormControlContext from '~/src/components/Forms/useFormControlContext'
+import { useFormControlContext } from '~/src/components/Forms/FormControl'
 
 import type FormGroupProps from './FormGroup.types'
 
diff --git a/packages/bezier-react/src/components/Forms/FormHelperText/FormHelperText.tsx b/packages/bezier-react/src/components/Forms/FormHelperText/FormHelperText.tsx
index 3ffb475e50..04ec23f013 100644
--- a/packages/bezier-react/src/components/Forms/FormHelperText/FormHelperText.tsx
+++ b/packages/bezier-react/src/components/Forms/FormHelperText/FormHelperText.tsx
@@ -9,7 +9,7 @@ import useMergeRefs from '~/src/hooks/useMergeRefs'
 import { noop } from '~/src/utils/functionUtils'
 import { isEmpty } from '~/src/utils/typeUtils'
 
-import useFormControlContext from '~/src/components/Forms/useFormControlContext'
+import { useFormControlContext } from '~/src/components/Forms/FormControl'
 
 import type {
   BaseHelperTextProps,
diff --git a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
index 526ea6a9a3..e6b38b2178 100644
--- a/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
+++ b/packages/bezier-react/src/components/Forms/FormLabel/FormLabel.tsx
@@ -7,7 +7,7 @@ import { Typography } from '~/src/foundation'
 
 import { isEmpty } from '~/src/utils/typeUtils'
 
-import useFormControlContext from '~/src/components/Forms/useFormControlContext'
+import { useFormControlContext } from '~/src/components/Forms/FormControl'
 import { Help } from '~/src/components/Help'
 import { HELP_DISPLAY_NAME } from '~/src/components/Help/Help'
 import {
diff --git a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControlContext.ts b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControlContext.ts
index 13d78d89bc..92c144f4c4 100644
--- a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControlContext.ts
+++ b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControlContext.ts
@@ -1,39 +1,16 @@
-import React from 'react'
+import { createContext } from '~/src/utils/reactUtils'
 
 import {
   type SegmentedControlProps,
   type SegmentedControlType,
 } from './SegmentedControl.types'
 
-// TODO: (@ed) Evolve it into a commonly reusable function
-function createContext<ContextValue>(
-  providerName: string,
-  defaultValue: ContextValue,
-) {
-  const Context = React.createContext<ContextValue>(defaultValue)
-
-  function useContext(consumerName: string) {
-    const contextValue = React.useContext(Context)
-
-    if (!contextValue) {
-      throw new Error(`'${consumerName}' must be used within '${providerName}'`)
-    }
-
-    return contextValue
-  }
-
-  return [
-    Context.Provider,
-    useContext,
-  ] as const
-}
-
 type SegmentedControlContextValue = Required<Pick<SegmentedControlProps<SegmentedControlType, string>, 'type' | 'size' | 'width'>>
 
 export const [
   SegmentedControlContextProvider,
   useSegmentedControlContext,
-] = createContext<SegmentedControlContextValue | null>('SegmentedControl', null)
+] = createContext<SegmentedControlContextValue | null>(null, 'SegmentedControl')
 
 interface SegmentedControlItemListContextValue {
   setSelectedElement: (node: HTMLButtonElement | null) => void
@@ -42,4 +19,4 @@ interface SegmentedControlItemListContextValue {
 export const [
   SegmentedControlItemListContextProvider,
   useSegmentedControlItemListContext,
-] = createContext<SegmentedControlItemListContextValue | null>('SegmentedControlItemList', null)
+] = createContext<SegmentedControlItemListContextValue | null>(null, 'SegmentedControlItemList')
diff --git a/packages/bezier-react/src/components/Forms/index.ts b/packages/bezier-react/src/components/Forms/index.ts
index 165f64ca75..684ee08cfd 100644
--- a/packages/bezier-react/src/components/Forms/index.ts
+++ b/packages/bezier-react/src/components/Forms/index.ts
@@ -1,6 +1,5 @@
 import type { FormComponentProps } from './Form.types'
 import FormFieldSize from './FormFieldSize'
-import useFormControlContext from './useFormControlContext'
 import useFormFieldProps from './useFormFieldProps'
 import useKeyboardActionLockerWhileComposing from './useKeyboardActionLockerWhileComposing'
 
@@ -8,7 +7,6 @@ export type { FormComponentProps }
 export * from './Inputs/constants/CommonImeControlKeys'
 export {
   FormFieldSize,
-  useFormControlContext,
   useFormFieldProps,
   useKeyboardActionLockerWhileComposing,
 }
diff --git a/packages/bezier-react/src/components/Forms/useFormControlContext.ts b/packages/bezier-react/src/components/Forms/useFormControlContext.ts
deleted file mode 100644
index 208f8857f3..0000000000
--- a/packages/bezier-react/src/components/Forms/useFormControlContext.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { useContext } from 'react'
-
-import { FormControlContext } from '~/src/components/Forms/FormControl'
-
-function useFormControlContext() {
-  return useContext(FormControlContext)
-}
-
-export default useFormControlContext
diff --git a/packages/bezier-react/src/components/Forms/useFormFieldProps.ts b/packages/bezier-react/src/components/Forms/useFormFieldProps.ts
index 1a275fa52f..ecb8113d22 100644
--- a/packages/bezier-react/src/components/Forms/useFormFieldProps.ts
+++ b/packages/bezier-react/src/components/Forms/useFormFieldProps.ts
@@ -3,8 +3,7 @@ import { useMemo } from 'react'
 import { ariaAttr } from '~/src/utils/domUtils'
 
 import type { FormComponentProps } from '~/src/components/Forms/Form.types'
-
-import useFormControlContext from './useFormControlContext'
+import { useFormControlContext } from '~/src/components/Forms/FormControl'
 
 // TODO: 테스트 추가
 function useFormFieldProps<Props extends FormComponentProps>(props?: Props) {
diff --git a/packages/bezier-react/src/components/Modals/Modal/Modal.stories.tsx b/packages/bezier-react/src/components/Modals/Modal/Modal.stories.tsx
index 0885ceca9e..b5f0e78e8f 100644
--- a/packages/bezier-react/src/components/Modals/Modal/Modal.stories.tsx
+++ b/packages/bezier-react/src/components/Modals/Modal/Modal.stories.tsx
@@ -85,7 +85,7 @@ function ModalComposition({
 
         <ModalBody>
           <FormControl labelPosition="left">
-            <FormLabel>Name</FormLabel>
+            <FormLabel help="Lorem Ipsum">Name</FormLabel>
             <Select text="Lorem Ipsum">
               { Array.from({ length: 20 }).map((_, index) => (
                 <ListItem
diff --git a/packages/bezier-react/src/components/Modals/Modal/Modal.tsx b/packages/bezier-react/src/components/Modals/Modal/Modal.tsx
index 3046bc8577..f7133b5e02 100644
--- a/packages/bezier-react/src/components/Modals/Modal/Modal.tsx
+++ b/packages/bezier-react/src/components/Modals/Modal/Modal.tsx
@@ -52,4 +52,3 @@ export function Modal({
     </DialogPrimitive.Root>
   )
 }
-
diff --git a/packages/bezier-react/src/components/Modals/Modal/Modal.types.ts b/packages/bezier-react/src/components/Modals/Modal/Modal.types.ts
index 8a38424f9b..70bed993a9 100644
--- a/packages/bezier-react/src/components/Modals/Modal/Modal.types.ts
+++ b/packages/bezier-react/src/components/Modals/Modal/Modal.types.ts
@@ -134,4 +134,4 @@ export interface ModalCloseProps extends
   ChildrenProps<React.ReactElement> {}
 
 export interface ModalContentContextValue extends
-  NonNullable<Pick<ModalContentOptions, 'showCloseIcon'>> {}
+  Required<Pick<ModalContentOptions, 'showCloseIcon'>> {}
diff --git a/packages/bezier-react/src/components/Modals/Modal/ModalContent.tsx b/packages/bezier-react/src/components/Modals/Modal/ModalContent.tsx
index 6f225e19e4..3236c9e149 100644
--- a/packages/bezier-react/src/components/Modals/Modal/ModalContent.tsx
+++ b/packages/bezier-react/src/components/Modals/Modal/ModalContent.tsx
@@ -13,7 +13,7 @@ import {
   type ModalContentContextValue,
   type ModalContentProps,
 } from './Modal.types'
-import ModalContentContext from './ModalContentContext'
+import { ModalContentContextProvider } from './ModalContentContext'
 import { ModalClose } from './ModalHelpers'
 
 import * as Styled from './Modal.styled'
@@ -67,9 +67,9 @@ export const ModalContent = forwardRef(function ModalContent({
             {...rest}
           >
             <Styled.Section>
-              <ModalContentContext.Provider value={contextValue}>
+              <ModalContentContextProvider value={contextValue}>
                 { children }
-              </ModalContentContext.Provider>
+              </ModalContentContextProvider>
 
               { /* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */ }
               { showCloseIcon && (
diff --git a/packages/bezier-react/src/components/Modals/Modal/ModalContentContext.ts b/packages/bezier-react/src/components/Modals/Modal/ModalContentContext.ts
index 71e23c8584..7cf6893c04 100644
--- a/packages/bezier-react/src/components/Modals/Modal/ModalContentContext.ts
+++ b/packages/bezier-react/src/components/Modals/Modal/ModalContentContext.ts
@@ -1,9 +1,10 @@
-import React from 'react'
+import { createContext } from '~/src/utils/reactUtils'
 
 import { type ModalContentContextValue } from './Modal.types'
 
-const ModalContentContext = React.createContext<ModalContentContextValue>({
+export const [
+  ModalContentContextProvider,
+  useModalContentContext,
+] = createContext<ModalContentContextValue>({
   showCloseIcon: false,
 })
-
-export default ModalContentContext
diff --git a/packages/bezier-react/src/components/Modals/Modal/ModalHeader.tsx b/packages/bezier-react/src/components/Modals/Modal/ModalHeader.tsx
index c9eb3b4de8..2e65527b63 100644
--- a/packages/bezier-react/src/components/Modals/Modal/ModalHeader.tsx
+++ b/packages/bezier-react/src/components/Modals/Modal/ModalHeader.tsx
@@ -1,7 +1,4 @@
-import React, {
-  forwardRef,
-  useContext,
-} from 'react'
+import React, { forwardRef } from 'react'
 
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 
@@ -14,7 +11,7 @@ import {
   type ModalHeaderProps,
   ModalTitleSize,
 } from './Modal.types'
-import ModalContentContext from './ModalContentContext'
+import { useModalContentContext } from './ModalContentContext'
 
 import * as Styled from './Modal.styled'
 
@@ -82,7 +79,7 @@ export const ModalHeader = forwardRef(function ModalHeader({
   hidden = false,
   ...rest
 }: ModalHeaderProps, forwardedRef: React.Ref<HTMLElement>) {
-  const { showCloseIcon } = useContext(ModalContentContext)
+  const { showCloseIcon } = useModalContentContext()
   const hasTitleArea = title || showCloseIcon
   const Hidden = hidden ? VisuallyHidden : React.Fragment
 
diff --git a/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx b/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx
index 3a9e22922d..e1857ce66a 100644
--- a/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx
+++ b/packages/bezier-react/src/components/OutlineItem/OutlineItem.tsx
@@ -19,8 +19,10 @@ import { isNil } from '~/src/utils/typeUtils'
 import { IconSize } from '~/src/components/Icon'
 
 import type OutlineItemProps from './OutlineItem.types'
-import { OutlineItemContext } from './OutlineItemContext'
-import useOutlineItemContext from './useOutlineItemContext'
+import {
+  OutlineItemContextProvider,
+  useOutlineItemContext,
+} from './OutlineItemContext'
 
 import {
   ChevronWrapper,
@@ -250,9 +252,9 @@ function OutlineItem(
       }
 
       return (
-        <OutlineItemContext.Provider value={passedContext}>
+        <OutlineItemContextProvider value={passedContext}>
           { element }
-        </OutlineItemContext.Provider>
+        </OutlineItemContextProvider>
       )
     })
   ), [
diff --git a/packages/bezier-react/src/components/OutlineItem/OutlineItemContext.ts b/packages/bezier-react/src/components/OutlineItem/OutlineItemContext.ts
index 4948eb483e..dd60b60fe5 100644
--- a/packages/bezier-react/src/components/OutlineItem/OutlineItemContext.ts
+++ b/packages/bezier-react/src/components/OutlineItem/OutlineItemContext.ts
@@ -1,23 +1,23 @@
 import type React from 'react'
-import { createContext } from 'react'
 
 import { noop } from '~/src/utils/functionUtils'
+import { createContext } from '~/src/utils/reactUtils'
 
-export interface OutlineItemContextProps {
+interface OutlineItemContextProps {
   depth: number
   paddingLeft: number
   active: boolean
   onClick: (event?: React.MouseEvent<Element>, name?: string) => void
 }
 
-export const defaultOutlineItemContext = {
+const defaultOutlineItemContext = {
   depth: 0,
   paddingLeft: 0,
   active: false,
   onClick: noop,
 }
 
-export function mergeOutlineItemContexts(
+function mergeOutlineItemContexts(
   inherited: OutlineItemContextProps,
   props: Partial<Omit<OutlineItemContextProps, 'depth'>>,
   indent: number,
@@ -33,4 +33,15 @@ export function mergeOutlineItemContexts(
   }
 }
 
-export const OutlineItemContext = createContext<OutlineItemContextProps>(defaultOutlineItemContext)
+const [
+  OutlineItemContextProvider,
+  useOutlineItemContextBase,
+] = createContext<OutlineItemContextProps>(defaultOutlineItemContext)
+
+export { OutlineItemContextProvider }
+
+export const useOutlineItemContext = (props: Partial<Omit<OutlineItemContextProps, 'depth'>>, indent: number) => {
+  const inheritedContext = useOutlineItemContextBase() ?? defaultOutlineItemContext
+  const context = mergeOutlineItemContexts(inheritedContext, props, indent)
+  return context
+}
diff --git a/packages/bezier-react/src/components/OutlineItem/useOutlineItemContext.ts b/packages/bezier-react/src/components/OutlineItem/useOutlineItemContext.ts
deleted file mode 100644
index dc2ec9be40..0000000000
--- a/packages/bezier-react/src/components/OutlineItem/useOutlineItemContext.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useContext } from 'react'
-
-import {
-  OutlineItemContext,
-  defaultOutlineItemContext,
-  mergeOutlineItemContexts,
-} from './OutlineItemContext'
-import type { OutlineItemContextProps } from './OutlineItemContext'
-
-const useOutlineItemContext = (props: Partial<Omit<OutlineItemContextProps, 'depth'>>, indent: number) => {
-  const inheritedContext = useContext(OutlineItemContext) ?? defaultOutlineItemContext
-  const context = mergeOutlineItemContexts(inheritedContext, props, indent)
-  return context
-}
-
-export default useOutlineItemContext
diff --git a/packages/bezier-react/src/components/Tabs/TabAction.tsx b/packages/bezier-react/src/components/Tabs/TabAction.tsx
index 1bd46d1cc6..c096b6317e 100644
--- a/packages/bezier-react/src/components/Tabs/TabAction.tsx
+++ b/packages/bezier-react/src/components/Tabs/TabAction.tsx
@@ -1,7 +1,4 @@
-import React, {
-  forwardRef,
-  useContext,
-} from 'react'
+import React, { forwardRef } from 'react'
 
 import { OpenInNewIcon } from '@channel.io/bezier-icons'
 
@@ -12,7 +9,7 @@ import { isNil } from '~/src/utils/typeUtils'
 import { IconSize } from '~/src/components/Icon'
 import { Text } from '~/src/components/Text'
 
-import TabListContext from './TabListContext'
+import { useTabListContext } from './TabListContext'
 import {
   type TabActionElement,
   type TabActionProps,
@@ -52,7 +49,7 @@ export const TabAction = forwardRef(function TabAction<Link extends string | und
   ...rest
 }: TabActionProps<Link>, forwardedRef: React.Ref<TabActionElement<Link>>,
 ) {
-  const { size } = useContext(TabListContext)
+  const { size } = useTabListContext()
 
   return (
     isNil(href) ? (
diff --git a/packages/bezier-react/src/components/Tabs/TabItem.tsx b/packages/bezier-react/src/components/Tabs/TabItem.tsx
index 7d6de48d74..422b9e72ad 100644
--- a/packages/bezier-react/src/components/Tabs/TabItem.tsx
+++ b/packages/bezier-react/src/components/Tabs/TabItem.tsx
@@ -1,7 +1,4 @@
-import React, {
-  forwardRef,
-  useContext,
-} from 'react'
+import React, { forwardRef } from 'react'
 
 import * as Tabs from '@radix-ui/react-tabs'
 
@@ -11,7 +8,7 @@ import {
   ButtonStyleVariant,
 } from '~/src/components/Button'
 
-import TabListContext from './TabListContext'
+import { useTabListContext } from './TabListContext'
 import {
   type TabItemProps,
   TabSize,
@@ -40,7 +37,7 @@ export const TabItem = forwardRef(function TabItem({
   children,
   ...rest
 }: TabItemProps, forwardedRef: React.Ref<HTMLButtonElement>) {
-  const { size } = useContext(TabListContext)
+  const { size } = useTabListContext()
 
   if (typeof children !== 'string') {
     return null
diff --git a/packages/bezier-react/src/components/Tabs/TabList.tsx b/packages/bezier-react/src/components/Tabs/TabList.tsx
index 93f8dd0c61..0a300c0b36 100644
--- a/packages/bezier-react/src/components/Tabs/TabList.tsx
+++ b/packages/bezier-react/src/components/Tabs/TabList.tsx
@@ -3,7 +3,7 @@ import React, {
   useMemo,
 } from 'react'
 
-import TabListContext from './TabListContext'
+import { TabListContextProvider } from './TabListContext'
 import {
   type TabListProps,
   TabSize,
@@ -36,7 +36,7 @@ export const TabList = forwardRef(function TabList({
   }), [size])
 
   return (
-    <TabListContext.Provider value={heightContextValue}>
+    <TabListContextProvider value={heightContextValue}>
       <Styled.TabList
         size={size}
         ref={forwardedRef}
@@ -47,6 +47,6 @@ export const TabList = forwardRef(function TabList({
       >
         { children }
       </Styled.TabList>
-    </TabListContext.Provider>
+    </TabListContextProvider>
   )
 })
diff --git a/packages/bezier-react/src/components/Tabs/TabListContext.ts b/packages/bezier-react/src/components/Tabs/TabListContext.ts
index 1e05abc388..1eca31ec1d 100644
--- a/packages/bezier-react/src/components/Tabs/TabListContext.ts
+++ b/packages/bezier-react/src/components/Tabs/TabListContext.ts
@@ -1,12 +1,13 @@
-import { createContext } from 'react'
+import { createContext } from '~/src/utils/reactUtils'
 
 import {
   type TabListContextValue,
   TabSize,
 } from './Tabs.types'
 
-const TabListContext = createContext<TabListContextValue>({
+export const [
+  TabListContextProvider,
+  useTabListContext,
+] = createContext<TabListContextValue>({
   size: TabSize.M,
 })
-
-export default TabListContext
diff --git a/packages/bezier-react/src/components/Toast/ToastContext.ts b/packages/bezier-react/src/components/Toast/ToastContext.ts
index 6b2a860165..cdf7f52b17 100644
--- a/packages/bezier-react/src/components/Toast/ToastContext.ts
+++ b/packages/bezier-react/src/components/Toast/ToastContext.ts
@@ -1,10 +1,12 @@
-import { createContext } from 'react'
-
 import { noop } from '~/src/utils/functionUtils'
+import { createContext } from '~/src/utils/reactUtils'
 
 import { type ToastContextType } from './Toast.types'
 
-const ToastContext = createContext<ToastContextType>({
+export const [
+  ToastContextProvider,
+  useToastContext,
+] = createContext<ToastContextType>({
   add: () => '',
   update: () => '',
   remove: noop,
@@ -12,5 +14,3 @@ const ToastContext = createContext<ToastContextType>({
   leftToasts: [],
   rightToasts: [],
 })
-
-export default ToastContext
diff --git a/packages/bezier-react/src/components/Toast/ToastProvider.tsx b/packages/bezier-react/src/components/Toast/ToastProvider.tsx
index fd7f3bb23d..152467694a 100644
--- a/packages/bezier-react/src/components/Toast/ToastProvider.tsx
+++ b/packages/bezier-react/src/components/Toast/ToastProvider.tsx
@@ -15,13 +15,11 @@ import {
   type ToastType,
 } from './Toast.types'
 import ToastContainer from './ToastContainer'
-import ToastContext from './ToastContext'
+import { ToastContextProvider } from './ToastContext'
 import ToastController from './ToastController'
 import ToastElement from './ToastElement'
 import useToastProviderValues from './useToastContextValues'
 
-const { Provider } = ToastContext
-
 function ToastProvider({
   autoDismissTimeout = 3000,
   children = [],
@@ -77,7 +75,7 @@ function ToastProvider({
   ])
 
   return (
-    <Provider value={toastContextValue}>
+    <ToastContextProvider value={toastContextValue}>
       { children }
       { createPortal(
         [
@@ -86,7 +84,7 @@ function ToastProvider({
         ],
         getRootElement(),
       ) }
-    </Provider>
+    </ToastContextProvider>
   )
 }
 
diff --git a/packages/bezier-react/src/components/Toast/useToast.ts b/packages/bezier-react/src/components/Toast/useToast.ts
index 632557f4af..81aaee520c 100644
--- a/packages/bezier-react/src/components/Toast/useToast.ts
+++ b/packages/bezier-react/src/components/Toast/useToast.ts
@@ -1,12 +1,10 @@
-import { useContext } from 'react'
-
-import ToastContext from './ToastContext'
+import { useToastContext } from './ToastContext'
 
 export default function useToast() {
-  const context = useContext(ToastContext)
+  const context = useToastContext()
 
   if (!context) {
-    throw Error('ToastProvider가 필요합니다.')
+    throw Error('\'useToast\' must be used within \'ToastProvider\'')
   }
 
   return {
diff --git a/packages/bezier-react/src/components/Tooltip/Tooltip.tsx b/packages/bezier-react/src/components/Tooltip/Tooltip.tsx
index 72a7424a50..98cfc37e5d 100644
--- a/packages/bezier-react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/bezier-react/src/components/Tooltip/Tooltip.tsx
@@ -10,6 +10,7 @@ import React, {
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
 import { document } from '~/src/utils/domUtils'
+import { createContext } from '~/src/utils/reactUtils'
 import { isBoolean } from '~/src/utils/typeUtils'
 
 import {
@@ -20,30 +21,6 @@ import {
 
 import * as Styled from './Tooltip.styled'
 
-// TODO: (@ed) Evolve it into a commonly reusable function
-// FIXME: duplicate
-function createContext<ContextValue>(
-  providerName: string,
-  defaultValue: ContextValue,
-) {
-  const Context = React.createContext<ContextValue>(defaultValue)
-
-  function useContext(consumerName: string) {
-    const contextValue = React.useContext(Context)
-
-    if (!contextValue) {
-      throw new Error(`'${consumerName}' must be used within '${providerName}'`)
-    }
-
-    return contextValue
-  }
-
-  return [
-    Context.Provider,
-    useContext,
-  ] as const
-}
-
 function getSideAndAlign(
   placement: TooltipPosition,
 ): Pick<TooltipPrimitive.TooltipContentProps, 'side' | 'align'> {
@@ -123,7 +100,7 @@ const [
    */
   TooltipGlobalContextProvider,
   useTooltipGlobalContext,
-] = createContext<Required<Pick<TooltipProviderProps, 'delayHide'>> | null>('TooltipProvider', null)
+] = createContext<Required<Pick<TooltipProviderProps, 'delayHide'>> | null>(null, 'TooltipProvider')
 
 /**
  * `TooltipProvider` is used to globally provide props to child tooltips.
diff --git a/packages/bezier-react/src/components/Tooltip/index.ts b/packages/bezier-react/src/components/Tooltip/index.ts
index ecc44b403a..40d85ac610 100644
--- a/packages/bezier-react/src/components/Tooltip/index.ts
+++ b/packages/bezier-react/src/components/Tooltip/index.ts
@@ -9,4 +9,3 @@ export type {
   TooltipProps,
   TooltipProviderProps,
 } from './Tooltip.types'
-
diff --git a/packages/bezier-react/src/features/FeatureProvider.tsx b/packages/bezier-react/src/features/FeatureProvider.tsx
index ce425a5160..d906cc48a5 100644
--- a/packages/bezier-react/src/features/FeatureProvider.tsx
+++ b/packages/bezier-react/src/features/FeatureProvider.tsx
@@ -1,11 +1,11 @@
 import React, {
-  createContext,
-  useContext,
   useLayoutEffect,
   useMemo,
   useState,
 } from 'react'
 
+import { createContext } from '~/src/utils/reactUtils'
+
 import {
   type Feature,
   FeatureType,
@@ -17,7 +17,10 @@ const initialFeatureFlag: FeatureFlag = {
   [FeatureType.SmoothCorners]: false,
 }
 
-const FeatureFlagContext = createContext<FeatureFlag>(initialFeatureFlag)
+const [
+  FeatureFlagContextProvider,
+  useFeatureFlagContext,
+] = createContext<FeatureFlag>(initialFeatureFlag)
 
 interface FeatureProviderProps {
   children: React.ReactNode
@@ -64,14 +67,14 @@ export function FeatureProvider({
   }, [features])
 
   return (
-    <FeatureFlagContext.Provider value={featureFlag}>
+    <FeatureFlagContextProvider value={featureFlag}>
       { children }
-    </FeatureFlagContext.Provider>
+    </FeatureFlagContextProvider>
   )
 }
 
 export function useFeatureFlag(featureType: FeatureType) {
-  const contextValue = useContext(FeatureFlagContext)
+  const contextValue = useFeatureFlagContext()
 
   return useMemo(() => (
     contextValue[featureType]
diff --git a/packages/bezier-react/src/utils/reactUtils.ts b/packages/bezier-react/src/utils/reactUtils.ts
index 647d052510..edf2119be7 100644
--- a/packages/bezier-react/src/utils/reactUtils.ts
+++ b/packages/bezier-react/src/utils/reactUtils.ts
@@ -4,3 +4,44 @@ export const getReactVersion = () => {
   const [major, minor, patch] = React.version.split('.').map(Number)
   return { major, minor, patch }
 }
+
+type NonNullableValue = object | number | string | boolean | bigint | symbol
+
+type NonStrictContextValue = NonNullableValue | undefined
+type StrictContextValue = NonNullableValue | null
+
+/**
+ * A function that makes it easy to use the React `createContext` function.
+ *
+ * @param defaultValue The default value of the context.
+ * @param providerName The name of the provider component.
+ * **Required if `defaultValue` is `null`able. (not `undefined`!)** Used to make the error message human-readable if contextValue is `null`.
+ */
+export function createContext<ContextValue extends NonStrictContextValue>(
+  defaultValue: ContextValue
+): [React.Provider<ContextValue>, () => ContextValue]
+export function createContext<ContextValue extends StrictContextValue>(
+  defaultValue: ContextValue,
+  providerName: string,
+): [React.Provider<ContextValue>, (consumerName: string) => NonNullable<ContextValue>]
+export function createContext<ContextValue extends StrictContextValue>(
+  defaultValue: ContextValue,
+  providerName?: string,
+) {
+  const Context = React.createContext<ContextValue>(defaultValue)
+
+  function useContext(consumerName?: any) {
+    const contextValue = React.useContext(Context)
+
+    if (contextValue === null) {
+      throw new Error(`'${consumerName}' must be used within '${providerName}'`)
+    }
+
+    return contextValue
+  }
+
+  return [
+    Context.Provider,
+    useContext,
+  ] as const
+}