From 174ae7e83df69904af95aca1ca49a312db61128e Mon Sep 17 00:00:00 2001
From: SangHoon Lee <50488780+bbearcookie@users.noreply.github.com>
Date: Mon, 19 Feb 2024 02:24:53 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=B0=A9=20=EC=83=9D=EC=84=B1,=20?=
 =?UTF-8?q?=EB=B0=A9=20=EA=B4=80=EB=A6=AC=EC=9D=98=20=ED=8F=BC=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20(#502)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: FORM_LITERAL 객체로 폼 관련 상수 관리

* remove: 루틴 수정 기능, 방 삭제 탭 제거
---
 src/core/api/functions/roomAPI.ts             |   2 -
 src/domain/RoomForm/components/Password.tsx   |   4 +-
 src/domain/RoomForm/components/Routines.tsx   |  10 +-
 src/domain/RoomForm/components/UserCount.tsx  |   4 +-
 src/domain/RoomForm/constants/literals.ts     | 131 ++++++++++--------
 .../RoomNew/components/BirdCardSection.tsx    |   8 +-
 src/domain/RoomNew/hooks/useRoomForm.ts       |  31 ++---
 src/domain/RoomNew/steps/PasswordStep.tsx     |   8 +-
 src/domain/RoomNew/steps/RoutineStep.tsx      |   4 +-
 src/domain/RoomSetting/hooks/useRoomForm.ts   |  45 ++----
 src/domain/RoomSetting/index.ts               |   1 -
 .../RoomSetting/tabs/RemoveTab.stories.tsx    |  72 ----------
 src/domain/RoomSetting/tabs/RemoveTab.tsx     | 105 --------------
 src/domain/RoomSetting/tabs/RoomTab.tsx       |  20 +--
 src/pages/RoomSettingPage.tsx                 |   6 -
 15 files changed, 129 insertions(+), 322 deletions(-)
 delete mode 100644 src/domain/RoomSetting/tabs/RemoveTab.stories.tsx
 delete mode 100644 src/domain/RoomSetting/tabs/RemoveTab.tsx

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/RoomForm/components/Password.tsx b/src/domain/RoomForm/components/Password.tsx
index 3b3c1fde..b1d2f95e 100644
--- a/src/domain/RoomForm/components/Password.tsx
+++ b/src/domain/RoomForm/components/Password.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { PasswordInput } from '@/shared/Input';
-import { PASSWORD } from '@/domain/RoomForm/constants/literals';
+import { FORM_LITERAL } from '@/domain/RoomForm/constants/literals';
 import { errorStyle } from '../constants/styles';
 
 interface PasswordProps {
@@ -29,7 +29,7 @@ const Password = ({ placeholder }: PasswordProps) => {
       <PasswordInput
         {...register('password')}
         placeholder={placeholder}
-        maxLength={PASSWORD.max}
+        maxLength={FORM_LITERAL.password.max.value}
         onChange={handleChangePassword}
       />
       {errors.password && (
diff --git a/src/domain/RoomForm/components/Routines.tsx b/src/domain/RoomForm/components/Routines.tsx
index d1d4dec8..71629c8d 100644
--- a/src/domain/RoomForm/components/Routines.tsx
+++ b/src/domain/RoomForm/components/Routines.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { InnerTextInput } from '@/shared/Input';
 import { Icon } from '@/shared/Icon';
-import { ROUTINE_COUNT, ROUTINE_NAME } from '../constants/literals';
+import { FORM_LITERAL } from '../constants/literals';
 import { errorStyle, iconButtonStyle } from '../constants/styles';
 
 const Routines = () => {
@@ -25,7 +25,7 @@ const Routines = () => {
   });
 
   const handleAppendRoutine = useCallback(() => {
-    if (routines.length >= ROUTINE_COUNT.max) {
+    if (routines.length >= FORM_LITERAL.routines.max.value) {
       return;
     }
 
@@ -54,10 +54,10 @@ const Routines = () => {
               text={
                 watchRoutines[idx].value.length.toString() +
                 ' / ' +
-                ROUTINE_NAME.max
+                FORM_LITERAL.routines.item.max.value
               }
               placeholder="루틴 이름"
-              maxLength={ROUTINE_NAME.max}
+              maxLength={FORM_LITERAL.routines.item.max.value}
             />
             {idx !== 0 && (
               <div
@@ -91,7 +91,7 @@ const Routines = () => {
           />
         </button>
         <div className="text-center text-xs">
-          {routines.length} / {ROUTINE_COUNT.max}
+          {routines.length} / {FORM_LITERAL.routines.max.value}
         </div>
       </li>
     </ul>
diff --git a/src/domain/RoomForm/components/UserCount.tsx b/src/domain/RoomForm/components/UserCount.tsx
index 66c345be..afa3a7e9 100644
--- a/src/domain/RoomForm/components/UserCount.tsx
+++ b/src/domain/RoomForm/components/UserCount.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { Icon } from '@/shared/Icon';
 import { iconButtonStyle, errorStyle } from '../constants/styles';
-import { USER_COUNT } from '../constants/literals';
+import { FORM_LITERAL } from '../constants/literals';
 
 const UserCount = () => {
   const {
@@ -15,7 +15,7 @@ const UserCount = () => {
 
   const handleSetUserCount = useCallback(
     (count: number) => {
-      if (count <= 0 || count > USER_COUNT.max) {
+      if (count <= 0 || count > FORM_LITERAL.userCount.max.value) {
         return;
       }
 
diff --git a/src/domain/RoomForm/constants/literals.ts b/src/domain/RoomForm/constants/literals.ts
index 6d576fc5..5bb8fc12 100644
--- a/src/domain/RoomForm/constants/literals.ts
+++ b/src/domain/RoomForm/constants/literals.ts
@@ -1,9 +1,80 @@
-// 새 종류 별 방 타입
 import { RoomInfo } from '@/core/types/Room';
 
-export const ROOM_TYPES = ['MORNING', 'NIGHT'] as const;
+export const FORM_LITERAL = {
+  /** 방 종류 */
+  roomType: {
+    value: ['MORNING', 'NIGHT'],
+    message: '방 종류를 선택해주세요.'
+  },
+  /** 루틴 목록 */
+  routines: {
+    min: {
+      value: 0
+    },
+    max: {
+      value: 4,
+      message: '루틴은 최대 4개까지 등록할 수 있어요.'
+    },
+    item: {
+      min: {
+        value: 2,
+        message: '루틴 내용은 2글자 이상이어야 해요.'
+      },
+      max: {
+        value: 20,
+        message: '루틴 내용은 20글자 이하로 입력해주세요.'
+      }
+    }
+  },
+  /** 방 제목 */
+  title: {
+    min: {
+      value: 1,
+      message: '방 제목은 1글자 이상이어야 해요.'
+    },
+    max: {
+      value: 20,
+      message: '방 제목은 20글자 이하로 입력해주세요.'
+    }
+  },
+  /** 방에 참여할 수 있는 인원 수 */
+  userCount: {
+    min: {
+      value: 1,
+      message: '인원을 1명 이상 선택해주세요.'
+    },
+    max: {
+      value: 10,
+      message: '인원을 10명 이하로 선택해주세요.'
+    }
+  },
+  /** 방 비밀번호 */
+  password: {
+    min: {
+      value: 4,
+      message: '비밀번호는 4자리 이상이어야 해요.'
+    },
+    max: {
+      value: 8,
+      message: '비밀번호는 8자리 이하로 입력해주세요.'
+    },
+    onlyNumeric: {
+      message: '비밀번호는 숫자로만 입력해주세요.'
+    }
+  },
+  /** 공지사항 */
+  announcement: {
+    min: {
+      value: 0
+    },
+    max: {
+      value: 100,
+      message: '공지사항은 100글자 이하로 입력해주세요.'
+    }
+  }
+} as const;
 
-// 새 종류 및 이미지
+/** 새 종류 및 이미지 */
 export const BIRD: Record<
   RoomInfo['roomType'],
   {
@@ -24,59 +95,11 @@ export const BIRD: Record<
   }
 } as const;
 
-// 새 종류 별 선택할 수 있는 인증 시간 범위
+/** 새 종류 별 선택할 수 있는 인증 시간 범위 */
 export const TIME_RANGE: Record<RoomInfo['roomType'], [number, number]> = {
   MORNING: [4, 10],
   NIGHT: [20, 26]
 };
 
-// 참여할 수 있는 최대 방 수
-export const ROOM_COUNT = {
-  max: 3
-};
-
-// 등록할 수 있는 최대 루틴 수
-export const ROUTINE_COUNT = {
-  max: 4
-};
-
-// 루틴 이름 길이
-export const ROUTINE_NAME = {
-  min: 2,
-  max: 20
-};
-
-// 방 제목 길이
-export const ROOM_NAME = {
-  min: 1,
-  max: 20
-};
-
-// 비밀번호 길이
-export const PASSWORD = {
-  min: 4,
-  max: 8
-};
-
-// 참여자 수
-export const USER_COUNT = {
-  min: 1,
-  max: 10
-};
-
-// 공지사항 길이
-export const ANNOUNCEMENT = {
-  min: 0,
-  max: 100
-};
-
-// 폼 유효성 검사 메시지
-export const FORM_MESSAGE = {
-  ROOM_TYPE: `방 종류를 선택해주세요.`,
-  ANNOUNCEMENT: `공지사항은 ${ANNOUNCEMENT.min}글자에서 ${ANNOUNCEMENT.max}글자 사이여야 해요.`,
-  ROUTINE_NAME: `루틴 내용은 ${ROUTINE_NAME.min}글자에서 ${ROUTINE_NAME.max}글자 사이여야 해요.`,
-  ROOM_NAME: `방 제목은 ${ROOM_NAME.min}글자에서 ${ROOM_NAME.max}글자 사이여야 해요.`,
-  USER_COUNT: `인원을 올바르게 선택해주세요.`,
-  PASSWORD: `비밀번호는 ${PASSWORD.min}자리에서 ${PASSWORD.max}자리의 숫자여야 해요.`,
-  ONLY_NUMERIC_PASSWORD: `비밀번호는 숫자로만 입력해주세요.`
-};
+/** 참여할 수 있는 최대 방 수 */
+export const MAX_ROOM_COUNT = 3;
diff --git a/src/domain/RoomNew/components/BirdCardSection.tsx b/src/domain/RoomNew/components/BirdCardSection.tsx
index 90f23579..64db1946 100644
--- a/src/domain/RoomNew/components/BirdCardSection.tsx
+++ b/src/domain/RoomNew/components/BirdCardSection.tsx
@@ -4,8 +4,8 @@ import { useFormContext } from 'react-hook-form';
 import { roomOptions } from '@/core/api/options';
 import { QueryErrorBoundary, NetworkFallback } from '@/shared/ErrorBoundary';
 import {
-  ROOM_COUNT,
-  ROOM_TYPES,
+  MAX_ROOM_COUNT,
+  FORM_LITERAL,
   TIME_RANGE
 } from '@/domain/RoomForm/constants/literals';
 import { Inputs } from '../hooks/useRoomForm';
@@ -29,12 +29,12 @@ const BirdCardSectionComponent = () => {
   });
 
   const isFull = (type: Inputs['roomType']) => {
-    return roomCount[type] >= ROOM_COUNT.max;
+    return roomCount[type] >= MAX_ROOM_COUNT;
   };
 
   return (
     <>
-      {ROOM_TYPES.map((roomType) => (
+      {FORM_LITERAL.roomType.value.map((roomType) => (
         <div
           className="w-full"
           key={roomType}
diff --git a/src/domain/RoomNew/hooks/useRoomForm.ts b/src/domain/RoomNew/hooks/useRoomForm.ts
index 67b53d4a..24f88f49 100644
--- a/src/domain/RoomNew/hooks/useRoomForm.ts
+++ b/src/domain/RoomNew/hooks/useRoomForm.ts
@@ -6,18 +6,13 @@ import roomAPI from '@/core/api/functions/roomAPI';
 import { useMoveRoute } from '@/core/hooks';
 import { Toast } from '@/shared/Toast';
 import {
-  FORM_MESSAGE,
-  ROOM_TYPES,
-  TIME_RANGE,
-  ROUTINE_NAME,
-  ROOM_NAME,
-  USER_COUNT,
-  PASSWORD
+  FORM_LITERAL as L,
+  TIME_RANGE
 } from '@/domain/RoomForm/constants/literals';
 
 export const formSchema = z.object({
-  roomType: z.enum(ROOM_TYPES, {
-    required_error: FORM_MESSAGE.ROOM_TYPE
+  roomType: z.enum(L.roomType.value, {
+    required_error: L.roomType.message
   }),
   certifyTime: z.number(),
   routines: z.array(
@@ -25,26 +20,26 @@ export const formSchema = z.object({
       value: z
         .string()
         .trim()
-        .min(ROUTINE_NAME.min, FORM_MESSAGE.ROUTINE_NAME)
-        .max(ROUTINE_NAME.max, FORM_MESSAGE.ROUTINE_NAME)
+        .min(L.routines.item.min.value, L.routines.item.min.message)
+        .max(L.routines.item.max.value, L.routines.item.max.message)
     })
   ),
   title: z
     .string()
     .trim()
-    .min(ROOM_NAME.min, FORM_MESSAGE.ROOM_NAME)
-    .max(ROOM_NAME.max, FORM_MESSAGE.ROOM_NAME),
+    .min(L.title.min.value, L.title.min.message)
+    .max(L.title.max.value, L.title.max.message),
   userCount: z
     .number()
-    .gte(USER_COUNT.min, FORM_MESSAGE.USER_COUNT)
-    .lte(USER_COUNT.max, FORM_MESSAGE.USER_COUNT),
+    .gte(L.userCount.min.value, L.userCount.min.message)
+    .lte(L.userCount.max.value, L.userCount.max.message),
   password: z.literal('').or(
     z
       .string()
-      .min(PASSWORD.min, FORM_MESSAGE.PASSWORD)
-      .max(PASSWORD.max, FORM_MESSAGE.PASSWORD)
+      .min(L.password.min.value, L.password.min.message)
+      .max(L.password.max.value, L.password.max.message)
       .refine((v) => /^\d*$/.test(v), {
-        message: FORM_MESSAGE.ONLY_NUMERIC_PASSWORD
+        message: L.password.onlyNumeric.message
       })
   )
 });
diff --git a/src/domain/RoomNew/steps/PasswordStep.tsx b/src/domain/RoomNew/steps/PasswordStep.tsx
index 8cb34081..9e0e7c71 100644
--- a/src/domain/RoomNew/steps/PasswordStep.tsx
+++ b/src/domain/RoomNew/steps/PasswordStep.tsx
@@ -1,9 +1,12 @@
 import clsx from 'clsx';
-import { PASSWORD } from '@/domain/RoomForm/constants/literals';
+import { FORM_LITERAL } from '@/domain/RoomForm/constants/literals';
 import { Password } from '@/domain/RoomForm';
 import { headingStyle, descriptionStyle } from '../constants/styles';
 
 const PasswordStep = () => {
+  const min = FORM_LITERAL.password.min.value;
+  const max = FORM_LITERAL.password.max.value;
+
   return (
     <>
       <h1 className={headingStyle}>
@@ -14,8 +17,7 @@ const PasswordStep = () => {
       </h1>
 
       <p className={clsx(descriptionStyle, 'mb-10')}>
-        선택사항입니다. {PASSWORD.min}자리에서 {PASSWORD.max}자리 숫자를
-        적어주세요!
+        선택사항입니다. {min}자리에서 {max}자리 숫자를 적어주세요!
       </p>
 
       <Password placeholder="비워두시면 공개방이 됩니다" />
diff --git a/src/domain/RoomNew/steps/RoutineStep.tsx b/src/domain/RoomNew/steps/RoutineStep.tsx
index 7c55c6c3..3bad1513 100644
--- a/src/domain/RoomNew/steps/RoutineStep.tsx
+++ b/src/domain/RoomNew/steps/RoutineStep.tsx
@@ -1,6 +1,6 @@
 import { useFormContext } from 'react-hook-form';
 import { Input } from '@/shared/Input';
-import { ROOM_NAME } from '@/domain/RoomForm/constants/literals';
+import { FORM_LITERAL } from '@/domain/RoomForm/constants/literals';
 import { Routines, UserCount } from '@/domain/RoomForm';
 import { errorStyle } from '../constants/styles';
 import { Inputs } from '../hooks/useRoomForm';
@@ -20,7 +20,7 @@ const RoutineStep = () => {
         </h2>
         <Input
           {...register('title')}
-          maxLength={ROOM_NAME.max}
+          maxLength={FORM_LITERAL.title.max.value}
           placeholder="짧고 명확하게!"
         />
         {errors.title && <p className={errorStyle}>{errors.title.message}</p>}
diff --git a/src/domain/RoomSetting/hooks/useRoomForm.ts b/src/domain/RoomSetting/hooks/useRoomForm.ts
index 14a3bf0e..2346a5c4 100644
--- a/src/domain/RoomSetting/hooks/useRoomForm.ts
+++ b/src/domain/RoomSetting/hooks/useRoomForm.ts
@@ -6,47 +6,40 @@ import roomAPI from '@/core/api/functions/roomAPI';
 import { roomOptions } from '@/core/api/options';
 import { useMoveRoute } from '@/core/hooks';
 import { Toast } from '@/shared/Toast';
-import {
-  ANNOUNCEMENT,
-  ROUTINE_NAME,
-  ROOM_NAME,
-  USER_COUNT,
-  PASSWORD,
-  FORM_MESSAGE
-} from '@/domain/RoomForm/constants/literals';
+import { FORM_LITERAL as L } from '@/domain/RoomForm/constants/literals';
 
 export const formSchema = z.object({
   title: z
     .string()
     .trim()
-    .min(ROOM_NAME.min, FORM_MESSAGE.ROOM_NAME)
-    .max(ROOM_NAME.max, FORM_MESSAGE.ROOM_NAME),
+    .min(L.title.min.value, L.title.min.message)
+    .max(L.title.max.value, L.title.max.message),
   announcement: z
     .string()
     .trim()
-    .min(ANNOUNCEMENT.min, FORM_MESSAGE.ANNOUNCEMENT)
-    .max(ANNOUNCEMENT.max, FORM_MESSAGE.ANNOUNCEMENT),
+    .min(L.announcement.min.value)
+    .max(L.announcement.max.value, L.announcement.max.message),
   certifyTime: z.number(),
   routines: z.array(
     z.object({
       value: z
         .string()
         .trim()
-        .min(ROUTINE_NAME.min, FORM_MESSAGE.ROUTINE_NAME)
-        .max(ROUTINE_NAME.max, FORM_MESSAGE.ROUTINE_NAME)
+        .min(L.routines.item.min.value, L.routines.item.min.message)
+        .max(L.routines.item.max.value, L.routines.item.max.message)
     })
   ),
   userCount: z
     .number()
-    .gte(USER_COUNT.min, FORM_MESSAGE.USER_COUNT)
-    .lte(USER_COUNT.max, FORM_MESSAGE.USER_COUNT),
+    .gte(L.userCount.min.value, L.userCount.min.message)
+    .lte(L.userCount.max.value, L.userCount.max.message),
   password: z.literal('').or(
     z
       .string()
-      .min(PASSWORD.min, FORM_MESSAGE.PASSWORD)
-      .max(PASSWORD.max, FORM_MESSAGE.PASSWORD)
+      .min(L.password.min.value, L.password.min.message)
+      .max(L.password.max.value, L.password.max.message)
       .refine((v) => /^\d*$/.test(v), {
-        message: FORM_MESSAGE.ONLY_NUMERIC_PASSWORD
+        message: L.password.onlyNumeric.message
       })
   )
 });
@@ -79,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
       },
@@ -106,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: () => (
-        <>
-          <Title />
-          <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 02d8aecb..d7986489 100644
--- a/src/domain/RoomSetting/tabs/RoomTab.tsx
+++ b/src/domain/RoomSetting/tabs/RoomTab.tsx
@@ -6,12 +6,8 @@ import { roomOptions } from '@/core/api/options';
 import { Input } from '@/shared/Input';
 import { LoadingSpinner } from '@/shared/LoadingSpinner';
 import { formatHourString } from '@/domain/TimePicker/utils/hour';
-import {
-  TIME_RANGE,
-  ANNOUNCEMENT,
-  ROOM_NAME
-} from '@/domain/RoomForm/constants/literals';
-import { UserCount, Routines, Password } from '@/domain/RoomForm';
+import { TIME_RANGE, FORM_LITERAL } from '@/domain/RoomForm/constants/literals';
+import { UserCount, Password } from '@/domain/RoomForm';
 import { TimePicker } from '@/domain/TimePicker';
 import useRoomForm from '../hooks/useRoomForm';
 
@@ -67,7 +63,7 @@ const RoomTab = ({ roomId }: RoomTabProps) => {
           <Input
             id="title"
             {...register('title')}
-            maxLength={ROOM_NAME.max}
+            maxLength={FORM_LITERAL.title.max.value}
           />
           {errors.title && (
             <p className={errorStyle}>{errors.title?.message}</p>
@@ -81,7 +77,7 @@ const RoomTab = ({ roomId }: RoomTabProps) => {
           >
             <b>공지사항</b>
             <p className="text-xs text-gray-400">
-              {watchAnnouncement.length} / {ANNOUNCEMENT.max}
+              {watchAnnouncement.length} / {FORM_LITERAL.announcement.max.value}
             </p>
           </label>
           <ReactTextareaAutosize
@@ -92,7 +88,7 @@ const RoomTab = ({ roomId }: RoomTabProps) => {
               'dark:bg-dark-sub dark:focus:border-dark-point dark:focus:ring-dark-point'
             )}
             minRows={3}
-            maxLength={ANNOUNCEMENT.max}
+            maxLength={FORM_LITERAL.announcement.max.value}
             id="announcement"
             {...register('announcement')}
           />
@@ -122,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>