같은 도메인끼리 공통 로직이 있을 때 어디에 두시나요?

[eggmun98]

고민

지금 저희는 각 페이지 안에 hooks, components, utils를 모아두는 코로케이션 방식을 사용하고 있어요.

대략 이런 모습이에요:

src/
├── pages/
│   ├── PageA/
│   │   ├── hooks/
│   │   ├── components/
│   │   └── utils/
│   └── PageB/
│       ├── hooks/
│       └── components/
├── commons/
│   ├── hooks/
│   ├── components/
│   └── utils/

그런데 지금 고민되는 지점은,
PageA와 PageB가 같은 도메인이라서 공통 hook이나 component가 있는데,
이것들을 commons에 두자니 다른 도메인인 PageC도 접근 가능하게 되어 도메인 경계가 모호해지는 느낌이에요.

혹시 여러분은 이런 상황에서 어떻게 하고 계신지,
다른 팀에서는 폴더 구조를 어떻게 관리하시는지 궁금합니다!

코드

참고 자료

• 스크린샷:
• 다이어그램:
• 링크 (ex. 피그마, 노션 등):

[ato-m-a]

제 짧은 식견이나마 보태자면, 화면 중심의 계층적 구조로 훅/컴포넌트/유틸을 관리하여 생기는 현상이라 생각합니다!
페이지는 페이지만을 지니고, FSD와 유사하게끔 도메인 하위에 훅, 컴포넌트, 유틸이 위치한다면 어떨까요?
당장에는 페이지와 멀어진다는 단점이 바로 보이긴한데, 만일 여러 도메인을 아우르는 도메인이 등장한다거나(다른 토론글의 답변을 참고했습니다), 도메인을 알아야 하는 컴포넌트가 등장하면 페이지(화면)는 이들을 조립해 사용하는 사용자로 남고, 다른 요소들은 도메인 하위에 응집도 있게 모여있을 수 있어서 좋을 것 같아요

[eggmun98]

좋은 의견 감사합니다! 도메인 폴더를 만들어서 관리하는 것도 좋은 방법이 될 수 있겠네요! 감사합니다!