FE

컴포넌트 구조 설계

Figma

코딩 컨벤션

1. event handler function naming: on COMPONENT EVENT ex. onDropdownClick
2. Props:

• 1개일 때 onDropdownClick={onDropdownClick}
• 2개 이상일 땐 ... spread로 ex. {...{onDropdownClick, dropdownList}}

3. Styled Component Transient props
4. theme에서 사용하는 property 명시 ex. ${({ theme: { opacity } }) => opacity.hover};

디렉터리 구조

📦 
└─ fe
   ├─ .eslintrc.cjs
   ├─ .gitignore
   ├─ .prettierrc.json
   ├─ .vscode
   │  └─ settings.json
   ├─ README.md
   ├─ index.html
   ├─ package-lock.json
   ├─ package.json
   ├─ public
   │  ├─ favicon.png
   │  └─ mockServiceWorker.js
   ├─ src
   │  ├─ App.tsx
   │  ├─ ProtectedRoute.tsx
   │  ├─ api
   │  │  ├─ fetcher.ts
   │  │  ├─ index.ts
   │  │  └─ type.ts
   │  ├─ assets
   │  │  ├─ icon
   │  ├─ components
   │  │  ├─ Auth
   │  │  │  └─ GitHubLoginButton.tsx
   │  │  ├─ Comment.tsx
   │  │  ├─ Dropdown
   │  │  │  ├─ DropdownIndicator.tsx
   │  │  │  ├─ DropdownItem.tsx
   │  │  │  ├─ DropdownPanel.tsx
   │  │  │  └─ types.ts
   │  │  ├─ FilterBar.tsx
   │  │  ├─ Header.tsx
   │  │  ├─ IssueDetail
   │  │  │  ├─ IssueCommentContainer.tsx
   │  │  │  ├─ IssueDetailBody.tsx
   │  │  │  └─ IssueDetailHeader.tsx
   │  │  ├─ Label
   │  │  │  ├─ LabelEditor.tsx
   │  │  │  └─ LabelTag.tsx
   │  │  ├─ Milestone
   │  │  │  └─ MilestoneEditor.tsx
   │  │  ├─ NavigationBar.tsx
   │  │  ├─ Pagination.tsx
   │  │  ├─ Table
   │  │  │  ├─ IssuesTable
   │  │  │  │  ├─ IssuesFiltersDropdowns.tsx
   │  │  │  │  ├─ IssuesTable.tsx
   │  │  │  │  ├─ IssuesTableBody.tsx
   │  │  │  │  ├─ IssuesTableHeader.tsx
   │  │  │  │  └─ IssuesTableItem.tsx
   │  │  │  ├─ LabelsTable
   │  │  │  │  ├─ LabelsTableBody.tsx
   │  │  │  │  ├─ LabelsTableHeader.tsx
   │  │  │  │  └─ LabelsTableItem.tsx
   │  │  │  ├─ MilestonesTable
   │  │  │  │  ├─ MilestonesTable.tsx
   │  │  │  │  ├─ MilestonesTableBody.tsx
   │  │  │  │  ├─ MilestonesTableHeader.tsx
   │  │  │  │  ├─ MilestonesTableItem.tsx
   │  │  │  │  └─ index.tsx
   │  │  │  └─ Table.style.ts
   │  │  └─ common
   │  │     ├─ Avatar.tsx
   │  │     ├─ Button
   │  │     │  ├─ BaseButton.tsx
   │  │     │  ├─ Button.tsx
   │  │     │  ├─ constants.ts
   │  │     │  └─ index.tsx
   │  │     ├─ Group
   │  │     │  ├─ CheckboxGroup.tsx
   │  │     │  ├─ Fieldset.tsx
   │  │     │  └─ RadioGroup.tsx
   │  │     ├─ Input
   │  │     │  ├─ CircleCheckbox.tsx
   │  │     │  ├─ InputCheckbox.tsx
   │  │     │  └─ InputRadio.tsx
   │  │     ├─ Label.style.ts
   │  │     ├─ Logo.tsx
   │  │     ├─ ProgressBar.tsx
   │  │     ├─ Sidebar
   │  │     │  ├─ AssigneeField.tsx
   │  │     │  ├─ Container.style.ts
   │  │     │  ├─ LabelField.tsx
   │  │     │  ├─ MilestoneField.tsx
   │  │     │  └─ Sidebar.tsx
   │  │     ├─ TabBar.tsx
   │  │     ├─ TextArea
   │  │     │  ├─ FileUploadArea.tsx
   │  │     │  ├─ TextAreaContainer.tsx
   │  │     │  └─ TextAreaWrapper.tsx
   │  │     ├─ TextInput.tsx
   │  │     └─ ToggleSwitch.tsx
   │  ├─ context
   │  │  ├─ IssuesFilterContext.tsx
   │  │  ├─ authContext.tsx
   │  │  ├─ checkboxContext.tsx
   │  │  ├─ radioContext.tsx
   │  │  └─ themeModeContext.tsx
   │  ├─ customTypes
   │  │  └─ index.ts
   │  ├─ hooks
   │  │  ├─ useFetch.ts
   │  │  └─ useInput.tsx
   │  ├─ main.tsx
   │  ├─ mocks
   │  │  ├─ browser.ts
   │  │  ├─ data.ts
   │  │  └─ handlers.ts
   │  ├─ pages
   │  │  ├─ Auth
   │  │  │  ├─ AuthPage.tsx
   │  │  │  ├─ LoginPage.tsx
   │  │  │  └─ SignupPage.tsx
   │  │  ├─ MainPage
   │  │  │  ├─ IssueDetailPage.tsx
   │  │  │  ├─ IssuesPage.tsx
   │  │  │  ├─ LabelPage.tsx
   │  │  │  ├─ MainPage.tsx
   │  │  │  ├─ MilestonePage.tsx
   │  │  │  └─ NewIssuePage.tsx
   │  │  └─ NotFoundPage.tsx
   │  ├─ styles
   │  │  ├─ GlobalStyle.tsx
   │  │  └─ designSystem.ts
   │  ├─ utils
   │  │  ├─ compareSet.ts
   │  │  ├─ generateFilterText.ts
   │  │  ├─ style.ts
   │  │  └─ time.ts
   │  └─ vite-env.d.ts
   ├─ tsconfig.json
   ├─ tsconfig.node.json
   └─ vite.config.ts

©generated by Project Tree Generator