//.husky/pre-commit
npm run lint-staged

//package.json
{
  "name" : "vision-system",
  ...
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build --debug",
    "preview": "vite preview --port 8080",
    "prettier": "prettier --write .",
    "test": "vitest",
    "prepare": "husky",
    "lint-staged": "lint-staged",
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  },
}

//.prettierrc
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto",
  "plugins": ["prettier-plugin-tailwindcss", "@trivago/prettier-plugin-sort-imports"],
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^@/app/(.*)$",
    "^@/pages/(.*)$",
    "^@/widgets/(.*)$",
    "^@/features/(.*)$",
    "^@/entities/(.*)$",
    "^@/shared/(.*)$",
    "^@/components/(.*)$", //리팩터링 당시 components 디렉터리 존재
    "^@/hooks/(.*)$", //리팩터링 당시 hooks 디렉터리 존재
    "^[./]"
  ],
  "tailwindConfig": "./tailwind.config.mjs",
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

// "<THIRD_PARTY_MODULES>",
import { useSuspenseQuery } from '@tanstack/react-query';
import { ColumnDef } from '@tanstack/react-table';
import dayjs from 'dayjs';
import { SearchIcon } from 'lucide-react';
import { useMemo } from 'react';
import { Link } from 'react-router-dom';

//"^@/shared/(.*)$",
import { ActiveAccountSnapshot, SnapShotQueries } from '@/entities/accountSnapshots';
import { OrderDto } from '@/entities/orders';
import { PositionDto } from '@/entities/positions';

//"^@/entities/(.*)$",
import {
  ASSET_SETTINGS,
  DATE_FORMAT_DD_MM_mm_YYYY_WITH_DOT_IN_KOR,
  SYMBOL_SEETINGS,
  floorToDecimalPlacesWith,
  privatePathKeys,
} from '@/shared/lib';

// "^[./]"
import { parseSymbolForClient, useActivceSnapshotFilter } from '../lib';
import { DataTableDemoWithoutPagination } from './DataTableDemoWithoutPagination';
import EmptyCell from './EmptyCell';
import OrderTooltip from './OrderTooltip';
import PositionTooltip from './PositionTooltip';
import SymbolSelect from './SymbolSelect';

const RiskTable = () => {
  const { data: activeAccountSnapshots } = useSuspenseQuery(
    SnapShotQueries.getActiveAccountsSnapshots(),
  );
  return (
    ...
  )
}

  "importOrderSeparation": true,

//eslint.config.js

import js from '@eslint/js'
import prettierConfig from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import globals from 'globals'
import tseslint from 'typescript-eslint'

/** @type {import("eslint").Linter.FlatConfig[]} */
export default [
  js.configs.recommended,
  ...tseslint.configs.recommended, // TypeScript ESLint 설정 추가
  prettierConfig, // Prettier 설정 추가
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier: prettierPlugin,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
      'prettier/prettier': ['error', { endOfLine: 'auto' }],
    },
  },
  {
    ignores: ['dist', 'node_modules'],
  },
]

// 설치
npm i -D steiger

//1회 실행
npx steiger ./src

//감시모드 실행 (폴더 구조 및 모듈 이름이 변경되는 트리거됨)
npx steiger ./src --watch

