From 7f73441afdbf76d1708d2b50eb72de7ba4a310b7 Mon Sep 17 00:00:00 2001 From: un0211 Date: Fri, 28 Jun 2024 16:06:12 +0900 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=8E=A8=20design(#23):=20=EC=B4=88?= =?UTF-8?q?=EB=8C=80=EB=82=B4=EC=97=AD=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B0=98=EC=9D=91=ED=98=95=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../icons/{plusbox.svg => plusbox-white.svg} | 0 src/components/Button/NavButton.tsx | 22 ++++++++++ src/components/Pagination/index.tsx | 17 ++++++++ .../dashboard/edit/InvitedMemberItem.tsx | 14 +++++++ .../dashboard/edit/InvitedMembersSection.tsx | 41 +++++++++++++++++++ src/pages/dashboard/[id]/edit.tsx | 15 +++++-- src/styles/globals.css | 4 ++ 7 files changed, 109 insertions(+), 4 deletions(-) rename public/icons/{plusbox.svg => plusbox-white.svg} (100%) create mode 100644 src/components/Button/NavButton.tsx create mode 100644 src/components/Pagination/index.tsx create mode 100644 src/containers/dashboard/edit/InvitedMemberItem.tsx create mode 100644 src/containers/dashboard/edit/InvitedMembersSection.tsx diff --git a/public/icons/plusbox.svg b/public/icons/plusbox-white.svg similarity index 100% rename from public/icons/plusbox.svg rename to public/icons/plusbox-white.svg diff --git a/src/components/Button/NavButton.tsx b/src/components/Button/NavButton.tsx new file mode 100644 index 00000000..1f429a28 --- /dev/null +++ b/src/components/Button/NavButton.tsx @@ -0,0 +1,22 @@ +import Image from 'next/image'; + +interface NavButtonProps { + direction: 'left' | 'right'; + onClick: () => void; + isDisable?: boolean; +} + +export default function NavButton({ direction, onClick, isDisable }: NavButtonProps) { + return ( + + ); +} diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx new file mode 100644 index 00000000..0fea64d2 --- /dev/null +++ b/src/components/Pagination/index.tsx @@ -0,0 +1,17 @@ +import NavButton from '../Button/NavButton'; + +export default function Pagination() { + // TODO: 기능 구현 + const handleLeftClick = () => {}; + const handleRightClick = () => {}; + + return ( +
+ {/* NOTE: 민재님꺼 pt-3 있었음 */} + 1 페이지 중 1 + + + +
+ ); +} diff --git a/src/containers/dashboard/edit/InvitedMemberItem.tsx b/src/containers/dashboard/edit/InvitedMemberItem.tsx new file mode 100644 index 00000000..0068428f --- /dev/null +++ b/src/containers/dashboard/edit/InvitedMemberItem.tsx @@ -0,0 +1,14 @@ +import CancelButton from '@/components/Button/CancelButton'; + +interface InvitedMemberProps { + email: string; +} + +export default function InvitedMemberItem({ email }: InvitedMemberProps) { + return ( +
  • + {email} + 취소 +
    • + ); +} diff --git a/src/containers/dashboard/edit/InvitedMembersSection.tsx b/src/containers/dashboard/edit/InvitedMembersSection.tsx new file mode 100644 index 00000000..e7df8429 --- /dev/null +++ b/src/containers/dashboard/edit/InvitedMembersSection.tsx @@ -0,0 +1,41 @@ +import Image from 'next/image'; + +import InvitedMemberItem from './InvitedMemberItem'; + +import Pagination from '@/components/Pagination'; + +// TODO: 기능구현 (실제 정보 로드) +const testData = ['1', '2', '3', '4', '5']; + +export default function InvitedMembersSection() { + const lastItem = testData.at(-1); + + return ( +
    +
    +

    초대 내역

    + +
    +
    +

    이메일

    +
      + {testData.slice(0, testData.length - 1).map((val) => ( + <> + +
      + + ))} + {lastItem && } +
    +
    +
    + ); +} diff --git a/src/pages/dashboard/[id]/edit.tsx b/src/pages/dashboard/[id]/edit.tsx index 569f7dc2..c7b08986 100644 --- a/src/pages/dashboard/[id]/edit.tsx +++ b/src/pages/dashboard/[id]/edit.tsx @@ -1,5 +1,12 @@ -const DashboardEditPage: React.FC = () => { - return
    DashboardEdit
    ; -}; +import InvitedMembersSection from '@/containers/dashboard/edit/InvitedMembersSection'; -export default DashboardEditPage; +export default function DashboardEditPage() { + return ( +
    + {/* 돌아가기 */} + {/* 대시보드 수정 */} + {/* 구성원 목록 */} + +
    + ); +} diff --git a/src/styles/globals.css b/src/styles/globals.css index 3b2218a2..cbc7e2a9 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -25,6 +25,10 @@ @apply align-center bg-gray-f5 rounded-md hover:bg-gray-ee active:bg-gray-d9; } + .section { + @apply w-full max-w-[620px] rounded-lg bg-white px-5 md:px-7; + } + .section-title { @apply text-xl font-bold md:text-2xl; } From 89c15105b182b8291f2271ff5e0eed612c2148ef Mon Sep 17 00:00:00 2001 From: un0211 Date: Fri, 28 Jun 2024 18:11:21 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=E2=9C=A8=20feat(#23):=20=EC=B4=88=EB=8C=80?= =?UTF-8?q?=EB=82=B4=EC=97=AD=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20(=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=82=B4=EC=9D=B4=EC=85=98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pagination/index.tsx | 19 ++++-- .../dashboard/edit/InvitedMemberList.tsx | 23 +++++++ .../dashboard/edit/InvitedMembersSection.tsx | 68 ++++++++++++++----- src/services/getService.ts | 9 +++ src/styles/globals.css | 4 ++ src/types/Invitation.interface.ts | 5 ++ 6 files changed, 103 insertions(+), 25 deletions(-) create mode 100644 src/containers/dashboard/edit/InvitedMemberList.tsx diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx index 0fea64d2..40be9c02 100644 --- a/src/components/Pagination/index.tsx +++ b/src/components/Pagination/index.tsx @@ -1,17 +1,22 @@ import NavButton from '../Button/NavButton'; -export default function Pagination() { - // TODO: 기능 구현 - const handleLeftClick = () => {}; - const handleRightClick = () => {}; +interface PaginationProps { + currentChunk: number; + totalPage: number; + onNextClick: () => void; + onPrevClick: () => void; +} +export default function Pagination({ currentChunk, totalPage, onNextClick, onPrevClick }: PaginationProps) { return (
    {/* NOTE: 민재님꺼 pt-3 있었음 */} - 1 페이지 중 1 + + {totalPage} 페이지 중 {currentChunk} + - - + onPrevClick()} isDisable={currentChunk === 1} /> + onNextClick()} isDisable={currentChunk === totalPage} />
    ); } diff --git a/src/containers/dashboard/edit/InvitedMemberList.tsx b/src/containers/dashboard/edit/InvitedMemberList.tsx new file mode 100644 index 00000000..8959fc31 --- /dev/null +++ b/src/containers/dashboard/edit/InvitedMemberList.tsx @@ -0,0 +1,23 @@ +import InvitedMemberItem from './InvitedMemberItem'; + +import { Invitation } from '@/types/Invitation.interface'; + +interface Props { + invitations: Invitation[]; +} + +export default function InvitedMemberList({ invitations }: Props) { + const lastItem = invitations.at(-1); + + return ( +
      + {invitations.slice(0, invitations.length - 1).map(({ invitee }) => ( + <> + +
      + + ))} + {lastItem && } +
    + ); +} diff --git a/src/containers/dashboard/edit/InvitedMembersSection.tsx b/src/containers/dashboard/edit/InvitedMembersSection.tsx index e7df8429..0f27a636 100644 --- a/src/containers/dashboard/edit/InvitedMembersSection.tsx +++ b/src/containers/dashboard/edit/InvitedMembersSection.tsx @@ -1,22 +1,56 @@ import Image from 'next/image'; +import { useRouter } from 'next/router'; +import { useState } from 'react'; -import InvitedMemberItem from './InvitedMemberItem'; +import InvitedMemberList from './InvitedMemberList'; import Pagination from '@/components/Pagination'; - -// TODO: 기능구현 (실제 정보 로드) -const testData = ['1', '2', '3', '4', '5']; +import useFetchData from '@/hooks/useFetchData'; +import { getDashboardInvitations } from '@/services/getService'; +import { DashboardInvitationsResponse } from '@/types/Invitation.interface'; export default function InvitedMembersSection() { - const lastItem = testData.at(-1); + const router = useRouter(); + const { id } = router.query; + const [currentChunk, setCurrentChunk] = useState(1); + + const { data, error } = useFetchData(['invitations', id, currentChunk], () => + getDashboardInvitations(Number(id), currentChunk, 5), + ); + const totalPage = data ? Math.max(1, Math.ceil(data.totalCount / 5)) : 1; + + const handleNext = () => { + if (currentChunk < totalPage) { + setCurrentChunk((prev) => prev + 1); + } + }; + const handlePrev = () => { + if (currentChunk > 1) { + setCurrentChunk((prev) => prev - 1); + } + }; + + const handleInviteClick = () => { + // TODO: 모달 연결 + alert('초대 모달'); + }; return ( -
    +

    초대 내역

    -

    이메일

    -
      - {testData.slice(0, testData.length - 1).map((val) => ( - <> - -
      - - ))} - {lastItem && } -
    +

    이메일

    + {data ? ( + + ) : error ? ( +

    {`에러가 발생했습니다. \n${error.message}`}

    + ) : ( +

    로딩중...

    + )}
    ); diff --git a/src/services/getService.ts b/src/services/getService.ts index 27df320f..7ac6a7c0 100644 --- a/src/services/getService.ts +++ b/src/services/getService.ts @@ -23,6 +23,15 @@ export const getMembersList = async ( return await instance.get(`/members?page=${page}&size=${size}&dashboardId=${dashboardId}`); }; +// 대시보드 초대 목록 조회 +export const getDashboardInvitations = async ( + dashboardId: number, + page: number = 1, // 기본값 1 + size: number = 5, // 기본값 5 +) => { + return await instance.get(`/dashboards/${dashboardId}/invitations?page=${page}&size=${size}`); +}; + // 내가 받은 초대 목록 조회 export const getInvitationsList = async (size: number = 10, cursorId?: number, title?: string) => { const params = new URLSearchParams(); diff --git a/src/styles/globals.css b/src/styles/globals.css index cbc7e2a9..80041e54 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -46,4 +46,8 @@ .align-center { @apply flex items-center justify-center; } + + .gray-border { + @apply border border-gray-d9; + } } diff --git a/src/types/Invitation.interface.ts b/src/types/Invitation.interface.ts index c55a9040..e3a3bb53 100644 --- a/src/types/Invitation.interface.ts +++ b/src/types/Invitation.interface.ts @@ -3,6 +3,11 @@ export interface InvitationsResponse { cursorId: number; } +export interface DashboardInvitationsResponse { + invitations: Invitation[]; + totalCount: number; +} + export interface Invitation { id: number; inviter: { From 0901a228d90e4c390ac4af82fe655636c37370a1 Mon Sep 17 00:00:00 2001 From: un0211 Date: Fri, 28 Jun 2024 19:14:01 +0900 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=9B=A0=20=20fix(#23):=20ol=EC=9D=98?= =?UTF-8?q?=20=EB=AA=A8=EB=93=A0=20=EC=9E=90=EC=8B=9D=20=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=EC=97=90=20=EA=B3=A0=EC=9C=A0=ED=95=9C=20key=20=EB=B6=80?= =?UTF-8?q?=EC=97=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/edit/InvitedMemberItem.tsx | 4 ++-- .../dashboard/edit/InvitedMemberList.tsx | 14 +++++++++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/containers/dashboard/edit/InvitedMemberItem.tsx b/src/containers/dashboard/edit/InvitedMemberItem.tsx index 0068428f..3f964f11 100644 --- a/src/containers/dashboard/edit/InvitedMemberItem.tsx +++ b/src/containers/dashboard/edit/InvitedMemberItem.tsx @@ -6,9 +6,9 @@ interface InvitedMemberProps { export default function InvitedMemberItem({ email }: InvitedMemberProps) { return ( -
  • +
    {email} 취소 -
    • + ); } diff --git a/src/containers/dashboard/edit/InvitedMemberList.tsx b/src/containers/dashboard/edit/InvitedMemberList.tsx index 8959fc31..295df41c 100644 --- a/src/containers/dashboard/edit/InvitedMemberList.tsx +++ b/src/containers/dashboard/edit/InvitedMemberList.tsx @@ -11,13 +11,17 @@ export default function InvitedMemberList({ invitations }: Props) { return (
      - {invitations.slice(0, invitations.length - 1).map(({ invitee }) => ( - <> - + {invitations.slice(0, invitations.length - 1).map(({ id, invitee }) => ( +
    1. +
      - +
      2. ))} - {lastItem && } + {lastItem && ( +
    2. + +
      3. + )}
    ); } From 8435dc607db96e33fcfc4f7bd8f3dd7a17e25e06 Mon Sep 17 00:00:00 2001 From: un0211 Date: Sat, 29 Jun 2024 02:11:50 +0900 Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8=20feat(#23):=20=EC=B4=88=EB=8C=80?= =?UTF-8?q?=20=EC=B7=A8=EC=86=8C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/edit/InvitedMemberItem.tsx | 7 ++++-- .../dashboard/edit/InvitedMemberList.tsx | 7 +++--- .../dashboard/edit/InvitedMembersSection.tsx | 23 ++++++++++++++++++- src/hooks/useDeleteInvitation.ts | 19 +++++++++++++++ src/services/deleteService.ts | 8 +++++++ .../delete/CancelInvitation.interface.ts | 4 ++++ 6 files changed, 62 insertions(+), 6 deletions(-) create mode 100644 src/hooks/useDeleteInvitation.ts create mode 100644 src/services/deleteService.ts create mode 100644 src/types/delete/CancelInvitation.interface.ts diff --git a/src/containers/dashboard/edit/InvitedMemberItem.tsx b/src/containers/dashboard/edit/InvitedMemberItem.tsx index 3f964f11..d364b917 100644 --- a/src/containers/dashboard/edit/InvitedMemberItem.tsx +++ b/src/containers/dashboard/edit/InvitedMemberItem.tsx @@ -2,13 +2,16 @@ import CancelButton from '@/components/Button/CancelButton'; interface InvitedMemberProps { email: string; + onCancelClick: () => void; } -export default function InvitedMemberItem({ email }: InvitedMemberProps) { +export default function InvitedMemberItem({ email, onCancelClick }: InvitedMemberProps) { return (
    {email} - 취소 + + 취소 +
    ); } diff --git a/src/containers/dashboard/edit/InvitedMemberList.tsx b/src/containers/dashboard/edit/InvitedMemberList.tsx index 295df41c..18b29b22 100644 --- a/src/containers/dashboard/edit/InvitedMemberList.tsx +++ b/src/containers/dashboard/edit/InvitedMemberList.tsx @@ -4,22 +4,23 @@ import { Invitation } from '@/types/Invitation.interface'; interface Props { invitations: Invitation[]; + onCancelClick: (id: number) => void; } -export default function InvitedMemberList({ invitations }: Props) { +export default function InvitedMemberList({ invitations, onCancelClick }: Props) { const lastItem = invitations.at(-1); return (
      {invitations.slice(0, invitations.length - 1).map(({ id, invitee }) => (
    1. - + onCancelClick(id)} />
      2. ))} {lastItem && (
    2. - + onCancelClick(lastItem.id)} />
      3. )}
    diff --git a/src/containers/dashboard/edit/InvitedMembersSection.tsx b/src/containers/dashboard/edit/InvitedMembersSection.tsx index 0f27a636..f81d1c3f 100644 --- a/src/containers/dashboard/edit/InvitedMembersSection.tsx +++ b/src/containers/dashboard/edit/InvitedMembersSection.tsx @@ -1,3 +1,4 @@ +import { useQueryClient } from '@tanstack/react-query'; import Image from 'next/image'; import { useRouter } from 'next/router'; import { useState } from 'react'; @@ -5,6 +6,7 @@ import { useState } from 'react'; import InvitedMemberList from './InvitedMemberList'; import Pagination from '@/components/Pagination'; +import { useDeleteInvitation } from '@/hooks/useDeleteInvitation'; import useFetchData from '@/hooks/useFetchData'; import { getDashboardInvitations } from '@/services/getService'; import { DashboardInvitationsResponse } from '@/types/Invitation.interface'; @@ -14,6 +16,16 @@ export default function InvitedMembersSection() { const { id } = router.query; const [currentChunk, setCurrentChunk] = useState(1); + const handleSuccess = () => { + if (data?.invitations.length === 1 && currentChunk > 1) { + setCurrentChunk((prev) => prev - 1); + } + queryClient.invalidateQueries({ queryKey: ['invitations', id] }); + }; + + const { mutate } = useDeleteInvitation(handleSuccess); + const queryClient = useQueryClient(); + const { data, error } = useFetchData(['invitations', id, currentChunk], () => getDashboardInvitations(Number(id), currentChunk, 5), ); @@ -35,6 +47,15 @@ export default function InvitedMembersSection() { alert('초대 모달'); }; + const handleCancelInvitation = (invitationId: number) => { + const handleDelete = async () => { + if (!id) return; + await mutate({ dashboardId: String(id), invitationId }); + }; + + handleDelete(); + }; + return (
    @@ -61,7 +82,7 @@ export default function InvitedMembersSection() {

    이메일

    {data ? ( - + ) : error ? (

    {`에러가 발생했습니다. \n${error.message}`}

    ) : ( diff --git a/src/hooks/useDeleteInvitation.ts b/src/hooks/useDeleteInvitation.ts new file mode 100644 index 00000000..74b132e4 --- /dev/null +++ b/src/hooks/useDeleteInvitation.ts @@ -0,0 +1,19 @@ +import { useMutation } from '@tanstack/react-query'; +import { AxiosError } from 'axios'; + +import { deleteInvitation } from '@/services/deleteService'; +import { CancelInvitationInput } from '@/types/delete/CancelInvitation.interface'; + +export const useDeleteInvitation = (handleSuccess: () => void) => { + return useMutation({ + mutationFn: deleteInvitation, + onSuccess: () => { + handleSuccess(); + }, + onError: (error: unknown) => { + if (error instanceof AxiosError) { + alert(error.response?.data.message); + } + }, + }); +}; diff --git a/src/services/deleteService.ts b/src/services/deleteService.ts new file mode 100644 index 00000000..1ff81b70 --- /dev/null +++ b/src/services/deleteService.ts @@ -0,0 +1,8 @@ +import instance from './axios'; + +import { CancelInvitationInput } from '@/types/delete/CancelInvitation.interface'; + +// 대시보드 초대 취소 +export const deleteInvitation = async ({ dashboardId, invitationId }: CancelInvitationInput) => { + return await instance.delete(`/dashboards/${dashboardId}/invitations/${invitationId}`); +}; diff --git a/src/types/delete/CancelInvitation.interface.ts b/src/types/delete/CancelInvitation.interface.ts new file mode 100644 index 00000000..d9e9ba68 --- /dev/null +++ b/src/types/delete/CancelInvitation.interface.ts @@ -0,0 +1,4 @@ +export interface CancelInvitationInput { + invitationId: number; + dashboardId: string; +} From 3d7918abbde02ec9480224eab1585bcf4f183027 Mon Sep 17 00:00:00 2001 From: un0211 Date: Sat, 29 Jun 2024 13:04:48 +0900 Subject: [PATCH 5/7] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor(#23):=20us?= =?UTF-8?q?eDeleteData=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=8B=A4=EB=A5=B8?= =?UTF-8?q?=20delete=20=ED=95=A8=EC=88=98=EB=93=A4=EB=8F=84=20=ED=98=B8?= =?UTF-8?q?=EC=B6=9C=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/edit/InvitedMembersSection.tsx | 6 ++-- src/hooks/useDeleteData.ts | 36 +++++++++++++++++++ src/hooks/useDeleteInvitation.ts | 19 ---------- 3 files changed, 40 insertions(+), 21 deletions(-) create mode 100644 src/hooks/useDeleteData.ts delete mode 100644 src/hooks/useDeleteInvitation.ts diff --git a/src/containers/dashboard/edit/InvitedMembersSection.tsx b/src/containers/dashboard/edit/InvitedMembersSection.tsx index f81d1c3f..1e2ece65 100644 --- a/src/containers/dashboard/edit/InvitedMembersSection.tsx +++ b/src/containers/dashboard/edit/InvitedMembersSection.tsx @@ -6,9 +6,11 @@ import { useState } from 'react'; import InvitedMemberList from './InvitedMemberList'; import Pagination from '@/components/Pagination'; -import { useDeleteInvitation } from '@/hooks/useDeleteInvitation'; +import useDeleteData from '@/hooks/useDeleteData'; import useFetchData from '@/hooks/useFetchData'; +import { deleteInvitation } from '@/services/deleteService'; import { getDashboardInvitations } from '@/services/getService'; +import { CancelInvitationInput } from '@/types/delete/CancelInvitation.interface'; import { DashboardInvitationsResponse } from '@/types/Invitation.interface'; export default function InvitedMembersSection() { @@ -23,7 +25,7 @@ export default function InvitedMembersSection() { queryClient.invalidateQueries({ queryKey: ['invitations', id] }); }; - const { mutate } = useDeleteInvitation(handleSuccess); + const { mutate } = useDeleteData({ mutationFn: deleteInvitation, handleSuccess }); const queryClient = useQueryClient(); const { data, error } = useFetchData(['invitations', id, currentChunk], () => diff --git a/src/hooks/useDeleteData.ts b/src/hooks/useDeleteData.ts new file mode 100644 index 00000000..d34922d8 --- /dev/null +++ b/src/hooks/useDeleteData.ts @@ -0,0 +1,36 @@ +import { MutationFunction, useMutation } from '@tanstack/react-query'; +import { AxiosError } from 'axios'; + +interface UseDeleteProps { + mutationFn: MutationFunction; + handleSuccess?: () => void; + handleError?: () => void; +} + +const useDeleteData = ({ mutationFn, handleSuccess, handleError }: UseDeleteProps) => { + return useMutation({ + mutationFn, + onSuccess: () => { + // NOTE: success하고 나서 하고싶은 작업 있으면 prop으로 넘겨주세요. + if (handleSuccess) { + handleSuccess(); + } + }, + onError: (error: unknown) => { + // NOTE: 기본적인 에러처리 이외에 다른 처리를 하고 싶으면 prop으로 넘겨주세요. + if (handleError) { + handleError(); + } else { + // NOTE: 에러 처리는 일관되게 서버 메세지 있는 경우 보여주고, 아니면 로그 출력하도록 했습니다. + if (error instanceof AxiosError) { + alert(error.response?.data.message); + } else { + alert('실패했습니다.'); + console.log(error); + } + } + }, + }); +}; + +export default useDeleteData; diff --git a/src/hooks/useDeleteInvitation.ts b/src/hooks/useDeleteInvitation.ts deleted file mode 100644 index 74b132e4..00000000 --- a/src/hooks/useDeleteInvitation.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { useMutation } from '@tanstack/react-query'; -import { AxiosError } from 'axios'; - -import { deleteInvitation } from '@/services/deleteService'; -import { CancelInvitationInput } from '@/types/delete/CancelInvitation.interface'; - -export const useDeleteInvitation = (handleSuccess: () => void) => { - return useMutation({ - mutationFn: deleteInvitation, - onSuccess: () => { - handleSuccess(); - }, - onError: (error: unknown) => { - if (error instanceof AxiosError) { - alert(error.response?.data.message); - } - }, - }); -}; From f1bccbbeb7cfc64106647cdce392009554386b93 Mon Sep 17 00:00:00 2001 From: un0211 Date: Sat, 29 Jun 2024 13:49:05 +0900 Subject: [PATCH 6/7] =?UTF-8?q?=E2=9C=A8=20feat(#23):=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20=ED=85=8D=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=97=86=EC=9D=B4=20=EC=82=AC=EC=9A=A9=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=98=EA=B2=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pagination/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx index 40be9c02..79f611d0 100644 --- a/src/components/Pagination/index.tsx +++ b/src/components/Pagination/index.tsx @@ -3,15 +3,16 @@ import NavButton from '../Button/NavButton'; interface PaginationProps { currentChunk: number; totalPage: number; + hideText?: boolean; onNextClick: () => void; onPrevClick: () => void; } -export default function Pagination({ currentChunk, totalPage, onNextClick, onPrevClick }: PaginationProps) { +export default function Pagination({ currentChunk, totalPage, hideText, onNextClick, onPrevClick }: PaginationProps) { return (
    {/* NOTE: 민재님꺼 pt-3 있었음 */} - + {totalPage} 페이지 중 {currentChunk} From 75555988cb792191a57d05c8c7902ab8d6728289 Mon Sep 17 00:00:00 2001 From: un0211 Date: Sat, 29 Jun 2024 13:58:49 +0900 Subject: [PATCH 7/7] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor(#23):=20?= =?UTF-8?q?=EA=B8=B0=EC=A1=B4=20=EC=BD=94=EB=93=9C=EC=97=90=EC=84=9C?= =?UTF-8?q?=EB=8F=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pagination/index.tsx | 1 - .../mydashboard/DashboardList/index.tsx | 39 +++---------------- 2 files changed, 5 insertions(+), 35 deletions(-) diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx index 79f611d0..faac4993 100644 --- a/src/components/Pagination/index.tsx +++ b/src/components/Pagination/index.tsx @@ -11,7 +11,6 @@ interface PaginationProps { export default function Pagination({ currentChunk, totalPage, hideText, onNextClick, onPrevClick }: PaginationProps) { return (
    - {/* NOTE: 민재님꺼 pt-3 있었음 */} {totalPage} 페이지 중 {currentChunk} diff --git a/src/containers/mydashboard/DashboardList/index.tsx b/src/containers/mydashboard/DashboardList/index.tsx index a8b2fc53..d532a488 100644 --- a/src/containers/mydashboard/DashboardList/index.tsx +++ b/src/containers/mydashboard/DashboardList/index.tsx @@ -2,6 +2,7 @@ import Image from 'next/image'; import Link from 'next/link'; import { useState } from 'react'; +import Pagination from '@/components/Pagination'; import useFetchData from '@/hooks/useFetchData'; import { getDashboardsList } from '@/services/getService'; import { DashboardsResponse } from '@/types/Dashboard.interface'; @@ -25,24 +26,19 @@ export default function DashboardList() { } const handleNext = () => { - const nextChunk = currentChunk + 1; - - if (nextChunk <= totalPage) { + if (currentChunk < totalPage) { setCurrentChunk((prev) => prev + 1); } }; - const handlePrev = () => { - const prevChunk = currentChunk - 1; - - if (prevChunk >= 1) { + if (currentChunk > 1) { setCurrentChunk((prev) => prev - 1); } }; return (
    -
      +
      -
      - - {totalPage} 페이지 중 {currentChunk} - - - - -
      +
    ); } - -interface NavButtonProps { - direction: 'left' | 'right'; - onClick: () => void; - isDisable?: boolean; -} - -const NavButton = ({ direction, onClick, isDisable }: NavButtonProps) => ( - -);