Merge pull request #195 from DevKor-github/feat/#87/toast

토스트 굽기

Author: halionaz

panda.config.ts

@@ -46,6 +46,7 @@ export default defineConfig({
           navigator: { value: 500 },
           drawerBackLayer: { value: 600 },
           drawerBody: { value: 700 },
+          toast: { value: 800 },
         },
         sizes: PANDA_CSS_CONSTANTS,
         spacing: PANDA_CSS_CONSTANTS,

src/App.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import 'react-time-picker-typescript/dist/style.css';
 
 import SocketProvider from './common/components/SocketProvider';
+import { OverlayProvider } from '@/common/components/OverlayProvider';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -23,7 +24,9 @@ function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <SocketProvider>{router}</SocketProvider>
+      <SocketProvider>
+        <OverlayProvider>{router}</OverlayProvider>
+      </SocketProvider>
     </QueryClientProvider>
   );
 }

src/common/components/OverlayProvider/OverlayContext.ts

@@ -0,0 +1,9 @@
+import { createContext, type ReactNode } from 'react';
+
+export const OverlayContext = createContext<{
+  mount(id: string, element: ReactNode): void;
+  unmount(id: string): void;
+} | null>(null);
+if (process.env.NODE_ENV !== 'production') {
+  OverlayContext.displayName = 'OverlayContext';
+}

src/common/components/OverlayProvider/OverlayController.tsx

@@ -0,0 +1,33 @@
+import type { CreateOverlayElement } from '@/common/hooks/useOverlay';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useState, type Ref } from 'react';
+
+interface Props {
+  overlayElement: CreateOverlayElement;
+  onExit: () => void;
+}
+
+export interface OverlayControlRef {
+  close: () => void;
+}
+
+export const OverlayController = forwardRef(function OverlayController(
+  { overlayElement: OverlayElement, onExit }: Props,
+  ref: Ref<OverlayControlRef>,
+) {
+  const [isOpenOverlay, setIsOpenOverlay] = useState(false);
+
+  const handleOverlayClose = useCallback(() => setIsOpenOverlay(false), []);
+
+  useImperativeHandle(ref, () => {
+    return { close: handleOverlayClose };
+  }, [handleOverlayClose]);
+
+  useEffect(() => {
+    // NOTE: requestAnimationFrame이 없으면 가끔 Open 애니메이션이 실행되지 않는다.
+    requestAnimationFrame(() => {
+      setIsOpenOverlay(true);
+    });
+  }, []);
+
+  return <OverlayElement isOpen={isOpenOverlay} close={handleOverlayClose} exit={onExit} />;
+});

src/common/components/OverlayProvider/index.tsx

@@ -0,0 +1,33 @@
+import { OverlayContext } from '@/common/components/OverlayProvider/OverlayContext';
+import React, { useCallback, useMemo, useState, type PropsWithChildren, type ReactNode } from 'react';
+
+export function OverlayProvider({ children }: PropsWithChildren) {
+  const [overlayById, setOverlayById] = useState<Map<string, ReactNode>>(new Map());
+
+  const mount = useCallback((id: string, element: ReactNode) => {
+    setOverlayById(overlayById => {
+      const cloned = new Map(overlayById);
+      cloned.set(id, element);
+      return cloned;
+    });
+  }, []);
+
+  const unmount = useCallback((id: string) => {
+    setOverlayById(overlayById => {
+      const cloned = new Map(overlayById);
+      cloned.delete(id);
+      return cloned;
+    });
+  }, []);
+
+  const context = useMemo(() => ({ mount, unmount }), [mount, unmount]);
+
+  return (
+    <OverlayContext.Provider value={context}>
+      {children}
+      {[...overlayById.entries()].map(([id, element]) => (
+        <React.Fragment key={id}>{element}</React.Fragment>
+      ))}
+    </OverlayContext.Provider>
+  );
+}

src/common/components/Toast/index.tsx

@@ -0,0 +1,26 @@
+import { motion } from 'motion/react';
+
+import * as s from './style.css';
+
+import { TOAST_ANIMATION_DURATION } from '@/common/hooks/useToast';
+
+interface ToastProps {
+  isOpen: boolean;
+  message: string;
+}
+const Toast = ({ isOpen, message }: ToastProps) => {
+  return (
+    <div className={s.ToastLayout}>
+      <motion.div
+        className={s.ToastContainer}
+        initial={{ opacity: 0, translateY: 66 }}
+        animate={isOpen ? { opacity: 1, translateY: 0 } : { opacity: 0, translateY: 66 }}
+        transition={{ duration: TOAST_ANIMATION_DURATION / 1000, type: 'spring' }}
+      >
+        {message}
+      </motion.div>
+    </div>
+  );
+};
+
+export default Toast;

src/common/components/Toast/style.css.ts

