React

Menu Sheet

Swipeable Menu Sheet를 Stackflow와 함께 사용하는 방법을 안내합니다.

사용 가능 버전@seed-design/stackflow@2.0.0, @seed-design/react@2.0.0, @seed-design/css@2.0.0

Swipeable Menu Sheet

Swipeable Menu Sheet 컴포넌트에 대해 자세히 알아봅니다.

Making a Swipeable Menu Sheet Activity

일반적인 경우 Swipeable Menu Sheet를 Activity로 만들어 사용하는 것을 권장합니다.

  • Activity로 관리되므로, 하위 Activity보다 높고 상위 Activity보다는 낮은 z-index를 갖도록 관리하기 쉽습니다.
  • 딥링킹이 가능합니다. (URL 접속으로 Swipeable Menu Sheet를 열 수 있습니다.)
  • @stackflow/plugin-basic-ui BottomSheet에서의 마이그레이션이 쉽습니다.
Loading...

Usage

import { useActivityZIndexBase } from "@seed-design/stackflow";
import { useActivity, useFlow, type ActivityComponentType } from "@stackflow/react/future";
// ... more imports

const ActivitySwipeableMenuSheet: ActivityComponentType<"ActivitySwipeableMenuSheet"> = () => {
  const { pop } = useFlow();

  const handleAction = (action: string) => {
    console.log("선택한 액션:", action);

    pop();
  };

  return (
    <SwipeableMenuSheetRoot open={useActivity().isActive} onOpenChange={(open) => !open && pop()}>
      <SwipeableMenuSheetContent
        title="Actions"
        layerIndex={useActivityZIndexBase()}
      >
        <SwipeableMenuSheetGroup>
          <SwipeableMenuSheetItem
            onClick={() => handleAction("add")}
            label="추가"
            prefixIcon={<IconPlusLine />}
          />
          <SwipeableMenuSheetItem
            onClick={() => handleAction("edit")}
            label="수정"
            prefixIcon={<IconPencilLine />}
          />
          <SwipeableMenuSheetItem
            onClick={() => handleAction("delete")}
            tone="critical"
            label="삭제"
            prefixIcon={<IconTrashcanLine />}
          />
        </SwipeableMenuSheetGroup>
      </SwipeableMenuSheetContent>
    </SwipeableMenuSheetRoot>
  );
};
  1. open prop에 useActivity().isActive를 전달하여 Activity가 활성화될 때 Swipeable Menu Sheet가 열리도록 합니다.
  2. onOpenChange를 통해 Swipeable Menu Sheet가 닫힐 때 pop()을 실행하여 Activity를 종료합니다. swipe 제스처로 닫는 경우에도 onOpenChange가 호출되므로 Activity가 함께 종료됩니다.
  3. layerIndex={useActivityZIndexBase()}로 Swipeable Menu Sheet Activity의 z-index 기준점을 전달합니다.

Syncing Swipeable Menu Sheet State with a Step

Swipeable Menu Sheet를 Activity로 만들 수 없는 경우, Swipeable Menu Sheet가 표시된 상태를 Step으로 만들 수 있습니다.

  • 현재 Activity를 유지하면서도, 뒤로 가기 버튼 등으로 Swipeable Menu Sheet를 닫을 수 있습니다.
  • SwipeableMenuSheetTrigger를 사용하여 Swipeable Menu Sheet를 열고 닫을 수 있습니다.
제약 사항

Activity로 만들지 않은 Swipeable Menu Sheet에서 다른 Activity를 push하는 경우, push하기 전 Swipeable Menu Sheet를 닫으세요.

Swipeable Menu Sheet를 닫을 수 없거나, Swipeable Menu Sheet를 연 Activity로 돌아왔을 때 Swipeable Menu Sheet가 열린 상태를 유지해야 하는 경우 Swipeable Menu Sheet를 Activity로 만들어 사용하는 것을 권장합니다.

Activity 간 유려한 트랜지션을 제공하기 위해 하위 AppScreen 요소 중 일부가 상위 AppScreen 요소보다 위에 위치합니다. 이 제약으로 인해, 열린 상태의 Swipeable Menu Sheet는 독립적인 Activity로 만들지 않는 경우 하위 Activity와 상위 Activity 사이에 위치시키는 것이 불가능합니다.

Loading...

Usage

import { useActivityZIndexBase } from "@seed-design/stackflow";
import { Portal } from "@seed-design/react";
import {
  useActivity,
  useActivityParams,
  useFlow,
  useStepFlow,
  type ActivityComponentType,
} from "@stackflow/react/future";
import { useEffect, useState } from "react";
// ... more imports

declare module "@stackflow/config" {
  interface Register {
    ActivityHome: {
      "menu-sheet"?: "open";
    };
  }
}

