[Feature/BAR-199] 컨벤션에 맞춰서 폴더 구조 수정

.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"],
-              ["^@/"],
+              ["^~", "^@"],
               ["^\\."]
             ]
           }

.storybook/preview-body.html

@@ -0,0 +1,2 @@
+<div id="modal-root" />
+<div id="tooltip-root" />

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}>

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 (

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',

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: [

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: {

src/components/SvgIcon.tsx → 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;

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> {

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',

src/components/Modal/Modal.stories.tsx

@@ -1,18 +1,11 @@
-import { useModalStore } from '@stores/modalStore';
+import { useModalStore } from '@stores/modal';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import Modal from '.';
 
 const meta: Meta<typeof Modal> = {
   title: 'Components/Modal',
   component: Modal,
-  decorators: [
-    (Story) => (
-      <div style={{ height: '500px' }}>
-        <Story />
-      </div>
-    ),
-  ],
 };
 
 export default meta;

src/components/Modal/ModalContainer.tsx → 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 (

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();

src/components/Modal/components/DeleteArticle.tsx → 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 = () => {

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,

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;

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 />\`: 모든 컴포넌트에 대한 컨텍스트와 상태를 제공합니다.

src/components/Tabs/TabsContent.tsx → 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;

src/components/Tabs/TabsList.tsx → 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>;

src/components/Tabs/TabsTrigger.tsx → 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;

src/components/Tabs/Tabs.tsx → 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;

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,
   {

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',

src/components/Toast/Toast.tsx → 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';
 

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: [

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 />\`: 모든 컴포넌트에 대한 컨텍스트와 상태를 제공합니다.

src/components/Tooltip/TooltipContent.tsx → 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,

src/components/Tooltip/TooltipTrigger.tsx → 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();

src/components/Tooltip/Tooltip.tsx → 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 };
 

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',

src/constants/toast.ts

@@ -0,0 +1,4 @@
+export const TOAST_DURATION_TIME = {
+  SHOW: 3500,
+  ACTION: 5000,
+} as const;

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);

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);

src/models/toastModel.ts → 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];

src/stores/toastStore.ts → 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;

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,