ln-721-frontend-restructure

stateDiagram-v2 [*] --> Analyze: Start Restructure state Analyze { [*] --> ScanFiles ScanFiles --> MeasureComplexity MeasureComplexity --> ClassifyComponents ClassifyComponents --> BuildDependencyGraph BuildDependencyGraph --> [*] } Analyze --> Plan: Inventory Ready state Plan { [*] --> ApplyThresholds ApplyThresholds --> CalculatePaths CalculatePaths --> IdentifyImportUpdates IdentifyImportUpdates --> DetectConflicts DetectConflicts --> [*] } Plan --> Execute: Plan Ready state Execute { [*] --> CreateFolders CreateFolders --> ExtractTypes ExtractTypes --> ExtractConstants ExtractConstants --> ExtractHooks ExtractHooks --> ExtractComponents ExtractComponents --> CreateBarrels CreateBarrels --> UpdateImports UpdateImports --> [*] } Execute --> Verify: Restructure Complete state Verify { [*] --> TypeCheck TypeCheck --> Build Build --> CheckOrphans CheckOrphans --> [*] } Verify --> [*]: Success

flowchart TD Start([Analyze Component]) --> Score{Calculate Score} Score --> UI{UI Primitive?} UI -->|Score >= 4| UIFolder[components/ui/] UI -->|Score < 4| Layout{Layout?} Layout -->|Score >= 3| LayoutFolder[components/layout/] Layout -->|Score < 3| Feature{Feature-specific?} Feature -->|Score >= 3| FeatureFolder[pages/Feature/components/] Feature -->|Score < 3| Shared[hooks/ or lib/] UIFolder --> Done([Classification Complete]) LayoutFolder --> Done FeatureFolder --> Done Shared --> Done classDef decision fill:#FFE0B2 classDef target fill:#C8E6C9 class UI,Layout,Feature decision class UIFolder,LayoutFolder,FeatureFolder,Shared target

sequenceDiagram participant M as Monolithic File participant T as types.ts participant C as constants.ts participant H as hooks.ts participant S as Sub-components participant I as index.tsx Note over M: Original 500+ line file rect rgb(200, 230, 200) Note over M,I: Sequential Extraction (Order Critical) M->>T: 1. Extract interfaces, types, enums M->>C: 2. Extract constants (depend on types) M->>H: 3. Extract hooks (depend on types, constants) M->>S: 4. Extract sub-components (depend on all above) M->>I: 5. Refactor main component (imports from extracted) end Note over I: Clean page component with imports

flowchart LR subgraph Before["Before Restructure"] Old1["import { Button } from '../Button'"] Old2["import { User } from './types'"] Old3["import { useAuth } from '../../hooks/useAuth'"] end subgraph After["After Restructure"] New1["import { Button } from '@/components/ui'"] New2["import type { User } from './types'"] New3["import { useAuth } from '@/hooks'"] end Old1 --> New1 Old2 --> New2 Old3 --> New3 classDef old fill:#FFB6C1 classDef new fill:#90EE90 class Old1,Old2,Old3 old class New1,New2,New3 new

flowchart TD File([Source File]) --> Lines{Lines > 300?} Lines -->|Yes| Split[Create Feature Folder] Lines -->|No| Types{> 3 Types?} Types -->|Yes| ExtractTypes[Extract to types.ts] Types -->|No| Hooks{> 5 Hooks?} Hooks -->|Yes| ExtractHooks[Extract to hooks.ts] Hooks -->|No| Constants{Magic Values?} Constants -->|Yes| ExtractConst[Extract to constants.ts] Constants -->|No| Keep[Keep as Single File] Split --> Done([Apply All Extractions]) ExtractTypes --> Done ExtractHooks --> Done ExtractConst --> Done Keep --> Done classDef threshold fill:#FFE0B2 classDef action fill:#C8E6C9 class Lines,Types,Hooks,Constants threshold class Split,ExtractTypes,ExtractHooks,ExtractConst,Keep action