📦src
┣ 📂app
┣ 📂components //💥HERE component 폴더를 제거하자, 이곳에 있는 것은 아토믹한 컴포넌트는 아니고 조합된 것이라 우선 components를 만들었음.
┣ 📂entities // 💥 HERE entities를 정확하게 작성하지 못함. entities가 뭐지?
┃ ┣ 📂account
┃ ┣ 📂auth
┃ ┣ 📂common
┃ ┣ 📂organization
┃ ┗ 📂user
┣ 📂features // 💥 HERE feature에 모달이 있다?? 이유는 존재.
┃ ┣ 📂accounts
┃ ┣ 📂auth
┃ ┃ ┣ 📂login
┃ ┃ ┣ 📂logout
┃ ┃ ┗ 📂sign-up
┃ ┣ 📂change-password
┃ ┣ 📂download
┃ ┣ 📂modal
┃ ┃ ┣ 📂accounts
┃ ┃ ┣ 📂users
┃ ┃ ┣ 📜hasExistedModal.tsx
┃ ┃ ┣ 📜index.ts
┃ ┃ ┗ 📜modal.ui.tsx
┃ ┣ 📂organization
┃ ┣ 📂records
┃ ┣ 📂settings
┃ ┃ ┗ 📂update-settings
┃ ┗ 📂user
┃ ┃ ┣ 📂delete-user
┃ ┃ ┗ 📂register-user
┣ 📂pages // 💥 HERE 페이지에 재활용되는 Form이 있어서 만들었었음.
┃ ┣ 📂Form
┃ ┣ 📂UiElements
┃ ┣ 📂accounts
┃ ┣ 📂approval-pending
┃ ┣ 📂auth
┃ ┃ ┣ 📂login
┃ ┃ ┣ 📂sign-up
┃ ┃ ┃ ┗ 📂ui
┃ ┃ ┗ 📂signin
┃ ┣ 📂dashboard
┃ ┣ 📂home
┃ ┣ 📂landing
┃ ┣ 📂layout
┃ ┣ 📂organizations
┃ ┣ 📂page-404
┃ ┣ 📂pnl-tracking
┃ ┣ 📂risk-management
┃ ┣ 📂settings
┃ ┣ 📂statistic
┃ ┣ 📂transfer-records
┃ ┣ 📂users
┣ 📂shared
┃ ┣ 📂api // 💥 HERE 백엔드와 통신하는 API는 shared에 있는게 맞는가?
┃ ┃ ┣ 📂account
┃ ┃ ┃ ┣ 📜account-service.ts
┃ ┃ ┃ ┣ 📜account.model.tsx
┃ ┃ ┃ ┣ 📜account.types.ts
┃ ┃ ┃ ┗ 📜index.ts
┃ ┃ ┣ 📂admin
┃ ┃ ┣ 📂auth
┃ ┃ ┣ 📂dashboard
┃ ┃ ┣ 📂management
┃ ┃ ┗ 📂market
┃ ┣ 📂hooks // 💥 HERE 공통 훅도 아닌데 shared에 있을 필요가 있나? 어디로 보내야하지?
┃ ┃ ┣ 📜useCharts.tsx
┃ ┃ ┣ 📜useHistoricalAum.ts
┃ ┃ ┣ 📜useMobile.ts
┃ ┃ ┗ 📜useSnapShotAum.ts
┃ ┣ 📂lib // 💥 HERE 모듈을 index.ts를 활용하여 export하고 있지 않는데?
┃ ┃ ┣ 📂axios
┃ ┃ ┣ 📂zustand
┃ ┃ ┣ 📜business.tsx
┃ ┃ ┣ 📜chart.ts
┃ ┃ ┣ 📜date.ts
┃ ┃ ┣ 📜env.ts
┃ ┃ ┣ 📜globalMessage.ts
┃ ┃ ┣ 📜mswUtils.ts
┃ ┃ ┣ 📜policy.ts
┃ ┃ ┣ 📜stroageKeys.ts
┃ ┃ ┗ 📜utils.ts
┃ ┣ 📂types // 💥 HERE 타입들이 shared에 있을 필요가 있나? 도메인과 관련된것인데?
┃ ┃ ┣ 📜users.ts
┃ ┃ ┣ 📜positions.ts
┃ ┃ ┣ 📜accounts.ts
┃ ┃ ┣ 📜package.ts
┃ ┃ ┣ 📜policy.ts
┃ ┃ ┣ 📜product.ts
┃ ┃ ┗ 📜response.ts
┃ ┗ 📂ui
┃ ┃ ┣ 📜...
┣ 📂widgets
┃ ┃ ┣ 📜...

