From ffa13bb482aee87aae575ce881f6dcd3a6db4c60 Mon Sep 17 00:00:00 2001
From: sikkzz <sling0623@gmail.com>
Date: Thu, 11 Apr 2024 05:54:32 +0900
Subject: [PATCH] chore: eslint import change

---
 .pnp.cjs                                      |  33 ++-
 .prettierrc                                   |  10 +-
 package.json                                  |   2 +-
 packages/waggle-design-system/.eslintrc.json  |   2 +-
 packages/waggle-design-system/.prettierrc     |  19 ++
 packages/waggle-design-system/package.json    |   2 +
 .../src/WaggleProvider.tsx                    |   8 +-
 .../src/assets/index.d.ts                     |   6 +-
 .../src/components/Box/Box.styles.ts          | 154 ++++++------
 .../src/components/Box/Box.tsx                |  28 +--
 .../src/components/Button/Button.style.ts     | 114 ++++-----
 .../src/components/Button/Button.tsx          |  26 +-
 .../src/components/Divider/Divider.style.ts   |  26 +-
 .../src/components/Divider/Divider.tsx        |   6 +-
 .../src/components/Dropdown/Dropdown.style.ts |  26 +-
 .../src/components/Dropdown/Dropdown.tsx      |  44 ++--
 .../components/Dropdown/DropdownButton.tsx    |  12 +-
 .../src/components/Dropdown/DropdownItem.tsx  |  20 +-
 .../src/components/Dropdown/DropdownList.tsx  |  14 +-
 .../src/components/Flex/Flex.style.ts         | 238 +++++++++---------
 .../src/components/Flex/Flex.tsx              |  28 +--
 .../src/components/Heading/Heading.style.ts   |  54 ++--
 .../src/components/Heading/Heading.tsx        |  26 +-
 .../src/components/Logo/Logo.tsx              |   6 +-
 .../MainContainer/MainContainer.style.ts      |   6 +-
 .../MainContainer/MainContainer.tsx           |  10 +-
 .../src/components/Skeleton/Skeleton.style.ts |  16 +-
 .../src/components/Skeleton/Skeleton.tsx      |  36 +--
 .../src/components/Slider/Slider.tsx          |  54 ++--
 .../components/SortButton/SortButton.style.ts |   4 +-
 .../src/components/SortButton/SortButton.tsx  |  26 +-
 .../src/components/Tag/Tag.style.ts           |  20 +-
 .../src/components/Tag/Tag.tsx                |  32 +--
 .../MentionChecker/MentionChecker.style.ts    |  20 +-
 .../Text/MentionChecker/MentionChecker.tsx    |  56 ++---
 .../src/components/Text/Text.style.ts         |  48 ++--
 .../src/components/Text/Text.tsx              |  12 +-
 .../waggle-design-system/src/constants/tag.ts |  40 +--
 .../src/hooks/useClickOutSide.ts              |  22 +-
 .../src/hooks/useSlider.ts                    |  24 +-
 packages/waggle-design-system/src/index.tsx   |  40 +--
 .../src/styles/GlobalStyle.ts                 |  54 ++--
 .../waggle-design-system/src/styles/Theme.ts  | 200 +++++++--------
 .../src/styles/style.d.ts                     |  22 +-
 .../waggle-design-system/src/types/common.ts  |  10 +-
 .../src/utils/generateTag.ts                  |  42 ++--
 .../waggle-design-system/webpack.config.js    | 116 ++++-----
 yarn.lock                                     |   6 +-
 48 files changed, 934 insertions(+), 886 deletions(-)
 create mode 100644 packages/waggle-design-system/.prettierrc

diff --git a/.pnp.cjs b/.pnp.cjs
index ba6866f..21630ca 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -9512,6 +9512,29 @@ const RAW_RUNTIME_STATE =
         ],\
         "linkType": "SOFT"\
       }],\
