Side Panel

화면 좌측 또는 우측 가장자리에서 슬라이드하여 나타나는 패널 컴포넌트입니다. 데스크탑 환경에서 추가 콘텐츠나 네비게이션을 제공할 때 사용됩니다.

import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelFooter,
  SidePanelRoot,
  SidePanelTrigger,
} from "seed-design/ui/side-panel";

const SidePanelPreview = () => {
  return (
    <SidePanelRoot>
      <SidePanelTrigger asChild>
        <ActionButton variant="neutralSolid">Open Side Panel</ActionButton>
      </SidePanelTrigger>
      <SidePanelContent title="제목" description="설명을 작성할 수 있어요">
        <SidePanelBody paddingX="x6">
          패널 본문에는 사용자가 확인해야 할 내용이나 추가 입력 폼을 배치할 수 있습니다.
        </SidePanelBody>
        <SidePanelFooter>
          <ActionButton variant="neutralSolid">확인</ActionButton>
        </SidePanelFooter>
      </SidePanelContent>
    </SidePanelRoot>
  );
};

export default SidePanelPreview;

Installation

Default

좌/우 가장자리에서 슬라이드되는 기본 Side Panel 컴포넌트를 포함합니다.

npx @seed-design/cli@latest add ui:side-panel

pnpm dlx @seed-design/cli@latest add ui:side-panel

yarn dlx @seed-design/cli@latest add ui:side-panel

bun x @seed-design/cli@latest add ui:side-panel

의존성 설치

npm install @karrotmarket/react-monochrome-icon @seed-design/react

yarn add @karrotmarket/react-monochrome-icon @seed-design/react

pnpm add @karrotmarket/react-monochrome-icon @seed-design/react

bun add @karrotmarket/react-monochrome-icon @seed-design/react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:side-panel
 * @requires @seed-design/react@^2.0.0
 * @requires @seed-design/css@^2.0.0
 **/

"use client";

import IconXmarkLine from "@karrotmarket/react-monochrome-icon/IconXmarkLine";
import { Icon, SidePanel as SeedSidePanel } from "@seed-design/react";
import type * as React from "react";
import { forwardRef } from "react";

export interface SidePanelRootProps extends SeedSidePanel.RootProps {}

/**
 * @see https://seed-design.io/react/components/side-panel
 */
export const SidePanelRoot = SeedSidePanel.Root;

export interface SidePanelTriggerProps extends SeedSidePanel.TriggerProps {}

export const SidePanelTrigger = SeedSidePanel.Trigger;

export interface SidePanelContentProps extends Omit<SeedSidePanel.ContentProps, "title"> {
  title?: React.ReactNode;

  description?: React.ReactNode;

  layerIndex?: number;

  /**
   * @default true
   */
  showCloseButton?: boolean;
}

export const SidePanelContent = forwardRef<HTMLDivElement, SidePanelContentProps>(
  ({ children, title, description, layerIndex, showCloseButton = true, ...otherProps }, ref) => {
    if (
      !title &&
      !otherProps["aria-labelledby"] &&
      !otherProps["aria-label"] &&
      process.env.NODE_ENV !== "production"
    ) {
      console.warn(
        "SidePanelContent: aria-labelledby or aria-label should be provided if title is not provided.",
      );
    }

    const shouldRenderHeader = title || description || showCloseButton;

    return (
      <SeedSidePanel.Positioner style={{ "--layer-index": layerIndex } as React.CSSProperties}>
        <SeedSidePanel.Backdrop />
        <SeedSidePanel.Content ref={ref} {...otherProps}>
          {shouldRenderHeader && (
            <SeedSidePanel.Header>
              {title && <SeedSidePanel.Title>{title}</SeedSidePanel.Title>}
              {description && <SeedSidePanel.Description>{description}</SeedSidePanel.Description>}
              {showCloseButton && (
                <SeedSidePanel.CloseButton aria-label="닫기">
                  <Icon svg={<IconXmarkLine />} />
                </SeedSidePanel.CloseButton>
              )}
            </SeedSidePanel.Header>
          )}
          {children}
        </SeedSidePanel.Content>
      </SeedSidePanel.Positioner>
    );
  },
);

SidePanelContent.displayName = "SidePanelContent";

export interface SidePanelBodyProps extends SeedSidePanel.BodyProps {}

