https://github.com/taskflow-clap/taskflow-fe
스마트한 업무 관리를 위한 업무 통합관리 솔루션, TaskFlow
https://github.com/taskflow-clap/taskflow-fe
axios-vue pinia tanstack-query typescript vuejs
Last synced: 3 months ago
JSON representation
스마트한 업무 관리를 위한 업무 통합관리 솔루션, TaskFlow
- Host: GitHub
- URL: https://github.com/taskflow-clap/taskflow-fe
- Owner: TaskFlow-CLAP
- Created: 2025-01-17T00:58:38.000Z (over 1 year ago)
- Default Branch: develop
- Last Pushed: 2026-03-04T07:14:42.000Z (3 months ago)
- Last Synced: 2026-03-04T13:35:11.809Z (3 months ago)
- Topics: axios-vue, pinia, tanstack-query, typescript, vuejs
- Language: Vue
- Homepage:
- Size: 2.94 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📖 사내 티켓관리 서비스 TaskFlow ReadME
**배포주소** : 현재는 서비스가 중단되었습니다. 다음에 만나요👋
[
]()
## 프로젝트 소개
### 다음과 같은 요구사항을 반영했습니다
- 효율적인 요청 처리 체계 구축
- 사용자와 담당자를 위한 **가시성있는 화면 제공**
- 티켓 추적을 위한 **알림 시스템**
- 부서 운영 위한 **업무 및 담당자 분석 통계 기능**
- 관리자의 카테고리 관리를 통한 **작업 관리**
## 팀원 구성
### CLAP의 FE팀원들
| **Chloe** | **Tony** | **Moya** |
| :------: | :------: | :------: |
| [
@BaekJiyeon02](https://github.com/BaekJiyeon02) | [
@seorang42](https://github.com/seorang42) | [
@Minkyu0424](https://github.com/Minkyu0424) |
## 1. 개발 환경
분류
기술 스택
Environment
Development
Communication
## 2.개발 기술
### Vue
- Vue는 다른 프레임워크 대비 가볍고 빠르기에 초기 로딩시간이 빠르다는 장점이 있습니다.
- 비교적 규모가 크지않고 SPA를 요하는 이번 프로젝트의 조건에 맞는 프레임워크라 생각이들어 채택했습니다.
- 커뮤니티도 크고, 활성화 되었기에 개발 중 우리팀이 잘 모르거나 필요한 정보들에 대해 보다 쉬운 접근 가능하다 생각했습니다.
### pinia
- 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
- Pinia를 채택한 이유
- Pinia는 Vue 3의 Composition API를 기반으로 설계되어 코드가 간결하고 이해하기 쉬우며 팀원들이 알고있던 zustand 방식과 유사해 학습비용을 낮출 수 있었습니다.
- Vuex라는 방법도 있었지만, vuex보다 더 단순한 구조로 이루어져있기에 pinia를 택했습니다.
- Pinia는 TypeScript와 잘 통합되기에 타입정의도 비교적 간단한 장점들이 있었습니다.
- Vue에서 제공하는 DevTools에서 기본지원되기에 상태 변화에 따른 시각적으로 확인이 가능하다는 점도 큰 장점으로 다가왔습니다.
- 로그인과 최초 프로필 설정 시 유저 정보를 store에 저장해 관리하는 방식으로 사용합니다.
- 작업 목록에 관한 필터링 시 필터링 params에 대한 요소들을 관리하는 방식으로 사용합니다.
### eslint, prettier
- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
- 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
- 기본 컨벤션을 사용하며, 예외 규칙은 팀원들과 협의했습니다.
- 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.
### tailwind
- 사전 정의된 유틸리티 클래스들로 다양한 스타일을 빠르고 일관성있게 적용이 가능합니다.
- css파일을 따로 작성없이 코드내에 작성해 빠른 스타일링 및 디자인 시스템을 일관되게 유지하도록 했습니다.
- 커스텀 속성을 통해 지정된 스타일링 내에서 팀원들이 중복된 스타일 코드없이 사용하도록 했습니다.
### typescript
- 사전 정의된 유틸리티 클래스들로 다양한 스타일을 빠르고 일관성있게 적용이 가능합니다.
- css파일을 따로 작성없이 코드내에 작성해 빠른 스타일링 및 디자인 시스템을 일관되게 유지하도록 했습니다.
- 커스텀 속성을 통해 지정된 스타일링 내에서 팀원들이 중복된 스타일 코드없이 사용하도록 했습니다.
### Vite
- 번들링 후 서버를 띄우는 다른 번들링 도구와 다르게 **ES모듈 기반으로 동작해 빠른 로딩속도 제공**
- **빠른 HMR**(Hot Module Replacement)을 지원함 개발의 편리함 향상
- Vite는 영향받는 모듈만 리로드해 성능이 유지됨
- **최적화된 빌드 제공(Rollup)**
- 트리 쉐이킹, 코드 분한, 최적화 번들링이 자동 적용됨
## 3.브랜치 전략
- Git-flow 전략을 기반으로 release, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
- release, develop, Feat 브랜치로 나누어 개발을 하였습니다.
- 새로운 기능을 분류하는 **feature** 브랜치
- 새로운 기능이 합쳐져 테스트와 QA가 이루어지는 **develop** 브랜치
- 검증된 코드들이 합쳐지는 **release** 브랜치로 분류
## 3. 프로젝트 구조
```
src/
├── api/ # axios Instance를 통한 API 관련 로직
├── assets/ # 정적 파일 (이미지, 폰트, 아이콘 등)
│ ├── fonts/ # 폰트 파일
│ └── icons/ # 아이콘 파일
├── components/ # 컴포넌트 파일 폴더
│ ├── api-logs/ # 관리자 API 로그 관련 컴포넌트
│ ├── charts/ # 차트 컴포넌트
│ ├── common/ # 공용 컴포넌트
│ ├── filters/ # 검색창 필터 관련 컴포넌트
│ ├── lists/ # 리스트 목록 관련 컴포넌트
│ ├── login-logs/ # 관리자 로그인 로그 관련 컴포넌트
│ ├── member-management/ # 관리자 멤버 관리 컴포넌트
│ ├── my-request/ # 내 요청 관리 컴포넌트
│ ├── my-task/ # 내 작업 관리 컴포넌트
│ ├── request-approve/ # 요청 승인 관련 컴포넌트
│ ├── request-history/ # 요청 히스토리 컴포넌트
│ ├── request-task/ # 작업 요청 관련 컴포넌트
│ ├── requested/ # 승인 대기중인 요청관련 컴포넌트
│ ├── statistics/ # 통계 관련 컴포넌트
│ ├── task-board/ # 작업 보드 컴포넌트
│ ├── task-detail/ # 작업 상세 정보 컴포넌트
│ ├── task-management/ # 관리자 작업 관리 컴포넌트
│ ├── team-board/ # 팀 보드 컴포넌트
│ ├── top-bar/ # 상단 바 컴포넌트
│ └── user-manage/ # 관리자 회원 관리 컴포넌트
├── constants/ # 상수 파일 정의
├── hooks/ # Vue 커스텀 훅
├── layout/ # Vue 페이지 레이아웃 컴포넌트
├── router/ # 라우팅 관련 설정
├── stores/ # Pinia 상태 관리
├── types/ # TypeScript 타입 정의
├── utils/ # 유틸리티 함수
└── views/ # 주요 페이지 컴포넌트
```
## 4. 역할 분담
### Chloe(백지연)
- **기능**
- **페이지** : 로그인, 비밀번호 재인증, 이메일 인증, 비밀번호 재설정, 내 정보수정
- **공통 컴포넌트** : 알림, 프로필 모달, 권한 별 사이드 바, 헤더
### Tony(윤장호)
- **기능**
- **페이지** : 내 요청, 승인 대기중인 요청, 전체 요청 기록, 내 작업, 작업보드, 팀 현황, 통계, 로그인 기록, 작업 기록 회원 관리
### Moya(최민규)
- **기능**
- **페이지** : 작업 요청, 요청 승인, 요청 수정, 요청 세부정보, 새 회원 추가, 회원 정보 수정, 작업 관리
- **공통 컴포넌트** : 아이콘
## 5. 시작가이드
### Requirements
- Node.js v22.13.0
- npm v10.9.2
### Installation
```
$ git clone https://github.com/TaskFlow-CLAP/TaskFlow-FE.git
$ cd TaskFlow-FE
$ npm install
$ npm run dev
// 로컬로 실행하는 경우 http://localhost:5173 포트번호로 실행
// 프로젝트 최상단 폴더에 .env생성 후 다음을 기입
VITE_API_BASE_URL=http://210.109.14.132:9090/
```
## 6. 페이지별 기능
### [초기화면]
- 서비스 초기 접속화면 및 인증 인가
로그인 화면
비밀번호 재설정 화면
내 정보 수정
### [사용자 화면]
- 사용자 권한 화면
내 요청
작업 요청
요청 상세 조회
요청 수정
### [담당자 화면]
- 담당자 권한 화면
내 작업
작업 보드
팀 작업 현황
통계
전체 요청 기록
승인 대기 중인 요청
요청 승인(승인 권한O)
요청 반려(승인 권한O)
요청 상세 조회(담당자)
### [관리자 화면]
- 관리자 권한 화면
회원 관리
작업 보드
새 회원 추가
회원 정보 수정
1차 카테고리 추가
2차 카테고리 추가
## 7. 트러블 슈팅
- [FE - 트러블 슈팅](https://north-spade-8fa.notion.site/1a004df233a58082ba65c72e7fbf248d?pvs=74)