From 1cf7fee4894cac643b08cff1ec43d9a3ac6470ba Mon Sep 17 00:00:00 2001 From: Heesu Date: Wed, 17 Sep 2025 13:56:51 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Refactor:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=82=B4=20=EA=B5=AC=EC=84=B1=EC=9B=90=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EB=B0=8F=20=EC=B4=88=EB=8C=80=20=EB=82=B4=EC=97=AD?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(protected)/dashboard/[id]/edit/page.tsx | 136 +++--------------- .../common/dashboard/edit/InviteList.tsx | 90 ++++++++++++ .../common/dashboard/edit/MembersList.tsx | 85 +++++++++++ 3 files changed, 193 insertions(+), 118 deletions(-) create mode 100644 src/components/common/dashboard/edit/InviteList.tsx create mode 100644 src/components/common/dashboard/edit/MembersList.tsx diff --git a/src/app/(protected)/dashboard/[id]/edit/page.tsx b/src/app/(protected)/dashboard/[id]/edit/page.tsx index 6fe326f..1a5134d 100644 --- a/src/app/(protected)/dashboard/[id]/edit/page.tsx +++ b/src/app/(protected)/dashboard/[id]/edit/page.tsx @@ -9,23 +9,22 @@ import Input from "@/components/form/Input"; import Label from "@/components/form/Label"; import InviteModal from "@/components/modal/InviteModal"; import MyButton from "@/components/common/Button"; -import Pagination from "@/components/common/Pagination"; import { getDashboardById, updateDashboard, deleteDashboard, getDashboardInvitations, cancelDashboardInvitation, - // inviteToDashboard, } from "@/features/dashboard/api"; import { getMembers, deleteMember } from "@/features/members/api"; -import { useQueryClient } from "@tanstack/react-query"; + +import InviteList from "@/components/common/dashboard/edit/InviteList"; +import MembersList from "@/components/common/dashboard/edit/MembersList"; export default function DashboardIdEdit() { const { id } = useParams<{ id: string }>(); const router = useRouter(); const dashboardId = Number(id); - const queryClient = useQueryClient(); const [inviteOpen, setInviteOpen] = useState(false); @@ -218,122 +217,23 @@ export default function DashboardIdEdit() { {/* 구성원 리스트 */} -
-
-

구성원

-
- - {totalMemberPages} 페이지 중 {memberPage} - -
- -
-
-
- {/* 라벨 */} -
- -
- -
+ {/* 초대 내역 */} -
-
-

초대 내역

-
- - {totalInvitePages} 페이지 중 {invitePage} - -
- -
- setInviteOpen(true)} - color="buttonBlue" - className="tablet:flex hidden h-8 w-[105px] items-center justify-center gap-2 rounded-md text-sm" - > - 초대하기 - 초대하기 - -
-
- {/* 모바일 전용 라벨*/} -
- - setInviteOpen(true)} - color="buttonBlue" - className="flex h-[26px] w-[86px] items-center justify-center gap-2 rounded-md text-xs font-medium" - > - 초대하기 - 초대하기 - -
- - {/* tablet+ 전용 라벨 */} -
- -
-
    - {invites.map((i, idx) => ( -
  • - {i.email} - handleCancelInvitation(i.id)} - color="buttonBasic" - className="tablet:w-21 tablet:text-sm text-brand-blue-500 h-8 w-13 rounded-md px-3 py-1 text-xs font-medium" - > - 취소 - -
    • - ))} -
-
+ setInviteOpen(true)} + /> {/* 삭제 버튼 */} void; + onCancel: (inviteId: number) => void; + onOpenInviteModal: () => void; +} + +export default function InviteList({ + invites, + page, + totalPages, + setPage, + onCancel, + onOpenInviteModal, +}: InviteListProps) { + return ( +
+
+

초대 내역

+
+ + {Math.max(totalPages, 1)} 페이지 중 {page} + +
+ +
+ + 초대하기 + 초대하기 + +
+
+ + {/* 모바일 전용 라벨 */} +
+ + + 초대하기 + 초대하기 + +
+ + {/* tablet+ 전용 라벨 */} +
+ +
+ +
    + {invites.map((i, idx) => ( +
  • + {i.email} + onCancel(i.id)} + color="buttonBasic" + className="tablet:w-21 tablet:text-sm text-brand-blue-500 h-8 w-13 rounded-md px-3 py-1 text-xs font-medium" + > + 취소 + +
    • + ))} +
+
+ ); +} diff --git a/src/components/common/dashboard/edit/MembersList.tsx b/src/components/common/dashboard/edit/MembersList.tsx new file mode 100644 index 0000000..a0dc8e5 --- /dev/null +++ b/src/components/common/dashboard/edit/MembersList.tsx @@ -0,0 +1,85 @@ +"use client"; + +import MyButton from "@/components/common/Button"; +import Label from "@/components/form/Label"; +import Pagination from "@/components/common/Pagination"; + +type Member = { + id: number; + userId: number; + email: string; + nickname: string; + profileImageUrl?: string; + isOwner?: boolean; +}; + +interface MembersListProps { + members: Member[]; + page: number; + totalPages: number; + setPage: (page: number) => void; + onDeleteMember: (memberId: number) => void; +} + +export default function MembersList({ + members, + page, + totalPages, + setPage, + onDeleteMember, +}: MembersListProps) { + return ( +
+
+

구성원

+
+ + {totalPages} 페이지 중 {page} + +
+ +
+
+
+ + {/* 라벨 */} +
+ +
+ +
    + {members.map((m, idx) => { + const isOwner = m?.isOwner; + + return ( +
  • +
    + {m.nickname} + {m.nickname} +
    + + {!isOwner && ( + onDeleteMember(m.id)} + color="buttonBasic" + className="tablet:w-21 tablet:text-sm text-brand-blue-500 h-8 w-13 rounded-md px-3 py-1 text-xs font-medium" + > + 삭제 + + )} +
    • + ); + })} +
+
+ ); +} From 569abde99647f6035cab82b34baba18b0208d83c Mon Sep 17 00:00:00 2001 From: Heesu Date: Wed, 17 Sep 2025 14:00:23 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20develop=20merge=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EA=B3=BC=EC=A0=95=EC=97=90=EC=84=9C=20=EB=B0=9C=EC=83=9D?= =?UTF-8?q?=ED=95=9C=20conflict=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(protected)/dashboard/[id]/edit/page.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/(protected)/dashboard/[id]/edit/page.tsx b/src/app/(protected)/dashboard/[id]/edit/page.tsx index 21acbb9..3f9b6bf 100644 --- a/src/app/(protected)/dashboard/[id]/edit/page.tsx +++ b/src/app/(protected)/dashboard/[id]/edit/page.tsx @@ -9,6 +9,7 @@ import Input from "@/components/form/Input"; import Label from "@/components/form/Label"; import InviteModal from "@/components/modal/InviteModal"; import MyButton from "@/components/common/Button"; +import { useQueryClient } from "@tanstack/react-query"; import { getDashboardById, updateDashboard, @@ -25,6 +26,7 @@ export default function DashboardIdEdit() { const { id } = useParams<{ id: string }>(); const router = useRouter(); const dashboardId = Number(id); + const queryClient = useQueryClient(); const [inviteOpen, setInviteOpen] = useState(false);