diff --git a/src/core/api/functions/roomAPI.ts b/src/core/api/functions/roomAPI.ts index d98d6fa2..d8da4a3b 100644 --- a/src/core/api/functions/roomAPI.ts +++ b/src/core/api/functions/roomAPI.ts @@ -36,8 +36,6 @@ const roomAPI = { roomId: string; title: string; announcement: string; - // TODO: 루틴 수정을 제한하는 요구사항 발생 - // routines: string[]; password: string; certifyTime: number; maxUserCount: number; diff --git a/src/domain/RoomSetting/hooks/useRoomForm.ts b/src/domain/RoomSetting/hooks/useRoomForm.ts index 46268929..2346a5c4 100644 --- a/src/domain/RoomSetting/hooks/useRoomForm.ts +++ b/src/domain/RoomSetting/hooks/useRoomForm.ts @@ -72,8 +72,6 @@ const useRoomForm = ({ roomId, defaultValues }: useRoomFormProps) => { title: data.title, announcement: data.announcement, certifyTime: data.certifyTime % 24, - // TODO: 루틴 수정을 제한하는 요구사항 발생 - // routines: data.routines.map((r) => r.value), maxUserCount: data.userCount, password: data.password }, @@ -99,19 +97,11 @@ const useRoomForm = ({ roomId, defaultValues }: useRoomFormProps) => { }); if (error.response?.data?.validation) { - const { - title, - announcement, - routine, - password, - certifyTime, - maxUserCount - } = error.response.data.validation; + const { title, announcement, password, certifyTime, maxUserCount } = + error.response.data.validation; setError('title', { message: title }); setError('announcement', { message: announcement }); - // TODO: 루틴 수정을 제한하는 요구사항 발생 - // setError('routines', { message: routine }); setError('password', { message: password }); setError('certifyTime', { message: certifyTime }); setError('userCount', { message: maxUserCount }); diff --git a/src/domain/RoomSetting/index.ts b/src/domain/RoomSetting/index.ts index 214a8eee..bac55618 100644 --- a/src/domain/RoomSetting/index.ts +++ b/src/domain/RoomSetting/index.ts @@ -1,4 +1,3 @@ export { default as RoomTab } from './tabs/RoomTab'; export { default as MemberTab } from './tabs/MemberTab'; -export { default as RemoveTab } from './tabs/RemoveTab'; export { default as LoadingFallback } from './components/LoadingFallback'; diff --git a/src/domain/RoomSetting/tabs/RemoveTab.stories.tsx b/src/domain/RoomSetting/tabs/RemoveTab.stories.tsx deleted file mode 100644 index 61f93c5c..00000000 --- a/src/domain/RoomSetting/tabs/RemoveTab.stories.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Meta, StoryObj } from '@storybook/react'; -import { http, HttpResponse } from 'msw'; -import { Title, Description, Stories } from '@storybook/blocks'; -import { baseURL } from '@/core/api/mocks/baseURL'; -import { RoomInfoBeforeEditing } from '@/core/api/mocks/datas/room'; -import RemoveTab from './RemoveTab'; - -const meta = { - title: 'Pages/RoomSetting/RemoveTab', - component: RemoveTab, - tags: ['autodocs'], - parameters: { - docs: { - description: { - component: '방 관리 페이지의 삭제 탭에서는 조건부 렌더링이 존재합니다.' - }, - page: () => ( - <> - - <Description /> - <Stories /> - </> - ) - }, - msw: { - handlers: [ - http.get(baseURL('/rooms/:roomId'), async ({ params }) => { - const { roomId } = params; - - switch (roomId) { - case '1': - return HttpResponse.json({ - ...RoomInfoBeforeEditing, - participants: RoomInfoBeforeEditing.participants.slice(0, 1) - }); - default: - return HttpResponse.json(RoomInfoBeforeEditing); - } - }) - ] - } - } -} satisfies Meta<typeof RemoveTab>; - -export default meta; -type Story = StoryObj<typeof meta>; - -export const OneParticipant: Story = { - args: { - roomId: '1' - }, - parameters: { - docs: { - description: { - story: '방에 참여한 사람이 본인만 남았다면 방 삭제가 가능합니다.' - } - } - } -}; - -export const MultiParticipant: Story = { - args: { - roomId: '2' - }, - parameters: { - docs: { - description: { - story: '참여자가 여러 명인 경우 방 삭제가 불가능합니다.' - } - } - } -}; diff --git a/src/domain/RoomSetting/tabs/RemoveTab.tsx b/src/domain/RoomSetting/tabs/RemoveTab.tsx deleted file mode 100644 index 7382263c..00000000 --- a/src/domain/RoomSetting/tabs/RemoveTab.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { useState } from 'react'; -import { - useMutation, - useQueryClient, - 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'; -import { Toast } from '@/shared/Toast'; - -interface RemoveTabProps { - roomId: string; -} - -const RemoveTab = ({ roomId }: RemoveTabProps) => { - const [confirmInput, setConfirmInput] = useState(''); - const queryClient = useQueryClient(); - 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: () => { - queryClient.removeQueries({ - queryKey: roomOptions.detail(roomId).queryKey - }); - - Toast.show({ message: '방을 삭제했어요.', status: 'confirm' }); - - moveTo('routines'); - }, - onError: (err) => { - console.error(err); - - Toast.show({ - message: err.response?.data.message ?? '오류가 발생했어요.', - status: 'danger' - }); - } - }); - }; - - if (room.participants.length > 1) { - return ( - <> - <h1 className={headingStyle}> - <p className="font-bold">방에 혼자 남았을 때만</p> - <p className="font-bold">삭제할 수 있어요.</p> - </h1> - </> - ); - } else { - return ( - <> - <h1 className={headingStyle}>방을 삭제할까요?</h1> - <section className="mt-4 flex flex-col gap-2"> - <label - htmlFor="confirm" - className={descriptionStyle} - > - 방의 이름 "{room.title}" 을 적어주세요. - </label> - <Input - id="confirm" - value={confirmInput} - autoComplete="off" - placeholder={room.title} - onChange={(e) => setConfirmInput(e.target.value)} - /> - </section> - {error && ( - <p className="ml-2 mt-2 text-base text-danger"> - {error.response?.data.message} - </p> - )} - <button - className="btn btn-danger mt-8 flex w-full items-start justify-center" - onClick={handleRemove} - disabled={confirmInput !== room.title || isPending} - > - {isPending ? <LoadingSpinner size="2xl" /> : '방 삭제'} - </button> - </> - ); - } -}; - -export default RemoveTab; - -// 헤딩에 적용할 스타일 -const headingStyle = 'text-xl font-bold'; - -// 회색으로 간결한 설명을 적을 때 적용할 스타일 -const descriptionStyle = 'text-base text-dark-gray'; diff --git a/src/domain/RoomSetting/tabs/RoomTab.tsx b/src/domain/RoomSetting/tabs/RoomTab.tsx index 9bcd887a..d7986489 100644 --- a/src/domain/RoomSetting/tabs/RoomTab.tsx +++ b/src/domain/RoomSetting/tabs/RoomTab.tsx @@ -7,7 +7,7 @@ import { Input } from '@/shared/Input'; import { LoadingSpinner } from '@/shared/LoadingSpinner'; import { formatHourString } from '@/domain/TimePicker/utils/hour'; import { TIME_RANGE, FORM_LITERAL } from '@/domain/RoomForm/constants/literals'; -import { UserCount, Routines, Password } from '@/domain/RoomForm'; +import { UserCount, Password } from '@/domain/RoomForm'; import { TimePicker } from '@/domain/TimePicker'; import useRoomForm from '../hooks/useRoomForm'; @@ -118,12 +118,6 @@ const RoomTab = ({ roomId }: RoomTabProps) => { )} </section> - {/* // TODO: 루틴 수정을 제한하는 요구사항 발생 */} - {/* <section className={sectionStyle}> - <label className={labelStyle}>루틴 목록</label> - <Routines /> - </section> */} - <section className={sectionStyle}> <label className={labelStyle}>인원</label> <UserCount /> diff --git a/src/pages/RoomSettingPage.tsx b/src/pages/RoomSettingPage.tsx index 11cd51dc..e82b0dce 100644 --- a/src/pages/RoomSettingPage.tsx +++ b/src/pages/RoomSettingPage.tsx @@ -40,12 +40,6 @@ const RoomSettingPage = () => { <MemberTab roomId={roomId} /> </Suspense> </TabItem> - {/* TODO: 앞으로 사용되지 않을 가능성이 높습니다. */} - {/* <TabItem title="방 삭제"> - <Suspense fallback={<LoadingFallback />}> - <RemoveTab roomId={roomId} /> - </Suspense> - </TabItem> */} </Tab> </ErrorBoundary> </QueryErrorBoundary>