@uniai-fe/uds-primitives 0.0.1

package/src/components/drawer/markup/drawer.tsx

@@ -0,0 +1,421 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import clsx from "clsx";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+import type { CSSProperties } from "react";
+import CloseIcon from "../img/close.svg";
+import type {
+  DrawerContextValue,
+  DrawerCloseProps,
+  DrawerContentProps,
+  DrawerDescriptionProps,
+  DrawerOverlayProps,
+  DrawerPortalProps,
+  DrawerPhase,
+  DrawerRootProps,
+  DrawerSectionProps,
+  DrawerTitleProps,
+  DrawerTriggerProps,
+} from "../types";
+import { useDrawerDrag } from "../hooks";
+import {
+  composeEventHandlers,
+  DrawerContext,
+  mergeRefs,
+  renderButtonLike,
+  useDrawerContext,
+} from "../utils";
+
+const ANIMATION_DURATION = 320;
+
+const DrawerRoot = ({
+  children,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+}: DrawerRootProps) => {
+  const isControlled = openProp !== undefined;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(
+    defaultOpen ?? false,
+  );
+  const open = isControlled ? (openProp as boolean) : uncontrolledOpen;
+  const [phase, setPhase] = useState<DrawerPhase>(open ? "entered" : "exited");
+  const closeTimerRef = useRef<number | null>(null);
+  const enterRafRef = useRef<number | null>(null);
+
+  const setOpen = useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  useEffect(() => {
+    if (open) {
+      if (closeTimerRef.current) {
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+      setPhase("entering");
+      enterRafRef.current = window.requestAnimationFrame(() => {
+        setPhase("entered");
+        enterRafRef.current = null;
+      });
+      return () => {
+        if (enterRafRef.current) {
+          window.cancelAnimationFrame(enterRafRef.current);
+          enterRafRef.current = null;
+        }
+      };
+    }
+    if (enterRafRef.current) {
+      window.cancelAnimationFrame(enterRafRef.current);
+      enterRafRef.current = null;
+    }
+    setPhase("exiting");
+    closeTimerRef.current = window.setTimeout(() => {
+      setPhase("exited");
+      closeTimerRef.current = null;
+    }, ANIMATION_DURATION);
+    return () => {
+      if (closeTimerRef.current) {
+        window.clearTimeout(closeTimerRef.current);
+        closeTimerRef.current = null;
+      }
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (phase === "exited") {
+      return undefined;
+    }
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [phase]);
+
+  const contextValue = useMemo<DrawerContextValue>(
+    () => ({
+      open,
+      setOpen,
+      phase,
+    }),
+    [open, setOpen, phase],
+  );
+
+  return (
+    <DrawerContext.Provider value={contextValue}>
+      {children}
+    </DrawerContext.Provider>
+  );
+};
+
+const DrawerTrigger = forwardRef<HTMLButtonElement, DrawerTriggerProps>(
+  ({ asChild, children, onClick, ...props }, forwardedRef) => {
+    const { setOpen } = useDrawerContext();
+    const handleClick = composeEventHandlers(onClick, () => setOpen(true));
+    return renderButtonLike(
+      asChild,
+      children,
+      { ...props, onClick: handleClick },
+      forwardedRef,
+    );
+  },
+);
+
+DrawerTrigger.displayName = "DrawerTrigger";
+
+const DrawerPortal = ({ children }: DrawerPortalProps) => {
+  useDrawerContext();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return createPortal(children, document.body);
+};
+
+/**
+ * DrawerOverlay; 전체 dim
+ * @component
+ * @param {DrawerOverlayProps} props
+ */
+const DrawerOverlay = forwardRef<HTMLDivElement, DrawerOverlayProps>(
+  ({ className, onClick, ...props }, forwardedRef) => {
+    const { phase, setOpen } = useDrawerContext();
+    const handleClick = composeEventHandlers(onClick, () => setOpen(false));
+    return (
+      <div
+        {...props}
+        ref={forwardedRef}
+        data-phase={phase}
+        className={clsx("drawer-overlay", className)}
+        onClick={handleClick}
+      />
+    );
+  },
+);
+
+DrawerOverlay.displayName = "DrawerOverlay";
+
+/**
+ * DrawerTitle; Drawer 제목
+ * @component
+ * @param {DrawerTitleProps} props
+ */
+const DrawerTitle = forwardRef<HTMLHeadingElement, DrawerTitleProps>(
+  ({ visuallyHidden = false, className, children, ...props }, forwardedRef) => {
+    const titleNode = (
+      <h2
+        {...props}
+        ref={forwardedRef}
+        className={clsx("drawer-title", className)}
+      >
+        {children}
+      </h2>
+    );
+
+    if (visuallyHidden) {
+      return <VisuallyHidden asChild>{titleNode}</VisuallyHidden>;
+    }
+
+    return titleNode;
+  },
+);
+
+DrawerTitle.displayName = "DrawerTitle";
+
+/**
+ * DrawerDescription; Drawer 본문 안내
+ * @component
+ * @param {DrawerDescriptionProps} props
+ */
+const DrawerDescription = forwardRef<
+  HTMLParagraphElement,
+  DrawerDescriptionProps
+>(({ visuallyHidden = false, className, children, ...props }, forwardedRef) => {
+  const descriptionNode = (
+    <p
+      {...props}
+      ref={forwardedRef}
+      className={clsx("drawer-description", className)}
+    >
+      {children}
+    </p>
+  );
+
+  if (visuallyHidden) {
+    return <VisuallyHidden asChild>{descriptionNode}</VisuallyHidden>;
+  }
+
+  return descriptionNode;
+});
+
+DrawerDescription.displayName = "DrawerDescription";
+
+/**
+ * DrawerSection; header/body/footer 레이아웃
+ * @component
+ * @param {DrawerSectionProps} props
+ */
+const DrawerSection = forwardRef<HTMLDivElement, DrawerSectionProps>(
+  ({ className, section = "body", ...props }, forwardedRef) => (
+    <div
+      {...props}
+      ref={forwardedRef}
+      className={clsx("drawer-section", `drawer-${section}`, className)}
+      data-section={section}
+    />
+  ),
+);
+
+DrawerSection.displayName = "DrawerSection";
+
+const DrawerHeader = forwardRef<HTMLDivElement, DrawerSectionProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <DrawerSection
+      {...props}
+      ref={forwardedRef}
+      className={className}
+      section="header"
+    />
+  ),
+);
+
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerBody = forwardRef<HTMLDivElement, DrawerSectionProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <DrawerSection
+      {...props}
+      ref={forwardedRef}
+      className={className}
+      section="body"
+    />
+  ),
+);
+
+DrawerBody.displayName = "DrawerBody";
+
+const DrawerFooter = forwardRef<HTMLDivElement, DrawerSectionProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <DrawerSection
+      {...props}
+      ref={forwardedRef}
+      className={className}
+      section="footer"
+    />
+  ),
+);
+
+DrawerFooter.displayName = "DrawerFooter";
+
+/**
+ * DrawerContent; handle/closeButton 제어
+ * @component
+ * @param {DrawerContentProps} props
+ */
+const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
+  (
+    {
+      className,
+      children,
+      closeButton = false,
+      closeButtonLabel = "닫기",
+      style,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const { open, setOpen, phase } = useDrawerContext();
+    const isVisible = phase !== "exited";
+    const contentRef = useRef<HTMLDivElement>(null);
+    const mergedRef = mergeRefs(forwardedRef, contentRef);
+    const handleClose = useCallback(() => setOpen(false), [setOpen]);
+    const { dragOffset, isDragging, handleProps } = useDrawerDrag({
+      onClose: handleClose,
+    });
+    const contentStyle = useMemo(() => {
+      type DrawerContentStyle = CSSProperties & {
+        "--drawer-drag-offset"?: string;
+      };
+      const customStyle: DrawerContentStyle = {
+        ...style,
+        "--drawer-drag-offset": `${dragOffset}px`,
+      };
+      return customStyle;
+    }, [dragOffset, style]);
+
+    useEffect(() => {
+      if (!open) {
+        return undefined;
+      }
+      const previouslyFocused = document.activeElement as HTMLElement | null;
+      const timer = window.setTimeout(() => {
+        contentRef.current?.focus();
+      }, 10);
+      return () => {
+        window.clearTimeout(timer);
+        previouslyFocused?.focus?.();
+      };
+    }, [open]);
+
+    useEffect(() => {
+      if (!open) {
+        return undefined;
+      }
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          handleClose();
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [open, handleClose]);
+
+    return (
+      <div
+        {...restProps}
+        role="dialog"
+        aria-modal={isVisible ? true : undefined}
+        aria-hidden={isVisible ? undefined : true}
+        tabIndex={-1}
+        ref={mergedRef}
+        className={clsx("drawer-content", className)}
+        data-phase={phase}
+        data-dragging={isDragging ? "true" : undefined}
+        style={contentStyle}
+      >
+        <button
+          type="button"
+          className="drawer-handle"
+          aria-label="드래그로 닫기"
+          {...handleProps}
+        >
+          <span className="drawer-handle-bar" aria-hidden />
+        </button>
+        {closeButton ? (
+          <button
+            type="button"
+            className="drawer-close-button"
+            aria-label={closeButtonLabel}
+            onClick={handleClose}
+          >
+            <CloseIcon aria-hidden focusable="false" />
+          </button>
+        ) : null}
+        <div className="drawer-inner">{children}</div>
+      </div>
+    );
+  },
+);
+
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerClose = forwardRef<HTMLButtonElement, DrawerCloseProps>(
+  ({ asChild, children, onClick, ...props }, forwardedRef) => {
+    const { setOpen } = useDrawerContext();
+    const handleClick = composeEventHandlers(onClick, () => setOpen(false));
+    return renderButtonLike(
+      asChild,
+      children,
+      { ...props, onClick: handleClick },
+      forwardedRef,
+    );
+  },
+);
+
+DrawerClose.displayName = "DrawerClose";
+
+export {
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerClose,
+};

package/src/components/drawer/markup/index.tsx

@@ -0,0 +1,3 @@
+"use client";
+
+export * from "./drawer";

package/src/components/drawer/styles/index.scss

@@ -0,0 +1,232 @@
+@use "@uniai-fe/uds-foundation/css";
+
+:where(.radix-themes, .theme-root, :root) {
+  // Figma 기준 bottom sheet 여백/톤을 전역 변수로 정리한다.
+  --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
+  --drawer-surface-bg: var(--color-bg-surface-static-white);
+  --drawer-radius-large: var(--theme-radius-large-2);
+  --drawer-radius-medium: var(--theme-radius-large-1);
+  --drawer-body-color: var(--color-label-standard);
+  --drawer-title-color: var(--color-label-strong);
+  --drawer-gap: calc(var(--spacing-gap-9, 28px) + 2px);
+  --drawer-padding-x: calc(var(--spacing-padding-10, 32px) - 2px);
+  --drawer-padding-top: var(--spacing-padding-7, 20px);
+  --drawer-padding-bottom: calc(
+    var(--spacing-padding-11, 40px) + var(--spacing-padding-7, 20px)
+  );
+  --drawer-footer-gap: var(--spacing-gap-6, 16px);
+  --drawer-section-gap: var(--spacing-gap-6, 16px);
+  --drawer-handle-width: calc(
+    var(--spacing-padding-11, 40px) + var(--spacing-padding-7, 20px)
+  );
+  --drawer-handle-height: var(--spacing-padding-2, 4px);
+  --drawer-handle-bg: var(--color-border-standard-cool-gray);
+  --drawer-close-size: 36px;
+  --drawer-drag-offset: 0px;
+}
+
+.drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--drawer-overlay-bg);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+  will-change: opacity;
+
+  &[data-phase="entering"],
+  &[data-phase="entered"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &[data-phase="exiting"] {
+    opacity: 0;
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer-overlay {
+    transition: none;
+  }
+}
+
+// Overlay dim만 사용하는 Figma 규격에 맞춰 box-shadow 대신 opacity 전환으로 깊이를 표현한다.
+.drawer-content {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--drawer-surface-bg);
+  outline: none;
+  border: none;
+  box-shadow: none;
+  color: var(--drawer-body-color);
+  overscroll-behavior: contain;
+  left: 50%;
+  bottom: 0;
+  transform: translate3d(-50%, 100%, 0);
+  border-top-left-radius: var(--drawer-radius-large);
+  border-top-right-radius: var(--drawer-radius-large);
+  max-width: 640px;
+  padding-bottom: env(safe-area-inset-bottom);
+  max-width: min(640px, 100%);
+  width: 100%;
+  max-height: calc(100vh - var(--spacing-padding-8));
+  transition:
+    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 0.2s ease;
+  opacity: 0;
+  pointer-events: none;
+  will-change: transform;
+}
+
+.drawer-content[data-phase="entering"],
+.drawer-content[data-phase="entered"] {
+  transform: translate3d(-50%, var(--drawer-drag-offset, 0px), 0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.drawer-content[data-phase="exiting"] {
+  transform: translate3d(-50%, calc(100% + var(--drawer-drag-offset, 0px)), 0);
+  opacity: 1;
+  pointer-events: none;
+}
+
+.drawer-content[data-phase="exited"] {
+  transform: translate3d(-50%, 100%, 0);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.drawer-content[data-dragging="true"] {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer-content {
+    transition: none;
+  }
+}
+
+.drawer-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  padding: var(--drawer-padding-top) 0 var(--spacing-padding-6);
+  cursor: grab;
+}
+
+.drawer-handle:active {
+  cursor: grabbing;
+}
+
+.drawer-handle-bar {
+  width: var(--drawer-handle-width);
+  height: var(--drawer-handle-height);
+  border-radius: var(--drawer-handle-height);
+  background-color: var(--drawer-handle-bg);
+  display: block;
+}
+
+// close_line 아이콘 스타일: 투명 배경 + 24px 아이콘만 노출.
+.drawer-close-button {
+  position: absolute;
+  top: var(--drawer-padding-top);
+  right: var(--drawer-padding-x);
+  width: 24px;
+  height: 24px;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  color: var(--color-label-neutral, #7f8a94);
+}
+
+.drawer-close-button svg {
+  width: 24px;
+  height: 24px;
+}
+
+.drawer-inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--drawer-gap);
+  padding-inline: var(--drawer-padding-x);
+  padding-bottom: var(--drawer-padding-bottom);
+  padding-top: var(--drawer-padding-top);
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.drawer-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--drawer-section-gap);
+  color: var(--drawer-body-color);
+  width: 100%;
+}
+
+.drawer-header {
+  text-align: left;
+  padding-top: 0;
+}
+
+.drawer-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  gap: var(--spacing-gap-5);
+  font-size: var(--font-body-small-size);
+  line-height: var(--font-body-small-line-height);
+  color: var(--drawer-body-color);
+  width: 100%;
+  word-break: keep-all;
+}
+
+.drawer-body > * {
+  width: 100%;
+}
+
+// 긴 약관 본문이 div로 감싸지더라도 문단 스타일이 유지되도록 지정한다.
+.drawer-body p {
+  margin: 0;
+  word-break: inherit;
+}
+
+.drawer-footer {
+  padding: var(--spacing-padding-8) 0 0;
+  border-top: none;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--drawer-footer-gap);
+  width: 100%;
+}
+
+.drawer-title {
+  margin: 0;
+  font-size: var(--font-heading-medium-size);
+  line-height: var(--font-heading-medium-line-height);
+  font-weight: var(--font-heading-medium-weight);
+  color: var(--drawer-title-color);
+  letter-spacing: var(--font-heading-medium-letter-spacing, normal);
+}
+
+.drawer-description {
+  margin: 0;
+  color: var(--drawer-body-color);
+  font-size: var(--font-body-xsmall-size);
+  line-height: var(--font-body-xsmall-line-height);
+  letter-spacing: var(--font-body-xsmall-letter-spacing, normal);
+}
+
+.drawer-dismiss {
+  display: none;
+}