@@ -0,0 +1,33 @@
+import { css } from '@styled-system/css';
+
+export const ToastLayout = css({
+  position: 'absolute',
+  bottom: 0,
+  left: '50%',
+  transform: 'translate3d(-50%,0,0)',
+  display: 'flex',
+  justifyContent: 'center',
+  zIndex: 'toast',
+});
+
+export const ToastContainer = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginBottom: '1.25rem',
+
+  width: 'fit-content',
+  maxW: '20rem',
+  borderRadius: '6.25rem',
+  padding: '0.75rem 2rem',
+
+  background: 'systemGray4',
+  backdropFilter: 'blur(4px)',
+
+  color: '100',
+  fontSize: '0.875rem',
+  letterSpacing: '-0.035rem',
+  lineHeight: '1.4',
+  fontWeight: 400,
+  whiteSpace: 'nowrap',
+});

src/common/hooks/useOverlay.tsx

@@ -0,0 +1,58 @@
+import { useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { OverlayContext } from '@/common/components/OverlayProvider/OverlayContext';
+import { OverlayController, type OverlayControlRef } from '@/common/components/OverlayProvider/OverlayController';
+
+export type CreateOverlayElement = (props: { isOpen: boolean; close: () => void; exit: () => void }) => ReactNode;
+
+let elementId = 1;
+
+interface Options {
+  exitOnUnmount?: boolean;
+}
+
+export function useOverlay({ exitOnUnmount = true }: Options = {}) {
+  const context = useContext(OverlayContext);
+
+  if (context === null) {
+    throw new Error('useOverlay is only available within OverlayProvider.');
+  }
+
+  const { mount, unmount } = context;
+  const [id] = useState(() => String(elementId++));
+
+  const overlayRef = useRef<OverlayControlRef | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (exitOnUnmount) {
+        unmount(id);
+      }
+    };
+  }, [exitOnUnmount, id, unmount]);
+
+  return useMemo(
+    () => ({
+      open: (overlayElement: CreateOverlayElement) => {
+        mount(
+          id,
+          <OverlayController
+            // NOTE: state should be reset every time we open an overlay
+            key={Date.now()}
+            ref={overlayRef}
+            overlayElement={overlayElement}
+            onExit={() => {
+              unmount(id);
+            }}
+          />,
+        );
+      },
+      close: () => {
+        overlayRef.current?.close();
+      },
+      exit: () => {
+        unmount(id);
+      },
+    }),
+    [id, mount, unmount],
+  );
+}

src/common/hooks/useToast.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useRef } from 'react';
+import { useOverlay } from '@/common/hooks/useOverlay';
+import Toast from '@/common/components/Toast';
+
+export const TOAST_ANIMATION_DURATION = 300;
+export const TOAST_DISPLAY_DURATION = 1000 + TOAST_ANIMATION_DURATION;
+
+interface OpenToastOption {
+  message: string;
+}
+export function useToast() {
+  // toast를 motion.div로 구현하니, 바로 exit 시켜도 애니메이션이 적용되는 것 같습니다만..
+  // 만일을 위해 transition이 보여질 수 있도록 close와 exit 로직을 분리하였습니다
+  const overlay = useOverlay({ exitOnUnmount: false });
+  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const exitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const initTimeout = useCallback(() => {
+    // 각종 타이머들을 초기화 합니다
+    if (closeTimeoutRef.current !== null) {
+      clearTimeout(closeTimeoutRef.current);
+    }
+
+    if (exitTimeoutRef.current !== null) {
+      clearTimeout(exitTimeoutRef.current);
+    }
+  }, []);
+
+  const handleClose = useCallback(() => {
+    overlay.close();
+    exitTimeoutRef.current = setTimeout(overlay.exit, TOAST_ANIMATION_DURATION);
+  }, [overlay]);
+
+  const openToast = ({ message }: OpenToastOption) => {
+    initTimeout();
+    closeTimeoutRef.current = setTimeout(handleClose, TOAST_DISPLAY_DURATION);
+    overlay.open(({ isOpen }) => <Toast isOpen={isOpen} message={message} />);
+  };
+
+  return { openToast };
+}

src/features/home/components/Filter/PriceFilter/CustomPriceInput.tsx

@@ -2,11 +2,13 @@ import { useEffect, useState } from 'react';
 import * as s from './style.css';
 import { MAX_PRICE } from '@/libs/constants';
 import { useSearchParams } from 'react-router';
+import { useToast } from '@/common/hooks/useToast';
 
 interface Props {
   active: boolean;
 }
 const CustomPriceInput = ({ active }: Props) => {
+  const { openToast } = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
 
   const defaultStartPrice = searchParams.get('start-price') ? Number(searchParams.get('start-price')) : NaN;
@@ -42,7 +44,7 @@ const CustomPriceInput = ({ active }: Props) => {
   const submitPrice = () => {
     if (isNaN(startPrice) || isNaN(endPrice)) return;
     if (startPrice > endPrice) {
-      alert('시작 가격이 끝 가격보다 클 수 없습니다.');
+      openToast({ message: '시작 가격이 끝 가격보다 클 수 없습니다.' });
       return;
     }
     setSearchParams(prev => {