(#61) 자잘한 오류 수정 & 기능 추가

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

@@ -7,28 +7,43 @@ import ContactSection from '@/app/editor/_components/mainSection/ContactSection'
 import ProjSection from '../_components/mainSection/ProjSection';
 import { updateStoresWithPortfolioData } from '@/actions/portfolio';
 import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useUserStore } from '@/store/userStore';
 
-export default function EditPage({
-  params,
-}: {
-  params: { portfolioDomain: string };
-}) {
+interface EditPageProps {
+  params: {
+    portfolioId: string;
+  };
+}
+export default function EditPage({ params }: EditPageProps) {
   const [isLoading, setIsLoading] = useState(true); // State to manage loading
+  const router = useRouter();
+  const { portfolios, setPortfolios } = useUserStore((state) => ({
+    portfolios: state.portfolios,
+    setPortfolios: state.setPortfolios,
+  }));
+  const { portfolioId } = params;
 
   console.log(params);
   useEffect(() => {
-    if (!params.portfolioDomain) return; // Guard clause if the portfolioDomain is not available
+    // 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;
+    }
 
-    // Call to update data
-    updateStoresWithPortfolioData(params.portfolioDomain.toString())
-      .then(() => {
-        setIsLoading(false); // Set loading to false when data fetching is complete
-      })
+    // Proceed to fetch and update stores with the portfolio data
+    updateStoresWithPortfolioData(portfolioId)
+      .then(() => setIsLoading(false))
       .catch((error) => {
         console.error('Failed to update stores:', error);
-        setIsLoading(false); // Ensure loading is set to false even if there is an error
+        setIsLoading(false);
       });
-  }, []);
+  }, [portfolioId, portfolios, router]);
   const setSelectedSection = useSidebarStore(
     (state) => state.setSelectedSection
   );

gitlio/app/page.tsx

@@ -1,10 +1,13 @@
 'use client';
 import React, { useState } from 'react';
 import Logo from '@/components/Logo';
-import LoginModal from '@/components/start/LoginModal';
-import SignInModal from '@/components/start/SignInModal';
-import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs';
-import { redirect } from 'next/navigation';
+import {
+  SignedIn,
+  SignedOut,
+  SignIn,
+  SignInButton,
+  UserButton,
+} from '@clerk/nextjs';
 import Link from 'next/link';
 
 const StartPage: React.FC = () => {
@@ -23,12 +26,23 @@ const StartPage: React.FC = () => {
         </SignedIn>
       </nav>{' '}
       <div className="bg-primary flex flex-col justify-center items-center h-screen">
-        <Link
-          href="/studio/dashboard"
-          className="btn btn-ghost text-xl text-[#8288a1] underline underline-offset-4"
-        >
-          DASHBOARD
-        </Link>
+        <SignedOut>
+          <SignInButton
+            forceRedirectUrl="/studio/dashboard"
+            fallbackRedirectUrl="/studio/dashboard"
+            mode={'modal'}
+          >
+            <button className="btn-lg btn">Sign in with Clerk</button>
+          </SignInButton>
+        </SignedOut>
+        <SignedIn>
+          <Link
+            href="/studio/dashboard"
+            className="btn btn-ghost text-xl text-[#8288a1] underline underline-offset-4"
+          >
+            DASHBOARD
+          </Link>
+        </SignedIn>
       </div>
     </div>
   );

gitlio/app/studio/dashboard/page.tsx

@@ -4,52 +4,69 @@ import { useUser } from '@clerk/nextjs';
 import { useUserStore } from '@/store/userStore';
 import { getIdAfterLogin, getUserPortfolios } from '@/actions/user';
 import PortfolioComponent from '@/components/PortfolioComponent';
+import { useRouter } from 'next/navigation';
 
 export default function DashboardPage() {
-  const { isSignedIn, user } = useUser();
+  const { isSignedIn, user, isLoaded } = useUser();
   const { setUser, setUserId, setPortfolios } = useUserStore((state) => ({
     setUser: state.setUser,
     setUserId: state.setUserId,
     setPortfolios: state.setPortfolios,
   }));
   const userId = useUserStore((state) => state.userId);
   const [loading, setLoading] = useState(true);
+  const router = useRouter();
+  if (isLoaded && !isSignedIn) {
+    router.push('/');
+  }
 
   useEffect(() => {
-    if (isSignedIn && user && user.id && !userId) {
-      getIdAfterLogin({
-        clerk_id: user.id,
-        email: user.emailAddresses[0]?.emailAddress,
-        name: user.fullName,
-      })
-        .then((fetchedUserId) => {
+    // 사용자 ID를 가져오는 과정
+    const fetchUserId = async () => {
+      if (user && user.id && !userId) {
+        try {
+          const fetchedUserId: number = await getIdAfterLogin({
+            clerk_id: user.id,
+            email: user.emailAddresses[0]?.emailAddress,
+            name: user.fullName,
+          });
           setUserId(fetchedUserId);
-          setLoading(false);
-        })
-        .catch((err) => {
+          return fetchedUserId; // 다음 단계에서 사용할 수 있도록 fetchedUserId를 반환합니다.
+        } catch (err) {
           console.error('Failed to fetch userId:', err);
+        }
+      }
+      return null;
+    };
+
+    // 포트폴리오 목록을 가져오는 과정
+    const fetchPortfolios = async (id: null | number) => {
+      if (!id) return; // userId가 없다면 실행하지 않음
+      try {
+        const portfolios = await getUserPortfolios(id.toString());
+        console.log(portfolios);
+        if (Array.isArray(portfolios)) {
+          setPortfolios(portfolios);
           setLoading(false);
-        });
-    } else if (userId) {
-      getUserPortfolios(userId.toString())
-        .then((portfolios) => {
-          if (Array.isArray(portfolios)) {
-            setPortfolios(portfolios);
-          } else {
-            console.error(
-              'Expected an array of portfolios, received:',
-              portfolios
-            );
-            setPortfolios([]);
-          }
-          setLoading(false);
-        })
-        .catch((err) => {
-          console.error('Failed to fetch portfolios:', err);
-          setLoading(false);
-        });
+        } else {
+          console.error(
+            'Expected an array of portfolios, received:',
+            portfolios
+          );
+          setPortfolios([]);
+        }
+      } catch (err) {
+        console.error('Failed to fetch portfolios:', err);
+      }
+    };
+
+    if (isSignedIn) {
+      fetchUserId().then((fetchedUserId) => {
+        // UserID를 성공적으로 가져왔다면, 포트폴리오를 불러옴
+        fetchPortfolios(fetchedUserId || userId);
+      });
     }
-  }, [isSignedIn, user, userId]);
+  }, [isSignedIn, user, userId]); // 의존성 배열을 최적화하여 필요한 변수들만 포함시킴
 
   if (loading) {
     return <div>Loading...</div>;

gitlio/components/PortfolioComponent.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState } from 'react';
 import { Portfolio, useUserStore } from '@/store/userStore';
 import { useRouter } from 'next/navigation';

gitlio/tailwind.config.ts

@@ -27,8 +27,7 @@ const config: Config = {
   plugins: [require('daisyui')],
 
   daisyui: {
-    themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
-    darkTheme: 'dark', // name of one of the included themes for dark mode
+    themes: ['light'], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
     base: true, // applies background color and foreground color for root element by default
     styled: true, // include daisyUI colors and design decisions for all components
     utils: true, // adds responsive and modifier utility classes