From 5ee43bae66740f69c811b19152772548adaa2687 Mon Sep 17 00:00:00 2001 From: bbearcookie Date: Mon, 13 Nov 2023 18:54:53 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EB=A9=A4=EB=B2=84=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=ED=83=AD=20=ED=99=94=EB=A9=B4=20=EB=B0=8F=20?= =?UTF-8?q?=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20UI=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/RoomSetting/tabs/MemberTab.tsx | 5 -- src/RoomSetting/tabs/MemberTab/KickButton.tsx | 49 +++++++++++++++++++ src/RoomSetting/tabs/MemberTab/index.tsx | 41 ++++++++++++++++ src/RoomSetting/tabs/MemberTab/styles.ts | 5 ++ src/pages/RoomSettingPage.tsx | 2 +- 5 files changed, 96 insertions(+), 6 deletions(-) delete mode 100644 src/RoomSetting/tabs/MemberTab.tsx create mode 100644 src/RoomSetting/tabs/MemberTab/KickButton.tsx create mode 100644 src/RoomSetting/tabs/MemberTab/index.tsx create mode 100644 src/RoomSetting/tabs/MemberTab/styles.ts diff --git a/src/RoomSetting/tabs/MemberTab.tsx b/src/RoomSetting/tabs/MemberTab.tsx deleted file mode 100644 index 6c27be28..00000000 --- a/src/RoomSetting/tabs/MemberTab.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const MemberTab = () => { - return <>Member 탭입니다; -}; - -export default MemberTab; diff --git a/src/RoomSetting/tabs/MemberTab/KickButton.tsx b/src/RoomSetting/tabs/MemberTab/KickButton.tsx new file mode 100644 index 00000000..c073e5ec --- /dev/null +++ b/src/RoomSetting/tabs/MemberTab/KickButton.tsx @@ -0,0 +1,49 @@ +import { ModalHeadingStyle, descriptionStyle } from './styles'; +import { Input } from '@/shared/Input'; +import { BottomSheet, useBottomSheet } from '@/shared/BottomSheet'; + +interface KickButtonProps {} + +const KickButton = () => { + const { bottomSheetProps, open } = useBottomSheet(); + + return ( + <> + + +

+ + + 니나 잘해 + + 님을 + + + 추방하시겠어요? + +

+

바쁜 일이 있었던 걸지도 몰라요.

+
+ + +
+ + + + ); +}; + +export default KickButton; diff --git a/src/RoomSetting/tabs/MemberTab/index.tsx b/src/RoomSetting/tabs/MemberTab/index.tsx new file mode 100644 index 00000000..40d9e303 --- /dev/null +++ b/src/RoomSetting/tabs/MemberTab/index.tsx @@ -0,0 +1,41 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; +import { roomOptions } from '@/core/api/options'; +import KickButton from './KickButton'; +import { Avatar } from '@/shared/Avatar'; + +interface MemberTabProps { + roomId: string; +} + +const MemberTab = ({ roomId }: MemberTabProps) => { + const { data: room } = useSuspenseQuery({ + ...roomOptions.detail(roomId), + staleTime: Infinity + }); + + return ( +
+ {room.todayCertificateRank.map((member) => ( +
+ +
+ + +
+
+ ))} +
+ ); +}; + +export default MemberTab; diff --git a/src/RoomSetting/tabs/MemberTab/styles.ts b/src/RoomSetting/tabs/MemberTab/styles.ts new file mode 100644 index 00000000..9886506f --- /dev/null +++ b/src/RoomSetting/tabs/MemberTab/styles.ts @@ -0,0 +1,5 @@ +// 모달의 헤딩에 적용되는 스타일 +export const ModalHeadingStyle = 'flex flex-col text-xl mt-4 leading-7'; + +// 회색으로 간결한 설명을 적을 때 적용할 스타일 +export const descriptionStyle = 'pt-2 text-base text-dark-gray'; diff --git a/src/pages/RoomSettingPage.tsx b/src/pages/RoomSettingPage.tsx index ddaa4234..01a80d56 100644 --- a/src/pages/RoomSettingPage.tsx +++ b/src/pages/RoomSettingPage.tsx @@ -24,7 +24,7 @@ const RoomSettingPage = () => { - + From 618da5a769e06b455e9e69ff711ef07a378819e5 Mon Sep 17 00:00:00 2001 From: bbearcookie Date: Tue, 14 Nov 2023 00:48:41 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=EB=B0=A9=EC=9E=A5=20=EC=9C=84?= =?UTF-8?q?=EC=9E=84=20=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20UI=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabs/MemberTab/DelegationButton.tsx | 41 +++++++++++++++++++ src/RoomSetting/tabs/MemberTab/KickButton.tsx | 16 ++++---- src/RoomSetting/tabs/MemberTab/index.tsx | 5 +-- 3 files changed, 50 insertions(+), 12 deletions(-) create mode 100644 src/RoomSetting/tabs/MemberTab/DelegationButton.tsx diff --git a/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx b/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx new file mode 100644 index 00000000..0ddf9af9 --- /dev/null +++ b/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx @@ -0,0 +1,41 @@ +import { ModalHeadingStyle, descriptionStyle } from './styles'; +import { BottomSheet, useBottomSheet } from '@/shared/BottomSheet'; + +interface DelegationButtonProps {} + +const DelegationButton = () => { + const { bottomSheetProps, open } = useBottomSheet(); + + return ( + <> + + +

