기존 폴더 구조

src
├── assets
├── apis
├── components
├── constants
├── contexts or store
├── hooks
├── pages
├── types
├── styles
├── routers
├── utils
└── ....etc

• client
  • src
    • lib
      • react-konva-mindmap
        • test
          • line.test.ts
        • utils
          • collision.ts
          • points
        • hooks
          • …
        • types
          • location.ts
        • ConnectedLine.tsx
        • node.tsx

react-konva-mindmap 관련 로직이 함께 관리되면 편할 것이다

→ 근데 해당 디렉토리의 프로젝트 내 위치가 상당히 애매하다는 느낌

1. 우리가 쓰기 편하기만 하면된다.

1안: src 바로 밑에 두기

2안: utils 아래에 두기

3안: components 아래에 두기

4안: MindMapView 아래에 두기

/src
 ├── konva_mindmap/                              // Konva 관련 코드를 한 곳에 모아둠
 │    ├── components/
 │    │    ├── KonvaCanvas.tsx           
 │    │    ├── ShapeNode.tsx            
 │    │    ├── TextNode.tsx              
 │    │    └── ImageNode.tsx             
 │    ├── hooks/
 │    │    ├── useNodeDrag.ts           
 │    │    ├── useResize.ts              
 │    │    └── useKonvaEvents.ts         
 │    ├── types/
 │    │    └── konvaTypes.ts            
 │    └── utils/
 │         └── konvaHelpers.ts          
 └── components/