React
Snackbar
화면 하단에 일시적으로 나타나 상태나 결과를 안내하는 컴포넌트입니다.
import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";
function Component() {
const adapter = useSnackbarAdapter();
return (
<ActionButton
onClick={() =>
adapter.create({
onClose: () => {},
render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
})
}
>
실행
</ActionButton>
);
}
export default function SnackbarPreview() {
return (
<SnackbarProvider>
<Component />
</SnackbarProvider>
);
}Installation
npx @seed-design/cli@latest add ui:snackbarpnpm dlx @seed-design/cli@latest add ui:snackbaryarn dlx @seed-design/cli@latest add ui:snackbarbun x @seed-design/cli@latest add ui:snackbar의존성 설치
npm install @karrotmarket/react-monochrome-icon @seed-design/reactyarn add @karrotmarket/react-monochrome-icon @seed-design/reactpnpm add @karrotmarket/react-monochrome-icon @seed-design/reactbun add @karrotmarket/react-monochrome-icon @seed-design/react아래 코드를 복사 후 붙여넣고 사용하세요
/**
* @file ui:snackbar
* @requires @seed-design/react@^2.0.0
* @requires @seed-design/css@^2.0.0
**/
"use client";
import {
Snackbar as SeedSnackbar,
useSnackbarAdapter as useSeedSnackbarAdapter,
type CreateSnackbarOptions as SeedCreateSnackbarOptions,
} from "@seed-design/react";
import * as React from "react";
import IconCheckmarkCircleFill from "@karrotmarket/react-monochrome-icon/IconCheckmarkCircleFill";
import IconExclamationmarkCircleFill from "@karrotmarket/react-monochrome-icon/IconExclamationmarkCircleFill";
export interface SnackbarProviderProps extends SeedSnackbar.RootProviderProps {}
export const SnackbarProvider = (props: SnackbarProviderProps) => {
const { children, ...otherProps } = props;
return (
<SeedSnackbar.RootProvider {...otherProps}>
{children}
<SeedSnackbar.Region>
<SeedSnackbar.Renderer />
</SeedSnackbar.Region>
</SeedSnackbar.RootProvider>
);
};
export interface SnackbarProps extends SeedSnackbar.RootProps {
/**
* 스낵바에 표시할 메시지
*/
message: string;
/**
* 스낵바에 표시할 액션 버튼의 라벨
*/
actionLabel?: string;
/**
* 액션 버튼 클릭 시 호출되는 콜백
*/
onAction?: () => void;
}
/**
* @see https://seed-design.io/react/components/snackbar
*/
export const Snackbar = React.forwardRef<HTMLDivElement, SnackbarProps>(
({ variant = "default", children, message, actionLabel, onAction, ...otherProps }, ref) => {
return (
<SeedSnackbar.Root ref={ref} variant={variant} {...otherProps}>
{variant !== "default" && (
<SeedSnackbar.PrefixIcon
svg={
variant === "positive" ? (
<IconCheckmarkCircleFill />
) : variant === "critical" ? (
<IconExclamationmarkCircleFill />
) : null
}
/>
)}
<SeedSnackbar.Content>
<SeedSnackbar.Message>{message}</SeedSnackbar.Message>
{actionLabel && (
<SeedSnackbar.ActionButton onClick={onAction}>{actionLabel}</SeedSnackbar.ActionButton>
)}
</SeedSnackbar.Content>
{/* You may implement your own i18n for dismiss label */}
<SeedSnackbar.HiddenCloseButton>닫기</SeedSnackbar.HiddenCloseButton>
</SeedSnackbar.Root>
);
},
);
Snackbar.displayName = "Snackbar";
// TODO: re-export is ugly; should we namespace CreateSnackbarOptions into Snackbar?
export interface CreateSnackbarOptions extends SeedCreateSnackbarOptions {}
export const useSnackbarAdapter = useSeedSnackbarAdapter;
export const SnackbarAvoidOverlap = SeedSnackbar.AvoidOverlap;
/**
* 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
Snackbar
Prop
Type
SnackbarAdapter.create Parameters (CreateSnackbarOptions)
Prop
Type
SnackbarProvider
Prop
Type
childrenReact.ReactNodeExamples
Variants
Positive
import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";
function Component() {
const adapter = useSnackbarAdapter();
return (
<ActionButton
onClick={() =>
adapter.create({
onClose: () => {},
render: () => (
<Snackbar
variant="positive"
message="알림 메세지"
actionLabel="확인"
onAction={() => {}}
/>
),
})
}
>
실행
</ActionButton>
);
}
export default function SnackbarPositive() {
return (
<SnackbarProvider>
<Component />
</SnackbarProvider>
);
}Critical
import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";
function Component() {
const adapter = useSnackbarAdapter();
return (
<ActionButton
onClick={() =>
adapter.create({
timeout: 50000000,
onClose: () => {},
render: () => (
<Snackbar
variant="critical"
message="알림 메세지"
actionLabel="확인"
onAction={() => {}}
/>
),
})
}
>
실행
</ActionButton>
);
}
export default function SnackbarNegative() {
return (
<SnackbarProvider>
<Component />
</SnackbarProvider>
);
}Pause on Interaction
사용자가 Snackbar와 상호작용(hover 및 active) 하는 동안 Snackbar가 timeout으로 인해 dismiss되지 않도록 하려면 SnackbarProvider의 pauseOnInteraction을 true로 설정합니다.
기본값
@seed-design/[email protected]까지:false: 명시하지 않는 경우, 상호작용 여부와 관계없이 timeout이 지나면 dismiss됩니다.- 이후 버전:
true: 명시하지 않는 경우, 사용자가 상호작용하는 동안 timeout이 멈춥니다.
import { VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";
import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";
import { useState } from "react";
function Component() {
const adapter = useSnackbarAdapter();
return (
<ActionButton
onClick={() =>
adapter.create({
onClose: () => {},
render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
})
}
>
실행
</ActionButton>
);
}
export default function SnackbarPauseOnInteraction() {
const [pauseOnInteraction, setPauseOnInteraction] = useState(true);
return (
<VStack gap="spacingY.componentDefault" alignItems="center">
<SnackbarProvider pauseOnInteraction={pauseOnInteraction}>
<Component />
</SnackbarProvider>
<SegmentedControl
aria-label="Pause on interaction"
value={`${pauseOnInteraction}`}
onValueChange={(value) => setPauseOnInteraction(value === "true")}
>
<SegmentedControlItem value="false">false</SegmentedControlItem>
<SegmentedControlItem value="true">true</SegmentedControlItem>
</SegmentedControl>
</VStack>
);
}Strategy
Snackbar가 이미 표시 중일 때 새로운 Snackbar를 생성하면, 기본적으로 기존 Snackbar를 즉시 교체합니다 (immediate).
큐에 넣고 순차적으로 보여주려면 strategy: "queued"를 사용합니다.
strategy는 SnackbarProvider에서 기본값을 설정하거나, create() 호출 시 개별적으로 지정할 수 있습니다.
import { ActionButton } from "seed-design/ui/action-button";
import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";
function Component() {
const adapter = useSnackbarAdapter();
return (
<div style={{ display: "flex", gap: 8 }}>
<ActionButton
variant="neutralSolid"
onClick={() =>
adapter.create({
render: () => <Snackbar variant="positive" message="저장되었습니다" />,
})
}
>
Immediate (positive)
</ActionButton>
<ActionButton
variant="neutralSolid"
onClick={() =>
adapter.create({
strategy: "queued",
render: () => <Snackbar variant="critical" message="오류가 발생했습니다" />,
})
}
>
Queued (critical)
</ActionButton>
</div>
);
}
export default function SnackbarStrategy() {
return (
<SnackbarProvider>
<Component />
</SnackbarProvider>
);
}Avoid Overlap
<SnackbarAvoidOverlap /> 컴포넌트를 사용하여 스낵바가 겹치지 않아야 하는 영역을 지정할 수 있습니다.
<SnackbarAvoidOverlap />의 자식 컴포넌트는 forwardRef(~React 18) 혹은 ref prop(React 19~)으로 ref를 전달받아야 합니다.
offset은 다음 상황에서 갱신됩니다.
- SnackbarAvoidOverlap의 자식 컴포넌트가 mount될 때
- SnackbarAvoidOverlap의 자식 컴포넌트가 unmount될 때
- SnackbarAvoidOverlap의 자식 컴포넌트의 높이가 변경될 때
- SnackbarRegion의 높이가 변경될 때
import { Flex, VStack } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import {
Snackbar,
SnackbarAvoidOverlap,
SnackbarProvider,
useSnackbarAdapter,
} from "seed-design/ui/snackbar";
function Component() {
const adapter = useSnackbarAdapter();
return (
<VStack gap="x4">
<ActionButton
onClick={() =>
adapter.create({
onClose: () => {},
render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
})
}
>
실행
</ActionButton>
<SnackbarAvoidOverlap>
<Flex width="full" height="x16" bg="bg.criticalWeak" justify="center" align="center">
Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.
</Flex>
</SnackbarAvoidOverlap>
</VStack>
);
}
export default function SnackbarPreview() {
return (
<SnackbarProvider>
<Component />
</SnackbarProvider>
);
}Last updated on