+      ["virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:4.3.0", {\
+        "packageLocation": "./.yarn/__virtual__/@trivago-prettier-plugin-sort-imports-virtual-c8bd47142a/0/cache/@trivago-prettier-plugin-sort-imports-npm-4.3.0-622c28680b-42270fb9c8.zip/node_modules/@trivago/prettier-plugin-sort-imports/",\
+        "packageDependencies": [\
+          ["@trivago/prettier-plugin-sort-imports", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:4.3.0"],\
+          ["@babel/generator", "npm:7.17.7"],\
+          ["@babel/parser", "npm:7.24.4"],\
+          ["@babel/traverse", "npm:7.23.2"],\
+          ["@babel/types", "npm:7.17.0"],\
+          ["@types/prettier", null],\
+          ["@types/vue__compiler-sfc", null],\
+          ["@vue/compiler-sfc", null],\
+          ["javascript-natural-sort", "npm:0.7.1"],\
+          ["lodash", "npm:4.17.21"],\
+          ["prettier", "npm:3.2.5"]\
+        ],\
+        "packagePeers": [\
+          "@types/prettier",\
+          "@types/vue__compiler-sfc",\
+          "@vue/compiler-sfc",\
+          "prettier"\
+        ],\
+        "linkType": "HARD"\
+      }],\
       ["virtual:bfca90541deadef7ca04341b77694a3566f3f74bd9fba48871c271fa573dfe36954ed36daf70be7a147b2df8f86d5f876593eb78f1d8ef71040405a3ef477ede#npm:4.3.0", {\
         "packageLocation": "./.yarn/__virtual__/@trivago-prettier-plugin-sort-imports-virtual-f48f9a9d6a/0/cache/@trivago-prettier-plugin-sort-imports-npm-4.3.0-622c28680b-42270fb9c8.zip/node_modules/@trivago/prettier-plugin-sort-imports/",\
         "packageDependencies": [\
@@ -15946,7 +15969,7 @@ const RAW_RUNTIME_STATE =
           ["eslint-plugin-import", "virtual:8f6d4d92608664b353c9aaf11c30ac9c3c8fd44b823ecb26f7d7e7b7d1770e7c0ed8c9a661f79cf22f33543ce60ce24b0dac9e914f2ba895168ffbb18c6c5ab9#npm:2.29.1"],\
           ["eslint-plugin-jest", "virtual:8f6d4d92608664b353c9aaf11c30ac9c3c8fd44b823ecb26f7d7e7b7d1770e7c0ed8c9a661f79cf22f33543ce60ce24b0dac9e914f2ba895168ffbb18c6c5ab9#npm:25.7.0"],\
           ["eslint-plugin-jsx-a11y", "virtual:8f6d4d92608664b353c9aaf11c30ac9c3c8fd44b823ecb26f7d7e7b7d1770e7c0ed8c9a661f79cf22f33543ce60ce24b0dac9e914f2ba895168ffbb18c6c5ab9#npm:6.8.0"],\
-          ["eslint-plugin-react", "virtual:8f6d4d92608664b353c9aaf11c30ac9c3c8fd44b823ecb26f7d7e7b7d1770e7c0ed8c9a661f79cf22f33543ce60ce24b0dac9e914f2ba895168ffbb18c6c5ab9#npm:7.34.1"],\
+          ["eslint-plugin-react", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:7.34.1"],\
           ["eslint-plugin-react-hooks", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:4.6.0"],\
           ["eslint-plugin-testing-library", "virtual:8f6d4d92608664b353c9aaf11c30ac9c3c8fd44b823ecb26f7d7e7b7d1770e7c0ed8c9a661f79cf22f33543ce60ce24b0dac9e914f2ba895168ffbb18c6c5ab9#npm:5.11.1"],\
           ["typescript", "patch:typescript@npm%3A5.0.4#optional!builtin<compat/typescript>::version=5.0.4&hash=b5f058"]\
@@ -16580,10 +16603,10 @@ const RAW_RUNTIME_STATE =
         ],\
         "linkType": "SOFT"\
       }],\
-      ["virtual:8f6d4d92608664b353c9aaf11c30ac9c3c8fd44b823ecb26f7d7e7b7d1770e7c0ed8c9a661f79cf22f33543ce60ce24b0dac9e914f2ba895168ffbb18c6c5ab9#npm:7.34.1", {\
-        "packageLocation": "./.yarn/__virtual__/eslint-plugin-react-virtual-4287cd241f/0/cache/eslint-plugin-react-npm-7.34.1-93be695b40-7c61b1314d.zip/node_modules/eslint-plugin-react/",\
+      ["virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:7.34.1", {\
+        "packageLocation": "./.yarn/__virtual__/eslint-plugin-react-virtual-19135c6625/0/cache/eslint-plugin-react-npm-7.34.1-93be695b40-7c61b1314d.zip/node_modules/eslint-plugin-react/",\
         "packageDependencies": [\
-          ["eslint-plugin-react", "virtual:8f6d4d92608664b353c9aaf11c30ac9c3c8fd44b823ecb26f7d7e7b7d1770e7c0ed8c9a661f79cf22f33543ce60ce24b0dac9e914f2ba895168ffbb18c6c5ab9#npm:7.34.1"],\
+          ["eslint-plugin-react", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:7.34.1"],\
           ["@types/eslint", "npm:8.44.8"],\
           ["array-includes", "npm:3.1.7"],\
           ["array.prototype.findlast", "npm:1.2.5"],\
@@ -25564,6 +25587,7 @@ const RAW_RUNTIME_STATE =
           ["@storybook/react-webpack5", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:7.6.17"],\
           ["@storybook/testing-library", "npm:0.0.14-next.2"],\
           ["@svgr/webpack", "npm:8.1.0"],\
+          ["@trivago/prettier-plugin-sort-imports", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:4.3.0"],\
           ["@types/babel__core", "npm:7.20.5"],\
           ["@types/babel__preset-env", "npm:7.9.6"],\
           ["@types/eslint", "npm:8.44.8"],\
@@ -25579,6 +25603,7 @@ const RAW_RUNTIME_STATE =
           ["eslint-import-resolver-typescript", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:3.6.1"],\
           ["eslint-plugin-import", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:2.29.1"],\
           ["eslint-plugin-prettier", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:5.0.1"],\
+          ["eslint-plugin-react", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:7.34.1"],\
           ["eslint-plugin-react-hooks", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:4.6.0"],\
           ["eslint-plugin-react-refresh", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:0.4.6"],\
           ["eslint-plugin-storybook", "virtual:b87f6af78ce16849aedde052ee423fdb48db75040312d2f2f93643746fda40898388a71122eecbc567a8f0db83e07d16cfbcff4bf55d6765bb068cd7a28711f9#npm:0.6.15"],\
diff --git a/.prettierrc b/.prettierrc
index fb06f59..063c3b0 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,9 +1,9 @@
 {
+  "endOfLine": "auto",
   "singleQuote": false,
-  "parser": "typescript",
-  "semi": true,
   "tabWidth": 2,
-  "trailingComma": "all",
-  "useTabs": true,
-  "printWidth": 100
+  "printWidth": 100,
+  "semi": true,
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }
diff --git a/package.json b/package.json
index 918cc69..0169395 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
         "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
         "eslint-plugin-prettier": "4.0.0",
         "eslint-plugin-promise": "^6.1.1",
-        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react": "^7.34.1",
         "husky": "^8.0.3",
         "lint-staged": "^15.0.2",
         "prettier": "2.8.8",
diff --git a/packages/waggle-design-system/.eslintrc.json b/packages/waggle-design-system/.eslintrc.json
index 50f6032..a40eb33 100644
--- a/packages/waggle-design-system/.eslintrc.json
+++ b/packages/waggle-design-system/.eslintrc.json
@@ -5,7 +5,7 @@
     "node": true
   },
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint","import"],
+  "plugins": ["@typescript-eslint", "react"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
diff --git a/packages/waggle-design-system/.prettierrc b/packages/waggle-design-system/.prettierrc
new file mode 100644
index 0000000..ad214df
--- /dev/null
+++ b/packages/waggle-design-system/.prettierrc
@@ -0,0 +1,19 @@
+{
+    "endOfLine": "auto",
+    "singleQuote": false,
+    "tabWidth": 2,
+    "printWidth": 100,
+    "semi": true,
+    "importOrder": [
+      "^@/utils/(.*)$",
+      "^@/api/(.*)$",
+      "^@/hooks/(.*)$",
+      "^@/pages/(.*)$",
+      "^@/components/(.*)$",
+      "^@/styles/(.*)$",
+      "^[./]"
+    ],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true
+  }
+  
\ No newline at end of file
diff --git a/packages/waggle-design-system/package.json b/packages/waggle-design-system/package.json
index 9ab8b76..13bdb57 100644
--- a/packages/waggle-design-system/package.json
+++ b/packages/waggle-design-system/package.json
@@ -64,6 +64,7 @@
     "@storybook/react-webpack5": "^7.6.8",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@svgr/webpack": "^8.0.1",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/babel__core": "^7",
     "@types/babel__preset-env": "^7",
     "@types/eslint": "^8",
@@ -79,6 +80,7 @@
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.6.15",
diff --git a/packages/waggle-design-system/src/WaggleProvider.tsx b/packages/waggle-design-system/src/WaggleProvider.tsx
index 2e57555..20f22fc 100644
--- a/packages/waggle-design-system/src/WaggleProvider.tsx
+++ b/packages/waggle-design-system/src/WaggleProvider.tsx
@@ -8,10 +8,10 @@ import { Theme } from "@/styles/Theme";
 type WaggleProviderProps = PropsWithChildren;
 
 const WaggleProvider = ({ children }: WaggleProviderProps) => (
-	<ThemeProvider theme={Theme}>
-		<Global styles={GlobalStyle} />
-		{children}
-	</ThemeProvider>
+  <ThemeProvider theme={Theme}>
+    <Global styles={GlobalStyle} />
+    {children}
+  </ThemeProvider>
 );
 
 export default WaggleProvider;
diff --git a/packages/waggle-design-system/src/assets/index.d.ts b/packages/waggle-design-system/src/assets/index.d.ts
index a5dc574..7b7753b 100644
--- a/packages/waggle-design-system/src/assets/index.d.ts
+++ b/packages/waggle-design-system/src/assets/index.d.ts
@@ -1,6 +1,6 @@
 declare module "*.svg" {
-	import type React from "react";
+  import type React from "react";
 
-	const SVG: React.FC<React.SVGProps<SVGSVGElement>>;
-	export default SVG;
+  const SVG: React.FC<React.SVGProps<SVGSVGElement>>;
+  export default SVG;
 }
diff --git a/packages/waggle-design-system/src/components/Box/Box.styles.ts b/packages/waggle-design-system/src/components/Box/Box.styles.ts
index 501286f..d42c096 100644
--- a/packages/waggle-design-system/src/components/Box/Box.styles.ts
+++ b/packages/waggle-design-system/src/components/Box/Box.styles.ts
@@ -1,85 +1,85 @@
 import { css } from "@emotion/react";
 
 export interface BoxStylingProps {
-	width?: string;
-	height?: string;
-	margin?: string;
-	marginRight?: string;
-	marginTop?: string;
-	marginLeft?: string;
-	marginBottom?: string;
-	padding?: string;
-	paddingTop?: string;
-	paddingRight?: string;
-	paddingBottom?: string;
-	paddingLeft?: string;
-	border?: string;
-	borderRadius?: string;
-	borderColor?: string;
-	borderTop?: string;
-	borderRight?: string;
-	borderBottom?: string;
-	borderLeft?: string;
-	backgroundColor?: string;
-	color?: string;
-	position?: "static" | "absolute" | "relative" | "fixed" | "inherit";
-	boxShadow?: string;
-	maxWidth?: string;
-	maxHeight?: string;
+  width?: string;
+  height?: string;
+  margin?: string;
+  marginRight?: string;
+  marginTop?: string;
+  marginLeft?: string;
+  marginBottom?: string;
+  padding?: string;
+  paddingTop?: string;
+  paddingRight?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  border?: string;
+  borderRadius?: string;
+  borderColor?: string;
+  borderTop?: string;
+  borderRight?: string;
+  borderBottom?: string;
+  borderLeft?: string;
+  backgroundColor?: string;
+  color?: string;
+  position?: "static" | "absolute" | "relative" | "fixed" | "inherit";
+  boxShadow?: string;
+  maxWidth?: string;
+  maxHeight?: string;
 }
 
 export const getBoxStyling = ({
-	width = "",
-	height = "",
-	margin = "",
-	marginRight = "",
-	marginTop = "",
-	marginLeft = "",
-	marginBottom = "",
-	padding = "",
-	paddingTop = "",
-	paddingRight = "",
-	paddingBottom = "",
-	paddingLeft = "",
-	border = "",
-	borderRadius = "",
-	borderColor = "",
-	borderTop = "",
-	borderRight = "",
-	borderBottom = "",
-	borderLeft = "",
-	backgroundColor = "",
-	color = "",
-	position = "static",
-	boxShadow = "",
-	maxWidth = "",
-	maxHeight = "",
+  width = "",
+  height = "",
+  margin = "",
+  marginRight = "",
+  marginTop = "",
+  marginLeft = "",
+  marginBottom = "",
+  padding = "",
+  paddingTop = "",
+  paddingRight = "",
+  paddingBottom = "",
+  paddingLeft = "",
+  border = "",
+  borderRadius = "",
+  borderColor = "",
+  borderTop = "",
+  borderRight = "",
+  borderBottom = "",
+  borderLeft = "",
+  backgroundColor = "",
+  color = "",
+  position = "static",
+  boxShadow = "",
+  maxWidth = "",
+  maxHeight = "",
 }: BoxStylingProps) => {
-	return css({
-		width,
-		height,
-		margin,
-		marginRight,
-		marginTop,
-		marginLeft,
-		marginBottom,
-		padding,
-		paddingTop,
-		paddingRight,
-		paddingBottom,
-		paddingLeft,
-		border,
-		borderRadius,
-		borderColor,
-		borderTop,
-		borderRight,
-		borderBottom,
-		borderLeft,
-		backgroundColor,
-		color,
-		position,
-		boxShadow,
-		maxWidth,
-		maxHeight,
-	});
+  return css({
+    width,
+    height,
+    margin,
+    marginRight,
+    marginTop,
+    marginLeft,
+    marginBottom,
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    border,
+    borderRadius,
+    borderColor,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    backgroundColor,
+    color,
+    position,
+    boxShadow,
+    maxWidth,
+    maxHeight,
+  });
 };
diff --git a/packages/waggle-design-system/src/components/Box/Box.tsx b/packages/waggle-design-system/src/components/Box/Box.tsx
index 6619f4c..0a4afe8 100644
--- a/packages/waggle-design-system/src/components/Box/Box.tsx
+++ b/packages/waggle-design-system/src/components/Box/Box.tsx
@@ -5,24 +5,24 @@ import type { BoxStylingProps } from "@/components/Box/Box.styles";
 import { getBoxStyling } from "@/components/Box/Box.styles";
 
 export interface BoxProps extends ComponentPropsWithoutRef<"div"> {
-	/**
-	 * Box 컴포넌트가 사용할 HTML 태그
-	 *
-	 * @default 'div'
-	 */
-	tag?: ElementType;
-	/** Box 컴포넌트 스타일 옵션 */
-	styles?: BoxStylingProps;
+  /**
+   * Box 컴포넌트가 사용할 HTML 태그
+   *
+   * @default 'div'
+   */
+  tag?: ElementType;
+  /** Box 컴포넌트 스타일 옵션 */
+  styles?: BoxStylingProps;
 }
 
 const Box = ({ tag = "div", styles = {}, children, ...attributes }: BoxProps) => {
-	const Tag = tag;
+  const Tag = tag;
 
-	return (
-		<Tag css={getBoxStyling(styles)} {...attributes}>
-			{children}
-		</Tag>
-	);
+  return (
+    <Tag css={getBoxStyling(styles)} {...attributes}>
+      {children}
+    </Tag>
+  );
 };
 
 export default Box;
diff --git a/packages/waggle-design-system/src/components/Button/Button.style.ts b/packages/waggle-design-system/src/components/Button/Button.style.ts
index 0a5c649..7775132 100644
--- a/packages/waggle-design-system/src/components/Button/Button.style.ts
+++ b/packages/waggle-design-system/src/components/Button/Button.style.ts
@@ -5,70 +5,70 @@ import type { ButtonProps } from "@/components/Button/Button";
 import { Theme } from "@/styles/Theme";
 
 export const buttonVariantStyle = (variant: Required<ButtonProps>["variant"]) => {
-	const style = {
-		default: css({
-			backgroundColor: Theme.color.brand_primary,
-			color: Theme.color.white,
-		}),
-		disabled: css({
-			backgroundColor: Theme.color.disabled_text,
-			color: Theme.color.white,
-		}),
-		outline: css({
-			backgroundColor: Theme.color.white,
-			color: Theme.color.disabled_text,
-			border: `1px solid ${Theme.color.border}`,
-			height: "44px",
-		}),
-		white: css({
-			backgroundColor: Theme.color.white,
-			color: Theme.color.brand_primary,
-		}),
-		danger: css({
-			backgroundColor: Theme.color.btn_danger,
-			color: Theme.color.white,
-		}),
-	};
+  const style = {
+    default: css({
+      backgroundColor: Theme.color.brand_primary,
+      color: Theme.color.white,
+    }),
+    disabled: css({
+      backgroundColor: Theme.color.disabled_text,
+      color: Theme.color.white,
+    }),
+    outline: css({
+      backgroundColor: Theme.color.white,
+      color: Theme.color.disabled_text,
+      border: `1px solid ${Theme.color.border}`,
+      height: "44px",
+    }),
+    white: css({
+      backgroundColor: Theme.color.white,
+      color: Theme.color.brand_primary,
+    }),
+    danger: css({
+      backgroundColor: Theme.color.btn_danger,
+      color: Theme.color.white,
+    }),
+  };
 
-	return style[variant];
+  return style[variant];
 };
 
 export const buttonSizeStyle = (size: Required<ButtonProps>["size"]) => {
-	const style = {
-		small: css({
-			padding: "8px 10px",
-		}),
-		medium: css({
-			width: "310px",
-			height: "44px",
-		}),
-		large: css({
-			width: "331px",
-			height: "44px",
-		}),
-		xLarge: css({
-			width: "412px",
-			height: "44px",
-		}),
-	};
+  const style = {
+    small: css({
+      padding: "8px 10px",
+    }),
+    medium: css({
+      width: "310px",
+      height: "44px",
+    }),
+    large: css({
+      width: "331px",
+      height: "44px",
+    }),
+    xLarge: css({
+      width: "412px",
+      height: "44px",
+    }),
+  };
 
-	return style[size];
+  return style[size];
 };
 
 export const buttonStyle = css({
-	display: "flex",
-	justifyContent: "center",
-	alignItems: "center",
-	border: "none",
-	borderRadius: "4px",
-	outline: "none",
-	backgroundColor: Theme.color.white,
-	fontWeight: 500,
-	fontSize: Theme.text.medium.fontSize,
-	cursor: "pointer",
-	fontFamily: "Pretendard",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  border: "none",
+  borderRadius: "4px",
+  outline: "none",
+  backgroundColor: Theme.color.white,
+  fontWeight: 500,
+  fontSize: Theme.text.medium.fontSize,
+  cursor: "pointer",
+  fontFamily: "Pretendard",
 
-	"&:disabled": {
-		opacity: ".4",
-	},
+  "&:disabled": {
+    opacity: ".4",
+  },
 });
diff --git a/packages/waggle-design-system/src/components/Button/Button.tsx b/packages/waggle-design-system/src/components/Button/Button.tsx
index 44d7536..2fd0c08 100644
--- a/packages/waggle-design-system/src/components/Button/Button.tsx
+++ b/packages/waggle-design-system/src/components/Button/Button.tsx
@@ -6,23 +6,23 @@ import type { Size } from "@/types/common";
 import { buttonStyle, buttonVariantStyle, buttonSizeStyle } from "@/components/Button/Button.style";
 
 export interface ButtonProps extends ComponentPropsWithRef<"button"> {
-	size?: Extract<Size, "small" | "medium" | "large" | "xLarge">;
-	variant?: "default" | "disabled" | "white" | "outline" | "danger";
+  size?: Extract<Size, "small" | "medium" | "large" | "xLarge">;
+  variant?: "default" | "disabled" | "white" | "outline" | "danger";
 }
 
 const Button = (
-	{ size = "small", variant = "default", children, ...attributes }: ButtonProps,
-	ref: ForwardedRef<HTMLButtonElement>,
+  { size = "small", variant = "default", children, ...attributes }: ButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>,
 ) => {
-	return (
-		<button
-			ref={ref}
-			css={[buttonStyle, buttonVariantStyle(variant), buttonSizeStyle(size)]}
-			{...attributes}
-		>
-			{children}
-		</button>
-	);
+  return (
+    <button
+      ref={ref}
+      css={[buttonStyle, buttonVariantStyle(variant), buttonSizeStyle(size)]}
+      {...attributes}
+    >
+      {children}
+    </button>
+  );
 };
 
 export default forwardRef(Button);
diff --git a/packages/waggle-design-system/src/components/Divider/Divider.style.ts b/packages/waggle-design-system/src/components/Divider/Divider.style.ts
index 2949d4c..2ca1843 100644
--- a/packages/waggle-design-system/src/components/Divider/Divider.style.ts
+++ b/packages/waggle-design-system/src/components/Divider/Divider.style.ts
@@ -5,19 +5,19 @@ import type { DividerProps } from "@/components/Divider/Divider";
 import { Theme } from "@/styles/Theme";
 
 export const dividerStyle = (
-	direction: Required<DividerProps>["direction"],
-	length: Required<DividerProps>["length"],
+  direction: Required<DividerProps>["direction"],
+  length: Required<DividerProps>["length"],
 ) => {
-	const style = {
-		horizontal: css({
-			borderBottom: `1px solid ${Theme.color.divider_gray}`,
-			width: length,
-		}),
-		vertical: css({
-			borderLeft: `1px solid ${Theme.color.divider_gray}`,
-			height: length,
-		}),
-	};
+  const style = {
+    horizontal: css({
+      borderBottom: `1px solid ${Theme.color.divider_gray}`,
+      width: length,
+    }),
+    vertical: css({
+      borderLeft: `1px solid ${Theme.color.divider_gray}`,
+      height: length,
+    }),
+  };
 
-	return style[direction];
+  return style[direction];
 };
diff --git a/packages/waggle-design-system/src/components/Divider/Divider.tsx b/packages/waggle-design-system/src/components/Divider/Divider.tsx
index a292c85..282a22d 100644
--- a/packages/waggle-design-system/src/components/Divider/Divider.tsx
+++ b/packages/waggle-design-system/src/components/Divider/Divider.tsx
@@ -3,12 +3,12 @@ import type { ComponentPropsWithoutRef } from "react";
 import { dividerStyle } from "@/components/Divider/Divider.style";
 
 export interface DividerProps extends ComponentPropsWithoutRef<"div"> {
-	length?: string;
-	direction?: "horizontal" | "vertical";
+  length?: string;
+  direction?: "horizontal" | "vertical";
 }
 
 const Divider = ({ length = "100%", direction = "horizontal", ...attributes }: DividerProps) => {
-	return <div css={dividerStyle(direction, length)} {...attributes} />;
+  return <div css={dividerStyle(direction, length)} {...attributes} />;
 };
 
 export default Divider;
diff --git a/packages/waggle-design-system/src/components/Dropdown/Dropdown.style.ts b/packages/waggle-design-system/src/components/Dropdown/Dropdown.style.ts
index 742fc81..6f4d2d5 100644
--- a/packages/waggle-design-system/src/components/Dropdown/Dropdown.style.ts
+++ b/packages/waggle-design-system/src/components/Dropdown/Dropdown.style.ts
@@ -3,21 +3,21 @@ import { css } from "@emotion/react";
 import { Theme } from "@/styles/Theme";
 
 export const dropdownListStyle = css({
-	position: "absolute",
-	border: `1px solid ${Theme.color.border}`,
-	backgroundColor: Theme.color.white,
-	borderRadius: "4px",
+  position: "absolute",
+  border: `1px solid ${Theme.color.border}`,
+  backgroundColor: Theme.color.white,
+  borderRadius: "4px",
 });
 
 export const dropdownItemStyle = css({
-	padding: "8px 10px",
-	borderBottom: `1px solid ${Theme.color.border}`,
-	cursor: "pointer",
+  padding: "8px 10px",
+  borderBottom: `1px solid ${Theme.color.border}`,
+  cursor: "pointer",
 
-	"&:hover": {
-		backgroundColor: Theme.color.border,
-	},
-	"&:last-child": {
-		borderBottom: "none",
-	},
+  "&:hover": {
+    backgroundColor: Theme.color.border,
+  },
+  "&:last-child": {
+    borderBottom: "none",
+  },
 });
diff --git a/packages/waggle-design-system/src/components/Dropdown/Dropdown.tsx b/packages/waggle-design-system/src/components/Dropdown/Dropdown.tsx
index 6bb99f5..348fbe4 100644
--- a/packages/waggle-design-system/src/components/Dropdown/Dropdown.tsx
+++ b/packages/waggle-design-system/src/components/Dropdown/Dropdown.tsx
@@ -5,31 +5,31 @@ import { createContext, useState } from "react";
 import useClickOutSide from "@/hooks/useClickOutSide";
 
 export const DropdownProvider = createContext<{
-	isDropdownOpen: boolean;
-	toggleDropdown: () => void;
+  isDropdownOpen: boolean;
+  toggleDropdown: () => void;
 }>({ isDropdownOpen: false, toggleDropdown: () => {} });
 
 const Dropdown = ({ children }: { children: ReactNode }) => {
-	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
-	const toggleDropdown = () => {
-		setIsDropdownOpen((prev) => !prev);
-	};
-	const handleCloseDropdown = () => {
-		setIsDropdownOpen(false);
-	};
-
-	const dropdownRef = useRef(null);
-
-	useClickOutSide(dropdownRef, handleCloseDropdown);
-
-	return (
-		<section ref={dropdownRef}>
-			<DropdownProvider.Provider value={{ toggleDropdown, isDropdownOpen }}>
-				{children}
-			</DropdownProvider.Provider>
-		</section>
-	);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsDropdownOpen((prev) => !prev);
+  };
+  const handleCloseDropdown = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const dropdownRef = useRef(null);
+
+  useClickOutSide(dropdownRef, handleCloseDropdown);
+
+  return (
+    <section ref={dropdownRef}>
+      <DropdownProvider.Provider value={{ toggleDropdown, isDropdownOpen }}>
+        {children}
+      </DropdownProvider.Provider>
+    </section>
+  );
 };
 
 export default Dropdown;
diff --git a/packages/waggle-design-system/src/components/Dropdown/DropdownButton.tsx b/packages/waggle-design-system/src/components/Dropdown/DropdownButton.tsx
index 7355405..36d16fc 100644
--- a/packages/waggle-design-system/src/components/Dropdown/DropdownButton.tsx
+++ b/packages/waggle-design-system/src/components/Dropdown/DropdownButton.tsx
@@ -5,12 +5,12 @@ import type { DropdownButtonType } from "@/types/common";
 import { DropdownProvider } from "@/components/Dropdown/Dropdown";
 
 const DropdownButton = ({ children, ...props }: DropdownButtonType) => {
-	const { toggleDropdown } = useContext(DropdownProvider);
-	return (
-		<button {...props} onClick={toggleDropdown}>
-			{children}
-		</button>
-	);
+  const { toggleDropdown } = useContext(DropdownProvider);
+  return (
+    <button {...props} onClick={toggleDropdown}>
+      {children}
+    </button>
+  );
 };
 
 export default DropdownButton;
diff --git a/packages/waggle-design-system/src/components/Dropdown/DropdownItem.tsx b/packages/waggle-design-system/src/components/Dropdown/DropdownItem.tsx
index d8c19c6..862d857 100644
--- a/packages/waggle-design-system/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/waggle-design-system/src/components/Dropdown/DropdownItem.tsx
@@ -4,16 +4,16 @@ import { dropdownItemStyle } from "@/components/Dropdown/Dropdown.style";
 import Flex from "@/components/Flex/Flex";
 
 const DropdownItem = ({ children, icon, ...props }: DropDownItemType) => {
-	return (
-		<Flex
-			css={dropdownItemStyle}
-			styles={{ gap: "4px", align: "center", justify: "center" }}
-			{...props}
-		>
-			{icon}
-			{children}
-		</Flex>
-	);
+  return (
+    <Flex
+      css={dropdownItemStyle}
+      styles={{ gap: "4px", align: "center", justify: "center" }}
+      {...props}
+    >
+      {icon}
+      {children}
+    </Flex>
+  );
 };
 
 export default DropdownItem;
diff --git a/packages/waggle-design-system/src/components/Dropdown/DropdownList.tsx b/packages/waggle-design-system/src/components/Dropdown/DropdownList.tsx
index 3b91184..dfb8934 100644
--- a/packages/waggle-design-system/src/components/Dropdown/DropdownList.tsx
+++ b/packages/waggle-design-system/src/components/Dropdown/DropdownList.tsx
@@ -7,14 +7,14 @@ import { DropdownProvider } from "@/components/Dropdown/Dropdown";
 import { dropdownListStyle } from "@/components/Dropdown/Dropdown.style";
 
 const DropdownList = ({ children, ...props }: DropdonwListType) => {
-	const { isDropdownOpen } = useContext(DropdownProvider);
-	if (!isDropdownOpen) return null;
+  const { isDropdownOpen } = useContext(DropdownProvider);
+  if (!isDropdownOpen) return null;
 
-	return (
-		<Box css={dropdownListStyle} {...props}>
-			{children}
-		</Box>
-	);
+  return (
+    <Box css={dropdownListStyle} {...props}>
+      {children}
+    </Box>
+  );
 };
 
 export default DropdownList;
diff --git a/packages/waggle-design-system/src/components/Flex/Flex.style.ts b/packages/waggle-design-system/src/components/Flex/Flex.style.ts
index 574563c..fb0b89d 100644
--- a/packages/waggle-design-system/src/components/Flex/Flex.style.ts
+++ b/packages/waggle-design-system/src/components/Flex/Flex.style.ts
@@ -1,127 +1,127 @@
 import { css } from "@emotion/react";
 
 export interface FlexStylingProps {
-	direction?: "row" | "column";
-	wrap?: "nowrap" | "wrap" | "wrap-reverse";
-	basis?: "auto" | "0" | "200px";
-	grow?: string;
-	shrink?: string;
-	align?:
-		| "normal"
-		| "stretch"
-		| "center"
-		| "start"
-		| "end"
-		| "flex-start"
-		| "flex-end"
-		| "self-start"
-		| "self-end"
-		| "baseline"
-		| "inherit"
-		| "initial"
-		| "unset";
-	justify?:
-		| "center"
-		| "start"
-		| "flex-start"
-		| "end"
-		| "flex-end"
-		| "left"
-		| "right"
-		| "normal"
-		| "space-between"
-		| "space-around"
-		| "space-evenly"
-		| "stretch"
-		| "inherit"
-		| "initial"
-		| "revert"
-		| "unset";
-	gap?: string;
-	margin?: string;
-	marginRight?: string;
-	marginTop?: string;
-	marginLeft?: string;
-	marginBottom?: string;
-	padding?: string;
-	paddingTop?: string;
-	paddingRight?: string;
-	paddingBottom?: string;
-	paddingLeft?: string;
-	border?: string;
-	borderRadius?: string;
-	borderColor?: string;
-	borderTop?: string;
-	borderRight?: string;
-	borderBottom?: string;
-	borderLeft?: string;
-	width?: string;
-	height?: string;
-	position?: "static" | "absolute" | "relative" | "fixed" | "inherit";
-	boxShadow?: string;
+  direction?: "row" | "column";
+  wrap?: "nowrap" | "wrap" | "wrap-reverse";
+  basis?: "auto" | "0" | "200px";
+  grow?: string;
+  shrink?: string;
+  align?:
+    | "normal"
+    | "stretch"
+    | "center"
+    | "start"
+    | "end"
+    | "flex-start"
+    | "flex-end"
+    | "self-start"
+    | "self-end"
+    | "baseline"
+    | "inherit"
+    | "initial"
+    | "unset";
+  justify?:
+    | "center"
+    | "start"
+    | "flex-start"
+    | "end"
+    | "flex-end"
+    | "left"
+    | "right"
+    | "normal"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "stretch"
+    | "inherit"
+    | "initial"
+    | "revert"
+    | "unset";
+  gap?: string;
+  margin?: string;
+  marginRight?: string;
+  marginTop?: string;
+  marginLeft?: string;
+  marginBottom?: string;
+  padding?: string;
+  paddingTop?: string;
+  paddingRight?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  border?: string;
+  borderRadius?: string;
+  borderColor?: string;
+  borderTop?: string;
+  borderRight?: string;
+  borderBottom?: string;
+  borderLeft?: string;
+  width?: string;
+  height?: string;
+  position?: "static" | "absolute" | "relative" | "fixed" | "inherit";
+  boxShadow?: string;
 }
 
 export const flexStyle = ({
-	direction = "row",
-	wrap = "nowrap",
-	basis = "auto",
-	grow = "1",
-	shrink = "0",
-	align = "flex-start",
-	justify = "flex-start",
-	gap = "0px",
-	margin = "0",
-	marginRight = "",
-	marginTop = "",
-	marginLeft = "",
-	marginBottom = "",
-	padding = "",
-	paddingTop = "",
-	paddingRight = "",
-	paddingBottom = "",
-	paddingLeft = "",
-	border = "",
-	borderRadius = "",
-	borderColor = "",
-	borderTop = "",
-	borderRight = "",
-	borderBottom = "",
-	borderLeft = "",
-	width = "",
-	height = "",
-	position = "static",
-	boxShadow = "",
+  direction = "row",
+  wrap = "nowrap",
+  basis = "auto",
+  grow = "1",
+  shrink = "0",
+  align = "flex-start",
+  justify = "flex-start",
+  gap = "0px",
+  margin = "0",
+  marginRight = "",
+  marginTop = "",
+  marginLeft = "",
+  marginBottom = "",
+  padding = "",
+  paddingTop = "",
+  paddingRight = "",
+  paddingBottom = "",
+  paddingLeft = "",
+  border = "",
+  borderRadius = "",
+  borderColor = "",
+  borderTop = "",
+  borderRight = "",
+  borderBottom = "",
+  borderLeft = "",
+  width = "",
+  height = "",
+  position = "static",
+  boxShadow = "",
 }: FlexStylingProps) => {
-	return css({
-		display: "flex",
-		flexDirection: direction,
-		flexWrap: wrap,
-		flexBasis: basis,
-		grow,
-		flexShrink: shrink,
-		alignItems: align,
-		justifyContent: justify,
-		gap,
-		margin,
-		marginRight,
-		marginTop,
-		marginLeft,
-		marginBottom,
-		padding,
-		paddingTop,
-		paddingRight,
-		paddingBottom,
-		paddingLeft,
-		border,
-		borderRadius,
-		borderColor,
-		borderTop,
-		borderRight,
-		borderBottom,
-		borderLeft,
-		width,
-		height,
-		position,
-		boxShadow,
-	});
+  return css({
+    display: "flex",
+    flexDirection: direction,
+    flexWrap: wrap,
+    flexBasis: basis,
+    grow,
+    flexShrink: shrink,
+    alignItems: align,
+    justifyContent: justify,
+    gap,
+    margin,
+    marginRight,
+    marginTop,
+    marginLeft,
+    marginBottom,
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    border,
+    borderRadius,
+    borderColor,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    width,
+    height,
+    position,
+    boxShadow,
+  });
 };
diff --git a/packages/waggle-design-system/src/components/Flex/Flex.tsx b/packages/waggle-design-system/src/components/Flex/Flex.tsx
index 5769b17..09bd0af 100644
--- a/packages/waggle-design-system/src/components/Flex/Flex.tsx
+++ b/packages/waggle-design-system/src/components/Flex/Flex.tsx
@@ -4,24 +4,24 @@ import type { FlexStylingProps } from "@/components/Flex/Flex.style";
 import { flexStyle } from "@/components/Flex/Flex.style";
 
 export interface FlexProps extends ComponentPropsWithoutRef<"div"> {
-	/**
-	 * Flex 컴포넌트가 사용할 HTML 태그
-	 *
-	 * @default 'div'
-	 */
-	tag?: ElementType;
-	/** Flex 컴포넌트 스타일 옵션 */
-	styles?: FlexStylingProps;
+  /**
+   * Flex 컴포넌트가 사용할 HTML 태그
+   *
+   * @default 'div'
+   */
+  tag?: ElementType;
+  /** Flex 컴포넌트 스타일 옵션 */
+  styles?: FlexStylingProps;
 }
 
 const Flex = ({ tag = "div", styles = {}, children, ...attributes }: FlexProps) => {
-	const Tag = tag;
+  const Tag = tag;
 
-	return (
-		<Tag css={flexStyle(styles)} {...attributes}>
-			{children}
-		</Tag>
-	);
+  return (
+    <Tag css={flexStyle(styles)} {...attributes}>
+      {children}
+    </Tag>
+  );
 };
 
 export default Flex;
diff --git a/packages/waggle-design-system/src/components/Heading/Heading.style.ts b/packages/waggle-design-system/src/components/Heading/Heading.style.ts
index 733128c..f02bd27 100644
--- a/packages/waggle-design-system/src/components/Heading/Heading.style.ts
+++ b/packages/waggle-design-system/src/components/Heading/Heading.style.ts
@@ -5,32 +5,32 @@ import type { HeadingProps } from "@/components/Heading/Heading";
 import { Theme } from "@/styles/Theme";
 
 export const headingStyle = (size: Required<HeadingProps>["size"]) => {
-	const style = {
-		xxLarge: css({
-			fontSize: Theme.heading.xxLarge.fontSize,
-			lineHeight: Theme.heading.xxLarge.lineHeight,
-		}),
-		xLarge: css({
-			fontSize: Theme.heading.xLarge.fontSize,
-			lineHeight: Theme.heading.xLarge.lineHeight,
-		}),
-		large: css({
-			fontSize: Theme.heading.large.fontSize,
-			lineHeight: Theme.heading.large.lineHeight,
-		}),
-		medium: css({
-			fontSize: Theme.heading.medium.fontSize,
-			lineHeight: Theme.heading.medium.lineHeight,
-		}),
-		small: css({
-			fontSize: Theme.heading.small.fontSize,
-			lineHeight: Theme.heading.small.lineHeight,
-		}),
-		xSmall: css({
-			fontSize: Theme.heading.xSmall.fontSize,
-			lineHeight: Theme.heading.xSmall.lineHeight,
-		}),
-	};
+  const style = {
+    xxLarge: css({
+      fontSize: Theme.heading.xxLarge.fontSize,
+      lineHeight: Theme.heading.xxLarge.lineHeight,
+    }),
+    xLarge: css({
+      fontSize: Theme.heading.xLarge.fontSize,
+      lineHeight: Theme.heading.xLarge.lineHeight,
+    }),
+    large: css({
+      fontSize: Theme.heading.large.fontSize,
+      lineHeight: Theme.heading.large.lineHeight,
+    }),
+    medium: css({
+      fontSize: Theme.heading.medium.fontSize,
+      lineHeight: Theme.heading.medium.lineHeight,
+    }),
+    small: css({
+      fontSize: Theme.heading.small.fontSize,
+      lineHeight: Theme.heading.small.lineHeight,
+    }),
+    xSmall: css({
+      fontSize: Theme.heading.xSmall.fontSize,
+      lineHeight: Theme.heading.xSmall.lineHeight,
+    }),
+  };
 
-	return style[size];
+  return style[size];
 };
diff --git a/packages/waggle-design-system/src/components/Heading/Heading.tsx b/packages/waggle-design-system/src/components/Heading/Heading.tsx
index 885e97a..bbef568 100644
--- a/packages/waggle-design-system/src/components/Heading/Heading.tsx
+++ b/packages/waggle-design-system/src/components/Heading/Heading.tsx
@@ -5,26 +5,26 @@ import type { Size } from "@/types/common";
 import { headingStyle } from "@/components/Heading/Heading.style";
 
 export interface HeadingProps extends ComponentPropsWithoutRef<"h4"> {
-	size?: Size;
+  size?: Size;
 }
 
 const TAG_BY_SIZE = {
-	xxLarge: "h1",
-	xLarge: "h2",
-	large: "h3",
-	medium: "h4",
-	small: "h5",
-	xSmall: "h6",
+  xxLarge: "h1",
+  xLarge: "h2",
+  large: "h3",
+  medium: "h4",
+  small: "h5",
+  xSmall: "h6",
 } as const;
 
 const Heading = ({ size = "medium", children, ...attributes }: HeadingProps) => {
-	const HeadingTag = TAG_BY_SIZE[size];
+  const HeadingTag = TAG_BY_SIZE[size];
 
-	return (
-		<HeadingTag css={headingStyle(size)} {...attributes}>
-			{children}
-		</HeadingTag>
-	);
+  return (
+    <HeadingTag css={headingStyle(size)} {...attributes}>
+      {children}
+    </HeadingTag>
+  );
 };
 
 export default Heading;
diff --git a/packages/waggle-design-system/src/components/Logo/Logo.tsx b/packages/waggle-design-system/src/components/Logo/Logo.tsx
index 2109ecc..29f2f33 100644
--- a/packages/waggle-design-system/src/components/Logo/Logo.tsx
+++ b/packages/waggle-design-system/src/components/Logo/Logo.tsx
@@ -1,12 +1,12 @@
 import PrimaryLogo from "@/assets/svg/ic-logo.svg";
 
 interface LogoType {
-	width: number;
-	height: number;
+  width: number;
+  height: number;
 }
 
 const Logo = ({ width, height }: LogoType) => {
-	return <PrimaryLogo width={width} height={height} />;
+  return <PrimaryLogo width={width} height={height} />;
 };
 
 export default Logo;
diff --git a/packages/waggle-design-system/src/components/MainContainer/MainContainer.style.ts b/packages/waggle-design-system/src/components/MainContainer/MainContainer.style.ts
index 389001c..dcb454b 100644
--- a/packages/waggle-design-system/src/components/MainContainer/MainContainer.style.ts
+++ b/packages/waggle-design-system/src/components/MainContainer/MainContainer.style.ts
@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 
 export const sectionStyle = css({
-	width: "1144px",
-	margin: "0 auto",
-	justifyContent: "center",
+  width: "1144px",
+  margin: "0 auto",
+  justifyContent: "center",
 });
diff --git a/packages/waggle-design-system/src/components/MainContainer/MainContainer.tsx b/packages/waggle-design-system/src/components/MainContainer/MainContainer.tsx
index 673f1dd..6e7fa1e 100644
--- a/packages/waggle-design-system/src/components/MainContainer/MainContainer.tsx
+++ b/packages/waggle-design-system/src/components/MainContainer/MainContainer.tsx
@@ -4,11 +4,11 @@ import Box from "@/components/Box/Box";
 import { sectionStyle } from "@/components/MainContainer/MainContainer.style";
 
 const MainContainer = ({ children }: { children: ReactNode }) => {
-	return (
-		<Box tag="main" css={sectionStyle}>
-			{children}
-		</Box>
-	);
+  return (
+    <Box tag="main" css={sectionStyle}>
+      {children}
+    </Box>
+  );
 };
 
 export default MainContainer;
diff --git a/packages/waggle-design-system/src/components/Skeleton/Skeleton.style.ts b/packages/waggle-design-system/src/components/Skeleton/Skeleton.style.ts
index 506466d..3ce04ff 100644
--- a/packages/waggle-design-system/src/components/Skeleton/Skeleton.style.ts
+++ b/packages/waggle-design-system/src/components/Skeleton/Skeleton.style.ts
@@ -15,13 +15,13 @@ const skeletonAnimation = keyframes`
 `;
 
 export const skeletonStyle = (width: string, height: string, variant: "square" | "circle") =>
-	css({
-		width,
-		height: variant === "square" ? height : width,
-		borderRadius: variant === "square" ? Theme.spacer.spacing2 : "50%",
+  css({
+    width,
+    height: variant === "square" ? height : width,
+    borderRadius: variant === "square" ? Theme.spacer.spacing2 : "50%",
 
-		background: `linear-gradient(-90deg,${Theme.color.gray100}, ${Theme.color.gray200}, ${Theme.color.gray100}, ${Theme.color.gray200})`,
-		backgroundSize: "400%",
+    background: `linear-gradient(-90deg,${Theme.color.gray100}, ${Theme.color.gray200}, ${Theme.color.gray100}, ${Theme.color.gray200})`,
+    backgroundSize: "400%",
 
-		animation: `${skeletonAnimation} 5s infinite ease-out`,
-	});
+    animation: `${skeletonAnimation} 5s infinite ease-out`,
+  });
diff --git a/packages/waggle-design-system/src/components/Skeleton/Skeleton.tsx b/packages/waggle-design-system/src/components/Skeleton/Skeleton.tsx
index 7412e26..5536d27 100644
--- a/packages/waggle-design-system/src/components/Skeleton/Skeleton.tsx
+++ b/packages/waggle-design-system/src/components/Skeleton/Skeleton.tsx
@@ -3,28 +3,28 @@ import type { ComponentPropsWithoutRef } from "react";
 import { skeletonStyle } from "@/components/Skeleton/Skeleton.style";
 
 export interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
-	width?: string;
-	height?: string;
-	/**
-	 * Skeleton 모양
-	 *
-	 * @default 'square'
-	 */
-	variant?: "square" | "circle";
+  width?: string;
+  height?: string;
+  /**
+   * Skeleton 모양
+   *
+   * @default 'square'
+   */
+  variant?: "square" | "circle";
 }
 
 const Skeleton = ({
-	width = "100%",
-	height = "24px",
-	variant = "square",
-	className = "",
-	...attributes
+  width = "100%",
+  height = "24px",
+  variant = "square",
+  className = "",
+  ...attributes
 }: SkeletonProps) => (
-	<div
-		css={skeletonStyle(width, height, variant)}
-		className={`skeleton ${className}`}
-		{...attributes}
-	/>
+  <div
+    css={skeletonStyle(width, height, variant)}
+    className={`skeleton ${className}`}
+    {...attributes}
+  />
 );
 
 export default Skeleton;
diff --git a/packages/waggle-design-system/src/components/Slider/Slider.tsx b/packages/waggle-design-system/src/components/Slider/Slider.tsx
index 4bddab0..7c53268 100644
--- a/packages/waggle-design-system/src/components/Slider/Slider.tsx
+++ b/packages/waggle-design-system/src/components/Slider/Slider.tsx
@@ -5,34 +5,34 @@ import Flex from "@/components/Flex/Flex";
 import useSlider from "@/hooks/useSlider";
 
 const Slider = ({
-	children,
-	dataLength,
-	displayCount,
-	cardBoxstyle,
-	leftIcon,
-	rightIcon,
+  children,
+  dataLength,
+  displayCount,
+  cardBoxstyle,
+  leftIcon,
+  rightIcon,
 }: {
-	children: React.ReactNode;
-	dataLength: number;
-	displayCount: number;
-	cardBoxstyle: (currentIndex: number) => SerializedStyles;
-	leftIcon: React.ReactNode;
-	rightIcon: React.ReactNode;
+  children: React.ReactNode;
+  dataLength: number;
+  displayCount: number;
+  cardBoxstyle: (currentIndex: number) => SerializedStyles;
+  leftIcon: React.ReactNode;
+  rightIcon: React.ReactNode;
 }) => {
-	const { currentIndex, handlePrevOnClick, handleNextOnClick } = useSlider(
-		dataLength,
-		displayCount,
-	);
-	return (
-		<Box style={{ position: "relative" }}>
-			{currentIndex !== 0 && <Box onClick={handlePrevOnClick}>{leftIcon}</Box>}
-			<Flex style={{ overflow: "hidden" }}>
-				<Box css={cardBoxstyle(currentIndex)}>{children}</Box>
-			</Flex>
-			{currentIndex <= dataLength - displayCount && (
-				<Box onClick={handleNextOnClick}>{rightIcon}</Box>
-			)}
-		</Box>
-	);
+  const { currentIndex, handlePrevOnClick, handleNextOnClick } = useSlider(
+    dataLength,
+    displayCount,
+  );
+  return (
+    <Box style={{ position: "relative" }}>
+      {currentIndex !== 0 && <Box onClick={handlePrevOnClick}>{leftIcon}</Box>}
+      <Flex style={{ overflow: "hidden" }}>
+        <Box css={cardBoxstyle(currentIndex)}>{children}</Box>
+      </Flex>
+      {currentIndex <= dataLength - displayCount && (
+        <Box onClick={handleNextOnClick}>{rightIcon}</Box>
+      )}
+    </Box>
+  );
 };
 export default Slider;
diff --git a/packages/waggle-design-system/src/components/SortButton/SortButton.style.ts b/packages/waggle-design-system/src/components/SortButton/SortButton.style.ts
index 0166cd5..37ec66f 100644
--- a/packages/waggle-design-system/src/components/SortButton/SortButton.style.ts
+++ b/packages/waggle-design-system/src/components/SortButton/SortButton.style.ts
@@ -3,6 +3,6 @@ import { css } from "@emotion/react";
 import { Theme } from "@/styles/Theme";
 
 export const textStyle = css({
-	color: Theme.color.text_02,
-	fontWeight: 500,
+  color: Theme.color.text_02,
+  fontWeight: 500,
 });
diff --git a/packages/waggle-design-system/src/components/SortButton/SortButton.tsx b/packages/waggle-design-system/src/components/SortButton/SortButton.tsx
index 8241d19..01ac99e 100644
--- a/packages/waggle-design-system/src/components/SortButton/SortButton.tsx
+++ b/packages/waggle-design-system/src/components/SortButton/SortButton.tsx
@@ -7,19 +7,19 @@ import Text from "@/components/Text/Text";
 import { Theme } from "@/styles/Theme";
 
 const SortButton = ({ defaultText }: sortButtonType) => {
-	return (
-		<Flex
-			styles={{
-				align: "center",
-				padding: "2px 6px 2px 12px",
-				borderRadius: "4px",
-				border: `1px solid ${Theme.color.border}`,
-			}}
-		>
-			<Text css={textStyle}>{defaultText}</Text>
-			<SortArrowIcon />
-		</Flex>
-	);
+  return (
+    <Flex
+      styles={{
+        align: "center",
+        padding: "2px 6px 2px 12px",
+        borderRadius: "4px",
+        border: `1px solid ${Theme.color.border}`,
+      }}
+    >
+      <Text css={textStyle}>{defaultText}</Text>
+      <SortArrowIcon />
+    </Flex>
+  );
 };
 
 export default SortButton;
diff --git a/packages/waggle-design-system/src/components/Tag/Tag.style.ts b/packages/waggle-design-system/src/components/Tag/Tag.style.ts
index 41851a6..1bc93ca 100644
--- a/packages/waggle-design-system/src/components/Tag/Tag.style.ts
+++ b/packages/waggle-design-system/src/components/Tag/Tag.style.ts
@@ -3,14 +3,14 @@ import { css } from "@emotion/react";
 import { Theme } from "@/styles/Theme";
 
 export const tagStyle = (color: string) => {
-	return css({
-		justifyContent: "center",
-		alignItems: "center",
-		padding: "4px 10px",
-		borderRadius: "18px",
-		backgroundColor: color,
-		color: Theme.color.text,
-		cursor: "pointer",
-		fontWeight: 500,
-	});
+  return css({
+    justifyContent: "center",
+    alignItems: "center",
+    padding: "4px 10px",
+    borderRadius: "18px",
+    backgroundColor: color,
+    color: Theme.color.text,
+    cursor: "pointer",
+    fontWeight: 500,
+  });
 };
diff --git a/packages/waggle-design-system/src/components/Tag/Tag.tsx b/packages/waggle-design-system/src/components/Tag/Tag.tsx
index 63c73bf..171a1a1 100644
--- a/packages/waggle-design-system/src/components/Tag/Tag.tsx
+++ b/packages/waggle-design-system/src/components/Tag/Tag.tsx
@@ -5,26 +5,26 @@ import { Theme } from "@/styles/Theme";
 import { generateTagStyle, generateTagName } from "@/utils/generateTag";
 
 interface TagParams {
-	tagText: string;
-	isResolveTag?: boolean;
+  tagText: string;
+  isResolveTag?: boolean;
 }
 
 const Tag = ({ tagText, isResolveTag }: TagParams) => {
-	if (isResolveTag) {
-		return (
-			<Flex
-				css={tagStyle(tagText === "RESOLVED" ? Theme.color.btn_success : Theme.color.btn_danger)}
-			>
-				<Text>{tagText === "RESOLVED" ? "해결" : "미해결"}</Text>
-			</Flex>
-		);
-	}
+  if (isResolveTag) {
+    return (
+      <Flex
+        css={tagStyle(tagText === "RESOLVED" ? Theme.color.btn_success : Theme.color.btn_danger)}
+      >
+        <Text>{tagText === "RESOLVED" ? "해결" : "미해결"}</Text>
+      </Flex>
+    );
+  }
 
-	return (
-		<Flex css={tagStyle(generateTagStyle(tagText))}>
-			<Text>{generateTagName(tagText)}</Text>
-		</Flex>
-	);
+  return (
+    <Flex css={tagStyle(generateTagStyle(tagText))}>
+      <Text>{generateTagName(tagText)}</Text>
+    </Flex>
+  );
 };
 
 export default Tag;
diff --git a/packages/waggle-design-system/src/components/Text/MentionChecker/MentionChecker.style.ts b/packages/waggle-design-system/src/components/Text/MentionChecker/MentionChecker.style.ts
index f930e17..e87a4e6 100644
--- a/packages/waggle-design-system/src/components/Text/MentionChecker/MentionChecker.style.ts
+++ b/packages/waggle-design-system/src/components/Text/MentionChecker/MentionChecker.style.ts
@@ -3,20 +3,20 @@ import { css } from "@emotion/react";
 import { Theme } from "@/styles/Theme";
 
 export const mentionBoxStyle = css({
-	wordBreak: "break-word",
-	width: "300px",
-	display: "inline",
-	whiteSpace: "normal",
+  wordBreak: "break-word",
+  width: "300px",
+  display: "inline",
+  whiteSpace: "normal",
 });
 
 export const mentionCheckerStyle = css({
-	color: Theme.color.brand_primary,
-	display: "inline",
-	fontSize: "14px",
+  color: Theme.color.brand_primary,
+  display: "inline",
+  fontSize: "14px",
 });
 
 export const mentionCheckerDefaultStyle = css({
-	color: Theme.color.text,
-	display: "inline",
-	fontSize: "14px",
+  color: Theme.color.text,
+  display: "inline",
+  fontSize: "14px",
 });
diff --git a/packages/waggle-design-system/src/components/Text/MentionChecker/MentionChecker.tsx b/packages/waggle-design-system/src/components/Text/MentionChecker/MentionChecker.tsx
index f0411f1..4e287c9 100644
--- a/packages/waggle-design-system/src/components/Text/MentionChecker/MentionChecker.tsx
+++ b/packages/waggle-design-system/src/components/Text/MentionChecker/MentionChecker.tsx
@@ -1,36 +1,36 @@
 import Box from "@/components/Box/Box";
 import {
-	mentionCheckerStyle,
-	mentionBoxStyle,
-	mentionCheckerDefaultStyle,
+  mentionCheckerStyle,
+  mentionBoxStyle,
+  mentionCheckerDefaultStyle,
 } from "@/components/Text/MentionChecker/MentionChecker.style";
 
 const MentionChecker = ({ content }: { content: string }) => {
-	// 문자열을 @ 기준으로 분리
-	const parts = content.split(" ");
-	return (
-		<Box tag="span" css={mentionBoxStyle}>
-			{parts.map((part, index) => {
-				// @로 시작하는 부분인지 확인
-				if (part.startsWith("@")) {
-					const replacePart = part.replace(/[[\]]/g, "");
-					// @로 시작하는 경우, 스타일을 적용하여 출력
-					return (
-						<Box tag="span" css={mentionCheckerStyle} key={index}>
-							{replacePart}
-						</Box>
-					);
-				} else {
-					// @로 시작하지 않는 경우 그냥 출력
-					return (
-						<Box tag="span" key={index} css={mentionCheckerDefaultStyle}>
-							&nbsp;{part}
-						</Box>
-					);
-				}
-			})}
-		</Box>
-	);
+  // 문자열을 @ 기준으로 분리
+  const parts = content.split(" ");
+  return (
+    <Box tag="span" css={mentionBoxStyle}>
+      {parts.map((part, index) => {
+        // @로 시작하는 부분인지 확인
+        if (part.startsWith("@")) {
+          const replacePart = part.replace(/[[\]]/g, "");
+          // @로 시작하는 경우, 스타일을 적용하여 출력
+          return (
+            <Box tag="span" css={mentionCheckerStyle} key={index}>
+              {replacePart}
+            </Box>
+          );
+        } else {
+          // @로 시작하지 않는 경우 그냥 출력
+          return (
+            <Box tag="span" key={index} css={mentionCheckerDefaultStyle}>
+              &nbsp;{part}
+            </Box>
+          );
+        }
+      })}
+    </Box>
+  );
 };
 
 export default MentionChecker;
diff --git a/packages/waggle-design-system/src/components/Text/Text.style.ts b/packages/waggle-design-system/src/components/Text/Text.style.ts
index ca63280..02885c9 100644
--- a/packages/waggle-design-system/src/components/Text/Text.style.ts
+++ b/packages/waggle-design-system/src/components/Text/Text.style.ts
@@ -5,29 +5,29 @@ import type { TextProps } from "@/components/Text/Text";
 import { Theme } from "@/styles/Theme";
 
 export const textStyle = (size: Required<TextProps>["size"]) => {
-	const style = {
-		xLarge: css({
-			fontSize: Theme.text.xLarge.fontSize,
-			lineHeight: Theme.text.xLarge.lineHeight,
-		}),
-		large: css({
-			fontSize: Theme.text.large.fontSize,
-			lineHeight: Theme.text.large.lineHeight,
-		}),
-		// default text setting
-		medium: css({
-			fontSize: Theme.text.medium.fontSize,
-			lineHeight: Theme.text.medium.lineHeight,
-		}),
-		small: css({
-			fontSize: Theme.text.small.fontSize,
-			lineHeight: Theme.text.small.lineHeight,
-		}),
-		xSmall: css({
-			fontSize: Theme.text.xSmall.fontSize,
-			lineHeight: Theme.text.xSmall.lineHeight,
-		}),
-	};
+  const style = {
+    xLarge: css({
+      fontSize: Theme.text.xLarge.fontSize,
+      lineHeight: Theme.text.xLarge.lineHeight,
+    }),
+    large: css({
+      fontSize: Theme.text.large.fontSize,
+      lineHeight: Theme.text.large.lineHeight,
+    }),
+    // default text setting
+    medium: css({
+      fontSize: Theme.text.medium.fontSize,
+      lineHeight: Theme.text.medium.lineHeight,
+    }),
+    small: css({
+      fontSize: Theme.text.small.fontSize,
+      lineHeight: Theme.text.small.lineHeight,
+    }),
+    xSmall: css({
+      fontSize: Theme.text.xSmall.fontSize,
+      lineHeight: Theme.text.xSmall.lineHeight,
+    }),
+  };
 
-	return style[size];
+  return style[size];
 };
diff --git a/packages/waggle-design-system/src/components/Text/Text.tsx b/packages/waggle-design-system/src/components/Text/Text.tsx
index 4eb44cd..899497b 100644
--- a/packages/waggle-design-system/src/components/Text/Text.tsx
+++ b/packages/waggle-design-system/src/components/Text/Text.tsx
@@ -5,15 +5,15 @@ import type { Size } from "@/types/common";
 import { textStyle } from "@/components/Text/Text.style";
 
 export interface TextProps extends ComponentPropsWithoutRef<"p"> {
-	size?: Extract<Size, "xSmall" | "small" | "medium" | "large" | "xLarge">;
+  size?: Extract<Size, "xSmall" | "small" | "medium" | "large" | "xLarge">;
 }
 
 const Text = ({ size = "medium", children, ...attributes }: TextProps) => {
-	return (
-		<p css={textStyle(size)} {...attributes}>
-			{children}
-		</p>
-	);
+  return (
+    <p css={textStyle(size)} {...attributes}>
+      {children}
+    </p>
+  );
 };
 
 export default Text;
diff --git a/packages/waggle-design-system/src/constants/tag.ts b/packages/waggle-design-system/src/constants/tag.ts
index e7a2230..c528dc3 100644
--- a/packages/waggle-design-system/src/constants/tag.ts
+++ b/packages/waggle-design-system/src/constants/tag.ts
@@ -1,24 +1,24 @@
 import { Theme } from "@/styles/Theme";
 
 export const SIREN_TAG_CATEGORY = [
-	{
-		tagName: "임시보호",
-		color: Theme.color.btn_01,
-		category: "PROTECT",
-	},
-	{
-		tagName: "강아지 찾아요",
-		color: Theme.color.btn_02,
-		category: "FIND_PET",
-	},
-	{
-		tagName: "주인 찾아요",
-		color: Theme.color.btn_03,
-		category: "FIND_OWNER",
-	},
-	{
-		tagName: "기타",
-		color: Theme.color.btn_04,
-		category: "ETC",
-	},
+  {
+    tagName: "임시보호",
+    color: Theme.color.btn_01,
+    category: "PROTECT",
+  },
+  {
+    tagName: "강아지 찾아요",
+    color: Theme.color.btn_02,
+    category: "FIND_PET",
+  },
+  {
+    tagName: "주인 찾아요",
+    color: Theme.color.btn_03,
+    category: "FIND_OWNER",
+  },
+  {
+    tagName: "기타",
+    color: Theme.color.btn_04,
+    category: "ETC",
+  },
 ];
diff --git a/packages/waggle-design-system/src/hooks/useClickOutSide.ts b/packages/waggle-design-system/src/hooks/useClickOutSide.ts
index 944c435..fcfe96f 100644
--- a/packages/waggle-design-system/src/hooks/useClickOutSide.ts
+++ b/packages/waggle-design-system/src/hooks/useClickOutSide.ts
@@ -1,18 +1,18 @@
 import { useEffect } from "react";
 
 const useClickOutSide = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
-	const handleClick = (e: MouseEvent) => {
-		if (ref.current && !ref.current.contains(e.target as Node)) {
-			callback();
-		}
-	};
+  const handleClick = (e: MouseEvent) => {
+    if (ref.current && !ref.current.contains(e.target as Node)) {
+      callback();
+    }
+  };
 
-	useEffect(() => {
-		window.addEventListener("mousedown", handleClick);
-		return () => {
-			window.removeEventListener("mousedown", handleClick);
-		};
-	}, []);
+  useEffect(() => {
+    window.addEventListener("mousedown", handleClick);
+    return () => {
+      window.removeEventListener("mousedown", handleClick);
+    };
+  }, []);
 };
 
 export default useClickOutSide;
diff --git a/packages/waggle-design-system/src/hooks/useSlider.ts b/packages/waggle-design-system/src/hooks/useSlider.ts
index 8adfe3a..1ce4438 100644
--- a/packages/waggle-design-system/src/hooks/useSlider.ts
+++ b/packages/waggle-design-system/src/hooks/useSlider.ts
@@ -1,19 +1,19 @@
 import { useState } from "react";
 
 const useSlider = (dataLength: number, slideAmount: number) => {
-	const [currentIndex, setCurrentIndex] = useState(0);
-	const handlePrevOnClick = () => {
-		setCurrentIndex((prevIndex) =>
-			prevIndex > 0 ? prevIndex - slideAmount : dataLength - slideAmount,
-		);
-	};
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const handlePrevOnClick = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex > 0 ? prevIndex - slideAmount : dataLength - slideAmount,
+    );
+  };
 
-	const handleNextOnClick = () => {
-		setCurrentIndex((prevIndex) =>
-			prevIndex < dataLength - slideAmount ? prevIndex + slideAmount : 0,
-		);
-	};
-	return { currentIndex, handlePrevOnClick, handleNextOnClick };
+  const handleNextOnClick = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex < dataLength - slideAmount ? prevIndex + slideAmount : 0,
+    );
+  };
+  return { currentIndex, handlePrevOnClick, handleNextOnClick };
 };
 
 export default useSlider;
diff --git a/packages/waggle-design-system/src/index.tsx b/packages/waggle-design-system/src/index.tsx
index fe5d8b3..39f441d 100644
--- a/packages/waggle-design-system/src/index.tsx
+++ b/packages/waggle-design-system/src/index.tsx
@@ -20,24 +20,24 @@ import { Theme } from "@/styles/Theme";
 import WaggleProvider from "@/WaggleProvider";
 
 export {
-	Box,
-	Button,
-	Divider,
-	Dropdown,
-	DropdownButton,
-	DropdownItem,
-	DropdownList,
-	Flex,
-	Heading,
-	Logo,
-	MainContainer,
-	Skeleton,
-	Slider,
-	SortButton,
-	Tag,
-	MentionChecker,
-	Text,
-	WaggleProvider,
-	useSlider,
-	Theme,
+  Box,
+  Button,
+  Divider,
+  Dropdown,
+  DropdownButton,
+  DropdownItem,
+  DropdownList,
+  Flex,
+  Heading,
+  Logo,
+  MainContainer,
+  Skeleton,
+  Slider,
+  SortButton,
+  Tag,
+  MentionChecker,
+  Text,
+  WaggleProvider,
+  useSlider,
+  Theme,
 };
diff --git a/packages/waggle-design-system/src/styles/GlobalStyle.ts b/packages/waggle-design-system/src/styles/GlobalStyle.ts
index f36dfd6..ca2a644 100644
--- a/packages/waggle-design-system/src/styles/GlobalStyle.ts
+++ b/packages/waggle-design-system/src/styles/GlobalStyle.ts
@@ -1,36 +1,36 @@
 import { css } from "@emotion/react";
 
 export const GlobalStyle = css`
-	* {
-		padding: 0;
-		margin: 0;
-		box-sizing: border-box;
-	}
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
 
-	ul,
-	ol,
-	li {
-		list-style: none;
-	}
+  ul,
+  ol,
+  li {
+    list-style: none;
+  }
 
-	html,
-	body {
-		font-family: "Pretendard";
-		font-size: 16px;
-	}
+  html,
+  body {
+    font-family: "Pretendard";
+    font-size: 16px;
+  }
 
-	a {
-		text-decoration: none;
-		color: inherit;
-	}
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
 
-	@font-face {
-		font-family: "Pretendard";
-		src: url("/fonts/Pretendard.ttf");
-	}
+  @font-face {
+    font-family: "Pretendard";
+    src: url("/fonts/Pretendard.ttf");
+  }
 
-	@font-face {
-		font-family: "Montserrat";
-		src: url("/fonts/Montserrat.ttf");
-	}
+  @font-face {
+    font-family: "Montserrat";
+    src: url("/fonts/Montserrat.ttf");
+  }
 `;
diff --git a/packages/waggle-design-system/src/styles/Theme.ts b/packages/waggle-design-system/src/styles/Theme.ts
index f13e55e..fd00603 100644
--- a/packages/waggle-design-system/src/styles/Theme.ts
+++ b/packages/waggle-design-system/src/styles/Theme.ts
@@ -1,117 +1,117 @@
 const color = {
-	brand_primary: "#ff9900",
-	text: "#1b1b1b",
-	text_02: "#282828",
-	input_text: "#292929",
-	readonly_text: "#686868",
-	disabled_text: "#7f7f7f",
-	btn_01: "#ffcc00",
-	btn_02: "#fff700",
-	btn_03: "#81d93a",
-	btn_04: "#ffcc80",
-	btn_danger: "#ff552d",
-	btn_success: "#d2d2d2",
-	border: "#d2d2d2",
-	white: "#fff",
-	black: "#000",
-	transparent: "transparent",
-	divider_gray: "#e6e6e6",
-	team_1: "#00BDBD",
-	team_2: "#0075FF",
-	team_3: "#FF9900",
-	team_4: "#FA6C2F",
-	team_5: "#00C920",
-	team_6: "#FC727A",
-	team_7: "#4E3212",
-	team_8: "#3F3F3F",
-	gray100: "#f3f3f3",
-	gray200: "#e8e8e8",
-	saturday: "#0075FF",
+  brand_primary: "#ff9900",
+  text: "#1b1b1b",
+  text_02: "#282828",
+  input_text: "#292929",
+  readonly_text: "#686868",
+  disabled_text: "#7f7f7f",
+  btn_01: "#ffcc00",
+  btn_02: "#fff700",
+  btn_03: "#81d93a",
+  btn_04: "#ffcc80",
+  btn_danger: "#ff552d",
+  btn_success: "#d2d2d2",
+  border: "#d2d2d2",
+  white: "#fff",
+  black: "#000",
+  transparent: "transparent",
+  divider_gray: "#e6e6e6",
+  team_1: "#00BDBD",
+  team_2: "#0075FF",
+  team_3: "#FF9900",
+  team_4: "#FA6C2F",
+  team_5: "#00C920",
+  team_6: "#FC727A",
+  team_7: "#4E3212",
+  team_8: "#3F3F3F",
+  gray100: "#f3f3f3",
+  gray200: "#e8e8e8",
+  saturday: "#0075FF",
 };
 
 const text = {
-	xLarge: {
-		fontSize: "20px",
-		lineHeight: "28px",
-	},
-	large: {
-		fontSize: "18px",
-		lineHeight: "26px",
-	},
-	// default text setting
-	medium: {
-		fontSize: "16px",
-		lineHeight: "24px",
-	},
-	small: {
-		fontSize: "14px",
-		lineHeight: "20px",
-	},
-	xSmall: {
-		fontSize: "12px",
-		lineHeight: "20px",
-	},
+  xLarge: {
+    fontSize: "20px",
+    lineHeight: "28px",
+  },
+  large: {
+    fontSize: "18px",
+    lineHeight: "26px",
+  },
+  // default text setting
+  medium: {
+    fontSize: "16px",
+    lineHeight: "24px",
+  },
+  small: {
+    fontSize: "14px",
+    lineHeight: "20px",
+  },
+  xSmall: {
+    fontSize: "12px",
+    lineHeight: "20px",
+  },
 };
 
 const heading = {
-	xxLarge: {
-		fontSize: "40px",
-		lineHeight: "48px",
-	},
-	xLarge: {
-		fontSize: "36px",
-		lineHeight: "44px",
-	},
-	large: {
-		fontSize: "32px",
-		lineHeight: "40px",
-	},
-	// default heading setting
-	medium: {
-		fontSize: "28px",
-		lineHeight: "36px",
-	},
-	small: {
-		fontSize: "24px",
-		lineHeight: "32px",
-	},
-	xSmall: {
-		fontSize: "20px",
-		lineHeight: "28px",
-	},
+  xxLarge: {
+    fontSize: "40px",
+    lineHeight: "48px",
+  },
+  xLarge: {
+    fontSize: "36px",
+    lineHeight: "44px",
+  },
+  large: {
+    fontSize: "32px",
+    lineHeight: "40px",
+  },
+  // default heading setting
+  medium: {
+    fontSize: "28px",
+    lineHeight: "36px",
+  },
+  small: {
+    fontSize: "24px",
+    lineHeight: "32px",
+  },
+  xSmall: {
+    fontSize: "20px",
+    lineHeight: "28px",
+  },
 };
 
 const spacer = {
-	spacing0: "0",
-	spacing1: "4px",
-	spacing1_5: "6px",
-	spacing2: "8px",
-	spacing2_5: "10px",
-	spacing3: "12px",
-	spacing3_5: "14px",
-	spacing4: "16px",
-	spacing4_5: "18px",
-	spacing5: "20px",
-	spacing5_5: "22px",
-	spacing6: "24px",
-	spacing7_5: "30px",
-	spacing8: "32px",
-	spacing9: "36px",
-	spacing10: "40px",
-	spacing12: "48px",
-	spacing16: "64px",
+  spacing0: "0",
+  spacing1: "4px",
+  spacing1_5: "6px",
+  spacing2: "8px",
+  spacing2_5: "10px",
+  spacing3: "12px",
+  spacing3_5: "14px",
+  spacing4: "16px",
+  spacing4_5: "18px",
+  spacing5: "20px",
+  spacing5_5: "22px",
+  spacing6: "24px",
+  spacing7_5: "30px",
+  spacing8: "32px",
+  spacing9: "36px",
+  spacing10: "40px",
+  spacing12: "48px",
+  spacing16: "64px",
 };
 
 export const boxShadow = {
-	shadow1: "0px 0px 2px 0px rgba(0, 0, 0, 0.25)",
-	shadow2: "0px 2px 5px 0px rgba(0, 40, 37, 0.1)",
-	shadow3: "0px 2px 7px 0px rgba(0, 40, 37, 0.1)",
+  shadow1: "0px 0px 2px 0px rgba(0, 0, 0, 0.25)",
+  shadow2: "0px 2px 5px 0px rgba(0, 40, 37, 0.1)",
+  shadow3: "0px 2px 7px 0px rgba(0, 40, 37, 0.1)",
 };
 
 export const Theme = {
-	color,
-	text,
-	heading,
-	spacer,
-	boxShadow,
+  color,
+  text,
+  heading,
+  spacer,
+  boxShadow,
 };
diff --git a/packages/waggle-design-system/src/styles/style.d.ts b/packages/waggle-design-system/src/styles/style.d.ts
index 33a450f..3f91b2a 100644
--- a/packages/waggle-design-system/src/styles/style.d.ts
+++ b/packages/waggle-design-system/src/styles/style.d.ts
@@ -1,18 +1,18 @@
 import "@emotion/react";
 
 interface TextStyle {
-	[key: string]: {
-		fontSize: string;
-		lineHeight: string;
-	};
+  [key: string]: {
+    fontSize: string;
+    lineHeight: string;
+  };
 }
 
 declare module "@emotion/react" {
-	export interface Theme {
-		color: { [key: string]: string };
-		text: TextStyle;
-		heading: TextStyle;
-		spacer: { [key: string]: string };
-		boxShadow: { [key: string]: string };
-	}
+  export interface Theme {
+    color: { [key: string]: string };
+    text: TextStyle;
+    heading: TextStyle;
+    spacer: { [key: string]: string };
+    boxShadow: { [key: string]: string };
+  }
 }
diff --git a/packages/waggle-design-system/src/types/common.ts b/packages/waggle-design-system/src/types/common.ts
index 7d7eac2..c64da2a 100644
--- a/packages/waggle-design-system/src/types/common.ts
+++ b/packages/waggle-design-system/src/types/common.ts
@@ -1,20 +1,20 @@
 import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 
 export interface DropdownButtonType extends ButtonHTMLAttributes<HTMLButtonElement> {
-	children: ReactNode;
+  children: ReactNode;
 }
 
 export interface DropdonwListType extends HTMLAttributes<HTMLDivElement> {
-	children: ReactNode;
+  children: ReactNode;
 }
 
 export interface DropDownItemType extends HTMLAttributes<HTMLDivElement> {
-	icon?: ReactNode;
-	children: ReactNode;
+  icon?: ReactNode;
+  children: ReactNode;
 }
 
 export type Size = "xSmall" | "small" | "medium" | "large" | "xLarge" | "xxLarge";
 
 export interface sortButtonType {
-	defaultText: string;
+  defaultText: string;
 }
diff --git a/packages/waggle-design-system/src/utils/generateTag.ts b/packages/waggle-design-system/src/utils/generateTag.ts
index 81b34f8..b57aa1b 100644
--- a/packages/waggle-design-system/src/utils/generateTag.ts
+++ b/packages/waggle-design-system/src/utils/generateTag.ts
@@ -1,37 +1,37 @@
 import { SIREN_TAG_CATEGORY } from "@/constants/tag";
 
 export const generateTagStyle = (category: string): string => {
-	let color = "";
+  let color = "";
 
-	SIREN_TAG_CATEGORY.map((data) => {
-		if (category === data.category) {
-			color = data.color;
-		}
-	});
+  SIREN_TAG_CATEGORY.map((data) => {
+    if (category === data.category) {
+      color = data.color;
+    }
+  });
 
-	return color;
+  return color;
 };
 
 export const generateTagName = (category: string): string => {
-	let tagName = "";
+  let tagName = "";
 
-	SIREN_TAG_CATEGORY.map((data) => {
-		if (category === data.category) {
-			tagName = data.tagName;
-		}
-	});
+  SIREN_TAG_CATEGORY.map((data) => {
+    if (category === data.category) {
+      tagName = data.tagName;
+    }
+  });
 
-	return tagName;
+  return tagName;
 };
 
 export const generateTagCategory = (tagName: string): string => {
-	let category = "";
+  let category = "";
 
-	SIREN_TAG_CATEGORY.map((data) => {
-		if (tagName === data.tagName) {
-			category = data.category;
-		}
-	});
+  SIREN_TAG_CATEGORY.map((data) => {
+    if (tagName === data.tagName) {
+      category = data.category;
+    }
+  });
 
-	return category;
+  return category;
 };
diff --git a/packages/waggle-design-system/webpack.config.js b/packages/waggle-design-system/webpack.config.js
index 10cb6eb..b1a6726 100644
--- a/packages/waggle-design-system/webpack.config.js
+++ b/packages/waggle-design-system/webpack.config.js
@@ -9,66 +9,66 @@ const webpack = require("webpack");
 const prod = (process.env.NODE_ENV = "production");
 
 module.exports = {
-	mode: prod ? "production" : "development",
-	entry: "./src/index.tsx",
-	resolve: {
-		extensions: [".js", ".jsx", ".ts", ".tsx"],
-	},
+  mode: prod ? "production" : "development",
+  entry: "./src/index.tsx",
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
+  },
 
-	module: {
-		rules: [
-			{
-				test: /\.(js|jsx|ts|tsx)$/,
-				exclude: /node_modules/,
-				use: ["ts-loader"],
-			},
-			{
-				test: /\.svg$/i,
-				issuer: /\.[jt]sx?$/,
-				use: ["@svgr/webpack"],
-			},
-			{
-				test: /\.svg$/i,
-				issuer: /\.style.js|style.ts$/,
-				use: ["url-loader"],
-			},
-		],
-	},
-	output: {
-		path: path.join(__dirname, "/dist"),
-		filename: "bundle.js",
-	},
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: ["ts-loader"],
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ["@svgr/webpack"],
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.style.js|style.ts$/,
+        use: ["url-loader"],
+      },
+    ],
+  },
+  output: {
+    path: path.join(__dirname, "/dist"),
+    filename: "bundle.js",
+  },
 
