반응형
https://www.youtube.com/watch?v=Av9C7xlV0fA
04:33:00
src/app/layout.tsx
- "sonner": "^2.0.6" 가 설치되었는지 확인 후 Toaster import
import type { Metadata } from "next";
import {Inter} from "next/font/google"
import { cn } from "@/lib/utils";
import "./globals.css";
import { QueryProvider } from "@/components/query-provider";
// 렌더링 컨테이너: 토스트 메시지가 실제로 화면에 나타날 영역
import { Toaster } from "sonner";
const inter = Inter({subsets:["latin"]})
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={cn(inter.className, "antialiased min-h-screen")}
>
<QueryProvider>
// Toaster (컴포넌트)
<Toaster/>
{children}
</QueryProvider>
</body>
</html>
);
}
src/features/workspaces/api/use-create-workspace.ts
- toast (함수)를 사용해 워크스페이스 생성 성공, 오류 알림창에 메시지를 띄워준다.
// 실행 함수: 실제로 토스트 메시지를 발생시키는 함수
import { toast } from 'sonner';
import {useMutation, useQueryClient} from '@tanstack/react-query'
import { InferRequestType, InferResponseType } from 'hono';
import {client} from '@/lib/rpc'
type ResponseType = InferResponseType<typeof client.api.workspaces['$post']>
type RequestType = InferRequestType<typeof client.api.workspaces['$post']>
export const useCreateWorkspace = () => {
const queryClient = useQueryClient()
const mutation = useMutation<
ResponseType,
Error,
RequestType
>({
mutationFn: async({json}) => {
const response = await client.api.workspaces["$post"]({json});
// 서버가 응답은 했지만 실패 상태코드 반환, HTTP 에러 (401, 500 등)
if(!response.ok){
throw new Error("Failed to create workspace")
}
return response.json()
},
onSuccess: () => {
// 메시지 생성: success 알림메시지
toast.success('Workspace created')
queryClient.invalidateQueries({queryKey : ['workspaces']})
},
onError: ()=> {
// 메시지 생성: error 알림메시지
toast.error("Failed to create workspace") // ← 모든 에러를 여기서 처리
}
})
return mutation
}
* 같은 방법으로 use-login.ts, use-logout.ts, use-register.ts 파일도 수정해주기
반응형
'Clone Coding' 카테고리의 다른 글
| Jira-clone - Workspace 목록 불러오기 (0) | 2025.10.01 |
|---|---|
| Jira-clone - image 업로드 (0) | 2025.09.29 |
| Jira-clone - Appwrite로 워크스페이스 생성 기능 구현 (0) | 2025.09.26 |
| Jira-Clone - 사이드바 (0) | 2025.09.25 |
| Jira-Clone - 로그인, 로그아웃시 자동 리다이렉트 (0) | 2025.09.24 |
