폴더 구조를 어떻게 관리할것인가

[hwangstar156]

현재의 폴더구조는 page안에 종속되는 컴포넌트들을 pages폴더내에 넣어서 관리합니다. 이런식으로 분리하니 후에 공통으로 쓰이는 컴포넌트인데 특정 페이지에 이미 종속되어있어서 폴더구조를 변경해야되는 문제가 생깁니다.

또한 depth가 깊어지니 어디에 어떤 컴포넌트가 있는지 확인하기 어렵다는 문제점이 있습니다. 폴더구조의 개선이 필요할것 같습니다.

[hwangstar156]

저는 도메인별 폴더구조를 나누는것이 어떨까 싶습니다.

현재 저희 서비스의 도메인을 나누어 보자면

• Article
• Comment
• Search
• HashTag
• User

이렇게 나눌수 있을것 같습니다.

도메인 별로 폴더구조를 쪼갤시 depth가 깊어지는 문제도 해결할수 있고 ui에 종속하면 생길수 있는 재사용성 문제를 해결할수 있다고 생각합니다.

또한 common에 대한 개선이 필요할것 같습니다. 일반적으로 common은 디자인 템플릿같은것이 들어갑니다.

• Input
• Button
  ...

하지만 저희는 ui에 종속하다보니 여러 페이지에 쓰일것 같다면 common으로 빼어서 원래 목적과도 달라지고 common이 너무 방대해진 문제가 생긴것 같습니다.

도메인별로 분리하고 common에는 디자인 템플릿같은것만 들어가는게 맞다고 생각됩니다.

[liswktjs]

공통된 ui라도 로직이 다르면 페이지를 분리하여 관리한다

[liswktjs]

질문 카테고리
토론 카테고리 각각 하나의 페이지로 만들고
질문 카테고리, 토론 카테고리, 홈, 해시태그 검색결과, 검색 결과 에 들어가는 articlelist는 common으로 관리

[liswktjs]

로직은 훅으로 관리하고
UI를 도메인 별로 관리한다
UI와 도메인의 조합은 페이지에서 이루어지고 각각의 페이지마다 컴포넌트가 존재
Article - Writing
- Article Item
- Article List
- PopularArticle
- UserArticle
-

[liswktjs]

Home

• Header
  • Logo
  • Search
• nav
  • navItem
  • UserProfile
• Section
  • header
    • Category Select
    • DropDown
  • Popluar
  • ArticleList
    • ArticleItem
• TabBar
  • Button
  • UserProfile
  • MenuSlider

Category Selector

• PageLayout
  • Category 선택 버튼

Writing Articles

• 제목 Input
• Category Selector Input
• HashTag Input
• 임시저장 버튼
• ToastEditor
• 익명 버튼
• 등록하기버튼

Generate Vote

• 등록하기 버튼
• Vote Input
• Vote plus button
• ErrorMessage
• Vote Item view

Vote Deadline Generator

• 날짜 인풋
• 시간 인풋
• 안내메세지

Discussion View

• 카테고리 + 유저정보
• ArticleItem
  • Toast Viewer
  • 수정삭제 와 같은 글 정보
  • 좋아요 버튼
• 투표 viewer
• 댓글 등록 버튼
• 댓글 정보
• 댓글 리스트

Question View

• 카테고리 + 유저정보
• ArticleItem
  • Toast Viewer
  • 수정삭제 와 같은 글 정보
  • 좋아요 버튼
• 댓글 등록 버튼
• 댓글 정보
• 댓글 리스트

[liswktjs]

폴더구조
page는 tsx파일과 페이지를 꾸미는 styles.tsx파일 이렇게 한 묶음으로 페이지 별로 폴더가 존재
component안에 도메인 컴포넌트로 옮기기
@이를 통해서 shared를 폴더 맨 상단으로 옮기기