package/src/components/drawer/types/index.ts

@@ -0,0 +1,51 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+export type DrawerPhase = "exited" | "entering" | "entered" | "exiting";
+
+export interface DrawerContextValue {
+  open: boolean;
+  setOpen: (next: boolean) => void;
+  phase: DrawerPhase;
+}
+
+export interface DrawerRootProps {
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export interface DrawerTriggerProps extends ComponentPropsWithoutRef<"button"> {
+  asChild?: boolean;
+  children?: ReactNode;
+}
+
+export interface DrawerCloseProps extends ComponentPropsWithoutRef<"button"> {
+  asChild?: boolean;
+  children?: ReactNode;
+}
+
+export interface DrawerPortalProps {
+  children: ReactNode;
+}
+
+export type DrawerOverlayProps = ComponentPropsWithoutRef<"div">;
+
+export type DrawerTitleProps = ComponentPropsWithoutRef<"h2"> & {
+  visuallyHidden?: boolean;
+};
+
+export type DrawerDescriptionProps = ComponentPropsWithoutRef<"p"> & {
+  visuallyHidden?: boolean;
+};
+
+export type DrawerSectionVariant = "header" | "body" | "footer";
+
+export interface DrawerSectionProps extends ComponentPropsWithoutRef<"div"> {
+  section?: DrawerSectionVariant;
+}
+
+export interface DrawerContentProps extends ComponentPropsWithoutRef<"div"> {
+  closeButton?: boolean;
+  closeButtonLabel?: string;
+}

package/src/components/drawer/utils/context.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+import type { DrawerContextValue } from "../types";
+
+// Drawer context를 별도 모듈로 분리해 Root 외부에서도 재사용 가능하게 한다.
+const DrawerContext = createContext<DrawerContextValue | null>(null);
+
+const useDrawerContext = () => {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error("Drawer components must be used within DrawerRoot");
+  }
+  return context;
+};
+
+export { DrawerContext, useDrawerContext };