글로벌 컴포넌트

packages/global-components/index.ts

@@ -0,0 +1,3 @@
+export * from './src/utils'
+export * from './src/manager'
+export * from './src/provider'

packages/global-components/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@daehwahap/global-components",
+  "version": "0.0.1",
+  "private": true,
+  "devDependencies": {
+    "@types/react": "^18.2.61",
+    "react": "^18.2.0",
+    "typescript": "5.4.3"
+  }
+}

packages/global-components/src/manager/index.ts

@@ -0,0 +1,33 @@
+import { GlobalComponentContextType } from '../types'
+
+type GlobalComponentDisplayName =
+  | 'BottomSheet'
+  | 'LoadingIndicator'
+  | 'Popup'
+  | 'ScreenBottomSheet'
+  | 'Toast'
+
+class GlobalComponentManager {
+  private map = new Map<string, React.RefObject<GlobalComponentContextType<any>>>()
+
+  public registerRef(name: string, ref: React.RefObject<GlobalComponentContextType<any>>): void {
+    if (this.map.has(name)) return
+    this.map.set(name, ref)
+  }
+
+  public async hideAll(): Promise<boolean> {
+    await Promise.all(Array.from(this.map).map(([_, popup]) => popup.current?.hide()))
+    return true
+  }
+
+  public async hide(params: { name: GlobalComponentDisplayName }) {
+    const componentRef = this.map.get(params.name)
+
+    if (componentRef) {
+      await componentRef.current?.hide()
+    }
+    return true
+  }
+}
+
+export const globalComponentManager = new GlobalComponentManager()

packages/global-components/src/provider/index.tsx

@@ -0,0 +1,68 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  Animation,
+  GlobalComponentContextProviderProps,
+  GlobalComponentContextType,
+} from '../types'
+
+export const GlobalComponentContext = createContext<GlobalComponentContextType | null>(null)
+
+const useGlobalComponentContext = () => {
+  const context = useContext(GlobalComponentContext)
+
+  if (!context) {
+    throw new Error('GlobalComponent should be used with GlobalComponentContext')
+  }
+
+  return context
+}
+
+const GlobalComponentContextProvider = <T extends any>({
+  Component,
+  internalRef,
+}: GlobalComponentContextProviderProps<T>) => {
+  const [props, setProps] = useState<T | null>(null)
+
+  const animations = useRef<Animation[]>([])
+
+  const execHideAnimations = useCallback(async () => {
+    await Promise.all(animations.current.map((hideAnimationFn) => hideAnimationFn()))
+    animations.current = []
+  }, [])
+
+  const hideComponent = useCallback(async () => {
+    await execHideAnimations()
+    setProps(null)
+  }, [])
+
+  const context = useMemo(
+    () => ({
+      show: async (p: T) => {
+        await hideComponent()
+        setProps(p)
+      },
+      hide: () => hideComponent(),
+    }),
+    [],
+  )
+
+  useImperativeHandle(internalRef, () => context, [])
+
+  if (!props) return <></>
+
+  return (
+    <GlobalComponentContext.Provider value={context}>
+      <Component {...props} />
+    </GlobalComponentContext.Provider>
+  )
+}
+
+export { useGlobalComponentContext, GlobalComponentContextProvider }

packages/global-components/src/types/index.tsx

@@ -0,0 +1,11 @@
+export type Animation = () => Promise<void>
+
+export interface GlobalComponentContextType<T = any> {
+  show: (props: T, hidePrevComponentImmediate?: boolean) => Promise<void>
+  hide: () => Promise<void>
+}
+
+export interface GlobalComponentContextProviderProps<T> {
+  Component: React.FC<T>
+  internalRef: React.RefObject<GlobalComponentContextType<T>>
+}

packages/global-components/src/utils/index.ts

@@ -0,0 +1,39 @@
+import { createContext, createElement, createRef } from 'react'
+import { GlobalComponentContextType } from '../types'
+import { globalComponentManager } from '../manager'
+import { GlobalComponentContextProvider } from '../provider'
+
+export const createPortal = <T>(Component: React.FC<T>) => {
+  const context = createContext<GlobalComponentContextType<T>>({} as any)
+
+  const internalRef = createRef<GlobalComponentContextType<T>>()
+
+  const show = async (props: T, hidePrevComponentImmediate?: boolean) => {
+    if (!internalRef.current) {
+      return console.warn('global-components should be used with context')
+    }
+
+    await internalRef.current.show(props, hidePrevComponentImmediate)
+  }
+
+  const hide = async () => {
+    if (!internalRef.current) {
+      return console.warn('global-components should be used with context')
+    }
+
+    await internalRef.current.hide()
+  }
+
+  globalComponentManager.registerRef(Component.displayName || Component.name, internalRef)
+
+  return {
+    show,
+    hide,
+    Portal: ({ children }: { children?: React.ReactNode }) =>
+      createElement(
+        context.Provider,
+        { value: { show, hide } },
+        createElement(GlobalComponentContextProvider<T>, { Component, internalRef }, children),
+      ),
+  }
+}

web/daehwahap-webview/package.json

