Merge pull request #63 from CoPlay-FE/feature/toast_setting

yuj2n · web-flow · commit b40a8e95b6bd · 2025-06-17T17:13:08.000+09:00
✨feat: 토스트 세팅 및 추상화
diff --git a/src/app/dashboard/[id]/edit/layout.tsx b/src/app/dashboard/[id]/edit/layout.tsx
@@ -8,10 +8,12 @@ export default function AboutLayout({
   children: React.ReactNode
 }) {
   return (
-    <div>
+    <>
       <Sidebar />
-      <Header />
-      <div>{children}</div> {/* 여기에 page.tsx 내용이 들어옴 */}
-    </div>
+      <div className="pl-300">
+        <Header />
+        <main>{children}</main>
+      </div>
+    </>
   )
 }
diff --git a/src/app/dashboard/[id]/edit/page.tsx b/src/app/dashboard/[id]/edit/page.tsx
@@ -1,3 +1,24 @@
-export default function dashBoardEditPage() {
-  return <p>대시보드 수정 페이지</p>
+'use client'
+
+import { showError, showSuccess } from '@lib/toast'
+
+export default function DashBoardEditPage() {
+  const handleSuccess = () => {
+    showSuccess('대시보드가 성공적으로 저장되었습니다.')
+  }
+
+  const handleError = () => {
+    showError('저장 중 오류가 발생했습니다.')
+  }
+
+  return (
+    <div className="space-y-4 p-6">
+      <p className="text-xl font-semibold">대시보드 수정 페이지</p>
+
+      <div className="flex gap-4">
+        <button onClick={handleSuccess}>성공 토스트</button>
+        <button onClick={handleError}>에러 토스트</button>
+      </div>
+    </div>
+  )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,9 @@
 import './globals.css'
 
 import type { Metadata } from 'next'
+import { Toaster } from 'sonner'
 
 import { Providers } from './providers'
-import ThemeToggle from './shared/components/ThemeToggle'
 
 export const metadata: Metadata = {
   title: 'Coplan',
@@ -21,7 +21,10 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body>
-        <Providers>{children}</Providers>
+        <Providers>
+          {children}
+          <Toaster position="top-right" richColors closeButton />
+        </Providers>
       </body>
     </html>
   )
diff --git a/src/app/shared/components/common/header/Header.tsx b/src/app/shared/components/common/header/Header.tsx
@@ -14,7 +14,7 @@ export default function Header() {
 
   return (
     <header className="BG-white Border-bottom Text-black w-full overflow-x-hidden border-b px-48 py-12">
-      <div className="flex w-full items-center justify-between pl-300 pr-16">
+      <div className="flex w-full items-center justify-between pr-16">
         {/* 좌측 대시보드명 */}
         <div className="flex shrink-0 items-center gap-8 pr-16">
           <div className="whitespace-nowrap font-bold">대시보드 명</div>
diff --git a/src/app/shared/lib/toast.ts b/src/app/shared/lib/toast.ts
@@ -0,0 +1,5 @@
+import { toast } from 'sonner'
+
+export const showSuccess = (message: string) => toast.success(message)
+export const showError = (message: string) => toast.error(message)
+export const showInfo = (message: string) => toast.message(message) // 성공, 실패가 아닌 정보
