【UI/Component/shadcn-ui】Toast(Toaster)の表示について📝

pnpm add sonner

import { Fragment, ReactNode } from "react";
import { Header } from "@/components/shared/ui-parts/header";
import { Toaster } from "sonner";

/**
 * 共通のBasic Layout
 *
 * - Header
 * - Main Area
 */
export const BasicLayout = ({ children }: { children: ReactNode }) => {
  return (
    <Fragment>
      <Header />
      <div className="flex flex-col gap-[50px] h-screen w-full">
        <main className="flex gap-2">{children}</main>

        {/* Global Toast設定 */}
        <Toaster richColors position="top-center" />
      </div>
    </Fragment>
  );
};

  const handleSubmit = async (values: UserProfileFormValues) => {
    try {
      const res: UserUpdateRes = await UserApi.updateUser(userId, values);
      console.log("更新結果:", res);

      if (res.success && res.user) {
        setUserInLocalStorage(res.user);
        toast.success("プロフィールを更新しました");
        setIsEditing(false);
      } else {
        toast.error("プロフィールの更新に失敗しました");
      }
    } catch (error) {
      console.error("Failed to update profile:", error);
      toast.error("プロフィールの更新に失敗しました");
    }
  };