feat: #110/대시보드 수정 페이지 일부 기능 구현

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

@@ -18,12 +18,12 @@ export default function BackButton() {
       >
         <Image
           src={BackIcon}
-          className="scale-x-[-1] w-[18px] h-[18px] tablet:w-[18px] tablet:h-[18px]"
+          className="scale-x-[-1] size-[18px] tablet:size-[18px]"
           alt=""
         />
-        <div className="font-medium text-md text-gray-800 tablet:text-lg">
+        <p className="font-medium text-md text-gray-800 tablet:text-lg">
           돌아가기
-        </div>
+        </p>
       </button>
     </div>
   );

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

@@ -1,20 +1,98 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { useDashboardStore } from "@/lib/store/useDashboardStore";
+import { DashboardDetail } from "@/lib/types";
+import { fetchDashboard, putDashboard } from "@/lib/apis/dashboardsApi";
+import ColorPalette, {
+  ColorCode,
+} from "@/components/common/color-palette/ColorPalette";
 import Input from "@/components/common/input/Input";
 import Button from "@/components/common/button/Button";
 
-export default function DashboardEditSection() {
+export default function DashboardEditSection({
+  id,
+  token,
+}: {
+  id: number;
+  token: string;
+}) {
+  const [data, setData] = useState<DashboardDetail | null>(null);
+  const [dashboardName, setDashboardName] = useState("");
+  const [selectedColor, setSelectedColor] = useState<ColorCode | "">("");
+  const [isFormValid, setIsFormValid] = useState(false);
+  const setDashboardId = useDashboardStore((state) => state.setDashboardId);
+
+  useEffect(() => {
+    const getData = async () => {
+      const data = await fetchDashboard({
+        token,
+        id: String(id),
+      });
+      setData(data);
+      setDashboardName(data.title);
+      setSelectedColor(data.color);
+    };
+
+    getData();
+  }, []);
+
+  const onColorSelect = (color: ColorCode | "") => {
+    setSelectedColor(() => {
+      return color;
+    });
+  };
+
+  useEffect(() => {
+    const trimmedValue = dashboardName.trim();
+    const isValid = trimmedValue !== "" && selectedColor !== "";
+    setIsFormValid(isValid);
+  }, [dashboardName, selectedColor]);
+
+  const onDashboardNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setDashboardName(e.target.value);
+  };
+
+  const editDashboard = async () => {
+    await putDashboard({
+      token,
+      title: dashboardName,
+      color: selectedColor,
+      id,
+    });
+
+    window.location.replace(`/dashboard/${id}`);
+    setDashboardId(String(id));
+  };
+
+  if (!data) return;
+
   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 className="font-bold text-xl text-gray-800 tablet:text-2xl">
+          {data.title}
         </div>
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-8 tablet:gap-10">
           <div className="flex flex-col gap-4">
-            <Input label="대시보드 이름" />
+            <Input
+              label="대시보드 이름"
+              value={dashboardName}
+              placeholder="대시보드 이름을 입력하세요"
+              onChange={onDashboardNameChange}
+            />
+            <ColorPalette
+              onSelect={onColorSelect}
+              selectedColor={selectedColor}
+            />
           </div>
-          <Button variant="purple">변경</Button>
+          <Button
+            variant="purple"
+            onClick={editDashboard}
+            disabled={!isFormValid}
+          >
+            변경
+          </Button>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,37 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useDashboardStore } from "@/lib/store/useDashboardStore";
+import { deleteDashboard } from "@/lib/apis/dashboardsApi";
+import ROUTE from "@/lib/constants/route";
+
+export default function DeleteButton({
+  id,
+  token,
+}: {
+  id: number;
+  token: string;
+}) {
+  const router = useRouter();
+  const setDashboardId = useDashboardStore((state) => state.setDashboardId);
+
+  const handleDeleteClick = async () => {
+    await deleteDashboard({
+      token,
+      id,
+    });
+
+    router.push(ROUTE.MYDASHBOARD);
+    setDashboardId(null);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleDeleteClick}
+      className="max-w-[320px] rounded-lg border border-gray-400 bg-gray-200 font-medium text-lg text-gray-800 tablet:h-[62px] tablet:text-2lg hover:bg-gray-300"
+    >
+      대시보드 삭제하기
+    </button>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { Invitation } from "@/lib/types";
+import { deleteInvitation } from "@/lib/apis/dashboardsApi";
+import Button from "@/components/common/button/Button";
+
+type InvitationCardProps = Invitation & {
+  token: string;
+};
+
+export default function InvitationCard({
+  id,
+  dashboard,
+  invitee,
+  token,
+}: InvitationCardProps) {
+  const handleDeleteClick = async () => {
+    await deleteInvitation({
+      token,
+      dashboardId: dashboard.id,
+      invitationId: id,
+    });
+
+    window.location.reload();
+  };
+
+  return (
+    <div className="py-3 border-b border-gray-400 tablet:py-4">
+      <div className="flex justify-between items-center">
+        <div>{invitee.email}</div>
+        <Button
+          variant="whiteViolet"
+          onClick={handleDeleteClick}
+          className="w-[52px] max-h-[32px] tablet:w-[84px]"
+        >
+          취소
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -1,6 +1,13 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { Invitation } from "@/lib/types";
+import { fetchInvitationList } from "@/lib/apis/dashboardsApi";
 import Pagination from "@/components/common/pagenation-button/PagenationButton";
+import InvitationCard from "./InvitationCard";
+import InviteModalButton from "./InviteModalButton";
+
+const PAGE_SIZE = 4;
 
 export default function InvitationSection({
   id,
@@ -9,27 +16,67 @@ export default function InvitationSection({
   id: number;
   token: string;
 }) {
-  // id 값과 token 값 사용하고 나서는 지워도 되는 코드들
-  console.log(id);
-  console.log(token);
+  const [items, setItems] = useState<Invitation[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalCount, setTotalCount] = useState(0);
+  const totalPage = Math.ceil(totalCount / PAGE_SIZE);
+
+  const handleLoad = async () => {
+    const { invitations, totalCount } = await fetchInvitationList({
+      token,
+      id,
+      page,
+      size: PAGE_SIZE,
+    });
+    setItems(invitations);
+    setTotalCount(totalCount);
+  };
+
+  useEffect(() => {
+    handleLoad();
+  }, [page]);
+
+  const handlePrevPage = () => {
+    if (page > 1) {
+      setPage((prev) => prev - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (page < totalPage) {
+      setPage((prev) => prev + 1);
+    }
+  };
 
   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 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">이메일</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">
+            <p className="font-normal text-xs text-gray-800 tablet:text-md">
+              {totalPage} 페이지 중 {page}
+            </p>
+            <Pagination
+              currentPage={page}
+              totalPages={totalPage}
+              onPrevClick={handlePrevPage}
+              onNextClick={handleNextPage}
+            />
+          </div>
+          <InviteModalButton />
         </div>
       </div>
+      <div>
+        {items.map((item) => (
+          <InvitationCard key={item.id} {...item} token={token} />
+        ))}
+      </div>
     </div>
   );
 }

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

@@ -0,0 +1,28 @@
+import { useModalStore } from "@/lib/store/useModalStore";
+import Button from "@/components/common/button/Button";
+import Image from "next/image";
+import AddIcon from "../../../../../../../public/icon/add_box_icon.svg";
+
+export default function InviteModalButton() {
+  const { openModal } = useModalStore();
+
+  return (
+    <Button
+      variant="purple"
+      radius="sm"
+      onClick={() => {
+        openModal("invite");
+      }}
+      className="flex gap-[6px] w-[86px] max-h-[26px] tablet:gap-2 tablet:w-[105px] tablet:max-h-[32px]"
+    >
+      <Image
+        src={AddIcon}
+        className="size-[14px] invert brightness-0 tablet:size-4"
+        alt=""
+      />
+      <div className="font-medium text-xs leading-[18px] tablet:text-md">
+        초대하기
+      </div>
+    </Button>
+  );
+}

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

@@ -1,7 +1,5 @@
 "use client";
 
-import Pagination from "@/components/common/pagenation-button/PagenationButton";
-
 export default function MemberSection({
   id,
   token,
@@ -16,18 +14,11 @@ export default function MemberSection({
   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 className="font-bold text-xl 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

@@ -3,22 +3,24 @@ import BackButton from "./_components/BackButton";
 import DashboardEditSection from "./_components/DashboardEditSection";
 import InvitationSection from "./_components/InvitationSection";
 import MemberSection from "./_components/MemberSection";
+import DeleteButton from "./_components/DeleteButton";
 
 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]">
+    <div className="flex flex-col px-3 py-4 tablet:px-5">
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-[10px] tablet:gap-[19px] pc:gap-[34px]">
           <BackButton />
           <div className="flex flex-col gap-4 max-w-[620px]">
-            <DashboardEditSection />
+            <DashboardEditSection id={dashboardId} token={accessToken} />
             <MemberSection id={dashboardId} token={accessToken} />
             <InvitationSection id={dashboardId} token={accessToken} />
           </div>
         </div>
+        <DeleteButton id={dashboardId} token={accessToken} />
       </div>
     </div>
   );

src/app/(after-login)/mypage/_components/BackButton.tsx

@@ -18,12 +18,12 @@ export default function BackButton() {
       >
         <Image
           src={BackIcon}
-          className="scale-x-[-1] w-[18px] h-[18px] tablet:w-[18px] tablet:h-[18px]"
+          className="scale-x-[-1] size-[18px] tablet:size-[18px]"
           alt=""
         />
-        <div className="font-medium text-md text-gray-800 tablet:text-lg">
+        <p className="font-medium text-md text-gray-800 tablet:text-lg">
           돌아가기
-        </div>
+        </p>
       </button>
     </div>
   );