[TIL] issue-tracker 구조 설계

구조설계

구조설계를 어떻게 할지 계속 고민하다가 아래와 같이 구성하였다.

파일구조

└─src
    │  App.js
    │  index.js
    │
    ├─components
    │  ├─common
    │  │      Header.jsx
    │  │
    │  └─Issues
    │      ├─IssueTable
    │      │  │  IssueTable.jsx
    │      │  │
    │      │  ├─IssueList
    │      │  │  │  IssueList.jsx
    │      │  │  │  StatusIcon.jsx
    │      │  │  │
    │      │  │  ├─AvatarStack
    │      │  │  │      Avatar.jsx
    │      │  │  │      AvatarStack.jsx
    │      │  │  │
    │      │  │  └─Contents
    │      │  │          Contents.jsx
    │      │  │          Details.jsx
    │      │  │          Label.jsx
    │      │  │          Title.jsx
    │      │  │
    │      │  └─Toolbar
    │      │      │  SelectedNumber.jsx
    │      │      │  Toolbar.jsx
    │      │      │  TotalCheckBox.jsx
    │      │      │
    │      │      └─TableFilters
    │      │              Menu.jsx
    │      │              TableFilters.jsx
    │      │
    │      └─Navigation
    │          │  Navigation.jsx
    │          │  NewIssueButton.jsx
    │          │
    │          ├─Filter
    │          │      ClearButton.jsx
    │          │      Filter.jsx
    │          │      Menu.jsx
    │          │      SearchBar.jsx
    │          │
    │          └─LinkButtons
    │                  LinkButtons.jsx
    │		       LinkButton.jsx
    │
    ├─pages
    │      DetailedIssue.jsx
    │      EditMilestone.jsx
    │      Issues.jsx
    │      Labels.jsx
    │      Login.jsx
    │      Milestones.jsx
    │      NewIssue.jsx
    │      NewMilestone.jsx
    │
    └─style
            GlobalStyle.jsx

• components 디렉토리 내부 issues폴더에 이슈 리스트 화면 컴포넌트를 분리했다.
• common폴더에 공통으로 사용되는 헤더 컴포넌트 파일을 두었다.
• pages폴더에 있는 페이지들로 라우팅이 이루어진다.
• 컴포넌트 재사용 여부에 따라 구조는 추후 변경될 것 같다.

아래와 같이 그룹지어 구조설계 했다.

• 이슈목록 전체
  

• 이슈목록
  

페이지 Route 분류

번호	종류	페이지명	주소
1	로그인	Login	/login
2	이슈 목록	Issues	default: /issues filter: /issues/{filterQueries}
3	이슈 생성	NewIssue	/issues/new
4	이슈 상세	DetailedIssue	/issues/{issueID}
5	라벨 목록	Labels	/labels
6	마일스톤 목록	Milestones	/milestones
7	마일스톤 수정	EditMilestone	/milestones/{milestoneID}/edit
8	마일스톤 생성	NewMilestone	/milestones/new