Sheet

1"use client";
2
3import { useState } from "react";
4import { Button, Sheet } from "motile-ui";
5
6export default function LeftExample() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <div style={{ display: "flex", justifyContent: "center" }}>
11      <Sheet.Root open={open} onOpenChange={setOpen} position="left">
12        <Sheet.Trigger asChild>
13          <Button variant="secondary">왼쪽 Sheet 열기</Button>
14        </Sheet.Trigger>
15        <Sheet.Portal>
16          <Sheet.Overlay />
17          <Sheet.Content>
18            <Sheet.Header>
19              <Sheet.Title>왼쪽 Sheet</Sheet.Title>
20              <Sheet.Close />
21            </Sheet.Header>
22            <Sheet.Body>
23              <p>화면 왼쪽에서 슬라이드되는 Sheet입니다.</p>
24              <p>position="left" prop을 사용했습니다.</p>
25            </Sheet.Body>
26          </Sheet.Content>
27        </Sheet.Portal>
28      </Sheet.Root>
29    </div>
30  );
31}

1"use client";
2
3import { useState } from "react";
4import { Button, Sheet } from "motile-ui";
5
6export default function CustomCloseExample() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <div style={{ display: "flex", justifyContent: "center" }}>
11      <Sheet.Root open={open} onOpenChange={setOpen}>
12        <Sheet.Trigger asChild>
13          <Button variant="primary">커스텀 닫기 버튼</Button>
14        </Sheet.Trigger>
15        <Sheet.Portal>
16          <Sheet.Overlay />
17          <Sheet.Content>
18            <Sheet.Header>
19              <Sheet.Title>커스텀 닫기 버튼</Sheet.Title>
20              <Sheet.Close asChild>
21                <button
22                  style={{
23                    padding: "8px 16px",
24                    backgroundColor: "#ef4444",
25                    color: "white",
26                    border: "none",
27                    borderRadius: "6px",
28                    cursor: "pointer",
29                    fontSize: "14px",
30                    fontWeight: "500",
31                  }}
32                >
33                  닫기
34                </button>
35              </Sheet.Close>
36            </Sheet.Header>
37            <Sheet.Body>
38              <p>asChild prop을 사용하여 커스텀 닫기 버튼을 만들 수 있습니다.</p>
39              <p>이 예제에서는 빨간색 버튼을 사용했습니다.</p>
40            </Sheet.Body>
41          </Sheet.Content>
42        </Sheet.Portal>
43      </Sheet.Root>
44    </div>
45  );
46}

1"use client";
2
3import { useState } from "react";
4import { Button, Sheet } from "motile-ui";
5
6export default function CloseOptionsExample() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <div style={{ display: "flex", justifyContent: "center" }}>
11      <Sheet.Root
12        open={open}
13        onOpenChange={setOpen}
14        closeOnBackdrop={{ escapeKey: true, clickOutside: false }}
15      >
16        <Sheet.Trigger asChild>
17          <Button variant="secondary">닫기 옵션</Button>
18        </Sheet.Trigger>
19        <Sheet.Portal>
20          <Sheet.Overlay />
21          <Sheet.Content>
22            <Sheet.Header>
23              <Sheet.Title>닫기 옵션 예제</Sheet.Title>
24              <Sheet.Close />
25            </Sheet.Header>
26            <Sheet.Body>
27              <p>ESC 키로만 닫히고 외부 클릭으로는 닫히지 않습니다.</p>
28              <p>closeOnBackdrop 옵션을 세밀하게 제어할 수 있습니다.</p>
29              <ul>
30                <li>ESC 키: 활성화</li>
31                <li>외부 클릭: 비활성화</li>
32              </ul>
33            </Sheet.Body>
34          </Sheet.Content>
35        </Sheet.Portal>
36      </Sheet.Root>
37    </div>
38  );
39}

1"use client";
2
3import { useState } from "react";
4import { Button, Sheet } from "motile-ui";
5
6export default function MaxWidthExample() {
7  const [open, setOpen] = useState(false);
8
9  return (
10    <div style={{ display: "flex", justifyContent: "center" }}>
11      <Sheet.Root open={open} onOpenChange={setOpen} maxWidth="400px">
12        <Sheet.Trigger asChild>
13          <Button variant="ghost">좁은 Sheet</Button>
14        </Sheet.Trigger>
15        <Sheet.Portal>
16          <Sheet.Overlay />
17          <Sheet.Content>
18            <Sheet.Header>
19              <Sheet.Title>최대 너비 제한</Sheet.Title>
20              <Sheet.Close />
21            </Sheet.Header>
22            <Sheet.Body>
23              <p>maxWidth="400px"로 설정된 Sheet입니다.</p>
24              <p>데스크톱에서는 최대 400px 너비로 제한됩니다.</p>
25              <p>모바일에서는 전체 너비를 차지합니다.</p>
26            </Sheet.Body>
27          </Sheet.Content>
28        </Sheet.Portal>
29      </Sheet.Root>
30    </div>
31  );
32}

1"use client";
2
3import { useCallback, useEffect, useState } from "react";
4import { useRouter, useSearchParams } from "next/navigation";
5import { Button, Sheet } from "motile-ui";
6
7export default function UrlControlledExample() {
8  const router = useRouter();
9  const searchParams = useSearchParams();
10  const [open, setOpen] = useState(false);
11
12  // URL의 sheet 파라미터로 열림 상태 제어
13  useEffect(() => {
14    const sheetParam = searchParams.get("sheet");
15    setOpen(sheetParam === "url-example");
16  }, [searchParams]);
17
18  // Sheet 열기: URL에 파라미터 추가
19  const handleOpen = useCallback(() => {
20    const currentUrl = new URL(window.location.href);
21    currentUrl.searchParams.set("sheet", "url-example");
22    router.push(currentUrl.pathname + currentUrl.search, { scroll: false });
23  }, [router]);
24
25  // Sheet 닫기: 뒤로가기로 이전 URL 복원
26  const handleClose = useCallback(() => {
27    router.back();
28  }, [router]);
29
30  return (
31    <Sheet.Root
32      open={open}
33      onOpenChange={(isOpen) => {
34        if (!isOpen) handleClose();
35      }}
36      enableHistoryClose={false}
37    >
38      <Button variant="secondary" onClick={handleOpen}>
39        URL 제어
40      </Button>
41      <Sheet.Portal>
42        <Sheet.Overlay />
43        <Sheet.Content>
44          <Sheet.Header>
45            <Sheet.Title>URL 기반 제어</Sheet.Title>
46            <Sheet.Close />
47          </Sheet.Header>
48          <Sheet.Body>
49            <p>이 Sheet는 URL 파라미터로 열림 상태가 제어됩니다.</p>
50            <p>
51              <code>enableHistoryClose=false</code>로 설정하면
52              히스토리 기반 닫기가 비활성화됩니다.
53            </p>
54            <ul>
55              <li>URL: ?sheet=url-example</li>
56              <li>뒤로가기: URL 변경으로 Sheet 닫힘</li>
57              <li>히스토리 중복 방지</li>
58            </ul>
59          </Sheet.Body>
60        </Sheet.Content>
61      </Sheet.Portal>
62    </Sheet.Root>
63  );
64}