export const SidePanelBody = SeedSidePanel.Body;

export interface SidePanelFooterProps extends SeedSidePanel.FooterProps {}

export const SidePanelFooter = SeedSidePanel.Footer;

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Responsive

뷰포트에 따라 Bottom Sheet로 자동 전환되는 반응형 변형입니다. dependency로 ui:bottom-sheet와 ui:side-panel이 함께 설치됩니다.

npx @seed-design/cli@latest add ui:responsive-side-panel

pnpm dlx @seed-design/cli@latest add ui:responsive-side-panel

yarn dlx @seed-design/cli@latest add ui:responsive-side-panel

bun x @seed-design/cli@latest add ui:responsive-side-panel

의존성 설치

npm install @karrotmarket/react-monochrome-icon @seed-design/react

yarn add @karrotmarket/react-monochrome-icon @seed-design/react

pnpm add @karrotmarket/react-monochrome-icon @seed-design/react

bun add @karrotmarket/react-monochrome-icon @seed-design/react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:responsive-side-panel
 * @requires @seed-design/react@^2.0.0
 * @requires @seed-design/css@^2.0.0
 **/

"use client";

import IconXmarkLine from "@karrotmarket/react-monochrome-icon/IconXmarkLine";
import {
  Icon,
  ResponsiveSidePanel as SeedResponsiveSidePanel,
  useResponsiveSidePanelContext,
  VisuallyHidden,
} from "@seed-design/react";
import type * as React from "react";
import { forwardRef } from "react";

export interface ResponsiveSidePanelRootProps extends SeedResponsiveSidePanel.RootProps {}

export const ResponsiveSidePanelRoot = SeedResponsiveSidePanel.Root;

export interface ResponsiveSidePanelTriggerProps extends SeedResponsiveSidePanel.TriggerProps {}

export const ResponsiveSidePanelTrigger = SeedResponsiveSidePanel.Trigger;

export interface ResponsiveSidePanelContentProps
  extends Omit<SeedResponsiveSidePanel.ContentProps, "title"> {
  title?: React.ReactNode;

  description?: React.ReactNode;

  layerIndex?: number;

  /**
   * @default true
   */
  showCloseButton?: boolean;

  /**
   * @default false
   */
  showHandle?: boolean;
}

export const ResponsiveSidePanelContent = forwardRef<
  HTMLDivElement,
  ResponsiveSidePanelContentProps
>(
  (
    {
      children,
      title,
      description,
      layerIndex,
      showCloseButton = true,
      showHandle = false,
      ...otherProps
    },
    ref,
  ) => {
    const { shouldUseBottomSheet } = useResponsiveSidePanelContext();

    if (
      !title &&
      !otherProps["aria-labelledby"] &&
      !otherProps["aria-label"] &&
      process.env.NODE_ENV !== "production"
    ) {
      console.warn(
        "ResponsiveSidePanelContent: aria-labelledby or aria-label should be provided if title is not provided.",
      );
    }

    if (shouldUseBottomSheet) {
      const shouldRenderHeader = title || description;

      return (
        <SeedResponsiveSidePanel.Positioner
          style={{ "--layer-index": layerIndex } as React.CSSProperties}
        >
          <SeedResponsiveSidePanel.Backdrop />
          <SeedResponsiveSidePanel.Content ref={ref} {...otherProps}>
            {showHandle && <SeedResponsiveSidePanel.Handle />}
            {shouldRenderHeader && (
              <SeedResponsiveSidePanel.Header>
                {title ? (
                  <SeedResponsiveSidePanel.Title>{title}</SeedResponsiveSidePanel.Title>
                ) : (
                  <VisuallyHidden asChild>
                    <SeedResponsiveSidePanel.Title>
                      {otherProps["aria-label"] || ""}
                    </SeedResponsiveSidePanel.Title>
                  </VisuallyHidden>
                )}
                {description && (
                  <SeedResponsiveSidePanel.Description>
                    {description}
                  </SeedResponsiveSidePanel.Description>
                )}
              </SeedResponsiveSidePanel.Header>
            )}
            {children}
            {showCloseButton && (
              <SeedResponsiveSidePanel.CloseButton aria-label="닫기">
                <Icon svg={<IconXmarkLine />} />
              </SeedResponsiveSidePanel.CloseButton>
            )}
          </SeedResponsiveSidePanel.Content>
        </SeedResponsiveSidePanel.Positioner>
      );
    }

    const shouldRenderHeader = title || description || showCloseButton;

    return (
      <SeedResponsiveSidePanel.Positioner
        style={{ "--layer-index": layerIndex } as React.CSSProperties}
      >
        <SeedResponsiveSidePanel.Backdrop />
        <SeedResponsiveSidePanel.Content ref={ref} {...otherProps}>
          {shouldRenderHeader && (
            <SeedResponsiveSidePanel.Header>
              {title && <SeedResponsiveSidePanel.Title>{title}</SeedResponsiveSidePanel.Title>}
              {description && (
                <SeedResponsiveSidePanel.Description>
                  {description}
                </SeedResponsiveSidePanel.Description>
              )}
              {showCloseButton && (
                <SeedResponsiveSidePanel.CloseButton aria-label="닫기">
                  <Icon svg={<IconXmarkLine />} />
                </SeedResponsiveSidePanel.CloseButton>
              )}
            </SeedResponsiveSidePanel.Header>
          )}
          {children}
        </SeedResponsiveSidePanel.Content>
      </SeedResponsiveSidePanel.Positioner>
    );
  },
);

