diff --git a/.eslintrc.json b/.eslintrc.json
index c3767f46..b6e23d8d 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -25,7 +25,10 @@
     ],
     "unused-imports/no-unused-imports": "error",
     "no-else-return": ["error", { "allowElseIf": false }],
-    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { "fixStyle": "inline-type-imports" }
+    ],
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/naming-convention": [
       "error",
@@ -48,9 +51,9 @@
           "warn",
           {
             "groups": [
-              ["^next", "^react", "^@\\w", "^\\w"],
+              ["^next", "^react", "^@tanstack", "^@vanilla", "^\\w"],
               ["^\\u0000"],
-              ["^@/"],
+              ["^~", "^@"],
               ["^\\."]
             ]
           }
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
new file mode 100644
index 00000000..28bc4e3f
--- /dev/null
+++ b/.storybook/preview-body.html
@@ -0,0 +1,2 @@
+<div id="modal-root" />
+<div id="tooltip-root" />
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 33aaf274..f0e267d9 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,12 +1,13 @@
 import type { AppProps } from 'next/app';
-import Layout from '@components/Layout/Layout';
+
+import '@styles/global.css';
+
+import Layout from '@components/Layout';
 import Modal from '@components/Modal';
 import TanstackQueryProvider from '@components/Providers/TanstackQueryProvider';
-import Toast from '@components/Toast/Toast';
+import Toast from '@components/Toast';
 import { pretendard } from '@styles/font';
 
