Merge pull request #69 from TU-GitLio/design/#68

design: Toast pop up when Save success

gitlio/app/editor/[portfolioId]/page.tsx

@@ -27,14 +27,14 @@ export default function EditPage({ params }: EditPageProps) {
   console.log(params);
   useEffect(() => {
     // Check if the portfolio exists in the user's store
-    const portfolioExists = portfolios.some(
-      (portfolio) => portfolio.portfolio_id.toString() === portfolioId
-    );
-
-    if (!portfolioExists) {
-      router.push('/error'); // Redirect to an error page if the portfolio ID is not found
-      return;
-    }
+    // const portfolioExists = portfolios.some(
+    //   (portfolio) => portfolio.portfolio_id.toString() === portfolioId
+    // );
+    //
+    // if (!portfolioExists) {
+    //   router.push('/error'); // Redirect to an error page if the portfolio ID is not found
+    //   return;
+    // }
 
     // Proceed to fetch and update stores with the portfolio data
     updateStoresWithPortfolioData(portfolioId)

gitlio/app/editor/_components/ToastComponent.tsx

@@ -0,0 +1,17 @@
+// components/ToastComponent.tsx
+import React from 'react';
+import useToastStore from '@/store/toastStore';
+
+const ToastComponent: React.FC = () => {
+  const showToast = useToastStore((state) => state.showToast);
+
+  return showToast ? (
+    <div className="toast toast-start">
+      <div className="alert alert-success">
+        <span>성공적으로 저장되었습니다.</span>
+      </div>
+    </div>
+  ) : null;
+};
+
+export default ToastComponent;

gitlio/app/editor/_components/TopBar.tsx

@@ -4,17 +4,26 @@ import { LuAlignJustify, LuBarChartBig } from 'react-icons/lu';
 import PreviewButton from '@/app/editor/_components/PreviewButton';
 import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs';
 import { FaSignInAlt } from 'react-icons/fa';
-import React from 'react';
+import React, { useState } from 'react';
 import { savePortfolioData } from '@/actions/portfolio';
 import { useRouter, usePathname } from 'next/navigation';
+import useToastStore from '@/store/toastStore';
 
 export default function TopBar() {
   const pathname = usePathname().split('/').filter(Boolean).pop();
-  function saveData() {
-    if (!pathname) return;
-    savePortfolioData(pathname).then((r) => console.log(r));
-  }
+
   const router = useRouter();
+  const setShowToast = useToastStore((state) => state.setShowToast);
+  const saveData = () => {
+    if (!pathname) return;
+    savePortfolioData(pathname)
+      .then((r) => {
+        console.log(r);
+        setShowToast(true);
+        setTimeout(() => setShowToast(false), 3000); // Hide toast after 3 seconds
+      })
+      .catch((error: any) => console.error('Error saving data:', error));
+  };
 
   const handleLogoClick = () => {
     router.push('/studio/dashboard');

gitlio/app/editor/layout.tsx

@@ -13,6 +13,7 @@ import { useEffect } from 'react';
 import { useUser } from '@clerk/nextjs';
 import { getIdAfterLogin } from '@/actions/user';
 import { useUserStore } from '@/store/userStore';
+import ToastComponent from '@/app/editor/_components/ToastComponent';
 
 const EditorLayout: React.FC<{ children: React.ReactNode }> = ({
   children,
@@ -66,6 +67,7 @@ const EditorLayout: React.FC<{ children: React.ReactNode }> = ({
             <BaseSideBar />
           </div>
         </div>
+        <ToastComponent />
       </div>
       <GlobalDragOverlay />
     </DndContext>

gitlio/store/toastStore.ts

@@ -0,0 +1,14 @@
+// stores/toastStore.ts
+import create from 'zustand';
+
+interface ToastState {
+  showToast: boolean;
+  setShowToast: (isVisible: boolean) => void;
+}
+
+const useToastStore = create<ToastState>((set) => ({
+  showToast: false,
+  setShowToast: (isVisible: boolean) => set({ showToast: isVisible }),
+}));
+
+export default useToastStore;