From 7141709500fa4cc3b42749e5f87fc7c83f4e054c Mon Sep 17 00:00:00 2001
From: Kevin Kim <kevinkim0617kim@gmail.com>
Date: Tue, 18 Jun 2024 16:06:09 +0900
Subject: [PATCH 1/2] design: Skeleton when loading on dashboard page

---
 gitlio/app/studio/dashboard/page.tsx    |  3 ++-
 gitlio/components/PortfolioSkeleton.tsx | 34 +++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 gitlio/components/PortfolioSkeleton.tsx

diff --git a/gitlio/app/studio/dashboard/page.tsx b/gitlio/app/studio/dashboard/page.tsx
index 69a563e..1b56e92 100644
--- a/gitlio/app/studio/dashboard/page.tsx
+++ b/gitlio/app/studio/dashboard/page.tsx
@@ -5,6 +5,7 @@ import { useUserStore } from '@/store/userStore';
 import { getIdAfterLogin, getUserPortfolios } from '@/actions/user';
 import PortfolioComponent from '@/components/PortfolioComponent';
 import { useRouter } from 'next/navigation';
+import PortfolioSkeleton from '@/components/PortfolioSkeleton';
 
 export default function DashboardPage() {
   const { isSignedIn, user, isLoaded } = useUser();
@@ -69,7 +70,7 @@ export default function DashboardPage() {
   }, [isSignedIn, user, userId]); // 의존성 배열을 최적화하여 필요한 변수들만 포함시킴
 
   if (loading) {
-    return <div>Loading...</div>;
+    return <PortfolioSkeleton />;
   }
 
   return (
diff --git a/gitlio/components/PortfolioSkeleton.tsx b/gitlio/components/PortfolioSkeleton.tsx
new file mode 100644
index 0000000..3dea96e
--- /dev/null
+++ b/gitlio/components/PortfolioSkeleton.tsx
@@ -0,0 +1,34 @@
+// components/PortfolioSkeleton.tsx
+import React from 'react';
+
+const PortfolioSkeleton: React.FC = () => {
+  return (
+    <div className="flex flex-row flex-wrap">
+      {Array.from({ length: 3 }).map((_, index) => (
+        <div
+          key={index}
+          className="card w-96 shadow-xl border m-2 animate-pulse"
+        >
+          <div className="card-body">
+            <div className="skeleton h-6 w-full mb-4"></div>
+            {/* Title placeholder */}
+            <div className="skeleton h-4 w-3/4 mb-2"></div>
+            {/* Deploy status placeholder */}
+            <div className="skeleton h-4 w-full mb-2"></div>
+            {/* Date placeholder */}
+            <div className="skeleton h-4 w-full mb-4"></div>
+            {/* URL input placeholder */}
+            <div className="flex justify-between mt-2">
+              <div className="skeleton h-8 w-8 rounded-full"></div>
+              {/* Delete button placeholder */}
+              <div className="skeleton h-8 w-16"></div>
+              {/* Edit button placeholder */}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default PortfolioSkeleton;

From 123e9fefb8ad3828b2e6edfa60df4c4aa67d767e Mon Sep 17 00:00:00 2001
From: Kevin Kim <kevinkim0617kim@gmail.com>
Date: Wed, 19 Jun 2024 00:16:12 +0900
Subject: [PATCH 2/2] design: move editor component to center

---
 gitlio/app/editor/layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/gitlio/app/editor/layout.tsx b/gitlio/app/editor/layout.tsx
index 6445098..cb3eb62 100644
--- a/gitlio/app/editor/layout.tsx
+++ b/gitlio/app/editor/layout.tsx
@@ -60,8 +60,8 @@ const EditorLayout: React.FC<{ children: React.ReactNode }> = ({
           {/*<div className="fixed left-0 top-16 bottom-0">*/}
           {/*  <LeftSidebar />*/}
           {/*</div>*/}
-          <div className="flex flex-col flex-grow mt-24 overflow-auto">
-            <div className="px-4 ml-60 mb-16">{children}</div>
+          <div className="flex flex-col flex-grow mt-24 overflow-auto mr-[450px] mb-16 justify-center items-center">
+            <div className="px-4">{children}</div>
           </div>
           <div className="fixed right-0 top-16 bottom-0">
             <BaseSideBar />