📦src
 ┣ 📂__mock__
 ┣ 📂__test__
 ┣ 📂app
 ┣ 📂entities
 ┃ ┣ 📂accounts
 ┃ ┃ ┣ 📂model
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂auth
 ┃ ┃ ┣ 📂lib
 ┃ ┃ ┣ 📂model
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂organizations
 ┃ ┃ ┣ 📂lib
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┗ 📜organization.lib.ts
 ┃ ┃ ┣ 📂model
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┗ 📜organization.queries.ts
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂...
 ┃ ┃ ┗ 📜index.ts
 ┣ 📂features
 ┃ ┣ 📂...
 ┃ ┃ ┗ 📜index.ts
 ┣ 📂pages
┃ ┣ 📂...
 ┃ ┃ ┗ 📜index.ts
 ┣ 📂shared
 ┃ ┣ 📂lib
 ┃ ┃ ┣ 📂aum
 ┃ ┃ ┣ 📂axios
 ┃ ┃ ┣ 📂constants
 ┃ ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📂math
 ┃ ┃ ┣ 📂react
 ┃ ┃ ┣ 📂react-router
 ┃ ┃ ┣ 📂tailwind-css
 ┃ ┃ ┣ 📂tanstack-query
 ┃ ┃ ┣ 📂zustand
 ┃ ┣ 📂ui
┃ ┃ ┗ 📜...
 ┃ ┗ 📜index.ts
 ┣ 📂widgets
 ┃ ┣ 📂calender
 ┃ ┣ 📂chart
 ┃ ┃ ┣ 📂model
 ┃ ┃ ┣ 📂ui
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂lib
 ┃ ┃ ┃ ┗ 📜index.ts
 ┃ ┃ ┣ 📂ui
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂setting
 ┃ ┃ ┣ 📂ui
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┗ 📜setting-section.ui.tsx
 ┃ ┗ 📂sidebar

 ┣ 📂features
 ┃ ┣ 📂modal
 ┃ ┃ ┣ 📂accounts
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┣ 📜modify-accounts-modal.ui.tsx
 ┃ ┃ ┃ ┣ 📜modify-transfer-modal.ui.tsx
 ┃ ┃ ┃ ┣ 📜register-accounts-modal.ui.tsx
 ┃ ┃ ┃ ┗ 📜transfer-modal.ui.tsx
 ┃ ┃ ┣ 📂users
 ┃ ┃ ┃ ┣ 📜delete-user-modal-ui.tsx
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┗ 📜register-user-modal-ui.tsx
 ┃ ┃ ┣ 📜hasExistedModal.tsx
 ┃ ┃ ┣ 📜index.ts

 ┣ 📂features
 ┃ ┣ 📂accounts
 ┃ ┃ ┣ 📂ui
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┣ 📜modify-accounts-modal.ui.tsx
 ┃ ┃ ┃ ┗ 📜register-accounts-modal.ui.tsx
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂organizations
 ┃ ┃ ┣ 📂ui
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┣ 📜modify-organization-modal.ui.tsx
 ┃ ┃ ┃ ┗ 📜register-organization-modal.ui.tsx
 ┃ ┃ ┗ 📜index.ts
 ┃ ┣ 📂records
 ┃ ┃ ┣ 📂ui
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┣ 📜modify-transfer-modal.ui.tsx
 ┃ ┃ ┃ ┗ 📜register-transfer-modal.ui.tsx
 ┃ ┃ ┗ 📜index.ts
 ┃ ┗ 📂users
 ┃ ┃ ┣ 📂ui
 ┃ ┃ ┃ ┣ 📜index.ts
 ┃ ┃ ┃ ┣ 📜delete-user-modal-ui.tsx
 ┃ ┃ ┃ ┗ 📜register-user-modal-ui.tsx
 ┃ ┃ ┗ 📜index.ts