From 4e671451d4af1a8ee0ec5dd13dd0c28c847232ab Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Mon, 31 Mar 2025 11:10:52 +0900 Subject: [PATCH 1/9] feat: Update sidebar to reflect dashboard creation and deletion in real time --- .../edit/_components/DeleteButton.tsx | 37 +++++++++++++++++++ .../dashboard/[dashboardid]/edit/page.tsx | 8 ++-- src/components/layout/navbar/Navbar.tsx | 0 src/components/layout/sidebar/AddButton.tsx | 2 - .../layout/sidebar/SideMenuHeader.tsx | 2 - .../layout/sidebar/SideMenuList.tsx | 2 - src/components/layout/sidebar/index.tsx | 7 +++- .../create-dashboard/CreateDashboardModal.tsx | 4 +- src/lib/apis/dashboardsApi.ts | 18 +++++++++ 9 files changed, 69 insertions(+), 11 deletions(-) create mode 100644 src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DeleteButton.tsx delete mode 100644 src/components/layout/navbar/Navbar.tsx diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DeleteButton.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DeleteButton.tsx new file mode 100644 index 0000000..42314ac --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx index cbd9d87..f69ce95 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx @@ -3,15 +3,16 @@ 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 ( -
-
-
+
+
+
@@ -19,6 +20,7 @@ export default function Page({ params }: { params: { dashboardid: string } }) {
+
); diff --git a/src/components/layout/navbar/Navbar.tsx b/src/components/layout/navbar/Navbar.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/layout/sidebar/AddButton.tsx b/src/components/layout/sidebar/AddButton.tsx index 3c33143..7fba6c4 100644 --- a/src/components/layout/sidebar/AddButton.tsx +++ b/src/components/layout/sidebar/AddButton.tsx @@ -1,5 +1,3 @@ -"use client"; - import { useModalStore } from "@/lib/store/useModalStore"; import Image from "next/image"; import AddButtonIcon from "../../../../public/icon/add_box_icon.svg"; diff --git a/src/components/layout/sidebar/SideMenuHeader.tsx b/src/components/layout/sidebar/SideMenuHeader.tsx index 43bfc8a..8e0accf 100644 --- a/src/components/layout/sidebar/SideMenuHeader.tsx +++ b/src/components/layout/sidebar/SideMenuHeader.tsx @@ -1,5 +1,3 @@ -"use client"; - import { useIsMobile } from "@/lib/hooks/useCheckViewport"; export default function SideMenuHeader() { diff --git a/src/components/layout/sidebar/SideMenuList.tsx b/src/components/layout/sidebar/SideMenuList.tsx index 829694f..2357692 100644 --- a/src/components/layout/sidebar/SideMenuList.tsx +++ b/src/components/layout/sidebar/SideMenuList.tsx @@ -1,5 +1,3 @@ -"use client"; - import { useEffect, useState, useRef } from "react"; import { useIntersection } from "@/lib/hooks/useIntersection"; import { DashboardList } from "@/lib/types"; diff --git a/src/components/layout/sidebar/index.tsx b/src/components/layout/sidebar/index.tsx index 6666d95..fb964c8 100644 --- a/src/components/layout/sidebar/index.tsx +++ b/src/components/layout/sidebar/index.tsx @@ -1,9 +1,14 @@ +"use client"; + +import { useDashboardStore } from "@/lib/store/useDashboardStore"; import LogoButton from "@/components/common/logo-button/LogoButton"; import AddButton from "./AddButton"; import SideMenuHeader from "./SideMenuHeader"; import SideMenuList from "./SideMenuList"; export default function Sidebar() { + const dashboardId = useDashboardStore((state) => state.dashboardId); + return (
@@ -14,7 +19,7 @@ export default function Sidebar() {
- +
); diff --git a/src/components/modal/create-dashboard/CreateDashboardModal.tsx b/src/components/modal/create-dashboard/CreateDashboardModal.tsx index 9cf89ea..aeb0817 100644 --- a/src/components/modal/create-dashboard/CreateDashboardModal.tsx +++ b/src/components/modal/create-dashboard/CreateDashboardModal.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; +import { useDashboardStore } from "@/lib/store/useDashboardStore"; import { postDashboard } from "@/lib/apis/dashboardsApi"; import Modal from "@/components/common/modal/Modal"; import Input from "@/components/common/input/Input"; @@ -12,6 +13,7 @@ export default function CreateDashboardModal() { const [selectedColor, setSelectedColor] = useState(""); const [isFormValid, setIsFormValid] = useState(false); const router = useRouter(); + const setDashboardId = useDashboardStore((state) => state.setDashboardId); const accessToken = localStorage.getItem("accessToken") ?? ""; const onColorSelect = (color: ColorCode | "") => { @@ -40,7 +42,7 @@ export default function CreateDashboardModal() { const newDashboardId = res.id; router.push(`/dashboard/${newDashboardId}`); - router.refresh(); + setDashboardId(newDashboardId); }; return ( diff --git a/src/lib/apis/dashboardsApi.ts b/src/lib/apis/dashboardsApi.ts index df6c3f1..631ff87 100644 --- a/src/lib/apis/dashboardsApi.ts +++ b/src/lib/apis/dashboardsApi.ts @@ -66,6 +66,24 @@ export async function postDashboard({ return res.json(); } +export async function deleteDashboard({ + token, + id, +}: { + token: string; + id: number; +}) { + await fetch(`${BASE_URL}/dashboards/${id}`, { + method: "DELETE", + headers: { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }, + }); + + return null; +} + export async function postInvitation({ token, id, From 2da0254fc6a7f00dbbeba270fe9ac7f52583f9b4 Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Mon, 31 Mar 2025 13:44:08 +0900 Subject: [PATCH 2/9] feat: Update dashboard title and color with real-time UI reflection --- .../edit/_components/BackButton.tsx | 6 +- .../edit/_components/DashboardEditSection.tsx | 85 +++++++++++++++++-- .../dashboard/[dashboardid]/edit/page.tsx | 2 +- .../mypage/_components/BackButton.tsx | 6 +- src/lib/apis/dashboardsApi.ts | 27 ++++++ 5 files changed, 114 insertions(+), 12 deletions(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/BackButton.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/BackButton.tsx index 8aad8ff..d7cb45d 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/BackButton.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/BackButton.tsx @@ -18,12 +18,12 @@ export default function BackButton() { > -
+

돌아가기 -

+

); diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx index 2938c06..a9cf4cc 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx @@ -1,20 +1,95 @@ "use client"; +import { useEffect, useState } from "react"; +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(null); + const [dashboardName, setDashboardName] = useState(""); + const [selectedColor, setSelectedColor] = useState(""); + const [isFormValid, setIsFormValid] = useState(false); + + 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) => { + setDashboardName(e.target.value); + }; + + const editDashboard = async () => { + await putDashboard({ + token, + title: dashboardName, + color: selectedColor, + id, + }); + + window.location.reload(); + }; + + if (!data) return; + return (
- 대시보드 이름 + {data.title}
-
+
- + +
- +
diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx index f69ce95..56adb5f 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/page.tsx @@ -15,7 +15,7 @@ export default function Page({ params }: { params: { dashboardid: string } }) {
- +
diff --git a/src/app/(after-login)/mypage/_components/BackButton.tsx b/src/app/(after-login)/mypage/_components/BackButton.tsx index 62eb7a8..599777a 100644 --- a/src/app/(after-login)/mypage/_components/BackButton.tsx +++ b/src/app/(after-login)/mypage/_components/BackButton.tsx @@ -18,12 +18,12 @@ export default function BackButton() { > -
+

돌아가기 -

+

); diff --git a/src/lib/apis/dashboardsApi.ts b/src/lib/apis/dashboardsApi.ts index 631ff87..4016606 100644 --- a/src/lib/apis/dashboardsApi.ts +++ b/src/lib/apis/dashboardsApi.ts @@ -66,6 +66,33 @@ export async function postDashboard({ return res.json(); } +export async function putDashboard({ + token, + title, + color, + id, +}: { + token: string; + title: string; + color: string; + id: number; +}) { + const res = await fetch(`${BASE_URL}/dashboards/${id}`, { + method: "PUT", + headers: { + Accept: "application/json", + Authorization: `Bearer ${token}`, + "Content-Type": "application/json", + }, + body: JSON.stringify({ + title, + color, + }), + }); + + return res.json(); +} + export async function deleteDashboard({ token, id, From 54a075add3b9adea138aa7cbb1833ba758f7e1c3 Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Mon, 31 Mar 2025 13:51:06 +0900 Subject: [PATCH 3/9] feat: Navigate to dashboard detail page after editing --- .../edit/_components/DashboardEditSection.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx index a9cf4cc..fad9af9 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx @@ -1,6 +1,8 @@ "use client"; import { useEffect, useState } from "react"; +import { useRouter } from "next/navigation"; +import { useDashboardStore } from "@/lib/store/useDashboardStore"; import { DashboardDetail } from "@/lib/types"; import { fetchDashboard, putDashboard } from "@/lib/apis/dashboardsApi"; import ColorPalette, { @@ -20,6 +22,8 @@ export default function DashboardEditSection({ const [dashboardName, setDashboardName] = useState(""); const [selectedColor, setSelectedColor] = useState(""); const [isFormValid, setIsFormValid] = useState(false); + const router = useRouter(); + const setDashboardId = useDashboardStore((state) => state.setDashboardId); useEffect(() => { const getData = async () => { @@ -59,7 +63,8 @@ export default function DashboardEditSection({ id, }); - window.location.reload(); + window.location.replace(`/dashboard/${id}`); + setDashboardId(String(id)); }; if (!data) return; From fcd265d6e78350de5527d6af73853330769fcc0a Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Mon, 31 Mar 2025 15:57:04 +0900 Subject: [PATCH 4/9] style: Complete responsive layout for InvitationSection --- .../edit/_components/DashboardEditSection.tsx | 2 +- .../edit/_components/InvitationCard.tsx | 18 +++++ .../edit/_components/InvitationSection.tsx | 68 ++++++++++++++----- .../edit/_components/InviteModalButton.tsx | 28 ++++++++ .../edit/_components/MemberSection.tsx | 2 +- src/components/layout/navbar/MemberList.tsx | 2 +- src/lib/apis/dashboardsApi.ts | 25 +++++++ 7 files changed, 125 insertions(+), 20 deletions(-) create mode 100644 src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx create mode 100644 src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InviteModalButton.tsx diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx index fad9af9..867f767 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx @@ -72,7 +72,7 @@ export default function DashboardEditSection({ return (
-
+
{data.title}
diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx new file mode 100644 index 0000000..530f400 --- /dev/null +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx @@ -0,0 +1,18 @@ +import Button from "@/components/common/button/Button"; +import { Invitation } from "@/lib/types"; + +export default function InvitationCard({ id, invitee }: Invitation) { + return ( +
+
+
{invitee.email}
+ +
+
+ ); +} diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx index 7b62e78..b0354b3 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx +++ b/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,26 +16,53 @@ export default function InvitationSection({ id: number; token: string; }) { - // id 값과 token 값 사용하고 나서는 지워도 되는 코드들 - console.log(id); - console.log(token); + const [items, setItems] = useState([]); + const [page, setPage] = useState(1); + const [totalCount, setTotalCount] = useState(0); + const totalPage = Math.floor(totalCount / PAGE_SIZE); + + const handleLoad = async () => { + const { invitations, totalCount } = await fetchInvitationList({ + token, + id, + page, + size: PAGE_SIZE, + }); + setItems(invitations); + setTotalCount(totalCount); + }; + + useEffect(() => { + handleLoad(); + }, []); return ( -
-
-

- 초대 내역 -

-
- 1 페이지 중 1 - { - console.log(`구성원 페이지 ${page}로 변경`); - }} - /> +
+
+
+

+ 초대 내역 +

+

이메일

+
+
+

+ {totalPage} 페이지 중 {page} +

+ {}} + /> +
+ +
+
+
+ {items.map((item) => ( + + ))}
); diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InviteModalButton.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InviteModalButton.tsx new file mode 100644 index 0000000..f60357f --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/MemberSection.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/MemberSection.tsx index f99d6b3..0bc695e 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/MemberSection.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/MemberSection.tsx @@ -16,7 +16,7 @@ export default function MemberSection({ return (
-

+

구성원

diff --git a/src/components/layout/navbar/MemberList.tsx b/src/components/layout/navbar/MemberList.tsx index c2f7091..8b5eec5 100644 --- a/src/components/layout/navbar/MemberList.tsx +++ b/src/components/layout/navbar/MemberList.tsx @@ -32,7 +32,7 @@ export default function MemberList({ data }: MemberListProps) {
))} {hiddenCount > 0 && ( -
+
+{hiddenCount}
)} diff --git a/src/lib/apis/dashboardsApi.ts b/src/lib/apis/dashboardsApi.ts index 4016606..6a7604b 100644 --- a/src/lib/apis/dashboardsApi.ts +++ b/src/lib/apis/dashboardsApi.ts @@ -134,3 +134,28 @@ export async function postInvitation({ return res.json(); } + +export async function fetchInvitationList({ + token, + id, + page, + size, +}: { + token: string; + id: number; + page: number; + size: number; +}) { + const res = await fetch( + `${BASE_URL}/dashboards/${id}/invitations?page=${page}&size=${size}`, + { + headers: { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }, + cache: "no-store", + } + ); + + return res.json(); +} From 1543c01326106b188f14ef31aa024f3c91be5346 Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Mon, 31 Mar 2025 16:06:42 +0900 Subject: [PATCH 5/9] feat: Add pagination to invitation list --- .../edit/_components/InvitationSection.tsx | 23 +++++++++++++++---- .../pagenation-button/PagenationButton.tsx | 22 +++++------------- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx index b0354b3..05091e1 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationSection.tsx @@ -19,7 +19,7 @@ export default function InvitationSection({ const [items, setItems] = useState([]); const [page, setPage] = useState(1); const [totalCount, setTotalCount] = useState(0); - const totalPage = Math.floor(totalCount / PAGE_SIZE); + const totalPage = Math.ceil(totalCount / PAGE_SIZE); const handleLoad = async () => { const { invitations, totalCount } = await fetchInvitationList({ @@ -34,7 +34,19 @@ export default function InvitationSection({ useEffect(() => { handleLoad(); - }, []); + }, [page]); + + const handlePrevPage = () => { + if (page > 1) { + setPage((prev) => prev - 1); + } + }; + + const handleNextPage = () => { + if (page < totalPage) { + setPage((prev) => prev + 1); + } + }; return (
@@ -51,9 +63,10 @@ export default function InvitationSection({ {totalPage} 페이지 중 {page}

{}} + currentPage={page} + totalPages={totalPage} + onPrevClick={handlePrevPage} + onNextClick={handleNextPage} />
diff --git a/src/components/common/pagenation-button/PagenationButton.tsx b/src/components/common/pagenation-button/PagenationButton.tsx index 673679d..655e672 100644 --- a/src/components/common/pagenation-button/PagenationButton.tsx +++ b/src/components/common/pagenation-button/PagenationButton.tsx @@ -59,38 +59,28 @@ const PaginationButton = ({ interface PaginationProps { currentPage: number; totalPages: number; - onPageChange: (page: number) => void; + onPrevClick: () => void; + onNextClick: () => void; className?: string; } export default function Pagination({ currentPage, totalPages, - onPageChange, + onPrevClick, + onNextClick, className = "", }: PaginationProps) { - const handlePrevClick = () => { - if (currentPage > 1) { - onPageChange(currentPage - 1); - } - }; - - const handleNextClick = () => { - if (currentPage < totalPages) { - onPageChange(currentPage + 1); - } - }; - return (
= totalPages} />
From 49e1c0be296184c6a94b8401ce02aee3d895dffb Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Mon, 31 Mar 2025 16:20:31 +0900 Subject: [PATCH 6/9] feat: Implement invitation cancellation with API integration --- .../edit/_components/InvitationCard.tsx | 28 +++++++++++- .../edit/_components/InvitationSection.tsx | 2 +- src/lib/apis/dashboardsApi.ts | 45 ++++++++++++++----- 3 files changed, 61 insertions(+), 14 deletions(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx index 530f400..0d30e3c 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx @@ -1,13 +1,37 @@ -import Button from "@/components/common/button/Button"; +import { useRouter } from "next/navigation"; 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 router = useRouter(); + + const handleDeleteClick = async () => { + await deleteInvitation({ + token, + dashboardId: dashboard.id, + invitationId: id, + }); + + window.location.reload(); + }; -export default function InvitationCard({ id, invitee }: Invitation) { return (
{invitee.email}
{items.map((item) => ( - + ))}
diff --git a/src/lib/apis/dashboardsApi.ts b/src/lib/apis/dashboardsApi.ts index 6a7604b..b18f5d0 100644 --- a/src/lib/apis/dashboardsApi.ts +++ b/src/lib/apis/dashboardsApi.ts @@ -111,6 +111,31 @@ export async function deleteDashboard({ return null; } +export async function fetchInvitationList({ + token, + id, + page, + size, +}: { + token: string; + id: number; + page: number; + size: number; +}) { + const res = await fetch( + `${BASE_URL}/dashboards/${id}/invitations?page=${page}&size=${size}`, + { + headers: { + Accept: "application/json", + Authorization: `Bearer ${token}`, + }, + cache: "no-store", + } + ); + + return res.json(); +} + export async function postInvitation({ token, id, @@ -135,27 +160,25 @@ export async function postInvitation({ return res.json(); } -export async function fetchInvitationList({ +export async function deleteInvitation({ token, - id, - page, - size, + dashboardId, + invitationId, }: { token: string; - id: number; - page: number; - size: number; + dashboardId: number; + invitationId: number; }) { - const res = await fetch( - `${BASE_URL}/dashboards/${id}/invitations?page=${page}&size=${size}`, + await fetch( + `${BASE_URL}/dashboards/${dashboardId}/invitations/${invitationId}`, { + method: "DELETE", headers: { Accept: "application/json", Authorization: `Bearer ${token}`, }, - cache: "no-store", } ); - return res.json(); + return null; } From 35a3f8f8068a4c0637883461b5ba4bd21800d65e Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Mon, 31 Mar 2025 16:25:46 +0900 Subject: [PATCH 7/9] chore: Remove unused router instance --- .../[dashboardid]/edit/_components/DashboardEditSection.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx index 867f767..40d5547 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/DashboardEditSection.tsx @@ -1,7 +1,6 @@ "use client"; import { useEffect, useState } from "react"; -import { useRouter } from "next/navigation"; import { useDashboardStore } from "@/lib/store/useDashboardStore"; import { DashboardDetail } from "@/lib/types"; import { fetchDashboard, putDashboard } from "@/lib/apis/dashboardsApi"; @@ -22,7 +21,6 @@ export default function DashboardEditSection({ const [dashboardName, setDashboardName] = useState(""); const [selectedColor, setSelectedColor] = useState(""); const [isFormValid, setIsFormValid] = useState(false); - const router = useRouter(); const setDashboardId = useDashboardStore((state) => state.setDashboardId); useEffect(() => { From b57df7f99a53d88b6a0e046d9e6ef3aaf96535aa Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Mon, 31 Mar 2025 16:27:19 +0900 Subject: [PATCH 8/9] chore: Remove unused router instance --- .../[dashboardid]/edit/_components/InvitationCard.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx index 0d30e3c..b61963a 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx +++ b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/InvitationCard.tsx @@ -1,4 +1,3 @@ -import { useRouter } from "next/navigation"; import { Invitation } from "@/lib/types"; import { deleteInvitation } from "@/lib/apis/dashboardsApi"; import Button from "@/components/common/button/Button"; @@ -13,8 +12,6 @@ export default function InvitationCard({ invitee, token, }: InvitationCardProps) { - const router = useRouter(); - const handleDeleteClick = async () => { await deleteInvitation({ token, From f00a54f99182b2816c4a2c6e33b272ced03a3ee2 Mon Sep 17 00:00:00 2001 From: hyeonjiroh Date: Mon, 31 Mar 2025 16:28:58 +0900 Subject: [PATCH 9/9] chore: Remove unused code --- .../[dashboardid]/edit/_components/MemberSection.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/MemberSection.tsx b/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/MemberSection.tsx index 0bc695e..cc720e1 100644 --- a/src/app/(after-login)/dashboard/[dashboardid]/edit/_components/MemberSection.tsx +++ b/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, @@ -21,13 +19,6 @@ export default function MemberSection({
1 페이지 중 1 - { - console.log(`구성원 페이지 ${page}로 변경`); - }} - />