[#96] feat: 토스트 적용

Author: evaain706

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package.json

@@ -11,16 +11,20 @@
   "dependencies": {
     "@tanstack/react-query": "^5.82.0",
     "axios": "^1.10.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "framer-motion": "^12.23.0",
+    "lucide-react": "^0.534.0",
     "next": "15.3.5",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-datepicker": "^8.4.0",
     "react-daum-postcode": "^3.2.0",
     "react-dom": "^19.0.0",
     "react-kakao-maps-sdk": "^1.2.0",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.6"
   },
@@ -39,6 +43,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.13",
     "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.6",
     "typescript": "^5"
   }
 }

pnpm-lock.yaml

@@ -22,7 +22,7 @@ export default function EditActivityForm() {
     subImages,
     dates,
     isLoading,
-    error,
+    isError,
     setTitle,
     setCategory,
     setPrice,
@@ -39,7 +39,7 @@ export default function EditActivityForm() {
   } = useEditActivityForm();
 
   if (isLoading) return <div>로딩 중...</div>;
-  if (error) return <div>오류가 발생했습니다: {error.message}</div>;
+  if (isError) return <div>오류가 발생했습니다: {isError}</div>;
 
   return (
     <div className='min-h-screen bg-gray-50 px-4 py-8 sm:px-6 lg:px-8'>

src/app/(with-header)/myactivity/[id]/components/EditActivityForm.tsx

@@ -7,6 +7,7 @@ import { privateInstance } from '@/apis/privateInstance';
 import { uploadImage } from '../../utils/uploadImage';
 import { ActivityDetailEdit, Schedule } from '@/types/activityDetailType';
 import { AxiosError } from 'axios';
+import { toast } from 'sonner';
 
 interface SubImageType {
   id?: number;
@@ -31,7 +32,7 @@ export const useEditActivityForm = () => {
   const [originalSchedules, setOriginalSchedules] = useState<Schedule[]>([]);
   const [dates, setDates] = useState<Schedule[]>([]);
 
-  const { data, isLoading, error } = useQuery<ActivityDetailEdit, Error>({
+  const { data, isLoading, isError } = useQuery<ActivityDetailEdit, Error>({
     queryKey: ['edit-activity', id],
     queryFn: async () => {
       const res = await privateInstance.get(`/activities/${id}`);
@@ -151,17 +152,18 @@ export const useEditActivityForm = () => {
 
       await privateInstance.patch(`/editActivity/${id}`, payload);
 
-      alert('수정이 완료되었습니다.'); //토스트로 대체
+      toast.success('수정되었습니다!'); //토스트로 대체
       queryClient.invalidateQueries({ queryKey: ['activity', id] });
       router.push(`/activities/${id}`);
     } catch (err) {
       const error = err as AxiosError;
       const responseData = error.response?.data as
         | { error?: string; message?: string }
         | undefined;
+
       console.error('전체 에러:', error);
-      alert(
-        //토스트로대체
+
+      toast.error(
         responseData?.error ||
           responseData?.message ||
           error.message ||
@@ -180,7 +182,7 @@ export const useEditActivityForm = () => {
     subImages,
     dates,
     isLoading,
-    error,
+    isError,
     setTitle,
     setCategory,
     setPrice,