ResponsiveSidePanelContent.displayName = "ResponsiveSidePanelContent";

export interface ResponsiveSidePanelBodyProps extends SeedResponsiveSidePanel.BodyProps {}

export const ResponsiveSidePanelBody = SeedResponsiveSidePanel.Body;

export interface ResponsiveSidePanelFooterProps extends SeedResponsiveSidePanel.FooterProps {}

export const ResponsiveSidePanelFooter = SeedResponsiveSidePanel.Footer;

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Props

`SidePanelRoot`

Prop

Type

children?React.ReactNode

open?boolean | undefined

onOpenChange?((open: boolean, details?: DrawerChangeDetails) => void) | undefined

`SidePanelContent`

Prop

Type

title?React.ReactNode

description?React.ReactNode

layerIndex?number | undefined

width?

ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined

maxWidth?

ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined

`SidePanelBody`

Prop

Type

paddingX?

ResponsiveValue<0 | (string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText"> | undefined

height?

ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined

maxHeight?

ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined

minHeight?

ResponsiveValue<(string & {}) | Dimension | "spacingX.betweenChips" | "spacingX.globalGutter" | "spacingY.componentDefault" | "spacingY.navToTitle" | "spacingY.screenBottom" | "spacingY.betweenText" | "full"> | undefined

alignItems?"flex-start" | "flex-end" | "center" | "stretch" | undefined

`ResponsiveSidePanelRoot`

Prop

Type

children?React.ReactNode

open?boolean | undefined

defaultOpen?boolean | undefined

onOpenChange?((open: boolean) => void) | undefined

Examples

Trigger

<SidePanelTrigger>는 asChild 패턴을 사용해 자식 요소가 Side Panel을 열 수 있도록 합니다.

import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelRoot,
  SidePanelTrigger,
} from "seed-design/ui/side-panel";

const SidePanelTriggerExample = () => {
  return (
    <SidePanelRoot>
      <SidePanelTrigger asChild>
        <ActionButton variant="neutralSolid">Open</ActionButton>
      </SidePanelTrigger>
      <SidePanelContent title="Trigger 패턴">
        <SidePanelBody paddingX="x6">
          Trigger를 클릭하면 현재 화면 위에 Side Panel이 열립니다.
        </SidePanelBody>
      </SidePanelContent>
    </SidePanelRoot>
  );
};

export default SidePanelTriggerExample;

Controlled

Trigger 외의 방식으로 Side Panel을 열고 닫을 수 있습니다. 이 경우 open prop을 사용하여 Side Panel의 상태를 제어합니다.

import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelFooter,
  SidePanelRoot,
} from "seed-design/ui/side-panel";

const SidePanelControlled = () => {
  const [open, setOpen] = useState(false);

  const scheduleOpen = () => {
    setTimeout(() => {
      setOpen(true);
    }, 1000);
  };

  return (
    <>
      <ActionButton variant="neutralSolid" onClick={scheduleOpen}>
        1초 후 열기
      </ActionButton>
      <SidePanelRoot open={open} onOpenChange={setOpen}>
        <SidePanelContent title="제목" description="설명을 작성할 수 있어요">
          <SidePanelBody minHeight="x16" paddingX="x6">
            외부 상태로 패널을 열고 닫을 때도 본문과 푸터 구조는 동일하게 유지됩니다.
          </SidePanelBody>
          <SidePanelFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </SidePanelFooter>
        </SidePanelContent>
      </SidePanelRoot>
    </>
  );
};