-import '@styles/global.css';
-
 const App = ({ Component, pageProps }: AppProps) => {
   return (
     <main className={pretendard.className}>
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 80b77183..b88f02b9 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,5 +1,6 @@
 import { Head, Html, Main, NextScript } from 'next/document';
-import { PORTAL_ID } from '@constants/portalId';
+
+import { PORTAL_ID } from '@constants/portal';
 
 const Document = () => {
   return (
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 03969ff9..86958a65 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -1,7 +1,7 @@
+import { BADGE_TYPE } from '@constants/badge';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Badge from './Badge';
-import { BADGE_TYPE } from './constants';
+import Badge from '.';
 
 const meta: Meta<typeof Badge> = {
   title: 'Components/Badge',
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/index.tsx
similarity index 100%
rename from src/components/Badge/Badge.tsx
rename to src/components/Badge/index.tsx
diff --git a/src/components/Badge/style.css.ts b/src/components/Badge/style.css.ts
index 7915c713..328a8aee 100644
--- a/src/components/Badge/style.css.ts
+++ b/src/components/Badge/style.css.ts
@@ -1,6 +1,7 @@
+import { recipe } from '@vanilla-extract/recipes';
+
 import { sprinkles } from '@styles/sprinkles.css';
 import { COLORS } from '@styles/tokens';
-import { recipe } from '@vanilla-extract/recipes';
 
 export const badge = recipe({
   base: [
diff --git a/src/components/Button/style.css.ts b/src/components/Button/style.css.ts
index ac2452bd..e7991ba2 100644
--- a/src/components/Button/style.css.ts
+++ b/src/components/Button/style.css.ts
@@ -1,6 +1,7 @@
+import { recipe } from '@vanilla-extract/recipes';
+
 import { sprinkles } from '@styles/sprinkles.css';
 import { COLORS } from '@styles/tokens';
-import { recipe } from '@vanilla-extract/recipes';
 
 export const button = recipe({
   variants: {
diff --git a/src/components/SvgIcon.tsx b/src/components/Icon/index.tsx
similarity index 82%
rename from src/components/SvgIcon.tsx
rename to src/components/Icon/index.tsx
index a8b23852..75858b66 100644
--- a/src/components/SvgIcon.tsx
+++ b/src/components/Icon/index.tsx
@@ -1,4 +1,4 @@
-import { iconFactory, type Icons } from '../constants/icon';
+import { iconFactory, type Icons } from '../../constants/icon';
 
 interface IconProps {
   icon: Icons;
diff --git a/src/components/Input/WriteInput/index.tsx b/src/components/Input/WriteInput/index.tsx
index 778ab7b1..ba34fc6a 100644
--- a/src/components/Input/WriteInput/index.tsx
+++ b/src/components/Input/WriteInput/index.tsx
@@ -1,11 +1,12 @@
 import type { ChangeEvent, HTMLAttributes, KeyboardEvent } from 'react';
 import { useMemo, useRef, useState } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import Icon from '@components/Icon';
 import { MAIN_INPUT_MAX_LENGTH } from '@constants/config';
 import type { UseInputReturn } from '@hooks/useInput';
 import { COLORS } from '@styles/tokens';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 
-import Icon from '../../SvgIcon';
 import * as style from './style.css';
 
 interface WriteInputProps extends HTMLAttributes<HTMLTextAreaElement> {
diff --git a/src/components/Input/WriteInput/style.css.ts b/src/components/Input/WriteInput/style.css.ts
index 80035d6a..1f934e68 100644
--- a/src/components/Input/WriteInput/style.css.ts
+++ b/src/components/Input/WriteInput/style.css.ts
@@ -1,7 +1,8 @@
-import { COLORS } from '@styles/tokens';
 import { createVar, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+import { COLORS } from '@styles/tokens';
+
 export const conatiner = style({
   display: 'flex',
   justifyContent: 'space-between',
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/index.tsx
similarity index 100%
rename from src/components/Layout/Layout.tsx
rename to src/components/Layout/index.tsx
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index b5d27bb1..e55a335e 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,4 +1,4 @@
-import { useModalStore } from '@stores/modalStore';
+import { useModalStore } from '@stores/modal';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Modal from '.';
@@ -6,13 +6,6 @@ import Modal from '.';
 const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
   component: Modal,
-  decorators: [
-    (Story) => (
-      <div style={{ height: '500px' }}>
-        <Story />
-      </div>
-    ),
-  ],
 };
 
 export default meta;
diff --git a/src/components/Modal/ModalContainer.tsx b/src/components/Modal/components/ModalContainer.tsx
similarity index 72%
rename from src/components/Modal/ModalContainer.tsx
rename to src/components/Modal/components/ModalContainer.tsx
index 441fafed..0d28e839 100644
--- a/src/components/Modal/ModalContainer.tsx
+++ b/src/components/Modal/components/ModalContainer.tsx
@@ -1,8 +1,9 @@
 import type { PropsWithChildren } from 'react';
-import { PORTAL_ID } from '@constants/portalId';
 
-import Portal from '../Portal';
-import * as styles from './style.css';
+import { PORTAL_ID } from '@constants/portal';
+
+import Portal from '../../Portal';
+import * as styles from '../style.css';
 
 const ModalContainer = ({ children }: PropsWithChildren<unknown>) => {
   return (
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index a2d5396d..0c3e3b31 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,6 +1,6 @@
-import { useModalStore } from '@stores/modalStore';
+import { useModalStore } from '@stores/modal';
 
-import DeleteArticle from './components/DeleteArticle';
+import DeleteArticle from './modals/DeleteArticle';
 
 const Modal = () => {
   const { type } = useModalStore();
diff --git a/src/components/Modal/components/DeleteArticle.tsx b/src/components/Modal/modals/DeleteArticle.tsx
similarity index 91%
rename from src/components/Modal/components/DeleteArticle.tsx
rename to src/components/Modal/modals/DeleteArticle.tsx
index 41c5ab0e..1e10506e 100644
--- a/src/components/Modal/components/DeleteArticle.tsx
+++ b/src/components/Modal/modals/DeleteArticle.tsx
@@ -1,8 +1,9 @@
-import { useModalStore } from '@stores/modalStore';
-import { COLORS } from '@styles/tokens';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 
-import ModalContainer from '../ModalContainer';
+import { useModalStore } from '@stores/modal';
+import { COLORS } from '@styles/tokens';
+
+import ModalContainer from '../components/ModalContainer';
 import * as styles from '../style.css';
 
 const DeleteArticle = () => {
diff --git a/src/components/Modal/style.css.ts b/src/components/Modal/style.css.ts
index 3d820631..760d4617 100644
--- a/src/components/Modal/style.css.ts
+++ b/src/components/Modal/style.css.ts
@@ -1,7 +1,8 @@
+import { createVar, style } from '@vanilla-extract/css';
+
 import { sprinkles } from '@styles/sprinkles.css';
 import { COLORS } from '@styles/tokens';
 import { middleLayer, positionCenter, topLayer } from '@styles/utils.css';
-import { createVar, style } from '@vanilla-extract/css';
 
 export const modalStyle = style([
   positionCenter,
diff --git a/src/components/Portal/index.tsx b/src/components/Portal/index.tsx
index 5c434ab1..d5531897 100644
--- a/src/components/Portal/index.tsx
+++ b/src/components/Portal/index.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import ReactDOM from 'react-dom';
-import type { PORTAL_ID } from '@constants/portalId';
+
+import type { PORTAL_ID } from '@constants/portal';
 
 interface PortalProps {
   children: ReactNode;
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index 21cd4ee6..305698e5 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 import { type Meta } from '@storybook/react';
 
-import Tabs from './Tabs';
+import Tabs from '.';
 
 const COMPONENT_DESCRIPTION = `
   - \`<Tabs />\`: 모든 컴포넌트에 대한 컨텍스트와 상태를 제공합니다.
diff --git a/src/components/Tabs/TabsContent.tsx b/src/components/Tabs/components/TabsContent.tsx
similarity index 83%
rename from src/components/Tabs/TabsContent.tsx
rename to src/components/Tabs/components/TabsContent.tsx
index 36377170..c7432cdf 100644
--- a/src/components/Tabs/TabsContent.tsx
+++ b/src/components/Tabs/components/TabsContent.tsx
@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 
-import { useTabsContext } from '../../hooks/useTabsContext';
+import { useTabsContext } from '../../../hooks/useTabsContext';
 
 interface TabsContentProps {
   value: string;
diff --git a/src/components/Tabs/TabsList.tsx b/src/components/Tabs/components/TabsList.tsx
similarity index 82%
rename from src/components/Tabs/TabsList.tsx
rename to src/components/Tabs/components/TabsList.tsx
index 0754b24b..882c1f53 100644
--- a/src/components/Tabs/TabsList.tsx
+++ b/src/components/Tabs/components/TabsList.tsx
@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 
-import * as styles from './style.css';
+import * as styles from '../style.css';
 
 const TabsList = ({ children }: PropsWithChildren) => {
   return <ul className={styles.tabsList}>{children}</ul>;
diff --git a/src/components/Tabs/TabsTrigger.tsx b/src/components/Tabs/components/TabsTrigger.tsx
similarity index 82%
rename from src/components/Tabs/TabsTrigger.tsx
rename to src/components/Tabs/components/TabsTrigger.tsx
index 2bcf4263..f400adea 100644
--- a/src/components/Tabs/TabsTrigger.tsx
+++ b/src/components/Tabs/components/TabsTrigger.tsx
@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 
-import { useTabsContext } from '../../hooks/useTabsContext';
-import * as styles from './style.css';
+import { useTabsContext } from '../../../hooks/useTabsContext';
+import * as styles from '../style.css';
 
 interface TabsTriggerProps {
   value: string;
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/index.tsx
similarity index 84%
rename from src/components/Tabs/Tabs.tsx
rename to src/components/Tabs/index.tsx
index 74775106..07a44962 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/index.tsx
@@ -1,8 +1,8 @@
 import { createContext, type PropsWithChildren, useState } from 'react';
 
-import TabsContent from './TabsContent';
-import TabsList from './TabsList';
-import TabsTrigger from './TabsTrigger';
+import TabsContent from './components/TabsContent';
+import TabsList from './components/TabsList';
+import TabsTrigger from './components/TabsTrigger';
 
 interface TabsContextProps {
   selectedTab: string;
diff --git a/src/components/Tabs/style.css.ts b/src/components/Tabs/style.css.ts
index fae440c1..3c1b4735 100644
--- a/src/components/Tabs/style.css.ts
+++ b/src/components/Tabs/style.css.ts
@@ -1,8 +1,9 @@
-import { COLORS } from '@styles/tokens';
-import * as utils from '@styles/utils.css';
 import { style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+import { COLORS } from '@styles/tokens';
+import * as utils from '@styles/utils.css';
+
 export const tabsList = style([
   utils.flexCenter,
   {
diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
index 22a98422..66f1a77d 100644
--- a/src/components/Toast/Toast.stories.tsx
+++ b/src/components/Toast/Toast.stories.tsx
@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
-import { TOAST_DURATION_TIME } from '@models/toastModel';
-import { useToastStore } from '@stores/toastStore';
+
+import { TOAST_DURATION_TIME } from '@constants/toast';
+import { useToastStore } from '@stores/toast';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Toast from './Toast';
+import Toast from '.';
 
 const meta: Meta<typeof Toast> = {
   title: 'Toast',
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/index.tsx
similarity index 92%
rename from src/components/Toast/Toast.tsx
rename to src/components/Toast/index.tsx
index 52733481..62c312bb 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { useToastStore } from '@stores/toastStore';
+
+import { useToastStore } from '@stores/toast';
 
 import * as styles from './style.css';
 
diff --git a/src/components/Toast/style.css.ts b/src/components/Toast/style.css.ts
index e7f82171..79bc0062 100644
--- a/src/components/Toast/style.css.ts
+++ b/src/components/Toast/style.css.ts
@@ -1,7 +1,8 @@
+import { recipe } from '@vanilla-extract/recipes';
+
 import { sprinkles } from '@styles/sprinkles.css';
 import { COLORS } from '@styles/tokens';
 import { modalLayer } from '@styles/utils.css';
-import { recipe } from '@vanilla-extract/recipes';
 
 export const toast = recipe({
   base: [
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
index 9be3d3c3..fe5cbd4e 100644
--- a/src/components/Tooltip/Tooltip.stories.tsx
+++ b/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Tooltip from './Tooltip';
+import Tooltip from '.';
 
 const COMPONENT_DESCRIPTION = `
   - \`<Tooltip />\`: 모든 컴포넌트에 대한 컨텍스트와 상태를 제공합니다.
diff --git a/src/components/Tooltip/TooltipContent.tsx b/src/components/Tooltip/components/TooltipContent.tsx
similarity index 88%
rename from src/components/Tooltip/TooltipContent.tsx
rename to src/components/Tooltip/components/TooltipContent.tsx
index c6756bcf..7ca5a2d9 100644
--- a/src/components/Tooltip/TooltipContent.tsx
+++ b/src/components/Tooltip/components/TooltipContent.tsx
@@ -1,11 +1,12 @@
 import type { PropsWithChildren } from 'react';
-import { PORTAL_ID } from '@constants/portalId';
-import { useTooltipContext } from '@hooks/useTooltipContext';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 
-import Portal from '../Portal';
-import * as styles from './style.css';
+import { PORTAL_ID } from '@constants/portal';
+import { useTooltipContext } from '@hooks/useTooltipContext';
+
+import Portal from '../../Portal';
+import * as styles from '../style.css';
 
 const ARROW_STYLE = {
   top: styles.bottomArrow,
diff --git a/src/components/Tooltip/TooltipTrigger.tsx b/src/components/Tooltip/components/TooltipTrigger.tsx
similarity index 92%
rename from src/components/Tooltip/TooltipTrigger.tsx
rename to src/components/Tooltip/components/TooltipTrigger.tsx
index f570be38..6cc9314b 100644
--- a/src/components/Tooltip/TooltipTrigger.tsx
+++ b/src/components/Tooltip/components/TooltipTrigger.tsx
@@ -1,7 +1,8 @@
 import { type PropsWithChildren } from 'react';
+
 import { useTooltipContext } from '@hooks/useTooltipContext';
 
-import * as styles from './style.css';
+import * as styles from '../style.css';
 
 const TooltipTrigger = ({ children }: PropsWithChildren) => {
   const { tooltipRef, onOpenTooltip, onCloseTooltip } = useTooltipContext();
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/index.tsx
similarity index 93%
rename from src/components/Tooltip/Tooltip.tsx
rename to src/components/Tooltip/index.tsx
index d4449238..af0dba18 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -1,9 +1,10 @@
 import type { PropsWithChildren, Ref } from 'react';
 import { createContext, useEffect, useRef, useState } from 'react';
+
 import { getPosition } from '@utils/getPosition';
 
-import TooltipContent from './TooltipContent';
-import TooltipTrigger from './TooltipTrigger';
+import TooltipContent from './components/TooltipContent';
+import TooltipTrigger from './components/TooltipTrigger';
 
 const INIT_POSITION = { top: 0, left: 0 };
 
diff --git a/src/components/Tooltip/style.css.ts b/src/components/Tooltip/style.css.ts
index bb3805c3..d72d889a 100644
--- a/src/components/Tooltip/style.css.ts
+++ b/src/components/Tooltip/style.css.ts
@@ -1,8 +1,9 @@
-import { sprinkles } from '@styles/sprinkles.css';
-import { COLORS, Z_INDEX } from '@styles/tokens';
 import { createVar, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
+import { sprinkles } from '@styles/sprinkles.css';
+import { COLORS, Z_INDEX } from '@styles/tokens';
+
 export const trigger = style({
   width: 'fit-content',
   height: 'fit-content',
diff --git a/src/components/Badge/constants.ts b/src/constants/badge.ts
similarity index 100%
rename from src/components/Badge/constants.ts
rename to src/constants/badge.ts
diff --git a/src/constants/portalId.ts b/src/constants/portal.ts
similarity index 100%
rename from src/constants/portalId.ts
rename to src/constants/portal.ts
diff --git a/src/constants/toast.ts b/src/constants/toast.ts
new file mode 100644
index 00000000..6bcd4dff
--- /dev/null
+++ b/src/constants/toast.ts
@@ -0,0 +1,4 @@
+export const TOAST_DURATION_TIME = {
+  SHOW: 3500,
+  ACTION: 5000,
+} as const;
diff --git a/src/hooks/useTabsContext.ts b/src/hooks/useTabsContext.ts
index 4bc249f4..dce0af0d 100644
--- a/src/hooks/useTabsContext.ts
+++ b/src/hooks/useTabsContext.ts
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { TabsContext } from '../components/Tabs/Tabs';
+import { TabsContext } from '../components/Tabs';
 
 export const useTabsContext = () => {
   const ctx = useContext(TabsContext);
diff --git a/src/hooks/useTooltipContext.ts b/src/hooks/useTooltipContext.ts
index 29469a9a..432776b0 100644
--- a/src/hooks/useTooltipContext.ts
+++ b/src/hooks/useTooltipContext.ts
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { TooltipContext } from '../components/Tooltip/Tooltip';
+import { TooltipContext } from '../components/Tooltip';
 
 export const useTooltipContext = () => {
   const ctx = useContext(TooltipContext);
diff --git a/src/models/toastModel.ts b/src/models/toast.ts
similarity index 55%
rename from src/models/toastModel.ts
rename to src/models/toast.ts
index da10bd77..93b70120 100644
--- a/src/models/toastModel.ts
+++ b/src/models/toast.ts
@@ -1,7 +1,4 @@
-export const TOAST_DURATION_TIME = {
-  SHOW: 3500,
-  ACTION: 5000,
-} as const;
+import type { TOAST_DURATION_TIME } from '@constants/toast';
 
 export type ToastDurationTime =
   (typeof TOAST_DURATION_TIME)[keyof typeof TOAST_DURATION_TIME];
diff --git a/src/stores/modalStore.ts b/src/stores/modal.ts
similarity index 100%
rename from src/stores/modalStore.ts
rename to src/stores/modal.ts
diff --git a/src/stores/toastStore.ts b/src/stores/toast.ts
similarity index 88%
rename from src/stores/toastStore.ts
rename to src/stores/toast.ts
index f03ac402..f4d1ce7c 100644
--- a/src/stores/toastStore.ts
+++ b/src/stores/toast.ts
@@ -2,10 +2,9 @@ import { createStore } from 'zustand';
 import { shallow } from 'zustand/shallow';
 import { useStoreWithEqualityFn as useStore } from 'zustand/traditional';
 
-import {
-  TOAST_DURATION_TIME,
-  type ToastDurationTime,
-} from '../models/toastModel';
+import { TOAST_DURATION_TIME } from '@constants/toast';
+
+import { type ToastDurationTime } from '../models/toast';
 
 interface ToastData {
   message: string;
diff --git a/src/utils/getPosition.ts b/src/utils/getPosition.ts
index aed82899..b437fff6 100644
--- a/src/utils/getPosition.ts
+++ b/src/utils/getPosition.ts
@@ -1,4 +1,4 @@
-import type { TooltipShape } from '../components/Tooltip/Tooltip';
+import type { TooltipShape } from '../components/Tooltip';
 
 const TOOLTIP_MARGIN = {
   MINIMAL: 8,