diff --git a/index.html b/index.html
index d82565f..ee721cf 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
   <!-- <script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script> -->
   <title>자세 공작소</title>
 </head>
diff --git a/src/App.tsx b/src/App.tsx
index e8821d0..5362fba 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,13 +2,16 @@
 import { Router } from "@/routes"
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import ModalsProvider from "./providers/ModalsProvider"
 
 const queryClient = new QueryClient()
 
 const App = (): React.ReactElement => {
   return (
     <QueryClientProvider client={queryClient}>
-      <Router></Router>
+      <ModalsProvider>
+        <Router></Router>
+      </ModalsProvider>
     </QueryClientProvider>
   )
 }
diff --git a/src/components/Crew/CrewList.tsx b/src/components/Crew/CrewList.tsx
index 87765ad..c3cb789 100644
--- a/src/components/Crew/CrewList.tsx
+++ b/src/components/Crew/CrewList.tsx
@@ -1,14 +1,13 @@
 import { group, groupsReq } from "@/api"
 import EmptyCrewImage from "@/assets/images/crew-empty.png"
 import CrewItem from "@/components/Crew/CrewItem"
-import CreateCrewModal from "@/components/Modal/CreateCrewModal"
-import JoinCrewModal from "@/components/Modal/JoinCrewModal"
 import { useGetGroups } from "@/hooks/useGroupMutation"
 import CreateCrewIcon from "@assets/icons/crew-create-button-icon.svg?react"
 import SortCrewIcon from "@assets/icons/crew-sort-icon.svg?react"
 import { ReactElement, useEffect, useRef, useState } from "react"
-
+import { useModals } from "@/hooks/useModals"
 import MyCrewRankingContainer from "./MyCrewRankingContainer"