export default SidePanelControlled;

Direction

<SidePanelRoot>에 direction prop을 설정하여 Side Panel이 열리는 방향을 변경할 수 있습니다. "left" 또는 "right"를 지원하며, 기본값은 "right"입니다.

import { Flex } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelRoot,
  SidePanelTrigger,
} from "seed-design/ui/side-panel";

const SidePanelDirection = () => {
  return (
    <Flex gap="x3" wrap="wrap">
      <SidePanelRoot direction="right">
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">Right</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent title="Right Side Panel">
          <SidePanelBody paddingX="x6">
            오른쪽 가장자리에서 슬라이드되어 보조 콘텐츠를 표시합니다.
          </SidePanelBody>
        </SidePanelContent>
      </SidePanelRoot>

      <SidePanelRoot direction="left">
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">Left</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent title="Left Side Panel">
          <SidePanelBody paddingX="x6">
            왼쪽 가장자리에서 슬라이드되어 탐색이나 설정 영역을 표시합니다.
          </SidePanelBody>
        </SidePanelContent>
      </SidePanelRoot>
    </Flex>
  );
};

export default SidePanelDirection;

Size

<SidePanelRoot>에 size prop을 설정하여 Side Panel의 너비를 변경할 수 있습니다. "small" (480px), "medium" (720px, 기본값), "large" (960px)를 지원합니다.

import { Flex } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelRoot,
  SidePanelTrigger,
} from "seed-design/ui/side-panel";

const SidePanelSize = () => {
  return (
    <Flex gap="x3" wrap="wrap">
      <SidePanelRoot direction="right" size="small">
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">Small (480px)</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent title="Small Side Panel">
          <SidePanelBody paddingX="x6">
            좁은 패널에 적합한 간결한 콘텐츠를 배치합니다.
          </SidePanelBody>
        </SidePanelContent>
      </SidePanelRoot>

      <SidePanelRoot direction="right" size="medium">
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">Medium (720px)</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent title="Medium Side Panel">
          <SidePanelBody paddingX="x6">
            기본 너비로 상세 정보와 주요 액션을 함께 제공합니다.
          </SidePanelBody>
        </SidePanelContent>
      </SidePanelRoot>

      <SidePanelRoot direction="right" size="large">
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">Large (960px)</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent title="Large Side Panel">
          <SidePanelBody paddingX="x6">
            넓은 패널에서 더 많은 폼 필드나 상세 콘텐츠를 다룹니다.
          </SidePanelBody>
        </SidePanelContent>
      </SidePanelRoot>
    </Flex>
  );
};

export default SidePanelSize;

SidePanelFooter는 flex 레이아웃만 제공하며, 버튼 배치는 VStack, HStack 등으로 직접 구성합니다. 좁은 패널에서는 VStack으로 세로로 쌓고, 넓은 패널에서는 HStack으로 가로로 정렬할 수 있습니다.

import { Box, Flex, HStack, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelFooter,
  SidePanelRoot,
  SidePanelTrigger,
} from "seed-design/ui/side-panel";

const SidePanelFooterLayout = () => {
  return (
    <Flex gap="x3" wrap="wrap">
      <SidePanelRoot size="small">
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">Small</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent
          title="Small Side Panel"
          description="좁은 패널에서는 주요 액션이 위에 오도록 세로로 배치합니다."
        >
          <SidePanelBody paddingX="x6">
            <VStack gap="x3">
              <Box>확인이 필요한 정보를 간결하게 보여줍니다.</Box>
              <Box>버튼은 패널 너비를 채우며 위에서 아래로 쌓입니다.</Box>
            </VStack>
          </SidePanelBody>
          <SidePanelFooter>
            <VStack gap="x2">
              <ActionButton variant="neutralSolid">확인</ActionButton>
              <ActionButton variant="neutralWeak">취소</ActionButton>
            </VStack>
          </SidePanelFooter>
        </SidePanelContent>
      </SidePanelRoot>

      <SidePanelRoot size="medium">
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">Medium</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent
          title="Medium Side Panel"
          description="넓은 패널에서는 주요 액션을 가로로 배치합니다."
        >
          <SidePanelBody paddingX="x6">
            <VStack gap="x3">
              <Box>상세 정보와 확인 액션을 함께 제공할 수 있습니다.</Box>
              <Box>버튼은 우측 영역에 가로로 정렬됩니다.</Box>
            </VStack>
          </SidePanelBody>
          <SidePanelFooter>
            <HStack gap="x2" justify="flex-end">
              <ActionButton variant="neutralWeak">취소</ActionButton>
              <ActionButton variant="neutralSolid">확인</ActionButton>
            </HStack>
          </SidePanelFooter>
        </SidePanelContent>
      </SidePanelRoot>
    </Flex>
  );
};

