Merge pull request #109 from hyeonjiroh/feat/#104/dashboard-edit-page

feat: #108/대시보드 수정 페이지 컴포넌트로 분리

Author: codeit-kkm

src/app/(after-login)/dashboard/[dashboardid]/edit/_components/BackButton.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import BackIcon from "../../../../../../../public/icon/arrow_right_icon.svg";
+
+export default function BackButton() {
+  const router = useRouter();
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          router.back();
+        }}
+        className="flex gap-2 items-center"
+      >
+        <Image
+          src={BackIcon}
+          className="scale-x-[-1] w-[18px] h-[18px] tablet:w-[18px] tablet:h-[18px]"
+          alt=""
+        />
+        <div className="font-medium text-md text-gray-800 tablet:text-lg">
+          돌아가기
+        </div>
+      </button>
+    </div>
+  );
+}

src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Input from "@/components/common/input/Input";
+import Button from "@/components/common/button/Button";
+
+export default function DashboardEditSection() {
+  return (
+    <div className="w-full p-4 rounded-lg bg-white tablet:p-6">
+      <div className="flex flex-col gap-10 tablet:gap-6">
+        <div className="font-bold text-2lg text-gray-800 tablet:text-2xl">
+          대시보드 이름
+        </div>
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-4">
+            <Input label="대시보드 이름" />
+          </div>
+          <Button variant="purple">변경</Button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Pagination from "@/components/common/pagenation-button/PagenationButton";
+
+export default function InvitationSection({
+  id,
+  token,
+}: {
+  id: number;
+  token: string;
+}) {
+  // id 값과 token 값 사용하고 나서는 지워도 되는 코드들
+  console.log(id);
+  console.log(token);
+
+  return (
+    <div className="w-full p-4 rounded-lg bg-white tablet:p-6">
+      <div className="flex items-center justify-between">
+        <h2 className="font-bold text-2lg text-gray-800 tablet:text-2xl">
+          초대 내역
+        </h2>
+        <div className="flex items-center gap-2">
+          <span>1 페이지 중 1</span>
+          <Pagination
+            currentPage={1}
+            totalPages={1}
+            onPageChange={(page) => {
+              console.log(`구성원 페이지 ${page}로 변경`);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(after-login)/dashboard/[dashboardid]/edit/_components/MemberSection.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Pagination from "@/components/common/pagenation-button/PagenationButton";
+
+export default function MemberSection({
+  id,
+  token,
+}: {
+  id: number;
+  token: string;
+}) {
+  // id 값과 token 값 사용하고 나서는 지워도 되는 코드들
+  console.log(id);
+  console.log(token);
+
+  return (
+    <div className="w-full p-4 rounded-lg bg-white tablet:p-6">
+      <div className="flex items-center justify-between">
+        <h2 className="font-bold text-2lg text-gray-800 tablet:text-2xl">
+          구성원
+        </h2>
+        <div className="flex items-center gap-2">
+          <span>1 페이지 중 1</span>
+          <Pagination
+            currentPage={1}
+            totalPages={1}
+            onPageChange={(page) => {
+              console.log(`구성원 페이지 ${page}로 변경`);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx

@@ -1,3 +1,25 @@
-export default function Page() {
-  return <div>/dashboard/dashboardid/edit</div>;
+import { cookies } from "next/headers";
+import BackButton from "./_components/BackButton";
+import DashboardEditSection from "./_components/DashboardEditSection";
+import InvitationSection from "./_components/InvitationSection";
+import MemberSection from "./_components/MemberSection";
+
+export default function Page({ params }: { params: { dashboardid: string } }) {
+  const dashboardId = Number(params.dashboardid);
+  const accessToken = cookies().get("accessToken")?.value ?? "";
+
+  return (
+    <div>
+      <div className="flex flex-col px-3 py-4 tablet:px-5">
+        <div className="flex flex-col gap-[6px] tablet:gap-[29px]">
+          <BackButton />
+          <div className="flex flex-col gap-4 max-w-[620px]">
+            <DashboardEditSection />
+            <MemberSection id={dashboardId} token={accessToken} />
+            <InvitationSection id={dashboardId} token={accessToken} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

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

@@ -4,7 +4,7 @@ import ProfileSection from "./_components/ProfileSection";
 
 export default function Page() {
   return (
-    <div className="flex flex-col px-3 py-4">
+    <div className="flex flex-col px-3 py-4 tablet:px-5">
       <div className="flex flex-col gap-[6px] tablet:gap-[29px]">
         <BackButton />
         <div className="flex flex-col gap-4 max-w-[672px] tablet:gap-6">