Merge pull request #113 from hyeonjiroh/feat/#112/mydashboard-page

refactor: #112/나의 대시보드 페이지 컴포넌트 분리

Author: codeit-kkm

src/app/(after-login)/mydashboard/_components/DashboardListSection.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { fetchDashboardList } from "@/lib/apis/dashboardsApi";
+import { DashboardList } from "@/lib/types";
+
+const PAGE_SIZE = 6;
+
+export default function DashboardListSection({ token }: { token: string }) {
+  const [myDashboards, setMyDashboards] = useState<DashboardList[]>([]);
+  const [page, setPage] = useState(1);
+
+  setPage(1); // vercel 배포 때문에 임시로 넣은 코드라 삭제하시면 됩니다.
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function loadDashboards() {
+      try {
+        const { dashboards }: { dashboards: DashboardList[] } =
+          await fetchDashboardList({
+            token: token,
+            page: page,
+            size: PAGE_SIZE,
+          });
+
+        setMyDashboards(
+          dashboards.filter((dashboard) => dashboard.createdByMe)
+        );
+      } catch (error) {
+        console.error("대시보드를 불러오는 중 오류 발생:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadDashboards();
+  }, []);
+
+  return (
+    <>
+      <button className="px-4 py-2 bg-blue-500 text-white rounded-lg flex items-center">
+        새로운 대시보드 +
+      </button>
+
+      <div>
+        <h2 className="text-lg font-semibold">내 대시보드</h2>
+        {loading ? (
+          <p>로딩 중...</p>
+        ) : myDashboards.length > 0 ? (
+          <ul className="mt-4 space-y-2">
+            {myDashboards.map((dashboard) => (
+              <li key={dashboard.id} className="p-4 bg-white shadow rounded-lg">
+                {dashboard.title}
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div className="p-6 bg-gray-100 text-center rounded-lg">
+            <p className="text-gray-500">아직 생성한 대시보드가 없어요.</p>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

src/app/(after-login)/mydashboard/_components/InvitationSection.tsx

@@ -0,0 +1,17 @@
+export default function InvitationSection({ token }: { token: string }) {
+  return (
+    <div className="flex flex-col gap-[26px] w-full p-4 rounded-lg bg-white tablet:gap-[17px] tablet:p-6">
+      <div className="flex justify-between items-center tablet:items-start">
+        <div className="flex flex-col gap-[14px] tablet:gap-8">
+          <h2 className="font-bold text-xl text-gray-800 tablet:text-2xl">
+            초대받은 대시보드
+          </h2>
+          <p className="font-normal text-md text-gray-500">{token}</p>
+        </div>
+        <div className="flex flex-col items-end gap-3 tablet:flex-row tablet:items-center tablet:gap-4">
+          <div className="flex items-center gap-3 tablet:gap-4"></div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(after-login)/mydashboard/page.tsx

@@ -1,3 +1,14 @@
+import { cookies } from "next/headers";
+import DashboardListSection from "./_components/DashboardListSection";
+import InvitationSection from "./_components/InvitationSection";
+
 export default function Page() {
-  return <div>/mydashboard</div>;
+  const accessToken = cookies().get("accessToken")?.value ?? "";
+
+  return (
+    <div className="flex flex-col gap-6 p-6 tablet:gap-12 tablet:p-10 pc:gap-10">
+      <DashboardListSection token={accessToken} />
+      <InvitationSection token={accessToken} />
+    </div>
+  );
 }