export default SidePanelFooterLayout;

Custom Size

<SidePanelContent>에 width, maxWidth prop을 전달하여 너비를 직접 제어할 수 있습니다. 프리셋 size 대신 뷰포트 기반의 유동적인 너비가 필요할 때 사용합니다.

import { Flex } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelRoot,
  SidePanelTrigger,
} from "seed-design/ui/side-panel";

const SidePanelCustomSize = () => {
  return (
    <Flex gap="x3" wrap="wrap">
      <SidePanelRoot direction="right">
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">width 80vw, max 640px</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent title="Fluid Width" width="80vw" maxWidth="640px">
          <SidePanelBody paddingX="x6">
            뷰포트 너비에 따라 커지되 최대 640px까지만 확장됩니다.
          </SidePanelBody>
        </SidePanelContent>
      </SidePanelRoot>

      <SidePanelRoot direction="left">
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">width 400px</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent title="Fixed Width" width="400px">
          <SidePanelBody paddingX="x6">
            고정 너비가 필요한 작업 패널에 사용할 수 있습니다.
          </SidePanelBody>
        </SidePanelContent>
      </SidePanelRoot>
    </Flex>
  );
};

export default SidePanelCustomSize;

Show Close Button

<SidePanelContent>에 showCloseButton prop을 전달하여 닫기 버튼을 표시할 수 있습니다. 기본 값은 true입니다.

import { Flex } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelRoot,
  SidePanelTrigger,
} from "seed-design/ui/side-panel";

const SidePanelShowCloseButton = () => {
  return (
    <Flex gap="x3">
      <SidePanelRoot>
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">닫기 버튼 있음</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent title="닫기 버튼" showCloseButton>
          <SidePanelBody paddingX="x6">
            기본적으로 닫기 버튼이 표시되어 패널을 바로 닫을 수 있습니다.
          </SidePanelBody>
        </SidePanelContent>
      </SidePanelRoot>

      <SidePanelRoot>
        <SidePanelTrigger asChild>
          <ActionButton variant="neutralSolid">닫기 버튼 없음</ActionButton>
        </SidePanelTrigger>
        <SidePanelContent title="닫기 버튼 없음" showCloseButton={false}>
          <SidePanelBody paddingX="x6">
            닫기 버튼을 숨길 때는 본문이나 푸터에 닫을 수 있는 액션을 제공하세요.
          </SidePanelBody>
        </SidePanelContent>
      </SidePanelRoot>
    </Flex>
  );
};

export default SidePanelShowCloseButton;

Dismissible

dismissible prop을 false로 설정하면 Escape 키, 외부 클릭으로 닫을 수 없습니다. 의도적으로 Side Panel을 닫을 수 없게 하고 싶을 때 사용합니다.

import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelFooter,
  SidePanelRoot,
  SidePanelTrigger,
} from "seed-design/ui/side-panel";

const SidePanelDismissible = () => {
  const [open, setOpen] = useState(false);

  return (
    <SidePanelRoot open={open} onOpenChange={setOpen} dismissible={false}>
      <SidePanelTrigger asChild>
        <ActionButton variant="neutralSolid">닫기 불가 Side Panel</ActionButton>
      </SidePanelTrigger>
      <SidePanelContent title="닫기 불가" showCloseButton={false}>
        <SidePanelBody paddingX="x6">
          Escape 키, 외부 클릭으로 닫을 수 없습니다. 프로그래밍 방식으로만 닫을 수 있습니다.
        </SidePanelBody>
        <SidePanelFooter>
          <ActionButton variant="neutralSolid" onClick={() => setOpen(false)}>
            닫기
          </ActionButton>
        </SidePanelFooter>
      </SidePanelContent>
    </SidePanelRoot>
  );
};