+import { modals } from "../Modal/Modals"
 
 const SORT_LIST = [
   { sort: "userCount,desc", label: "크루원 많은 순" },
@@ -19,8 +18,6 @@ const CrewList = (): ReactElement => {
   const [sort, setSort] = useState<number>(0)
   const [mode] = useState<"my" | "list">("my")
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false)
-  const [isJoinModalOpen, setIsJoinModalOpen] = useState<boolean>(false)
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState<boolean>(false)
 
   const [params] = useState<groupsReq>({
     page: 0,
@@ -30,11 +27,31 @@ const CrewList = (): ReactElement => {
 
   const { data, isLoading, isError } = useGetGroups(params)
 
-  const openJoinModal = (): void => setIsJoinModalOpen(true)
-  const closeJoinModal = (): void => setIsJoinModalOpen(false)
+  const { openModal } = useModals()
+
+  const openCreateModal = (): void => {
+    openModal(modals.createCrewModal, {
+      onSubmit: () => {
+        console.log("open")
+      },
+    })
+  }
+
+  const openJoinCrewModal = (): void => {
+    openModal(modals.joinCrewModal, {
+      onSubmit: () => {
+        console.log("open")
+      },
+    })
+  }
 
-  const openCreateModal = (): void => setIsCreateModalOpen(true)
-  const closeCreateModal = (): void => setIsCreateModalOpen(false)
+  const openInviteModal = (): void => {
+    openModal(modals.inviteCrewModal, {
+      onSubmit: () => {
+        console.log("open")
+      },
+    })
+  }
 
   const dropdownRef = useRef<HTMLDivElement>(null)
 
@@ -72,7 +89,7 @@ const CrewList = (): ReactElement => {
     return (
       <div className="flex flex-grow flex-col gap-[8px]">
         {_groups.map((g) => (
-          <CrewItem key={`crew-item-${g.id}`} group={g} onClickDetail={openJoinModal} />
+          <CrewItem key={`crew-item-${g.id}`} group={g} onClickDetail={openJoinCrewModal} />
         ))}
       </div>
     )
@@ -93,7 +110,7 @@ const CrewList = (): ReactElement => {
 
   return (
     <div className="flex h-full w-full flex-col">
-      {mode === "my" && <MyCrewRankingContainer openCreateModal={openCreateModal} />}
+      {mode === "my" && <MyCrewRankingContainer openCreateModal={openCreateModal} openInviteModal={openInviteModal} />}
       {/* header */}
       <div className="mb-[24px] flex w-full items-center">
         <div className="flex-grow text-[22px] font-bold text-zinc-900">전체크루(0)</div>
@@ -129,8 +146,6 @@ const CrewList = (): ReactElement => {
 
       {/* list */}
       {isLoading ? "로딩 중입니다..." : isError ? "데이터를 불러오는데 실패했습니다." : createGroupList(data?.data)}
-      <JoinCrewModal isOpen={isJoinModalOpen} onClose={closeJoinModal} id={0} onSubmit={(): void => {}} />
-      <CreateCrewModal isOpen={isCreateModalOpen} onClose={closeCreateModal} onSubmit={(): void => {}} />
     </div>
   )
 }
diff --git a/src/components/Crew/MyCrewRankingContainer.tsx b/src/components/Crew/MyCrewRankingContainer.tsx
index e60a728..7b37fdc 100644
--- a/src/components/Crew/MyCrewRankingContainer.tsx
+++ b/src/components/Crew/MyCrewRankingContainer.tsx
@@ -8,10 +8,11 @@ import RoutePath from "@/constants/routes.json"
 
 interface MyCrewRankingContainerProps {
   openCreateModal: () => void
+  openInviteModal: () => void
 }
 
 export default function MyCrewRankingContainer(props: MyCrewRankingContainerProps) {
-  const { openCreateModal } = props
+  const { openCreateModal, openInviteModal } = props
   return (
     <div className="mb-12">
       <div className="mb-[24px] flex w-full items-center">
@@ -32,7 +33,10 @@ export default function MyCrewRankingContainer(props: MyCrewRankingContainerProp
               <CrewUserIcon />
               <span className="text-sm font-medium text-zinc-500">7/30명</span>
             </div>
-            <button className="rounded-full border-[1px] border-solid border-gray-200 bg-white">
+            <button
+              className="rounded-full border-[1px] border-solid border-gray-200 bg-white"
+              onClick={openInviteModal}
+            >
               <div className="flex items-center gap-1 px-2 py-1">
                 <SendInvitationIcon />
                 <span className="text-sm font-medium text-zinc-400">초대하기</span>
diff --git a/src/components/Modal/CreateCrewModal.tsx b/src/components/Modal/CreateCrewModal.tsx
index 8ea577c..e513356 100644
--- a/src/components/Modal/CreateCrewModal.tsx
+++ b/src/components/Modal/CreateCrewModal.tsx
@@ -1,16 +1,11 @@
-import Modal from "@components/Modal"
+import ModalContainer from "@components/ModalContainer"
 import CheckedIcon from "@assets/icons/crew-checked-icon.svg?react"
 import UnCheckedIcon from "@assets/icons/crew-unckecked-icon.svg?react"
 import { useState } from "react"
+import { ModalProps } from "@/contexts/ModalsContext"
 
-interface CreateCrewModalProps {
-  isOpen: boolean
-  onClose: () => void
-  onSubmit: () => void
-}
-
-const CreateCrewModal = (props: CreateCrewModalProps): React.ReactElement => {
-  const { isOpen, onClose, onSubmit } = props
+const CreateCrewModal = (props: ModalProps): React.ReactElement => {
+  const { onClose, onSubmit } = props
 
   const [name, setName] = useState<string>("")
   const [description, setDescription] = useState<string>("")
@@ -46,7 +41,7 @@ const CreateCrewModal = (props: CreateCrewModalProps): React.ReactElement => {
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <ModalContainer onClose={onClose}>
       <div className="flex flex-col items-center">
         {/* header */}
         <div className="mb-10 flex items-center gap-4">
@@ -116,7 +111,7 @@ const CreateCrewModal = (props: CreateCrewModalProps): React.ReactElement => {
           크루 만들기
         </button>
       </div>
-    </Modal>
+    </ModalContainer>
   )
 }
 
diff --git a/src/components/Modal/InviteCrewModal.tsx b/src/components/Modal/InviteCrewModal.tsx
index db91777..e3efb18 100644
--- a/src/components/Modal/InviteCrewModal.tsx
+++ b/src/components/Modal/InviteCrewModal.tsx
@@ -1,16 +1,11 @@
-import Modal from "@components/Modal"
+import { ModalProps } from "@/contexts/ModalsContext"
+import ModalContainer from "@components/ModalContainer"
 
-interface CreateCrewModalProps {
-  isOpen: boolean
-  onClose: () => void
-  onSubmit: () => void
-}
-
-const InviteCrewModal = (props: CreateCrewModalProps): React.ReactElement => {
-  const { isOpen, onClose, onSubmit } = props
+const InviteCrewModal = (props: ModalProps): React.ReactElement => {
+  const { onClose, onSubmit } = props
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <ModalContainer onClose={onClose}>
       <div className="flex flex-col items-center">
         {/* header */}
         <div className="mb-3 flex items-center gap-4">
@@ -32,7 +27,7 @@ const InviteCrewModal = (props: CreateCrewModalProps): React.ReactElement => {
           초대 링크 복사하기
         </button>
       </div>
-    </Modal>
+    </ModalContainer>
   )
 }
 
diff --git a/src/components/Modal/JoinCrewModal.tsx b/src/components/Modal/JoinCrewModal.tsx
index a363c9f..80b804c 100644
--- a/src/components/Modal/JoinCrewModal.tsx
+++ b/src/components/Modal/JoinCrewModal.tsx
@@ -1,17 +1,11 @@
-import Modal from "@components/Modal"
+import ModalContainer from "@components/ModalContainer"
 import CrewJoinUserIcon from "@assets/icons/crew-join-user-icon.svg?react"
 import PrivateCrewIcon from "@assets/icons/crew-private-icon.svg?react"
 import { useState } from "react"
+import { ModalProps } from "@/contexts/ModalsContext"
 
-interface JoinCrewModalProps {
-  id: number
-  isOpen: boolean
-  onClose: () => void
-  onSubmit: () => void
-}
-
-const JoinCrewModal = (props: JoinCrewModalProps): React.ReactElement => {
-  const { isOpen, onClose, onSubmit } = props
+const JoinCrewModal = (props: ModalProps): React.ReactElement => {
+  const { onClose, onSubmit } = props
 
   const [joinCode, setJoinCode] = useState<string>("")
   const [isCodeError, setIsCodeError] = useState<boolean>(false)
@@ -22,7 +16,7 @@ const JoinCrewModal = (props: JoinCrewModalProps): React.ReactElement => {
   }
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <ModalContainer onClose={onClose}>
       <div className="flex w-full flex-col items-center">
         {/* header */}
         <div className="mb-[40px] flex w-full items-center gap-[16px]">
@@ -94,7 +88,7 @@ const JoinCrewModal = (props: JoinCrewModalProps): React.ReactElement => {
           크루 가입하기
         </button>
       </div>
-    </Modal>
+    </ModalContainer>
   )
 }
 
diff --git a/src/components/Modal/Modals.tsx b/src/components/Modal/Modals.tsx
new file mode 100644
index 0000000..10f0cbe
--- /dev/null
+++ b/src/components/Modal/Modals.tsx
@@ -0,0 +1,43 @@
+import { ModalsDispatchContext, ModalsStateContext } from "@/contexts/ModalsContext"
+import { useContext } from "react"
+import CreateCrewModal from "./CreateCrewModal"
+import InviteCrewModal from "./InviteCrewModal"
+import JoinCrewModal from "./JoinCrewModal"
+import WithdrawCrewModal from "./WithdrawCrewModal"
+
+export const modals = {
+  createCrewModal: CreateCrewModal,
+  inviteCrewModal: InviteCrewModal,
+  joinCrewModal: JoinCrewModal,
+  withdrawCrewModal: WithdrawCrewModal,
+}
+
+const Modals = (): React.ReactNode => {
+  const openedModals = useContext(ModalsStateContext)
+  const { close } = useContext(ModalsDispatchContext)
+
+  return openedModals.map((modal, index) => {
+    const { Component, props } = modal
+    if (!props) return null
+
+    const { onSubmit, onClose, ...rest } = props
+
+    const handleClose = async (): Promise<void> => {
+      if (typeof onClose === "function") {
+        await onClose()
+      }
+      close(Component)
+    }
+
+    const handleSubmit = async (): Promise<void> => {
+      if (typeof onSubmit === "function") {
+        await onSubmit()
+      }
+      handleClose()
+    }
+
+    // eslint-disable-next-line max-len
+    return <Component key={index} onClose={handleClose} onSubmit={handleSubmit} {...rest} />
+  })
+}
+export default Modals
diff --git a/src/components/Modal/WithdrawCrewModal.tsx b/src/components/Modal/WithdrawCrewModal.tsx
index fb3253d..f5ebbf4 100644
--- a/src/components/Modal/WithdrawCrewModal.tsx
+++ b/src/components/Modal/WithdrawCrewModal.tsx
@@ -1,16 +1,11 @@
-import Modal from "@components/Modal"
+import { ModalProps } from "@/contexts/ModalsContext"
+import ModalContainer from "@components/ModalContainer"
 
-interface CreateCrewModalProps {
-  isOpen: boolean
-  onClose: () => void
-  onSubmit: () => void
-}
-
-const WithdrawCrewModal = (props: CreateCrewModalProps): React.ReactElement => {
-  const { isOpen, onClose, onSubmit } = props
+const WithdrawCrewModal = (props: ModalProps): React.ReactElement => {
+  const { onClose, onSubmit } = props
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose}>
+    <ModalContainer onClose={onClose}>
       <div className="flex flex-col items-center">
         {/* header */}
         <div className="mb-12 flex items-center gap-4">
@@ -37,7 +32,7 @@ const WithdrawCrewModal = (props: CreateCrewModalProps): React.ReactElement => {
           </button>
         </div>
       </div>
-    </Modal>
+    </ModalContainer>
   )
 }
 
diff --git a/src/components/Modal.tsx b/src/components/ModalContainer.tsx
similarity index 65%
rename from src/components/Modal.tsx
rename to src/components/ModalContainer.tsx
index 75dc593..cd92083 100644
--- a/src/components/Modal.tsx
+++ b/src/components/ModalContainer.tsx
@@ -1,22 +1,22 @@
-import React from "react"
+import React, { ReactNode } from "react"
 import ReactDOM from "react-dom"
 import CloseIcon from "@assets/icons/modal-close-icon.svg?react"
 
-interface ModalProps {
-  isOpen: boolean
-  onClose: () => void
-  children: React.ReactNode
+type ModalContainerProps = {
+  onClose?: () => void
+  children: ReactNode
 }
 
-const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
-  if (!isOpen) return null
-
+const ModalContainer: React.FC<ModalContainerProps> = ({ onClose, children }) => {
+  const handleClose = (): void => {
+    if (onClose && typeof onClose === "function") onClose()
+  }
   // Modal이 main 안에서 절대적으로 위치하도록 변경
   return ReactDOM.createPortal(
     <div className="absolute inset-0 z-50 flex items-center justify-center bg-zinc-900 bg-opacity-20">
       <div className="relative w-[640px] rounded-lg bg-white px-10 pb-6 pt-10 shadow-lg">
         {/* Close Button */}
-        <button className="absolute right-10 top-10 text-gray-500 hover:text-gray-800" onClick={onClose}>
+        <button className="absolute right-10 top-10 text-gray-500 hover:text-gray-800" onClick={handleClose}>
           <CloseIcon />
         </button>
         {/* Modal Content */}
@@ -27,4 +27,4 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
   )
 }
 
-export default Modal
+export default ModalContainer
diff --git a/src/components/PoseDetector.tsx b/src/components/PoseDetector.tsx
index 6389eea..cc34a2c 100644
--- a/src/components/PoseDetector.tsx
+++ b/src/components/PoseDetector.tsx
@@ -124,7 +124,8 @@ const PoseDetector: React.FC = () => {
               const req = { snapshot: { keypoints, score }, type: poseType }
               sendPoseMutation.mutate(req)
               cntRef.current = cntRef.current + 1
-              if (isShowNoti) showNotification(`척추 건강 위험! ${getPoseName(poseType)} 감지! 자세를 바르게 앉아주세요.`)
+              if (isShowNoti)
+                showNotification(`척추 건강 위험! ${getPoseName(poseType)} 감지! 자세를 바르게 앉아주세요.`)
             }
           }, 30 * 1000)
         }
diff --git a/src/components/index.ts b/src/components/index.ts
index 9a9e1ad..23bd399 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,3 @@
 export { default as Camera } from "./Camera"
 export { default as PoseDetector } from "./PoseDetector"
-export { default as Modal } from "./Modal"
+export { default as ModalContainer } from "./ModalContainer"
diff --git a/src/contexts/ModalsContext.ts b/src/contexts/ModalsContext.ts
new file mode 100644
index 0000000..13e7df8
--- /dev/null
+++ b/src/contexts/ModalsContext.ts
@@ -0,0 +1,21 @@
+import { ComponentType, createContext } from "react"
+
+export type ModalProps = {
+  id?: number
+  onClose?: () => void
+  onSubmit?: () => void
+}
+
+export type ModalComponent = ComponentType<any>
+export type ModalsState = Array<{ Component: ModalComponent; props?: ModalProps }>
+export type ModalsDispatch = {
+  open: (Component: ModalComponent, props: ModalProps) => void
+  close: (Component: ModalComponent) => void
+}
+
+export const ModalsStateContext = createContext<ModalsState>([])
+
+export const ModalsDispatchContext = createContext<ModalsDispatch>({
+  open: () => {},
+  close: () => {},
+})
diff --git a/src/hooks/useModals.ts b/src/hooks/useModals.ts
new file mode 100644
index 0000000..4a894a8
--- /dev/null
+++ b/src/hooks/useModals.ts
@@ -0,0 +1,24 @@
+import { ModalComponent, ModalProps, ModalsDispatchContext } from "@/contexts/ModalsContext"
+import { useContext } from "react"
+
+interface UseModalResult {
+  openModal: (Component: ModalComponent, props: ModalProps) => void
+  closeModal: (Component: ModalComponent) => void
+}
+
+export const useModals = (): UseModalResult => {
+  const { open, close } = useContext(ModalsDispatchContext)
+
+  const openModal = (Component: ModalComponent, props: ModalProps): void => {
+    open(Component, props)
+  }
+
+  const closeModal = (Component: ModalComponent): void => {
+    close(Component)
+  }
+
+  return {
+    openModal,
+    closeModal,
+  }
+}
diff --git a/src/hooks/usePushNotification.ts b/src/hooks/usePushNotification.ts
index 3b034d8..07fdb7d 100644
--- a/src/hooks/usePushNotification.ts
+++ b/src/hooks/usePushNotification.ts
@@ -1,7 +1,14 @@
 import { useState, useEffect } from "react"
 
+interface UsePushNotificationResult {
+  hasPermission: boolean
+  isPermissionDenied: boolean
+  requestNotificationPermission: () => Promise<void>
+  showNotification: (body: string) => void
+}
+
 // 커스텀 훅: 알림 권한을 확인하고 권한 변경을 감지
-const usePushNotification = () => {
+const usePushNotification = (): UsePushNotificationResult => {
   const [hasPermission, setHasPermission] = useState(false) // 권한이 허용되었는지 여부
   const [isPermissionDenied, setIsPermissionDenied] = useState(false) // 권한이 거부되었는지 여부
 
diff --git a/src/providers/ModalsProvider.tsx b/src/providers/ModalsProvider.tsx
new file mode 100644
index 0000000..8968cbd
--- /dev/null
+++ b/src/providers/ModalsProvider.tsx
@@ -0,0 +1,40 @@
+import Modals from "@/components/Modal/Modals"
+import {
+  ModalsDispatchContext,
+  ModalsStateContext,
+  ModalsState,
+  ModalComponent,
+  ModalProps,
+} from "@/contexts/ModalsContext"
+import { PropsWithChildren, useMemo, useState } from "react"
+
+const ModalsProvider = ({ children }: PropsWithChildren): React.ReactNode => {
+  const [openedModals, setOpenedModals] = useState<ModalsState>([])
+
+  const open = (Component: ModalComponent, props: ModalProps): void => {
+    console.log(Component, props)
+    setOpenedModals((modals) => {
+      return [...modals, { Component, props }]
+    })
+  }
+
+  const close = (Component: ModalComponent): void => {
+    setOpenedModals((modals) => {
+      return modals.filter((modal) => {
+        return modal.Component !== Component
+      })
+    })
+  }
+
+  const dispatch = useMemo(() => ({ open, close }), [])
+
+  return (
+    <ModalsStateContext.Provider value={openedModals}>
+      <ModalsDispatchContext.Provider value={dispatch}>
+        {children}
+        <Modals />
+      </ModalsDispatchContext.Provider>
+    </ModalsStateContext.Provider>
+  )
+}
+export default ModalsProvider
diff --git a/tsconfig.json b/tsconfig.json
index 745944f..5e53a91 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,8 +28,10 @@
       "@constants/*": ["src/constants/*"],
       "@pages/*": ["src/pages/*"],
       "@layouts/*": ["src/layouts/*"],
-      "@store": ["src/store/*"],
-      "@assets/*": ["src/assets/*"]
+      "@assets/*": ["src/assets/*"],
+      "@store/*": ["src/store/*"],
+      "@contexts/*": ["src/contexts/*"],
+      "@providers/*": ["src/providers/*"]
     }
   },
   "include": ["src", "svg.d.ts"],