Merge pull request #61 from DeveloperBlog-Devflow/feature/toast-ui

DongEun02 · web-flow · commit e776577e6b3c · 2026-02-03T03:32:46.000+09:00
feat: alert 알림 toast-ui로 개선
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import './globals.css';
+import ToastProvider from '@/components/common/ToastProvider';
 
 export const metadata: Metadata = {
   title: 'DevFlow',
@@ -13,7 +14,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ko">
-      <body>{children}</body>
+      <body>
+        <ToastProvider>{children}</ToastProvider>
+      </body>
     </html>
   );
 }
diff --git a/components/auth/FindPasswordModal.tsx b/components/auth/FindPasswordModal.tsx
@@ -5,6 +5,7 @@ import Button from './Button';
 import FormField from './FormField';
 import { auth } from '@/lib/firebase';
 import { sendPasswordResetEmail } from 'firebase/auth';
+import { toast } from 'react-toastify';
 
 type FindPasswordModalProps = {
   onClose: () => void;
@@ -25,17 +26,18 @@ const FindPasswordModal = ({ onClose }: FindPasswordModalProps) => {
     e.preventDefault();
 
     if (!email) {
-      alert('이메일을 입력해주세요.');
+      toast.info('이메일을 입력해주세요');
       return;
     }
 
     // 이메일 요청 로직
     sendPasswordResetEmail(auth, email)
       .then(() => {
-        alert('이메일이 발송되었습니다.');
+        toast.success('이메일이 발송되었습니다.');
       })
       .catch((error) => {
-        alert('에러 발생: ' + error.message);
+        console.log('에러 발생: ' + error.message);
+        toast.error('오류가 발생했습니다.');
       });
   };
 
diff --git a/components/auth/SignupForm/SignupForm.tsx b/components/auth/SignupForm/SignupForm.tsx
@@ -5,6 +5,7 @@ import FormField from '@/components/auth/FormField';
 import { SignupValues, useSignupForm } from './useSignupForm';
 import { useRouter } from 'next/navigation';
 import { signupWithEmail } from '@/services/auth/signup.service';
+import { toast } from 'react-toastify';
 
 const toPayload = (v: SignupValues) => ({
   nickname: v.nickname,
@@ -24,7 +25,7 @@ const SignupForm = () => {
 
     try {
       await signupWithEmail(toPayload(values));
-      alert('회원가입 완료되었습니다.');
+      toast.success('회원가입 완료되었습니다.');
       router.push('/login');
     } catch (e: unknown) {
       const code =
@@ -36,8 +37,8 @@ const SignupForm = () => {
           : '';
 
       if (code === 'auth/email-already-in-use')
-        alert('이미 가입된 이메일입니다');
-      else alert('회원가입에 실패했습니다');
+        toast.info('이미 가입된 이메일입니다.');
+      else toast.error('회원가입에 실패했습니다');
     }
   };
 
diff --git a/components/common/Sidebar.tsx b/components/common/Sidebar.tsx
@@ -11,6 +11,8 @@ import {
 } from 'lucide-react';
 import { signOut } from 'firebase/auth';
 import { auth } from '@/lib/firebase';
+import { toast } from 'react-toastify';
+import { toastConfirm } from '@/utils/toastUtils';
 
 const navItems = [
   { label: '홈', href: '/', icon: Home },
@@ -24,15 +26,22 @@ const Sidebar = () => {
   const router = useRouter();
 
   const handleLogout = async (): Promise<void> => {
+    const ok = await toastConfirm('로그아웃 하시겠습니까?', {
+      confirmText: '로그아웃',
+      cancelText: '취소',
+    });
+
+    if (!ok) return;
+
     try {
       await signOut(auth);
       document.cookie =
         'isLoggedIn=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
-      alert('로그아웃 되었습니다.');
+      toast.success('로그아웃 되었습니다.');
       router.replace('/landing');
     } catch (err) {
-      console.error('로그아웃 실패:', err);
-      alert('로그아웃에 실패했습니다.');
+      console.log(err);
+      toast.error('로그아웃에 실패했습니다.');
     }
   };
 
diff --git a/components/common/ToastProvider.tsx b/components/common/ToastProvider.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import React from 'react';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      {children}
+      <ToastContainer
+        position="top-right"
+        autoClose={3000}
+        closeOnClick
+        hideProgressBar={false}
+        pauseOnHover={false}
+        theme="colored"
+      />
+    </>
+  );
+};
+
+export default ToastProvider;
diff --git a/components/plans/InlineAddPlanForm.tsx b/components/plans/InlineAddPlanForm.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { toast } from 'react-toastify';
 
 interface InlineAddPlanFormProps {
   onSave: (title: string, description: string) => void;
@@ -13,7 +14,7 @@ const InlineAddPlanForm = ({ onSave, onCancel }: InlineAddPlanFormProps) => {
 
   const handleSave = () => {
     if (!title.trim()) {
-      alert('플랜 제목을 입력해주세요.');
+      toast.error('플랜 제목을 입력해주세요.');
       return;
     }
     onSave(title, description);
diff --git a/components/plans/InlineAddTaskForm.tsx b/components/plans/InlineAddTaskForm.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Calendar, Plus, X } from 'lucide-react';
+import { Plus, X } from 'lucide-react';
 import DatePicker from './DatePicker';
 
 interface InlineAddTaskFormProps {
diff --git a/components/plans/PlanSection.tsx b/components/plans/PlanSection.tsx
@@ -22,6 +22,7 @@ import {
   deletePlanItem,
   updatePlanItem,
 } from '@/services/plans/planManageService.service';
+import { toastConfirm } from '@/utils/toastUtils';
 
 interface PlanSectionProps {
   userId: string;
@@ -153,16 +154,24 @@ export default function PlanSection({
 
   // 5. 하위 항목 삭제 핸들러
   const handleDeletePlanItem = async (itemId: string, title: string) => {
-    if (confirm(`'${title}' 하위 항목을 정말 삭제하시겠습니까?`)) {
-      try {
-        await deletePlanItem(userId, itemId);
-
-        // 목록 새로고침
-        const fetchedPlanItems = await fetchPlanItems(userId, planId);
-        setTasks(fetchedPlanItems);
-      } catch (err) {
-        console.error(err);
+    const ok = await toastConfirm(
+      `${title} 하위 항목을 정말 삭제하시겠습니까?`,
+      {
+        confirmText: '삭제',
+        cancelText: '취소',
       }
+    );
+
+    if (!ok) return;
+
+    try {
+      await deletePlanItem(userId, itemId);
+
+      // 목록 새로고침
+      const fetchedPlanItems = await fetchPlanItems(userId, planId);
+      setTasks(fetchedPlanItems);
+    } catch (err) {
+      console.error(err);
     }
 
     onChangeStats();
diff --git a/components/tils/TilCard.tsx b/components/tils/TilCard.tsx
@@ -5,6 +5,8 @@ import type { TilItem } from '@/types/til';
 import { useRouter } from 'next/navigation';
 import { Menu } from '@headlessui/react';
 import { useAuthUser } from '@/hooks/useAuthUser';
+import { toast } from 'react-toastify';
+import { toastConfirm } from '@/utils/toastUtils';
 
 type Props = {
   item: TilItem;
@@ -24,9 +26,15 @@ const TilCard = ({ item, onDelete }: Props) => {
     router.push(`/edit/${item.id}`);
   };
   const onClickDelete = async () => {
-    if (!confirm('정말 삭제할까요?')) return;
+    const ok = await toastConfirm('정말 삭제하시겠습니까?', {
+      confirmText: '삭제',
+      cancelText: '취소',
+    });
+
+    if (!ok) return;
+
     await onDelete?.(item.id);
-    alert('성공적으로 삭제되었습니다.');
+    toast.success('성공적으로 삭제되었습니다.');
   };
   return (
     <article className="relative rounded-3xl border border-black/10 bg-white px-10 py-8">
diff --git a/components/write/Editor.tsx b/components/write/Editor.tsx
@@ -8,6 +8,8 @@ import { createTil, updateTil, fetchMyTil } from '@/services/write/til.service';
 import { auth } from '@/lib/firebase';
 import { useRouter } from 'next/navigation';
 
+import { toast } from 'react-toastify';
+
 const MDEditor = dynamic<MDEditorProps>(() => import('@uiw/react-md-editor'), {
   ssr: false,
 });
@@ -29,7 +31,7 @@ const Editor = ({ tilId }: Props) => {
 
     const user = auth.currentUser;
     if (!user) {
-      alert('로그인이 필요합니다');
+      toast.error('로그인이 필요합니다.');
       router.push('/login');
       return;
     }
@@ -39,7 +41,7 @@ const Editor = ({ tilId }: Props) => {
         setLoading(true);
         const til = await fetchMyTil(user.uid, tilId);
         if (!til) {
-          alert('글을 찾을 수 없습니다');
+          toast.error('글을 찾을 수 없습니다.');
           router.back();
           return;
         }
@@ -48,7 +50,7 @@ const Editor = ({ tilId }: Props) => {
         setValue(til.content);
       } catch (e) {
         console.error(e);
-        alert('글을 불러오지 못했습니다');
+        toast.error('글을 불러오지 못했습니다.');
       } finally {
         setLoading(false);
       }
@@ -62,33 +64,35 @@ const Editor = ({ tilId }: Props) => {
   const onClickSave = async () => {
     const user = auth.currentUser;
     if (!user) {
-      alert('로그인이 필요합니다');
+      toast.error('로그인이 필요합니다.');
+      router.push('/login');
       return;
     }
+
     if (!title.trim()) {
-      alert('제목을 입력하세요');
+      toast.error('제목을 입력하세요');
       return;
     }
     if (!value.trim()) {
-      alert('내용을 입력하세요');
+      toast.error('내용을 입력하세요');
       return;
     }
 
     try {
       if (isEdit && tilId) {
         await updateTil(user.uid, tilId, title, value);
-        alert('수정 완료!');
+        toast.success('수정이 완료되었습니다.');
         router.push(`/write/${tilId}`); // 상세 페이지로
         return;
       }
       const id = await createTil(user.uid, value, title);
-      alert('저장 완료!');
-      console.log('postId:', id);
+      toast.success('저장이 완료되었습니다.');
+      // console.log('postId:', id);
 
       router.push(`/write/${id}`);
     } catch (e) {
       console.error(e);
-      alert('저장 실패');
+      toast.error('저장에 실패했습니다.');
     }
   };
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/utils/toastUtils.tsx b/utils/toastUtils.tsx