export default SidePanelDismissible;

modal prop을 false로 설정하면 배경과 상호작용이 가능합니다. Backdrop이 표시되지 않으며, 포커스 트랩이 비활성화됩니다. Trigger를 다시 눌러 닫아야 하는 경우에는 open prop으로 상태를 직접 제어합니다.

import type { MouseEvent } from "react";
import { useState } from "react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  SidePanelBody,
  SidePanelContent,
  SidePanelRoot,
  SidePanelTrigger,
} from "seed-design/ui/side-panel";

const SidePanelNonModal = () => {
  const [open, setOpen] = useState(false);

  return (
    <SidePanelRoot modal={false} open={open} onOpenChange={setOpen}>
      <SidePanelTrigger
        asChild
        onClick={(event: MouseEvent) => {
          event.preventDefault();
          setOpen((open) => !open);
        }}
      >
        <ActionButton variant="neutralSolid">Non-modal Side Panel</ActionButton>
      </SidePanelTrigger>
      <SidePanelContent title="Non-modal">
        <SidePanelBody paddingX="x6">
          배경과 상호작용이 가능합니다. Backdrop이 표시되지 않습니다.
        </SidePanelBody>
      </SidePanelContent>
    </SidePanelRoot>
  );
};

export default SidePanelNonModal;

ResponsiveSidePanel을 사용하면 md 이상에서는 Side Panel, sm 이하에서는 Bottom Sheet로 자동 전환됩니다. 뷰포트를 줄여서 전환 동작을 확인해보세요. onOpenChange는 열림 상태만 전달하며, Side Panel 또는 Bottom Sheet에만 적용되는 Root 옵션은 sidePanelRootProps, bottomSheetRootProps로 전달합니다.

import { Box, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
  ResponsiveSidePanelBody,
  ResponsiveSidePanelContent,
  ResponsiveSidePanelFooter,
  ResponsiveSidePanelRoot,
  ResponsiveSidePanelTrigger,
} from "seed-design/ui/responsive-side-panel";

const SidePanelResponsive = () => {
  return (
    <ResponsiveSidePanelRoot sidePanelRootProps={{ size: "medium" }}>
      <ResponsiveSidePanelTrigger asChild>
        <ActionButton variant="neutralSolid">Open</ActionButton>
      </ResponsiveSidePanelTrigger>
      <ResponsiveSidePanelContent
        title="반응형 패널"
        description="화면 크기에 따라 적합한 컴포넌트로 자동 전환됩니다."
      >
        <ResponsiveSidePanelBody>
          <VStack gap="x3">
            <Box>본문 영역은 Header/Body/Footer 구조로 동일합니다.</Box>
            <Box>md 이상에서는 화면 우측에서 슬라이드되는 Side Panel로,</Box>
            <Box>sm 이하에서는 화면 하단에서 슬라이드되는 Bottom Sheet로 표시됩니다.</Box>
          </VStack>
        </ResponsiveSidePanelBody>
        <ResponsiveSidePanelFooter>
          <ActionButton variant="neutralSolid">확인</ActionButton>
        </ResponsiveSidePanelFooter>
      </ResponsiveSidePanelContent>
    </ResponsiveSidePanelRoot>
  );
};

export default SidePanelResponsive;

Keyboard Interactions

Key	Behavior
`Escape`	`dismissible=true`일 때 Side Panel을 닫습니다.
`Tab`	`modal=true`일 때 Side Panel 내부 요소들 사이로 포커스를 순환합니다.
`Shift + Tab`	`modal=true`일 때 역방향으로 포커스를 순환합니다.

Side Panel

Installation

Default

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

Responsive

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

Props

`SidePanelRoot`

`SidePanelTrigger`

`SidePanelContent`

`SidePanelBody`

`SidePanelFooter`

`ResponsiveSidePanelRoot`

Examples

Trigger

Controlled

Direction

Size

Footer Layout

Custom Size

Show Close Button

Dismissible

Responsive

Keyboard Interactions

On this page

Side Panel

Manual Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

Manual Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

On this page