+ 니나 잘해 님에게 + + + 방장을 위임 + + 하시겠어요? + +

+

+ 위임 후, 관리 페이지에서 자동으로 나가집니다. +

+ + + + ); +}; + +export default DelegationButton; diff --git a/src/RoomSetting/tabs/MemberTab/KickButton.tsx b/src/RoomSetting/tabs/MemberTab/KickButton.tsx index c073e5ec..a0f07e4d 100644 --- a/src/RoomSetting/tabs/MemberTab/KickButton.tsx +++ b/src/RoomSetting/tabs/MemberTab/KickButton.tsx @@ -20,27 +20,25 @@ const KickButton = () => { className="p-6" >

- - - 니나 잘해 - - 님을 - + 니나 잘해 님을 추방하시겠어요?

바쁜 일이 있었던 걸지도 몰라요.

-
+
- +
- + ); diff --git a/src/RoomSetting/tabs/MemberTab/index.tsx b/src/RoomSetting/tabs/MemberTab/index.tsx index 40d9e303..eea5cea2 100644 --- a/src/RoomSetting/tabs/MemberTab/index.tsx +++ b/src/RoomSetting/tabs/MemberTab/index.tsx @@ -1,6 +1,7 @@ import { useSuspenseQuery } from '@tanstack/react-query'; import { roomOptions } from '@/core/api/options'; import KickButton from './KickButton'; +import DelegationButton from './DelegationButton'; import { Avatar } from '@/shared/Avatar'; interface MemberTabProps { @@ -28,9 +29,7 @@ const MemberTab = ({ roomId }: MemberTabProps) => { />
- +
))} From 3169b204d3f43af421b72230c069496e3a449e85 Mon Sep 17 00:00:00 2001 From: bbearcookie Date: Tue, 14 Nov 2023 00:54:45 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=EB=B0=94=ED=85=80=EC=8B=9C?= =?UTF-8?q?=ED=8A=B8=EC=97=90=20=EC=8B=A4=EC=A0=9C=20=EC=9C=A0=EC=A0=80=20?= =?UTF-8?q?=EB=8B=89=EB=84=A4=EC=9E=84=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/RoomSetting/tabs/MemberTab/DelegationButton.tsx | 9 ++++++--- src/RoomSetting/tabs/MemberTab/KickButton.tsx | 9 ++++++--- src/RoomSetting/tabs/MemberTab/index.tsx | 4 ++-- src/pages/RoomSettingPage.tsx | 4 +++- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx b/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx index 0ddf9af9..5639de4c 100644 --- a/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx +++ b/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx @@ -1,9 +1,12 @@ import { ModalHeadingStyle, descriptionStyle } from './styles'; import { BottomSheet, useBottomSheet } from '@/shared/BottomSheet'; -interface DelegationButtonProps {} +interface DelegationButtonProps { + memberId: string; + nickname: string; +} -const DelegationButton = () => { +const DelegationButton = ({ memberId, nickname }: DelegationButtonProps) => { const { bottomSheetProps, open } = useBottomSheet(); return ( @@ -19,7 +22,7 @@ const DelegationButton = () => { className="p-6" >

- 니나 잘해 님에게 + {nickname} 님에게 방장을 위임 diff --git a/src/RoomSetting/tabs/MemberTab/KickButton.tsx b/src/RoomSetting/tabs/MemberTab/KickButton.tsx index a0f07e4d..418c7834 100644 --- a/src/RoomSetting/tabs/MemberTab/KickButton.tsx +++ b/src/RoomSetting/tabs/MemberTab/KickButton.tsx @@ -2,9 +2,12 @@ import { ModalHeadingStyle, descriptionStyle } from './styles'; import { Input } from '@/shared/Input'; import { BottomSheet, useBottomSheet } from '@/shared/BottomSheet'; -interface KickButtonProps {} +interface KickButtonProps { + memberId: string; + nickname: string; +} -const KickButton = () => { +const KickButton = ({ memberId, nickname }: KickButtonProps) => { const { bottomSheetProps, open } = useBottomSheet(); return ( @@ -20,7 +23,7 @@ const KickButton = () => { className="p-6" >

- 니나 잘해 님을 + {nickname} 님을 추방하시겠어요? diff --git a/src/RoomSetting/tabs/MemberTab/index.tsx b/src/RoomSetting/tabs/MemberTab/index.tsx index eea5cea2..da603720 100644 --- a/src/RoomSetting/tabs/MemberTab/index.tsx +++ b/src/RoomSetting/tabs/MemberTab/index.tsx @@ -28,8 +28,8 @@ const MemberTab = ({ roomId }: MemberTabProps) => { contribution={member.contributionPoint} />
- - + +
))} diff --git a/src/pages/RoomSettingPage.tsx b/src/pages/RoomSettingPage.tsx index 01a80d56..50ecc13c 100644 --- a/src/pages/RoomSettingPage.tsx +++ b/src/pages/RoomSettingPage.tsx @@ -24,7 +24,9 @@ const RoomSettingPage = () => { - + }> + + From 24901daeda41dc9df0b0297eabe658203e3dcc31 Mon Sep 17 00:00:00 2001 From: bbearcookie Date: Tue, 14 Nov 2023 01:09:33 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=EB=B0=A9=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=ED=83=AD=20UI=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/RoomSetting/tabs/RemoveTab.tsx | 43 ++++++++++++++++++++++++++++-- src/pages/RoomSettingPage.tsx | 4 ++- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/src/RoomSetting/tabs/RemoveTab.tsx b/src/RoomSetting/tabs/RemoveTab.tsx index 5c71ff78..c9b62557 100644 --- a/src/RoomSetting/tabs/RemoveTab.tsx +++ b/src/RoomSetting/tabs/RemoveTab.tsx @@ -1,5 +1,44 @@ -const RemoveTab = () => { - return <>Remove 탭입니다; +import { useSuspenseQuery } from '@tanstack/react-query'; +import { roomOptions } from '@/core/api/options'; +import { Input } from '@/shared/Input'; + +interface RemoveTabProps { + roomId: string; +} + +const RemoveTab = ({ roomId }: RemoveTabProps) => { + const { data: room } = useSuspenseQuery({ + ...roomOptions.detail(roomId), + staleTime: Infinity + }); + + if (room.currentUserCount > 1) { + return ( + <> +

+

방에 혼자 남았을 때만

+

삭제할 수 있어요.

+

+ + ); + } else { + return ( + <> +

방을 삭제할까요?

+
+ + +
+ + + ); + } }; export default RemoveTab; + +// 헤딩에 적용할 스타일 +const headingStyle = 'text-xl font-bold'; + +// 회색으로 간결한 설명을 적을 때 적용할 스타일 +const descriptionStyle = 'text-base text-dark-gray'; diff --git a/src/pages/RoomSettingPage.tsx b/src/pages/RoomSettingPage.tsx index 50ecc13c..49002ea5 100644 --- a/src/pages/RoomSettingPage.tsx +++ b/src/pages/RoomSettingPage.tsx @@ -29,7 +29,9 @@ const RoomSettingPage = () => { - + }> + + From 3c0aac608dd784187c90a07310e8b26f04ead3ee Mon Sep 17 00:00:00 2001 From: bbearcookie Date: Tue, 14 Nov 2023 01:37:43 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EB=B0=A9=20=EC=82=AD=EC=A0=9C,=20?= =?UTF-8?q?=EB=B0=A9=EC=9E=A5=20=EC=9C=84=EC=9E=84,=20=EB=A9=A4=EB=B2=84?= =?UTF-8?q?=20=EC=B6=94=EB=B0=A9=20API=20=ED=95=A8=EC=88=98=20=EB=B0=8F=20?= =?UTF-8?q?=EB=AA=A8=ED=82=B9=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/api/functions/roomAPI.ts | 22 +++++++++- src/core/mocks/handlers/rooms.ts | 73 +++++++++++++++++++++++++++++-- 2 files changed, 89 insertions(+), 6 deletions(-) diff --git a/src/core/api/functions/roomAPI.ts b/src/core/api/functions/roomAPI.ts index cad2b518..c1b3e9cb 100644 --- a/src/core/api/functions/roomAPI.ts +++ b/src/core/api/functions/roomAPI.ts @@ -12,6 +12,11 @@ const roomAPI = { }) => { return await baseInstance.post<{ message: string }>('/rooms', body); }, + + getRoomDetail: async (roomId: string) => { + return await baseInstance.get(`/rooms/${roomId}`); + }, + putRoom: async (params: { roomId: string; title: string; @@ -24,8 +29,21 @@ const roomAPI = { const { roomId, ...body } = params; return await baseInstance.put(`/rooms/${roomId}`, body); }, - getRoomDetail: async (roomId: string) => { - return await baseInstance.get(`/rooms/${roomId}`); + + deleteRoom: async (roomId: string) => { + return await baseInstance.delete(`/rooms/${roomId}`); + }, + + deleteKickUser: async (params: { roomId: string; memberId: string }) => { + const { roomId, memberId } = params; + return await baseInstance.delete(`/rooms/${roomId}/members/${memberId}`); + }, + + putDelegateMaster: async (params: { roomId: string; memberId: string }) => { + const { roomId, memberId } = params; + return await baseInstance.put( + `/rooms/${roomId}/members/${memberId}/delegation` + ); } }; diff --git a/src/core/mocks/handlers/rooms.ts b/src/core/mocks/handlers/rooms.ts index a541e723..9425ac69 100644 --- a/src/core/mocks/handlers/rooms.ts +++ b/src/core/mocks/handlers/rooms.ts @@ -34,6 +34,27 @@ const roomsHandlers = [ return HttpResponse.json(response, { status }); }), + http.get(baseURL('/rooms/:roomId'), async () => { + await delay(1000); + + const status: number = 200; + let response = {}; + + switch (status) { + case 200: + response = RoomInfo; + break; + case 401: + response = { message: '존재하지 않는 유저입니다.' }; + break; + case 404: + response = { message: '존재하지 않는 방입니다.' }; + break; + } + + return HttpResponse.json(response, { status }); + }), + http.put(baseURL('/rooms/:roomId'), async () => { await delay(1000); @@ -68,7 +89,7 @@ const roomsHandlers = [ return HttpResponse.json(response, { status }); }), - http.get(baseURL('/rooms/:roomId'), async () => { + http.delete(baseURL('/rooms/:roomId'), async () => { await delay(1000); const status: number = 200; @@ -76,13 +97,57 @@ const roomsHandlers = [ switch (status) { case 200: - response = RoomInfo; + response = {}; + break; + case 400: + response = { + message: '방장은 나가려면 위임 하거나 혼자 남아있어야 합니다.' + }; break; case 401: response = { message: '존재하지 않는 유저입니다.' }; break; - case 404: - response = { message: '존재하지 않는 방입니다.' }; + } + + return HttpResponse.json(response, { status }); + }), + + http.delete(baseURL('/rooms/:roomId/members/:memberId'), async () => { + await delay(1000); + + const status: number = 200; + let response = {}; + + switch (status) { + case 200: + response = {}; + break; + case 400: + response = { message: '방장만 추방할 수 있습니다.' }; + break; + case 401: + response = { message: '존재하지 않는 유저입니다.' }; + break; + } + + return HttpResponse.json(response, { status }); + }), + + http.put(baseURL('/rooms/:roomId/members/:memberId/delegation'), async () => { + await delay(1000); + + const status: number = 200; + let response = {}; + + switch (status) { + case 200: + response = {}; + break; + case 400: + response = { message: '방장만 위임할 수 있습니다.' }; + break; + case 401: + response = { message: '존재하지 않는 유저입니다.' }; break; } From 3ceaac5624f655e8ec52475eed44677426eb779f Mon Sep 17 00:00:00 2001 From: bbearcookie Date: Tue, 14 Nov 2023 01:52:42 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EB=B0=A9=EC=9E=A5=20=EC=9C=84?= =?UTF-8?q?=EC=9E=84=20API=20=ED=98=B8=EC=B6=9C=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabs/MemberTab/DelegationButton.tsx | 41 +++++++++++++++++-- src/RoomSetting/tabs/MemberTab/index.tsx | 5 ++- src/RoomSetting/tabs/MemberTab/styles.ts | 5 ++- 3 files changed, 45 insertions(+), 6 deletions(-) diff --git a/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx b/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx index 5639de4c..39089263 100644 --- a/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx +++ b/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx @@ -1,14 +1,42 @@ -import { ModalHeadingStyle, descriptionStyle } from './styles'; +import { useMutation } from '@tanstack/react-query'; +import roomAPI from '@/core/api/functions/roomAPI'; +import { useMoveRoute } from '@/core/hooks'; +import { ModalHeadingStyle, descriptionStyle, errorStyle } from './styles'; import { BottomSheet, useBottomSheet } from '@/shared/BottomSheet'; +import { LoadingSpinner } from '@/shared/LoadingSpinner'; interface DelegationButtonProps { + roomId: string; memberId: string; nickname: string; } -const DelegationButton = ({ memberId, nickname }: DelegationButtonProps) => { +const DelegationButton = ({ + roomId, + memberId, + nickname +}: DelegationButtonProps) => { const { bottomSheetProps, open } = useBottomSheet(); + const { mutate, isPending, error } = useMutation({ + mutationFn: roomAPI.putDelegateMaster + }); + + const moveTo = useMoveRoute(); + + const handleDelegation = () => { + mutate( + { roomId, memberId }, + { + onSuccess: () => { + moveTo('roomDetail'); + // TODO: 토스트 메시지로 방장을 위임했음을 알려야 해요. + }, + onError: (err) => console.error(err) + } + ); + }; + return ( <> diff --git a/src/RoomSetting/tabs/MemberTab/index.tsx b/src/RoomSetting/tabs/MemberTab/index.tsx index da603720..8606b377 100644 --- a/src/RoomSetting/tabs/MemberTab/index.tsx +++ b/src/RoomSetting/tabs/MemberTab/index.tsx @@ -29,7 +29,10 @@ const MemberTab = ({ roomId }: MemberTabProps) => { />
- +
))} diff --git a/src/RoomSetting/tabs/MemberTab/styles.ts b/src/RoomSetting/tabs/MemberTab/styles.ts index 9886506f..88583617 100644 --- a/src/RoomSetting/tabs/MemberTab/styles.ts +++ b/src/RoomSetting/tabs/MemberTab/styles.ts @@ -2,4 +2,7 @@ export const ModalHeadingStyle = 'flex flex-col text-xl mt-4 leading-7'; // 회색으로 간결한 설명을 적을 때 적용할 스타일 -export const descriptionStyle = 'pt-2 text-base text-dark-gray'; +export const descriptionStyle = 'mt-2 text-base text-dark-gray'; + +// 빨간색으로 에러를 표시할 때 적용할 스타일 +export const errorStyle = 'mt-2 text-base text-danger'; From 45edead220157208b1c7af9ab080ae49d4e88841 Mon Sep 17 00:00:00 2001 From: bbearcookie Date: Tue, 14 Nov 2023 02:19:28 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EB=B0=A9=20=EC=82=AD=EC=A0=9C=20AP?= =?UTF-8?q?I=20=ED=98=B8=EC=B6=9C=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/RoomSetting/tabs/RemoveTab.tsx | 52 +++++++++++++++++++++++++++--- 1 file changed, 47 insertions(+), 5 deletions(-) diff --git a/src/RoomSetting/tabs/RemoveTab.tsx b/src/RoomSetting/tabs/RemoveTab.tsx index c9b62557..f96c28e1 100644 --- a/src/RoomSetting/tabs/RemoveTab.tsx +++ b/src/RoomSetting/tabs/RemoveTab.tsx @@ -1,17 +1,38 @@ -import { useSuspenseQuery } from '@tanstack/react-query'; +import { useState } from 'react'; +import { useMutation, useSuspenseQuery } from '@tanstack/react-query'; import { roomOptions } from '@/core/api/options'; +import roomAPI from '@/core/api/functions/roomAPI'; +import { useMoveRoute } from '@/core/hooks'; import { Input } from '@/shared/Input'; +import { LoadingSpinner } from '@/shared/LoadingSpinner'; interface RemoveTabProps { roomId: string; } const RemoveTab = ({ roomId }: RemoveTabProps) => { + const [confirmInput, setConfirmInput] = useState(''); + const moveTo = useMoveRoute(); + const { data: room } = useSuspenseQuery({ ...roomOptions.detail(roomId), staleTime: Infinity }); + const { mutate, isPending, error } = useMutation({ + mutationFn: roomAPI.deleteRoom + }); + + const handleRemove = () => { + mutate(roomId, { + onSuccess: () => { + moveTo('routines'); + // TODO: 토스트 메시지로 방을 삭제했음을 알려야 해요. + }, + onError: (err) => console.error(err) + }); + }; + if (room.currentUserCount > 1) { return ( <> @@ -25,11 +46,32 @@ const RemoveTab = ({ roomId }: RemoveTabProps) => { return ( <>

방을 삭제할까요?

-
- - +
+ + setConfirmInput(e.target.value)} + />
- + {error && ( +

+ {error.response?.data.message} +

+ )} + ); } From 1c4f889bc43eca70462dc982ff5b1d29c7bc0b50 Mon Sep 17 00:00:00 2001 From: bbearcookie Date: Tue, 14 Nov 2023 02:30:30 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=EC=B6=94=EB=B0=A9=20API=20?= =?UTF-8?q?=ED=98=B8=EC=B6=9C=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabs/MemberTab/DelegationButton.tsx | 2 +- src/RoomSetting/tabs/MemberTab/KickButton.tsx | 46 +++++++++++++++++-- src/RoomSetting/tabs/MemberTab/index.tsx | 5 +- src/RoomSetting/tabs/RemoveTab.tsx | 3 +- 4 files changed, 49 insertions(+), 7 deletions(-) diff --git a/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx b/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx index 39089263..ace28883 100644 --- a/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx +++ b/src/RoomSetting/tabs/MemberTab/DelegationButton.tsx @@ -50,7 +50,7 @@ const DelegationButton = ({ className="p-6" >

- {nickname} 님에게 + "{nickname}" 님에게 방장을 위임 diff --git a/src/RoomSetting/tabs/MemberTab/KickButton.tsx b/src/RoomSetting/tabs/MemberTab/KickButton.tsx index 418c7834..b4cfe646 100644 --- a/src/RoomSetting/tabs/MemberTab/KickButton.tsx +++ b/src/RoomSetting/tabs/MemberTab/KickButton.tsx @@ -1,14 +1,38 @@ +import { useState } from 'react'; +import { useMutation } from '@tanstack/react-query'; +import roomAPI from '@/core/api/functions/roomAPI'; import { ModalHeadingStyle, descriptionStyle } from './styles'; import { Input } from '@/shared/Input'; import { BottomSheet, useBottomSheet } from '@/shared/BottomSheet'; +import { LoadingSpinner } from '@/shared/LoadingSpinner'; interface KickButtonProps { + roomId: string; memberId: string; nickname: string; } -const KickButton = ({ memberId, nickname }: KickButtonProps) => { - const { bottomSheetProps, open } = useBottomSheet(); +const KickButton = ({ roomId, memberId, nickname }: KickButtonProps) => { + const [confirmInput, setConfirmInput] = useState(''); + + const { bottomSheetProps, open, close } = useBottomSheet(); + + const { mutate, isPending, error } = useMutation({ + mutationFn: roomAPI.deleteKickUser + }); + + const handleKick = () => { + mutate( + { roomId, memberId }, + { + onSuccess: () => { + close(); + // TODO: 토스트 메시지로 사용자를 추방했음을 알려야 해요. + }, + onError: (err) => console.error(err) + } + ); + }; return ( <> @@ -23,7 +47,7 @@ const KickButton = ({ memberId, nickname }: KickButtonProps) => { className="p-6" >

- {nickname} 님을 + "{nickname}" 님을 추방하시겠어요? @@ -38,10 +62,24 @@ const KickButton = ({ memberId, nickname }: KickButtonProps) => { setConfirmInput(e.target.value)} />

- + {error && ( +

+ {error.response?.data.message} +

+ )} + ); diff --git a/src/RoomSetting/tabs/MemberTab/index.tsx b/src/RoomSetting/tabs/MemberTab/index.tsx index 8606b377..dff17a79 100644 --- a/src/RoomSetting/tabs/MemberTab/index.tsx +++ b/src/RoomSetting/tabs/MemberTab/index.tsx @@ -28,7 +28,10 @@ const MemberTab = ({ roomId }: MemberTabProps) => { contribution={member.contributionPoint} />
- + { setConfirmInput(e.target.value)} /> @@ -68,7 +69,7 @@ const RemoveTab = ({ roomId }: RemoveTabProps) => {