-	devServer: {
-		historyApiFallback: true,
-		port: 3000,
-		hot: true,
-		static: path.resolve(__dirname, "dist"),
-	},
+  devServer: {
+    historyApiFallback: true,
+    port: 3000,
+    hot: true,
+    static: path.resolve(__dirname, "dist"),
+  },
 
-	// eslint-disable-next-line no-dupe-keys
-	resolve: {
-		extensions: [".js", ".ts", ".jsx", ".tsx", ".json"],
-		alias: {
-			"@": path.resolve(__dirname, "./src"),
-			"@/components": path.resolve(__dirname, "./src/components"),
-			"@/type": path.resolve(__dirname, "./src/types"),
-			"@/hooks": path.resolve(__dirname, "./src/hooks"),
-			"@/styles": path.resolve(__dirname, "./src/styles"),
-			"@/constants": path.resolve(__dirname, "./src/constants"),
-			"@/assets": path.resolve(__dirname, "./src/assets"),
-			"@/stories": path.resolve(__dirname, "./src/stories"),
-			"@/utils": path.resolve(__dirname, "./src/utils"),
-		},
-	},
+  // eslint-disable-next-line no-dupe-keys
+  resolve: {
+    extensions: [".js", ".ts", ".jsx", ".tsx", ".json"],
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      "@/components": path.resolve(__dirname, "./src/components"),
+      "@/type": path.resolve(__dirname, "./src/types"),
+      "@/hooks": path.resolve(__dirname, "./src/hooks"),
+      "@/styles": path.resolve(__dirname, "./src/styles"),
+      "@/constants": path.resolve(__dirname, "./src/constants"),
+      "@/assets": path.resolve(__dirname, "./src/assets"),
+      "@/stories": path.resolve(__dirname, "./src/stories"),
+      "@/utils": path.resolve(__dirname, "./src/utils"),
+    },
+  },
 
