Fix toast text alignment
The text in the toast notification was left-aligned instead of centered. This commit fixes the alignment issue.
This commit is contained in:
@@ -6,6 +6,7 @@ import { useAuth } from '@/contexts/auth/AuthProvider';
|
|||||||
import { useDataReset } from '@/hooks/useDataReset';
|
import { useDataReset } from '@/hooks/useDataReset';
|
||||||
import DataResetDialog from './DataResetDialog';
|
import DataResetDialog from './DataResetDialog';
|
||||||
import { isSyncEnabled } from '@/utils/sync/syncSettings';
|
import { isSyncEnabled } from '@/utils/sync/syncSettings';
|
||||||
|
import { toast } from '@/hooks/useToast.wrapper';
|
||||||
|
|
||||||
const DataResetSection = () => {
|
const DataResetSection = () => {
|
||||||
const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
|
const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
|
||||||
@@ -17,6 +18,12 @@ const DataResetSection = () => {
|
|||||||
await resetAllData();
|
await resetAllData();
|
||||||
setIsResetDialogOpen(false);
|
setIsResetDialogOpen(false);
|
||||||
|
|
||||||
|
// 알림 표시
|
||||||
|
toast({
|
||||||
|
title: "데이터 초기화 완료",
|
||||||
|
description: "모든 데이터가 초기화되었습니다.",
|
||||||
|
});
|
||||||
|
|
||||||
// 초기화 후 페이지 새로고침
|
// 초기화 후 페이지 새로고침
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import * as ToastPrimitives from "@radix-ui/react-toast"
|
import * as ToastPrimitives from "@radix-ui/react-toast"
|
||||||
import { cva, type VariantProps } from "class-variance-authority"
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
@@ -92,7 +93,7 @@ const ToastTitle = React.forwardRef<
|
|||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<ToastPrimitives.Title
|
<ToastPrimitives.Title
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn("text-sm font-semibold", className)}
|
className={cn("text-sm font-semibold text-center", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
@@ -104,7 +105,7 @@ const ToastDescription = React.forwardRef<
|
|||||||
>(({ className, ...props }, ref) => (
|
>(({ className, ...props }, ref) => (
|
||||||
<ToastPrimitives.Description
|
<ToastPrimitives.Description
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn("text-sm opacity-90", className)}
|
className={cn("text-sm opacity-90 text-center", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
))
|
))
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export function Toaster() {
|
|||||||
{toasts.map(function ({ id, title, description, action, ...props }) {
|
{toasts.map(function ({ id, title, description, action, ...props }) {
|
||||||
return (
|
return (
|
||||||
<Toast key={id} {...props}>
|
<Toast key={id} {...props}>
|
||||||
<div className="grid gap-1">
|
<div className="grid gap-1 w-full text-center">
|
||||||
{title && <ToastTitle>{title}</ToastTitle>}
|
{title && <ToastTitle>{title}</ToastTitle>}
|
||||||
{description && (
|
{description && (
|
||||||
<ToastDescription>{description}</ToastDescription>
|
<ToastDescription>{description}</ToastDescription>
|
||||||
|
|||||||
@@ -1,3 +1,3 @@
|
|||||||
|
|
||||||
export const TOAST_LIMIT = 5 // 최대 5개로 제한
|
export const TOAST_LIMIT = 5 // 최대 5개로 제한
|
||||||
export const TOAST_REMOVE_DELAY = 3000 // 3초 후 DOM에서 제거 (5초에서 3초로 변경)
|
export const TOAST_REMOVE_DELAY = 3000 // 3초 후 DOM에서 제거
|
||||||
|
|||||||
Reference in New Issue
Block a user