From 41befb07a9a5aaa67e08c892bddb566cb8915c39 Mon Sep 17 00:00:00 2001
From: JinJu <jin_jooo@naver.com>
Date: Thu, 13 Jun 2024 11:46:45 +0900
Subject: [PATCH] Setting prettier, eslint

---
 .eslintrc.json                                |  39 +--
 .prettierrc                                   |  10 +
 package.json                                  |   7 +-
 src/constants/color.ts                        |  50 +--
 src/constants/index.ts                        |  90 ++---
 src/constants/theme.ts                        |  34 +-
 src/constants/typography.ts                   |  46 +--
 .../BottomSheet/BottomSheet.stories.tsx       |  46 ++-
 src/core/components/BottomSheet/index.tsx     |  87 ++---
 .../components/BottomSheet/types/index.ts     |  10 +-
 .../Button/Button/Button.stories.tsx          |  88 ++---
 src/core/components/Button/Button/index.tsx   |  47 +--
 .../components/Button/Button/types/index.ts   |   6 +-
 .../Button/ButtonBase/constants/index.ts      |  66 ++--
 .../components/Button/ButtonBase/index.tsx    | 108 +++---
 .../Button/ButtonBase/types/index.ts          |  25 +-
 .../Button/IconButton/IconButton.stories.tsx  |  68 ++--
 .../Button/IconButton/constants/index.ts      |  22 +-
 .../components/Button/IconButton/index.tsx    |  43 +--
 .../Button/IconButton/types/index.ts          |   5 +-
 .../BasicCalendar/BasicCalendar.stories.tsx   |  16 +-
 .../Calendar/BasicCalendar/index.tsx          |  82 +++--
 .../DatePickerCalendar.stories.tsx            |  49 ++-
 .../DatePickerCalendar/constants/index.ts     |   4 +-
 .../Calendar/DatePickerCalendar/index.tsx     | 314 +++++++++++-------
 .../subs/CalendarComponentDaySubText.tsx      |  42 +--
 .../subs/CalendarComponentDayText.tsx         |  67 ++--
 .../types/DatePickerCalendarProps.ts          |  16 +-
 .../ScheduleCalendar.stories.tsx              |  82 ++---
 .../Calendar/ScheduleCalendar/index.tsx       |  52 +--
 .../subs/CalendarDayComponent.tsx             | 188 ++++++-----
 .../types/CalendarComponentProps.ts           |   7 +-
 .../Calendar/common/constants/index.ts        |   8 +-
 .../Calendar/common/hooks/useCalendar.ts      |  20 +-
 .../common/hooks/useMonthChangeEffect.tsx     |  40 ++-
 .../Calendar/common/subs/CalendarHeader.tsx   |  57 ++--
 .../common/subs/CalendarWeekdayComponent.tsx  |  40 ++-
 .../Calendar/common/types/CalendarDateDto.ts  |   2 +-
 .../Calendar/common/types/CalendarHeader.ts   |   7 +-
 .../common/types/UseCalendarResponse.ts       |   8 +-
 .../components/Checkbox/Checkbox.stories.tsx  |  28 +-
 .../components/Checkbox/constants/index.ts    |  10 +-
 src/core/components/Checkbox/index.tsx        |  74 +++--
 src/core/components/Checkbox/types/index.ts   |   7 +-
 .../components/Divider/Divider.stories.tsx    |  12 +-
 src/core/components/Divider/index.tsx         |   9 +-
 src/core/components/Drawer/Drawer.stories.tsx |  62 ++--
 src/core/components/Drawer/index.tsx          |  97 +++---
 src/core/components/Drawer/types/index.ts     |  16 +-
 .../DropdownBase/Dropdown.stories.tsx         |  50 ++-
 .../Dropdown/DropdownBase/DropdownItem.tsx    |  64 ++--
 .../Dropdown/DropdownBase/DropdownItems.tsx   |  44 +--
 .../Dropdown/DropdownBase/DropdownTrigger.tsx |  78 +++--
 .../Dropdown/DropdownBase/index.tsx           |  46 ++-
 .../Dropdown/DropdownBase/types/index.ts      |  24 +-
 .../DropdownFilter/DropdownFilter.stories.tsx |  26 +-
 .../DropdownFilter/DropdownFilterItem.tsx     |  44 +--
 .../DropdownFilter/DropdownFilterItems.tsx    |  37 ++-
 .../DropdownFilter/DropdownFilterTrigger.tsx  |  52 +--
 .../Dropdown/DropdownFilter/index.tsx         |  18 +-
 .../Dropdown/DropdownFilter/types/index.ts    |  21 +-
 .../DropdownSelect/DropdownSelect.stories.tsx |  27 +-
 .../DropdownSelect/DropdownSelectItem.tsx     |  44 +--
 .../DropdownSelect/DropdownSelectItems.tsx    |  37 ++-
 .../DropdownSelect/DropdownSelectTrigger.tsx  |  76 +++--
 .../Dropdown/DropdownSelect/index.tsx         |  18 +-
 .../Dropdown/DropdownSelect/types/index.ts    |  21 +-
 .../FormLabel/FormLabel.stories.tsx           |  38 ++-
 src/core/components/FormLabel/index.tsx       |  43 ++-
 src/core/components/FormLabel/types/index.ts  |   6 +-
 .../Input/InputBase/InputBase.stories.tsx     |  99 +++---
 src/core/components/Input/InputBase/index.tsx |  87 +++--
 .../components/Input/InputBase/types/index.ts |  16 +-
 .../Input/InputDatePicker/DatePicker.tsx      | 144 ++++----
 .../InputDatePicker.stories.tsx               |  78 +++--
 .../Input/InputDatePicker/index.tsx           | 132 ++++----
 .../Input/InputDatePicker/types/index.ts      |  59 +++-
 .../InputPassword/InputPassword.stories.tsx   |  27 +-
 .../components/Input/InputPassword/index.tsx  | 143 ++++----
 .../Input/InputPassword/types/index.ts        |  22 +-
 .../Input/InputSearch/InputSearch.stories.tsx |  39 +--
 .../Input/InputSearch/constants/index.ts      |  18 +-
 .../components/Input/InputSearch/index.tsx    | 120 +++----
 .../Input/InputSearch/types/index.ts          |  28 +-
 .../Input/InputSelect/InputSelect.stories.tsx |  42 +--
 .../components/Input/InputSelect/index.tsx    |  99 +++---
 .../Input/InputSelect/types/index.ts          |  14 +-
 .../InputTextArea/InputTextArea.stories.tsx   |  53 +--
 .../Input/InputTextArea/constants/index.ts    |  14 +-
 .../components/Input/InputTextArea/index.tsx  | 135 ++++----
 .../Input/InputTextArea/types/index.ts        |  33 +-
 .../InputTextField/InputTextField.stories.tsx |  53 +--
 .../components/Input/InputTextField/index.tsx | 133 ++++----
 .../Input/InputTextField/types/index.ts       |  23 +-
 .../hooks/effects/useValueChangeEffect.ts     |  10 +-
 src/core/components/Input/hooks/useInput.ts   |  41 ++-
 src/core/components/Label/Label.stories.tsx   |  68 ++--
 src/core/components/Label/constants/index.ts  |  14 +-
 src/core/components/Label/index.tsx           |  26 +-
 src/core/components/Label/types/index.ts      |   8 +-
 .../Modal/ModalBase/ModalBase.stories.tsx     |  65 ++--
 .../Modal/ModalBase/constants/index.ts        |  27 +-
 src/core/components/Modal/ModalBase/index.tsx |  67 ++--
 .../components/Modal/ModalBase/types/index.ts |  12 +-
 .../Modal/ModalPopUp/ModalPopUp.stories.tsx   |  63 ++--
 .../components/Modal/ModalPopUp/index.tsx     |  60 ++--
 .../Modal/ModalPopUp/types/index.ts           |  11 +-
 .../components/Modal/ModalPortal/index.tsx    |  10 +-
 src/core/components/Radio/Radio.stories.tsx   |  23 +-
 src/core/components/Radio/index.tsx           |  64 ++--
 src/core/components/Radio/types/index.ts      |   7 +-
 .../components/Section/Section.stories.tsx    |  26 +-
 .../components/Section/constants/index.ts     |  22 +-
 src/core/components/Section/index.tsx         |  49 ++-
 src/core/components/Section/types/index.ts    |   7 +-
 .../GeneralTab/GeneralTab.stories.tsx         |  32 +-
 .../Tab/GeneralTab/GeneralTab/index.tsx       |  42 ++-
 .../Tab/GeneralTab/GeneralTab/types/index.ts  |   7 +-
 .../GeneralTabItem/GeneralTabItem.stories.tsx |  16 +-
 .../Tab/GeneralTab/GeneralTabItem/index.tsx   |  68 ++--
 .../GeneralTab/GeneralTabItem/types/index.ts  |   5 +-
 .../TableTab/TableTab/TableTab.stories.tsx    |  30 +-
 .../Tab/TableTab/TableTab/index.tsx           |  41 ++-
 .../Tab/TableTab/TableTab/types/index.ts      |   4 +-
 .../TableTabItem/TableTabItem.stories.tsx     |  14 +-
 .../Tab/TableTab/TableTabItem/index.tsx       |  59 ++--
 .../Tab/TableTab/TableTabItem/types/index.ts  |   3 +-
 src/core/components/Table/Table.stories.tsx   | 121 +++----
 src/core/components/Table/Table.tsx           |  38 +--
 src/core/components/Table/TableBody.tsx       |  36 +-
 src/core/components/Table/TableCell.tsx       |  23 +-
 src/core/components/Table/TableContainer.tsx  |  48 ++-
 src/core/components/Table/TableHead.tsx       |  36 +-
 src/core/components/Table/TableRow.tsx        |  47 ++-
 src/core/components/Table/constants/index.ts  |  21 +-
 src/core/components/Table/types/index.ts      |  11 +-
 .../TextEditor/TextEditor.stories.tsx         |  36 +-
 src/core/components/TextEditor/index.tsx      |  44 +--
 src/core/components/Toggle/Toggle.stories.tsx |  58 ++--
 src/core/components/Toggle/constants/index.ts |  24 +-
 src/core/components/Toggle/index.tsx          |  52 +--
 src/core/components/Toggle/types/index.ts     |  13 +-
 .../components/Tooltip/Tooltip.stories.tsx    | 184 +++++-----
 src/core/components/Tooltip/index.tsx         |  16 +-
 .../Typography/Typography.stories.tsx         |  36 +-
 src/core/components/Typography/index.tsx      |  25 +-
 src/core/components/Typography/types/index.ts |   4 +-
 src/hooks/effects/useBlockScrollingEffect.ts  |   8 +-
 src/hooks/effects/useClickOutSideEffect.ts    |  11 +-
 src/hooks/useClickOutSide.ts                  |   4 +-
 src/index.ts                                  |  99 +++---
 src/styles/bbodek-theme.css                   |  39 ++-
 src/types/index.ts                            |  62 +++-
 src/utilities/utils.ts                        |   4 +-
 vite.config.ts                                |  23 +-
 yarn.lock                                     |  53 +++
 156 files changed, 3793 insertions(+), 3122 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.eslintrc.json b/.eslintrc.json
index 5508e60..db85065 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -5,42 +5,19 @@
 		"node": true,
 		"jest": true
 	},
-	"extends": [
-		"plugin:@typescript-eslint/recommended"
-	],
 	"parserOptions": {
 		"ecmaVersion": "latest",
 		"sourceType": "module"
 	},
 	"parser": "@typescript-eslint/parser",
-	"plugins": [
-		"@stylistic",
-		"react"
-	],
+	"plugins": ["prettier", "react"],
 	"rules": {
-		"@stylistic/jsx-indent": ["error", 2],
-		"@stylistic/quotes": ["error", "double"],
-		"@stylistic/object-curly-spacing": ["error", "always"],
-		"@stylistic/comma-dangle": ["error", "always-multiline"],
-		"@stylistic/eol-last": ["error", "always"],
-		"@stylistic/no-trailing-spaces": "error",
-		"@stylistic/no-multi-spaces": "error",
-		"@stylistic/comma-spacing": ["error", { "before": false, "after": true }],
-		"@stylistic/key-spacing": ["error", { "afterColon": true, "beforeColon": false }],
-		"@stylistic/semi": ["error", "always"],
-		"@stylistic/space-in-parens": ["error", "never"],
-		"@stylistic/arrow-spacing": "error",
-		"@stylistic/no-extra-semi": "error",
-		"@stylistic/array-bracket-spacing": ["error","always",{"singleValue": false}],
-		"@stylistic/comma-style": ["error","last"],
-		"@stylistic/array-element-newline" : ["error","consistent"],
-		"@stylistic/arrow-parens": ["error", "as-needed"],
-		"@stylistic/block-spacing": "error",
-		"@stylistic/brace-style": "error",
-		"@stylistic/jsx-equals-spacing": [2, "always"],
-		"@stylistic/function-call-argument-newline": ["error", "consistent"],
-		"@stylistic/no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
 		"react/jsx-first-prop-new-line": ["error", "multiline"],
-		"@typescript-eslint/no-inferrable-types": "off"
-	}
+		"@typescript-eslint/no-inferrable-types": "off",
+		"semi": [2, "always"]
+	},
+	"extends": [
+		"plugin:prettier/recommended",
+		"prettier"
+	]
 }
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..b61dfd2
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["clsx"]
+}
diff --git a/package.json b/package.json
index 7874b8b..43c2576 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
     "lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --fix",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build"
+    "storybook:build": "storybook build",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\""
   },
   "peerDependencies": {
     "@types/react": "18.2.0",
@@ -71,13 +72,17 @@
     "@typescript-eslint/parser": "6.11.0",
     "@vitejs/plugin-react": "4.0.3",
     "eslint": "8.54.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-config-standard-with-typescript": "39.1.1",
     "eslint-plugin-import": "2.29.0",
     "eslint-plugin-n": "16.3.1",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
+    "prettier": "3.1.1",
+    "prettier-plugin-tailwindcss": "0.5.11",
     "storybook": "7.5.3",
     "tailwind-merge": "2.0.0",
     "tsc-alias": "1.8.8",
diff --git a/src/constants/color.ts b/src/constants/color.ts
index 19ece57..efbdce2 100644
--- a/src/constants/color.ts
+++ b/src/constants/color.ts
@@ -1,27 +1,29 @@
 export const THEME_COLOR = {
-  WHITE: "white",
-  BLACK: "black",
-  GRAY_09: "gray-09",
-  GRAY_08: "gray-08",
-  GRAY_07: "gray-07",
-  GRAY_06: "gray-06",
-  GRAY_05: "gray-05",
-  GRAY_04: "gray-04",
-  GRAY_03: "gray-03",
-  GRAY_02: "gray-02",
-  GRAY_01: "gray-01",
-  GRAY_00: "gray-00",
-  PRIMARY_06: "primary-06",
-  PRIMARY_05: "primary-05",
-  PRIMARY_04: "primary-04",
-  PRIMARY_03: "primary-03",
-  PRIMARY_02: "primary-02",
-  PRIMARY_01: "primary-01",
-  PRIMARY_00: "primary-00",
-  ERROR: "error",
-  WARNING: "warning",
-  SUCCESS: "success",
-  TRANSPARENT: "transparent",
+  WHITE: 'white',
+  BLACK: 'black',
+  GRAY_09: 'gray-09',
+  GRAY_08: 'gray-08',
+  GRAY_07: 'gray-07',
+  GRAY_06: 'gray-06',
+  GRAY_05: 'gray-05',
+  GRAY_04: 'gray-04',
+  GRAY_03: 'gray-03',
+  GRAY_02: 'gray-02',
+  GRAY_01: 'gray-01',
+  GRAY_00: 'gray-00',
+  PRIMARY_06: 'primary-06',
+  PRIMARY_05: 'primary-05',
+  PRIMARY_04: 'primary-04',
+  PRIMARY_03: 'primary-03',
+  PRIMARY_02: 'primary-02',
+  PRIMARY_01: 'primary-01',
+  PRIMARY_00: 'primary-00',
+  ERROR: 'error',
+  WARNING: 'warning',
+  SUCCESS: 'success',
+  TRANSPARENT: 'transparent',
 };
 
-export const ColorOptions = Object.keys(THEME_COLOR).map(color => THEME_COLOR[color as keyof typeof THEME_COLOR]);
+export const ColorOptions = Object.keys(THEME_COLOR).map(
+  (color) => THEME_COLOR[color as keyof typeof THEME_COLOR],
+);
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 679ca25..6aae128 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,51 +1,51 @@
 export const ColorOptions = [
-  "white",
-  "black",
-  "gray-09",
-  "gray-08",
-  "gray-07",
-  "gray-06",
-  "gray-05",
-  "gray-04",
-  "gray-03",
-  "gray-02",
-  "gray-01",
-  "gray-00",
-  "primary-06",
-  "primary-05",
-  "primary-04",
-  "primary-03",
-  "primary-02",
-  "primary-01",
-  "primary-00",
-  "error",
-  "warning",
-  "success",
-  "transparent",
+  'white',
+  'black',
+  'gray-09',
+  'gray-08',
+  'gray-07',
+  'gray-06',
+  'gray-05',
+  'gray-04',
+  'gray-03',
+  'gray-02',
+  'gray-01',
+  'gray-00',
+  'primary-06',
+  'primary-05',
+  'primary-04',
+  'primary-03',
+  'primary-02',
+  'primary-01',
+  'primary-00',
+  'error',
+  'warning',
+  'success',
+  'transparent',
 ];
 
 export const TypographyOptions = [
-  "head-01-regular",
-  "head-01-medium",
-  "head-01-bold",
-  "head-02-regular",
-  "head-02-medium",
-  "head-02-bold",
-  "subhead-01-regular",
-  "subhead-01-medium",
-  "subhead-01-bold",
-  "subhead-02-regular",
-  "subhead-02-medium",
-  "subhead-02-bold",
-  "body-01-regular",
-  "body-01-medium",
-  "body-01-bold",
-  "body-02-regular",
-  "body-02-medium",
-  "body-02-bold",
-  "body-03-regular",
-  "body-03-medium",
-  "body-03-bold",
+  'head-01-regular',
+  'head-01-medium',
+  'head-01-bold',
+  'head-02-regular',
+  'head-02-medium',
+  'head-02-bold',
+  'subhead-01-regular',
+  'subhead-01-medium',
+  'subhead-01-bold',
+  'subhead-02-regular',
+  'subhead-02-medium',
+  'subhead-02-bold',
+  'body-01-regular',
+  'body-01-medium',
+  'body-01-bold',
+  'body-02-regular',
+  'body-02-medium',
+  'body-02-bold',
+  'body-03-regular',
+  'body-03-medium',
+  'body-03-bold',
 ];
 
 export const Weekdays = {
@@ -58,4 +58,4 @@ export const Weekdays = {
   SATURDAY: 6,
 };
 
-export const HOLIDAYS = [ Weekdays["SUNDAY"], Weekdays["SATURDAY"] ];
+export const HOLIDAYS = [Weekdays['SUNDAY'], Weekdays['SATURDAY']];
diff --git a/src/constants/theme.ts b/src/constants/theme.ts
index 6c803f8..c353976 100644
--- a/src/constants/theme.ts
+++ b/src/constants/theme.ts
@@ -1,23 +1,25 @@
-import { ColorThemeType } from "@/types";
+import { ColorThemeType } from '@/types';
 
 export const COLOR_THEME = {
-  PRIMARY: "primary",
-  ERROR: "error",
-  WARNING: "warning",
-  SUCCESS: "success",
-  SECONDARY: "secondary",
-  GRAY: "gray",
-  WHITE: "white",
+  PRIMARY: 'primary',
+  ERROR: 'error',
+  WARNING: 'warning',
+  SUCCESS: 'success',
+  SECONDARY: 'secondary',
+  GRAY: 'gray',
+  WHITE: 'white',
 } as const;
 
 export const COLOR_THEME_STYLES: Record<ColorThemeType, string> = {
-  [COLOR_THEME["PRIMARY"]]: "bg-primary-03 text-white",
-  [COLOR_THEME["SECONDARY"]]: "text-primary-03 bg-primary-00",
-  [COLOR_THEME["ERROR"]]: "text-rose-600 bg-rose-300/20",
-  [COLOR_THEME["WARNING"]]: "text-amber-600 bg-amber-300/20",
-  [COLOR_THEME["SUCCESS"]]: "text-green-600 bg-green-300/20",
-  [COLOR_THEME["GRAY"]]: "text-gray-07 bg-gray-02",
-  [COLOR_THEME["WHITE"]]: "text-gray-06 bg-white border border-gray-03",
+  [COLOR_THEME['PRIMARY']]: 'bg-primary-03 text-white',
+  [COLOR_THEME['SECONDARY']]: 'text-primary-03 bg-primary-00',
+  [COLOR_THEME['ERROR']]: 'text-rose-600 bg-rose-300/20',
+  [COLOR_THEME['WARNING']]: 'text-amber-600 bg-amber-300/20',
+  [COLOR_THEME['SUCCESS']]: 'text-green-600 bg-green-300/20',
+  [COLOR_THEME['GRAY']]: 'text-gray-07 bg-gray-02',
+  [COLOR_THEME['WHITE']]: 'text-gray-06 bg-white border border-gray-03',
 };
 
-export const colorThemeOptions = Object.values(COLOR_THEME).map(theme => theme);
+export const colorThemeOptions = Object.values(COLOR_THEME).map(
+  (theme) => theme,
+);
diff --git a/src/constants/typography.ts b/src/constants/typography.ts
index 3a0cdb4..45364f8 100644
--- a/src/constants/typography.ts
+++ b/src/constants/typography.ts
@@ -1,25 +1,27 @@
 export const THEME_TYPOGRAPHY = {
-  HEAD_01_REGULAR: "head-01-regular",
-  HEAD_01_MEDIUM: "head-01-medium",
-  HEAD_01_BOLD: "head-01-bold",
-  HEAD_02_REGULAR: "head-02-regular",
-  HEAD_02_MEDIUM: "head-02-medium",
-  HEAD_02_BOLD: "head-02-bold",
-  SUBHEAD_01_REGULAR: "subhead-01-regular",
-  SUBHEAD_01_MEDIUM: "subhead-01-medium",
-  SUBHEAD_01_BOLD: "subhead-01-bold",
-  SUBHEAD_02_REGULAR: "subhead-02-regular",
-  SUBHEAD_02_MEDIUM: "subhead-02-medium",
-  SUBHEAD_02_BOLD: "subhead-02-bold",
-  BODY_01_REGULAR: "body-01-regular",
-  BODY_01_MEDIUM: "body-01-medium",
-  BODY_01_BOLD: "body-01-bold",
-  BODY_02_REGULAR: "body-02-regular",
-  BODY_02_MEDIUM: "body-02-medium",
-  BODY_02_BOLD: "body-02-bold",
-  BODY_03_REGULAR: "body-03-regular",
-  BODY_03_MEDIUM: "body-03-medium",
-  BODY_03_BOLD: "body-03-bold",
+  HEAD_01_REGULAR: 'head-01-regular',
+  HEAD_01_MEDIUM: 'head-01-medium',
+  HEAD_01_BOLD: 'head-01-bold',
+  HEAD_02_REGULAR: 'head-02-regular',
+  HEAD_02_MEDIUM: 'head-02-medium',
+  HEAD_02_BOLD: 'head-02-bold',
+  SUBHEAD_01_REGULAR: 'subhead-01-regular',
+  SUBHEAD_01_MEDIUM: 'subhead-01-medium',
+  SUBHEAD_01_BOLD: 'subhead-01-bold',
+  SUBHEAD_02_REGULAR: 'subhead-02-regular',
+  SUBHEAD_02_MEDIUM: 'subhead-02-medium',
+  SUBHEAD_02_BOLD: 'subhead-02-bold',
+  BODY_01_REGULAR: 'body-01-regular',
+  BODY_01_MEDIUM: 'body-01-medium',
+  BODY_01_BOLD: 'body-01-bold',
+  BODY_02_REGULAR: 'body-02-regular',
+  BODY_02_MEDIUM: 'body-02-medium',
+  BODY_02_BOLD: 'body-02-bold',
+  BODY_03_REGULAR: 'body-03-regular',
+  BODY_03_MEDIUM: 'body-03-medium',
+  BODY_03_BOLD: 'body-03-bold',
 };
 
-export const TypographyOptions = Object.keys(THEME_TYPOGRAPHY).map(color => THEME_TYPOGRAPHY[color as keyof typeof THEME_TYPOGRAPHY]);
+export const TypographyOptions = Object.keys(THEME_TYPOGRAPHY).map(
+  (color) => THEME_TYPOGRAPHY[color as keyof typeof THEME_TYPOGRAPHY],
+);
diff --git a/src/core/components/BottomSheet/BottomSheet.stories.tsx b/src/core/components/BottomSheet/BottomSheet.stories.tsx
index 48fa7bb..90c9e92 100644
--- a/src/core/components/BottomSheet/BottomSheet.stories.tsx
+++ b/src/core/components/BottomSheet/BottomSheet.stories.tsx
@@ -1,29 +1,29 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import { default as BottomSheet } from "./index";
-import { BottomSheetProps } from "./types";
+import { default as BottomSheet } from './index';
+import { BottomSheetProps } from './types';
 
 const meta = {
-  title: "core/BottomSheet",
+  title: 'core/BottomSheet',
   component: BottomSheet,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
   argTypes: {
     target: {
-      control: "text",
-      defaultValue: "modal",
-      description: "BottomSheet Render Position Element id",
+      control: 'text',
+      defaultValue: 'modal',
+      description: 'BottomSheet Render Position Element id',
     },
     isOpen: {
-      control: "boolean",
+      control: 'boolean',
       defaultValue: false,
-      description: "Open Modal",
+      description: 'Open Modal',
     },
     onClose: {
-      action: "clicked",
-      description: "BottomSheet Close Function",
+      action: 'clicked',
+      description: 'BottomSheet Close Function',
     },
   },
 } satisfies Meta<typeof BottomSheet>;
@@ -31,25 +31,23 @@ const meta = {
 export default meta;
 
 export const Default = (props: BottomSheetProps) => {
-  const [ isOpen, setIsOpen ] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const onToggle = () => setIsOpen(v => !v);
+  const onToggle = () => setIsOpen((v) => !v);
 
   return (
     <>
-      <div className = "flex h-[calc(100vh-4rem)]">
-        <main className = "relative flex-1">
-          <div id = {props.target ?? "bar"} />
+      <div className='flex h-[calc(100vh-4rem)]'>
+        <main className='relative flex-1'>
+          <div id={props.target ?? 'bar'} />
           <BottomSheet
-            target = {props.target ?? "bar"}
-            isOpen = {props.isOpen || isOpen}
-            onClose = {onToggle}
+            target={props.target ?? 'bar'}
+            isOpen={props.isOpen || isOpen}
+            onClose={onToggle}
           >
             BottomSheet
           </BottomSheet>
-          <button onClick = {onToggle}>
-            BottomSheet Open!!
-          </button>
+          <button onClick={onToggle}>BottomSheet Open!!</button>
         </main>
       </div>
     </>
diff --git a/src/core/components/BottomSheet/index.tsx b/src/core/components/BottomSheet/index.tsx
index dd98f6c..5740816 100644
--- a/src/core/components/BottomSheet/index.tsx
+++ b/src/core/components/BottomSheet/index.tsx
@@ -1,53 +1,62 @@
-import { X } from "@phosphor-icons/react";
-import clsx from "clsx";
-import { PropsWithChildren, forwardRef } from "react";
+import { X } from '@phosphor-icons/react';
+import clsx from 'clsx';
+import { PropsWithChildren, forwardRef } from 'react';
 
-import { useBlockScrollingEffect } from "@/hooks/effects/useBlockScrollingEffect";
-import ModalBase from "../Modal/ModalBase";
-import { VARIANTS } from "../Modal/ModalBase/constants";
-import Section from "../Section";
-import { BottomSheetProps } from "./types";
+import { useBlockScrollingEffect } from '@/hooks/effects/useBlockScrollingEffect';
+import ModalBase from '../Modal/ModalBase';
+import { VARIANTS } from '../Modal/ModalBase/constants';
+import Section from '../Section';
+import { BottomSheetProps } from './types';
 
-const BottomSheet = forwardRef((
+const BottomSheet = forwardRef(
+  (
     {
       onClose,
       children,
       isOpen,
       useCloseBtn = false,
       ...props
-     }: PropsWithChildren<BottomSheetProps>,
-     ref: React.Ref<HTMLDialogElement>,
+    }: PropsWithChildren<BottomSheetProps>,
+    ref: React.Ref<HTMLDialogElement>,
   ) => {
-  const { target, className, ...rest } = props;
-  const CloseIcon = <X size = "24" fill = "#343330"/>;
+    const { target, className, ...rest } = props;
+    const CloseIcon = <X size='24' fill='#343330' />;
 
-  useBlockScrollingEffect(isOpen);
+    useBlockScrollingEffect(isOpen);
 
-  return (
-    <ModalBase
-      isOpen = {isOpen}
-      target = {target ?? "modal"}
-      ref = {ref}
-      variants = {VARIANTS["BOTTOM_SHEET"]}
-      {...rest}
-    >
-      <Section
-        element = "div"
-        className = {clsx("h-full rounded-t-xl animate-bottom-sheet p-4", className)}
-        hasRounded = {false}
-        hasShadow
+    return (
+      <ModalBase
+        isOpen={isOpen}
+        target={target ?? 'modal'}
+        ref={ref}
+        variants={VARIANTS['BOTTOM_SHEET']}
+        {...rest}
       >
-        {useCloseBtn ? (
-          <div className = "flex mb-4">
-            <button className = "ml-auto" onClick = {onClose} aria-label = "창 닫기">
-              {CloseIcon}
-            </button>
-          </div>
-        ) : null}
-        {children}
-      </Section>
-    </ModalBase>
-  );
-});
+        <Section
+          element='div'
+          className={clsx(
+            'h-full animate-bottom-sheet rounded-t-xl p-4',
+            className,
+          )}
+          hasRounded={false}
+          hasShadow
+        >
+          {useCloseBtn ? (
+            <div className='mb-4 flex'>
+              <button
+                className='ml-auto'
+                onClick={onClose}
+                aria-label='창 닫기'
+              >
+                {CloseIcon}
+              </button>
+            </div>
+          ) : null}
+          {children}
+        </Section>
+      </ModalBase>
+    );
+  },
+);
 
 export default BottomSheet;
diff --git a/src/core/components/BottomSheet/types/index.ts b/src/core/components/BottomSheet/types/index.ts
index 4d40c90..8fda8fb 100644
--- a/src/core/components/BottomSheet/types/index.ts
+++ b/src/core/components/BottomSheet/types/index.ts
@@ -1,8 +1,10 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes } from 'react';
 
-import { ModalBaseProps } from "../../Modal/ModalBase/types";
+import { ModalBaseProps } from '../../Modal/ModalBase/types';
 
-export interface BottomSheetProps extends Pick<ModalBaseProps, "target" | "isOpen">, Omit<HTMLAttributes<HTMLElement>, "title"> {
+export interface BottomSheetProps
+  extends Pick<ModalBaseProps, 'target' | 'isOpen'>,
+    Omit<HTMLAttributes<HTMLElement>, 'title'> {
   useCloseBtn?: boolean;
-  onClose: ModalBaseProps["onClose"];
+  onClose: ModalBaseProps['onClose'];
 }
diff --git a/src/core/components/Button/Button/Button.stories.tsx b/src/core/components/Button/Button/Button.stories.tsx
index b518700..de5b032 100644
--- a/src/core/components/Button/Button/Button.stories.tsx
+++ b/src/core/components/Button/Button/Button.stories.tsx
@@ -1,70 +1,72 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import { TypographyOptions } from "@/constants";
-import { ColorOptions } from "@/constants/color";
-import { GAP, ROUNDED, SIZE } from "../ButtonBase/constants";
-import Button from "./index";
-import { ButtonProps } from "./types";
+import { TypographyOptions } from '@/constants';
+import { ColorOptions } from '@/constants/color';
+import { GAP, ROUNDED, SIZE } from '../ButtonBase/constants';
+import Button from './index';
+import { ButtonProps } from './types';
 
 const meta = {
-  title: "core/Button",
+  title: 'core/Button',
   component: Button,
   argTypes: {
     theme: {
-      control: "select",
+      control: 'select',
       options: TypographyOptions,
-      description: "Button Typography Theme",
+      description: 'Button Typography Theme',
     },
     color: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      description: "Button Typography Color",
+      description: 'Button Typography Color',
     },
     backgroundColor: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      defaultValue: "gray-08",
-      description: "Button Background Color",
+      defaultValue: 'gray-08',
+      description: 'Button Background Color',
     },
     size: {
-      control: "select",
-      options: Object.keys(SIZE).map(size => SIZE[size as keyof typeof SIZE]),
-      description: "Button Size",
+      control: 'select',
+      options: Object.keys(SIZE).map((size) => SIZE[size as keyof typeof SIZE]),
+      description: 'Button Size',
     },
     gap: {
-      control: "select",
-      options: Object.keys(GAP).map(gap => GAP[gap as keyof typeof GAP]),
-      description: "Button Size",
+      control: 'select',
+      options: Object.keys(GAP).map((gap) => GAP[gap as keyof typeof GAP]),
+      description: 'Button Size',
     },
     rounded: {
-      control: "select",
-      options: Object.keys(ROUNDED).map(rounded => ROUNDED[rounded as keyof typeof ROUNDED]),
-      description: "Button Size",
+      control: 'select',
+      options: Object.keys(ROUNDED).map(
+        (rounded) => ROUNDED[rounded as keyof typeof ROUNDED],
+      ),
+      description: 'Button Size',
     },
     borderColor: {
-      control: "select",
-      options: [ "gray-04", "gray-03", "gray-02", "gray-01" ],
-      description: "Button Size",
+      control: 'select',
+      options: ['gray-04', 'gray-03', 'gray-02', 'gray-01'],
+      description: 'Button Size',
     },
     leftIcon: {
-      control: "text",
-      description: "Button Left Size",
+      control: 'text',
+      description: 'Button Left Size',
     },
     content: {
-      control: "text",
-      description: "Button Text",
+      control: 'text',
+      description: 'Button Text',
     },
     rightIcon: {
-      control: "text",
-      description: "Button Right Size",
+      control: 'text',
+      description: 'Button Right Size',
     },
     hasUnderline: {
-      control: "boolean",
-      description: "Button With Underline",
+      control: 'boolean',
+      description: 'Button With Underline',
     },
     disabled: {
-      control: "boolean",
-      description: "Button With disabled",
+      control: 'boolean',
+      description: 'Button With disabled',
     },
   },
 } satisfies Meta<typeof Button>;
@@ -76,13 +78,13 @@ export const Default = (props: ButtonProps) => {
 
   return (
     <Button
-      theme = {theme}
-      color = {color ?? "white"}
-      backgroundColor = {backgroundColor ?? "primary-03"}
-      size = {size ?? SIZE["SIZE_48"]}
-      content = {content ?? "스케줄 등록하기"}
-      className = "w-[427px]"
-      { ...rest }
+      theme={theme}
+      color={color ?? 'white'}
+      backgroundColor={backgroundColor ?? 'primary-03'}
+      size={size ?? SIZE['SIZE_48']}
+      content={content ?? '스케줄 등록하기'}
+      className='w-[427px]'
+      {...rest}
     />
   );
 };
diff --git a/src/core/components/Button/Button/index.tsx b/src/core/components/Button/Button/index.tsx
index 5c9068a..89e8efd 100644
--- a/src/core/components/Button/Button/index.tsx
+++ b/src/core/components/Button/Button/index.tsx
@@ -1,27 +1,30 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
-import ButtonBase from "../ButtonBase";
-import { ButtonProps } from "./types";
+import ButtonBase from '../ButtonBase';
+import { ButtonProps } from './types';
 
-const Button = forwardRef(({
-  content,
-  hasUnderline = false,
-  leftIcon,
-  rightIcon,
-  ...props
-}: ButtonProps,
-ref: React.Ref<HTMLButtonElement>,
-) => {
-  const hasIcon = (leftIcon || rightIcon) ? true : false;
+const Button = forwardRef(
+  (
+    {
+      content,
+      hasUnderline = false,
+      leftIcon,
+      rightIcon,
+      ...props
+    }: ButtonProps,
+    ref: React.Ref<HTMLButtonElement>,
+  ) => {
+    const hasIcon = leftIcon || rightIcon ? true : false;
 
-  return (
-    <ButtonBase ref = {ref} hasIcon = {hasIcon} {...props}>
-      {leftIcon && <div>{leftIcon}</div>}
-      <span className = {clsx(hasUnderline && "underline")}>{content}</span>
-      {rightIcon && <div>{rightIcon}</div>}
-    </ButtonBase>
-  );
-});
+    return (
+      <ButtonBase ref={ref} hasIcon={hasIcon} {...props}>
+        {leftIcon && <div>{leftIcon}</div>}
+        <span className={clsx(hasUnderline && 'underline')}>{content}</span>
+        {rightIcon && <div>{rightIcon}</div>}
+      </ButtonBase>
+    );
+  },
+);
 
 export default Button;
diff --git a/src/core/components/Button/Button/types/index.ts b/src/core/components/Button/Button/types/index.ts
index 5515856..5b726ae 100644
--- a/src/core/components/Button/Button/types/index.ts
+++ b/src/core/components/Button/Button/types/index.ts
@@ -1,7 +1,7 @@
-import { ButtonBaseProps } from "../../ButtonBase/types";
+import { ButtonBaseProps } from '../../ButtonBase/types';
 
-export interface ButtonProps extends Omit<ButtonBaseProps, "hasIcon"> {
-  hasUnderline?: boolean
+export interface ButtonProps extends Omit<ButtonBaseProps, 'hasIcon'> {
+  hasUnderline?: boolean;
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
   content: string;
diff --git a/src/core/components/Button/ButtonBase/constants/index.ts b/src/core/components/Button/ButtonBase/constants/index.ts
index d4a8320..8b441da 100644
--- a/src/core/components/Button/ButtonBase/constants/index.ts
+++ b/src/core/components/Button/ButtonBase/constants/index.ts
@@ -1,51 +1,51 @@
-import { GapType, RoundedType, SizeType } from "../types";
+import { GapType, RoundedType, SizeType } from '../types';
 
 export const SIZE = {
-  SIZE_60: "h-60",
-  SIZE_56: "h-56",
-  SIZE_52: "h-52",
-  SIZE_49: "h-49",
-  SIZE_48: "h-48",
-  SIZE_40: "h-40",
-  SIZE_29: "h-29",
-  SIZE_24: "h-24",
-  SIZE_20: "h-20",
+  SIZE_60: 'h-60',
+  SIZE_56: 'h-56',
+  SIZE_52: 'h-52',
+  SIZE_49: 'h-49',
+  SIZE_48: 'h-48',
+  SIZE_40: 'h-40',
+  SIZE_29: 'h-29',
+  SIZE_24: 'h-24',
+  SIZE_20: 'h-20',
 } as const;
 
 export const ROUNDED = {
-  ROUNDED_FULL: "rounded-full",
-  ROUNDED_12: "rounded-12",
-  ROUNDED_6: "rounded-6",
-  ROUNDED_2: "rounded-2",
+  ROUNDED_FULL: 'rounded-full',
+  ROUNDED_12: 'rounded-12',
+  ROUNDED_6: 'rounded-6',
+  ROUNDED_2: 'rounded-2',
 } as const;
 
 export const GAP = {
-  GAP_12: "gap-12",
-  GAP_10: "gap-10",
-  GAP_8: "gap-8",
+  GAP_12: 'gap-12',
+  GAP_10: 'gap-10',
+  GAP_8: 'gap-8',
 } as const;
 
 export const BUTTON_SIZE: Record<SizeType, string> = {
-  [SIZE["SIZE_60"]]: "h-[3.75rem]",
-  [SIZE["SIZE_56"]]: "h-14",
-  [SIZE["SIZE_52"]]: "h-[3.25rem]",
-  [SIZE["SIZE_49"]]: "h-[3.0625rem]",
-  [SIZE["SIZE_48"]]: "h-12",
-  [SIZE["SIZE_40"]]: "h-10",
-  [SIZE["SIZE_29"]]: "h-[1.8125rem]",
-  [SIZE["SIZE_24"]]: "h-6",
-  [SIZE["SIZE_20"]]: "h-5",
+  [SIZE['SIZE_60']]: 'h-[3.75rem]',
+  [SIZE['SIZE_56']]: 'h-14',
+  [SIZE['SIZE_52']]: 'h-[3.25rem]',
+  [SIZE['SIZE_49']]: 'h-[3.0625rem]',
+  [SIZE['SIZE_48']]: 'h-12',
+  [SIZE['SIZE_40']]: 'h-10',
+  [SIZE['SIZE_29']]: 'h-[1.8125rem]',
+  [SIZE['SIZE_24']]: 'h-6',
+  [SIZE['SIZE_20']]: 'h-5',
 };
 
 export const BUTTON_ROUNDED: Record<RoundedType, string> = {
-  [ROUNDED["ROUNDED_FULL"]]: "rounded-full",
-  [ROUNDED["ROUNDED_12"]]: "rounded-xl",
-  [ROUNDED["ROUNDED_6"]]: "rounded-md",
-  [ROUNDED["ROUNDED_2"]]: "rounded-sm",
+  [ROUNDED['ROUNDED_FULL']]: 'rounded-full',
+  [ROUNDED['ROUNDED_12']]: 'rounded-xl',
+  [ROUNDED['ROUNDED_6']]: 'rounded-md',
+  [ROUNDED['ROUNDED_2']]: 'rounded-sm',
 };
 
 export const BUTTON_GAP: Record<GapType, string> = {
-  [GAP["GAP_12"]]: "gap-x-3",
-  [GAP["GAP_10"]]: "gap-x-2.5",
-  [GAP["GAP_8"]]: "gap-x-2",
+  [GAP['GAP_12']]: 'gap-x-3',
+  [GAP['GAP_10']]: 'gap-x-2.5',
+  [GAP['GAP_8']]: 'gap-x-2',
 };
diff --git a/src/core/components/Button/ButtonBase/index.tsx b/src/core/components/Button/ButtonBase/index.tsx
index 2e2afc0..361ac89 100644
--- a/src/core/components/Button/ButtonBase/index.tsx
+++ b/src/core/components/Button/ButtonBase/index.tsx
@@ -1,53 +1,65 @@
-import clsx from "clsx";
-import { PropsWithChildren, forwardRef } from "react";
+import clsx from 'clsx';
+import { PropsWithChildren, forwardRef } from 'react';
 
-import { COLOR_THEME_STYLES } from "@/constants/theme";
-import { THEME_TYPOGRAPHY } from "@/constants/typography";
-import { BUTTON_GAP, BUTTON_ROUNDED, BUTTON_SIZE, GAP, ROUNDED, SIZE } from "./constants";
-import { ButtonBaseProps, SizeType } from "./types";
+import { COLOR_THEME_STYLES } from '@/constants/theme';
+import { THEME_TYPOGRAPHY } from '@/constants/typography';
+import {
+  BUTTON_GAP,
+  BUTTON_ROUNDED,
+  BUTTON_SIZE,
+  GAP,
+  ROUNDED,
+  SIZE,
+} from './constants';
+import { ButtonBaseProps, SizeType } from './types';
 
-const ButtonBase = forwardRef(({
-  colorTheme,
-  color,
-  backgroundColor,
-  size,
-  gap = GAP["GAP_12"],
-  rounded = ROUNDED["ROUNDED_12"],
-  hasIcon = false,
-  borderColor,
-  disabled,
-  children,
-  ...props
-}: PropsWithChildren<ButtonBaseProps>,
-ref: React.Ref<HTMLButtonElement>,
-) => {
-  const { className, theme, ...rest } = props;
-  const MINI_SIZES: SizeType[] = [ SIZE["SIZE_24"], SIZE["SIZE_20"] ];
-  const isMiniSize = MINI_SIZES.includes(size);
-  const defaultButtonTheme = !isMiniSize ? THEME_TYPOGRAPHY["BODY_01_BOLD"] : THEME_TYPOGRAPHY["BODY_03_BOLD"];
+const ButtonBase = forwardRef(
+  (
+    {
+      colorTheme,
+      color,
+      backgroundColor,
+      size,
+      gap = GAP['GAP_12'],
+      rounded = ROUNDED['ROUNDED_12'],
+      hasIcon = false,
+      borderColor,
+      disabled,
+      children,
+      ...props
+    }: PropsWithChildren<ButtonBaseProps>,
+    ref: React.Ref<HTMLButtonElement>,
+  ) => {
+    const { className, theme, ...rest } = props;
+    const MINI_SIZES: SizeType[] = [SIZE['SIZE_24'], SIZE['SIZE_20']];
+    const isMiniSize = MINI_SIZES.includes(size);
+    const defaultButtonTheme = !isMiniSize
+      ? THEME_TYPOGRAPHY['BODY_01_BOLD']
+      : THEME_TYPOGRAPHY['BODY_03_BOLD'];
 
-  return (
-    <button
-      ref = {ref}
-      type = {"button"}
-      className = {clsx(
-        "flex items-center justify-center disabled:cursor-not-allowed disabled:text-white disabled:bg-gray-03 disabled:border-gray-03",
-        `text-${theme ?? defaultButtonTheme}`,
-        !colorTheme && color && `text-${color}`,
-        !colorTheme && backgroundColor && `bg-${backgroundColor}`,
-        colorTheme && COLOR_THEME_STYLES[colorTheme],
-        BUTTON_SIZE[size],
-        hasIcon && gap && BUTTON_GAP[gap],
-        BUTTON_ROUNDED[rounded],
-        borderColor && `border border-${borderColor}`,
-        className,
-      )}
-      disabled = {disabled}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-});
+    return (
+      <button
+        ref={ref}
+        type={'button'}
+        className={clsx(
+          'flex items-center justify-center disabled:cursor-not-allowed disabled:border-gray-03 disabled:bg-gray-03 disabled:text-white',
+          `text-${theme ?? defaultButtonTheme}`,
+          !colorTheme && color && `text-${color}`,
+          !colorTheme && backgroundColor && `bg-${backgroundColor}`,
+          colorTheme && COLOR_THEME_STYLES[colorTheme],
+          BUTTON_SIZE[size],
+          hasIcon && gap && BUTTON_GAP[gap],
+          BUTTON_ROUNDED[rounded],
+          borderColor && `border border-${borderColor}`,
+          className,
+        )}
+        disabled={disabled}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+  },
+);
 
 export default ButtonBase;
diff --git a/src/core/components/Button/ButtonBase/types/index.ts b/src/core/components/Button/ButtonBase/types/index.ts
index 2dab228..b7ee33e 100644
--- a/src/core/components/Button/ButtonBase/types/index.ts
+++ b/src/core/components/Button/ButtonBase/types/index.ts
@@ -1,19 +1,26 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes } from 'react';
 
-import { ColorThemeType, ThemeColors, ThemeTypography } from "@/types";
-import { GAP, ROUNDED, SIZE } from "../constants";
+import { ColorThemeType, ThemeColors, ThemeTypography } from '@/types';
+import { GAP, ROUNDED, SIZE } from '../constants';
 
-export type ThemeType = Extract<ThemeTypography, "body-01-bold" | "body-02-bold" | "body-02-bold">;
+export type ThemeType = Extract<
+  ThemeTypography,
+  'body-01-bold' | 'body-02-bold' | 'body-02-bold'
+>;
 
-export type SizeType = typeof SIZE[keyof typeof SIZE];
+export type SizeType = (typeof SIZE)[keyof typeof SIZE];
 
-export type RoundedType = typeof ROUNDED[keyof typeof ROUNDED];
+export type RoundedType = (typeof ROUNDED)[keyof typeof ROUNDED];
 
-export type BorderColorType = Extract<ThemeColors, "gray-04" | "gray-03" | "gray-02" | "gray-01">;
+export type BorderColorType = Extract<
+  ThemeColors,
+  'gray-04' | 'gray-03' | 'gray-02' | 'gray-01'
+>;
 
-export type GapType = typeof GAP[keyof typeof GAP];
+export type GapType = (typeof GAP)[keyof typeof GAP];
 
-export interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonBaseProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
   colorTheme?: ColorThemeType;
   theme?: ThemeType;
   color?: ThemeColors;
diff --git a/src/core/components/Button/IconButton/IconButton.stories.tsx b/src/core/components/Button/IconButton/IconButton.stories.tsx
index ae4b9e4..d0bea93 100644
--- a/src/core/components/Button/IconButton/IconButton.stories.tsx
+++ b/src/core/components/Button/IconButton/IconButton.stories.tsx
@@ -1,54 +1,56 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import { TypographyOptions } from "@/constants";
-import { ColorOptions } from "@/constants/color";
-import { ROUNDED, SIZE } from "../ButtonBase/constants";
-import { default as IconButton } from "./index";
-import { IconButtonProps } from "./types";
+import { TypographyOptions } from '@/constants';
+import { ColorOptions } from '@/constants/color';
+import { ROUNDED, SIZE } from '../ButtonBase/constants';
+import { default as IconButton } from './index';
+import { IconButtonProps } from './types';
 
 const meta = {
-  title: "core/Button/IconButton",
+  title: 'core/Button/IconButton',
   component: IconButton,
   argTypes: {
     theme: {
-      control: "select",
+      control: 'select',
       options: TypographyOptions,
-      description: "Button Typography Theme",
+      description: 'Button Typography Theme',
     },
     color: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      description: "Button Typography Color",
+      description: 'Button Typography Color',
     },
     backgroundColor: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      defaultValue: "gray-08",
-      description: "Button Background Color",
+      defaultValue: 'gray-08',
+      description: 'Button Background Color',
     },
     size: {
-      control: "select",
-      options: Object.keys(SIZE).map(size => SIZE[size as keyof typeof SIZE]),
-      description: "Button Size",
+      control: 'select',
+      options: Object.keys(SIZE).map((size) => SIZE[size as keyof typeof SIZE]),
+      description: 'Button Size',
     },
     rounded: {
-      control: "select",
-      options: Object.keys(ROUNDED).map(rounded => ROUNDED[rounded as keyof typeof ROUNDED]),
-      description: "Button Size",
+      control: 'select',
+      options: Object.keys(ROUNDED).map(
+        (rounded) => ROUNDED[rounded as keyof typeof ROUNDED],
+      ),
+      description: 'Button Size',
     },
     borderColor: {
-      control: "select",
-      options: [ "gray-04", "gray-03", "gray-02", "gray-01" ],
-      description: "Button Size",
+      control: 'select',
+      options: ['gray-04', 'gray-03', 'gray-02', 'gray-01'],
+      description: 'Button Size',
     },
 
     content: {
-      control: "text",
-      description: "Button Text",
+      control: 'text',
+      description: 'Button Text',
     },
     disabled: {
-      control: "boolean",
-      description: "Button With disabled",
+      control: 'boolean',
+      description: 'Button With disabled',
     },
   },
 } satisfies Meta<typeof IconButton>;
@@ -60,12 +62,12 @@ export const Default = (props: IconButtonProps) => {
 
   return (
     <IconButton
-      theme = {theme}
-      color = {color ?? "white"}
-      backgroundColor = {backgroundColor ?? "primary-03"}
-      size = {size ?? SIZE["SIZE_48"]}
-      icon = {icon ?? "아이콘"}
-      { ...rest }
+      theme={theme}
+      color={color ?? 'white'}
+      backgroundColor={backgroundColor ?? 'primary-03'}
+      size={size ?? SIZE['SIZE_48']}
+      icon={icon ?? '아이콘'}
+      {...rest}
     />
   );
 };
diff --git a/src/core/components/Button/IconButton/constants/index.ts b/src/core/components/Button/IconButton/constants/index.ts
index ecfd313..d68d59e 100644
--- a/src/core/components/Button/IconButton/constants/index.ts
+++ b/src/core/components/Button/IconButton/constants/index.ts
@@ -1,14 +1,14 @@
-import { SIZE } from "../../ButtonBase/constants";
-import { SizeType } from "../../ButtonBase/types";
+import { SIZE } from '../../ButtonBase/constants';
+import { SizeType } from '../../ButtonBase/types';
 
 export const BUTTON_SIZE: Record<SizeType, string> = {
-  [SIZE.SIZE_60]: "w-[3.75rem]",
-  [SIZE.SIZE_56]: "w-14",
-  [SIZE.SIZE_52]: "w-[3.25rem]",
-  [SIZE.SIZE_49]: "w-[3.0625rem]",
-  [SIZE.SIZE_48]: "w-12",
-  [SIZE.SIZE_40]: "w-10",
-  [SIZE.SIZE_29]: "w-[1.8125rem]",
-  [SIZE.SIZE_24]: "w-6",
-  [SIZE.SIZE_20]: "w-5",
+  [SIZE.SIZE_60]: 'w-[3.75rem]',
+  [SIZE.SIZE_56]: 'w-14',
+  [SIZE.SIZE_52]: 'w-[3.25rem]',
+  [SIZE.SIZE_49]: 'w-[3.0625rem]',
+  [SIZE.SIZE_48]: 'w-12',
+  [SIZE.SIZE_40]: 'w-10',
+  [SIZE.SIZE_29]: 'w-[1.8125rem]',
+  [SIZE.SIZE_24]: 'w-6',
+  [SIZE.SIZE_20]: 'w-5',
 };
diff --git a/src/core/components/Button/IconButton/index.tsx b/src/core/components/Button/IconButton/index.tsx
index 0864b95..7d85572 100644
--- a/src/core/components/Button/IconButton/index.tsx
+++ b/src/core/components/Button/IconButton/index.tsx
@@ -1,24 +1,29 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
-import ButtonBase from "../ButtonBase";
-import { ROUNDED } from "../ButtonBase/constants";
-import { BUTTON_SIZE } from "./constants";
-import { IconButtonProps } from "./types";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import ButtonBase from '../ButtonBase';
+import { ROUNDED } from '../ButtonBase/constants';
+import { BUTTON_SIZE } from './constants';
+import { IconButtonProps } from './types';
 
-const IconButton = forwardRef(({
-    icon,
-    isCircle = false,
-    ...props
-  }: IconButtonProps,
-  ref: React.Ref<HTMLButtonElement>,
+const IconButton = forwardRef(
+  (
+    { icon, isCircle = false, ...props }: IconButtonProps,
+    ref: React.Ref<HTMLButtonElement>,
   ) => {
-  const { rounded, size, className, ...rest } = props;
+    const { rounded, size, className, ...rest } = props;
 
-  return (
-    <ButtonBase ref = {ref} className = {clsx(BUTTON_SIZE[size], className)} size = {size} rounded = {!isCircle ? rounded : ROUNDED["ROUNDED_FULL"]} {...rest}>
-      {icon}
-    </ButtonBase>
-  );
-});
+    return (
+      <ButtonBase
+        ref={ref}
+        className={clsx(BUTTON_SIZE[size], className)}
+        size={size}
+        rounded={!isCircle ? rounded : ROUNDED['ROUNDED_FULL']}
+        {...rest}
+      >
+        {icon}
+      </ButtonBase>
+    );
+  },
+);
 
 export default IconButton;
diff --git a/src/core/components/Button/IconButton/types/index.ts b/src/core/components/Button/IconButton/types/index.ts
index 07ec5ce..23a1995 100644
--- a/src/core/components/Button/IconButton/types/index.ts
+++ b/src/core/components/Button/IconButton/types/index.ts
@@ -1,6 +1,7 @@
-import { ButtonBaseProps } from "../../ButtonBase/types";
+import { ButtonBaseProps } from '../../ButtonBase/types';
 
-export interface IconButtonProps extends Omit<ButtonBaseProps, "hasIcon" | "gap"> {
+export interface IconButtonProps
+  extends Omit<ButtonBaseProps, 'hasIcon' | 'gap'> {
   icon: React.ReactNode;
   isCircle?: boolean;
 }
diff --git a/src/core/components/Calendar/BasicCalendar/BasicCalendar.stories.tsx b/src/core/components/Calendar/BasicCalendar/BasicCalendar.stories.tsx
index 332e9f2..63bf6bf 100644
--- a/src/core/components/Calendar/BasicCalendar/BasicCalendar.stories.tsx
+++ b/src/core/components/Calendar/BasicCalendar/BasicCalendar.stories.tsx
@@ -1,18 +1,16 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import BasicCalendar from "@/core/components/Calendar/BasicCalendar";
+import BasicCalendar from '@/core/components/Calendar/BasicCalendar';
 
 const meta = {
-  title: "core/Calendar/BasicCalendar",
+  title: 'core/Calendar/BasicCalendar',
   component: BasicCalendar,
 } satisfies Meta<typeof BasicCalendar>;
 
 export default meta;
 
-export const DefaultCalendar = () =>
-  <div className = {"w-[300px] h-[400px] rounded-3xl border py-6 px-4"}>
-    <BasicCalendar
-      dottedDates = {["2023-11-29"]}
-    />
+export const DefaultCalendar = () => (
+  <div className={'h-[400px] w-[300px] rounded-3xl border px-4 py-6'}>
+    <BasicCalendar dottedDates={['2023-11-29']} />
   </div>
-;
+);
diff --git a/src/core/components/Calendar/BasicCalendar/index.tsx b/src/core/components/Calendar/BasicCalendar/index.tsx
index 7f671ad..30bb3b7 100644
--- a/src/core/components/Calendar/BasicCalendar/index.tsx
+++ b/src/core/components/Calendar/BasicCalendar/index.tsx
@@ -1,48 +1,58 @@
-import clsx from "clsx";
-import "dayjs/locale/ko";
+import clsx from 'clsx';
+import 'dayjs/locale/ko';
 
-import { useCalendar } from "@/core/components/Calendar/common/hooks/useCalendar";
-import { CalendarWeekDayComponent } from "@/core/components/Calendar/common/subs/CalendarWeekdayComponent";
-import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
-import Typography from "@/core/components/Typography";
-import { BasicCalendarProps } from "./types";
+import { useCalendar } from '@/core/components/Calendar/common/hooks/useCalendar';
+import { CalendarWeekDayComponent } from '@/core/components/Calendar/common/subs/CalendarWeekdayComponent';
+import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
+import Typography from '@/core/components/Typography';
+import { BasicCalendarProps } from './types';
 
-const BasicCalendar = ({
-  dottedDates,
-}: BasicCalendarProps) => {
+const BasicCalendar = ({ dottedDates }: BasicCalendarProps) => {
   const { models: commonModels } = useCalendar();
 
-  return(
-    <div className = {"flex flex-col h-full w-full"}>
+  return (
+    <div className={'flex h-full w-full flex-col'}>
       <Typography
-        text = {commonModels.selectedDayjs.locale("ko").format("MM월 D일 (ddd)")}
-        className = "mb-4"
+        text={commonModels.selectedDayjs.locale('ko').format('MM월 D일 (ddd)')}
+        className='mb-4'
       />
       <CalendarWeekDayComponent />
 
-      <div className = "flex-v-stack h-full">
-        { commonModels.calendarDates.map((calendarWeekDates: CalendarDateDto[], index) => (
-          <div key = {index} className = {clsx("flex-1 grid grid-cols-7")}>
-            { calendarWeekDates.map((calendarDate: CalendarDateDto, index: number) => (
-              <div key = {index} className = {"flex flex-col"}>
-                <div className = "flex flex-col relative justify-start items-center">
-                  <div
-                    className = {clsx("relative flex justify-center items-center h-8 leading-none",
-                      {
-                        "before:absolute before:top-0 before:-start-1 before:content-[''] before:w-[3px] before:h-[3px] before:rounded-full before:bg-primary-03 before:block": dottedDates && dottedDates.includes(calendarDate.dayjs.format("YYYY-MM-DD")),
-                        "bg-gray-03 rounded-full w-8": calendarDate.isToday,
-                        "text-gray-03": !calendarDate.isThisMonth,
-                      },
-                    )}
-                  >
-                    <Typography text = {`${calendarDate.dayjs.date()}`} theme = "body-02-regular" className = "text-inherit" />
+      <div className='flex-v-stack h-full'>
+        {commonModels.calendarDates.map(
+          (calendarWeekDates: CalendarDateDto[], index) => (
+            <div key={index} className={clsx('grid flex-1 grid-cols-7')}>
+              {calendarWeekDates.map(
+                (calendarDate: CalendarDateDto, index: number) => (
+                  <div key={index} className={'flex flex-col'}>
+                    <div className='relative flex flex-col items-center justify-start'>
+                      <div
+                        className={clsx(
+                          'relative flex h-8 items-center justify-center leading-none',
+                          {
+                            "before:absolute before:-start-1 before:top-0 before:block before:h-[3px] before:w-[3px] before:rounded-full before:bg-primary-03 before:content-['']":
+                              dottedDates &&
+                              dottedDates.includes(
+                                calendarDate.dayjs.format('YYYY-MM-DD'),
+                              ),
+                            'w-8 rounded-full bg-gray-03': calendarDate.isToday,
+                            'text-gray-03': !calendarDate.isThisMonth,
+                          },
+                        )}
+                      >
+                        <Typography
+                          text={`${calendarDate.dayjs.date()}`}
+                          theme='body-02-regular'
+                          className='text-inherit'
+                        />
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-          ))
-          }
-          </div>
-      ))}
+                ),
+              )}
+            </div>
+          ),
+        )}
       </div>
     </div>
   );
diff --git a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
index 6feb34f..d9a0a5f 100644
--- a/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
+++ b/src/core/components/Calendar/DatePickerCalendar/DatePickerCalendar.stories.tsx
@@ -1,21 +1,21 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import DatePickerCalendar from "@/core/components/Calendar/DatePickerCalendar";
-import { DATE_PICKER_TYPE } from "./constants";
-import { PeriodDates } from "./types/DatePickerCalendarProps";
+import DatePickerCalendar from '@/core/components/Calendar/DatePickerCalendar';
+import { DATE_PICKER_TYPE } from './constants';
+import { PeriodDates } from './types/DatePickerCalendarProps';
 
 const meta = {
-  title: "core/Calendar/DatePickerCalendar",
+  title: 'core/Calendar/DatePickerCalendar',
   component: DatePickerCalendar,
 } satisfies Meta<typeof DatePickerCalendar>;
 
 export default meta;
 
 export const SingleDatePicker = () => {
-  const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
-    startDate: "",
-    endDate: "",
+  const [periodDates, setPeriodDates] = useState<PeriodDates>({
+    startDate: '',
+    endDate: '',
   });
 
   const onDateClick = (date: PeriodDates) => {
@@ -23,23 +23,23 @@ export const SingleDatePicker = () => {
   };
 
   return (
-    <div className = {"w-[500px] border rounded-3xl py-6"}>
+    <div className={'w-[500px] rounded-3xl border py-6'}>
       <DatePickerCalendar
-        cutoffDate = "2023-12-08"
-        variants = {DATE_PICKER_TYPE["SINGLE"]}
-        label = {["해지 신청일"]}
-        initialDate = "2024-02-05"
-        periodDates = {periodDates}
-        onDateClick = {onDateClick}
+        cutoffDate='2023-12-08'
+        variants={DATE_PICKER_TYPE['SINGLE']}
+        label={['해지 신청일']}
+        initialDate='2024-02-05'
+        periodDates={periodDates}
+        onDateClick={onDateClick}
       />
     </div>
   );
 };
 
 export const PeriodDatesPicker = () => {
-  const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
-    startDate: "2024-01-24",
-    endDate: "2024-01-26",
+  const [periodDates, setPeriodDates] = useState<PeriodDates>({
+    startDate: '2024-01-24',
+    endDate: '2024-01-26',
   });
 
   const onDateClick = (date: PeriodDates) => {
@@ -47,14 +47,13 @@ export const PeriodDatesPicker = () => {
   };
 
   return (
-    <div className = {"w-[500px] border rounded-3xl py-6"}>
+    <div className={'w-[500px] rounded-3xl border py-6'}>
       <DatePickerCalendar
-        variants = {DATE_PICKER_TYPE["PERIOD"]}
-        cutoffDate = "2024-01-23"
-        periodDates = {periodDates}
-        onDateClick = {onDateClick}
+        variants={DATE_PICKER_TYPE['PERIOD']}
+        cutoffDate='2024-01-23'
+        periodDates={periodDates}
+        onDateClick={onDateClick}
       />
     </div>
   );
 };
-
diff --git a/src/core/components/Calendar/DatePickerCalendar/constants/index.ts b/src/core/components/Calendar/DatePickerCalendar/constants/index.ts
index 0a53cd4..2167d79 100644
--- a/src/core/components/Calendar/DatePickerCalendar/constants/index.ts
+++ b/src/core/components/Calendar/DatePickerCalendar/constants/index.ts
@@ -1,4 +1,4 @@
 export const DATE_PICKER_TYPE = {
-  SINGLE: "single",
-  PERIOD: "period",
+  SINGLE: 'single',
+  PERIOD: 'period',
 } as const;
diff --git a/src/core/components/Calendar/DatePickerCalendar/index.tsx b/src/core/components/Calendar/DatePickerCalendar/index.tsx
index 27b1754..d5ee5fb 100644
--- a/src/core/components/Calendar/DatePickerCalendar/index.tsx
+++ b/src/core/components/Calendar/DatePickerCalendar/index.tsx
@@ -1,87 +1,110 @@
-import clsx from "clsx";
-import dayjs from "dayjs";
-import { useCallback, useEffect, useState } from "react";
-
-import { useCalendar } from "@/core/components/Calendar/common/hooks/useCalendar";
-import { CalendarHeader } from "@/core/components/Calendar/common/subs/CalendarHeader";
-import { CalendarWeekDayComponent } from "@/core/components/Calendar/common/subs/CalendarWeekdayComponent";
-import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
-import { DATE_PICKER_TYPE } from "./constants";
-import { CalendarComponentDaySubText } from "./subs/CalendarComponentDaySubText";
-import { CalendarComponentDayText } from "./subs/CalendarComponentDayText";
-import { DatePickerCalendarProps, DatePickerType, PeriodDates } from "./types/DatePickerCalendarProps";
+import clsx from 'clsx';
+import dayjs from 'dayjs';
+import { useCallback, useEffect, useState } from 'react';
+
+import { useCalendar } from '@/core/components/Calendar/common/hooks/useCalendar';
+import { CalendarHeader } from '@/core/components/Calendar/common/subs/CalendarHeader';
+import { CalendarWeekDayComponent } from '@/core/components/Calendar/common/subs/CalendarWeekdayComponent';
+import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
+import { DATE_PICKER_TYPE } from './constants';
+import { CalendarComponentDaySubText } from './subs/CalendarComponentDaySubText';
+import { CalendarComponentDayText } from './subs/CalendarComponentDayText';
+import {
+  DatePickerCalendarProps,
+  DatePickerType,
+  PeriodDates,
+} from './types/DatePickerCalendarProps';
 
 export interface UseDatePickerCalendarResponse {
   models: {
     periodDates: PeriodDates;
     periodDateArray: string[];
-  },
+  };
   operations: {
     setCalendarPeriodDates: (periodDates: PeriodDates) => void;
     setPeriodDates: React.Dispatch<React.SetStateAction<PeriodDates>>;
-    onDateClick: (variants: DatePickerType, afterAllDate: boolean, calendarDate: CalendarDateDto) => void;
-  }
+    onDateClick: (
+      variants: DatePickerType,
+      afterAllDate: boolean,
+      calendarDate: CalendarDateDto,
+    ) => void;
+  };
 }
 
-export const useDatePickerCalendar = ({ isFixStartDate }: Pick<DatePickerCalendarProps, "isFixStartDate">): UseDatePickerCalendarResponse => {
-  const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
-    startDate: "",
-    endDate: "",
+export const useDatePickerCalendar = ({
+  isFixStartDate,
+}: Pick<
+  DatePickerCalendarProps,
+  'isFixStartDate'
+>): UseDatePickerCalendarResponse => {
+  const [periodDates, setPeriodDates] = useState<PeriodDates>({
+    startDate: '',
+    endDate: '',
   });
-  const [ periodDateArray, setPeriodDateArray ] = useState<string[]>([]);
+  const [periodDateArray, setPeriodDateArray] = useState<string[]>([]);
 
-  const onDateClick = useCallback((variants: DatePickerType, afterAllDate: boolean, calendarDate: CalendarDateDto) => {
-    const currentDate = calendarDate.dayjs.format("YYYY-MM-DD");
-    const newPeriodDates = periodDates;
+  const onDateClick = useCallback(
+    (
+      variants: DatePickerType,
+      afterAllDate: boolean,
+      calendarDate: CalendarDateDto,
+    ) => {
+      const currentDate = calendarDate.dayjs.format('YYYY-MM-DD');
+      const newPeriodDates = periodDates;
 
-    if ((periodDates.startDate && periodDates.endDate) || afterAllDate) {
-      if(!isFixStartDate) {
-        newPeriodDates.startDate = currentDate;
-        newPeriodDates.endDate = "";
+      if ((periodDates.startDate && periodDates.endDate) || afterAllDate) {
+        if (!isFixStartDate) {
+          newPeriodDates.startDate = currentDate;
+          newPeriodDates.endDate = '';
 
-        return;
-      } else {
-        newPeriodDates.startDate = periodDates["startDate"];
-        newPeriodDates.endDate = currentDate;
+          return;
+        } else {
+          newPeriodDates.startDate = periodDates['startDate'];
+          newPeriodDates.endDate = currentDate;
 
-        return;
+          return;
+        }
       }
-    }
-
-    if (variants === DATE_PICKER_TYPE["PERIOD"] && periodDates.startDate) {
-      if(isFixStartDate) {
-        newPeriodDates.endDate = currentDate;
 
-        return;
-      } else {
-        if (!dayjs(periodDates.startDate).isAfter(calendarDate.dayjs)) {
+      if (variants === DATE_PICKER_TYPE['PERIOD'] && periodDates.startDate) {
+        if (isFixStartDate) {
           newPeriodDates.endDate = currentDate;
+
+          return;
         } else {
-          newPeriodDates.startDate = currentDate;
-          newPeriodDates.endDate = "";
+          if (!dayjs(periodDates.startDate).isAfter(calendarDate.dayjs)) {
+            newPeriodDates.endDate = currentDate;
+          } else {
+            newPeriodDates.startDate = currentDate;
+            newPeriodDates.endDate = '';
+          }
         }
+      } else {
+        newPeriodDates.startDate = currentDate;
+        newPeriodDates.endDate = '';
       }
-    } else {
-      newPeriodDates.startDate = currentDate;
-      newPeriodDates.endDate = "";
-    }
-  }, [periodDates]);
+    },
+    [periodDates],
+  );
 
-  const setCalendarPeriodDates = useCallback((periodDates: PeriodDates) => {
-    if(!periodDates.endDate || !periodDates.startDate) {
-      setPeriodDateArray([]);
-      return;
-    }
-    const newPeriodDateArray: string[] = [];
-    const startDate: dayjs.Dayjs = dayjs(periodDates.startDate);
-    const endDate: dayjs.Dayjs = dayjs(periodDates.endDate);
-    const diffDate: number = endDate.diff(startDate, "day");
+  const setCalendarPeriodDates = useCallback(
+    (periodDates: PeriodDates) => {
+      if (!periodDates.endDate || !periodDates.startDate) {
+        setPeriodDateArray([]);
+        return;
+      }
+      const newPeriodDateArray: string[] = [];
+      const startDate: dayjs.Dayjs = dayjs(periodDates.startDate);
+      const endDate: dayjs.Dayjs = dayjs(periodDates.endDate);
+      const diffDate: number = endDate.diff(startDate, 'day');
 
-    for (let i = 0; i <= diffDate; i++) {
-      newPeriodDateArray.push(startDate.add(i, "day").format("YYYY-MM-DD"));
-    }
-    setPeriodDateArray(newPeriodDateArray);
-  }, [ periodDates, setPeriodDateArray ]);
+      for (let i = 0; i <= diffDate; i++) {
+        newPeriodDateArray.push(startDate.add(i, 'day').format('YYYY-MM-DD'));
+      }
+      setPeriodDateArray(newPeriodDateArray);
+    },
+    [periodDates, setPeriodDateArray],
+  );
 
   return {
     models: {
@@ -97,8 +120,8 @@ export const useDatePickerCalendar = ({ isFixStartDate }: Pick<DatePickerCalenda
 };
 
 const DatePickerCalendar = ({
-  variants = DATE_PICKER_TYPE["SINGLE"],
-  label = ["사용일"],
+  variants = DATE_PICKER_TYPE['SINGLE'],
+  label = ['사용일'],
   initialDate,
   exceptionDay,
   periodDates,
@@ -112,8 +135,11 @@ const DatePickerCalendar = ({
   onRender,
   onDateClick,
 }: DatePickerCalendarProps) => {
-  const { date: exceptionDate = "", label: exceptionLabel = "" } = exceptionDay ?? {};
-  const { models: commonModels, operations: commonOperations } = useCalendar(initialDate ? dayjs(initialDate): dayjs());
+  const { date: exceptionDate = '', label: exceptionLabel = '' } =
+    exceptionDay ?? {};
+  const { models: commonModels, operations: commonOperations } = useCalendar(
+    initialDate ? dayjs(initialDate) : dayjs(),
+  );
   const { models, operations } = useDatePickerCalendar({ isFixStartDate });
 
   useEffect(() => {
@@ -121,11 +147,13 @@ const DatePickerCalendar = ({
       return;
     }
 
-    const calenderDatesEndWeek = commonModels.calendarDates[commonModels.calendarDates.length - 1];
-    const calenderDatesEndWeekEndDay = calenderDatesEndWeek[calenderDatesEndWeek.length - 1];
+    const calenderDatesEndWeek =
+      commonModels.calendarDates[commonModels.calendarDates.length - 1];
+    const calenderDatesEndWeekEndDay =
+      calenderDatesEndWeek[calenderDatesEndWeek.length - 1];
     const renderDates: PeriodDates = {
-      startDate: commonModels.calendarDates[0][0]?.dayjs.format("YYYY-MM-DD"),
-      endDate: calenderDatesEndWeekEndDay?.dayjs.format("YYYY-MM-DD"),
+      startDate: commonModels.calendarDates[0][0]?.dayjs.format('YYYY-MM-DD'),
+      endDate: calenderDatesEndWeekEndDay?.dayjs.format('YYYY-MM-DD'),
     };
 
     onRender?.(renderDates);
@@ -143,9 +171,9 @@ const DatePickerCalendar = ({
   useEffect(() => {
     if (afterAllDate) {
       const newPeriodDates = models.periodDates;
-      newPeriodDates.endDate = "";
+      newPeriodDates.endDate = '';
       operations.setPeriodDates({ ...newPeriodDates });
-      operations.setCalendarPeriodDates({ startDate: "", endDate: "" });
+      operations.setCalendarPeriodDates({ startDate: '', endDate: '' });
       onDateClick(models.periodDates, true);
     }
   }, [afterAllDate]);
@@ -155,69 +183,101 @@ const DatePickerCalendar = ({
     operations.setCalendarPeriodDates(periodDates);
   }, [periodDates]);
 
-  const isCutoffDateValidation = ({ cutoffDate, cutoffAfterDate, calendarDate }: Pick<DatePickerCalendarProps, "cutoffDate" | "cutoffAfterDate"> & { calendarDate: string }) => {
-    if(!cutoffDate && !cutoffAfterDate) return false;
+  const isCutoffDateValidation = ({
+    cutoffDate,
+    cutoffAfterDate,
+    calendarDate,
+  }: Pick<DatePickerCalendarProps, 'cutoffDate' | 'cutoffAfterDate'> & {
+    calendarDate: string;
+  }) => {
+    if (!cutoffDate && !cutoffAfterDate) return false;
 
-    return !!cutoffDate && dayjs(calendarDate).isBefore(cutoffDate) || !!cutoffAfterDate && dayjs(calendarDate).isAfter(cutoffAfterDate);
+    return (
+      (!!cutoffDate && dayjs(calendarDate).isBefore(cutoffDate)) ||
+      (!!cutoffAfterDate && dayjs(calendarDate).isAfter(cutoffAfterDate))
+    );
   };
 
   return (
-    <div className = {"flex-v-stack h-full w-full"}>
+    <div className={'flex-v-stack h-full w-full'}>
       <CalendarHeader
-        currentMonth = {commonModels.selectedDayjs.locale("ko").format("YYYY. MM")}
-        onPreviousMonthClick = {commonOperations.onPreviousMonthClick}
-        onNextMonthClick = {commonOperations.onNextMonthClick}
-        monthButtonStatus = {monthButtonStatus}
+        currentMonth={commonModels.selectedDayjs
+          .locale('ko')
+          .format('YYYY. MM')}
+        onPreviousMonthClick={commonOperations.onPreviousMonthClick}
+        onNextMonthClick={commonOperations.onNextMonthClick}
+        monthButtonStatus={monthButtonStatus}
       />
-      <CalendarWeekDayComponent className = "text-gray-06"/>
-      <div className = {clsx("grid flex-1 gap-y-2 mt-4")}>
-        {commonModels.calendarDates.map((calendarWeekDates: CalendarDateDto[], index: number) => (
-          <div key = {index} className = {clsx("grid grid-cols-7")}>
-            {calendarWeekDates.map((calendarDate: CalendarDateDto, index: number) => {
-              const disabled = (!useHoliday && calendarDate.isHoliday) || !calendarDate.isThisMonth || disabledDates?.includes(calendarDate.dayjs.format("YYYY-MM-DD")) || isCutoffDateValidation({ cutoffDate, cutoffAfterDate, calendarDate: calendarDate.dayjs.format("YYYY-MM-DD") });
-              const currentDate = calendarDate.dayjs.format("YYYY-MM-DD");
-              const isExceptionDate = exceptionDay ? exceptionDate === currentDate : false;
-
-              return (
-                <div key = {index}>
-                  <button
-                    type = "button"
-                    className = {"w-full h-full"}
-                    disabled = {disabled}
-                    onClick = {(): void => {
-                      const currentDate = calendarDate.dayjs.format("YYYY-MM-DD");
-
-                      if (currentDate === periodDates.startDate) {
-                        return;
-                      }
-                      operations.onDateClick(variants, afterAllDate, calendarDate);
-                      operations.setCalendarPeriodDates(models.periodDates);
-                      onDateClick(models.periodDates, afterAllDate);
-                    }}
-                  >
-                    <div className = {clsx("flex flex-col")}>
-                      <CalendarComponentDayText
-                        disabled = {disabled}
-                        calendarDate = {calendarDate}
-                        periodDates = {models.periodDates}
-                        periodDateArray = {models.periodDateArray}
-                        afterAllDate = {afterAllDate}
-                        isExceptionDate = {isExceptionDate}
-                      />
-                      <CalendarComponentDaySubText
-                        calendarDate = {calendarDate}
-                        periodDates = {models.periodDates}
-                        isExceptionDate = {isExceptionDate}
-                        exceptionDateLabel = {exceptionLabel}
-                        label = {label}
-                      />
+      <CalendarWeekDayComponent className='text-gray-06' />
+      <div className={clsx('mt-4 grid flex-1 gap-y-2')}>
+        {commonModels.calendarDates.map(
+          (calendarWeekDates: CalendarDateDto[], index: number) => (
+            <div key={index} className={clsx('grid grid-cols-7')}>
+              {calendarWeekDates.map(
+                (calendarDate: CalendarDateDto, index: number) => {
+                  const disabled =
+                    (!useHoliday && calendarDate.isHoliday) ||
+                    !calendarDate.isThisMonth ||
+                    disabledDates?.includes(
+                      calendarDate.dayjs.format('YYYY-MM-DD'),
+                    ) ||
+                    isCutoffDateValidation({
+                      cutoffDate,
+                      cutoffAfterDate,
+                      calendarDate: calendarDate.dayjs.format('YYYY-MM-DD'),
+                    });
+                  const currentDate = calendarDate.dayjs.format('YYYY-MM-DD');
+                  const isExceptionDate = exceptionDay
+                    ? exceptionDate === currentDate
+                    : false;
+
+                  return (
+                    <div key={index}>
+                      <button
+                        type='button'
+                        className={'h-full w-full'}
+                        disabled={disabled}
+                        onClick={(): void => {
+                          const currentDate =
+                            calendarDate.dayjs.format('YYYY-MM-DD');
+
+                          if (currentDate === periodDates.startDate) {
+                            return;
+                          }
+                          operations.onDateClick(
+                            variants,
+                            afterAllDate,
+                            calendarDate,
+                          );
+                          operations.setCalendarPeriodDates(models.periodDates);
+                          onDateClick(models.periodDates, afterAllDate);
+                        }}
+                      >
+                        <div className={clsx('flex flex-col')}>
+                          <CalendarComponentDayText
+                            disabled={disabled}
+                            calendarDate={calendarDate}
+                            periodDates={models.periodDates}
+                            periodDateArray={models.periodDateArray}
+                            afterAllDate={afterAllDate}
+                            isExceptionDate={isExceptionDate}
+                          />
+                          <CalendarComponentDaySubText
+                            calendarDate={calendarDate}
+                            periodDates={models.periodDates}
+                            isExceptionDate={isExceptionDate}
+                            exceptionDateLabel={exceptionLabel}
+                            label={label}
+                          />
+                        </div>
+                      </button>
                     </div>
-                  </button>
-                </div>
-              );
-            })}
-          </div>
-        ))}
+                  );
+                },
+              )}
+            </div>
+          ),
+        )}
       </div>
     </div>
   );
diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx
index 0e1af8f..3345682 100644
--- a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx
+++ b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx
@@ -1,8 +1,9 @@
-import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
-import Typography from "@/core/components/Typography";
-import { DatePickerCalendarProps } from "../types/DatePickerCalendarProps";
+import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
+import Typography from '@/core/components/Typography';
+import { DatePickerCalendarProps } from '../types/DatePickerCalendarProps';
 
-interface CalendarComponentDaySubTextProps extends Pick<DatePickerCalendarProps, "label" | "periodDates"> {
+interface CalendarComponentDaySubTextProps
+  extends Pick<DatePickerCalendarProps, 'label' | 'periodDates'> {
   calendarDate: CalendarDateDto;
   isExceptionDate: boolean;
   exceptionDateLabel?: string;
@@ -15,39 +16,42 @@ export const CalendarComponentDaySubText = ({
   exceptionDateLabel,
   label,
 }: CalendarComponentDaySubTextProps) => {
-  const currentDate = calendarDate.dayjs.format("YYYY-MM-DD");
+  const currentDate = calendarDate.dayjs.format('YYYY-MM-DD');
   const isPeriod = periodDates.startDate && periodDates.endDate;
   const isStartDate = isPeriod && periodDates.startDate === currentDate;
   const isEndDate = isPeriod && periodDates.endDate === currentDate;
-  const singleSelectedDate = (periodDates.startDate && !periodDates.endDate) && currentDate === periodDates.startDate;
+  const singleSelectedDate =
+    periodDates.startDate &&
+    !periodDates.endDate &&
+    currentDate === periodDates.startDate;
   const isActiveDate = isStartDate || isEndDate || singleSelectedDate;
 
   const dayLabel = () => {
-    if(isExceptionDate) return exceptionDateLabel;
+    if (isExceptionDate) return exceptionDateLabel;
 
     const hasCustomStartLabel = label && label[0];
     const hasCustomEndLabel = label && label[1];
-    const startLabel = hasCustomStartLabel ? label[0] : "시작일";
-    const endLabel = hasCustomEndLabel ? label[1] : "종료일";
+    const startLabel = hasCustomStartLabel ? label[0] : '시작일';
+    const endLabel = hasCustomEndLabel ? label[1] : '종료일';
 
-    if(isStartDate || singleSelectedDate) return startLabel;
+    if (isStartDate || singleSelectedDate) return startLabel;
 
-    if(isEndDate) return endLabel;
+    if (isEndDate) return endLabel;
 
-    if(calendarDate.isToday) {
-      const todayLabel = isEndDate ? endLabel : "오늘";
+    if (calendarDate.isToday) {
+      const todayLabel = isEndDate ? endLabel : '오늘';
       return todayLabel;
     }
 
-    return "";
-};
+    return '';
+  };
 
   return (
     <Typography
-      text = {dayLabel()}
-      theme = "body-03-regular"
-      className = "md:text-body-02-regular z-10 whitespace-nowrap h-[1.5rem] mt-0.5"
-      color = { isActiveDate ? "primary-03" : "gray-06"}
+      text={dayLabel()}
+      theme='body-03-regular'
+      className='z-10 mt-0.5 h-[1.5rem] whitespace-nowrap md:text-body-02-regular'
+      color={isActiveDate ? 'primary-03' : 'gray-06'}
     />
   );
 };
diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
index 451c978..8e0f0de 100644
--- a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
+++ b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
@@ -1,7 +1,7 @@
-import clsx from "clsx";
+import clsx from 'clsx';
 
-import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
-import { PeriodDates } from "../types/DatePickerCalendarProps";
+import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
+import { PeriodDates } from '../types/DatePickerCalendarProps';
 
 interface CalendarComponentDayTextProps {
   calendarDate: CalendarDateDto;
@@ -20,36 +20,53 @@ export const CalendarComponentDayText = ({
   isExceptionDate,
   disabled,
 }: CalendarComponentDayTextProps) => {
-  const currentDate = calendarDate.dayjs.format("YYYY-MM-DD");
+  const currentDate = calendarDate.dayjs.format('YYYY-MM-DD');
   const isPeriod = periodDates.startDate && periodDates.endDate;
-  const isStartDate = isPeriod && (periodDates.startDate !== periodDates.endDate) && periodDates.startDate === currentDate;
-  const isEndDate = isPeriod && (periodDates.startDate !== periodDates.endDate) && periodDates.endDate === currentDate;
-  const singleSelectedDate = ((periodDates.startDate && !periodDates.endDate) || (periodDates.startDate === periodDates.endDate)) && currentDate === periodDates.startDate;
+  const isStartDate =
+    isPeriod &&
+    periodDates.startDate !== periodDates.endDate &&
+    periodDates.startDate === currentDate;
+  const isEndDate =
+    isPeriod &&
+    periodDates.startDate !== periodDates.endDate &&
+    periodDates.endDate === currentDate;
+  const singleSelectedDate =
+    ((periodDates.startDate && !periodDates.endDate) ||
+      periodDates.startDate === periodDates.endDate) &&
+    currentDate === periodDates.startDate;
 
   const isActiveDate = isStartDate || isEndDate || singleSelectedDate;
   const isMarkedDate = isActiveDate || calendarDate.isToday || isExceptionDate;
-  const isMarkedPeriod = ((periodDateArray?.slice(1, -1).includes(currentDate)) || (afterAllDate && calendarDate.dayjs.isAfter(periodDates.startDate)));
+  const isMarkedPeriod =
+    periodDateArray?.slice(1, -1).includes(currentDate) ||
+    (afterAllDate && calendarDate.dayjs.isAfter(periodDates.startDate));
 
   return (
     <div
-      className = {clsx("relative flex flex-col justify-between items-center",
-        {
-          "before:absolute before:translate-x-1/2 before:content-[''] before:w-1/2 before:h-full before:bg-primary-00 before:block before:z-20": isStartDate || isEndDate || afterAllDate && singleSelectedDate,
-          "before:translate-x-1/2": isStartDate,
-          "before:translate-x-[-50%]": isEndDate,
-        },
-    )}>
+      className={clsx('relative flex flex-col items-center justify-between', {
+        "before:absolute before:z-20 before:block before:h-full before:w-1/2 before:translate-x-1/2 before:bg-primary-00 before:content-['']":
+          isStartDate || isEndDate || (afterAllDate && singleSelectedDate),
+        'before:translate-x-1/2': isStartDate,
+        'before:translate-x-[-50%]': isEndDate,
+      })}
+    >
       <div
-        className = {clsx(
-          "relative z-20 flex justify-center items-center leading-none text-body-02-bold md:text-body-01-bold text-black h-[2rem] md:h-[2.375rem]",
-          !isExceptionDate && disabled ? "text-gray-05" : isMarkedDate ? "text-white" : "text-black",
-          isMarkedDate && "rounded-full w-[2rem] h-[2rem] md:w-[2.375rem] md:h-[2.375rem]",
-          isActiveDate && "bg-primary-03",
-          calendarDate.isToday && "bg-gray-03 w-[2rem] h-[2rem] md:w-[2.375rem] md:h-[2.375rem]",
-          isExceptionDate && "bg-gray-05",
-          isMarkedPeriod && "w-full bg-primary-00 rounded-none",
-          isMarkedPeriod && calendarDate.isToday && "!w-full !text-primary-03",
-          isActiveDate && disabled && "bg-primary-01",
+        className={clsx(
+          'relative z-20 flex h-[2rem] items-center justify-center text-body-02-bold leading-none text-black md:h-[2.375rem] md:text-body-01-bold',
+          !isExceptionDate && disabled
+            ? 'text-gray-05'
+            : isMarkedDate
+              ? 'text-white'
+              : 'text-black',
+          isMarkedDate &&
+            'h-[2rem] w-[2rem] rounded-full md:h-[2.375rem] md:w-[2.375rem]',
+          isActiveDate && 'bg-primary-03',
+          calendarDate.isToday &&
+            'h-[2rem] w-[2rem] bg-gray-03 md:h-[2.375rem] md:w-[2.375rem]',
+          isExceptionDate && 'bg-gray-05',
+          isMarkedPeriod && 'w-full rounded-none bg-primary-00',
+          isMarkedPeriod && calendarDate.isToday && '!w-full !text-primary-03',
+          isActiveDate && disabled && 'bg-primary-01',
         )}
       >
         {calendarDate.dayjs.date()}
diff --git a/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts b/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts
index e6926d1..1643fdc 100644
--- a/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts
+++ b/src/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps.ts
@@ -1,19 +1,21 @@
-import { CalendarHeaderProps } from "../../common/types/CalendarHeader";
-import { DATE_PICKER_TYPE } from "../constants";
+import { CalendarHeaderProps } from '../../common/types/CalendarHeader';
+import { DATE_PICKER_TYPE } from '../constants';
 
-export type DatePickerType = typeof DATE_PICKER_TYPE[keyof typeof DATE_PICKER_TYPE];
+export type DatePickerType =
+  (typeof DATE_PICKER_TYPE)[keyof typeof DATE_PICKER_TYPE];
 
 export interface PeriodDates {
   startDate: string;
   endDate: string;
 }
 
-export interface DatePickerCalendarProps extends Pick<CalendarHeaderProps, "monthButtonStatus">{
+export interface DatePickerCalendarProps
+  extends Pick<CalendarHeaderProps, 'monthButtonStatus'> {
   variants: DatePickerType;
   exceptionDay?: {
-    date: string,
-    label: string,
-  }
+    date: string;
+    label: string;
+  };
   isFixStartDate?: boolean;
   initialDate?: string;
   periodDates: PeriodDates;
diff --git a/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx b/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx
index 07ad2f8..bab5f56 100644
--- a/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx
+++ b/src/core/components/Calendar/ScheduleCalendar/ScheduleCalendar.stories.tsx
@@ -1,18 +1,18 @@
-import { Meta } from "@storybook/react";
-import { useEffect, useState } from "react";
+import { Meta } from '@storybook/react';
+import { useEffect, useState } from 'react';
 
-import ScheduleCalendar from "@/core/components/Calendar/ScheduleCalendar";
-import dayjs from "dayjs";
-import { PeriodDates } from "../DatePickerCalendar/types/DatePickerCalendarProps";
+import ScheduleCalendar from '@/core/components/Calendar/ScheduleCalendar';
+import dayjs from 'dayjs';
+import { PeriodDates } from '../DatePickerCalendar/types/DatePickerCalendarProps';
 const meta = {
-  title: "core/Calendar/ScheduleCalendar",
+  title: 'core/Calendar/ScheduleCalendar',
   component: ScheduleCalendar,
 } satisfies Meta<typeof ScheduleCalendar>;
 
 export default meta;
 
 export const Default = () => {
-  const [ selectedDate, setSelectedDate ] = useState<string>("");
+  const [selectedDate, setSelectedDate] = useState<string>('');
 
   const onDateClick = (date: string) => {
     setSelectedDate(date);
@@ -27,67 +27,67 @@ export const Default = () => {
   }, [selectedDate]);
 
   return (
-    <div className = {"w-[1000px]"}>
+    <div className={'w-[1000px]'}>
       <ScheduleCalendar
-        initialDate = {dayjs("2023-12-02").unix()}
-        onRender = {getCalendarDates}
-        defaultQuantity = {25}
-        schedulesData = {{
-          "2023-11-30": {
+        initialDate={dayjs('2023-12-02').unix()}
+        onRender={getCalendarDates}
+        defaultQuantity={25}
+        schedulesData={{
+          '2023-11-30': {
             quantity: 10,
-            markedDates: ["특강"],
+            markedDates: ['특강'],
           },
-          "2023-12-01": {
+          '2023-12-01': {
             quantity: 10,
-            markedDates: ["방학"],
+            markedDates: ['방학'],
           },
-          "2023-12-02": {
+          '2023-12-02': {
             quantity: 10,
-            markedDates: [""],
+            markedDates: [''],
           },
-          "2023-12-03": {
+          '2023-12-03': {
             quantity: 10,
-            markedDates: [""],
+            markedDates: [''],
           },
-          "2023-12-04": {
+          '2023-12-04': {
             quantity: 10,
-            markedDates: [""],
+            markedDates: [''],
           },
-          "2023-12-05": {
+          '2023-12-05': {
             quantity: 10,
-            markedDates: [""],
+            markedDates: [''],
           },
-          "2023-12-06": {
+          '2023-12-06': {
             quantity: 10,
-            markedDates: [ "", "견학", "견학" ],
+            markedDates: ['', '견학', '견학'],
           },
-          "2023-12-07": {
-            markedDates: [ "특강", "", "", "" ],
+          '2023-12-07': {
+            markedDates: ['특강', '', '', ''],
           },
-          "2023-12-08": {
-            markedDates: [""],
+          '2023-12-08': {
+            markedDates: [''],
           },
-          "2023-12-09": {
-            markedDates: [""],
+          '2023-12-09': {
+            markedDates: [''],
           },
-          "2023-12-10": {
+          '2023-12-10': {
             quantity: 10,
-            markedDates: [""],
+            markedDates: [''],
           },
-          "2023-12-11": {
+          '2023-12-11': {
             quantity: 10,
-            markedDates: [""],
+            markedDates: [''],
           },
-          "2023-12-12": {
+          '2023-12-12': {
             quantity: 10,
-            markedDates: [""],
+            markedDates: [''],
           },
-          "2023-12-15": {
+          '2023-12-15': {
             quantity: 10,
-            markedDates: ["정식 전환일"],
+            markedDates: ['정식 전환일'],
           },
         }}
-        onDateClick = {onDateClick}
+        onDateClick={onDateClick}
       />
     </div>
   );
diff --git a/src/core/components/Calendar/ScheduleCalendar/index.tsx b/src/core/components/Calendar/ScheduleCalendar/index.tsx
index 279c192..2d641c0 100644
--- a/src/core/components/Calendar/ScheduleCalendar/index.tsx
+++ b/src/core/components/Calendar/ScheduleCalendar/index.tsx
@@ -1,12 +1,12 @@
-import dayjs from "dayjs";
-import { useEffect } from "react";
+import dayjs from 'dayjs';
+import { useEffect } from 'react';
 
-import { CalendarDayComponent } from "@/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent";
-import { CalendarComponentProps } from "@/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps";
-import { useCalendar } from "@/core/components/Calendar/common/hooks/useCalendar";
-import { CalendarHeader } from "@/core/components/Calendar/common/subs/CalendarHeader";
-import { CalendarWeekDayComponent } from "@/core/components/Calendar/common/subs/CalendarWeekdayComponent";
-import { PeriodDates } from "../DatePickerCalendar/types/DatePickerCalendarProps";
+import { CalendarDayComponent } from '@/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent';
+import { CalendarComponentProps } from '@/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps';
+import { useCalendar } from '@/core/components/Calendar/common/hooks/useCalendar';
+import { CalendarHeader } from '@/core/components/Calendar/common/subs/CalendarHeader';
+import { CalendarWeekDayComponent } from '@/core/components/Calendar/common/subs/CalendarWeekdayComponent';
+import { PeriodDates } from '../DatePickerCalendar/types/DatePickerCalendarProps';
 
 const ScheduleCalendar = ({
   initialDate,
@@ -16,38 +16,42 @@ const ScheduleCalendar = ({
   onRender,
   monthButtonStatus,
 }: CalendarComponentProps) => {
-  const { models, operations } = useCalendar(initialDate ? dayjs(initialDate * 1000) : dayjs());
+  const { models, operations } = useCalendar(
+    initialDate ? dayjs(initialDate * 1000) : dayjs(),
+  );
 
   useEffect(() => {
     if (models.calendarDates.length <= 0) {
       return;
     }
 
-    const calenderDatesEndWeek = models.calendarDates[models.calendarDates.length - 1];
-    const calenderDatesEndWeekEndDay = calenderDatesEndWeek[calenderDatesEndWeek.length - 1];
+    const calenderDatesEndWeek =
+      models.calendarDates[models.calendarDates.length - 1];
+    const calenderDatesEndWeekEndDay =
+      calenderDatesEndWeek[calenderDatesEndWeek.length - 1];
     const renderDates: PeriodDates = {
-      startDate: models.calendarDates[0][0]?.dayjs.format("YYYY-MM-DD"),
-      endDate: calenderDatesEndWeekEndDay?.dayjs.format("YYYY-MM-DD"),
+      startDate: models.calendarDates[0][0]?.dayjs.format('YYYY-MM-DD'),
+      endDate: calenderDatesEndWeekEndDay?.dayjs.format('YYYY-MM-DD'),
     };
 
     onRender?.(renderDates);
   }, [models.calendarDates]);
 
   return (
-    <div className = {"flex flex-col h-full w-full"}>
+    <div className={'flex h-full w-full flex-col'}>
       <CalendarHeader
-        currentMonth = {models.selectedDayjs.locale("ko").format("YYYY. MM")}
-        onPreviousMonthClick = {operations.onPreviousMonthClick}
-        onNextMonthClick = {operations.onNextMonthClick}
-        monthButtonStatus = {monthButtonStatus}
+        currentMonth={models.selectedDayjs.locale('ko').format('YYYY. MM')}
+        onPreviousMonthClick={operations.onPreviousMonthClick}
+        onNextMonthClick={operations.onNextMonthClick}
+        monthButtonStatus={monthButtonStatus}
       />
-      <CalendarWeekDayComponent className = "gap-x-[1px] border border-b-0 border-gray-03 bg-gray-03 py-1 text-gray-07" />
-      <div className = "flex-v-stack gap-y-[1px] border border-t-0 border-gray-03 bg-gray-03">
+      <CalendarWeekDayComponent className='gap-x-[1px] border border-b-0 border-gray-03 bg-gray-03 py-1 text-gray-07' />
+      <div className='flex-v-stack gap-y-[1px] border border-t-0 border-gray-03 bg-gray-03'>
         <CalendarDayComponent
-          defaultQuantity = {defaultQuantity}
-          schedulesData = {schedulesData}
-          calendarDates = {models.calendarDates}
-          onDateClick = {onDateClick}
+          defaultQuantity={defaultQuantity}
+          schedulesData={schedulesData}
+          calendarDates={models.calendarDates}
+          onDateClick={onDateClick}
         />
       </div>
     </div>
diff --git a/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx b/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx
index c114d03..e2b8d64 100644
--- a/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx
+++ b/src/core/components/Calendar/ScheduleCalendar/subs/CalendarDayComponent.tsx
@@ -1,10 +1,11 @@
-import clsx from "clsx";
+import clsx from 'clsx';
 
-import { CalendarComponentProps } from "@/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps";
-import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
-import Typography from "@/core/components/Typography";
+import { CalendarComponentProps } from '@/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps';
+import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
+import Typography from '@/core/components/Typography';
 
-interface CalendarDayComponentProps extends Omit<CalendarComponentProps, "onRender"> {
+interface CalendarDayComponentProps
+  extends Omit<CalendarComponentProps, 'onRender'> {
   calendarDates: CalendarDateDto[][];
 }
 
@@ -14,87 +15,122 @@ export const CalendarDayComponent = ({
   calendarDates,
   onDateClick,
 }: CalendarDayComponentProps) => {
-  return(
+  return (
     <>
       {calendarDates.map((calendarWeekDates: CalendarDateDto[], index) => (
         <div
-          key = {index}
-          className = {"grid grid-cols-7 gap-[1px] h-36 overflow-hidden"}
+          key={index}
+          className={'grid h-36 grid-cols-7 gap-[1px] overflow-hidden'}
         >
-          {calendarWeekDates.map((calendarDate: CalendarDateDto, index: number) => {
-            const currentDate: string = calendarDate.dayjs.format("YYYY-MM-DD");
-            const currentSchedule = schedulesData && Object.keys(schedulesData).find(date => date === currentDate);
-            let quantity = defaultQuantity;
+          {calendarWeekDates.map(
+            (calendarDate: CalendarDateDto, index: number) => {
+              const currentDate: string =
+                calendarDate.dayjs.format('YYYY-MM-DD');
+              const currentSchedule =
+                schedulesData &&
+                Object.keys(schedulesData).find((date) => date === currentDate);
+              let quantity = defaultQuantity;
 
-            if(currentSchedule && schedulesData![currentSchedule].quantity) {
-              quantity = schedulesData![currentSchedule].quantity;
-            }
+              if (currentSchedule && schedulesData![currentSchedule].quantity) {
+                quantity = schedulesData![currentSchedule].quantity;
+              }
 
-            return (
-              <button
-                key = {index}
-                type = "button"
-                disabled = {!calendarDate.isThisMonth}
-                className = "flex-v-stack items-center h-full text-center bg-white"
-                onClick = {(): void => onDateClick(currentDate)}
-              >
-                <div
-                  className = {clsx("relative flex justify-center items-center h-[1.5rem] my-1",
-                    {
-                      "w-[1.5rem] rounded-full bg-gray-01": calendarDate.isToday,
-                      "text-gray-03": !calendarDate.isThisMonth,
-                    },
-                  )}
+              return (
+                <button
+                  key={index}
+                  type='button'
+                  disabled={!calendarDate.isThisMonth}
+                  className='flex-v-stack h-full items-center bg-white text-center'
+                  onClick={(): void => onDateClick(currentDate)}
                 >
-                  <Typography
-                    text = {`${calendarDate.dayjs.date()}`}
-                    theme = "body-02-bold"
-                    className = "text-inherit"
-                  />
-                  {quantity !== undefined &&
+                  <div
+                    className={clsx(
+                      'relative my-1 flex h-[1.5rem] items-center justify-center',
+                      {
+                        'w-[1.5rem] rounded-full bg-gray-01':
+                          calendarDate.isToday,
+                        'text-gray-03': !calendarDate.isThisMonth,
+                      },
+                    )}
+                  >
                     <Typography
-                      key = {index}
-                      text = {`(${quantity})`}
-                      theme = "body-02-bold"
-                      className = "absolute top-1/2 -translate-y-1/2 translate-x-[calc(100%+0.25rem)]"
-                      color = {`${!calendarDate.isThisMonth ? "gray-03" : quantity === defaultQuantity ? "gray-06" : "primary-03"}`}
+                      text={`${calendarDate.dayjs.date()}`}
+                      theme='body-02-bold'
+                      className='text-inherit'
                     />
-                  }
-                </div>
-                {schedulesData && Object.keys(schedulesData).map(markedDate => (
-                  (markedDate === calendarDate.dayjs.format("YYYY-MM-DD")) &&
-                  <div className = "flex-v-stack gap-1 w-full" key = {markedDate}>
-                    {
-                      schedulesData[markedDate].markedDates?.slice(0, 3).map((markedDateValue, index) => (
-                        <div
-                          key = {index}
-                          className = {`${!calendarDate.isThisMonth ? "bg-gray-00 text-primary-00" : "bg-primary-00 text-primary-02"}`}
-                          >
-                          &nbsp;
-                          <Typography
-                            theme = "body-02-bold"
-                            text = {markedDateValue === undefined ? "" : markedDateValue}
-                            className = "text-inherit"
-                          />
-                          &nbsp;
-                        </div>
-                      ))
-                    }
-                    {(schedulesData[markedDate].markedDates?.length ?? 0) > 3 &&
-                      <div className = "px-2 text-left">
-                        <Typography
-                          element = "p"
-                          theme = "body-03-bold"
-                          text = {`${schedulesData[markedDate].markedDates?.slice(3, (schedulesData[markedDate].markedDates?.length ?? 0)).length}개 더보기`}
-                          color = "gray-06"
-                        />
-                      </div>
-                    }
+                    {quantity !== undefined && (
+                      <Typography
+                        key={index}
+                        text={`(${quantity})`}
+                        theme='body-02-bold'
+                        className='absolute top-1/2 -translate-y-1/2 translate-x-[calc(100%+0.25rem)]'
+                        color={`${
+                          !calendarDate.isThisMonth
+                            ? 'gray-03'
+                            : quantity === defaultQuantity
+                              ? 'gray-06'
+                              : 'primary-03'
+                        }`}
+                      />
+                    )}
                   </div>
-                ))}
-              </button>
-            );
-          })}
+                  {schedulesData &&
+                    Object.keys(schedulesData).map(
+                      (markedDate) =>
+                        markedDate ===
+                          calendarDate.dayjs.format('YYYY-MM-DD') && (
+                          <div
+                            className='flex-v-stack w-full gap-1'
+                            key={markedDate}
+                          >
+                            {schedulesData[markedDate].markedDates
+                              ?.slice(0, 3)
+                              .map((markedDateValue, index) => (
+                                <div
+                                  key={index}
+                                  className={`${
+                                    !calendarDate.isThisMonth
+                                      ? 'bg-gray-00 text-primary-00'
+                                      : 'bg-primary-00 text-primary-02'
+                                  }`}
+                                >
+                                  &nbsp;
+                                  <Typography
+                                    theme='body-02-bold'
+                                    text={
+                                      markedDateValue === undefined
+                                        ? ''
+                                        : markedDateValue
+                                    }
+                                    className='text-inherit'
+                                  />
+                                  &nbsp;
+                                </div>
+                              ))}
+                            {(schedulesData[markedDate].markedDates?.length ??
+                              0) > 3 && (
+                              <div className='px-2 text-left'>
+                                <Typography
+                                  element='p'
+                                  theme='body-03-bold'
+                                  text={`${schedulesData[
+                                    markedDate
+                                  ].markedDates?.slice(
+                                    3,
+                                    schedulesData[markedDate].markedDates
+                                      ?.length ?? 0,
+                                  ).length}개 더보기`}
+                                  color='gray-06'
+                                />
+                              </div>
+                            )}
+                          </div>
+                        ),
+                    )}
+                </button>
+              );
+            },
+          )}
         </div>
       ))}
     </>
diff --git a/src/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps.ts b/src/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps.ts
index 1a55918..3b9ac9c 100644
--- a/src/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps.ts
+++ b/src/core/components/Calendar/ScheduleCalendar/types/CalendarComponentProps.ts
@@ -1,5 +1,5 @@
-import { PeriodDates } from "../../DatePickerCalendar/types/DatePickerCalendarProps";
-import { CalendarHeaderProps } from "../../common/types/CalendarHeader";
+import { PeriodDates } from '../../DatePickerCalendar/types/DatePickerCalendarProps';
+import { CalendarHeaderProps } from '../../common/types/CalendarHeader';
 
 export interface MarkedDatesProps {
   markedDates?: string[];
@@ -10,7 +10,8 @@ export interface SchedulesDataProps {
   [date: string]: MarkedDatesProps;
 }
 
-export interface CalendarComponentProps extends Pick<CalendarHeaderProps, "monthButtonStatus"> {
+export interface CalendarComponentProps
+  extends Pick<CalendarHeaderProps, 'monthButtonStatus'> {
   initialDate?: number;
   schedulesData?: SchedulesDataProps;
   defaultQuantity?: number;
diff --git a/src/core/components/Calendar/common/constants/index.ts b/src/core/components/Calendar/common/constants/index.ts
index d944296..8357f0e 100644
--- a/src/core/components/Calendar/common/constants/index.ts
+++ b/src/core/components/Calendar/common/constants/index.ts
@@ -1,6 +1,6 @@
 export const MONTH_BUTTON_STATUS = {
-  IDLE: "IDLE",
-  DISABLE_BOTH: "DISABLE_BOTH",
-  DISABLE_PREV: "DISABLE_PREV",
-  DISABLE_NEXT: "DISABLE_NEXT",
+  IDLE: 'IDLE',
+  DISABLE_BOTH: 'DISABLE_BOTH',
+  DISABLE_PREV: 'DISABLE_PREV',
+  DISABLE_NEXT: 'DISABLE_NEXT',
 } as const;
diff --git a/src/core/components/Calendar/common/hooks/useCalendar.ts b/src/core/components/Calendar/common/hooks/useCalendar.ts
index 002d745..4fcd35e 100644
--- a/src/core/components/Calendar/common/hooks/useCalendar.ts
+++ b/src/core/components/Calendar/common/hooks/useCalendar.ts
@@ -1,21 +1,23 @@
-import dayjs from "dayjs";
-import { useCallback, useState } from "react";
+import dayjs from 'dayjs';
+import { useCallback, useState } from 'react';
 
-import { useMonthChangeEffect } from "@/core/components/Calendar/common/hooks/useMonthChangeEffect";
-import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
-import { UseCalendarResponse } from "@/core/components/Calendar/common/types/UseCalendarResponse";
+import { useMonthChangeEffect } from '@/core/components/Calendar/common/hooks/useMonthChangeEffect';
+import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
+import { UseCalendarResponse } from '@/core/components/Calendar/common/types/UseCalendarResponse';
 
 export const useCalendar = (initialDate?: dayjs.Dayjs): UseCalendarResponse => {
-  const [ selectedDayjs, setSelectedDayjs ] = useState<dayjs.Dayjs>(initialDate || dayjs());
-  const [ calendarDates, setCalendarDates ] = useState<CalendarDateDto[][]>([[]]);
+  const [selectedDayjs, setSelectedDayjs] = useState<dayjs.Dayjs>(
+    initialDate || dayjs(),
+  );
+  const [calendarDates, setCalendarDates] = useState<CalendarDateDto[][]>([[]]);
 
   const onPreviousMonthClick = useCallback(() => {
-    const prevMonth: dayjs.Dayjs = selectedDayjs.subtract(1, "month");
+    const prevMonth: dayjs.Dayjs = selectedDayjs.subtract(1, 'month');
     setSelectedDayjs(prevMonth);
   }, [selectedDayjs]);
 
   const onNextMonthClick = useCallback(() => {
-    const nextMonth: dayjs.Dayjs = selectedDayjs.add(1, "month");
+    const nextMonth: dayjs.Dayjs = selectedDayjs.add(1, 'month');
     setSelectedDayjs(nextMonth);
   }, [selectedDayjs]);
 
diff --git a/src/core/components/Calendar/common/hooks/useMonthChangeEffect.tsx b/src/core/components/Calendar/common/hooks/useMonthChangeEffect.tsx
index e0ecdf9..4d2d687 100644
--- a/src/core/components/Calendar/common/hooks/useMonthChangeEffect.tsx
+++ b/src/core/components/Calendar/common/hooks/useMonthChangeEffect.tsx
@@ -1,32 +1,38 @@
-import dayjs from "dayjs";
-import { useEffect } from "react";
+import dayjs from 'dayjs';
+import { useEffect } from 'react';
 
-import { HOLIDAYS, Weekdays } from "@/constants";
-import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
+import { HOLIDAYS, Weekdays } from '@/constants';
+import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
 
 export const useMonthChangeEffect = (
-  selectedDayjs:dayjs.Dayjs,
+  selectedDayjs: dayjs.Dayjs,
   setCalendarDates: React.Dispatch<React.SetStateAction<CalendarDateDto[][]>>,
 ) => {
   useEffect(() => {
-    function getNewCalendarDates () {
+    function getNewCalendarDates() {
       const newCalendarDates: CalendarDateDto[][] = [];
       let calendarWeekDates: CalendarDateDto[] = [];
       let calendarDate: dayjs.Dayjs =
-        (selectedDayjs.startOf("month").startOf("week").get("d") === Weekdays.SUNDAY)
-          ? selectedDayjs.startOf("month").startOf("week")
-          : selectedDayjs.subtract(1, "month").endOf("month").startOf("week");
+        selectedDayjs.startOf('month').startOf('week').get('d') ===
+        Weekdays.SUNDAY
+          ? selectedDayjs.startOf('month').startOf('week')
+          : selectedDayjs.subtract(1, 'month').endOf('month').startOf('week');
 
       while (
-        selectedDayjs.endOf("month").get("d") === Weekdays.SATURDAY
-          ? calendarDate.isBefore(selectedDayjs.add(1, "month").startOf("month"))
-          : calendarDate.isBefore(selectedDayjs.add(1, "month").startOf("month").endOf("week"))
-        ) {
+        selectedDayjs.endOf('month').get('d') === Weekdays.SATURDAY
+          ? calendarDate.isBefore(
+              selectedDayjs.add(1, 'month').startOf('month'),
+            )
+          : calendarDate.isBefore(
+              selectedDayjs.add(1, 'month').startOf('month').endOf('week'),
+            )
+      ) {
         calendarWeekDates.push({
           dayjs: calendarDate,
-          isThisMonth: calendarDate.isSame(selectedDayjs, "month"),
-          isToday: calendarDate.format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD"),
-          isHoliday: HOLIDAYS.includes(calendarDate.get("d")),
+          isThisMonth: calendarDate.isSame(selectedDayjs, 'month'),
+          isToday:
+            calendarDate.format('YYYY-MM-DD') === dayjs().format('YYYY-MM-DD'),
+          isHoliday: HOLIDAYS.includes(calendarDate.get('d')),
         });
 
         if (calendarWeekDates.length === 7) {
@@ -34,7 +40,7 @@ export const useMonthChangeEffect = (
           calendarWeekDates = [];
         }
 
-        calendarDate = calendarDate.add(1, "day");
+        calendarDate = calendarDate.add(1, 'day');
       }
 
       return newCalendarDates;
diff --git a/src/core/components/Calendar/common/subs/CalendarHeader.tsx b/src/core/components/Calendar/common/subs/CalendarHeader.tsx
index 077c429..cf8fde5 100644
--- a/src/core/components/Calendar/common/subs/CalendarHeader.tsx
+++ b/src/core/components/Calendar/common/subs/CalendarHeader.tsx
@@ -1,39 +1,52 @@
-import { CaretLeft, CaretRight } from "@phosphor-icons/react";
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 
-import Typography from "@/core/components/Typography";
-import { MONTH_BUTTON_STATUS } from "../constants";
-import { CalendarHeaderProps } from "../types/CalendarHeader";
+import Typography from '@/core/components/Typography';
+import { MONTH_BUTTON_STATUS } from '../constants';
+import { CalendarHeaderProps } from '../types/CalendarHeader';
 
 export const CalendarHeader = ({
   currentMonth,
   onPreviousMonthClick,
   onNextMonthClick,
-  monthButtonStatus = MONTH_BUTTON_STATUS["IDLE"],
+  monthButtonStatus = MONTH_BUTTON_STATUS['IDLE'],
 }: CalendarHeaderProps) => {
-  const isDisabledMonthBtn = monthButtonStatus === MONTH_BUTTON_STATUS["DISABLE_BOTH"];
-  const isDisablePrev = (isDisabledMonthBtn || monthButtonStatus === MONTH_BUTTON_STATUS["DISABLE_PREV"]) ?? false;
-  const isDisableNext = (isDisabledMonthBtn || monthButtonStatus === MONTH_BUTTON_STATUS["DISABLE_NEXT"]) ?? false;
-  const buttonClassNames = "group flex justify-center items-center";
-  const iconClassNames = "text-gray-05 group-disabled:text-gray-03 group-disabled:cursor-not-allowed text-subhead-01-regular md:text-head-01-regular";
+  const isDisabledMonthBtn =
+    monthButtonStatus === MONTH_BUTTON_STATUS['DISABLE_BOTH'];
+  const isDisablePrev =
+    (isDisabledMonthBtn ||
+      monthButtonStatus === MONTH_BUTTON_STATUS['DISABLE_PREV']) ??
+    false;
+  const isDisableNext =
+    (isDisabledMonthBtn ||
+      monthButtonStatus === MONTH_BUTTON_STATUS['DISABLE_NEXT']) ??
+    false;
+  const buttonClassNames = 'group flex justify-center items-center';
+  const iconClassNames =
+    'text-gray-05 group-disabled:text-gray-03 group-disabled:cursor-not-allowed text-subhead-01-regular md:text-head-01-regular';
 
   return (
-    <div className = {"flex gap-x-5 justify-center items-center mb-6"}>
+    <div className={'mb-6 flex items-center justify-center gap-x-5'}>
       <button
-        type = "button"
-        className = {buttonClassNames}
-        onClick = {() => !isDisablePrev && onPreviousMonthClick?.()}
-        disabled = {isDisablePrev}
+        type='button'
+        className={buttonClassNames}
+        onClick={() => !isDisablePrev && onPreviousMonthClick?.()}
+        disabled={isDisablePrev}
       >
-        <CaretLeft className = {iconClassNames}/>
+        <CaretLeft className={iconClassNames} />
       </button>
-      <Typography className = "text-center md:text-head-02-regular" color = "black" theme = "subhead-01-medium" text = {currentMonth} />
+      <Typography
+        className='text-center md:text-head-02-regular'
+        color='black'
+        theme='subhead-01-medium'
+        text={currentMonth}
+      />
       <button
-        type = "button"
-        className = {buttonClassNames}
-        onClick = {() => !isDisableNext && onNextMonthClick?.()}
-        disabled = {isDisableNext}
+        type='button'
+        className={buttonClassNames}
+        onClick={() => !isDisableNext && onNextMonthClick?.()}
+        disabled={isDisableNext}
       >
-        <CaretRight className = {iconClassNames}/>
+        <CaretRight className={iconClassNames} />
       </button>
     </div>
   );
diff --git a/src/core/components/Calendar/common/subs/CalendarWeekdayComponent.tsx b/src/core/components/Calendar/common/subs/CalendarWeekdayComponent.tsx
index b310ea6..32c094d 100644
--- a/src/core/components/Calendar/common/subs/CalendarWeekdayComponent.tsx
+++ b/src/core/components/Calendar/common/subs/CalendarWeekdayComponent.tsx
@@ -1,19 +1,39 @@
-import clsx from "clsx";
-import dayjs from "dayjs";
-import "dayjs/locale/ko";
+import clsx from 'clsx';
+import dayjs from 'dayjs';
+import 'dayjs/locale/ko';
 
-import { Weekdays } from "@/constants";
-import Typography from "@/core/components/Typography";
+import { Weekdays } from '@/constants';
+import Typography from '@/core/components/Typography';
 
-export const CalendarWeekDayComponent = ({ className }: { className?: string }) => {
+export const CalendarWeekDayComponent = ({
+  className,
+}: {
+  className?: string;
+}) => {
   const convertWeekdayNumberToString = (weekdayNumber: number) => {
-    return dayjs().startOf("week").add(weekdayNumber, "day").locale("ko").format("ddd");
+    return dayjs()
+      .startOf('week')
+      .add(weekdayNumber, 'day')
+      .locale('ko')
+      .format('ddd');
   };
 
   return (
-    <div className = {clsx("grid grid-cols-7 min-w-full w-full justify-center items-center text-center", className)}>
-      {Object.values(Weekdays).map(weekdayNumber => (
-        <Typography element = "strong" key = {weekdayNumber} text = {convertWeekdayNumberToString(weekdayNumber)} theme = "body-02-regular" color = "gray-06" className = "md:text-body-01-regular !text-inherit"/>
+    <div
+      className={clsx(
+        'grid w-full min-w-full grid-cols-7 items-center justify-center text-center',
+        className,
+      )}
+    >
+      {Object.values(Weekdays).map((weekdayNumber) => (
+        <Typography
+          element='strong'
+          key={weekdayNumber}
+          text={convertWeekdayNumberToString(weekdayNumber)}
+          theme='body-02-regular'
+          color='gray-06'
+          className='!text-inherit md:text-body-01-regular'
+        />
       ))}
     </div>
   );
diff --git a/src/core/components/Calendar/common/types/CalendarDateDto.ts b/src/core/components/Calendar/common/types/CalendarDateDto.ts
index da4bcdb..327b0cc 100644
--- a/src/core/components/Calendar/common/types/CalendarDateDto.ts
+++ b/src/core/components/Calendar/common/types/CalendarDateDto.ts
@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
 
 export interface CalendarDateDto {
   dayjs: dayjs.Dayjs;
diff --git a/src/core/components/Calendar/common/types/CalendarHeader.ts b/src/core/components/Calendar/common/types/CalendarHeader.ts
index ce4e8e0..ba9b788 100644
--- a/src/core/components/Calendar/common/types/CalendarHeader.ts
+++ b/src/core/components/Calendar/common/types/CalendarHeader.ts
@@ -1,10 +1,11 @@
-import { MONTH_BUTTON_STATUS } from "../constants";
+import { MONTH_BUTTON_STATUS } from '../constants';
 
 export interface CalendarHeaderProps {
   currentMonth: string;
   onPreviousMonthClick?: () => void;
   onNextMonthClick?: () => void;
-  monthButtonStatus?: MonthButtonStatusTypes
+  monthButtonStatus?: MonthButtonStatusTypes;
 }
 
-export type MonthButtonStatusTypes = typeof MONTH_BUTTON_STATUS[keyof typeof MONTH_BUTTON_STATUS];
+export type MonthButtonStatusTypes =
+  (typeof MONTH_BUTTON_STATUS)[keyof typeof MONTH_BUTTON_STATUS];
diff --git a/src/core/components/Calendar/common/types/UseCalendarResponse.ts b/src/core/components/Calendar/common/types/UseCalendarResponse.ts
index a49c63b..a23368c 100644
--- a/src/core/components/Calendar/common/types/UseCalendarResponse.ts
+++ b/src/core/components/Calendar/common/types/UseCalendarResponse.ts
@@ -1,15 +1,15 @@
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
 
-import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
+import { CalendarDateDto } from '@/core/components/Calendar/common/types/CalendarDateDto';
 
 export interface UseCalendarResponse {
   models: {
     selectedDayjs: dayjs.Dayjs;
     calendarDates: CalendarDateDto[][];
-  }
+  };
   operations: {
     onPreviousMonthClick: () => void;
     onNextMonthClick: () => void;
     setInitialSelectedDayjs: (selectedDayjs: dayjs.Dayjs) => void;
-  }
+  };
 }
diff --git a/src/core/components/Checkbox/Checkbox.stories.tsx b/src/core/components/Checkbox/Checkbox.stories.tsx
index b66ed91..3d409b2 100644
--- a/src/core/components/Checkbox/Checkbox.stories.tsx
+++ b/src/core/components/Checkbox/Checkbox.stories.tsx
@@ -1,27 +1,25 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import Checkbox from "./index";
-import { CheckboxProps } from "./types";
+import Checkbox from './index';
+import { CheckboxProps } from './types';
 
 const meta = {
-  title: "core/Checkbox",
+  title: 'core/Checkbox',
   component: Checkbox,
   argTypes: {
     label: {
-      control: "text",
-      description: "Checkbox Label",
+      control: 'text',
+      description: 'Checkbox Label',
     },
     svgSize: {
-      control: "select",
-      options: [
-        "size-24", "size-32",
-      ],
-      defaultValue: "size-24",
-      description: "Checkbox Icon Size",
+      control: 'select',
+      options: ['size-24', 'size-32'],
+      defaultValue: 'size-24',
+      description: 'Checkbox Icon Size',
     },
     isCircle: {
-      control: "boolean",
-      description: "Checkbox Icon Circled",
+      control: 'boolean',
+      description: 'Checkbox Icon Circled',
     },
   },
 } satisfies Meta<typeof Checkbox>;
@@ -33,5 +31,5 @@ export const Default = (props: CheckboxProps) => {
 };
 
 export const Circle = () => {
-  return <Checkbox isCircle/>;
+  return <Checkbox isCircle />;
 };
diff --git a/src/core/components/Checkbox/constants/index.ts b/src/core/components/Checkbox/constants/index.ts
index 4c96ff7..5719a25 100644
--- a/src/core/components/Checkbox/constants/index.ts
+++ b/src/core/components/Checkbox/constants/index.ts
@@ -1,11 +1,11 @@
-import { SvgSizeType } from "../types";
+import { SvgSizeType } from '../types';
 
 export const SVG_SIZE = {
-  SIZE_32: "size-32",
-  SIZE_24: "size-24",
+  SIZE_32: 'size-32',
+  SIZE_24: 'size-24',
 } as const;
 
 export const CHECKBOX_SVG_SIZE: Record<SvgSizeType, string> = {
-  [SVG_SIZE.SIZE_32]: "w-8 h-8",
-  [SVG_SIZE.SIZE_24]: "w-6 h-6",
+  [SVG_SIZE.SIZE_32]: 'w-8 h-8',
+  [SVG_SIZE.SIZE_24]: 'w-6 h-6',
 };
diff --git a/src/core/components/Checkbox/index.tsx b/src/core/components/Checkbox/index.tsx
index a8cdfaa..df0c7c4 100644
--- a/src/core/components/Checkbox/index.tsx
+++ b/src/core/components/Checkbox/index.tsx
@@ -1,42 +1,58 @@
-import clsx from "clsx";
-import { MouseEvent, forwardRef, useId } from "react";
+import clsx from 'clsx';
+import { MouseEvent, forwardRef, useId } from 'react';
 
-import { CheckCircle, CheckSquare } from "@phosphor-icons/react";
-import Typography from "../Typography";
-import { CHECKBOX_SVG_SIZE, SVG_SIZE } from "./constants";
-import { CheckboxProps } from "./types";
+import { CheckCircle, CheckSquare } from '@phosphor-icons/react';
+import Typography from '../Typography';
+import { CHECKBOX_SVG_SIZE, SVG_SIZE } from './constants';
+import { CheckboxProps } from './types';
 
-const Checkbox = forwardRef((
+const Checkbox = forwardRef(
+  (
     {
       label,
-      svgSize = SVG_SIZE["SIZE_24"],
+      svgSize = SVG_SIZE['SIZE_24'],
       isCircle = false,
       className,
       disabled,
       ...props
     }: CheckboxProps,
-    ref: React.ComponentPropsWithRef<"input">["ref"],
+    ref: React.ComponentPropsWithRef<'input'>['ref'],
   ) => {
-  const id = useId();
-  const RectangleCheckbox =
-    <CheckSquare size = "100%" weight = "fill" />;
-  const CircleCheckbox =
-    <CheckCircle size = "100%" weight = "fill" />;
-  const svg = !isCircle ? RectangleCheckbox : CircleCheckbox;
+    const id = useId();
+    const RectangleCheckbox = <CheckSquare size='100%' weight='fill' />;
+    const CircleCheckbox = <CheckCircle size='100%' weight='fill' />;
+    const svg = !isCircle ? RectangleCheckbox : CircleCheckbox;
 
-  return (
-    <label
-      onClick = {(e: MouseEvent<HTMLLabelElement>) => e.stopPropagation()}
-      htmlFor = {id}
-      className = {clsx({ "flex items-center gap-2.5": label, "cursor-not-allowed": disabled, "cursor-pointer": !disabled }, className)}
-    >
-      <input ref = {ref} id = {id} type = "checkbox" className = "peer hidden" disabled = {disabled} {...props}/>
-      <div className = {`${CHECKBOX_SVG_SIZE[svgSize]} [&>svg>path]:fill-[#C6CEDE] peer-checked:[&>svg>path]:fill-primary-03`}>
-        {svg}
-      </div>
-      {label && <Typography text = {label} />}
-    </label>
-  );
-});
+    return (
+      <label
+        onClick={(e: MouseEvent<HTMLLabelElement>) => e.stopPropagation()}
+        htmlFor={id}
+        className={clsx(
+          {
+            'flex items-center gap-2.5': label,
+            'cursor-not-allowed': disabled,
+            'cursor-pointer': !disabled,
+          },
+          className,
+        )}
+      >
+        <input
+          ref={ref}
+          id={id}
+          type='checkbox'
+          className='peer hidden'
+          disabled={disabled}
+          {...props}
+        />
+        <div
+          className={`${CHECKBOX_SVG_SIZE[svgSize]} [&>svg>path]:fill-[#C6CEDE] peer-checked:[&>svg>path]:fill-primary-03`}
+        >
+          {svg}
+        </div>
+        {label && <Typography text={label} />}
+      </label>
+    );
+  },
+);
 
 export default Checkbox;
diff --git a/src/core/components/Checkbox/types/index.ts b/src/core/components/Checkbox/types/index.ts
index 9f9fc63..076bd47 100644
--- a/src/core/components/Checkbox/types/index.ts
+++ b/src/core/components/Checkbox/types/index.ts
@@ -1,8 +1,9 @@
-import { SVG_SIZE } from "../constants";
+import { SVG_SIZE } from '../constants';
 
-export type SvgSizeType = typeof SVG_SIZE[keyof typeof SVG_SIZE];
+export type SvgSizeType = (typeof SVG_SIZE)[keyof typeof SVG_SIZE];
 
-export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface CheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   svgSize?: SvgSizeType;
   isCircle?: boolean;
diff --git a/src/core/components/Divider/Divider.stories.tsx b/src/core/components/Divider/Divider.stories.tsx
index 622d705..3ed9490 100644
--- a/src/core/components/Divider/Divider.stories.tsx
+++ b/src/core/components/Divider/Divider.stories.tsx
@@ -1,19 +1,19 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import Divider from "@/core/components/Divider/index";
+import Divider from '@/core/components/Divider/index';
 
 const meta = {
-  title: "core/Divider",
+  title: 'core/Divider',
   component: Divider,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
 } satisfies Meta<typeof Divider>;
 
 export default meta;
 
 export const Primary = () => {
   return (
-    <div className = {"w-96 px-2"}>
-      <Divider/>
+    <div className={'w-96 px-2'}>
+      <Divider />
     </div>
   );
 };
diff --git a/src/core/components/Divider/index.tsx b/src/core/components/Divider/index.tsx
index 7154f0d..db68e7e 100644
--- a/src/core/components/Divider/index.tsx
+++ b/src/core/components/Divider/index.tsx
@@ -1,7 +1,10 @@
-import clsx from "clsx";
+import clsx from 'clsx';
 
-export default function Divider({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+export default function Divider({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <div className = {clsx("w-full h-[1px] bg-gray-02", className)} {...props} />
+    <div className={clsx('h-[1px] w-full bg-gray-02', className)} {...props} />
   );
 }
diff --git a/src/core/components/Drawer/Drawer.stories.tsx b/src/core/components/Drawer/Drawer.stories.tsx
index 7795077..d2d28e1 100644
--- a/src/core/components/Drawer/Drawer.stories.tsx
+++ b/src/core/components/Drawer/Drawer.stories.tsx
@@ -1,37 +1,37 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import Drawer from "./index";
-import { DrawerProps } from "./types";
+import Drawer from './index';
+import { DrawerProps } from './types';
 
 const meta = {
-  title: "core/Drawer",
+  title: 'core/Drawer',
   component: Drawer,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
   argTypes: {
     target: {
-      control: "text",
-      defaultValue: "modal",
-      description: "Modal Render Position Element id",
+      control: 'text',
+      defaultValue: 'modal',
+      description: 'Modal Render Position Element id',
     },
     title: {
-      control: "text",
-      description: "Drawer Title",
+      control: 'text',
+      description: 'Drawer Title',
     },
     titleSub: {
-      control: "text",
-      description: "Drawer Title Sub",
+      control: 'text',
+      description: 'Drawer Title Sub',
     },
     isOpen: {
-      control: "boolean",
+      control: 'boolean',
       defaultValue: false,
-      description: "Open Modal",
+      description: 'Open Modal',
     },
     onClose: {
-      action: "clicked",
-      description: "Drawer Close Function",
+      action: 'clicked',
+      description: 'Drawer Close Function',
     },
   },
 } satisfies Meta<typeof Drawer>;
@@ -39,29 +39,27 @@ const meta = {
 export default meta;
 
 export const Default = (props: DrawerProps) => {
-  const [ isOpen, setIsOpen ] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const onToggle = () => setIsOpen(v => !v);
+  const onToggle = () => setIsOpen((v) => !v);
 
   return (
     <>
-      <header className = "h-14 bg-gray-01">Header</header>
-      <div className = "flex h-[calc(100vh-4rem)]">
-        <nav className = "w-[15rem] border-r border-gray-01">SideBar</nav>
-        <main className = "relative flex-1">
-          <div id = {props.target ?? "bar"} />
+      <header className='h-14 bg-gray-01'>Header</header>
+      <div className='flex h-[calc(100vh-4rem)]'>
+        <nav className='w-[15rem] border-r border-gray-01'>SideBar</nav>
+        <main className='relative flex-1'>
+          <div id={props.target ?? 'bar'} />
           <Drawer
-            title = {props.title ?? "알림"}
-            titleSub = {props.titleSub}
-            target = {props.target ?? "bar"}
-            isOpen = {props.isOpen || isOpen}
-            onClose = {onToggle}
+            title={props.title ?? '알림'}
+            titleSub={props.titleSub}
+            target={props.target ?? 'bar'}
+            isOpen={props.isOpen || isOpen}
+            onClose={onToggle}
           >
             Drawer
           </Drawer>
-          <button onClick = {onToggle}>
-            Drawer Open!!
-          </button>
+          <button onClick={onToggle}>Drawer Open!!</button>
         </main>
       </div>
     </>
diff --git a/src/core/components/Drawer/index.tsx b/src/core/components/Drawer/index.tsx
index 5028705..a961cfb 100644
--- a/src/core/components/Drawer/index.tsx
+++ b/src/core/components/Drawer/index.tsx
@@ -1,14 +1,15 @@
-import { X } from "@phosphor-icons/react";
-import clsx from "clsx";
-import { PropsWithChildren, forwardRef } from "react";
+import { X } from '@phosphor-icons/react';
+import clsx from 'clsx';
+import { PropsWithChildren, forwardRef } from 'react';
 
-import { useBlockScrollingEffect } from "@/hooks/effects/useBlockScrollingEffect";
-import ModalBase from "../Modal/ModalBase";
-import Section from "../Section";
-import Typography from "../Typography";
-import { DrawerProps } from "./types";
+import { useBlockScrollingEffect } from '@/hooks/effects/useBlockScrollingEffect';
+import ModalBase from '../Modal/ModalBase';
+import Section from '../Section';
+import Typography from '../Typography';
+import { DrawerProps } from './types';
 
-const Drawer = forwardRef((
+const Drawer = forwardRef(
+  (
     {
       title,
       titleSub,
@@ -16,43 +17,55 @@ const Drawer = forwardRef((
       children,
       isOpen,
       ...props
-     }: PropsWithChildren<DrawerProps>,
-     ref: React.Ref<HTMLDialogElement>,
+    }: PropsWithChildren<DrawerProps>,
+    ref: React.Ref<HTMLDialogElement>,
   ) => {
-  const { target, className, ...rest } = props;
-  const CloseIcon = <X size = "32" fill = "#343330"/>;
+    const { target, className, ...rest } = props;
+    const CloseIcon = <X size='32' fill='#343330' />;
 
-  useBlockScrollingEffect(isOpen);
+    useBlockScrollingEffect(isOpen);
 
-  return (
-    <ModalBase
-      target = {target ?? "drawer"}
-      ref = {ref}
-      variants = {"drawer"}
-      isOpen = {isOpen}
-      {...rest}
-    >
-      <Section
-        element = "div"
-        className = {clsx("w-[29.1875rem] h-full animate-drawer", className)}
-        hasRounded = {false}
-        hasShadow
+    return (
+      <ModalBase
+        target={target ?? 'drawer'}
+        ref={ref}
+        variants={'drawer'}
+        isOpen={isOpen}
+        {...rest}
       >
-        <header className = "flex-v-stack gap-y-6 pt-6 px-4 after:content-[''] after:h-[0.0625rem] after:bg-gray-02">
-          <div className = "flex items-center justify-between">
-            <div className = {clsx(titleSub && "flex items-center gap-x-2")}>
-              <Typography element = "strong" theme = "head-01-bold" className = "text-black" text = {title} />
-              {titleSub && <Typography theme = "body-02-regular" color = "gray-06" text = {titleSub} />}
+        <Section
+          element='div'
+          className={clsx('h-full w-[29.1875rem] animate-drawer', className)}
+          hasRounded={false}
+          hasShadow
+        >
+          <header className="flex-v-stack gap-y-6 px-4 pt-6 after:h-[0.0625rem] after:bg-gray-02 after:content-['']">
+            <div className='flex items-center justify-between'>
+              <div className={clsx(titleSub && 'flex items-center gap-x-2')}>
+                <Typography
+                  element='strong'
+                  theme='head-01-bold'
+                  className='text-black'
+                  text={title}
+                />
+                {titleSub && (
+                  <Typography
+                    theme='body-02-regular'
+                    color='gray-06'
+                    text={titleSub}
+                  />
+                )}
+              </div>
+              <button onClick={onClose} aria-label='창 닫기'>
+                {CloseIcon}
+              </button>
             </div>
-            <button onClick = {onClose} aria-label = "창 닫기">
-              {CloseIcon}
-            </button>
-          </div>
-        </header>
-        {children}
-      </Section>
-    </ModalBase>
-  );
-});
+          </header>
+          {children}
+        </Section>
+      </ModalBase>
+    );
+  },
+);
 
 export default Drawer;
diff --git a/src/core/components/Drawer/types/index.ts b/src/core/components/Drawer/types/index.ts
index ae0cff1..bcd316f 100644
--- a/src/core/components/Drawer/types/index.ts
+++ b/src/core/components/Drawer/types/index.ts
@@ -1,10 +1,12 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes } from 'react';
 
-import { ModalBaseProps } from "../../Modal/ModalBase/types";
-import { TypographyProps } from "../../Typography/types";
+import { ModalBaseProps } from '../../Modal/ModalBase/types';
+import { TypographyProps } from '../../Typography/types';
 
-export interface DrawerProps extends Pick<ModalBaseProps, "target" | "isOpen">, Omit<HTMLAttributes<HTMLElement>, "title"> {
-  title: TypographyProps<"strong">["text"];
-  titleSub?: TypographyProps<"span">["text"];
-  onClose: ModalBaseProps["onClose"];
+export interface DrawerProps
+  extends Pick<ModalBaseProps, 'target' | 'isOpen'>,
+    Omit<HTMLAttributes<HTMLElement>, 'title'> {
+  title: TypographyProps<'strong'>['text'];
+  titleSub?: TypographyProps<'span'>['text'];
+  onClose: ModalBaseProps['onClose'];
 }
diff --git a/src/core/components/Dropdown/DropdownBase/Dropdown.stories.tsx b/src/core/components/Dropdown/DropdownBase/Dropdown.stories.tsx
index 90bcbc0..1aeae64 100644
--- a/src/core/components/Dropdown/DropdownBase/Dropdown.stories.tsx
+++ b/src/core/components/Dropdown/DropdownBase/Dropdown.stories.tsx
@@ -1,11 +1,11 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import { CaretDown } from "@phosphor-icons/react";
-import { useState } from "react";
-import DropdownBase from "./index";
+import { CaretDown } from '@phosphor-icons/react';
+import { useState } from 'react';
+import DropdownBase from './index';
 
 const meta = {
-  title: "core/Dropdown/DropdownBase",
+  title: 'core/Dropdown/DropdownBase',
   component: DropdownBase,
   argTypes: {},
 } satisfies Meta<typeof DropdownBase>;
@@ -13,57 +13,55 @@ const meta = {
 export default meta;
 
 export const Default = () => {
-  const [ currentValue, setCurrentValue ] = useState("");
+  const [currentValue, setCurrentValue] = useState('');
 
-  const data = [ "A반", "B반", "C반", "D반", "E반" ];
+  const data = ['A반', 'B반', 'C반', 'D반', 'E반'];
 
-  const items = data.map(item => (
-    <DropdownBase.Item
-      onClick = {() => setCurrentValue(item)}
-    >
+  const items = data.map((item) => (
+    <DropdownBase.Item onClick={() => setCurrentValue(item)}>
       {item}
     </DropdownBase.Item>
   ));
 
   return (
     <DropdownBase
-      trigger = {
+      trigger={
         <DropdownBase.Trigger>
-          {currentValue || "옵션을 선택해주세요"}
+          {currentValue || '옵션을 선택해주세요'}
         </DropdownBase.Trigger>
       }
-      content = {<DropdownBase.Items items = {items} />}
+      content={<DropdownBase.Items items={items} />}
     />
   );
 };
 
 export const DropdownBaseWithIcon = () => {
-  const [ currentValue, setCurrentValue ] = useState("");
+  const [currentValue, setCurrentValue] = useState('');
 
-  const data = [ "A반", "B반", "C반", "D반", "E반" ];
+  const data = ['A반', 'B반', 'C반', 'D반', 'E반'];
 
   const items = data.map((item, idx) => (
-    <DropdownBase.Item
-      key = {idx}
-      onClick = {() => setCurrentValue(item)}
-    >
+    <DropdownBase.Item key={idx} onClick={() => setCurrentValue(item)}>
       {item}
     </DropdownBase.Item>
   ));
 
   return (
     <DropdownBase
-      trigger = {
+      trigger={
         <DropdownBase.Trigger>
           {({ isToggle }) => (
-            <div className = "flex items-center">
-              {currentValue || "옵션을 선택해주세요"}
-              <CaretDown size = "16" className = {isToggle ? "rotate-180" : "rotate-0"}/>
+            <div className='flex items-center'>
+              {currentValue || '옵션을 선택해주세요'}
+              <CaretDown
+                size='16'
+                className={isToggle ? 'rotate-180' : 'rotate-0'}
+              />
             </div>
-      )}
+          )}
         </DropdownBase.Trigger>
       }
-      content = {<DropdownBase.Items items = {items} />}
+      content={<DropdownBase.Items items={items} />}
     />
   );
 };
diff --git a/src/core/components/Dropdown/DropdownBase/DropdownItem.tsx b/src/core/components/Dropdown/DropdownBase/DropdownItem.tsx
index 48d1d4c..46977b8 100644
--- a/src/core/components/Dropdown/DropdownBase/DropdownItem.tsx
+++ b/src/core/components/Dropdown/DropdownBase/DropdownItem.tsx
@@ -1,38 +1,40 @@
-import { PropsWithChildren, forwardRef, useContext } from "react";
+import { PropsWithChildren, forwardRef, useContext } from 'react';
 
-import clsx from "clsx";
-import { DropdownContext } from ".";
-import { DropdownContextValue, DropdownItemProps } from "./types";
+import clsx from 'clsx';
+import { DropdownContext } from '.';
+import { DropdownContextValue, DropdownItemProps } from './types';
 
-const DropdownItem = forwardRef((
-  {
-    children,
-    onClick,
-    className,
-    ...props
-  }: PropsWithChildren<DropdownItemProps>,
-  ref: React.Ref<HTMLLIElement>,
-) => {
-  const { setIsToggle } = useContext(DropdownContext) as DropdownContextValue;
+const DropdownItem = forwardRef(
+  (
+    {
+      children,
+      onClick,
+      className,
+      ...props
+    }: PropsWithChildren<DropdownItemProps>,
+    ref: React.Ref<HTMLLIElement>,
+  ) => {
+    const { setIsToggle } = useContext(DropdownContext) as DropdownContextValue;
 
-  const onClickHandler = (e: React.MouseEvent<HTMLLIElement>) => {
-    setIsToggle(false);
-    onClick?.(e);
-  };
+    const onClickHandler = (e: React.MouseEvent<HTMLLIElement>) => {
+      setIsToggle(false);
+      onClick?.(e);
+    };
 
-  return (
-    <li
-      ref = {ref}
-      role = "option"
-      onClick = {onClickHandler}
-      className = {clsx("cursor-pointer", className)}
-      {...props}
-    >
-      {children}
-    </li>
-  );
-});
+    return (
+      <li
+        ref={ref}
+        role='option'
+        onClick={onClickHandler}
+        className={clsx('cursor-pointer', className)}
+        {...props}
+      >
+        {children}
+      </li>
+    );
+  },
+);
 
 export default DropdownItem;
 
-DropdownItem.displayName = "DropdownItem";
+DropdownItem.displayName = 'DropdownItem';
diff --git a/src/core/components/Dropdown/DropdownBase/DropdownItems.tsx b/src/core/components/Dropdown/DropdownBase/DropdownItems.tsx
index f20ebfb..eabc2a2 100644
--- a/src/core/components/Dropdown/DropdownBase/DropdownItems.tsx
+++ b/src/core/components/Dropdown/DropdownBase/DropdownItems.tsx
@@ -1,29 +1,29 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
-import { DropdownItemsProps } from "./types";
+import { DropdownItemsProps } from './types';
 
-const DropdownItems = forwardRef((
-    {
-      className,
-      items,
-      ...props
-    }: DropdownItemsProps,
+const DropdownItems = forwardRef(
+  (
+    { className, items, ...props }: DropdownItemsProps,
     ref: React.Ref<HTMLUListElement>,
   ) => {
-
-  return (
-    <ul
-      ref = {ref}
-      className = {clsx("absolute mt-2 whitespace-nowrap bg-white z-10", className)}
-      role = "listbox"
-      {...props}
-    >
-      {items}
-    </ul>
-  );
-});
+    return (
+      <ul
+        ref={ref}
+        className={clsx(
+          'absolute z-10 mt-2 whitespace-nowrap bg-white',
+          className,
+        )}
+        role='listbox'
+        {...props}
+      >
+        {items}
+      </ul>
+    );
+  },
+);
 
 export default DropdownItems;
 
-DropdownItems.displayName = "DropdownItems";
+DropdownItems.displayName = 'DropdownItems';
diff --git a/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx b/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx
index e99ae00..aa2dd8c 100644
--- a/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx
+++ b/src/core/components/Dropdown/DropdownBase/DropdownTrigger.tsx
@@ -1,46 +1,52 @@
-import { forwardRef, useContext } from "react";
+import { forwardRef, useContext } from 'react';
 
-import clsx from "clsx";
-import { DropdownContext } from "./index";
-import { DropdownContextValue, DropdownTriggerProps } from "./types";
+import clsx from 'clsx';
+import { DropdownContext } from './index';
+import { DropdownContextValue, DropdownTriggerProps } from './types';
 
-const DropdownTrigger = forwardRef((
-    {
-      onClick,
-      className,
-      children,
-      ...props
-    }: DropdownTriggerProps,
+const DropdownTrigger = forwardRef(
+  (
+    { onClick, className, children, ...props }: DropdownTriggerProps,
     ref: React.Ref<HTMLButtonElement>,
   ) => {
-  const { isToggle, readOnly, disabled, setIsToggle } = useContext(DropdownContext) as DropdownContextValue;
-  const content = typeof children === "function" ? children({ isToggle, readOnly, disabled }) : children;
-  const isDisabled = readOnly || disabled;
+    const { isToggle, readOnly, disabled, setIsToggle } = useContext(
+      DropdownContext,
+    ) as DropdownContextValue;
+    const content =
+      typeof children === 'function'
+        ? children({ isToggle, readOnly, disabled })
+        : children;
+    const isDisabled = readOnly || disabled;
 
-  const onClickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if(isDisabled) return;
+    const onClickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (isDisabled) return;
 
-    setIsToggle(v => !v);
-    onClick?.(e);
-  };
+      setIsToggle((v) => !v);
+      onClick?.(e);
+    };
 
-  return (
-    <button
-      ref = {ref}
-      type = "button"
-      onClick = {onClickHandler}
-      className = {clsx("whitespace-nowrap cursor-pointer", isDisabled && "!cursor-not-allowed bg-gray-09", className)}
-      aria-haspopup = "listbox"
-      aria-expanded = {isToggle}
-      aria-disabled = {disabled}
-      aria-readonly = {readOnly}
-      {...props}
-    >
-      {content}
-    </button>
-  );
-});
+    return (
+      <button
+        ref={ref}
+        type='button'
+        onClick={onClickHandler}
+        className={clsx(
+          'cursor-pointer whitespace-nowrap',
+          isDisabled && '!cursor-not-allowed bg-gray-09',
+          className,
+        )}
+        aria-haspopup='listbox'
+        aria-expanded={isToggle}
+        aria-disabled={disabled}
+        aria-readonly={readOnly}
+        {...props}
+      >
+        {content}
+      </button>
+    );
+  },
+);
 
 export default DropdownTrigger;
 
-DropdownTrigger.displayName = "DropdownTrigger";
+DropdownTrigger.displayName = 'DropdownTrigger';
diff --git a/src/core/components/Dropdown/DropdownBase/index.tsx b/src/core/components/Dropdown/DropdownBase/index.tsx
index b000497..fb9893a 100644
--- a/src/core/components/Dropdown/DropdownBase/index.tsx
+++ b/src/core/components/Dropdown/DropdownBase/index.tsx
@@ -1,15 +1,17 @@
-import useClickOutside from "@/hooks/useClickOutSide";
-import clsx from "clsx";
-import { createContext, useState } from "react";
+import useClickOutside from '@/hooks/useClickOutSide';
+import clsx from 'clsx';
+import { createContext, useState } from 'react';
 
-import Typography from "../../Typography";
-import DropdownItem from "./DropdownItem";
-import DropdownItems from "./DropdownItems";
-import DropdownTrigger from "./DropdownTrigger";
-import { DropdownContextValue, DropdownProps, ReturnType } from "./types";
+import Typography from '../../Typography';
+import DropdownItem from './DropdownItem';
+import DropdownItems from './DropdownItems';
+import DropdownTrigger from './DropdownTrigger';
+import { DropdownContextValue, DropdownProps, ReturnType } from './types';
 
-export const DropdownContext = createContext<DropdownContextValue | undefined>(undefined);
-DropdownContext.displayName = "DropdownContext";
+export const DropdownContext = createContext<DropdownContextValue | undefined>(
+  undefined,
+);
+DropdownContext.displayName = 'DropdownContext';
 
 const DropdownBase = ({
   className,
@@ -18,26 +20,36 @@ const DropdownBase = ({
   trigger,
   content,
   feedback,
-  feedbackColor = "error",
+  feedbackColor = 'error',
 }: DropdownProps) => {
-  const [ isToggle, setIsToggle ] = useState(false);
-  const { contentRef } = useClickOutside<HTMLDivElement>(() => setIsToggle(false));
+  const [isToggle, setIsToggle] = useState(false);
+  const { contentRef } = useClickOutside<HTMLDivElement>(() =>
+    setIsToggle(false),
+  );
   const isVisibleContent = !readOnly && !disabled && isToggle;
 
   return (
-    <DropdownContext.Provider value = {{ isToggle, setIsToggle, readOnly, disabled }}>
-      <div ref = {contentRef} className = {clsx(className, "relative")}>
+    <DropdownContext.Provider
+      value={{ isToggle, setIsToggle, readOnly, disabled }}
+    >
+      <div ref={contentRef} className={clsx(className, 'relative')}>
         {trigger}
         {isVisibleContent && content}
       </div>
-      {feedback ? <Typography theme = "body-03-regular" color = {feedbackColor} text = {feedback} /> : null}
+      {feedback ? (
+        <Typography
+          theme='body-03-regular'
+          color={feedbackColor}
+          text={feedback}
+        />
+      ) : null}
     </DropdownContext.Provider>
   );
 };
 
 export default DropdownBase as unknown as ReturnType;
 
-DropdownBase.displayName = "DropdownBase";
+DropdownBase.displayName = 'DropdownBase';
 DropdownBase.Trigger = DropdownTrigger;
 DropdownBase.Items = DropdownItems;
 DropdownBase.Item = DropdownItem;
diff --git a/src/core/components/Dropdown/DropdownBase/types/index.ts b/src/core/components/Dropdown/DropdownBase/types/index.ts
index 7648b08..0674b0c 100644
--- a/src/core/components/Dropdown/DropdownBase/types/index.ts
+++ b/src/core/components/Dropdown/DropdownBase/types/index.ts
@@ -1,8 +1,8 @@
-import { ThemeColors } from "@/types";
-import { Dispatch, HTMLAttributes, SetStateAction } from "react";
-import DropdownItem from "../DropdownItem";
-import DropdownItems from "../DropdownItems";
-import DropdownTrigger from "../DropdownTrigger";
+import { ThemeColors } from '@/types';
+import { Dispatch, HTMLAttributes, SetStateAction } from 'react';
+import DropdownItem from '../DropdownItem';
+import DropdownItems from '../DropdownItems';
+import DropdownTrigger from '../DropdownTrigger';
 
 export interface DropdownProps {
   className?: string;
@@ -14,20 +14,26 @@ export interface DropdownProps {
   feedbackColor?: ThemeColors;
 }
 
-export interface DropdownContextValue extends Pick<DropdownProps, "readOnly" | "disabled"> {
+export interface DropdownContextValue
+  extends Pick<DropdownProps, 'readOnly' | 'disabled'> {
   isToggle: boolean;
   setIsToggle: Dispatch<SetStateAction<boolean>>;
 }
 
 export interface DropdownItemProps extends HTMLAttributes<HTMLLIElement> {}
 
-export interface DropdownItemsProps extends HTMLAttributes<HTMLUListElement>{
+export interface DropdownItemsProps extends HTMLAttributes<HTMLUListElement> {
   items: React.ReactNode[];
 }
 
-export interface DropdownTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
+export interface DropdownTriggerProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'children'> {
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  children: React.ReactNode | ((props: Pick<DropdownContextValue, "isToggle" | "readOnly" | "disabled">) => React.ReactNode);
+  children:
+    | React.ReactNode
+    | ((
+        props: Pick<DropdownContextValue, 'isToggle' | 'readOnly' | 'disabled'>,
+      ) => React.ReactNode);
 }
 
 type Dropdown = (props: DropdownProps) => React.ReactElement;
diff --git a/src/core/components/Dropdown/DropdownFilter/DropdownFilter.stories.tsx b/src/core/components/Dropdown/DropdownFilter/DropdownFilter.stories.tsx
index 3707a8a..a9b0381 100644
--- a/src/core/components/Dropdown/DropdownFilter/DropdownFilter.stories.tsx
+++ b/src/core/components/Dropdown/DropdownFilter/DropdownFilter.stories.tsx
@@ -1,10 +1,10 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import DropdownFilter from "../DropdownFilter";
+import DropdownFilter from '../DropdownFilter';
 
 const meta = {
-  title: "core/Dropdown/DropdownFilter",
+  title: 'core/Dropdown/DropdownFilter',
   component: DropdownFilter,
   argTypes: {},
 } satisfies Meta<typeof DropdownFilter>;
@@ -12,14 +12,14 @@ const meta = {
 export default meta;
 
 export const Default = () => {
-  const [ currentValue, setCurrentValue ] = useState("");
-  const data = [ "학부모", "교육기관", "둘다" ];
+  const [currentValue, setCurrentValue] = useState('');
+  const data = ['학부모', '교육기관', '둘다'];
 
   const items = data.map((item, idx) => (
     <DropdownFilter.Item
-      key = {idx}
-      checked = {item === currentValue}
-      onClick = {() => setCurrentValue(item)}
+      key={idx}
+      checked={item === currentValue}
+      onClick={() => setCurrentValue(item)}
     >
       {item}
     </DropdownFilter.Item>
@@ -27,9 +27,13 @@ export const Default = () => {
 
   return (
     <DropdownFilter
-      trigger = {<DropdownFilter.Trigger className = "w-[10rem]" currentValue = {currentValue || "선택해주세요"}/>}
-      content = {<DropdownFilter.Items items = {items} />
+      trigger={
+        <DropdownFilter.Trigger
+          className='w-[10rem]'
+          currentValue={currentValue || '선택해주세요'}
+        />
       }
+      content={<DropdownFilter.Items items={items} />}
     />
   );
 };
diff --git a/src/core/components/Dropdown/DropdownFilter/DropdownFilterItem.tsx b/src/core/components/Dropdown/DropdownFilter/DropdownFilterItem.tsx
index 1d746fc..c158dcf 100644
--- a/src/core/components/Dropdown/DropdownFilter/DropdownFilterItem.tsx
+++ b/src/core/components/Dropdown/DropdownFilter/DropdownFilterItem.tsx
@@ -1,28 +1,28 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
-import DropdownBase from "../DropdownBase";
-import { DropdownFilterItemProps } from "./types";
+import DropdownBase from '../DropdownBase';
+import { DropdownFilterItemProps } from './types';
 
-const DropdownFilterItem = forwardRef((
-    {
-      className,
-      children,
-      checked,
-      ...props
-    }: DropdownFilterItemProps,
+const DropdownFilterItem = forwardRef(
+  (
+    { className, children, checked, ...props }: DropdownFilterItemProps,
     ref: React.Ref<HTMLLIElement>,
   ) => {
-
-  return (
-    <DropdownBase.Item
-      ref = {ref}
-      className = {clsx("text-gray-08 text-body-01-regular hover:font-bold", checked && "font-bold", className)}
-      {...props}
-    >
-      {children}
-    </DropdownBase.Item>
-  );
-});
+    return (
+      <DropdownBase.Item
+        ref={ref}
+        className={clsx(
+          'text-body-01-regular text-gray-08 hover:font-bold',
+          checked && 'font-bold',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DropdownBase.Item>
+    );
+  },
+);
 
 export default DropdownFilterItem;
diff --git a/src/core/components/Dropdown/DropdownFilter/DropdownFilterItems.tsx b/src/core/components/Dropdown/DropdownFilter/DropdownFilterItems.tsx
index 483589b..fb3275c 100644
--- a/src/core/components/Dropdown/DropdownFilter/DropdownFilterItems.tsx
+++ b/src/core/components/Dropdown/DropdownFilter/DropdownFilterItems.tsx
@@ -1,24 +1,25 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
-import DropdownBase from "../DropdownBase";
-import { DropdownItemsProps } from "../DropdownBase/types";
+import DropdownBase from '../DropdownBase';
+import { DropdownItemsProps } from '../DropdownBase/types';
 
-const DropdownFilterItems = forwardRef((
-    {
-      className,
-      ...props
-    }: DropdownItemsProps,
+const DropdownFilterItems = forwardRef(
+  (
+    { className, ...props }: DropdownItemsProps,
     ref: React.Ref<HTMLUListElement>,
   ) => {
-
-  return (
-    <DropdownBase.Items
-      ref = {ref}
-      className = {clsx("flex-v-stack gap-y-6 px-3 py-4 border border-gray-03 overflow-hidden rounded-xl", className)}
-      {...props}
-    />
-  );
-});
+    return (
+      <DropdownBase.Items
+        ref={ref}
+        className={clsx(
+          'flex-v-stack gap-y-6 overflow-hidden rounded-xl border border-gray-03 px-3 py-4',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
 
 export default DropdownFilterItems;
diff --git a/src/core/components/Dropdown/DropdownFilter/DropdownFilterTrigger.tsx b/src/core/components/Dropdown/DropdownFilter/DropdownFilterTrigger.tsx
index 7b2b688..e2d5415 100644
--- a/src/core/components/Dropdown/DropdownFilter/DropdownFilterTrigger.tsx
+++ b/src/core/components/Dropdown/DropdownFilter/DropdownFilterTrigger.tsx
@@ -1,28 +1,36 @@
-import { forwardRef } from "react";
+import { forwardRef } from 'react';
 
-import { CaretDown } from "@phosphor-icons/react";
-import Typography from "../../Typography";
-import DropdownBase from "../DropdownBase";
-import { DropdownFilterTriggerProps } from "./types";
+import { CaretDown } from '@phosphor-icons/react';
+import Typography from '../../Typography';
+import DropdownBase from '../DropdownBase';
+import { DropdownFilterTriggerProps } from './types';
 
-const DropdownFilterTrigger = forwardRef((
-    {
-      currentValue,
-      ...props
-    }: DropdownFilterTriggerProps,
+const DropdownFilterTrigger = forwardRef(
+  (
+    { currentValue, ...props }: DropdownFilterTriggerProps,
     ref: React.Ref<HTMLButtonElement>,
   ) => {
-
-  return (
-    <DropdownBase.Trigger ref = {ref} {...props}>
-      {({ isToggle }) => (
-        <div className = "flex items-center justify-between gap-x-1">
-          <Typography theme = "body-02-regular" color = "gray-06" text = {currentValue}/>
-          <CaretDown size = "16" className = {isToggle ? "rotate-180 text-gray-06" : "rotate-0 text-gray-06"} weight = "fill"/>
-        </div>
-      )}
-    </DropdownBase.Trigger>
-  );
-});
+    return (
+      <DropdownBase.Trigger ref={ref} {...props}>
+        {({ isToggle }) => (
+          <div className='flex items-center justify-between gap-x-1'>
+            <Typography
+              theme='body-02-regular'
+              color='gray-06'
+              text={currentValue}
+            />
+            <CaretDown
+              size='16'
+              className={
+                isToggle ? 'rotate-180 text-gray-06' : 'rotate-0 text-gray-06'
+              }
+              weight='fill'
+            />
+          </div>
+        )}
+      </DropdownBase.Trigger>
+    );
+  },
+);
 
 export default DropdownFilterTrigger;
diff --git a/src/core/components/Dropdown/DropdownFilter/index.tsx b/src/core/components/Dropdown/DropdownFilter/index.tsx
index 0d8de4f..35592f3 100644
--- a/src/core/components/Dropdown/DropdownFilter/index.tsx
+++ b/src/core/components/Dropdown/DropdownFilter/index.tsx
@@ -1,19 +1,17 @@
-import DropdownBase from "../DropdownBase";
-import { DropdownProps } from "../DropdownBase/types";
-import DropdownFilterItem from "./DropdownFilterItem";
-import DropdownFilterItems from "./DropdownFilterItems";
-import DropdownFilterTrigger from "./DropdownFilterTrigger";
-import { ReturnType } from "./types";
+import DropdownBase from '../DropdownBase';
+import { DropdownProps } from '../DropdownBase/types';
+import DropdownFilterItem from './DropdownFilterItem';
+import DropdownFilterItems from './DropdownFilterItems';
+import DropdownFilterTrigger from './DropdownFilterTrigger';
+import { ReturnType } from './types';
 
 const DropdownFilter = ({ ...props }: DropdownProps) => {
-  return (
-    <DropdownBase {...props}/>
-  );
+  return <DropdownBase {...props} />;
 };
 
 export default DropdownFilter as unknown as ReturnType;
 
-DropdownFilter.displayName = "DropdownFilter";
+DropdownFilter.displayName = 'DropdownFilter';
 DropdownFilter.Trigger = DropdownFilterTrigger;
 DropdownFilter.Items = DropdownFilterItems;
 DropdownFilter.Item = DropdownFilterItem;
diff --git a/src/core/components/Dropdown/DropdownFilter/types/index.ts b/src/core/components/Dropdown/DropdownFilter/types/index.ts
index 242bc16..02e44dd 100644
--- a/src/core/components/Dropdown/DropdownFilter/types/index.ts
+++ b/src/core/components/Dropdown/DropdownFilter/types/index.ts
@@ -1,15 +1,20 @@
-import { TypographyProps } from "@/core/components/Typography/types";
-import { DropdownItemProps, DropdownProps, DropdownTriggerProps } from "../../DropdownBase/types";
-import DropdownFilterItem from "../DropdownFilterItem";
-import DropdownFilterItems from "../DropdownFilterItems";
-import DropdownFilterTrigger from "../DropdownFilterTrigger";
+import { TypographyProps } from '@/core/components/Typography/types';
+import {
+  DropdownItemProps,
+  DropdownProps,
+  DropdownTriggerProps,
+} from '../../DropdownBase/types';
+import DropdownFilterItem from '../DropdownFilterItem';
+import DropdownFilterItems from '../DropdownFilterItems';
+import DropdownFilterTrigger from '../DropdownFilterTrigger';
 
-export interface DropdownFilterTriggerProps extends Omit<DropdownTriggerProps, "children"> {
-  currentValue: TypographyProps["text"]
+export interface DropdownFilterTriggerProps
+  extends Omit<DropdownTriggerProps, 'children'> {
+  currentValue: TypographyProps['text'];
 }
 
 export interface DropdownFilterItemProps extends DropdownItemProps {
-  checked: boolean
+  checked: boolean;
 }
 
 type DropdownFilter = (props: DropdownProps) => React.ReactElement;
diff --git a/src/core/components/Dropdown/DropdownSelect/DropdownSelect.stories.tsx b/src/core/components/Dropdown/DropdownSelect/DropdownSelect.stories.tsx
index 871a87c..44eab5c 100644
--- a/src/core/components/Dropdown/DropdownSelect/DropdownSelect.stories.tsx
+++ b/src/core/components/Dropdown/DropdownSelect/DropdownSelect.stories.tsx
@@ -1,10 +1,10 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import DropdownSelect from "./index";
+import DropdownSelect from './index';
 
 const meta = {
-  title: "core/Dropdown/DropdownSelect",
+  title: 'core/Dropdown/DropdownSelect',
   component: DropdownSelect,
   argTypes: {},
 } satisfies Meta<typeof DropdownSelect>;
@@ -12,14 +12,14 @@ const meta = {
 export default meta;
 
 export const Default = () => {
-  const [ currentValue, setCurrentValue ] = useState("");
-  const data = [ "2023년", "2024년", "2025년" ];
+  const [currentValue, setCurrentValue] = useState('');
+  const data = ['2023년', '2024년', '2025년'];
 
   const items = data.map((item, idx) => (
     <DropdownSelect.Item
-      key = {idx}
-      checked = {currentValue === item}
-      onClick = {() => setCurrentValue(item)}
+      key={idx}
+      checked={currentValue === item}
+      onClick={() => setCurrentValue(item)}
     >
       {item}
     </DropdownSelect.Item>
@@ -27,8 +27,13 @@ export const Default = () => {
 
   return (
     <DropdownSelect
-      trigger = {<DropdownSelect.Trigger currentValue = {currentValue} placeholder = "선택해주세요"/>}
-      content = {<DropdownSelect.Items items = {items} />}
+      trigger={
+        <DropdownSelect.Trigger
+          currentValue={currentValue}
+          placeholder='선택해주세요'
+        />
+      }
+      content={<DropdownSelect.Items items={items} />}
     />
   );
 };
diff --git a/src/core/components/Dropdown/DropdownSelect/DropdownSelectItem.tsx b/src/core/components/Dropdown/DropdownSelect/DropdownSelectItem.tsx
index b05f488..723a084 100644
--- a/src/core/components/Dropdown/DropdownSelect/DropdownSelectItem.tsx
+++ b/src/core/components/Dropdown/DropdownSelect/DropdownSelectItem.tsx
@@ -1,28 +1,28 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
-import DropdownBase from "../DropdownBase";
-import { DropdownSelectItemProps } from "./types";
+import DropdownBase from '../DropdownBase';
+import { DropdownSelectItemProps } from './types';
 
-const DropdownSelectItem = forwardRef((
-    {
-      className,
-      children,
-      checked,
-      ...props
-    }: DropdownSelectItemProps,
+const DropdownSelectItem = forwardRef(
+  (
+    { className, children, checked, ...props }: DropdownSelectItemProps,
     ref: React.Ref<HTMLLIElement>,
   ) => {
-
-  return (
-    <DropdownBase.Item
-      ref = {ref}
-      className = {clsx("text-gray-08 text-body-01-regular hover:font-bold", checked && "font-bold", className)}
-      {...props}
-    >
-      {children}
-    </DropdownBase.Item>
-  );
-});
+    return (
+      <DropdownBase.Item
+        ref={ref}
+        className={clsx(
+          'text-body-01-regular text-gray-08 hover:font-bold',
+          checked && 'font-bold',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </DropdownBase.Item>
+    );
+  },
+);
 
 export default DropdownSelectItem;
diff --git a/src/core/components/Dropdown/DropdownSelect/DropdownSelectItems.tsx b/src/core/components/Dropdown/DropdownSelect/DropdownSelectItems.tsx
index 9fdc816..a8d548e 100644
--- a/src/core/components/Dropdown/DropdownSelect/DropdownSelectItems.tsx
+++ b/src/core/components/Dropdown/DropdownSelect/DropdownSelectItems.tsx
@@ -1,24 +1,25 @@
-import clsx from "clsx";
-import { forwardRef } from "react";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
-import DropdownBase from "../DropdownBase";
-import { DropdownItemsProps } from "../DropdownBase/types";
+import DropdownBase from '../DropdownBase';
+import { DropdownItemsProps } from '../DropdownBase/types';
 
-const DropdownSelectItems = forwardRef((
-    {
-      className,
-      ...props
-    }: DropdownItemsProps,
+const DropdownSelectItems = forwardRef(
+  (
+    { className, ...props }: DropdownItemsProps,
     ref: React.Ref<HTMLUListElement>,
   ) => {
-
-  return (
-    <DropdownBase.Items
-      ref = {ref}
-      className = {clsx("flex-v-stack gap-y-6 px-3 py-4 border border-gray-03 overflow-hidden rounded-xl min-w-full", className)}
-      {...props}
-    />
-  );
-});
+    return (
+      <DropdownBase.Items
+        ref={ref}
+        className={clsx(
+          'flex-v-stack min-w-full gap-y-6 overflow-hidden rounded-xl border border-gray-03 px-3 py-4',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
 
 export default DropdownSelectItems;
diff --git a/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx b/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx
index b665b68..a316232 100644
--- a/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx
+++ b/src/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger.tsx
@@ -1,36 +1,56 @@
-import { CaretDown } from "@phosphor-icons/react";
-import clsx from "clsx";
-import { forwardRef } from "react";
+import { CaretDown } from '@phosphor-icons/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 
-import Typography from "../../Typography";
-import DropdownBase from "../DropdownBase";
-import { DropdownSelectTriggerProps } from "./types";
+import Typography from '../../Typography';
+import DropdownBase from '../DropdownBase';
+import { DropdownSelectTriggerProps } from './types';
 
-const DropdownSelectTrigger = forwardRef((
-    {
-      currentValue,
-      ...props
-    }: DropdownSelectTriggerProps,
+const DropdownSelectTrigger = forwardRef(
+  (
+    { currentValue, ...props }: DropdownSelectTriggerProps,
     ref: React.Ref<HTMLButtonElement>,
   ) => {
-  const { className, placeholder, ...rest } = props;
-  const showPlaceholder = placeholder && !currentValue;
+    const { className, placeholder, ...rest } = props;
+    const showPlaceholder = placeholder && !currentValue;
 
-  return (
-    <DropdownBase.Trigger ref = {ref} className = {clsx("flex items-center justify-between w-full h-[3.75rem] p-3 gap-x-2 border border-gray-03 rounded-xl overflow-hidden", className)} {...rest}>
-      {({ isToggle, disabled, readOnly }) => {
-        const isDisabled = readOnly || disabled;
-        const isVisibleContent = !readOnly && !disabled && isToggle;
+    return (
+      <DropdownBase.Trigger
+        ref={ref}
+        className={clsx(
+          'flex h-[3.75rem] w-full items-center justify-between gap-x-2 overflow-hidden rounded-xl border border-gray-03 p-3',
+          className,
+        )}
+        {...rest}
+      >
+        {({ isToggle, disabled, readOnly }) => {
+          const isDisabled = readOnly || disabled;
+          const isVisibleContent = !readOnly && !disabled && isToggle;
 
-        return (
-          <>
-            <Typography theme = "subhead-02-regular" className = {clsx(isDisabled && "mr-[1.75rem]")} color = {(!isDisabled && !showPlaceholder) ? "gray-08" : "gray-05"} text = {currentValue ? currentValue : (placeholder ?? "")}/>
-            {!isDisabled ? <CaretDown size = "24" className = {clsx("text-gray-06", isVisibleContent ? "rotate-180" : "rotate-0")} weight = "fill"/> : null}
-          </>
-        );
-      }}
-    </DropdownBase.Trigger>
-  );
-});
+          return (
+            <>
+              <Typography
+                theme='subhead-02-regular'
+                className={clsx(isDisabled && 'mr-[1.75rem]')}
+                color={!isDisabled && !showPlaceholder ? 'gray-08' : 'gray-05'}
+                text={currentValue ? currentValue : placeholder ?? ''}
+              />
+              {!isDisabled ? (
+                <CaretDown
+                  size='24'
+                  className={clsx(
+                    'text-gray-06',
+                    isVisibleContent ? 'rotate-180' : 'rotate-0',
+                  )}
+                  weight='fill'
+                />
+              ) : null}
+            </>
+          );
+        }}
+      </DropdownBase.Trigger>
+    );
+  },
+);
 
 export default DropdownSelectTrigger;
diff --git a/src/core/components/Dropdown/DropdownSelect/index.tsx b/src/core/components/Dropdown/DropdownSelect/index.tsx
index dad9ba1..78f513e 100644
--- a/src/core/components/Dropdown/DropdownSelect/index.tsx
+++ b/src/core/components/Dropdown/DropdownSelect/index.tsx
@@ -1,19 +1,17 @@
-import DropdownBase from "../DropdownBase";
-import { DropdownProps } from "../DropdownBase/types";
-import DropdownSelectItem from "./DropdownSelectItem";
-import DropdownSelectItems from "./DropdownSelectItems";
-import DropdownSelectTrigger from "./DropdownSelectTrigger";
-import { ReturnType } from "./types";
+import DropdownBase from '../DropdownBase';
+import { DropdownProps } from '../DropdownBase/types';
+import DropdownSelectItem from './DropdownSelectItem';
+import DropdownSelectItems from './DropdownSelectItems';
+import DropdownSelectTrigger from './DropdownSelectTrigger';
+import { ReturnType } from './types';
 
 const DropdownSelect = ({ ...props }: DropdownProps) => {
-  return (
-    <DropdownBase {...props}/>
-  );
+  return <DropdownBase {...props} />;
 };
 
 export default DropdownSelect as unknown as ReturnType;
 
-DropdownSelect.displayName = "DropdownSelect";
+DropdownSelect.displayName = 'DropdownSelect';
 DropdownSelect.Trigger = DropdownSelectTrigger;
 DropdownSelect.Items = DropdownSelectItems;
 DropdownSelect.Item = DropdownSelectItem;
diff --git a/src/core/components/Dropdown/DropdownSelect/types/index.ts b/src/core/components/Dropdown/DropdownSelect/types/index.ts
index 17cc9f9..131828b 100644
--- a/src/core/components/Dropdown/DropdownSelect/types/index.ts
+++ b/src/core/components/Dropdown/DropdownSelect/types/index.ts
@@ -1,15 +1,20 @@
-import { TypographyProps } from "@/core/components/Typography/types";
-import { DropdownItemProps, DropdownProps, DropdownTriggerProps } from "../../DropdownBase/types";
-import DropdownSelectItem from "../DropdownSelectItem";
-import DropdownSelectItems from "../DropdownSelectItems";
-import DropdownSelectTrigger from "../DropdownSelectTrigger";
+import { TypographyProps } from '@/core/components/Typography/types';
+import {
+  DropdownItemProps,
+  DropdownProps,
+  DropdownTriggerProps,
+} from '../../DropdownBase/types';
+import DropdownSelectItem from '../DropdownSelectItem';
+import DropdownSelectItems from '../DropdownSelectItems';
+import DropdownSelectTrigger from '../DropdownSelectTrigger';
 
-export interface DropdownSelectTriggerProps extends Omit<DropdownTriggerProps, "children"> {
-  currentValue: TypographyProps["text"]
+export interface DropdownSelectTriggerProps
+  extends Omit<DropdownTriggerProps, 'children'> {
+  currentValue: TypographyProps['text'];
 }
 
 export interface DropdownSelectItemProps extends DropdownItemProps {
-  checked: boolean
+  checked: boolean;
 }
 
 type DropdownSelect = (props: DropdownProps) => React.ReactElement;
diff --git a/src/core/components/FormLabel/FormLabel.stories.tsx b/src/core/components/FormLabel/FormLabel.stories.tsx
index cfa79fa..a62568d 100644
--- a/src/core/components/FormLabel/FormLabel.stories.tsx
+++ b/src/core/components/FormLabel/FormLabel.stories.tsx
@@ -1,30 +1,30 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import { ColorOptions } from "@/constants/color";
-import { default as FormLabel } from "./index";
-import { FormLabelProps } from "./types";
+import { ColorOptions } from '@/constants/color';
+import { default as FormLabel } from './index';
+import { FormLabelProps } from './types';
 
 const meta = {
-  title: "core/FormLabel",
+  title: 'core/FormLabel',
   component: FormLabel,
   argTypes: {
     label: {
-      control: "text",
-      description: "FormLabel test",
+      control: 'text',
+      description: 'FormLabel test',
     },
     required: {
-      control: "boolean",
-      description: "Form Required",
+      control: 'boolean',
+      description: 'Form Required',
     },
     labelColor: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      defaultValue: "gray-04",
-      description: "Bbodek DesignSystem Colors",
+      defaultValue: 'gray-04',
+      description: 'Bbodek DesignSystem Colors',
     },
     labelSubText: {
-      control: "text",
-      description: "Form Feedback",
+      control: 'text',
+      description: 'Form Feedback',
     },
   },
 } satisfies Meta<typeof FormLabel>;
@@ -34,10 +34,12 @@ export default meta;
 export const Default = (props: FormLabelProps) => {
   return (
     <FormLabel
-      label = {props.label ?? "품목 선택"}
-      required = {props.required ?? true}
-      labelColor = {props.labelColor}
-      labelSubText = {props.labelSubText ?? "반별로 품목과 수량을 각각 선택해주세요."}
+      label={props.label ?? '품목 선택'}
+      required={props.required ?? true}
+      labelColor={props.labelColor}
+      labelSubText={
+        props.labelSubText ?? '반별로 품목과 수량을 각각 선택해주세요.'
+      }
     />
   );
 };
diff --git a/src/core/components/FormLabel/index.tsx b/src/core/components/FormLabel/index.tsx
index 2877734..413231d 100644
--- a/src/core/components/FormLabel/index.tsx
+++ b/src/core/components/FormLabel/index.tsx
@@ -1,28 +1,37 @@
-import { forwardRef } from "react";
+import { forwardRef } from 'react';
 
-import { THEME_COLOR } from "@/constants/color";
-import { THEME_TYPOGRAPHY } from "@/constants/typography";
-import { ThemeColors, ThemeTypography } from "@/types";
-import Typography from "../Typography";
-import { FormLabelProps } from "./types";
+import { THEME_COLOR } from '@/constants/color';
+import { THEME_TYPOGRAPHY } from '@/constants/typography';
+import { ThemeColors, ThemeTypography } from '@/types';
+import Typography from '../Typography';
+import { FormLabelProps } from './types';
 
-const FormLabel = forwardRef((
+const FormLabel = forwardRef(
+  (
     {
-      labelTheme = THEME_TYPOGRAPHY["BODY_02_MEDIUM"] as ThemeTypography,
-      labelColor = THEME_COLOR["GRAY_06"] as ThemeColors,
+      labelTheme = THEME_TYPOGRAPHY['BODY_02_MEDIUM'] as ThemeTypography,
+      labelColor = THEME_COLOR['GRAY_06'] as ThemeColors,
       label,
       required,
       labelSubText,
     }: FormLabelProps,
     ref: React.Ref<HTMLDivElement>,
   ) => {
-  return (
-    <div ref = {ref} className = {`flex text-${labelColor} text-${labelTheme}`}>
-      {label}
-      {required && <span className = "ml-0.5 text-primary-03">*</span>}
-      {labelSubText && <Typography className = "ml-3" theme = "body-02-regular" text = {labelSubText} color = "error"/>}
-    </div>
-  );
-});
+    return (
+      <div ref={ref} className={`flex text-${labelColor} text-${labelTheme}`}>
+        {label}
+        {required && <span className='ml-0.5 text-primary-03'>*</span>}
+        {labelSubText && (
+          <Typography
+            className='ml-3'
+            theme='body-02-regular'
+            text={labelSubText}
+            color='error'
+          />
+        )}
+      </div>
+    );
+  },
+);
 
 export default FormLabel;
diff --git a/src/core/components/FormLabel/types/index.ts b/src/core/components/FormLabel/types/index.ts
index 1771936..7027d9e 100644
--- a/src/core/components/FormLabel/types/index.ts
+++ b/src/core/components/FormLabel/types/index.ts
@@ -1,10 +1,10 @@
-import { ThemeColors, ThemeTypography } from "@/types";
-import { InputHTMLAttributes } from "react";
+import { ThemeColors, ThemeTypography } from '@/types';
+import { InputHTMLAttributes } from 'react';
 
 export interface FormLabelProps {
   labelTheme?: ThemeTypography;
   labelColor?: ThemeColors;
   label: string;
-  required?: InputHTMLAttributes<HTMLInputElement>["required"];
+  required?: InputHTMLAttributes<HTMLInputElement>['required'];
   labelSubText?: string;
 }
diff --git a/src/core/components/Input/InputBase/InputBase.stories.tsx b/src/core/components/Input/InputBase/InputBase.stories.tsx
index b36b1fd..5509d17 100644
--- a/src/core/components/Input/InputBase/InputBase.stories.tsx
+++ b/src/core/components/Input/InputBase/InputBase.stories.tsx
@@ -1,91 +1,94 @@
-import { Meta } from "@storybook/react";
-import { useId, useState } from "react";
+import { Meta } from '@storybook/react';
+import { useId, useState } from 'react';
 
-import { ColorOptions } from "@/constants/color";
-import InputBase from "./index";
-import { InputBaseProps } from "./types";
+import { ColorOptions } from '@/constants/color';
+import InputBase from './index';
+import { InputBaseProps } from './types';
 
 const meta = {
-  title: "core/Input/InputBase",
+  title: 'core/Input/InputBase',
   component: InputBase,
   argTypes: {
     inputId: {
-      control: "text",
-      description: "Input & Label Id",
+      control: 'text',
+      description: 'Input & Label Id',
     },
     element: {
-      control: "text",
-      defaultValue: "div",
-      description: "HTML Tag",
+      control: 'text',
+      defaultValue: 'div',
+      description: 'HTML Tag',
     },
     rootClassName: {
-      control: "text",
-      description: "InputBase Root Element ClassName",
+      control: 'text',
+      description: 'InputBase Root Element ClassName',
     },
     inputRootClassName: {
-      control: "text",
-      description: "InputBase Input Root Element ClassName",
+      control: 'text',
+      description: 'InputBase Input Root Element ClassName',
     },
     label: {
-      control: "text",
-      description: "Input Label",
+      control: 'text',
+      description: 'Input Label',
     },
     startComponent: {
-      control: "text",
-      description: "Input start Component",
+      control: 'text',
+      description: 'Input start Component',
     },
     inputComponent: {
-      control: "text",
-      description: "Input Component",
+      control: 'text',
+      description: 'Input Component',
     },
     endComponent: {
-      control: "text",
-      description: "Input end Component",
+      control: 'text',
+      description: 'Input end Component',
     },
     required: {
-      control: "boolean",
-      description: "Input Required",
+      control: 'boolean',
+      description: 'Input Required',
     },
     labelColor: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      defaultValue: "gray-04",
-      description: "Bbodek DesignSystem Colors",
+      defaultValue: 'gray-04',
+      description: 'Bbodek DesignSystem Colors',
     },
     borderColor: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      defaultValue: "gray-03",
-      description: "Bbodek DesignSystem Colors",
+      defaultValue: 'gray-03',
+      description: 'Bbodek DesignSystem Colors',
     },
   },
 } satisfies Meta<typeof InputBase>;
 
 export default meta;
 
-export const Default = (props: InputBaseProps<"div">) => {
+export const Default = (props: InputBaseProps<'div'>) => {
   const { label, inputId, element, inputComponent, ...rest } = props;
   const id = useId();
-  const [ currentValue, setCurrentValue ] = useState("");
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => setCurrentValue(e.target.value);
+  const [currentValue, setCurrentValue] = useState('');
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setCurrentValue(e.target.value);
 
   return (
-    <div className = "w-[400px]">
+    <div className='w-[400px]'>
       <InputBase
-        element = {element}
-        label = {label}
-        inputId = {inputId ?? id}
-        inputComponent = {
-          !inputComponent ?
+        element={element}
+        label={label}
+        inputId={inputId ?? id}
+        inputComponent={
+          !inputComponent ? (
             <input
-            id = {id}
-            className = {"bbodek-field"}
-            type = "text"
-            onChange = {onChangeHandler}
-            value = {currentValue}
-            required
-          /> :
-          inputComponent
+              id={id}
+              className={'bbodek-field'}
+              type='text'
+              onChange={onChangeHandler}
+              value={currentValue}
+              required
+            />
+          ) : (
+            inputComponent
+          )
         }
         {...rest}
       />
diff --git a/src/core/components/Input/InputBase/index.tsx b/src/core/components/Input/InputBase/index.tsx
index a9bda83..990edf5 100644
--- a/src/core/components/Input/InputBase/index.tsx
+++ b/src/core/components/Input/InputBase/index.tsx
@@ -1,10 +1,10 @@
-import clsx from "clsx";
-import React, { forwardRef } from "react";
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
 
-import { cn } from "@/utilities/utils";
-import FormLabel from "../../FormLabel";
-import Typography from "../../Typography";
-import { InputBaseProps } from "./types";
+import { cn } from '@/utilities/utils';
+import FormLabel from '../../FormLabel';
+import Typography from '../../Typography';
+import { InputBaseProps } from './types';
 
 const InputBase = forwardRef(
   <T extends React.ElementType>(
@@ -19,45 +19,60 @@ const InputBase = forwardRef(
       endComponent,
       labelColor,
       feedback,
-      borderColor = "gray-03",
-      feedbackColor = "error",
+      borderColor = 'gray-03',
+      feedbackColor = 'error',
       error = false,
       disabled = false,
       readOnly = false,
       required = false,
       ...props
     }: InputBaseProps<T>,
-    ref: React.ComponentPropsWithRef<T>["ref"],
+    ref: React.ComponentPropsWithRef<T>['ref'],
   ) => {
-  const Component: React.ElementType = Element || "div";
-  const isDisabled = readOnly || disabled;
-  const isVisibleEndComponent = !isDisabled && endComponent;
+    const Component: React.ElementType = Element || 'div';
+    const isDisabled = readOnly || disabled;
+    const isVisibleEndComponent = !isDisabled && endComponent;
 
-  return (
-    <Component ref = {ref} className = {clsx(label && "flex-v-stack", rootClassName)} {...props}>
-      {label &&
-        <label className = "mb-2" htmlFor = {inputId}>
-          <FormLabel label = {label} labelColor = {labelColor} required = {required} />
-        </label>
-      }
-      <div
-        className = {cn(
-          `flex items-center px-3 py-4 text-subhead-02-regular bg-white rounded-xl overflow-hidden border border-${borderColor}`,
-          feedback && "mb-1",
-          inputRootClassName,
-          isDisabled && "bg-gray-09",
-          error && "border-error",
-        )}
+    return (
+      <Component
+        ref={ref}
+        className={clsx(label && 'flex-v-stack', rootClassName)}
+        {...props}
       >
-        {startComponent && startComponent}
-        {inputComponent && inputComponent}
-        {isVisibleEndComponent && endComponent}
-      </div>
-      {feedback ? <Typography theme = "body-03-regular" color = {feedbackColor} text = {feedback} /> : null}
-    </Component>
-  );
-});
+        {label && (
+          <label className='mb-2' htmlFor={inputId}>
+            <FormLabel
+              label={label}
+              labelColor={labelColor}
+              required={required}
+            />
+          </label>
+        )}
+        <div
+          className={cn(
+            `flex items-center overflow-hidden rounded-xl border bg-white px-3 py-4 text-subhead-02-regular border-${borderColor}`,
+            feedback && 'mb-1',
+            inputRootClassName,
+            isDisabled && 'bg-gray-09',
+            error && 'border-error',
+          )}
+        >
+          {startComponent && startComponent}
+          {inputComponent && inputComponent}
+          {isVisibleEndComponent && endComponent}
+        </div>
+        {feedback ? (
+          <Typography
+            theme='body-03-regular'
+            color={feedbackColor}
+            text={feedback}
+          />
+        ) : null}
+      </Component>
+    );
+  },
+);
 
-InputBase.displayName = "InputBase";
+InputBase.displayName = 'InputBase';
 
 export default InputBase;
diff --git a/src/core/components/Input/InputBase/types/index.ts b/src/core/components/Input/InputBase/types/index.ts
index ce7c07e..52b3479 100644
--- a/src/core/components/Input/InputBase/types/index.ts
+++ b/src/core/components/Input/InputBase/types/index.ts
@@ -1,11 +1,13 @@
-import { LabelHTMLAttributes } from "react";
+import { LabelHTMLAttributes } from 'react';
 
-import { FormLabelProps } from "@/core/components/FormLabel/types";
-import { ThemeColors } from "@/types";
+import { FormLabelProps } from '@/core/components/FormLabel/types';
+import { ThemeColors } from '@/types';
 
-export interface InputBaseProps<T extends React.ElementType> extends React.HTMLAttributes<HTMLElement>, Omit<FormLabelProps, "label"> {
-  label?: FormLabelProps["label"];
-  inputId: LabelHTMLAttributes<HTMLLabelElement>["htmlFor"]
+export interface InputBaseProps<T extends React.ElementType>
+  extends React.HTMLAttributes<HTMLElement>,
+    Omit<FormLabelProps, 'label'> {
+  label?: FormLabelProps['label'];
+  inputId: LabelHTMLAttributes<HTMLLabelElement>['htmlFor'];
   element?: T;
   rootClassName?: string;
   inputRootClassName?: string;
@@ -13,7 +15,7 @@ export interface InputBaseProps<T extends React.ElementType> extends React.HTMLA
   inputComponent: React.ReactNode;
   endComponent?: React.ReactNode;
   borderColor?: ThemeColors;
-  error?: boolean
+  error?: boolean;
   readOnly?: boolean;
   disabled?: boolean;
   feedback?: React.ReactNode;
diff --git a/src/core/components/Input/InputDatePicker/DatePicker.tsx b/src/core/components/Input/InputDatePicker/DatePicker.tsx
index 24064e8..2be8ccf 100644
--- a/src/core/components/Input/InputDatePicker/DatePicker.tsx
+++ b/src/core/components/Input/InputDatePicker/DatePicker.tsx
@@ -1,18 +1,18 @@
-import { CalendarBlank } from "@phosphor-icons/react";
-import clsx from "clsx";
-import { useEffect, useId, useState } from "react";
+import { CalendarBlank } from '@phosphor-icons/react';
+import clsx from 'clsx';
+import { useEffect, useId, useState } from 'react';
 
-import Button from "../../Button/Button";
-import DatePickerCalendar from "../../Calendar/DatePickerCalendar";
-import { DATE_PICKER_TYPE } from "../../Calendar/DatePickerCalendar/constants";
-import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
-import ModalPopUp from "../../Modal/ModalPopUp";
-import GeneralTab from "../../Tab/GeneralTab/GeneralTab";
-import Typography from "../../Typography";
-import { DatePickerProps } from "./types";
+import Button from '../../Button/Button';
+import DatePickerCalendar from '../../Calendar/DatePickerCalendar';
+import { DATE_PICKER_TYPE } from '../../Calendar/DatePickerCalendar/constants';
+import { PeriodDates } from '../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps';
+import ModalPopUp from '../../Modal/ModalPopUp';
+import GeneralTab from '../../Tab/GeneralTab/GeneralTab';
+import Typography from '../../Typography';
+import { DatePickerProps } from './types';
 
 const DatePicker = ({
-  variants = DATE_PICKER_TYPE["PERIOD"],
+  variants = DATE_PICKER_TYPE['PERIOD'],
   cutoffDate,
   cutoffAfterDate,
   isOpen,
@@ -24,20 +24,20 @@ const DatePicker = ({
   externalDates,
   useTab = false,
   useHoliday = false,
-  closeButtonText = "닫기",
+  closeButtonText = '닫기',
   dateLabel,
   hasDatePickerTitle = true,
 }: DatePickerProps) => {
   const id = useId();
-  const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
-    startDate: "",
-    endDate: "",
+  const [periodDates, setPeriodDates] = useState<PeriodDates>({
+    startDate: '',
+    endDate: '',
   });
-  const [ tabSelected, setTabSelected ] = useState("selectedDate");
-  const [ isAfterAllDate, setIsAfterAllDate ] = useState(false);
+  const [tabSelected, setTabSelected] = useState('selectedDate');
+  const [isAfterAllDate, setIsAfterAllDate] = useState(false);
   const tabData = [
-    { key: "selectedDate", label: "선택한 기간만 적용" },
-    { key: "afterAllDate", label: "선택일부터 모든 날짜 적용" },
+    { key: 'selectedDate', label: '선택한 기간만 적용' },
+    { key: 'afterAllDate', label: '선택일부터 모든 날짜 적용' },
   ];
 
   const handleClose = () => {
@@ -48,65 +48,89 @@ const DatePicker = ({
     externalDates && setPeriodDates(externalDates);
   }, [externalDates]);
 
-  const tabItems = tabData.map(item => (
+  const tabItems = tabData.map((item) => (
     <GeneralTab.Item
-      key = {item.key}
-      label = {item.label}
-      name = {id}
-      theme = 'body-01-bold'
-      checked = {item.key === tabSelected}
-      value = {item.key}
-      onChange = {(e: React.ChangeEvent<HTMLInputElement>) => {
+      key={item.key}
+      label={item.label}
+      name={id}
+      theme='body-01-bold'
+      checked={item.key === tabSelected}
+      value={item.key}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
         setTabSelected(e.target.value);
       }}
     />
   ));
 
   const onDateClick = (periodDates: PeriodDates, afterAllDate?: boolean) => {
-    setPeriodDates(!isFixStartDate ? periodDates! : { startDate: externalDates!["startDate"], endDate: periodDates["endDate"] });
+    setPeriodDates(
+      !isFixStartDate
+        ? periodDates!
+        : {
+            startDate: externalDates!['startDate'],
+            endDate: periodDates['endDate'],
+          },
+    );
     setIsAfterAllDate(afterAllDate !== undefined && afterAllDate);
   };
 
   return (
-    <ModalPopUp isOpen = {isOpen}>
-      <div className = {clsx("min-w-[20rem] w-[calc(100vw-1rem)] max-w-[26rem] rounded-xl bg-white", { "max-w-[35rem]": useTab })}>
-        <header className = "p-4">
-          {hasDatePickerTitle &&
-            <div className = "flex gap-2 items-center">
-              <CalendarBlank className = "text-subhead-02-medium md:text-subhead-01-medium" />
-              <Typography element = 'h6' text = '날짜 선택' theme = "body-01-medium" className = "md:text-subhead-02-medium" />
+    <ModalPopUp isOpen={isOpen}>
+      <div
+        className={clsx(
+          'w-[calc(100vw-1rem)] min-w-[20rem] max-w-[26rem] rounded-xl bg-white',
+          { 'max-w-[35rem]': useTab },
+        )}
+      >
+        <header className='p-4'>
+          {hasDatePickerTitle && (
+            <div className='flex items-center gap-2'>
+              <CalendarBlank className='text-subhead-02-medium md:text-subhead-01-medium' />
+              <Typography
+                element='h6'
+                text='날짜 선택'
+                theme='body-01-medium'
+                className='md:text-subhead-02-medium'
+              />
             </div>
-          }
-          {useTab &&
+          )}
+          {useTab && (
             <GeneralTab
-              items = {tabItems}
-              className = "[&_span]:text-body-02-bold md:[&_span]:text-body-01-bold md:[&_span]:p-2 [&_span]:p-1.5 !p-1.5 md:p-2 !rounded-xl [&_li]:rounded-lg mt-3 md:mt-4"
+              items={tabItems}
+              className='mt-3 !rounded-xl !p-1.5 md:mt-4 md:p-2 [&_li]:rounded-lg [&_span]:p-1.5 [&_span]:text-body-02-bold md:[&_span]:p-2 md:[&_span]:text-body-01-bold'
             />
-          }
+          )}
         </header>
-        <div className = {clsx("px-4 pb-2 md:pt-3 overflow-y-auto", useTab ? "pt-1 max-h-[calc(100vh-13rem)]" : "max-h-[calc(100vh-10rem)]")}>
+        <div
+          className={clsx(
+            'overflow-y-auto px-4 pb-2 md:pt-3',
+            useTab
+              ? 'max-h-[calc(100vh-13rem)] pt-1'
+              : 'max-h-[calc(100vh-10rem)]',
+          )}
+        >
           <DatePickerCalendar
-            isFixStartDate = {isFixStartDate}
-            variants = {variants}
-            cutoffDate = {cutoffDate}
-            cutoffAfterDate = {cutoffAfterDate}
-            periodDates = {periodDates}
-            disabledDates = {disabledDates}
-            initialDate = {initialDate}
-            onDateClick = {onDateClick}
-            disabled = {disabled}
-            useHoliday = {useHoliday}
-            afterAllDate = {tabSelected === "afterAllDate"}
-            label = {dateLabel}
+            isFixStartDate={isFixStartDate}
+            variants={variants}
+            cutoffDate={cutoffDate}
+            cutoffAfterDate={cutoffAfterDate}
+            periodDates={periodDates}
+            disabledDates={disabledDates}
+            initialDate={initialDate}
+            onDateClick={onDateClick}
+            disabled={disabled}
+            useHoliday={useHoliday}
+            afterAllDate={tabSelected === 'afterAllDate'}
+            label={dateLabel}
           />
         </div>
-        <div className = 'p-3 md:p-4 border-t'>
+        <div className='border-t p-3 md:p-4'>
           <Button
-            content = {closeButtonText}
-            size = 'h-52'
-            colorTheme = "white"
-            className = 'w-full'
-            onClick = {handleClose}
+            content={closeButtonText}
+            size='h-52'
+            colorTheme='white'
+            className='w-full'
+            onClick={handleClose}
           />
         </div>
       </div>
diff --git a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
index df62d1f..06c748c 100644
--- a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
+++ b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
@@ -1,16 +1,16 @@
-import { Meta } from "@storybook/react";
-import { OverlayProvider, useOverlay } from "@toss/use-overlay";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { OverlayProvider, useOverlay } from '@toss/use-overlay';
+import { useState } from 'react';
 
-import Button from "../../Button/Button";
-import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
-import ModalPopUp from "../../Modal/ModalPopUp";
-import InputDatePicker from "./index";
+import Button from '../../Button/Button';
+import { PeriodDates } from '../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps';
+import ModalPopUp from '../../Modal/ModalPopUp';
+import InputDatePicker from './index';
 
 const meta = {
-  title: "core/Input/InputDatePicker",
+  title: 'core/Input/InputDatePicker',
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
   component: InputDatePicker,
 } satisfies Meta<typeof InputDatePicker>;
@@ -19,26 +19,46 @@ export default meta;
 
 const DefaultLayout = () => {
   const overlay = useOverlay();
-  const [ myDates, setMyDates ] = useState({
-    startDate: "",
-    endDate: "",
+  const [myDates, setMyDates] = useState({
+    startDate: '',
+    endDate: '',
   });
-  const getDate = (periodDates: PeriodDates, isAfterAllDate?: boolean) => console.log(periodDates, isAfterAllDate);
+  const getDate = (periodDates: PeriodDates, isAfterAllDate?: boolean) =>
+    console.log(periodDates, isAfterAllDate);
 
-  const onDatesClick = () => setMyDates({ startDate: "22222", endDate: "1111" });
+  const onDatesClick = () =>
+    setMyDates({ startDate: '22222', endDate: '1111' });
 
   return (
     <form
-      className = "flex gap-2 p-4"
-      onSubmit = {(e: React.FormEvent<HTMLFormElement>) => {
+      className='flex gap-2 p-4'
+      onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        alert("전송");
+        alert('전송');
       }}
     >
-      <div className = "w-[500px]">
-        <button type = "button" onClick = {onDatesClick}>전체 날짜 변경</button>
-        <InputDatePicker variants = "period" overlay = {overlay} getPeriodDates = {getDate} externalDates = {myDates} label = "날짜 선택" initialDate = "2024-02-05" required dateLabel = {["복구일"]}/>
-        <Button type = "submit" backgroundColor = "primary-03" color = "white" size = "h-48" className = "px-7 mt-4" content = "전송"/>
+      <div className='w-[500px]'>
+        <button type='button' onClick={onDatesClick}>
+          전체 날짜 변경
+        </button>
+        <InputDatePicker
+          variants='period'
+          overlay={overlay}
+          getPeriodDates={getDate}
+          externalDates={myDates}
+          label='날짜 선택'
+          initialDate='2024-02-05'
+          required
+          dateLabel={['복구일']}
+        />
+        <Button
+          type='submit'
+          backgroundColor='primary-03'
+          color='white'
+          size='h-48'
+          className='mt-4 px-7'
+          content='전송'
+        />
       </div>
     </form>
   );
@@ -47,7 +67,7 @@ const DefaultLayout = () => {
 export const Default = () => {
   return (
     <OverlayProvider>
-      <div id = "modal"/>
+      <div id='modal' />
       <DefaultLayout />
     </OverlayProvider>
   );
@@ -61,22 +81,24 @@ const InputDatePickerInModalPopUpLayout = () => {
   const onOverlay = () => {
     overlay.open(({ isOpen }) => {
       return (
-        <ModalPopUp isOpen = {isOpen}>
-          <InputDatePicker overlay = {inputDatePickerOverlay} useTab = {false} getPeriodDates = {getDate} />
+        <ModalPopUp isOpen={isOpen}>
+          <InputDatePicker
+            overlay={inputDatePickerOverlay}
+            useTab={false}
+            getPeriodDates={getDate}
+          />
         </ModalPopUp>
       );
     });
   };
 
-  return (
-    <button onClick = {onOverlay}>클릭</button>
-  );
+  return <button onClick={onOverlay}>클릭</button>;
 };
 
 export const InputDatePickerInModalPopUp = () => {
   return (
     <OverlayProvider>
-      <div id = "modal"/>
+      <div id='modal' />
       <InputDatePickerInModalPopUpLayout />
     </OverlayProvider>
   );
diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
index 077d0c9..514c1cb 100644
--- a/src/core/components/Input/InputDatePicker/index.tsx
+++ b/src/core/components/Input/InputDatePicker/index.tsx
@@ -1,16 +1,16 @@
-import { CalendarBlank } from "@phosphor-icons/react";
-import clsx from "clsx";
-import dayjs from "dayjs";
-import { HTMLAttributes, useEffect, useId, useState } from "react";
+import { CalendarBlank } from '@phosphor-icons/react';
+import clsx from 'clsx';
+import dayjs from 'dayjs';
+import { HTMLAttributes, useEffect, useId, useState } from 'react';
 
-import { DATE_PICKER_TYPE } from "../../Calendar/DatePickerCalendar/constants";
-import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
-import InputBase from "../InputBase";
-import DatePicker from "./DatePicker";
-import { InputDatePickerProps } from "./types";
+import { DATE_PICKER_TYPE } from '../../Calendar/DatePickerCalendar/constants';
+import { PeriodDates } from '../../Calendar/DatePickerCalendar/types/DatePickerCalendarProps';
+import InputBase from '../InputBase';
+import DatePicker from './DatePicker';
+import { InputDatePickerProps } from './types';
 
 const InputDatePicker = ({
-  variants = DATE_PICKER_TYPE["PERIOD"],
+  variants = DATE_PICKER_TYPE['PERIOD'],
   cutoffDate,
   cutoffAfterDate,
   overlay,
@@ -34,39 +34,40 @@ const InputDatePicker = ({
   feedback,
   feedbackColor,
   hasDatePickerTitle,
-}: InputDatePickerProps & Omit<HTMLAttributes<HTMLInputElement>, "disabled" | "readOnly">) => {
+}: InputDatePickerProps &
+  Omit<HTMLAttributes<HTMLInputElement>, 'disabled' | 'readOnly'>) => {
   const id = useId();
-  const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
-    startDate: "",
-    endDate: "",
+  const [periodDates, setPeriodDates] = useState<PeriodDates>({
+    startDate: '',
+    endDate: '',
   });
-  const startDate = dayjs(periodDates.startDate).format("YYYY. MM. DD");
-  const endDate = dayjs(periodDates.endDate).format("YYYY. MM. DD");
+  const startDate = dayjs(periodDates.startDate).format('YYYY. MM. DD');
+  const endDate = dayjs(periodDates.endDate).format('YYYY. MM. DD');
   const isDisabled = readOnly || disabled;
 
   const onDatePickerClick = (): Promise<PeriodDates> => {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       overlay.open(({ isOpen, close }) => (
         <DatePicker
-          hasDatePickerTitle = {hasDatePickerTitle}
-          isFixStartDate = {isFixStartDate}
-          variants = {variants}
-          disabled = {isDisabled}
-          isOpen = {isOpen}
-          close = {(periodDates: PeriodDates, isAfterAllDate?: boolean) => {
+          hasDatePickerTitle={hasDatePickerTitle}
+          isFixStartDate={isFixStartDate}
+          variants={variants}
+          disabled={isDisabled}
+          isOpen={isOpen}
+          close={(periodDates: PeriodDates, isAfterAllDate?: boolean) => {
             resolve(periodDates);
             getPeriodDates(periodDates, isAfterAllDate);
             close();
           }}
-          dateLabel = {dateLabel}
-          initialDate = {initialDate}
-          cutoffDate = {cutoffDate}
-          cutoffAfterDate = {cutoffAfterDate}
-          externalDates = {periodDates}
-          useTab = {useTab}
-          useHoliday = {useHoliday}
-          disabledDates = {disabledDates}
-          closeButtonText = {closeButtonText}
+          dateLabel={dateLabel}
+          initialDate={initialDate}
+          cutoffDate={cutoffDate}
+          cutoffAfterDate={cutoffAfterDate}
+          externalDates={periodDates}
+          useTab={useTab}
+          useHoliday={useHoliday}
+          disabledDates={disabledDates}
+          closeButtonText={closeButtonText}
         />
       ));
     });
@@ -80,7 +81,9 @@ const InputDatePicker = ({
   };
 
   const handleOnInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
-    e.target.value ? e.target.setCustomValidity("") : e.target.setCustomValidity("날짜를 선택해주세요");
+    e.target.value
+      ? e.target.setCustomValidity('')
+      : e.target.setCustomValidity('날짜를 선택해주세요');
   };
 
   useEffect(() => {
@@ -89,37 +92,44 @@ const InputDatePicker = ({
 
   return (
     <InputBase
-      inputId = {id}
-      inputRootClassName = {clsx("h-[3.75rem] cursor-pointer relative", {
-        "cursor-not-allowed": isDisabled,
-      }, className)}
-      onClick = {handleDatePicker}
-      label = {label}
-      required = {required}
-      feedback = {feedback}
-      feedbackColor = {feedbackColor}
-      disabled = {disabled}
-      readOnly = {readOnly}
-      inputComponent = {
+      inputId={id}
+      inputRootClassName={clsx(
+        'relative h-[3.75rem] cursor-pointer',
+        {
+          'cursor-not-allowed': isDisabled,
+        },
+        className,
+      )}
+      onClick={handleDatePicker}
+      label={label}
+      required={required}
+      feedback={feedback}
+      feedbackColor={feedbackColor}
+      disabled={disabled}
+      readOnly={readOnly}
+      inputComponent={
         <input
-          type = "text"
-          placeholder = {placeholder || "날짜를 입력해주세요"}
-          className = {clsx("bbodek-field pointer-events-none", inputClassName)}
-          value = {periodDates.startDate && (!afterAllDate ? `${startDate}${periodDates.endDate && ` - ${endDate}`}` : `${startDate} ~`)}
-          onKeyDown = {() => false}
-          onFocus = {(e: React.FocusEvent<HTMLInputElement>) => e.target.blur()}
-          onChange = {() => {}}
-          onInvalid = {handleOnInvalid}
-          disabled = {disabled}
-          readOnly = {readOnly}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
-          required = {required}
+          type='text'
+          placeholder={placeholder || '날짜를 입력해주세요'}
+          className={clsx('bbodek-field pointer-events-none', inputClassName)}
+          value={
+            periodDates.startDate &&
+            (!afterAllDate
+              ? `${startDate}${periodDates.endDate && ` - ${endDate}`}`
+              : `${startDate} ~`)
+          }
+          onKeyDown={() => false}
+          onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.blur()}
+          onChange={() => {}}
+          onInvalid={handleOnInvalid}
+          disabled={disabled}
+          readOnly={readOnly}
+          aria-disabled={disabled}
+          aria-readonly={readOnly}
+          required={required}
         />
       }
-      endComponent = {
-        <CalendarBlank size = {24} className = "text-gray-05" />
-      }
+      endComponent={<CalendarBlank size={24} className='text-gray-05' />}
     />
   );
 };
diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts
index a124da8..33dd11b 100644
--- a/src/core/components/Input/InputDatePicker/types/index.ts
+++ b/src/core/components/Input/InputDatePicker/types/index.ts
@@ -1,15 +1,28 @@
-import { DatePickerCalendarProps, PeriodDates } from "@/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps";
-import { InputBaseProps } from "../../InputBase/types";
+import {
+  DatePickerCalendarProps,
+  PeriodDates,
+} from '@/core/components/Calendar/DatePickerCalendar/types/DatePickerCalendarProps';
+import { InputBaseProps } from '../../InputBase/types';
 
-export interface DatePickerProps extends Pick<DatePickerCalendarProps, "useHoliday" | "disabled" | "disabledDates" | "cutoffDate" | "cutoffAfterDate" | "initialDate" | "afterAllDate"> {
+export interface DatePickerProps
+  extends Pick<
+    DatePickerCalendarProps,
+    | 'useHoliday'
+    | 'disabled'
+    | 'disabledDates'
+    | 'cutoffDate'
+    | 'cutoffAfterDate'
+    | 'initialDate'
+    | 'afterAllDate'
+  > {
   isFixStartDate?: boolean;
-  variants?: DatePickerCalendarProps["variants"];
+  variants?: DatePickerCalendarProps['variants'];
   externalDates?: PeriodDates;
   closeButtonText?: string;
   isOpen: boolean;
-  close: DatePickerCalendarProps["onDateClick"];
+  close: DatePickerCalendarProps['onDateClick'];
   useTab?: boolean;
-  dateLabel?: DatePickerCalendarProps["label"];
+  dateLabel?: DatePickerCalendarProps['label'];
   hasDatePickerTitle?: boolean;
 }
 
@@ -24,15 +37,25 @@ export interface ExternalDates {
   endDate: string | null;
 }
 
-export interface InputDatePickerProps extends
-  Omit<DatePickerProps, "isOpen"| "close" | "periodDates" | "setPeriodDates" | "setIsAfterAllDate">,
-  Pick<InputBaseProps<"input">, "feedback" | "feedbackColor" | "disabled" | "readOnly" | "required"> {
-    inputClassName?: string;
-    label?: string;
-    getPeriodDates: DatePickerCalendarProps["onDateClick"];
-    overlay: {
-      open: (overlayElement: CreateOverlayElement) => void;
-      close: () => void;
-      exit: () => void;
-    }
-  }
+export interface InputDatePickerProps
+  extends Omit<
+      DatePickerProps,
+      | 'isOpen'
+      | 'close'
+      | 'periodDates'
+      | 'setPeriodDates'
+      | 'setIsAfterAllDate'
+    >,
+    Pick<
+      InputBaseProps<'input'>,
+      'feedback' | 'feedbackColor' | 'disabled' | 'readOnly' | 'required'
+    > {
+  inputClassName?: string;
+  label?: string;
+  getPeriodDates: DatePickerCalendarProps['onDateClick'];
+  overlay: {
+    open: (overlayElement: CreateOverlayElement) => void;
+    close: () => void;
+    exit: () => void;
+  };
+}
diff --git a/src/core/components/Input/InputPassword/InputPassword.stories.tsx b/src/core/components/Input/InputPassword/InputPassword.stories.tsx
index 22007ed..7f7135e 100644
--- a/src/core/components/Input/InputPassword/InputPassword.stories.tsx
+++ b/src/core/components/Input/InputPassword/InputPassword.stories.tsx
@@ -1,19 +1,19 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import InputPassword from "./index";
-import { InputPasswordProps } from "./types";
+import InputPassword from './index';
+import { InputPasswordProps } from './types';
 
 const meta = {
-  title: "core/Input/InputPassword",
+  title: 'core/Input/InputPassword',
   component: InputPassword,
   argTypes: {
     label: {
-      control: "text",
-      description: "InputPassword Label",
+      control: 'text',
+      description: 'InputPassword Label',
     },
     regCallback: {
-      description: "Input RegEx",
+      description: 'Input RegEx',
     },
   },
 } satisfies Meta<typeof InputPassword>;
@@ -21,14 +21,15 @@ const meta = {
 export default meta;
 
 export const Default = (props: InputPasswordProps) => {
-  const [ currentValue, setCurrentValue ] = useState("");
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => setCurrentValue(e.target.value);
+  const [currentValue, setCurrentValue] = useState('');
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setCurrentValue(e.target.value);
 
   return (
-    <div className = "w-[400px]">
+    <div className='w-[400px]'>
       <InputPassword
-        value = {currentValue}
-        onChange = {onChangeHandler}
+        value={currentValue}
+        onChange={onChangeHandler}
         required
         {...props}
       />
diff --git a/src/core/components/Input/InputPassword/index.tsx b/src/core/components/Input/InputPassword/index.tsx
index 5e43955..b728c96 100644
--- a/src/core/components/Input/InputPassword/index.tsx
+++ b/src/core/components/Input/InputPassword/index.tsx
@@ -1,75 +1,96 @@
-import clsx from "clsx";
-import { forwardRef, useId, useState } from "react";
+import clsx from 'clsx';
+import { forwardRef, useId, useState } from 'react';
 
-import { useInput } from "@/core/components/Input/hooks/useInput";
-import { Eye, EyeSlash } from "@phosphor-icons/react";
-import InputBase from "../InputBase";
-import { InputPasswordProps } from "./types";
+import { useInput } from '@/core/components/Input/hooks/useInput';
+import { Eye, EyeSlash } from '@phosphor-icons/react';
+import InputBase from '../InputBase';
+import { InputPasswordProps } from './types';
 
-const InputPassword = forwardRef((
+const InputPassword = forwardRef(
+  (
     {
       labelColor,
-      label = "비밀번호",
+      label = '비밀번호',
       regCallback,
       feedback,
       ...props
     }: InputPasswordProps,
-    ref: React.ComponentPropsWithRef<"input">["ref"],
+    ref: React.ComponentPropsWithRef<'input'>['ref'],
   ) => {
-  const id = useId();
-  const [ showPassword, setShowPassword ] = useState(false);
-  const { readOnly = false, disabled = false, rootClassName, className, required = false, value, onChange, autoComplete = "off", error = false, name, ...rest } = props;
-  const { inputValue, onChangeHandler } = useInput({ value, regCallback, onChange, name });
-  const ShowPasswordIcon = <Eye size = {"100%"} weight = "fill" fill = "#C6CEDE"/>;
-  const HidePasswordIcon = <EyeSlash size = {"100%"} weight = "fill" fill = "#C6CEDE"/>;
+    const id = useId();
+    const [showPassword, setShowPassword] = useState(false);
+    const {
+      readOnly = false,
+      disabled = false,
+      rootClassName,
+      className,
+      required = false,
+      value,
+      onChange,
+      autoComplete = 'off',
+      error = false,
+      name,
+      ...rest
+    } = props;
+    const { inputValue, onChangeHandler } = useInput({
+      value,
+      regCallback,
+      onChange,
+      name,
+    });
+    const ShowPasswordIcon = <Eye size={'100%'} weight='fill' fill='#C6CEDE' />;
+    const HidePasswordIcon = (
+      <EyeSlash size={'100%'} weight='fill' fill='#C6CEDE' />
+    );
 
-  const onToggleShowPassword = () => setShowPassword(v => !v);
+    const onToggleShowPassword = () => setShowPassword((v) => !v);
 
-  return (
-    <InputBase
-      inputId = {id}
-      label = {label}
-      rootClassName = {rootClassName}
-      inputRootClassName = "h-[3.75rem]"
-      error = {error}
-      readOnly = {readOnly}
-      disabled = {disabled}
-      required = {required}
-      feedback = {feedback}
-      labelColor = {labelColor}
-      inputComponent = {
-        <input
-          ref = {ref}
-          id = {id}
-          className = {clsx("bbodek-field", className)}
-          type = {showPassword ? "text" : "password"}
-          required = {required}
-          value = {inputValue}
-          readOnly = {readOnly}
-          disabled = {disabled}
-          onChange = {onChangeHandler}
-          autoComplete = {autoComplete}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
-          placeholder = {"********"}
-          name = {name}
-          {...rest}
-        />
-      }
-      endComponent = {
-        <button
-          type = "button"
-          className = "w-6 h-6"
-          onClick = {onToggleShowPassword}
-          aria-label = {showPassword ? "비밀번호 숨기기" : "비밀번호 보이기"}
-        >
-          {showPassword ? HidePasswordIcon : ShowPasswordIcon}
-        </button>
-      }
-    />
-  );
-});
+    return (
+      <InputBase
+        inputId={id}
+        label={label}
+        rootClassName={rootClassName}
+        inputRootClassName='h-[3.75rem]'
+        error={error}
+        readOnly={readOnly}
+        disabled={disabled}
+        required={required}
+        feedback={feedback}
+        labelColor={labelColor}
+        inputComponent={
+          <input
+            ref={ref}
+            id={id}
+            className={clsx('bbodek-field', className)}
+            type={showPassword ? 'text' : 'password'}
+            required={required}
+            value={inputValue}
+            readOnly={readOnly}
+            disabled={disabled}
+            onChange={onChangeHandler}
+            autoComplete={autoComplete}
+            aria-disabled={disabled}
+            aria-readonly={readOnly}
+            placeholder={'********'}
+            name={name}
+            {...rest}
+          />
+        }
+        endComponent={
+          <button
+            type='button'
+            className='h-6 w-6'
+            onClick={onToggleShowPassword}
+            aria-label={showPassword ? '비밀번호 숨기기' : '비밀번호 보이기'}
+          >
+            {showPassword ? HidePasswordIcon : ShowPasswordIcon}
+          </button>
+        }
+      />
+    );
+  },
+);
 
-InputPassword.displayName = "InputPassword";
+InputPassword.displayName = 'InputPassword';
 
 export default InputPassword;
diff --git a/src/core/components/Input/InputPassword/types/index.ts b/src/core/components/Input/InputPassword/types/index.ts
index 724ea21..4743783 100644
--- a/src/core/components/Input/InputPassword/types/index.ts
+++ b/src/core/components/Input/InputPassword/types/index.ts
@@ -1,7 +1,19 @@
-import { InputBaseProps } from "../../InputBase/types";
-import { UseInputProps } from "../../hooks/useInput";
+import { InputBaseProps } from '../../InputBase/types';
+import { UseInputProps } from '../../hooks/useInput';
 
 export interface InputPasswordProps
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "readOnly" | "disabled">,
-            Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "error" | "labelColor" | "readOnly" | "disabled">,
-            Pick<UseInputProps, "regCallback"> {}
+  extends Omit<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      'readOnly' | 'disabled'
+    >,
+    Pick<
+      InputBaseProps<'div'>,
+      | 'feedback'
+      | 'rootClassName'
+      | 'label'
+      | 'error'
+      | 'labelColor'
+      | 'readOnly'
+      | 'disabled'
+    >,
+    Pick<UseInputProps, 'regCallback'> {}
diff --git a/src/core/components/Input/InputSearch/InputSearch.stories.tsx b/src/core/components/Input/InputSearch/InputSearch.stories.tsx
index 719e23c..21de523 100644
--- a/src/core/components/Input/InputSearch/InputSearch.stories.tsx
+++ b/src/core/components/Input/InputSearch/InputSearch.stories.tsx
@@ -1,25 +1,25 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import InputSearch from "./index";
+import InputSearch from './index';
 
 const meta = {
-  title: "core/Input/InputSearch",
+  title: 'core/Input/InputSearch',
   component: InputSearch,
   argTypes: {
     formSubmitHandler: {
-      description: "Form Submit Event",
+      description: 'Form Submit Event',
     },
     regCallback: {
-      description: "Input RegEx",
+      description: 'Input RegEx',
     },
     readOnly: {
-      control: "boolean",
-      description: "Input readOnly",
+      control: 'boolean',
+      description: 'Input readOnly',
     },
     disabled: {
-      control: "boolean",
-      description: "Input disabled",
+      control: 'boolean',
+      description: 'Input disabled',
     },
   },
 } satisfies Meta<typeof InputSearch>;
@@ -27,18 +27,19 @@ const meta = {
 export default meta;
 
 export const Default = () => {
-  const [ currentValue, setCurrentValue ] = useState("");
-  const onSubmitHandler = () => alert("onSubmit");
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => setCurrentValue(e.target.value);
+  const [currentValue, setCurrentValue] = useState('');
+  const onSubmitHandler = () => alert('onSubmit');
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setCurrentValue(e.target.value);
 
   return (
-    <div className = "w-[500px]">
+    <div className='w-[500px]'>
       <InputSearch
-        formSubmitHandler = {onSubmitHandler}
-        onChange = {onChangeHandler}
-        value = {currentValue}
-        rounded = "rounded-8"
-        placeholder = "검색하기"
+        formSubmitHandler={onSubmitHandler}
+        onChange={onChangeHandler}
+        value={currentValue}
+        rounded='rounded-8'
+        placeholder='검색하기'
       />
     </div>
   );
diff --git a/src/core/components/Input/InputSearch/constants/index.ts b/src/core/components/Input/InputSearch/constants/index.ts
index ef11384..6af9144 100644
--- a/src/core/components/Input/InputSearch/constants/index.ts
+++ b/src/core/components/Input/InputSearch/constants/index.ts
@@ -1,15 +1,15 @@
-import { RoundedType } from "../types";
+import { RoundedType } from '../types';
 
 export const ROUNDED = {
-  ROUNDED_FULL: "rounded-full",
-  ROUNDED_12: "rounded-12",
-  ROUNDED_8: "rounded-8",
-  ROUNDED_4: "rounded-4",
+  ROUNDED_FULL: 'rounded-full',
+  ROUNDED_12: 'rounded-12',
+  ROUNDED_8: 'rounded-8',
+  ROUNDED_4: 'rounded-4',
 } as const;
 
 export const INPUT_SEARCH_ROUNDED: Record<RoundedType, string> = {
-  [ROUNDED["ROUNDED_FULL"]]: "rounded-full",
-  [ROUNDED["ROUNDED_12"]]: "rounded-xl",
-  [ROUNDED["ROUNDED_8"]]: "rounded-lg",
-  [ROUNDED["ROUNDED_4"]]: "rounded",
+  [ROUNDED['ROUNDED_FULL']]: 'rounded-full',
+  [ROUNDED['ROUNDED_12']]: 'rounded-xl',
+  [ROUNDED['ROUNDED_8']]: 'rounded-lg',
+  [ROUNDED['ROUNDED_4']]: 'rounded',
 };
diff --git a/src/core/components/Input/InputSearch/index.tsx b/src/core/components/Input/InputSearch/index.tsx
index 6c22274..7475f37 100644
--- a/src/core/components/Input/InputSearch/index.tsx
+++ b/src/core/components/Input/InputSearch/index.tsx
@@ -1,52 +1,62 @@
-import { MagnifyingGlass } from "@phosphor-icons/react";
-import clsx from "clsx";
-import { useId, useRef } from "react";
+import { MagnifyingGlass } from '@phosphor-icons/react';
+import clsx from 'clsx';
+import { useId, useRef } from 'react';
 
-import { useInput } from "@/core/components/Input/hooks/useInput";
-import InputBase from "../InputBase";
-import { INPUT_SEARCH_ROUNDED } from "./constants";
-import { InputSearchProps } from "./types";
+import { useInput } from '@/core/components/Input/hooks/useInput';
+import InputBase from '../InputBase';
+import { INPUT_SEARCH_ROUNDED } from './constants';
+import { InputSearchProps } from './types';
 
-const InputSearch = <T extends React.ElementType = "form">(
-    {
-      formSubmitHandler,
-      regCallback,
-      feedback,
-      rounded,
-      rootElement,
-      ...props
-    }: InputSearchProps<T> & React.ComponentPropsWithoutRef<"input">,
-  ) => {
+const InputSearch = <T extends React.ElementType = 'form'>({
+  formSubmitHandler,
+  regCallback,
+  feedback,
+  rounded,
+  rootElement,
+  ...props
+}: InputSearchProps<T> & React.ComponentPropsWithoutRef<'input'>) => {
   const id = useId();
   const rootRef = useRef<T | null>(null);
-  const { readOnly = false, disabled = false, rootClassName, className, value, onChange, autoComplete = "off", error = false, name, ...rest } = props;
-  const { inputValue, onChangeHandler, onResetInputValue } = useInput({ value, regCallback, onChange, name });
-  const SearchIcon = <MagnifyingGlass size = "100%" className = "text-gray-05"/>;
+  const {
+    readOnly = false,
+    disabled = false,
+    rootClassName,
+    className,
+    value,
+    onChange,
+    autoComplete = 'off',
+    error = false,
+    name,
+    ...rest
+  } = props;
+  const { inputValue, onChangeHandler, onResetInputValue } = useInput({
+    value,
+    regCallback,
+    onChange,
+    name,
+  });
+  const SearchIcon = <MagnifyingGlass size='100%' className='text-gray-05' />;
   const el = rootRef.current;
   const isForm = el instanceof HTMLFormElement;
 
   const endComponent = () => {
-    if(isForm) {
+    if (isForm) {
       return (
-        <button className = "w-5 h-5" type = "submit" aria-label = "검색하기">
+        <button className='h-5 w-5' type='submit' aria-label='검색하기'>
           {SearchIcon}
         </button>
       );
     }
 
-    return (
-      <div className = "w-5 h-5">
-        {SearchIcon}
-      </div>
-    );
+    return <div className='h-5 w-5'>{SearchIcon}</div>;
   };
 
   const onSubmitHandler = (e: React.FormEvent<HTMLFormElement>) => {
-    if(!isForm) return;
+    if (!isForm) return;
 
     e.preventDefault();
 
-    if(!formSubmitHandler) return;
+    if (!formSubmitHandler) return;
 
     el.reset();
 
@@ -56,43 +66,41 @@ const InputSearch = <T extends React.ElementType = "form">(
 
   return (
     <InputBase
-      inputId = {id}
-      element = {rootElement ?? "form"}
-      ref = {rootRef}
-      error = {error}
-      feedback = {feedback}
-      readOnly = {readOnly}
-      disabled = {disabled}
-      rootClassName = {rootClassName}
-      inputRootClassName = {clsx(
-        "flex items-center py-2 text-body-02-medium bg-white overflow-hidden border border-gray-02",
+      inputId={id}
+      element={rootElement ?? 'form'}
+      ref={rootRef}
+      error={error}
+      feedback={feedback}
+      readOnly={readOnly}
+      disabled={disabled}
+      rootClassName={rootClassName}
+      inputRootClassName={clsx(
+        'flex items-center overflow-hidden border border-gray-02 bg-white py-2 text-body-02-medium',
         INPUT_SEARCH_ROUNDED[rounded],
       )}
-      onSubmit = {el instanceof HTMLFormElement ? onSubmitHandler : undefined}
-      inputComponent = {
+      onSubmit={el instanceof HTMLFormElement ? onSubmitHandler : undefined}
+      inputComponent={
         <input
-          id = {id}
-          className = {clsx("bbodek-field", className)}
-          type = "text"
-          value = {inputValue}
-          onChange = {onChangeHandler}
-          autoComplete = {autoComplete}
-          readOnly = {readOnly}
-          disabled = {disabled}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
-          name = {name}
+          id={id}
+          className={clsx('bbodek-field', className)}
+          type='text'
+          value={inputValue}
+          onChange={onChangeHandler}
+          autoComplete={autoComplete}
+          readOnly={readOnly}
+          disabled={disabled}
+          aria-disabled={disabled}
+          aria-readonly={readOnly}
+          name={name}
           required
           {...rest}
         />
       }
-      endComponent = {
-        endComponent()
-      }
+      endComponent={endComponent()}
     />
   );
 };
 
-InputSearch.displayName = "InputSearch";
+InputSearch.displayName = 'InputSearch';
 
 export default InputSearch;
diff --git a/src/core/components/Input/InputSearch/types/index.ts b/src/core/components/Input/InputSearch/types/index.ts
index 7835df2..a9f01f0 100644
--- a/src/core/components/Input/InputSearch/types/index.ts
+++ b/src/core/components/Input/InputSearch/types/index.ts
@@ -1,14 +1,20 @@
-import { InputBaseProps } from "../../InputBase/types";
-import { UseInputProps } from "../../hooks/useInput";
-import { ROUNDED } from "../constants";
+import { InputBaseProps } from '../../InputBase/types';
+import { UseInputProps } from '../../hooks/useInput';
+import { ROUNDED } from '../constants';
 
 export interface InputSearchProps<T extends React.ElementType>
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "readOnly" | "disabled">,
-    Pick<InputBaseProps<T>, "feedback" | "rootClassName" | "error" | "readOnly" | "disabled">,
-    Pick<UseInputProps, "regCallback"> {
-        rootElement?: T,
-        rounded: RoundedType;
-        formSubmitHandler?: (e: React.FormEvent<HTMLFormElement>) => void;
-    }
+  extends Omit<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      'readOnly' | 'disabled'
+    >,
+    Pick<
+      InputBaseProps<T>,
+      'feedback' | 'rootClassName' | 'error' | 'readOnly' | 'disabled'
+    >,
+    Pick<UseInputProps, 'regCallback'> {
+  rootElement?: T;
+  rounded: RoundedType;
+  formSubmitHandler?: (e: React.FormEvent<HTMLFormElement>) => void;
+}
 
-export type RoundedType = typeof ROUNDED[keyof typeof ROUNDED];
+export type RoundedType = (typeof ROUNDED)[keyof typeof ROUNDED];
diff --git a/src/core/components/Input/InputSelect/InputSelect.stories.tsx b/src/core/components/Input/InputSelect/InputSelect.stories.tsx
index 1ba6c9c..7178074 100644
--- a/src/core/components/Input/InputSelect/InputSelect.stories.tsx
+++ b/src/core/components/Input/InputSelect/InputSelect.stories.tsx
@@ -1,23 +1,23 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import InputSelect from "./index";
-import { InputSelectProps } from "./types";
+import InputSelect from './index';
+import { InputSelectProps } from './types';
 
 const meta = {
-  title: "core/Input/InputSelect",
+  title: 'core/Input/InputSelect',
   component: InputSelect,
   argTypes: {
     label: {
-      control: "text",
-      description: "InputSelect Label",
+      control: 'text',
+      description: 'InputSelect Label',
     },
     placeholder: {
-      control: "text",
-      description: "InputSelect Placeholder",
+      control: 'text',
+      description: 'InputSelect Placeholder',
     },
     options: {
-      description: "InputSelect options",
+      description: 'InputSelect options',
     },
   },
 } satisfies Meta<typeof InputSelect>;
@@ -25,21 +25,25 @@ const meta = {
 export default meta;
 
 export const Default = (props: InputSelectProps) => {
-  const [ currentValue, setCurrentValue ] = useState("");
-  const data = [ "초밥", "피자", "치킨" ];
-  const options = data.map(food => <option key = {food} value = {food}>{food}</option>);
+  const [currentValue, setCurrentValue] = useState('');
+  const data = ['초밥', '피자', '치킨'];
+  const options = data.map((food) => (
+    <option key={food} value={food}>
+      {food}
+    </option>
+  ));
   const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
     setCurrentValue(e.target.value);
   };
 
   return (
     <InputSelect
-      className = {"w-[30rem]"}
-      label = {props.label ?? "레이블"}
-      placeholder = {props.placeholder ?? "메뉴 선택"}
-      options = {options}
-      value = {currentValue}
-      onChange = {onChangeHandler}
+      className={'w-[30rem]'}
+      label={props.label ?? '레이블'}
+      placeholder={props.placeholder ?? '메뉴 선택'}
+      options={options}
+      value={currentValue}
+      onChange={onChangeHandler}
     />
   );
 };
diff --git a/src/core/components/Input/InputSelect/index.tsx b/src/core/components/Input/InputSelect/index.tsx
index ff7d173..6755139 100644
--- a/src/core/components/Input/InputSelect/index.tsx
+++ b/src/core/components/Input/InputSelect/index.tsx
@@ -1,54 +1,61 @@
-import clsx from "clsx";
-import { forwardRef, useId, useState } from "react";
+import clsx from 'clsx';
+import { forwardRef, useId, useState } from 'react';
 
-import InputBase from "../InputBase";
-import { InputSelectProps } from "./types";
+import InputBase from '../InputBase';
+import { InputSelectProps } from './types';
 
-const InputSelect = forwardRef((
-    {
-      options,
-      placeholder,
-      value,
-      ...props
-    }: InputSelectProps,
+const InputSelect = forwardRef(
+  (
+    { options, placeholder, value, ...props }: InputSelectProps,
     ref: React.Ref<HTMLSelectElement>,
   ) => {
-  const id = useId();
-  const [ isSelectedValue, setIsSelectedValue ] = useState(false);
-  const { label, rootClassName, className, onChange, required, error, ...rest } = props;
+    const id = useId();
+    const [isSelectedValue, setIsSelectedValue] = useState(false);
+    const {
+      label,
+      rootClassName,
+      className,
+      onChange,
+      required,
+      error,
+      ...rest
+    } = props;
 
-  const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    !isSelectedValue && setIsSelectedValue(true);
-    onChange?.(e);
-  };
+    const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
+      !isSelectedValue && setIsSelectedValue(true);
+      onChange?.(e);
+    };
 
-  return (
-    <InputBase
-      label = {label}
-      inputId = {id}
-      rootClassName = {rootClassName}
-      inputRootClassName = {"py-0 h-[3.75rem]"}
-      error = {error}
-      inputComponent = {
-        <select
-          ref = {ref}
-          className = {clsx(
-            "text-subhead-02-regular w-full outline-none cursor-pointer",
-            !value && !isSelectedValue ? "text-gray-05" : "text-gray-08",
-            className,
-          )}
-          onChange = {onChangeHandler}
-          required = {required}
-          value = {value}
-          {...rest}
-        >
-          <option value = "" selected disabled hidden>{placeholder}</option>
-          {options}
-        </select>
-      }
-      required = {required}
-    />
-  );
-});
+    return (
+      <InputBase
+        label={label}
+        inputId={id}
+        rootClassName={rootClassName}
+        inputRootClassName={'py-0 h-[3.75rem]'}
+        error={error}
+        inputComponent={
+          <select
+            ref={ref}
+            className={clsx(
+              'w-full cursor-pointer text-subhead-02-regular outline-none',
+              !value && !isSelectedValue ? 'text-gray-05' : 'text-gray-08',
+              className,
+            )}
+            onChange={onChangeHandler}
+            required={required}
+            value={value}
+            {...rest}
+          >
+            <option value='' selected disabled hidden>
+              {placeholder}
+            </option>
+            {options}
+          </select>
+        }
+        required={required}
+      />
+    );
+  },
+);
 
 export default InputSelect;
diff --git a/src/core/components/Input/InputSelect/types/index.ts b/src/core/components/Input/InputSelect/types/index.ts
index 0bbbeee..4414cf0 100644
--- a/src/core/components/Input/InputSelect/types/index.ts
+++ b/src/core/components/Input/InputSelect/types/index.ts
@@ -1,9 +1,9 @@
-import { SelectHTMLAttributes } from "react";
-import { InputBaseProps } from "../../InputBase/types";
+import { SelectHTMLAttributes } from 'react';
+import { InputBaseProps } from '../../InputBase/types';
 
 export interface InputSelectProps
-extends SelectHTMLAttributes<HTMLSelectElement>,
-          Pick<InputBaseProps<"div">, "label" | "rootClassName" | "error"> {
-            placeholder?: string;
-            options: React.ReactNode[]
-          }
+  extends SelectHTMLAttributes<HTMLSelectElement>,
+    Pick<InputBaseProps<'div'>, 'label' | 'rootClassName' | 'error'> {
+  placeholder?: string;
+  options: React.ReactNode[];
+}
diff --git a/src/core/components/Input/InputTextArea/InputTextArea.stories.tsx b/src/core/components/Input/InputTextArea/InputTextArea.stories.tsx
index c1dfdc6..bf04df5 100644
--- a/src/core/components/Input/InputTextArea/InputTextArea.stories.tsx
+++ b/src/core/components/Input/InputTextArea/InputTextArea.stories.tsx
@@ -1,37 +1,37 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import { TextAreaSizeOptions } from "./constants";
-import InputTextArea from "./index";
-import { InputTextAreaProps } from "./types";
+import { TextAreaSizeOptions } from './constants';
+import InputTextArea from './index';
+import { InputTextAreaProps } from './types';
 
 const meta = {
-  title: "core/Input/InputTextArea",
+  title: 'core/Input/InputTextArea',
   component: InputTextArea,
   argTypes: {
     label: {
-      control: "text",
-      description: "InputTextArea Label",
+      control: 'text',
+      description: 'InputTextArea Label',
     },
     textAreaHeight: {
-      control: "select",
+      control: 'select',
       options: TextAreaSizeOptions,
-      description: "InputTextArea Height",
+      description: 'InputTextArea Height',
     },
     maxLength: {
-      control: "number",
-      description: "InputTextArea Max Length",
+      control: 'number',
+      description: 'InputTextArea Max Length',
     },
     regCallback: {
-      description: "Input RegEx",
+      description: 'Input RegEx',
     },
     readOnly: {
-      control: "boolean",
-      description: "Input readOnly",
+      control: 'boolean',
+      description: 'Input readOnly',
     },
     disabled: {
-      control: "boolean",
-      description: "Input disabled",
+      control: 'boolean',
+      description: 'Input disabled',
     },
   },
 } satisfies Meta<typeof InputTextArea>;
@@ -40,18 +40,19 @@ export default meta;
 
 export const Default = (props: InputTextAreaProps) => {
   const { label, maxLength, textAreaHeight, ...rest } = props;
-  const [ currentValue, setCurrentValue ] = useState("");
-  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => setCurrentValue(e.target.value);
+  const [currentValue, setCurrentValue] = useState('');
+  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) =>
+    setCurrentValue(e.target.value);
 
   return (
-    <div className = "w-[30rem]">
+    <div className='w-[30rem]'>
       <InputTextArea
-        label = {label}
-        onChange = {onChangeHandler}
-        value = {currentValue}
-        placeholder = "검색하기"
-        maxLength = {maxLength ?? 150}
-        textAreaHeight = {textAreaHeight ?? "h-213"}
+        label={label}
+        onChange={onChangeHandler}
+        value={currentValue}
+        placeholder='검색하기'
+        maxLength={maxLength ?? 150}
+        textAreaHeight={textAreaHeight ?? 'h-213'}
         {...rest}
       />
     </div>
diff --git a/src/core/components/Input/InputTextArea/constants/index.ts b/src/core/components/Input/InputTextArea/constants/index.ts
index 5e2f16d..55b5dfa 100644
--- a/src/core/components/Input/InputTextArea/constants/index.ts
+++ b/src/core/components/Input/InputTextArea/constants/index.ts
@@ -1,13 +1,15 @@
-import { TextAreaSizeType } from "../types";
+import { TextAreaSizeType } from '../types';
 
 export const SIZE = {
-  SIZE_213: "h-213",
-  SIZE_314: "h-314",
+  SIZE_213: 'h-213',
+  SIZE_314: 'h-314',
 } as const;
 
 export const TEXT_AREA_HEIGHT: Record<TextAreaSizeType, string> = {
-  [SIZE.SIZE_213]: "h-[13.3125rem]",
-  [SIZE.SIZE_314]: "h-[19.625rem]",
+  [SIZE.SIZE_213]: 'h-[13.3125rem]',
+  [SIZE.SIZE_314]: 'h-[19.625rem]',
 };
 
-export const TextAreaSizeOptions = Object.keys(SIZE).map(color => SIZE[color as keyof typeof SIZE]);
+export const TextAreaSizeOptions = Object.keys(SIZE).map(
+  (color) => SIZE[color as keyof typeof SIZE],
+);
diff --git a/src/core/components/Input/InputTextArea/index.tsx b/src/core/components/Input/InputTextArea/index.tsx
index 739d750..277addf 100644
--- a/src/core/components/Input/InputTextArea/index.tsx
+++ b/src/core/components/Input/InputTextArea/index.tsx
@@ -1,13 +1,14 @@
-import clsx from "clsx";
-import { forwardRef, useId } from "react";
+import clsx from 'clsx';
+import { forwardRef, useId } from 'react';
 
-import Typography from "../../Typography";
-import InputBase from "../InputBase";
-import { useInput } from "../hooks/useInput";
-import { TEXT_AREA_HEIGHT } from "./constants";
-import { InputTextAreaProps } from "./types";
+import Typography from '../../Typography';
+import InputBase from '../InputBase';
+import { useInput } from '../hooks/useInput';
+import { TEXT_AREA_HEIGHT } from './constants';
+import { InputTextAreaProps } from './types';
 
-const InputTextArea = forwardRef((
+const InputTextArea = forwardRef(
+  (
     {
       labelColor,
       borderColor,
@@ -19,56 +20,78 @@ const InputTextArea = forwardRef((
     }: InputTextAreaProps,
     ref: React.Ref<HTMLTextAreaElement>,
   ) => {
-  const id = useId();
-  const { readOnly = false, disabled = false, rootClassName, className, required = false, value, onChange, autoComplete = "off", maxLength = 150, error = false, name, ...rest } = props;
-  const { inputValue, onChangeHandler } = useInput({ value, regCallback, onChange, name });
-  const currentInputValueLength = (inputValue as string)?.length || 0;
+    const id = useId();
+    const {
+      readOnly = false,
+      disabled = false,
+      rootClassName,
+      className,
+      required = false,
+      value,
+      onChange,
+      autoComplete = 'off',
+      maxLength = 150,
+      error = false,
+      name,
+      ...rest
+    } = props;
+    const { inputValue, onChangeHandler } = useInput({
+      value,
+      regCallback,
+      onChange,
+      name,
+    });
+    const currentInputValueLength = (inputValue as string)?.length || 0;
 
-  const onChangeTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if((e.target?.value ?? "").length > maxLength) return;
+    const onChangeTextArea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if ((e.target?.value ?? '').length > maxLength) return;
 
-    onChangeHandler(e);
-  };
+      onChangeHandler(e);
+    };
 
-  return (
-    <InputBase
-      label = {label}
-      inputId = {id}
-      rootClassName = {rootClassName}
-      inputRootClassName = {clsx("flex-v-stack", TEXT_AREA_HEIGHT[textAreaHeight])}
-      feedback = {feedback}
-      error = {error}
-      readOnly = {readOnly}
-      disabled = {disabled}
-      inputComponent = {
-        <textarea
-          ref = {ref}
-          className = {clsx("bbodek-field w-full resize-none", className)}
-          autoComplete = {autoComplete}
-          onChange = {onChangeTextArea}
-          required = {required}
-          value = {inputValue}
-          maxLength = {maxLength}
-          readOnly = {readOnly}
-          disabled = {disabled}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
-          name = {name}
-          {...rest}
-        />
-      }
-      endComponent = {
-        <Typography
-          className = "ml-auto"
-          color = "gray-05"
-          text = {`${currentInputValueLength} / ${maxLength}`}
-        />
-      }
-      required = {required}
-      labelColor = {labelColor}
-      borderColor = {borderColor}
-    />
-  );
-});
+    return (
+      <InputBase
+        label={label}
+        inputId={id}
+        rootClassName={rootClassName}
+        inputRootClassName={clsx(
+          'flex-v-stack',
+          TEXT_AREA_HEIGHT[textAreaHeight],
+        )}
+        feedback={feedback}
+        error={error}
+        readOnly={readOnly}
+        disabled={disabled}
+        inputComponent={
+          <textarea
+            ref={ref}
+            className={clsx('bbodek-field w-full resize-none', className)}
+            autoComplete={autoComplete}
+            onChange={onChangeTextArea}
+            required={required}
+            value={inputValue}
+            maxLength={maxLength}
+            readOnly={readOnly}
+            disabled={disabled}
+            aria-disabled={disabled}
+            aria-readonly={readOnly}
+            name={name}
+            {...rest}
+          />
+        }
+        endComponent={
+          <Typography
+            className='ml-auto'
+            color='gray-05'
+            text={`${currentInputValueLength} / ${maxLength}`}
+          />
+        }
+        required={required}
+        labelColor={labelColor}
+        borderColor={borderColor}
+      />
+    );
+  },
+);
 
 export default InputTextArea;
diff --git a/src/core/components/Input/InputTextArea/types/index.ts b/src/core/components/Input/InputTextArea/types/index.ts
index cf83d26..623db4b 100644
--- a/src/core/components/Input/InputTextArea/types/index.ts
+++ b/src/core/components/Input/InputTextArea/types/index.ts
@@ -1,13 +1,26 @@
-import { InputBaseProps } from "../../InputBase/types";
-import { UseInputProps } from "../../hooks/useInput";
-import { SIZE } from "../constants";
+import { InputBaseProps } from '../../InputBase/types';
+import { UseInputProps } from '../../hooks/useInput';
+import { SIZE } from '../constants';
 
-export type TextAreaSizeType = typeof SIZE[keyof typeof SIZE];
+export type TextAreaSizeType = (typeof SIZE)[keyof typeof SIZE];
 
 export interface InputTextAreaProps
-    extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "disabled" | "readOnly">,
-           Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "labelColor" | "borderColor"| "error" | "readOnly" | "disabled">,
-           Pick<UseInputProps, "regCallback"> {
-            textAreaHeight: TextAreaSizeType;
-            maxLength: React.TextareaHTMLAttributes<HTMLTextAreaElement>["maxLength"];
-           }
+  extends Omit<
+      React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+      'disabled' | 'readOnly'
+    >,
+    Pick<
+      InputBaseProps<'div'>,
+      | 'feedback'
+      | 'rootClassName'
+      | 'label'
+      | 'labelColor'
+      | 'borderColor'
+      | 'error'
+      | 'readOnly'
+      | 'disabled'
+    >,
+    Pick<UseInputProps, 'regCallback'> {
+  textAreaHeight: TextAreaSizeType;
+  maxLength: React.TextareaHTMLAttributes<HTMLTextAreaElement>['maxLength'];
+}
diff --git a/src/core/components/Input/InputTextField/InputTextField.stories.tsx b/src/core/components/Input/InputTextField/InputTextField.stories.tsx
index 7ff3f32..3fbf9bc 100644
--- a/src/core/components/Input/InputTextField/InputTextField.stories.tsx
+++ b/src/core/components/Input/InputTextField/InputTextField.stories.tsx
@@ -1,40 +1,40 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import { ColorOptions } from "@/constants/color";
-import InputTextField from "./index";
-import { InputTextFieldProps } from "./types";
+import { ColorOptions } from '@/constants/color';
+import InputTextField from './index';
+import { InputTextFieldProps } from './types';
 
 const meta = {
-  title: "core/Input/InputTextField",
+  title: 'core/Input/InputTextField',
   component: InputTextField,
   argTypes: {
     label: {
-      control: "text",
-      description: "InputTextField Label",
+      control: 'text',
+      description: 'InputTextField Label',
     },
     labelColor: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      defaultValue: "gray-04",
-      description: "Bbodek DesignSystem Colors",
+      defaultValue: 'gray-04',
+      description: 'Bbodek DesignSystem Colors',
     },
     borderColor: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      defaultValue: "gray-03",
-      description: "Bbodek DesignSystem Colors",
+      defaultValue: 'gray-03',
+      description: 'Bbodek DesignSystem Colors',
     },
     disabled: {
-      control: "boolean",
-      description: "Input disabled",
+      control: 'boolean',
+      description: 'Input disabled',
     },
     readOnly: {
-      control: "boolean",
-      description: "Input readOnly",
+      control: 'boolean',
+      description: 'Input readOnly',
     },
     regCallback: {
-      description: "Input RegEx",
+      description: 'Input RegEx',
     },
   },
 } satisfies Meta<typeof InputTextField>;
@@ -43,16 +43,17 @@ export default meta;
 
 export const Default = (props: InputTextFieldProps) => {
   const { label, ...rest } = props;
-  const [ currentValue, setCurrentValue ] = useState("");
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => setCurrentValue(e.target.value);
+  const [currentValue, setCurrentValue] = useState('');
+  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) =>
+    setCurrentValue(e.target.value);
 
   return (
-    <div className = "w-[400px]">
+    <div className='w-[400px]'>
       <InputTextField
-        label = {label ?? "레이블"}
-        placeholder = "placeholder"
-        value = {currentValue}
-        onChange = {onChangeHandler}
+        label={label ?? '레이블'}
+        placeholder='placeholder'
+        value={currentValue}
+        onChange={onChangeHandler}
         required
         {...rest}
       />
diff --git a/src/core/components/Input/InputTextField/index.tsx b/src/core/components/Input/InputTextField/index.tsx
index 9fffc43..0a1dda2 100644
--- a/src/core/components/Input/InputTextField/index.tsx
+++ b/src/core/components/Input/InputTextField/index.tsx
@@ -1,12 +1,13 @@
-import clsx from "clsx";
-import { forwardRef, useId } from "react";
+import clsx from 'clsx';
+import { forwardRef, useId } from 'react';
 
-import { useInput } from "@/core/components/Input/hooks/useInput";
-import { XCircle } from "@phosphor-icons/react";
-import InputBase from "../InputBase";
-import { InputTextFieldProps } from "./types";
+import { useInput } from '@/core/components/Input/hooks/useInput';
+import { XCircle } from '@phosphor-icons/react';
+import InputBase from '../InputBase';
+import { InputTextFieldProps } from './types';
 
-const InputTextField = forwardRef((
+const InputTextField = forwardRef(
+  (
     {
       labelColor,
       borderColor,
@@ -15,58 +16,76 @@ const InputTextField = forwardRef((
       feedback,
       ...props
     }: InputTextFieldProps,
-    ref: React.ComponentPropsWithRef<"input">["ref"],
+    ref: React.ComponentPropsWithRef<'input'>['ref'],
   ) => {
-  const id = useId();
-  const { rootClassName, className, required, value, onChange, autoComplete = "off", readOnly = false, error = false, name, disabled = false, ...rest } = props;
-  const { inputValue, onChangeHandler, onResetInputValue } = useInput({ value, regCallback, onChange, name });
-  const ResetIcon = <XCircle size = "100%" weight = "fill" fill = "#A9B2C7"/>;
+    const id = useId();
+    const {
+      rootClassName,
+      className,
+      required,
+      value,
+      onChange,
+      autoComplete = 'off',
+      readOnly = false,
+      error = false,
+      name,
+      disabled = false,
+      ...rest
+    } = props;
+    const { inputValue, onChangeHandler, onResetInputValue } = useInput({
+      value,
+      regCallback,
+      onChange,
+      name,
+    });
+    const ResetIcon = <XCircle size='100%' weight='fill' fill='#A9B2C7' />;
 
-  return (
-    <InputBase
-      inputId = {id}
-      label = {label}
-      rootClassName = {rootClassName}
-      inputRootClassName = "h-[3.75rem]"
-      readOnly = {readOnly}
-      disabled = {disabled}
-      feedback = {feedback}
-      error = {error}
-      inputComponent = {
-        <input
-          ref = {ref}
-          id = {id}
-          className = {clsx("bbodek-field", className)}
-          type = "text"
-          required = {required}
-          value = {inputValue}
-          onChange = {onChangeHandler}
-          autoComplete = {autoComplete}
-          readOnly = {readOnly}
-          disabled = {disabled}
-          aria-disabled = {disabled}
-          aria-readonly = {readOnly}
-          name = {name}
-          {...rest}
-        />
-      }
-      endComponent = {
-        <button
-          type = "button"
-          className = {clsx("w-7 h-7", inputValue ? "visible" : "invisible")}
-          onClick = {onResetInputValue}
-          aria-label = "초기화"
-        >
-          {ResetIcon}
-        </button>
-      }
-      required = {required}
-      labelColor = {labelColor}
-      borderColor = {borderColor}
-    />
-  );
-});
+    return (
+      <InputBase
+        inputId={id}
+        label={label}
+        rootClassName={rootClassName}
+        inputRootClassName='h-[3.75rem]'
+        readOnly={readOnly}
+        disabled={disabled}
+        feedback={feedback}
+        error={error}
+        inputComponent={
+          <input
+            ref={ref}
+            id={id}
+            className={clsx('bbodek-field', className)}
+            type='text'
+            required={required}
+            value={inputValue}
+            onChange={onChangeHandler}
+            autoComplete={autoComplete}
+            readOnly={readOnly}
+            disabled={disabled}
+            aria-disabled={disabled}
+            aria-readonly={readOnly}
+            name={name}
+            {...rest}
+          />
+        }
+        endComponent={
+          <button
+            type='button'
+            className={clsx('h-7 w-7', inputValue ? 'visible' : 'invisible')}
+            onClick={onResetInputValue}
+            aria-label='초기화'
+          >
+            {ResetIcon}
+          </button>
+        }
+        required={required}
+        labelColor={labelColor}
+        borderColor={borderColor}
+      />
+    );
+  },
+);
 
-InputTextField.displayName = "InputTextField";
+InputTextField.displayName = 'InputTextField';
 
 export default InputTextField;
diff --git a/src/core/components/Input/InputTextField/types/index.ts b/src/core/components/Input/InputTextField/types/index.ts
index b4a79c7..60c3176 100644
--- a/src/core/components/Input/InputTextField/types/index.ts
+++ b/src/core/components/Input/InputTextField/types/index.ts
@@ -1,7 +1,20 @@
-import { InputBaseProps } from "../../InputBase/types";
-import { UseInputProps } from "../../hooks/useInput";
+import { InputBaseProps } from '../../InputBase/types';
+import { UseInputProps } from '../../hooks/useInput';
 
 export interface InputTextFieldProps
-    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "readOnly" | "disabled">,
-           Pick<InputBaseProps<"div">, "feedback" | "rootClassName" | "label" | "labelColor" | "borderColor" | "error" | "readOnly" | "disabled">,
-           Pick<UseInputProps, "regCallback"> {}
+  extends Omit<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      'readOnly' | 'disabled'
+    >,
+    Pick<
+      InputBaseProps<'div'>,
+      | 'feedback'
+      | 'rootClassName'
+      | 'label'
+      | 'labelColor'
+      | 'borderColor'
+      | 'error'
+      | 'readOnly'
+      | 'disabled'
+    >,
+    Pick<UseInputProps, 'regCallback'> {}
diff --git a/src/core/components/Input/hooks/effects/useValueChangeEffect.ts b/src/core/components/Input/hooks/effects/useValueChangeEffect.ts
index b1eea32..02a8f56 100644
--- a/src/core/components/Input/hooks/effects/useValueChangeEffect.ts
+++ b/src/core/components/Input/hooks/effects/useValueChangeEffect.ts
@@ -1,7 +1,10 @@
-import { Dispatch, SetStateAction, useEffect, useRef } from "react";
-import { UseInputProps } from "../useInput";
+import { Dispatch, SetStateAction, useEffect, useRef } from 'react';
+import { UseInputProps } from '../useInput';
 
-const useValueChangeEffect = (value: UseInputProps["value"], setInputValue: Dispatch<SetStateAction<UseInputProps["value"]>>) => {
+const useValueChangeEffect = (
+  value: UseInputProps['value'],
+  setInputValue: Dispatch<SetStateAction<UseInputProps['value']>>,
+) => {
   const isFirst = useRef(true);
 
   useEffect(() => {
@@ -14,4 +17,3 @@ const useValueChangeEffect = (value: UseInputProps["value"], setInputValue: Disp
 };
 
 export default useValueChangeEffect;
-
diff --git a/src/core/components/Input/hooks/useInput.ts b/src/core/components/Input/hooks/useInput.ts
index 9cf3e3c..4e6ad01 100644
--- a/src/core/components/Input/hooks/useInput.ts
+++ b/src/core/components/Input/hooks/useInput.ts
@@ -1,24 +1,35 @@
-import { InputHTMLAttributes, useState } from "react";
+import { InputHTMLAttributes, useState } from 'react';
 
-import useValueChangeEffect from "./effects/useValueChangeEffect";
+import useValueChangeEffect from './effects/useValueChangeEffect';
 
 export interface UseInputProps {
-  value: InputHTMLAttributes<HTMLInputElement>["value"];
-  name: InputHTMLAttributes<HTMLInputElement>["name"];
+  value: InputHTMLAttributes<HTMLInputElement>['value'];
+  name: InputHTMLAttributes<HTMLInputElement>['name'];
   regCallback?: (v: string) => string;
-  onChange: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>["onChange"];
+  onChange: InputHTMLAttributes<
+    HTMLInputElement | HTMLTextAreaElement
+  >['onChange'];
 }
 
-export const useInput = ({ value, regCallback, onChange, name }: UseInputProps) => {
-  const [ inputType, setInputType ] = useState<HTMLInputElement["type"]>("text");
-  const [ inputValue, setInputValue ] = useState<UseInputProps["value"]>(value ?? "");
-
-  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+export const useInput = ({
+  value,
+  regCallback,
+  onChange,
+  name,
+}: UseInputProps) => {
+  const [inputType, setInputType] = useState<HTMLInputElement['type']>('text');
+  const [inputValue, setInputValue] = useState<UseInputProps['value']>(
+    value ?? '',
+  );
+
+  const onChangeHandler = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
     const { type, value: eventTargetValue } = e.target;
     const eventType = type;
     const isDifferenceType = type !== inputType;
 
-    if(isDifferenceType) {
+    if (isDifferenceType) {
       setInputType(eventType);
     }
 
@@ -30,12 +41,12 @@ export const useInput = ({ value, regCallback, onChange, name }: UseInputProps)
   };
 
   const onResetInputValue = () => {
-    const isNumberType = inputType === "number";
-    setInputValue(!isNumberType ? "" : "0");
+    const isNumberType = inputType === 'number';
+    setInputValue(!isNumberType ? '' : '0');
 
     const event = {
-      target: { value: "", name },
-      currentTarget: { value: "", name },
+      target: { value: '', name },
+      currentTarget: { value: '', name },
     } as unknown as React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>;
 
     onChange?.(event);
diff --git a/src/core/components/Label/Label.stories.tsx b/src/core/components/Label/Label.stories.tsx
index 76b1089..1edaa17 100644
--- a/src/core/components/Label/Label.stories.tsx
+++ b/src/core/components/Label/Label.stories.tsx
@@ -1,27 +1,27 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import { colorThemeOptions } from "@/constants/theme";
-import { Info } from "@phosphor-icons/react";
-import Label from "./index";
-import { LabelProps } from "./types";
+import { colorThemeOptions } from '@/constants/theme';
+import { Info } from '@phosphor-icons/react';
+import Label from './index';
+import { LabelProps } from './types';
 
 const meta = {
-  title: "core/Label",
+  title: 'core/Label',
   component: Label,
   argTypes: {
     colorTheme: {
-      control: "select",
+      control: 'select',
       options: colorThemeOptions,
-      description: "Label colorTheme",
+      description: 'Label colorTheme',
     },
     size: {
-      control: "select",
-      options: [ "small", "medium", "large" ],
-      description: "Label Size",
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Label Size',
     },
     label: {
-      control: "text",
-      description: "Label Text",
+      control: 'text',
+      description: 'Label Text',
     },
   },
 } satisfies Meta<typeof Label>;
@@ -31,11 +31,11 @@ export default meta;
 export const Primary = (props: LabelProps) => {
   return (
     <Label
-      element = "dt"
-      colorTheme = {props.colorTheme ?? "primary"}
-      size = "small"
-      label = {props.label ?? "small primary"}
-      icon = {<Info />}
+      element='dt'
+      colorTheme={props.colorTheme ?? 'primary'}
+      size='small'
+      label={props.label ?? 'small primary'}
+      icon={<Info />}
     />
   );
 };
@@ -43,10 +43,10 @@ export const Primary = (props: LabelProps) => {
 export const Error = (props: LabelProps) => {
   return (
     <Label
-      colorTheme = {props.colorTheme ?? "error"}
-      size = "medium"
-      label = {props.label ?? "medium error"}
-      icon = {<Info />}
+      colorTheme={props.colorTheme ?? 'error'}
+      size='medium'
+      label={props.label ?? 'medium error'}
+      icon={<Info />}
     />
   );
 };
@@ -54,10 +54,10 @@ export const Error = (props: LabelProps) => {
 export const Success = (props: LabelProps) => {
   return (
     <Label
-      colorTheme = {props.colorTheme ?? "success"}
-      size = "large"
-      label = {props.label ?? "large success"}
-      icon = {<Info />}
+      colorTheme={props.colorTheme ?? 'success'}
+      size='large'
+      label={props.label ?? 'large success'}
+      icon={<Info />}
     />
   );
 };
@@ -65,9 +65,13 @@ export const Success = (props: LabelProps) => {
 export const Warning = (props: LabelProps) => {
   return (
     <Label
-      colorTheme = {props.colorTheme ?? "warning"}
-      size = "small"
-      label = {<><span className = "max-w-[70px] truncate">small warning</span> 외 1개</>}
+      colorTheme={props.colorTheme ?? 'warning'}
+      size='small'
+      label={
+        <>
+          <span className='max-w-[70px] truncate'>small warning</span> 외 1개
+        </>
+      }
     />
   );
 };
@@ -75,9 +79,9 @@ export const Warning = (props: LabelProps) => {
 export const Secondary = (props: LabelProps) => {
   return (
     <Label
-      colorTheme = {props.colorTheme ?? "secondary"}
-      size = "small"
-      label = {props.label ?? "small secondary"}
+      colorTheme={props.colorTheme ?? 'secondary'}
+      size='small'
+      label={props.label ?? 'small secondary'}
     />
   );
 };
diff --git a/src/core/components/Label/constants/index.ts b/src/core/components/Label/constants/index.ts
index 490f36b..b5fd624 100644
--- a/src/core/components/Label/constants/index.ts
+++ b/src/core/components/Label/constants/index.ts
@@ -1,13 +1,13 @@
-import { SizeType } from "../types";
+import { SizeType } from '../types';
 
 export const SIZE = {
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large",
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
 } as const;
 
 export const LABEL_SIZE: Record<SizeType, string> = {
-  [SIZE.SMALL]: "text-body-03-regular px-2 py-0.5 rounded-md",
-  [SIZE.MEDIUM]: "text-body-02-regular px-2 py-1 rounded-md",
-  [SIZE.LARGE]: "text-body-01-regular px-2 py-1 rounded-lg",
+  [SIZE.SMALL]: 'text-body-03-regular px-2 py-0.5 rounded-md',
+  [SIZE.MEDIUM]: 'text-body-02-regular px-2 py-1 rounded-md',
+  [SIZE.LARGE]: 'text-body-01-regular px-2 py-1 rounded-lg',
 };
diff --git a/src/core/components/Label/index.tsx b/src/core/components/Label/index.tsx
index de408ba..25562e8 100644
--- a/src/core/components/Label/index.tsx
+++ b/src/core/components/Label/index.tsx
@@ -1,10 +1,10 @@
-import clsx from "clsx";
+import clsx from 'clsx';
 
-import { COLOR_THEME_STYLES } from "@/constants/theme";
-import { LABEL_SIZE } from "./constants";
-import { LabelProps } from "./types";
+import { COLOR_THEME_STYLES } from '@/constants/theme';
+import { LABEL_SIZE } from './constants';
+import { LabelProps } from './types';
 
-const Label = <T extends React.ElementType = "div">({
+const Label = <T extends React.ElementType = 'div'>({
   colorTheme,
   size,
   label,
@@ -13,18 +13,16 @@ const Label = <T extends React.ElementType = "div">({
   ...props
 }: LabelProps<T> & React.ComponentPropsWithoutRef<T>) => {
   const { className, ...rest } = props;
-  const Component: React.ElementType = Element || "div";
+  const Component: React.ElementType = Element || 'div';
 
   return (
     <Component
-      className = {
-        clsx(
-          "flex items-center gap-1 justify-center",
-          COLOR_THEME_STYLES[colorTheme],
-          LABEL_SIZE[size],
-          className,
-        )
-      }
+      className={clsx(
+        'flex items-center justify-center gap-1',
+        COLOR_THEME_STYLES[colorTheme],
+        LABEL_SIZE[size],
+        className,
+      )}
       {...rest}
     >
       {icon && icon}
diff --git a/src/core/components/Label/types/index.ts b/src/core/components/Label/types/index.ts
index 09854c9..6a6d2a1 100644
--- a/src/core/components/Label/types/index.ts
+++ b/src/core/components/Label/types/index.ts
@@ -1,9 +1,9 @@
-import { ColorThemeType } from "@/types";
-import { SIZE } from "../constants";
+import { ColorThemeType } from '@/types';
+import { SIZE } from '../constants';
 
-export type SizeType = typeof SIZE[keyof typeof SIZE];
+export type SizeType = (typeof SIZE)[keyof typeof SIZE];
 
-export interface LabelProps<T extends React.ElementType = "div">{
+export interface LabelProps<T extends React.ElementType = 'div'> {
   element?: T;
   colorTheme: ColorThemeType;
   size: SizeType;
diff --git a/src/core/components/Modal/ModalBase/ModalBase.stories.tsx b/src/core/components/Modal/ModalBase/ModalBase.stories.tsx
index 6ed24fe..1657758 100644
--- a/src/core/components/Modal/ModalBase/ModalBase.stories.tsx
+++ b/src/core/components/Modal/ModalBase/ModalBase.stories.tsx
@@ -1,41 +1,41 @@
-import { Meta } from "@storybook/react";
-import clsx from "clsx";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import clsx from 'clsx';
+import { useState } from 'react';
 
-import Section from "../../Section";
-import ModalBase from "./index";
-import { ModalBaseProps } from "./types";
+import Section from '../../Section';
+import ModalBase from './index';
+import { ModalBaseProps } from './types';
 
 const meta = {
-  title: "core/Modal/ModalBase",
+  title: 'core/Modal/ModalBase',
   component: ModalBase,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
   argTypes: {
     target: {
-      control: "text",
-      defaultValue: "modal",
-      description: "Modal Render Position Element id",
+      control: 'text',
+      defaultValue: 'modal',
+      description: 'Modal Render Position Element id',
     },
     variants: {
-      control: "select",
-      options: [ "modal", "drawer" ],
-      description: "Modal Variants",
+      control: 'select',
+      options: ['modal', 'drawer'],
+      description: 'Modal Variants',
     },
     isOpen: {
-      control: "boolean",
+      control: 'boolean',
       defaultValue: false,
-      description: "Open Modal",
+      description: 'Open Modal',
     },
     dimmed: {
-      control: "boolean",
+      control: 'boolean',
       defaultValue: true,
-      description: "use Modal Component with dimmed",
+      description: 'use Modal Component with dimmed',
     },
     onClose: {
-      action: "clicked",
-      description: "Modal Close Function",
+      action: 'clicked',
+      description: 'Modal Close Function',
     },
   },
 } satisfies Meta<typeof ModalBase>;
@@ -43,27 +43,26 @@ const meta = {
 export default meta;
 
 export const Default = (props: ModalBaseProps) => {
-  const [ isOpen, setIsOpen ] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <>
-      <div id = {props.target ?? "modal"} />
+      <div id={props.target ?? 'modal'} />
       <ModalBase
-        variants = {props.variants ?? "modal"}
-        isOpen = {props.isOpen || isOpen}
-        target = {props.target}
-        dimmed = {props.dimmed}
+        variants={props.variants ?? 'modal'}
+        isOpen={props.isOpen || isOpen}
+        target={props.target}
+        dimmed={props.dimmed}
       >
         <Section
-          element = {"div"}
-          className = {clsx("w-[20rem] h-[20rem]",
-              props.variants === "modal" ? "animate-popup" : "animate-drawer",
-            )}
+          element={'div'}
+          className={clsx(
+            'h-[20rem] w-[20rem]',
+            props.variants === 'modal' ? 'animate-popup' : 'animate-drawer',
+          )}
         />
       </ModalBase>
-      <button onClick = {() => setIsOpen(true)}>
-        Modal Open!!
-      </button>
+      <button onClick={() => setIsOpen(true)}>Modal Open!!</button>
     </>
   );
 };
diff --git a/src/core/components/Modal/ModalBase/constants/index.ts b/src/core/components/Modal/ModalBase/constants/index.ts
index 4b64886..23e5944 100644
--- a/src/core/components/Modal/ModalBase/constants/index.ts
+++ b/src/core/components/Modal/ModalBase/constants/index.ts
@@ -1,26 +1,25 @@
-import { VariantsType } from "../types";
+import { VariantsType } from '../types';
 
 export const VARIANTS = {
-  MODAL: "modal",
-  DRAWER: "drawer",
-  BOTTOM_SHEET: "bottomSheet",
+  MODAL: 'modal',
+  DRAWER: 'drawer',
+  BOTTOM_SHEET: 'bottomSheet',
 } as const;
 
 export const MODAL_CONTENT_POSITION: Record<VariantsType, string> = {
-  [VARIANTS.MODAL]: "fixed flex items-center justify-center z-50",
-  [VARIANTS.DRAWER]: "flex justify-end z-40",
-  [VARIANTS.BOTTOM_SHEET]: "fixed flex justify-center items-end z-50",
+  [VARIANTS.MODAL]: 'fixed flex items-center justify-center z-50',
+  [VARIANTS.DRAWER]: 'flex justify-end z-40',
+  [VARIANTS.BOTTOM_SHEET]: 'fixed flex justify-center items-end z-50',
 } as const;
 
 export const MODAL_DIMMED_COLOR: Record<VariantsType, string> = {
-  [VARIANTS.MODAL]: "bg-[#1018284d]",
-  [VARIANTS.DRAWER]: "bg-[#f8faffcc]",
-  [VARIANTS.BOTTOM_SHEET]: "bg-[#1018284d]",
+  [VARIANTS.MODAL]: 'bg-[#1018284d]',
+  [VARIANTS.DRAWER]: 'bg-[#f8faffcc]',
+  [VARIANTS.BOTTOM_SHEET]: 'bg-[#1018284d]',
 } as const;
 
 export const MODAL_CONTENT_SIZE: Record<VariantsType, string> = {
-  [VARIANTS.MODAL]: "h-auto",
-  [VARIANTS.DRAWER]: "h-full",
-  [VARIANTS.BOTTOM_SHEET]: "h-auto",
+  [VARIANTS.MODAL]: 'h-auto',
+  [VARIANTS.DRAWER]: 'h-full',
+  [VARIANTS.BOTTOM_SHEET]: 'h-auto',
 } as const;
-
diff --git a/src/core/components/Modal/ModalBase/index.tsx b/src/core/components/Modal/ModalBase/index.tsx
index ae4e450..1527f6b 100644
--- a/src/core/components/Modal/ModalBase/index.tsx
+++ b/src/core/components/Modal/ModalBase/index.tsx
@@ -1,12 +1,17 @@
-import clsx from "clsx";
-import { PropsWithChildren, forwardRef } from "react";
+import clsx from 'clsx';
+import { PropsWithChildren, forwardRef } from 'react';
 
-import useClickOutside from "@/hooks/useClickOutSide";
-import ModalPortal from "../ModalPortal";
-import { MODAL_CONTENT_POSITION, MODAL_CONTENT_SIZE, MODAL_DIMMED_COLOR } from "./constants";
-import { ModalBaseProps } from "./types";
+import useClickOutside from '@/hooks/useClickOutSide';
+import ModalPortal from '../ModalPortal';
+import {
+  MODAL_CONTENT_POSITION,
+  MODAL_CONTENT_SIZE,
+  MODAL_DIMMED_COLOR,
+} from './constants';
+import { ModalBaseProps } from './types';
 
-const ModalBase = forwardRef((
+const ModalBase = forwardRef(
+  (
     {
       target,
       variants,
@@ -18,33 +23,31 @@ const ModalBase = forwardRef((
     }: PropsWithChildren<ModalBaseProps>,
     ref: React.Ref<HTMLDialogElement>,
   ) => {
-  const { contentRef } = useClickOutside<HTMLDivElement>(onClose);
-  const { className, ...rest } = props;
+    const { contentRef } = useClickOutside<HTMLDivElement>(onClose);
+    const { className, ...rest } = props;
 
-  if (!isOpen) return null;
+    if (!isOpen) return null;
 
-  return (
-    <ModalPortal target = {target}>
-      <dialog
-        ref = {ref}
-        className = {clsx(
-          "w-full h-full open:animate-fade-in overflow-hidden",
-          MODAL_CONTENT_POSITION[variants],
-          dimmed && MODAL_DIMMED_COLOR[variants],
-          className,
-        )}
-        open = {isOpen}
-        {...rest}
-      >
-        <div
-          ref = {contentRef}
-          className = {MODAL_CONTENT_SIZE[variants]}
+    return (
+      <ModalPortal target={target}>
+        <dialog
+          ref={ref}
+          className={clsx(
+            'h-full w-full overflow-hidden open:animate-fade-in',
+            MODAL_CONTENT_POSITION[variants],
+            dimmed && MODAL_DIMMED_COLOR[variants],
+            className,
+          )}
+          open={isOpen}
+          {...rest}
         >
-          {children}
-        </div>
-      </dialog>
-    </ModalPortal>
-  );
-});
+          <div ref={contentRef} className={MODAL_CONTENT_SIZE[variants]}>
+            {children}
+          </div>
+        </dialog>
+      </ModalPortal>
+    );
+  },
+);
 
 export default ModalBase;
diff --git a/src/core/components/Modal/ModalBase/types/index.ts b/src/core/components/Modal/ModalBase/types/index.ts
index 26acd3f..8cee83c 100644
--- a/src/core/components/Modal/ModalBase/types/index.ts
+++ b/src/core/components/Modal/ModalBase/types/index.ts
@@ -1,11 +1,13 @@
-import { DialogHTMLAttributes } from "react";
+import { DialogHTMLAttributes } from 'react';
 
-import { ModalPortalProps } from "../../ModalPortal";
-import { VARIANTS } from "../constants";
+import { ModalPortalProps } from '../../ModalPortal';
+import { VARIANTS } from '../constants';
 
-export type VariantsType = typeof VARIANTS[keyof typeof VARIANTS];
+export type VariantsType = (typeof VARIANTS)[keyof typeof VARIANTS];
 
-export interface ModalBaseProps extends DialogHTMLAttributes<HTMLDialogElement>, ModalPortalProps {
+export interface ModalBaseProps
+  extends DialogHTMLAttributes<HTMLDialogElement>,
+    ModalPortalProps {
   variants: VariantsType;
   isOpen: boolean;
   dimmed?: boolean;
diff --git a/src/core/components/Modal/ModalPopUp/ModalPopUp.stories.tsx b/src/core/components/Modal/ModalPopUp/ModalPopUp.stories.tsx
index 376256e..d0d9232 100644
--- a/src/core/components/Modal/ModalPopUp/ModalPopUp.stories.tsx
+++ b/src/core/components/Modal/ModalPopUp/ModalPopUp.stories.tsx
@@ -1,29 +1,29 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import ModalPopUp from "./index";
-import { ModalPopUpProps } from "./types";
+import ModalPopUp from './index';
+import { ModalPopUpProps } from './types';
 
 const meta = {
-  title: "core/Modal/ModalPopUp",
+  title: 'core/Modal/ModalPopUp',
   component: ModalPopUp,
   parameters: {
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
   argTypes: {
     target: {
-      control: "text",
-      defaultValue: "modal",
-      description: "Modal Render Position Element id",
+      control: 'text',
+      defaultValue: 'modal',
+      description: 'Modal Render Position Element id',
     },
     isOpen: {
-      control: "boolean",
+      control: 'boolean',
       defaultValue: false,
-      description: "Open Modal",
+      description: 'Open Modal',
     },
     onClose: {
-      action: "clicked",
-      description: "Modal Close Function",
+      action: 'clicked',
+      description: 'Modal Close Function',
     },
   },
 } satisfies Meta<typeof ModalPopUp>;
@@ -31,50 +31,45 @@ const meta = {
 export default meta;
 
 export const Default = (props: ModalPopUpProps) => {
-  const [ isOpen, setIsOpen ] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const onToggle = () => setIsOpen(v => !v);
+  const onToggle = () => setIsOpen((v) => !v);
 
   return (
     <>
-      <div id = {props.target ?? "modal"} />
+      <div id={props.target ?? 'modal'} />
       <ModalPopUp
-        target = {props.target}
-        isOpen = {props.isOpen || isOpen}
-        className = "flex-v-stack gap-y-5 w-[20rem] h-[20rem] p-4"
+        target={props.target}
+        isOpen={props.isOpen || isOpen}
+        className='flex-v-stack h-[20rem] w-[20rem] gap-y-5 p-4'
       >
-        <button className = "ml-auto" onClick = {onToggle}>
+        <button className='ml-auto' onClick={onToggle}>
           닫기
         </button>
         ModalPopUp
       </ModalPopUp>
-      <button onClick = {onToggle}>
-        ModalPopUp Open!!
-      </button>
+      <button onClick={onToggle}>ModalPopUp Open!!</button>
     </>
   );
 };
 
 export const ModalPopUpUseBlur = (props: ModalPopUpProps) => {
-  const [ isOpen, setIsOpen ] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const onToggle = () => setIsOpen(v => !v);
+  const onToggle = () => setIsOpen((v) => !v);
 
   return (
     <>
-      <div id = {props.target ?? "foo"} />
+      <div id={props.target ?? 'foo'} />
       <ModalPopUp
-        target = {props.target ?? "foo"}
-        isOpen = {props.isOpen || isOpen}
-        onClose = {onToggle}
-        className = "w-[20rem] h-[20rem] p-4"
+        target={props.target ?? 'foo'}
+        isOpen={props.isOpen || isOpen}
+        onClose={onToggle}
+        className='h-[20rem] w-[20rem] p-4'
       >
         ModalPopUp
       </ModalPopUp>
-      <button onClick = {onToggle}>
-        ModalPopUp Open!!
-      </button>
+      <button onClick={onToggle}>ModalPopUp Open!!</button>
     </>
   );
 };
-
diff --git a/src/core/components/Modal/ModalPopUp/index.tsx b/src/core/components/Modal/ModalPopUp/index.tsx
index 0a91c23..5d524db 100644
--- a/src/core/components/Modal/ModalPopUp/index.tsx
+++ b/src/core/components/Modal/ModalPopUp/index.tsx
@@ -1,13 +1,14 @@
-import clsx from "clsx";
-import { PropsWithChildren, forwardRef } from "react";
+import clsx from 'clsx';
+import { PropsWithChildren, forwardRef } from 'react';
 
-import { useBlockScrollingEffect } from "@/hooks/effects/useBlockScrollingEffect";
-import Section from "../../Section";
-import ModalBase from "../ModalBase";
-import { VARIANTS } from "../ModalBase/constants";
-import { ModalPopUpProps } from "./types";
+import { useBlockScrollingEffect } from '@/hooks/effects/useBlockScrollingEffect';
+import Section from '../../Section';
+import ModalBase from '../ModalBase';
+import { VARIANTS } from '../ModalBase/constants';
+import { ModalPopUpProps } from './types';
 
-const ModalPopUp = forwardRef((
+const ModalPopUp = forwardRef(
+  (
     {
       isOpen,
       children,
@@ -18,29 +19,30 @@ const ModalPopUp = forwardRef((
     }: PropsWithChildren<ModalPopUpProps>,
     ref: React.Ref<HTMLDialogElement>,
   ) => {
-  const { target, className, ...rest } = props;
+    const { target, className, ...rest } = props;
 
-  useBlockScrollingEffect(isOpen);
+    useBlockScrollingEffect(isOpen);
 
-  return (
-    <ModalBase
-      target = {target ?? "modal"}
-      ref = {ref}
-      variants = {VARIANTS["MODAL"]}
-      isOpen = {isOpen}
-      {...rest}
-    >
-      <Section
-        element = "div"
-        className = {clsx("animate-popup", className)}
-        rounded = {rounded}
-        hasRounded = {hasRounded}
-        hasShadow = {hasShadow}
+    return (
+      <ModalBase
+        target={target ?? 'modal'}
+        ref={ref}
+        variants={VARIANTS['MODAL']}
+        isOpen={isOpen}
+        {...rest}
       >
-        {children}
-      </Section>
-    </ModalBase>
-  );
-});
+        <Section
+          element='div'
+          className={clsx('animate-popup', className)}
+          rounded={rounded}
+          hasRounded={hasRounded}
+          hasShadow={hasShadow}
+        >
+          {children}
+        </Section>
+      </ModalBase>
+    );
+  },
+);
 
 export default ModalPopUp;
diff --git a/src/core/components/Modal/ModalPopUp/types/index.ts b/src/core/components/Modal/ModalPopUp/types/index.ts
index 9d88bf5..041fe79 100644
--- a/src/core/components/Modal/ModalPopUp/types/index.ts
+++ b/src/core/components/Modal/ModalPopUp/types/index.ts
@@ -1,6 +1,9 @@
-import { HTMLAttributes } from "react";
+import { HTMLAttributes } from 'react';
 
-import { SectionProps } from "@/core/components/Section/types";
-import { ModalBaseProps } from "../../ModalBase/types";
+import { SectionProps } from '@/core/components/Section/types';
+import { ModalBaseProps } from '../../ModalBase/types';
 
-export interface ModalPopUpProps extends Pick<SectionProps<"section">, "hasRounded" | "hasShadow" | "rounded">, Pick<ModalBaseProps, "target" | "isOpen" | "onClose">, HTMLAttributes<HTMLElement> {}
+export interface ModalPopUpProps
+  extends Pick<SectionProps<'section'>, 'hasRounded' | 'hasShadow' | 'rounded'>,
+    Pick<ModalBaseProps, 'target' | 'isOpen' | 'onClose'>,
+    HTMLAttributes<HTMLElement> {}
diff --git a/src/core/components/Modal/ModalPortal/index.tsx b/src/core/components/Modal/ModalPortal/index.tsx
index 988985e..e45dd91 100644
--- a/src/core/components/Modal/ModalPortal/index.tsx
+++ b/src/core/components/Modal/ModalPortal/index.tsx
@@ -1,17 +1,19 @@
-import { PropsWithChildren } from "react";
-import { createPortal } from "react-dom";
+import { PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
 
 export interface ModalPortalProps {
   target?: string;
 }
 
 const ModalPortal = ({
-  target = "modal",
+  target = 'modal',
   children,
 }: PropsWithChildren<ModalPortalProps>) => {
   const container = document.getElementById(target) as HTMLElement;
 
-  return container ? createPortal(children, container) as React.ReactPortal : null;
+  return container
+    ? (createPortal(children, container) as React.ReactPortal)
+    : null;
 };
 
 export default ModalPortal;
diff --git a/src/core/components/Radio/Radio.stories.tsx b/src/core/components/Radio/Radio.stories.tsx
index 2d9a41b..ed2b2db 100644
--- a/src/core/components/Radio/Radio.stories.tsx
+++ b/src/core/components/Radio/Radio.stories.tsx
@@ -1,23 +1,21 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import Radio from "./index";
-import { RadioProps } from "./types";
+import Radio from './index';
+import { RadioProps } from './types';
 
 const meta = {
-  title: "core/Radio",
+  title: 'core/Radio',
   component: Radio,
   argTypes: {
     label: {
-      control: "text",
-      description: "Radio Label",
+      control: 'text',
+      description: 'Radio Label',
     },
     svgSize: {
-      control: "select",
-      options: [
-        "24", "32",
-      ],
-      defaultValue: "24",
-      description: "Radio Icon Size",
+      control: 'select',
+      options: ['24', '32'],
+      defaultValue: '24',
+      description: 'Radio Icon Size',
     },
   },
 } satisfies Meta<typeof Radio>;
@@ -27,4 +25,3 @@ export default meta;
 export const Default = (props: RadioProps) => {
   return <Radio {...props} />;
 };
-
diff --git a/src/core/components/Radio/index.tsx b/src/core/components/Radio/index.tsx
index 7543b18..fd87369 100644
--- a/src/core/components/Radio/index.tsx
+++ b/src/core/components/Radio/index.tsx
@@ -1,31 +1,45 @@
-import { RadioButton } from "@phosphor-icons/react";
-import clsx from "clsx";
-import { forwardRef, useId } from "react";
+import { RadioButton } from '@phosphor-icons/react';
+import clsx from 'clsx';
+import { forwardRef, useId } from 'react';
 
-import Typography from "../Typography";
-import { SVG_SIZE } from "./constants";
-import { RadioProps } from "./types";
+import Typography from '../Typography';
+import { SVG_SIZE } from './constants';
+import { RadioProps } from './types';
 
-const Radio = forwardRef((
-    {
-      label,
-      svgSize = SVG_SIZE["SIZE_24"],
-      className,
-      ...props
-    }: RadioProps,
-    ref: React.ComponentPropsWithRef<"input">["ref"],
+const Radio = forwardRef(
+  (
+    { label, svgSize = SVG_SIZE['SIZE_24'], className, ...props }: RadioProps,
+    ref: React.ComponentPropsWithRef<'input'>['ref'],
   ) => {
-  const id = useId();
+    const id = useId();
 
-  return (
-    <label htmlFor = {id} className = {clsx("cursor-pointer", label && "flex items-center gap-x-2", className)}>
-      <input ref = {ref} id = {id} type = "radio" className = "peer hidden" {...props}/>
-      <div className = {"[&>svg>path]:fill-[#C6CEDE] peer-checked:[&>svg>path]:fill-primary-03"}>
-        <RadioButton size = {svgSize} weight = "fill"/>
-      </div>
-      {label && <Typography text = {label} />}
-    </label>
-  );
-});
+    return (
+      <label
+        htmlFor={id}
+        className={clsx(
+          'cursor-pointer',
+          label && 'flex items-center gap-x-2',
+          className,
+        )}
+      >
+        <input
+          ref={ref}
+          id={id}
+          type='radio'
+          className='peer hidden'
+          {...props}
+        />
+        <div
+          className={
+            '[&>svg>path]:fill-[#C6CEDE] peer-checked:[&>svg>path]:fill-primary-03'
+          }
+        >
+          <RadioButton size={svgSize} weight='fill' />
+        </div>
+        {label && <Typography text={label} />}
+      </label>
+    );
+  },
+);
 
 export default Radio;
diff --git a/src/core/components/Radio/types/index.ts b/src/core/components/Radio/types/index.ts
index 57a0498..17b986d 100644
--- a/src/core/components/Radio/types/index.ts
+++ b/src/core/components/Radio/types/index.ts
@@ -1,8 +1,9 @@
-import { SVG_SIZE } from "../constants";
+import { SVG_SIZE } from '../constants';
 
-export type SvgSizeType = typeof SVG_SIZE[keyof typeof SVG_SIZE];
+export type SvgSizeType = (typeof SVG_SIZE)[keyof typeof SVG_SIZE];
 
-export interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface RadioProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   svgSize?: SvgSizeType;
 }
diff --git a/src/core/components/Section/Section.stories.tsx b/src/core/components/Section/Section.stories.tsx
index 181ecc2..31be8d4 100644
--- a/src/core/components/Section/Section.stories.tsx
+++ b/src/core/components/Section/Section.stories.tsx
@@ -1,40 +1,40 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import Section from "./index";
-import { SectionProps } from "./types";
+import Section from './index';
+import { SectionProps } from './types';
 
 const meta = {
-  title: "core/Section",
+  title: 'core/Section',
   component: Section,
   parameters: {
     backgrounds: {
-      default: "dark",
+      default: 'dark',
     },
   },
   argTypes: {
     hasRounded: {
-      control: "boolean",
+      control: 'boolean',
       defaultValue: true,
-      description: "Controls whether the component has a rounded",
+      description: 'Controls whether the component has a rounded',
     },
     hasBorder: {
-      control: "boolean",
+      control: 'boolean',
       defaultValue: false,
-      description: "Controls whether the component has a border",
+      description: 'Controls whether the component has a border',
     },
     hasShadow: {
-      control: "boolean",
+      control: 'boolean',
       defaultValue: false,
-      description: "Controls whether the component has a Box Shadow",
+      description: 'Controls whether the component has a Box Shadow',
     },
   },
 } satisfies Meta<typeof Section>;
 
 export default meta;
 
-export const Default = (props: SectionProps<"section">) => {
+export const Default = (props: SectionProps<'section'>) => {
   return (
-    <Section className = "w-[400px] h-[300px]" {...props}>
+    <Section className='h-[300px] w-[400px]' {...props}>
       section
     </Section>
   );
diff --git a/src/core/components/Section/constants/index.ts b/src/core/components/Section/constants/index.ts
index ae80508..bff3935 100644
--- a/src/core/components/Section/constants/index.ts
+++ b/src/core/components/Section/constants/index.ts
@@ -1,17 +1,17 @@
-import { RoundedType } from "../types";
+import { RoundedType } from '../types';
 
 export const ROUNDED = {
-  ROUNDED_FULL: "rounded-full",
-  ROUNDED_20: "rounded-20",
-  ROUNDED_12: "rounded-12",
-  ROUNDED_6: "rounded-6",
-  ROUNDED_2: "rounded-2",
+  ROUNDED_FULL: 'rounded-full',
+  ROUNDED_20: 'rounded-20',
+  ROUNDED_12: 'rounded-12',
+  ROUNDED_6: 'rounded-6',
+  ROUNDED_2: 'rounded-2',
 } as const;
 
 export const SECTION_ROUNDED: Record<RoundedType, string> = {
-  [ROUNDED["ROUNDED_FULL"]]: "rounded-full",
-  [ROUNDED["ROUNDED_20"]]: "rounded-[1.25rem]",
-  [ROUNDED["ROUNDED_12"]]: "rounded-xl",
-  [ROUNDED["ROUNDED_6"]]: "rounded-md",
-  [ROUNDED["ROUNDED_2"]]: "rounded-sm",
+  [ROUNDED['ROUNDED_FULL']]: 'rounded-full',
+  [ROUNDED['ROUNDED_20']]: 'rounded-[1.25rem]',
+  [ROUNDED['ROUNDED_12']]: 'rounded-xl',
+  [ROUNDED['ROUNDED_6']]: 'rounded-md',
+  [ROUNDED['ROUNDED_2']]: 'rounded-sm',
 };
diff --git a/src/core/components/Section/index.tsx b/src/core/components/Section/index.tsx
index bfe1b45..71ab51b 100644
--- a/src/core/components/Section/index.tsx
+++ b/src/core/components/Section/index.tsx
@@ -1,44 +1,43 @@
-import clsx from "clsx";
-import React, { PropsWithChildren, forwardRef } from "react";
+import clsx from 'clsx';
+import React, { PropsWithChildren, forwardRef } from 'react';
 
-import { ROUNDED, SECTION_ROUNDED } from "./constants";
-import { SectionProps } from "./types";
+import { ROUNDED, SECTION_ROUNDED } from './constants';
+import { SectionProps } from './types';
 
 const Section = forwardRef(
   <T extends React.ElementType>(
     {
       children,
-      rounded = ROUNDED["ROUNDED_20"],
+      rounded = ROUNDED['ROUNDED_20'],
       hasRounded = true,
       hasBorder = false,
       hasShadow = false,
       element: Element,
       ...props
     }: PropsWithChildren<SectionProps<T>>,
-    ref: React.ComponentPropsWithRef<T>["ref"],
+    ref: React.ComponentPropsWithRef<T>['ref'],
   ) => {
-  const { className, ...rest } = props;
-  const Component: React.ElementType = Element || "section";
+    const { className, ...rest } = props;
+    const Component: React.ElementType = Element || 'section';
 
-  return (
-    <Component
-      ref = {ref}
-      className = {
-        clsx(
-          "bg-white",
+    return (
+      <Component
+        ref={ref}
+        className={clsx(
+          'bg-white',
           hasRounded && SECTION_ROUNDED[rounded],
-          hasBorder && "border border-gray-02",
-          hasShadow && "shadow-section",
+          hasBorder && 'border border-gray-02',
+          hasShadow && 'shadow-section',
           className,
-        )
-      }
-      {...rest}
-    >
-      {children}
-    </Component>
-  );
-});
+        )}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
 
-Section.displayName = "Section";
+Section.displayName = 'Section';
 
 export default Section;
diff --git a/src/core/components/Section/types/index.ts b/src/core/components/Section/types/index.ts
index f55072d..1acc4d2 100644
--- a/src/core/components/Section/types/index.ts
+++ b/src/core/components/Section/types/index.ts
@@ -1,6 +1,7 @@
-import { ROUNDED } from "../constants";
+import { ROUNDED } from '../constants';
 
-export interface SectionProps<T extends React.ElementType> extends React.HTMLAttributes<HTMLElement> {
+export interface SectionProps<T extends React.ElementType>
+  extends React.HTMLAttributes<HTMLElement> {
   rounded?: RoundedType;
   hasRounded?: boolean;
   hasBorder?: boolean;
@@ -8,4 +9,4 @@ export interface SectionProps<T extends React.ElementType> extends React.HTMLAtt
   element?: T;
 }
 
-export type RoundedType = typeof ROUNDED[keyof typeof ROUNDED];
+export type RoundedType = (typeof ROUNDED)[keyof typeof ROUNDED];
diff --git a/src/core/components/Tab/GeneralTab/GeneralTab/GeneralTab.stories.tsx b/src/core/components/Tab/GeneralTab/GeneralTab/GeneralTab.stories.tsx
index 94e7fd3..a0ab8d4 100644
--- a/src/core/components/Tab/GeneralTab/GeneralTab/GeneralTab.stories.tsx
+++ b/src/core/components/Tab/GeneralTab/GeneralTab/GeneralTab.stories.tsx
@@ -1,14 +1,14 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import GeneralTab from "./index";
+import GeneralTab from './index';
 
 const meta = {
-  title: "core/Tab/GeneralTab/GeneralTab",
+  title: 'core/Tab/GeneralTab/GeneralTab',
   component: GeneralTab,
   parameters: {
     backgrounds: {
-      default: "dark",
+      default: 'dark',
     },
   },
   argTypes: {},
@@ -17,19 +17,19 @@ const meta = {
 export default meta;
 
 export const Default = () => {
-  const [ currentValue, setCurrentValue ] = useState("realName");
+  const [currentValue, setCurrentValue] = useState('realName');
   const data = [
-    { key: "realName", label: "실제 반명" },
-    { key: "packageName", label: "포장 반명" },
+    { key: 'realName', label: '실제 반명' },
+    { key: 'packageName', label: '포장 반명' },
   ];
 
-  const items = data.map(item => (
+  const items = data.map((item) => (
     <GeneralTab.Item
-      label = {item.label}
-      name = {"className"}
-      checked = {item.key === currentValue}
-      value = {item.key}
-      onChange = {(e: React.ChangeEvent<HTMLInputElement>) => {
+      label={item.label}
+      name={'className'}
+      checked={item.key === currentValue}
+      value={item.key}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
         const { value } = e.target;
 
         setCurrentValue(value);
@@ -38,8 +38,8 @@ export const Default = () => {
   ));
 
   return (
-    <div className = "w-[30rem]">
-      <GeneralTab items = {items}/>
+    <div className='w-[30rem]'>
+      <GeneralTab items={items} />
     </div>
   );
 };
diff --git a/src/core/components/Tab/GeneralTab/GeneralTab/index.tsx b/src/core/components/Tab/GeneralTab/GeneralTab/index.tsx
index d57639f..7f6709a 100644
--- a/src/core/components/Tab/GeneralTab/GeneralTab/index.tsx
+++ b/src/core/components/Tab/GeneralTab/GeneralTab/index.tsx
@@ -1,31 +1,29 @@
-import clsx from "clsx";
-import React, { forwardRef } from "react";
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
 
-import GeneralTabItem from "../GeneralTabItem";
-import { GeneralTabProps, ReturnType } from "./types";
+import GeneralTabItem from '../GeneralTabItem';
+import { GeneralTabProps, ReturnType } from './types';
 
-const GeneralTab = forwardRef((
-    {
-      items,
-      ...props
-    }: Omit<GeneralTabProps, "ref">,
+const GeneralTab = forwardRef(
+  (
+    { items, ...props }: Omit<GeneralTabProps, 'ref'>,
     ref: React.Ref<HTMLUListElement>,
   ) => {
-  const { className, ...rest } = props;
+    const { className, ...rest } = props;
 
-  return (
-    <ul
-      ref = {ref}
-      className = {clsx("flex p-2.5 rounded-[1.25rem] bg-gray-01", className)}
-      {...rest}
-    >
-      {items}
-    </ul>
-  );
-}) as unknown as ReturnType;
+    return (
+      <ul
+        ref={ref}
+        className={clsx('flex rounded-[1.25rem] bg-gray-01 p-2.5', className)}
+        {...rest}
+      >
+        {items}
+      </ul>
+    );
+  },
+) as unknown as ReturnType;
 
-GeneralTab.displayName = "GeneralTab";
+GeneralTab.displayName = 'GeneralTab';
 GeneralTab.Item = GeneralTabItem;
 
 export default GeneralTab;
-
diff --git a/src/core/components/Tab/GeneralTab/GeneralTab/types/index.ts b/src/core/components/Tab/GeneralTab/GeneralTab/types/index.ts
index bf699e0..b08f5a1 100644
--- a/src/core/components/Tab/GeneralTab/GeneralTab/types/index.ts
+++ b/src/core/components/Tab/GeneralTab/GeneralTab/types/index.ts
@@ -1,7 +1,8 @@
-import GeneralTabItem from "../../GeneralTabItem";
+import GeneralTabItem from '../../GeneralTabItem';
 
-export interface GeneralTabProps extends React.HTMLAttributes<HTMLUListElement> {
-  items: React.ReactNode[]
+export interface GeneralTabProps
+  extends React.HTMLAttributes<HTMLUListElement> {
+  items: React.ReactNode[];
 }
 
 type GeneralTabComponent = (props: GeneralTabProps) => React.ReactElement;
diff --git a/src/core/components/Tab/GeneralTab/GeneralTabItem/GeneralTabItem.stories.tsx b/src/core/components/Tab/GeneralTab/GeneralTabItem/GeneralTabItem.stories.tsx
index de846da..590d99e 100644
--- a/src/core/components/Tab/GeneralTab/GeneralTabItem/GeneralTabItem.stories.tsx
+++ b/src/core/components/Tab/GeneralTab/GeneralTabItem/GeneralTabItem.stories.tsx
@@ -1,20 +1,20 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import GeneralTabItem from "./index";
-import { GeneralTabItemProps } from "./types";
+import GeneralTabItem from './index';
+import { GeneralTabItemProps } from './types';
 
 const meta = {
-  title: "core/Tab/GeneralTab/GeneralTabItem",
+  title: 'core/Tab/GeneralTab/GeneralTabItem',
   component: GeneralTabItem,
   parameters: {
     backgrounds: {
-      default: "dark",
+      default: 'dark',
     },
   },
   argTypes: {
     label: {
-      control: "text",
-      description: "Tab Label",
+      control: 'text',
+      description: 'Tab Label',
     },
   },
 } satisfies Meta<typeof GeneralTabItem>;
@@ -26,7 +26,7 @@ export const Default = (props: GeneralTabItemProps) => {
 
   return (
     <ul>
-      <GeneralTabItem label = {label ?? "실제 반명"} {...rest} />
+      <GeneralTabItem label={label ?? '실제 반명'} {...rest} />
     </ul>
   );
 };
diff --git a/src/core/components/Tab/GeneralTab/GeneralTabItem/index.tsx b/src/core/components/Tab/GeneralTab/GeneralTabItem/index.tsx
index 3a2d023..5c8a9eb 100644
--- a/src/core/components/Tab/GeneralTab/GeneralTabItem/index.tsx
+++ b/src/core/components/Tab/GeneralTab/GeneralTabItem/index.tsx
@@ -1,44 +1,48 @@
-import { forwardRef, useId } from "react";
-import clsx from "clsx";
+import { forwardRef, useId } from 'react';
+import clsx from 'clsx';
 
-import { Typography } from "@/index";
-import { GeneralTabItemProps } from "./types";
+import { Typography } from '@/index';
+import { GeneralTabItemProps } from './types';
 
-const GeneralTabItem = forwardRef((
+const GeneralTabItem = forwardRef(
+  (
     {
       label,
-      theme = "subhead-01-bold",
+      theme = 'subhead-01-bold',
       className,
       ...props
-    }: Omit<GeneralTabItemProps, "ref">,
+    }: Omit<GeneralTabItemProps, 'ref'>,
     ref: React.Ref<HTMLInputElement>,
   ) => {
-  const id = useId();
+    const id = useId();
 
-  return (
-    <li className = "flex-1">
-      <label htmlFor = {id}>
-        <input
-          ref = {ref}
-          id = {id}
-          type = "radio"
-          className = {"hidden peer"}
-          {...props}
-        />
-        <Typography
-          className = {clsx("block w-full rounded-[1rem] p-2.5 text-center bg-transparent cursor-pointer peer-checked:bg-white peer-checked:text-black peer-disabled:cursor-not-allowed", className)}
-          theme = {theme}
-          color = "gray-05"
-          text = {label}
-        >
-          {label}
-        </Typography>
-      </label>
-    </li>
-  );
-});
+    return (
+      <li className='flex-1'>
+        <label htmlFor={id}>
+          <input
+            ref={ref}
+            id={id}
+            type='radio'
+            className={'peer hidden'}
+            {...props}
+          />
+          <Typography
+            className={clsx(
+              'block w-full cursor-pointer rounded-[1rem] bg-transparent p-2.5 text-center peer-checked:bg-white peer-checked:text-black peer-disabled:cursor-not-allowed',
+              className,
+            )}
+            theme={theme}
+            color='gray-05'
+            text={label}
+          >
+            {label}
+          </Typography>
+        </label>
+      </li>
+    );
+  },
+);
 
 export default GeneralTabItem;
 
-GeneralTabItem.displayName = "GeneralTabItem";
-
+GeneralTabItem.displayName = 'GeneralTabItem';
diff --git a/src/core/components/Tab/GeneralTab/GeneralTabItem/types/index.ts b/src/core/components/Tab/GeneralTab/GeneralTabItem/types/index.ts
index d89b82f..e4fc210 100644
--- a/src/core/components/Tab/GeneralTab/GeneralTabItem/types/index.ts
+++ b/src/core/components/Tab/GeneralTab/GeneralTabItem/types/index.ts
@@ -1,6 +1,7 @@
-import { ThemeTypography } from "@/types";
+import { ThemeTypography } from '@/types';
 
-export interface GeneralTabItemProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface GeneralTabItemProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string;
   theme?: ThemeTypography;
 }
diff --git a/src/core/components/Tab/TableTab/TableTab/TableTab.stories.tsx b/src/core/components/Tab/TableTab/TableTab/TableTab.stories.tsx
index 9d20742..189dd56 100644
--- a/src/core/components/Tab/TableTab/TableTab/TableTab.stories.tsx
+++ b/src/core/components/Tab/TableTab/TableTab/TableTab.stories.tsx
@@ -1,10 +1,10 @@
-import { Meta } from "@storybook/react";
-import { useState } from "react";
+import { Meta } from '@storybook/react';
+import { useState } from 'react';
 
-import TableTab from "./index";
+import TableTab from './index';
 
 const meta = {
-  title: "core/Tab/TableTab/TableTab",
+  title: 'core/Tab/TableTab/TableTab',
   component: TableTab,
   argTypes: {},
 } satisfies Meta<typeof TableTab>;
@@ -12,19 +12,19 @@ const meta = {
 export default meta;
 
 export const Default = () => {
-  const [ currentValue, setCurrentValue ] = useState("dish");
+  const [currentValue, setCurrentValue] = useState('dish');
   const data = [
-    { key: "dish", label: "식기" },
-    { key: "snack", label: "간식기" },
+    { key: 'dish', label: '식기' },
+    { key: 'snack', label: '간식기' },
   ];
 
-  const items = data.map(item => (
+  const items = data.map((item) => (
     <TableTab.Item
-      label = {item.label}
-      name = {"plate"}
-      checked = {item.key === currentValue}
-      value = {item.key}
-      onChange = {(e: React.ChangeEvent<HTMLInputElement>) => {
+      label={item.label}
+      name={'plate'}
+      checked={item.key === currentValue}
+      value={item.key}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
         const { value } = e.target;
 
         setCurrentValue(value);
@@ -33,8 +33,8 @@ export const Default = () => {
   ));
 
   return (
-    <div className = "w-[60rem]">
-      <TableTab items = {items}/>
+    <div className='w-[60rem]'>
+      <TableTab items={items} />
     </div>
   );
 };
diff --git a/src/core/components/Tab/TableTab/TableTab/index.tsx b/src/core/components/Tab/TableTab/TableTab/index.tsx
index de91222..637b939 100644
--- a/src/core/components/Tab/TableTab/TableTab/index.tsx
+++ b/src/core/components/Tab/TableTab/TableTab/index.tsx
@@ -1,30 +1,29 @@
-import clsx from "clsx";
-import React, { forwardRef } from "react";
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
 
-import TableTabItem from "../TableTabItem";
-import { ReturnType, TableTabProps } from "./types";
+import TableTabItem from '../TableTabItem';
+import { ReturnType, TableTabProps } from './types';
 
-const TableTab = forwardRef((
-    {
-      items,
-      ...props
-    }: Omit<TableTabProps, "ref">,
+const TableTab = forwardRef(
+  (
+    { items, ...props }: Omit<TableTabProps, 'ref'>,
     ref: React.Ref<HTMLUListElement>,
   ) => {
-  const { className, ...rest } = props;
+    const { className, ...rest } = props;
 
-  return (
-    <ul
-      ref = {ref}
-      className = {clsx("flex border-b border-gray-01", className)}
-      {...rest}
-    >
-      {items}
-    </ul>
-  );
-}) as unknown as ReturnType;
+    return (
+      <ul
+        ref={ref}
+        className={clsx('flex border-b border-gray-01', className)}
+        {...rest}
+      >
+        {items}
+      </ul>
+    );
+  },
+) as unknown as ReturnType;
 
 export default TableTab;
 
 TableTab.Item = TableTabItem;
-TableTab.displayName = "TableTab";
+TableTab.displayName = 'TableTab';
diff --git a/src/core/components/Tab/TableTab/TableTab/types/index.ts b/src/core/components/Tab/TableTab/TableTab/types/index.ts
index c5cf6eb..00d1eb4 100644
--- a/src/core/components/Tab/TableTab/TableTab/types/index.ts
+++ b/src/core/components/Tab/TableTab/TableTab/types/index.ts
@@ -1,7 +1,7 @@
-import TableTabItem from "../../TableTabItem";
+import TableTabItem from '../../TableTabItem';
 
 export interface TableTabProps extends React.HTMLAttributes<HTMLUListElement> {
-  items: React.ReactNode[]
+  items: React.ReactNode[];
 }
 
 type TableTabComponent = (props: TableTabProps) => React.ReactElement;
diff --git a/src/core/components/Tab/TableTab/TableTabItem/TableTabItem.stories.tsx b/src/core/components/Tab/TableTab/TableTabItem/TableTabItem.stories.tsx
index d7f0ce1..581a920 100644
--- a/src/core/components/Tab/TableTab/TableTabItem/TableTabItem.stories.tsx
+++ b/src/core/components/Tab/TableTab/TableTabItem/TableTabItem.stories.tsx
@@ -1,15 +1,15 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import TableTabItem from "./index";
-import { TableTabItemProps } from "./types";
+import TableTabItem from './index';
+import { TableTabItemProps } from './types';
 
 const meta = {
-  title: "core/Tab/TableTab/TableTabItem",
+  title: 'core/Tab/TableTab/TableTabItem',
   component: TableTabItem,
   argTypes: {
     label: {
-      control: "text",
-      description: "Tab Label",
+      control: 'text',
+      description: 'Tab Label',
     },
   },
 } satisfies Meta<typeof TableTabItem>;
@@ -21,7 +21,7 @@ export const Default = (props: TableTabItemProps) => {
 
   return (
     <ul>
-      <TableTabItem label = {label ?? "식기"} {...rest} />
+      <TableTabItem label={label ?? '식기'} {...rest} />
     </ul>
   );
 };
diff --git a/src/core/components/Tab/TableTab/TableTabItem/index.tsx b/src/core/components/Tab/TableTab/TableTabItem/index.tsx
index 0c4eed0..8fba0a1 100644
--- a/src/core/components/Tab/TableTab/TableTabItem/index.tsx
+++ b/src/core/components/Tab/TableTab/TableTabItem/index.tsx
@@ -1,38 +1,37 @@
-import { forwardRef, useId } from "react";
+import { forwardRef, useId } from 'react';
 
-import { Typography } from "@/index";
-import { TableTabItemProps } from "./types";
+import { Typography } from '@/index';
+import { TableTabItemProps } from './types';
 
-const TableTabItem = forwardRef((
-    {
-      label,
-      ...props
-    }: Omit<TableTabItemProps, "ref">,
+const TableTabItem = forwardRef(
+  (
+    { label, ...props }: Omit<TableTabItemProps, 'ref'>,
     ref: React.Ref<HTMLInputElement>,
   ) => {
-  const id = useId();
+    const id = useId();
 
-  return (
-    <li className = "flex-1">
-      <label className = "flex" htmlFor = {id}>
-        <input
-          ref = {ref}
-          id = {id}
-          type = "radio"
-          className = {"hidden peer"}
-          {...props}
-        />
-        <Typography
-          className = "flex-1 pb-3 text-center bg-transparent cursor-pointer border-b-2 border-transparent mb-[-0.0625rem] peer-checked:border-b-black peer-checked:text-black"
-          theme = "subhead-02-bold"
-          color = "gray-05"
-          text = {label}
-        />
-      </label>
-    </li>
-  );
-});
+    return (
+      <li className='flex-1'>
+        <label className='flex' htmlFor={id}>
+          <input
+            ref={ref}
+            id={id}
+            type='radio'
+            className={'peer hidden'}
+            {...props}
+          />
+          <Typography
+            className='mb-[-0.0625rem] flex-1 cursor-pointer border-b-2 border-transparent bg-transparent pb-3 text-center peer-checked:border-b-black peer-checked:text-black'
+            theme='subhead-02-bold'
+            color='gray-05'
+            text={label}
+          />
+        </label>
+      </li>
+    );
+  },
+);
 
-TableTabItem.displayName = "TableTabItem";
+TableTabItem.displayName = 'TableTabItem';
 
 export default TableTabItem;
diff --git a/src/core/components/Tab/TableTab/TableTabItem/types/index.ts b/src/core/components/Tab/TableTab/TableTabItem/types/index.ts
index 9b8e242..9af80f0 100644
--- a/src/core/components/Tab/TableTab/TableTabItem/types/index.ts
+++ b/src/core/components/Tab/TableTab/TableTabItem/types/index.ts
@@ -1,3 +1,4 @@
-export interface TableTabItemProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface TableTabItemProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string;
 }
diff --git a/src/core/components/Table/Table.stories.tsx b/src/core/components/Table/Table.stories.tsx
index 8de1c26..864e128 100644
--- a/src/core/components/Table/Table.stories.tsx
+++ b/src/core/components/Table/Table.stories.tsx
@@ -1,25 +1,25 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import { TableContainerProps } from "./types";
-import TableContainer from "./TableContainer";
-import Table from "./Table";
-import TableHead from "./TableHead";
-import TableBody from "./TableBody";
-import TableRow from "./TableRow";
-import TableCell from "./TableCell";
+import { TableContainerProps } from './types';
+import TableContainer from './TableContainer';
+import Table from './Table';
+import TableHead from './TableHead';
+import TableBody from './TableBody';
+import TableRow from './TableRow';
+import TableCell from './TableCell';
 
 const meta = {
-  title: "core/Table",
+  title: 'core/Table',
   component: TableContainer,
   argTypes: {
     children: {
-      control: "object",
+      control: 'object',
     },
     theme: {
-      control: "radio",
-      options: [ "white", "gray" ],
-      defaultValue: "white",
-      description: "Table Color Theme",
+      control: 'radio',
+      options: ['white', 'gray'],
+      defaultValue: 'white',
+      description: 'Table Color Theme',
     },
   },
 } satisfies Meta<typeof TableContainer>;
@@ -33,69 +33,74 @@ export interface RowsProps {
 
 const columns = [
   {
-    key: "id",
-    text: "No",
+    key: 'id',
+    text: 'No',
   },
   {
-    key: "registerDate",
-    text: "주문 일자",
+    key: 'registerDate',
+    text: '주문 일자',
   },
   {
-    key: "startDate",
-    text: "시작 일자",
+    key: 'startDate',
+    text: '시작 일자',
   },
   {
-    key: "room",
-    text: "반",
+    key: 'room',
+    text: '반',
   },
   {
-    key: "package",
-    text: "상품",
+    key: 'package',
+    text: '상품',
   },
 ];
 
 const rows: RowsProps[] = [
   {
     id: 1,
-    registerDate: "2023-11-19",
-    startDate: "2023-12-01",
-    room: "꽃님반",
-    package: "식기 + 수저",
+    registerDate: '2023-11-19',
+    startDate: '2023-12-01',
+    room: '꽃님반',
+    package: '식기 + 수저',
   },
   {
     id: 2,
-    registerDate: "2023-11-19",
-    startDate:
-  <div>
-    <div className = "text-rose-400">월 구독</div>
-    2023.10.22 (월)
-  </div>,
-    room: "꽃님반",
-    package: "식기 + 수저",
+    registerDate: '2023-11-19',
+    startDate: (
+      <div>
+        <div className='text-rose-400'>월 구독</div>
+        2023.10.22 (월)
+      </div>
+    ),
+    room: '꽃님반',
+    package: '식기 + 수저',
   },
 ];
 
-const columnsKeys = columns.map(column => column.key);
+const columnsKeys = columns.map((column) => column.key);
 
 export const WhiteTable = (props: TableContainerProps) => {
   return (
-    <TableContainer theme = {props.theme ?? "white"}>
+    <TableContainer theme={props.theme ?? 'white'}>
       <Table>
         <TableHead>
           <TableRow>
-            {columns.map(column =>
-              <TableCell key = {column.key} element = "th">{column.text}</TableCell>,
-            )}
+            {columns.map((column) => (
+              <TableCell key={column.key} element='th'>
+                {column.text}
+              </TableCell>
+            ))}
           </TableRow>
         </TableHead>
         <TableBody>
-          {rows.map(row =>
-            <TableRow key = {row.id}>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
               {columnsKeys.map((key, index) => (
-                <TableCell key = {index} element = "td">{row[key]}</TableCell>
+                <TableCell key={index} element='td'>
+                  {row[key]}
+                </TableCell>
               ))}
-            </TableRow>,
-          )}
+            </TableRow>
+          ))}
         </TableBody>
       </Table>
     </TableContainer>
@@ -104,23 +109,27 @@ export const WhiteTable = (props: TableContainerProps) => {
 
 export const GrayTable = (props: TableContainerProps) => {
   return (
-    <TableContainer theme = {props.theme ?? "gray"}>
+    <TableContainer theme={props.theme ?? 'gray'}>
       <Table>
         <TableHead>
           <TableRow>
-            {columns.map(column =>
-              <TableCell key = {column.key} element = "th">{column.text}</TableCell>,
-            )}
+            {columns.map((column) => (
+              <TableCell key={column.key} element='th'>
+                {column.text}
+              </TableCell>
+            ))}
           </TableRow>
         </TableHead>
         <TableBody>
-          {rows.map(row =>
-            <TableRow key = {row.id}>
-              {columnsKeys.map(key => (
-                <TableCell key = {key} element = "td">{row[key]}</TableCell>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
+              {columnsKeys.map((key) => (
+                <TableCell key={key} element='td'>
+                  {row[key]}
+                </TableCell>
               ))}
-            </TableRow>,
-        )}
+            </TableRow>
+          ))}
         </TableBody>
       </Table>
     </TableContainer>
diff --git a/src/core/components/Table/Table.tsx b/src/core/components/Table/Table.tsx
index e26d1be..a9198e6 100644
--- a/src/core/components/Table/Table.tsx
+++ b/src/core/components/Table/Table.tsx
@@ -1,23 +1,21 @@
-import clsx from "clsx";
-import React, { PropsWithChildren, Ref, forwardRef } from "react";
+import clsx from 'clsx';
+import React, { PropsWithChildren, Ref, forwardRef } from 'react';
 
-const Table = forwardRef((
-  {
-    children,
-    className,
-    ...props
-  }: PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>,
-  ref: Ref<HTMLTableElement>,
-) => {
-  return (
-    <table
-      ref = {ref}
-      className = {clsx("w-full text-sm", className)}
-      {...props}
-    >
-      {children}
-    </table>
-  );
-});
+const Table = forwardRef(
+  (
+    {
+      children,
+      className,
+      ...props
+    }: PropsWithChildren<React.HTMLAttributes<HTMLTableElement>>,
+    ref: Ref<HTMLTableElement>,
+  ) => {
+    return (
+      <table ref={ref} className={clsx('w-full text-sm', className)} {...props}>
+        {children}
+      </table>
+    );
+  },
+);
 
 export default Table;
diff --git a/src/core/components/Table/TableBody.tsx b/src/core/components/Table/TableBody.tsx
index 80ad4dd..30e6dd3 100644
--- a/src/core/components/Table/TableBody.tsx
+++ b/src/core/components/Table/TableBody.tsx
@@ -1,22 +1,20 @@
-import React, { PropsWithChildren, Ref, forwardRef } from "react";
+import React, { PropsWithChildren, Ref, forwardRef } from 'react';
 
-const TableBody = forwardRef((
-  {
-    children,
-    className,
-    ...props
-  }: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>,
-  ref: Ref<HTMLTableSectionElement>,
-) => {
-  return (
-    <tbody
-      ref = {ref}
-      className = {className}
-      {...props}
-    >
-      {children}
-    </tbody>
-  );
-});
+const TableBody = forwardRef(
+  (
+    {
+      children,
+      className,
+      ...props
+    }: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>,
+    ref: Ref<HTMLTableSectionElement>,
+  ) => {
+    return (
+      <tbody ref={ref} className={className} {...props}>
+        {children}
+      </tbody>
+    );
+  },
+);
 
 export default TableBody;
diff --git a/src/core/components/Table/TableCell.tsx b/src/core/components/Table/TableCell.tsx
index db758ef..4cb2b99 100644
--- a/src/core/components/Table/TableCell.tsx
+++ b/src/core/components/Table/TableCell.tsx
@@ -1,15 +1,16 @@
-import clsx from "clsx";
-import React, { PropsWithChildren, useContext } from "react";
+import clsx from 'clsx';
+import React, { PropsWithChildren, useContext } from 'react';
 
-import { TableThemeContext } from "./TableContainer";
-import { TABLE_CELL_THEME } from "./constants";
-import { TableCellProps, TableCellType } from "./types";
+import { TableThemeContext } from './TableContainer';
+import { TABLE_CELL_THEME } from './constants';
+import { TableCellProps, TableCellType } from './types';
 
-const TableCell = <T extends TableCellType = "td">({
+const TableCell = <T extends TableCellType = 'td'>({
   children,
   element: Element,
   ...props
-}: PropsWithChildren<TableCellProps<T>> & React.ComponentPropsWithoutRef<T>) => {
+}: PropsWithChildren<TableCellProps<T>> &
+  React.ComponentPropsWithoutRef<T>) => {
   const { theme } = useContext(TableThemeContext);
   const { className, ...rest } = props;
   const Component: React.ElementType = Element;
@@ -17,13 +18,7 @@ const TableCell = <T extends TableCellType = "td">({
 
   return (
     <>
-      <Component
-        className = {clsx(
-          componentStyle,
-          className,
-        )}
-        {...rest}
-      >
+      <Component className={clsx(componentStyle, className)} {...rest}>
         {children}
       </Component>
     </>
diff --git a/src/core/components/Table/TableContainer.tsx b/src/core/components/Table/TableContainer.tsx
index 6975ac3..194e4c6 100644
--- a/src/core/components/Table/TableContainer.tsx
+++ b/src/core/components/Table/TableContainer.tsx
@@ -1,32 +1,26 @@
-import clsx from "clsx";
-import { createContext, forwardRef, Ref } from "react";
+import clsx from 'clsx';
+import { createContext, forwardRef, Ref } from 'react';
 
-import { THEME } from "./constants";
-import { TableContainerProps, ThemeType } from "./types";
+import { THEME } from './constants';
+import { TableContainerProps, ThemeType } from './types';
 
-export const TableThemeContext = createContext<{ theme: ThemeType }>({ theme: THEME.WHITE });
-
-const TableContainer = forwardRef((
-  {
-    children,
-    theme = "white",
-    className,
-  }: TableContainerProps,
-  ref: Ref<HTMLDivElement>,
-) => {
-  return (
-    <TableThemeContext.Provider value = {{ theme }}>
-      <div
-        ref = {ref}
-        className = {clsx(
-          "w-full overflow-x-auto",
-          className,
-        )}
-      >
-        {children}
-      </div>
-    </TableThemeContext.Provider>
-  );
+export const TableThemeContext = createContext<{ theme: ThemeType }>({
+  theme: THEME.WHITE,
 });
 
+const TableContainer = forwardRef(
+  (
+    { children, theme = 'white', className }: TableContainerProps,
+    ref: Ref<HTMLDivElement>,
+  ) => {
+    return (
+      <TableThemeContext.Provider value={{ theme }}>
+        <div ref={ref} className={clsx('w-full overflow-x-auto', className)}>
+          {children}
+        </div>
+      </TableThemeContext.Provider>
+    );
+  },
+);
+
 export default TableContainer;
diff --git a/src/core/components/Table/TableHead.tsx b/src/core/components/Table/TableHead.tsx
index 9fbf090..3ca4951 100644
--- a/src/core/components/Table/TableHead.tsx
+++ b/src/core/components/Table/TableHead.tsx
@@ -1,22 +1,20 @@
-import React, { PropsWithChildren, Ref, forwardRef } from "react";
+import React, { PropsWithChildren, Ref, forwardRef } from 'react';
 
-const TableHead = forwardRef((
-  {
-    children,
-    className,
-    ...props
-  }: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>,
-  ref: Ref<HTMLTableSectionElement>,
-) => {
-  return (
-    <thead
-      ref = {ref}
-      className = {className}
-      {...props}
-    >
-      {children}
-    </thead>
-  );
-});
+const TableHead = forwardRef(
+  (
+    {
+      children,
+      className,
+      ...props
+    }: PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>,
+    ref: Ref<HTMLTableSectionElement>,
+  ) => {
+    return (
+      <thead ref={ref} className={className} {...props}>
+        {children}
+      </thead>
+    );
+  },
+);
 
 export default TableHead;
diff --git a/src/core/components/Table/TableRow.tsx b/src/core/components/Table/TableRow.tsx
index ec60ed3..5e7334c 100644
--- a/src/core/components/Table/TableRow.tsx
+++ b/src/core/components/Table/TableRow.tsx
@@ -1,30 +1,25 @@
-import clsx from "clsx";
-import React, { PropsWithChildren, Ref, forwardRef, useContext } from "react";
+import clsx from 'clsx';
+import React, { PropsWithChildren, Ref, forwardRef, useContext } from 'react';
 
-import { TableThemeContext } from "./TableContainer";
-import { TR_THEME } from "./constants";
+import { TableThemeContext } from './TableContainer';
+import { TR_THEME } from './constants';
 
-const TableRow = forwardRef((
-  {
-    children,
-    className,
-    ...props
-  }: PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>,
-  ref: Ref<HTMLTableRowElement>,
-) => {
-  const { theme } = useContext(TableThemeContext);
-  return (
-    <tr
-      ref = {ref}
-      className = {clsx(
-        TR_THEME[theme],
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </tr>
-  );
-});
+const TableRow = forwardRef(
+  (
+    {
+      children,
+      className,
+      ...props
+    }: PropsWithChildren<React.HTMLAttributes<HTMLTableRowElement>>,
+    ref: Ref<HTMLTableRowElement>,
+  ) => {
+    const { theme } = useContext(TableThemeContext);
+    return (
+      <tr ref={ref} className={clsx(TR_THEME[theme], className)} {...props}>
+        {children}
+      </tr>
+    );
+  },
+);
 
 export default TableRow;
diff --git a/src/core/components/Table/constants/index.ts b/src/core/components/Table/constants/index.ts
index 89cef7b..abf5840 100644
--- a/src/core/components/Table/constants/index.ts
+++ b/src/core/components/Table/constants/index.ts
@@ -1,23 +1,26 @@
-import { TableCellType, ThemeType } from "../types";
+import { TableCellType, ThemeType } from '../types';
 
 export const THEME = {
-  WHITE: "white",
-  GRAY: "gray",
+  WHITE: 'white',
+  GRAY: 'gray',
 } as const;
 
 export const TABLE_CELL = {
-  TH: "th",
-  TD: "td",
+  TH: 'th',
+  TD: 'td',
 } as const;
 
 export const TR_THEME: Record<ThemeType, string> = {
-  [THEME.WHITE]: "hover:bg-white",
-  [THEME.GRAY]: "hover:bg-gray-01",
+  [THEME.WHITE]: 'hover:bg-white',
+  [THEME.GRAY]: 'hover:bg-gray-01',
 } as const;
 
-export const COMMON_CELL_STYLE = "py-4 px-6 font-normal";
+export const COMMON_CELL_STYLE = 'py-4 px-6 font-normal';
 
-export const TABLE_CELL_THEME: Record<ThemeType, Record<TableCellType, string>> = {
+export const TABLE_CELL_THEME: Record<
+  ThemeType,
+  Record<TableCellType, string>
+> = {
   [THEME.WHITE]: {
     [TABLE_CELL.TH]: `${COMMON_CELL_STYLE} bg-white text-gray-07`,
     [TABLE_CELL.TD]: `${COMMON_CELL_STYLE} text-gray-07`,
diff --git a/src/core/components/Table/types/index.ts b/src/core/components/Table/types/index.ts
index c44803c..a28ceed 100644
--- a/src/core/components/Table/types/index.ts
+++ b/src/core/components/Table/types/index.ts
@@ -1,13 +1,14 @@
-import { TABLE_CELL, THEME } from "../constants";
+import { TABLE_CELL, THEME } from '../constants';
 
-export type ThemeType = typeof THEME[keyof typeof THEME];
-export type TableCellType = typeof TABLE_CELL[keyof typeof TABLE_CELL];
+export type ThemeType = (typeof THEME)[keyof typeof THEME];
+export type TableCellType = (typeof TABLE_CELL)[keyof typeof TABLE_CELL];
 
-export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface TableContainerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   theme?: ThemeType;
 }
 
-export interface TableCellProps<T extends TableCellType = "td">{
+export interface TableCellProps<T extends TableCellType = 'td'> {
   element: T;
 }
diff --git a/src/core/components/TextEditor/TextEditor.stories.tsx b/src/core/components/TextEditor/TextEditor.stories.tsx
index c31c801..08ad6b9 100644
--- a/src/core/components/TextEditor/TextEditor.stories.tsx
+++ b/src/core/components/TextEditor/TextEditor.stories.tsx
@@ -1,16 +1,16 @@
-import { Meta } from "@storybook/react";
-import React from "react";
+import { Meta } from '@storybook/react';
+import React from 'react';
 
-import TextEditor from "@/core/components/TextEditor/index";
+import TextEditor from '@/core/components/TextEditor/index';
 
 const meta = {
-  title: "core/TextEditor",
+  title: 'core/TextEditor',
   component: TextEditor,
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {
     value: {
-      control: "select",
-      options: [ "Small", "Large" ],
+      control: 'select',
+      options: ['Small', 'Large'],
     },
   },
 } satisfies Meta<typeof TextEditor>;
@@ -18,25 +18,19 @@ const meta = {
 export default meta;
 
 export const SmallTextEditor = () => {
-  const [ value, setValue ] = React.useState("");
-  return(
-    <div className = {"w-[500px] h-[200px]"}>
-      <TextEditor
-        value = {value}
-        onChange = {setValue}
-      />
+  const [value, setValue] = React.useState('');
+  return (
+    <div className={'h-[200px] w-[500px]'}>
+      <TextEditor value={value} onChange={setValue} />
     </div>
   );
 };
 
 export const LargeTextEditor = () => {
-  const [ value, setValue ] = React.useState("");
-  return(
-    <div className = {"w-[500px] h-[500px]"}>
-      <TextEditor
-        value = {value}
-        onChange = {setValue}
-      />
+  const [value, setValue] = React.useState('');
+  return (
+    <div className={'h-[500px] w-[500px]'}>
+      <TextEditor value={value} onChange={setValue} />
     </div>
   );
 };
diff --git a/src/core/components/TextEditor/index.tsx b/src/core/components/TextEditor/index.tsx
index c805791..6e196b1 100644
--- a/src/core/components/TextEditor/index.tsx
+++ b/src/core/components/TextEditor/index.tsx
@@ -1,32 +1,34 @@
-import React, { Suspense } from "react";
-import "react-quill/dist/quill.snow.css";
-const ReactQuill = React.lazy(() => import("react-quill"));
+import React, { Suspense } from 'react';
+import 'react-quill/dist/quill.snow.css';
+const ReactQuill = React.lazy(() => import('react-quill'));
 
 interface TextEditorProps {
   value: string;
   onChange: (value: string) => void;
 }
 
-export default function TextEditor({
-  value,
-  onChange,
-}: TextEditorProps) {
+export default function TextEditor({ value, onChange }: TextEditorProps) {
   return (
-    <Suspense fallback = {<></>}>
+    <Suspense fallback={<></>}>
       <ReactQuill
-      theme = "snow"
-      value = {value}
-      onChange = {onChange}
-      className = {"w-full h-full"}
-      modules = {{
-        toolbar: [
-          [{ "header": [ 1, 2, false ] }],
-          [ "bold", "italic", "underline", "strike" ],
-          [ { "list": "ordered" }, { "list": "bullet" }, { "indent": "-1" }, { "indent": "+1" } ],
-          ["link"],
-        ],
-      }}
-    />
+        theme='snow'
+        value={value}
+        onChange={onChange}
+        className={'h-full w-full'}
+        modules={{
+          toolbar: [
+            [{ header: [1, 2, false] }],
+            ['bold', 'italic', 'underline', 'strike'],
+            [
+              { list: 'ordered' },
+              { list: 'bullet' },
+              { indent: '-1' },
+              { indent: '+1' },
+            ],
+            ['link'],
+          ],
+        }}
+      />
     </Suspense>
   );
 }
diff --git a/src/core/components/Toggle/Toggle.stories.tsx b/src/core/components/Toggle/Toggle.stories.tsx
index bd653ff..4ecb56d 100644
--- a/src/core/components/Toggle/Toggle.stories.tsx
+++ b/src/core/components/Toggle/Toggle.stories.tsx
@@ -1,34 +1,34 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import Toggle from "../Toggle/index";
-import { SIZE } from "./constants";
-import { ToggleProps } from "./types";
+import Toggle from '../Toggle/index';
+import { SIZE } from './constants';
+import { ToggleProps } from './types';
 
 const meta = {
-    title: "core/Toggle",
-    component: Toggle,
-    argTypes: {
-      label: {
-          control: "text",
-          description: "Toggle Label",
-        },
-        className: {
-          control: "text",
-          description: "Toggle ClassName",
-        },
-        checked: {
-          control: "boolean",
-          description: "Toggle Checked",
-        },
-        reverse: {
-          control: "boolean",
-          description: "Toggle Reverse",
-        },
-        disabled: {
-          control: "boolean",
-          description: "Toggle Disabled",
-        },
+  title: 'core/Toggle',
+  component: Toggle,
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Toggle Label',
     },
+    className: {
+      control: 'text',
+      description: 'Toggle ClassName',
+    },
+    checked: {
+      control: 'boolean',
+      description: 'Toggle Checked',
+    },
+    reverse: {
+      control: 'boolean',
+      description: 'Toggle Reverse',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Toggle Disabled',
+    },
+  },
 } satisfies Meta<typeof Toggle>;
 
 export default meta;
@@ -36,5 +36,7 @@ export default meta;
 export const Default = (props: ToggleProps) => {
   const { label, size, ...rest } = props;
 
-  return <Toggle size = {size || SIZE["SMALL"]} label = {label || "토글"} {...rest}/>;
+  return (
+    <Toggle size={size || SIZE['SMALL']} label={label || '토글'} {...rest} />
+  );
 };
diff --git a/src/core/components/Toggle/constants/index.ts b/src/core/components/Toggle/constants/index.ts
index 5d74d8e..6d0087d 100644
--- a/src/core/components/Toggle/constants/index.ts
+++ b/src/core/components/Toggle/constants/index.ts
@@ -1,20 +1,22 @@
-import { SizeType } from "../types";
+import { SizeType } from '../types';
 
 export const SIZE = {
-  SMALL: "small",
-  MEDIUM: "medium",
-  LARGE: "large",
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
 } as const;
 
 export const TOGGLE_CIRCLE_SIZE = {
-  [SIZE.SMALL]: "w-[1.25rem] h-[1.25rem]",
-  [SIZE.MEDIUM]: "w-[1.5rem] h-[1.5rem]",
-  [SIZE.LARGE]: "w-[1.75rem] h-[1.75rem]",
+  [SIZE.SMALL]: 'w-[1.25rem] h-[1.25rem]',
+  [SIZE.MEDIUM]: 'w-[1.5rem] h-[1.5rem]',
+  [SIZE.LARGE]: 'w-[1.75rem] h-[1.75rem]',
 };
 
 export const TOGGLE_SIZE: Record<SizeType, string> = {
-  [SIZE.SMALL]: "w-[2.5rem] h-[1.5rem] peer-checked:[&>.circle]:translate-x-[calc(2.5rem-1.25rem)]",
-  [SIZE.MEDIUM]: "w-[3rem] h-[1.75rem] peer-checked:[&>.circle]:translate-x-[calc(3rem-1.5rem)]",
-  [SIZE.LARGE]: "w-[3.5rem] h-[2rem] peer-checked:[&>.circle]:translate-x-[calc(3.5rem-1.75rem)]",
+  [SIZE.SMALL]:
+    'w-[2.5rem] h-[1.5rem] peer-checked:[&>.circle]:translate-x-[calc(2.5rem-1.25rem)]',
+  [SIZE.MEDIUM]:
+    'w-[3rem] h-[1.75rem] peer-checked:[&>.circle]:translate-x-[calc(3rem-1.5rem)]',
+  [SIZE.LARGE]:
+    'w-[3.5rem] h-[2rem] peer-checked:[&>.circle]:translate-x-[calc(3.5rem-1.75rem)]',
 };
-
diff --git a/src/core/components/Toggle/index.tsx b/src/core/components/Toggle/index.tsx
index cbde41b..722c0bb 100644
--- a/src/core/components/Toggle/index.tsx
+++ b/src/core/components/Toggle/index.tsx
@@ -1,9 +1,9 @@
-import clsx from "clsx";
-import { useId } from "react";
+import clsx from 'clsx';
+import { useId } from 'react';
 
-import FormLabel from "../FormLabel";
-import { TOGGLE_CIRCLE_SIZE, TOGGLE_SIZE } from "./constants";
-import { ToggleProps } from "./types";
+import FormLabel from '../FormLabel';
+import { TOGGLE_CIRCLE_SIZE, TOGGLE_SIZE } from './constants';
+import { ToggleProps } from './types';
 
 const Toggle = ({
   size,
@@ -21,31 +21,38 @@ const Toggle = ({
 
   return (
     <label
-      htmlFor = {id}
-      className = {clsx(
-        "flex items-center gap-x-1 cursor-pointer",
-        reverse && "flex-row-reverse",
+      htmlFor={id}
+      className={clsx(
+        'flex cursor-pointer items-center gap-x-1',
+        reverse && 'flex-row-reverse',
         className,
       )}
     >
-      {label && <FormLabel labelTheme = {labelTheme} label = {label} labelColor = {labelColor} required = {required} />}
+      {label && (
+        <FormLabel
+          labelTheme={labelTheme}
+          label={label}
+          labelColor={labelColor}
+          required={required}
+        />
+      )}
       <input
-        id = {id}
-        type = 'checkbox'
-        className = 'peer hidden'
-        checked = {checked}
-        onChange = {onChange}
-        disabled = {disabled}
+        id={id}
+        type='checkbox'
+        className='peer hidden'
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
       />
       <div
-        className = {clsx(
-          "relative rounded-full bg-gray-03 transition-all peer-disabled:bg-gray-09 peer-checked:bg-primary-03 peer-checked:[&>.circle]:-left-[0.125rem] peer-disabled:cursor-not-allowed",
+        className={clsx(
+          'relative rounded-full bg-gray-03 transition-all peer-checked:bg-primary-03 peer-disabled:cursor-not-allowed peer-disabled:bg-gray-09 peer-checked:[&>.circle]:-left-[0.125rem]',
           TOGGLE_SIZE[size],
-        )
-      }>
+        )}
+      >
         <div
-          className = {clsx(
-            "circle absolute left-[0.125rem] top-1/2 -translate-y-1/2 translate-x-0 transform rounded-full border border-solid border-gray-03 bg-white transition-all",
+          className={clsx(
+            'circle absolute left-[0.125rem] top-1/2 -translate-y-1/2 translate-x-0 transform rounded-full border border-solid border-gray-03 bg-white transition-all',
             TOGGLE_CIRCLE_SIZE[size],
           )}
         />
@@ -55,4 +62,3 @@ const Toggle = ({
 };
 
 export default Toggle;
-
diff --git a/src/core/components/Toggle/types/index.ts b/src/core/components/Toggle/types/index.ts
index ae91731..dbceb5a 100644
--- a/src/core/components/Toggle/types/index.ts
+++ b/src/core/components/Toggle/types/index.ts
@@ -1,14 +1,15 @@
-import { FormLabelProps } from "../../FormLabel/types";
-import { SIZE } from "../constants";
+import { FormLabelProps } from '../../FormLabel/types';
+import { SIZE } from '../constants';
 
 export interface ToggleProps
   extends Pick<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    "onChange" | "className" | "checked" | "disabled"
-  >, Omit<FormLabelProps, "label" | "labelSubText"> {
+      React.InputHTMLAttributes<HTMLInputElement>,
+      'onChange' | 'className' | 'checked' | 'disabled'
+    >,
+    Omit<FormLabelProps, 'label' | 'labelSubText'> {
   size: SizeType;
   label?: string;
   reverse?: boolean;
 }
 
-export type SizeType = typeof SIZE[keyof typeof SIZE];
+export type SizeType = (typeof SIZE)[keyof typeof SIZE];
diff --git a/src/core/components/Tooltip/Tooltip.stories.tsx b/src/core/components/Tooltip/Tooltip.stories.tsx
index c54c20a..676ab3e 100644
--- a/src/core/components/Tooltip/Tooltip.stories.tsx
+++ b/src/core/components/Tooltip/Tooltip.stories.tsx
@@ -1,123 +1,123 @@
-import { Meta } from "@storybook/react";
+import { Meta } from '@storybook/react';
 
-import Tooltip from "../Tooltip/index";
+import Tooltip from '../Tooltip/index';
 
 const meta = {
-    title: "core/Tooltip",
-    component: Tooltip,
-    tags: ["autodocs"],
-    argTypes: {
-        tooltipContentText: {
-            control: "text",
-            description: "Tooltip Content Text",
-        },
-        placement: {
-            control: "select",
-            options: [ "top", "bottom", "left", "right" ],
-            defaultValue: "left",
-            description: "Tooltip Placement Position",
-        },
-        children: {
-            control: "text",
-            description: "Tooltip Children",
-        },
+  title: 'core/Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+  argTypes: {
+    tooltipContentText: {
+      control: 'text',
+      description: 'Tooltip Content Text',
     },
+    placement: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      defaultValue: 'left',
+      description: 'Tooltip Placement Position',
+    },
+    children: {
+      control: 'text',
+      description: 'Tooltip Children',
+    },
+  },
 } satisfies Meta<typeof Tooltip>;
 
 export default meta;
 
-export const LeftTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "left",
-        children: <div>Tooltip Children</div>,
-    },
+export const LeftTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'left',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const LeftStartTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "left-start",
-        children: <div>Tooltip Children</div>,
-    },
+export const LeftStartTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'left-start',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const LeftEndTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "left-end",
-        children: <div>Tooltip Children</div>,
-    },
+export const LeftEndTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'left-end',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const RightTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "right",
-        children: <div>Tooltip Children</div>,
-    },
+export const RightTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'right',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const RightStartTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "right-start",
-        children: <div>Tooltip Children</div>,
-    },
+export const RightStartTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'right-start',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const RightEndTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "right-end",
-        children: <div>Tooltip Children</div>,
-    },
+export const RightEndTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'right-end',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const TopTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "top",
-        children: <div>Tooltip Children</div>,
-    },
+export const TopTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'top',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const TopStartTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "top-start",
-        children: <div>Tooltip Children</div>,
-    },
+export const TopStartTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'top-start',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const TopEndTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "top-end",
-        children: <div>Tooltip Children</div>,
-    },
+export const TopEndTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'top-end',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const BottomTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "bottom",
-        children: <div>Tooltip Children</div>,
-    },
+export const BottomTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'bottom',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const BottomStartTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "bottom-start",
-        children: <div>Tooltip Children</div>,
-    },
+export const BottomStartTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'bottom-start',
+    children: <div>Tooltip Children</div>,
+  },
 };
 
-export const BottomEndTooltip= {
-    args: {
-        tooltipContentText: "Tooltip Content",
-        placement: "bottom-end",
-        children: <div>Tooltip Children</div>,
-    },
+export const BottomEndTooltip = {
+  args: {
+    tooltipContentText: 'Tooltip Content',
+    placement: 'bottom-end',
+    children: <div>Tooltip Children</div>,
+  },
 };
diff --git a/src/core/components/Tooltip/index.tsx b/src/core/components/Tooltip/index.tsx
index 73e6509..1b22b75 100644
--- a/src/core/components/Tooltip/index.tsx
+++ b/src/core/components/Tooltip/index.tsx
@@ -1,5 +1,5 @@
-import { PropsWithChildren, useId } from "react";
-import { PlacesType, Tooltip as ReactToolTip } from "react-tooltip";
+import { PropsWithChildren, useId } from 'react';
+import { PlacesType, Tooltip as ReactToolTip } from 'react-tooltip';
 
 interface TooltipProps {
   tooltipContentText: string;
@@ -8,22 +8,18 @@ interface TooltipProps {
 }
 export default function Tooltip({
   tooltipContentText,
-  placement = "top",
-  className = "!bg-primary-03 !rounded-lg",
+  placement = 'top',
+  className = '!bg-primary-03 !rounded-lg',
   children,
 }: PropsWithChildren<TooltipProps>) {
   const id = useId();
 
   return (
     <>
-      <a data-tooltip-id = {id} data-tooltip-content = {tooltipContentText}>
+      <a data-tooltip-id={id} data-tooltip-content={tooltipContentText}>
         {children}
       </a>
-      <ReactToolTip
-        id = {id}
-        place = {placement}
-        className = {className}
-      />
+      <ReactToolTip id={id} place={placement} className={className} />
     </>
   );
 }
diff --git a/src/core/components/Typography/Typography.stories.tsx b/src/core/components/Typography/Typography.stories.tsx
index b4e3cb2..20ebaac 100644
--- a/src/core/components/Typography/Typography.stories.tsx
+++ b/src/core/components/Typography/Typography.stories.tsx
@@ -1,33 +1,33 @@
-import { ColorOptions } from "@/constants/color";
-import { TypographyOptions } from "@/constants/typography";
-import { Meta } from "@storybook/react";
-import Typography from "./index";
-import { TypographyProps } from "./types";
+import { ColorOptions } from '@/constants/color';
+import { TypographyOptions } from '@/constants/typography';
+import { Meta } from '@storybook/react';
+import Typography from './index';
+import { TypographyProps } from './types';
 
 const meta = {
-  title: "core/Typography",
+  title: 'core/Typography',
   component: Typography,
   argTypes: {
     element: {
-      control: "text",
-      defaultValue: "span",
-      description: "HTML Tag",
+      control: 'text',
+      defaultValue: 'span',
+      description: 'HTML Tag',
     },
     text: {
-      control: "text",
-      description: "Typography Text",
+      control: 'text',
+      description: 'Typography Text',
     },
     theme: {
-      control: "select",
+      control: 'select',
       options: TypographyOptions,
-      defaultValue: "body-01-regular",
-      description: "Typography Theme",
+      defaultValue: 'body-01-regular',
+      description: 'Typography Theme',
     },
     color: {
-      control: "select",
+      control: 'select',
       options: ColorOptions,
-      defaultValue: "gray-08",
-      description: "Typography Color",
+      defaultValue: 'gray-08',
+      description: 'Typography Color',
     },
   },
 } satisfies Meta<typeof Typography>;
@@ -37,5 +37,5 @@ export default meta;
 export const Default = (props: TypographyProps<React.ElementType>) => {
   const { text, ...rest } = props;
 
-  return <Typography text = {text ?? "텍스트"} {...rest} />;
+  return <Typography text={text ?? '텍스트'} {...rest} />;
 };
diff --git a/src/core/components/Typography/index.tsx b/src/core/components/Typography/index.tsx
index f998ed6..4c0a18d 100644
--- a/src/core/components/Typography/index.tsx
+++ b/src/core/components/Typography/index.tsx
@@ -1,23 +1,26 @@
-import clsx from "clsx";
-import React from "react";
+import clsx from 'clsx';
+import React from 'react';
 
-import { THEME_COLOR } from "@/constants/color";
-import { THEME_TYPOGRAPHY } from "@/constants/typography";
-import { ThemeColors, ThemeTypography } from "@/types";
-import { TypographyProps } from "./types";
+import { THEME_COLOR } from '@/constants/color';
+import { THEME_TYPOGRAPHY } from '@/constants/typography';
+import { ThemeColors, ThemeTypography } from '@/types';
+import { TypographyProps } from './types';
 
-const Typography = <T extends React.ElementType = "span">({
-  theme = THEME_TYPOGRAPHY["BODY_01_REGULAR"] as ThemeTypography,
-  color = THEME_COLOR["GRAY_08"] as ThemeColors,
+const Typography = <T extends React.ElementType = 'span'>({
+  theme = THEME_TYPOGRAPHY['BODY_01_REGULAR'] as ThemeTypography,
+  color = THEME_COLOR['GRAY_08'] as ThemeColors,
   text,
   element: Element,
   ...props
 }: TypographyProps<T> & React.ComponentPropsWithoutRef<T>) => {
   const { className, ...rest } = props;
-  const Component: React.ElementType = Element || "span";
+  const Component: React.ElementType = Element || 'span';
 
   return (
-    <Component className = {clsx(`text-${theme} text-${color}`, className)} {...rest}>
+    <Component
+      className={clsx(`text-${theme} text-${color}`, className)}
+      {...rest}
+    >
       {text}
     </Component>
   );
diff --git a/src/core/components/Typography/types/index.ts b/src/core/components/Typography/types/index.ts
index 539d606..f1789ba 100644
--- a/src/core/components/Typography/types/index.ts
+++ b/src/core/components/Typography/types/index.ts
@@ -1,6 +1,6 @@
-import { ThemeColors, ThemeTypography } from "@/types";
+import { ThemeColors, ThemeTypography } from '@/types';
 
-export interface TypographyProps<T extends React.ElementType = "span"> {
+export interface TypographyProps<T extends React.ElementType = 'span'> {
   element?: T;
   text: React.ReactNode;
   theme?: ThemeTypography;
diff --git a/src/hooks/effects/useBlockScrollingEffect.ts b/src/hooks/effects/useBlockScrollingEffect.ts
index 4430d51..adb7051 100644
--- a/src/hooks/effects/useBlockScrollingEffect.ts
+++ b/src/hooks/effects/useBlockScrollingEffect.ts
@@ -1,13 +1,13 @@
-import { useEffect } from "react";
+import { useEffect } from 'react';
 
 export const useBlockScrollingEffect = (deps: boolean) => {
   useEffect(() => {
     if (deps) {
-      document.body.classList.add("overflow-hidden");
+      document.body.classList.add('overflow-hidden');
     } else {
-      document.body.classList.remove("overflow-hidden");
+      document.body.classList.remove('overflow-hidden');
     }
 
-    return () => document.body.classList.remove("overflow-hidden");
+    return () => document.body.classList.remove('overflow-hidden');
   }, [deps]);
 };
diff --git a/src/hooks/effects/useClickOutSideEffect.ts b/src/hooks/effects/useClickOutSideEffect.ts
index 842f8e7..766b32a 100644
--- a/src/hooks/effects/useClickOutSideEffect.ts
+++ b/src/hooks/effects/useClickOutSideEffect.ts
@@ -1,6 +1,9 @@
-import { RefObject, useEffect } from "react";
+import { RefObject, useEffect } from 'react';
 
-const useClickOutSideEffect = (ref: RefObject<Element>, onClose?: () => void) => {
+const useClickOutSideEffect = (
+  ref: RefObject<Element>,
+  onClose?: () => void,
+) => {
   useEffect(() => {
     const onClickOutSide = (e: MouseEvent) => {
       if (!ref.current || ref.current.contains(e.target as Node)) return;
@@ -8,9 +11,9 @@ const useClickOutSideEffect = (ref: RefObject<Element>, onClose?: () => void) =>
       onClose?.();
     };
 
-    document.addEventListener("mousedown", onClickOutSide);
+    document.addEventListener('mousedown', onClickOutSide);
 
-    return () => document.removeEventListener("mousedown", onClickOutSide);
+    return () => document.removeEventListener('mousedown', onClickOutSide);
   }, [ref.current]);
 };
 
diff --git a/src/hooks/useClickOutSide.ts b/src/hooks/useClickOutSide.ts
index 5ee5b21..220c1f5 100644
--- a/src/hooks/useClickOutSide.ts
+++ b/src/hooks/useClickOutSide.ts
@@ -1,5 +1,5 @@
-import { useRef } from "react";
-import useClickOutSideEffect from "./effects/useClickOutSideEffect";
+import { useRef } from 'react';
+import useClickOutSideEffect from './effects/useClickOutSideEffect';
 
 const useClickOutside = <T extends Element>(onClose?: () => void) => {
   const contentRef = useRef<T | null>(null);
diff --git a/src/index.ts b/src/index.ts
index 7396fc0..e943110 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,50 +1,49 @@
-export { default as BottomSheet } from "@/core/components/BottomSheet";
-export { default as Button } from "@/core/components/Button/Button";
-export { default as IconButton } from "@/core/components/Button/IconButton";
-export { default as BasicCalendar } from "@/core/components/Calendar/BasicCalendar";
-export { default as DatePickerCalendar } from "@/core/components/Calendar/DatePickerCalendar";
-export { default as ScheduleCalendar } from "@/core/components/Calendar/ScheduleCalendar";
-export { default as Checkbox } from "@/core/components/Checkbox";
-export { default as Divider } from "@/core/components/Divider";
-export { default as Drawer } from "@/core/components/Drawer";
-export { default as DropdownBase } from "@/core/components/Dropdown/DropdownBase";
-export { default as DropdownBaseItem } from "@/core/components/Dropdown/DropdownBase/DropdownItem";
-export { default as DropdownBaseItems } from "@/core/components/Dropdown/DropdownBase/DropdownItems";
-export { default as DropdownBaseTrigger } from "@/core/components/Dropdown/DropdownBase/DropdownTrigger";
-export { default as DropdownFilter } from "@/core/components/Dropdown/DropdownFilter";
-export { default as DropdownFilterItem } from "@/core/components/Dropdown/DropdownFilter/DropdownFilterItem";
-export { default as DropdownFilterItems } from "@/core/components/Dropdown/DropdownFilter/DropdownFilterItems";
-export { default as DropdownFilterTrigger } from "@/core/components/Dropdown/DropdownFilter/DropdownFilterTrigger";
-export { default as DropdownSelect } from "@/core/components/Dropdown/DropdownSelect";
-export { default as DropdownSelectItem } from "@/core/components/Dropdown/DropdownSelect/DropdownSelectItem";
-export { default as DropdownSelectItems } from "@/core/components/Dropdown/DropdownSelect/DropdownSelectItems";
-export { default as DropdownSelectTrigger } from "@/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger";
-export { default as FormLabel } from "@/core/components/FormLabel";
-export { default as InputBase } from "@/core/components/Input/InputBase";
-export { default as InputDatePicker } from "@/core/components/Input/InputDatePicker";
-export { default as InputPassword } from "@/core/components/Input/InputPassword";
-export { default as InputSearch } from "@/core/components/Input/InputSearch";
-export { default as InputSelect } from "@/core/components/Input/InputSelect";
-export { default as InputTextArea } from "@/core/components/Input/InputTextArea";
-export { default as InputTextField } from "@/core/components/Input/InputTextField";
-export { default as Label } from "@/core/components/Label";
-export { default as ModalBase } from "@/core/components/Modal/ModalBase";
-export { default as ModalPopUp } from "@/core/components/Modal/ModalPopUp";
-export { default as ModalPortal } from "@/core/components/Modal/ModalPortal";
-export { default as Radio } from "@/core/components/Radio";
-export { default as Section } from "@/core/components/Section";
-export { default as GeneralTab } from "@/core/components/Tab/GeneralTab/GeneralTab";
-export { default as GeneralTabItem } from "@/core/components/Tab/GeneralTab/GeneralTabItem";
-export { default as TableTab } from "@/core/components/Tab/TableTab/TableTab";
-export { default as TableTabItem } from "@/core/components/Tab/TableTab/TableTabItem";
-export { default as Table } from "@/core/components/Table/Table";
-export { default as TableBody } from "@/core/components/Table/TableBody";
-export { default as TableCell } from "@/core/components/Table/TableCell";
-export { default as TableContainer } from "@/core/components/Table/TableContainer";
-export { default as TableHead } from "@/core/components/Table/TableHead";
-export { default as TableRow } from "@/core/components/Table/TableRow";
-export { default as TextEditor } from "@/core/components/TextEditor";
-export { default as Toggle } from "@/core/components/Toggle";
-export { default as Tooltip } from "@/core/components/Tooltip";
-export { default as Typography } from "@/core/components/Typography";
-
+export { default as BottomSheet } from '@/core/components/BottomSheet';
+export { default as Button } from '@/core/components/Button/Button';
+export { default as IconButton } from '@/core/components/Button/IconButton';
+export { default as BasicCalendar } from '@/core/components/Calendar/BasicCalendar';
+export { default as DatePickerCalendar } from '@/core/components/Calendar/DatePickerCalendar';
+export { default as ScheduleCalendar } from '@/core/components/Calendar/ScheduleCalendar';
+export { default as Checkbox } from '@/core/components/Checkbox';
+export { default as Divider } from '@/core/components/Divider';
+export { default as Drawer } from '@/core/components/Drawer';
+export { default as DropdownBase } from '@/core/components/Dropdown/DropdownBase';
+export { default as DropdownBaseItem } from '@/core/components/Dropdown/DropdownBase/DropdownItem';
+export { default as DropdownBaseItems } from '@/core/components/Dropdown/DropdownBase/DropdownItems';
+export { default as DropdownBaseTrigger } from '@/core/components/Dropdown/DropdownBase/DropdownTrigger';
+export { default as DropdownFilter } from '@/core/components/Dropdown/DropdownFilter';
+export { default as DropdownFilterItem } from '@/core/components/Dropdown/DropdownFilter/DropdownFilterItem';
+export { default as DropdownFilterItems } from '@/core/components/Dropdown/DropdownFilter/DropdownFilterItems';
+export { default as DropdownFilterTrigger } from '@/core/components/Dropdown/DropdownFilter/DropdownFilterTrigger';
+export { default as DropdownSelect } from '@/core/components/Dropdown/DropdownSelect';
+export { default as DropdownSelectItem } from '@/core/components/Dropdown/DropdownSelect/DropdownSelectItem';
+export { default as DropdownSelectItems } from '@/core/components/Dropdown/DropdownSelect/DropdownSelectItems';
+export { default as DropdownSelectTrigger } from '@/core/components/Dropdown/DropdownSelect/DropdownSelectTrigger';
+export { default as FormLabel } from '@/core/components/FormLabel';
+export { default as InputBase } from '@/core/components/Input/InputBase';
+export { default as InputDatePicker } from '@/core/components/Input/InputDatePicker';
+export { default as InputPassword } from '@/core/components/Input/InputPassword';
+export { default as InputSearch } from '@/core/components/Input/InputSearch';
+export { default as InputSelect } from '@/core/components/Input/InputSelect';
+export { default as InputTextArea } from '@/core/components/Input/InputTextArea';
+export { default as InputTextField } from '@/core/components/Input/InputTextField';
+export { default as Label } from '@/core/components/Label';
+export { default as ModalBase } from '@/core/components/Modal/ModalBase';
+export { default as ModalPopUp } from '@/core/components/Modal/ModalPopUp';
+export { default as ModalPortal } from '@/core/components/Modal/ModalPortal';
+export { default as Radio } from '@/core/components/Radio';
+export { default as Section } from '@/core/components/Section';
+export { default as GeneralTab } from '@/core/components/Tab/GeneralTab/GeneralTab';
+export { default as GeneralTabItem } from '@/core/components/Tab/GeneralTab/GeneralTabItem';
+export { default as TableTab } from '@/core/components/Tab/TableTab/TableTab';
+export { default as TableTabItem } from '@/core/components/Tab/TableTab/TableTabItem';
+export { default as Table } from '@/core/components/Table/Table';
+export { default as TableBody } from '@/core/components/Table/TableBody';
+export { default as TableCell } from '@/core/components/Table/TableCell';
+export { default as TableContainer } from '@/core/components/Table/TableContainer';
+export { default as TableHead } from '@/core/components/Table/TableHead';
+export { default as TableRow } from '@/core/components/Table/TableRow';
+export { default as TextEditor } from '@/core/components/TextEditor';
+export { default as Toggle } from '@/core/components/Toggle';
+export { default as Tooltip } from '@/core/components/Tooltip';
+export { default as Typography } from '@/core/components/Typography';
diff --git a/src/styles/bbodek-theme.css b/src/styles/bbodek-theme.css
index 5340138..6460c07 100644
--- a/src/styles/bbodek-theme.css
+++ b/src/styles/bbodek-theme.css
@@ -12,15 +12,15 @@
   }
 
   .bbodek-field {
-    @apply w-full flex-1 text-gray-08 placeholder:text-gray-05 disabled:text-gray-05 read-only:text-gray-05 bg-transparent outline-none;
+    @apply w-full flex-1 bg-transparent text-gray-08 outline-none placeholder:text-gray-05 read-only:text-gray-05 disabled:text-gray-05;
   }
 }
 
 @layer base {
   html {
-    font-family: "Pretendard", system-ui, sans-serif;
+    font-family: 'Pretendard', system-ui, sans-serif;
   }
-  
+
   input[type='number'] {
     margin: 0;
     appearance: textfield;
@@ -34,31 +34,34 @@
 }
 
 @font-face {
-  font-family: "Pretendard";
+  font-family: 'Pretendard';
   font-weight: 400;
   font-display: swap;
-  src: local("Pretendard"),
-        url("./fonts/Pretendard-Regular.woff2") format("woff2"), 
-        url("./fonts/Pretendard-Regular.woff") format("woff"),
-        url("./fonts/Pretendard-Regular.otf") format("opentype"); 
+  src:
+    local('Pretendard'),
+    url('./fonts/Pretendard-Regular.woff2') format('woff2'),
+    url('./fonts/Pretendard-Regular.woff') format('woff'),
+    url('./fonts/Pretendard-Regular.otf') format('opentype');
 }
 
 @font-face {
-  font-family: "Pretendard";
+  font-family: 'Pretendard';
   font-weight: 500;
   font-display: swap;
-  src: local("Pretendard"),
-        url("./fonts/Pretendard-Medium.woff2") format("woff2"), 
-        url("./fonts/Pretendard-Medium.woff") format("woff"),
-        url("./fonts/Pretendard-Medium.otf") format("opentype"); 
+  src:
+    local('Pretendard'),
+    url('./fonts/Pretendard-Medium.woff2') format('woff2'),
+    url('./fonts/Pretendard-Medium.woff') format('woff'),
+    url('./fonts/Pretendard-Medium.otf') format('opentype');
 }
 
 @font-face {
-  font-family: "Pretendard";
+  font-family: 'Pretendard';
   font-weight: 700;
   font-display: swap;
-  src: local("Pretendard"),
-        url("./fonts/Pretendard-Bold.woff2") format("woff2"), 
-        url("./fonts/Pretendard-Bold.woff") format("woff"),
-        url("./fonts/Pretendard-Bold.otf") format("opentype"); 
+  src:
+    local('Pretendard'),
+    url('./fonts/Pretendard-Bold.woff2') format('woff2'),
+    url('./fonts/Pretendard-Bold.woff') format('woff'),
+    url('./fonts/Pretendard-Bold.otf') format('opentype');
 }
diff --git a/src/types/index.ts b/src/types/index.ts
index 4dde144..fc4c666 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,21 +1,51 @@
-import { COLOR_THEME } from "@/constants/theme";
+import { COLOR_THEME } from '@/constants/theme';
 
 export type ThemeColors =
-  "white" | "black" | "gray-09" | "gray-08" |
-  "gray-07" | "gray-06" | "gray-05" |
-  "gray-04" | "gray-03" | "gray-02" |
-  "gray-01" | "gray-00" | "primary-06" |
-  "primary-05" | "primary-04" | "primary-03" |
-  "primary-02" | "primary-01" | "primary-00" |
-  "error" | "warning" | "success" | "transparent";
+  | 'white'
+  | 'black'
+  | 'gray-09'
+  | 'gray-08'
+  | 'gray-07'
+  | 'gray-06'
+  | 'gray-05'
+  | 'gray-04'
+  | 'gray-03'
+  | 'gray-02'
+  | 'gray-01'
+  | 'gray-00'
+  | 'primary-06'
+  | 'primary-05'
+  | 'primary-04'
+  | 'primary-03'
+  | 'primary-02'
+  | 'primary-01'
+  | 'primary-00'
+  | 'error'
+  | 'warning'
+  | 'success'
+  | 'transparent';
 
 export type ThemeTypography =
-"head-01-regular" | "head-01-medium" | "head-01-bold" |
-"head-02-regular" | "head-02-medium" | "head-02-bold" |
-"subhead-01-regular" | "subhead-01-medium" | "subhead-01-bold" |
-"subhead-02-regular" | "subhead-02-medium" | "subhead-02-bold" |
-"body-01-regular" | "body-01-medium" | "body-01-bold" |
-"body-02-regular" | "body-02-medium" | "body-02-bold" |
-"body-03-regular" | "body-03-medium" | "body-03-bold";
+  | 'head-01-regular'
+  | 'head-01-medium'
+  | 'head-01-bold'
+  | 'head-02-regular'
+  | 'head-02-medium'
+  | 'head-02-bold'
+  | 'subhead-01-regular'
+  | 'subhead-01-medium'
+  | 'subhead-01-bold'
+  | 'subhead-02-regular'
+  | 'subhead-02-medium'
+  | 'subhead-02-bold'
+  | 'body-01-regular'
+  | 'body-01-medium'
+  | 'body-01-bold'
+  | 'body-02-regular'
+  | 'body-02-medium'
+  | 'body-02-bold'
+  | 'body-03-regular'
+  | 'body-03-medium'
+  | 'body-03-bold';
 
-export type ColorThemeType = typeof COLOR_THEME[keyof typeof COLOR_THEME];
+export type ColorThemeType = (typeof COLOR_THEME)[keyof typeof COLOR_THEME];
diff --git a/src/utilities/utils.ts b/src/utilities/utils.ts
index b9101c7..c0f2caf 100644
--- a/src/utilities/utils.ts
+++ b/src/utilities/utils.ts
@@ -1,5 +1,5 @@
-import { ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export const cn = (...classNames: ClassValue[]) => {
   return twMerge(clsx(...classNames));
diff --git a/vite.config.ts b/vite.config.ts
index 9e11760..15c20d2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,22 +1,19 @@
-import react from "@vitejs/plugin-react";
-import path from "path";
-import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig({
-  plugins: [
-    react(),
-    tsconfigPaths(),
-  ],
+  plugins: [react(), tsconfigPaths()],
   build: {
     lib: {
-      entry: path.resolve(__dirname, "./src/index.ts"),
-      name: "bbodek-ui",
-      formats: [ "cjs", "es" ],
-      fileName: format => `bbodek-ui.${format}.js`,
+      entry: path.resolve(__dirname, './src/index.ts'),
+      name: 'bbodek-ui',
+      formats: ['cjs', 'es'],
+      fileName: (format) => `bbodek-ui.${format}.js`,
     },
     rollupOptions: {
-      external: [ "react", "react-dom" ],
+      external: ['react', 'react-dom'],
     },
   },
 });
diff --git a/yarn.lock b/yarn.lock
index 6505bf4..d569160 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1499,6 +1499,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@pkgr/core@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
+  integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
+
 "@radix-ui/number@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.1.tgz#644161a3557f46ed38a042acf4a770e826021674"
@@ -4601,6 +4606,11 @@ eslint-compat-utils@^0.1.2:
   resolved "https://registry.yarnpkg.com/eslint-compat-utils/-/eslint-compat-utils-0.1.2.tgz#f45e3b5ced4c746c127cf724fb074cd4e730d653"
   integrity sha512-Jia4JDldWnFNIru1Ehx1H5s9/yxiRHY/TimCuUc0jNexew3cF1gI6CYZil1ociakfWO3rRqFjl1mskBblB3RYg==
 
+eslint-config-prettier@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
+
 eslint-config-standard-with-typescript@39.1.1:
   version "39.1.1"
   resolved "https://registry.yarnpkg.com/eslint-config-standard-with-typescript/-/eslint-config-standard-with-typescript-39.1.1.tgz#d682bd1fc8f1ee996940f85c9b0a833d7cfa5fee"
@@ -4678,6 +4688,14 @@ eslint-plugin-n@16.3.1:
     resolve "^1.22.2"
     semver "^7.5.3"
 
+eslint-plugin-prettier@5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz#17cfade9e732cef32b5f5be53bd4e07afd8e67e1"
+  integrity sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+    synckit "^0.8.6"
+
 eslint-plugin-promise@6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz#269a3e2772f62875661220631bd4dafcb4083816"
@@ -4920,6 +4938,11 @@ fast-diff@1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
   integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
 
+fast-diff@^1.1.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
+  integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
+
 fast-glob@^3.2.9, fast-glob@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
@@ -6944,6 +6967,23 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier-plugin-tailwindcss@0.5.11:
+  version "0.5.11"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz#1aa9308c3285b3cb7942aaeaec8d0e0775ac54d0"
+  integrity sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==
+
+prettier@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
+  integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==
+
 prettier@^2.8.0:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
@@ -7916,6 +7956,14 @@ synchronous-promise@^2.0.15:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.17.tgz#38901319632f946c982152586f2caf8ddc25c032"
   integrity sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==
 
+synckit@^0.8.6:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7"
+  integrity sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==
+  dependencies:
+    "@pkgr/core" "^0.1.0"
+    tslib "^2.6.2"
+
 tailwind-merge@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.0.0.tgz#a0f3a8c874ebae5feec5595614d08245a5f88a39"
@@ -8139,6 +8187,11 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+tslib@^2.6.2:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
+  integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"