const ActivityHome: ActivityComponentType<"ActivityHome"> = () => {
  const [open, setOpen] = useState(false);

  const { push } = useFlow();
  const { pushStep, popStep } = useStepFlow("ActivityHome");
  const params = useActivityParams<"ActivityHome">();
  const isOverlayOpen = params["menu-sheet"] === "open";

  useEffect(() => {
    if (!isOverlayOpen) {
      setOpen(false);
    }
  }, [isOverlayOpen]);

  const onOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);

    if (newOpen && !isOverlayOpen) {
      pushStep((params) => ({ ...params, "menu-sheet": "open" }));

      return;
    }

    if (!newOpen && isOverlayOpen) {
      popStep();

      return;
    }
  };

  const handleAction = (action: string) => {
    console.log("선택한 액션:", action);
    setOpen(false);
  };

  return (
    <AppScreen>
      <SwipeableMenuSheetRoot open={open} onOpenChange={onOpenChange}>
        <SwipeableMenuSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </SwipeableMenuSheetTrigger>
        <Portal>
          <SwipeableMenuSheetContent
            title="Actions"
            layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
          >
            <SwipeableMenuSheetGroup>
              <SwipeableMenuSheetItem onClick={() => handleAction("add")} label="추가" />
              <SwipeableMenuSheetItem onClick={() => handleAction("edit")} label="수정" />
              <SwipeableMenuSheetItem
                onClick={() => {
                  setOpen(false); // 다른 Activity로 이동하기 전에는 Swipeable Menu Sheet를 닫으세요.
                  push("ActivityNext");
                }}
                label="Push"
              />
              <SwipeableMenuSheetItem
                onClick={() => handleAction("delete")}
                tone="critical"
                label="삭제"
              />
            </SwipeableMenuSheetGroup>
          </SwipeableMenuSheetContent>
        </Portal>
      </SwipeableMenuSheetRoot>
    </AppScreen>
  );
};
  1. Portal을 사용하여 Swipeable Menu Sheet가 DOM 상 현재 Activity 밖에 렌더링되도록 합니다.
  2. open prop를 관리하고, onOpenChange 핸들러를 통해 Step 상태와 동기화합니다.
  3. 뒤로 가기 버튼 등을 통해 Activity 파라미터가 변경될 때 Swipeable Menu Sheet의 open 상태를 동기화합니다.
  4. layerIndex={useActivityZIndexBase({ activityOffset: 1 })}로 현재 Activity보다 한 단계 높은 z-index 기준점을 전달합니다.

useStepOverlay

#2와 #3을 일반화하여 useStepOverlay를 사용하면 편리합니다. useStepOverlay 구현 예시는 코드를 참고하세요.

import { useActivityZIndexBase } from "@seed-design/stackflow";
import { Portal } from "@seed-design/react";
import { useStepOverlay } from "./use-step-overlay";
// ... more imports

const MyActivity: ActivityComponentType = () => {
  const { overlayProps, setOpen } = useStepOverlay();
  const { popStep } = useStepFlow("MyActivity");
  const { push } = useFlow();

  const handleAction = (action: string) => {
    console.log("선택한 액션:", action);
    popStep();
  };

  return (
    <AppScreen>
      <SwipeableMenuSheetRoot {...overlayProps}>
        <SwipeableMenuSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </SwipeableMenuSheetTrigger>
        <Portal>
          <SwipeableMenuSheetContent
            title="Actions"
            layerIndex={useActivityZIndexBase({ activityOffset: 1 })}
          >
            <SwipeableMenuSheetGroup>
              <SwipeableMenuSheetItem onClick={() => handleAction("add")} label="추가" />
              <SwipeableMenuSheetItem onClick={() => handleAction("edit")} label="수정" />
              <SwipeableMenuSheetItem
                onClick={() => {
                  setOpen(false); // 다른 Activity로 이동하기 전에는 Swipeable Menu Sheet를 닫으세요.
                  push("ActivityNext");
                }}
                label="Push"
              />
              <SwipeableMenuSheetItem
                onClick={() => handleAction("delete")}
                tone="critical"
                label="삭제"
              />
            </SwipeableMenuSheetGroup>
          </SwipeableMenuSheetContent>
        </Portal>
      </SwipeableMenuSheetRoot>
    </AppScreen>
  );
};

About useActivityZIndexBase

useActivityZIndexBase는 각 Activity의 z-index 기준점을 반환하는 훅입니다.

Last updated on

이전 문서Bottom Sheet다음 문서Introduction

목차

Making a Swipeable Menu Sheet ActivityUsageSyncing Swipeable Menu Sheet State with a StepUsageuseStepOverlayAbout useActivityZIndexBase