@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "@daehwahap/daehwahap-server": "workspace:^",
+    "@daehwahap/global-components": "workspace:^",
     "@trpc/client": "^10.45.2",
     "@trpc/server": "^10.45.2",
+    "framer-motion": "^11.1.1",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18"

web/daehwahap-webview/src/app/layout.tsx

@@ -1,22 +1,22 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import type { Metadata } from 'next'
+import './globals.css'
+import HOCProvider from '../global-components/hocs/HOCProvider'
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
 
-export default function RootLayout({
+export function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <HOCProvider>
+        <body>{children}</body>
+      </HOCProvider>
     </html>
-  );
+  )
 }

web/daehwahap-webview/src/app/trpc/page.tsx

@@ -1,9 +1,11 @@
-import { trpc } from '../../trpc'
+import { TestButton } from '../../components/TestButton'
 
 const TrpcPage = async () => {
-  const { greeting } = await trpc.createUser.mutate({ greeting: 'aa' })
-
-  return <div>{greeting}</div>
+  return (
+    <div style={{ backgroundColor: 'blue', height: '100vh' }}>
+      <TestButton />
+    </div>
+  )
 }
 
 export default TrpcPage

web/daehwahap-webview/src/components/TestButton.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import Toast from '../global-components/components/Toast'
+
+export const TestButton = () => {
+  return (
+    <button
+      style={{ backgroundColor: 'black', width: 100, height: 100 }}
+      onClick={() => {
+        console.log('toast')
+        Toast.show({ text: 'toast' })
+      }}
+    >
+      aaaaaaa
+    </button>
+  )
+}

web/daehwahap-webview/src/global-components/components/Toast/index.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { motion, AnimatePresence } from 'framer-motion'
+import { useEffect } from 'react'
+import { createPortal, useGlobalComponentContext } from '@daehwahap/global-components'
+
+interface ToastProps {
+  text: string
+  position?: 'top' | 'middle' | 'bottom'
+  duration?: number
+}
+
+const Toast = ({ text, position = 'top', duration = 2000 }: ToastProps) => {
+  // 이거는 Toast에만 해당하는 context임
+  const { hide } = useGlobalComponentContext()
+
+  useEffect(() => {
+    setTimeout(() => {
+      hide()
+    }, duration)
+  }, [])
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 20 }}
+        transition={{ duration: 0.3 }}
+        style={{
+          position: 'fixed',
+          top: 60,
+          width: '100vw',
+          maxWidth: '720px',
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            background: '#000000BF',
+            color: '#fff',
+            padding: '12px 20px',
+            borderRadius: '12px',
+          }}
+        >
+          {text}
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  )
+}
+
+export default createPortal(Toast)

web/daehwahap-webview/src/global-components/hocs/HOCProvider.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { ReactNode } from 'react'
+import Toast from '../components/Toast'
+
+type HOCProviderProps = { children: ReactNode }
+
+const HOCProvider = ({ children }: HOCProviderProps) => {
+  return (
+    <>
+      {children}
+      <div style={{ position: 'absolute' }}>
+        <Toast.Portal />
+      </div>
+    </>
+  )
+}
+
+export default HOCProvider

yarn.lock

@@ -570,6 +570,7 @@ __metadata:
   dependencies:
     "@daehwahap/daehwahap-server": "workspace:^"
     "@daehwahap/eslint-config": "workspace:^"
+    "@daehwahap/global-components": "workspace:^"
     "@trpc/client": "npm:^10.45.2"
     "@trpc/server": "npm:^10.45.2"
     "@types/eslint": "npm:^8"
@@ -578,6 +579,7 @@ __metadata:
     "@types/react-dom": "npm:^18"
     autoprefixer: "npm:^10.0.1"
     eslint: "npm:8.57.0"
+    framer-motion: "npm:^11.1.1"
     next: "npm:14.1.4"
     postcss: "npm:^8"
     react: "npm:^18"
@@ -608,6 +610,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@daehwahap/global-components@workspace:^, @daehwahap/global-components@workspace:packages/global-components":
+  version: 0.0.0-use.local
+  resolution: "@daehwahap/global-components@workspace:packages/global-components"
+  dependencies:
+    "@types/react": "npm:^18.2.61"
+    react: "npm:^18.2.0"
+    typescript: "npm:5.4.3"
+  languageName: unknown
+  linkType: soft
+
 "@daehwahap/web@workspace:apps/web":
   version: 0.0.0-use.local
   resolution: "@daehwahap/web@workspace:apps/web"
@@ -5044,6 +5056,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"framer-motion@npm:^11.1.1":
+  version: 11.1.1
+  resolution: "framer-motion@npm:11.1.1"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  peerDependencies:
+    "@emotion/is-prop-valid": "*"
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  peerDependenciesMeta:
+    "@emotion/is-prop-valid":
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: 10c0/0f80828f27ab18937a0dee55efacbd124f248f8eb869e581aeabbbbd755eb2cd42f70f5490edf1280abdef3d08c4c0d3f404db8fe6d32583d3842cb575f09cdb
+  languageName: node
+  linkType: hard
+
 "fresh@npm:0.5.2":
   version: 0.5.2
   resolution: "fresh@npm:0.5.2"