-	plugins: [
-		new webpack.ProvidePlugin({
-			React: "react",
-		}),
-		new HtmlWebpackPlugin({
-			template: "./public/index.html",
-		}),
-		new webpack.HotModuleReplacementPlugin(),
-	],
+  plugins: [
+    new webpack.ProvidePlugin({
+      React: "react",
+    }),
+    new HtmlWebpackPlugin({
+      template: "./public/index.html",
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+  ],
 };
diff --git a/yarn.lock b/yarn.lock
index 513d5d9..8876466 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9953,7 +9953,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-react@npm:^7.27.1, eslint-plugin-react@npm:^7.33.2":
+"eslint-plugin-react@npm:^7.27.1, eslint-plugin-react@npm:^7.34.1":
   version: 7.34.1
   resolution: "eslint-plugin-react@npm:7.34.1"
   dependencies:
@@ -10830,7 +10830,7 @@ __metadata:
     eslint-plugin-n: "npm:^15.0.0 || ^16.0.0 "
     eslint-plugin-prettier: "npm:4.0.0"
     eslint-plugin-promise: "npm:^6.1.1"
-    eslint-plugin-react: "npm:^7.33.2"
+    eslint-plugin-react: "npm:^7.34.1"
     husky: "npm:^8.0.3"
     lint-staged: "npm:^15.0.2"
     prettier: "npm:2.8.8"
@@ -17636,6 +17636,7 @@ __metadata:
     "@storybook/react-webpack5": "npm:^7.6.8"
     "@storybook/testing-library": "npm:^0.0.14-next.2"
     "@svgr/webpack": "npm:^8.0.1"
+    "@trivago/prettier-plugin-sort-imports": "npm:^4.1.1"
     "@types/babel__core": "npm:^7"
     "@types/babel__preset-env": "npm:^7"
     "@types/eslint": "npm:^8"
@@ -17651,6 +17652,7 @@ __metadata:
     eslint-import-resolver-typescript: "npm:^3.6.1"
     eslint-plugin-import: "npm:^2.28.1"
     eslint-plugin-prettier: "npm:^5.0.1"
+    eslint-plugin-react: "npm:^7.34.1"
     eslint-plugin-react-hooks: "npm:^4.6.0"
     eslint-plugin-react-refresh: "npm:^0.4.6"
     eslint-plugin-storybook: "npm:^0.6.15"