배포주소 : 🔗 Visit TaskFlow
- 효율적인 요청 처리 체계 구축
- 사용자와 담당자를 위한 가시성있는 화면 제공
- 티켓 추적을 위한 알림 시스템
- 부서 운영 위한 업무 및 담당자 분석 통계 기능
- 관리자의 카테고리 관리를 통한 작업 관리
| Chloe | Tony | Moya |
|---|---|---|
 @BaekJiyeon02 |
 @seorang42 |
 @Minkyu0424 |
| 분류 | 기술 스택 |
|---|---|
|
Environment |
|
|
Development |
|
|
Communication |
|
- Vue는 다른 프레임워크 대비 가볍고 빠르기에 초기 로딩시간이 빠르다는 장점이 있습니다.
- 비교적 규모가 크지않고 SPA를 요하는 이번 프로젝트의 조건에 맞는 프레임워크라 생각이들어 채택했습니다.
- 커뮤니티도 크고, 활성화 되었기에 개발 중 우리팀이 잘 모르거나 필요한 정보들에 대해 보다 쉬운 접근 가능하다 생각했습니다.
- 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
- Pinia를 채택한 이유
- Pinia는 Vue 3의 Composition API를 기반으로 설계되어 코드가 간결하고 이해하기 쉬우며 팀원들이 알고있던 zustand 방식과 유사해 학습비용을 낮출 수 있었습니다.
- Vuex라는 방법도 있었지만, vuex보다 더 단순한 구조로 이루어져있기에 pinia를 택했습니다.
- Pinia는 TypeScript와 잘 통합되기에 타입정의도 비교적 간단한 장점들이 있었습니다.
- Vue에서 제공하는 DevTools에서 기본지원되기에 상태 변화에 따른 시각적으로 확인이 가능하다는 점도 큰 장점으로 다가왔습니다.
- 로그인과 최초 프로필 설정 시 유저 정보를 store에 저장해 관리하는 방식으로 사용합니다.
- 작업 목록에 관한 필터링 시 필터링 params에 대한 요소들을 관리하는 방식으로 사용합니다.
- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
- 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
- 기본 컨벤션을 사용하며, 예외 규칙은 팀원들과 협의했습니다.
- 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.
- 사전 정의된 유틸리티 클래스들로 다양한 스타일을 빠르고 일관성있게 적용이 가능합니다.
- css파일을 따로 작성없이 코드내에 작성해 빠른 스타일링 및 디자인 시스템을 일관되게 유지하도록 했습니다.
- 커스텀 속성을 통해 지정된 스타일링 내에서 팀원들이 중복된 스타일 코드없이 사용하도록 했습니다.
- 사전 정의된 유틸리티 클래스들로 다양한 스타일을 빠르고 일관성있게 적용이 가능합니다.
- css파일을 따로 작성없이 코드내에 작성해 빠른 스타일링 및 디자인 시스템을 일관되게 유지하도록 했습니다.
- 커스텀 속성을 통해 지정된 스타일링 내에서 팀원들이 중복된 스타일 코드없이 사용하도록 했습니다.
- 번들링 후 서버를 띄우는 다른 번들링 도구와 다르게 ES모듈 기반으로 동작해 빠른 로딩속도 제공
- 빠른 HMR(Hot Module Replacement)을 지원함 개발의 편리함 향상
- Vite는 영향받는 모듈만 리로드해 성능이 유지됨
- 최적화된 빌드 제공(Rollup)
- 트리 쉐이킹, 코드 분한, 최적화 번들링이 자동 적용됨
- Git-flow 전략을 기반으로 release, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
- release, develop, Feat 브랜치로 나누어 개발을 하였습니다.
- 새로운 기능을 분류하는 feature 브랜치
- 새로운 기능이 합쳐져 테스트와 QA가 이루어지는 develop 브랜치
- 검증된 코드들이 합쳐지는 release 브랜치로 분류
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/ # 주요 페이지 컴포넌트
- 기능
- 페이지 : 로그인, 비밀번호 재인증, 이메일 인증, 비밀번호 재설정, 내 정보수정
- 공통 컴포넌트 : 알림, 프로필 모달, 권한 별 사이드 바, 헤더
- 기능
- 페이지 : 내 요청, 승인 대기중인 요청, 전체 요청 기록, 내 작업, 작업보드, 팀 현황, 통계, 로그인 기록, 작업 기록 회원 관리
- 기능
- 페이지 : 작업 요청, 요청 승인, 요청 수정, 요청 세부정보, 새 회원 추가, 회원 정보 수정, 작업 관리
- 공통 컴포넌트 : 아이콘
- Node.js v22.13.0
- npm v10.9.2
$ 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/
- 서비스 초기 접속화면 및 인증 인가
| 로그인 화면 | 비밀번호 재설정 화면 |
 |
 |
| 내 정보 수정 |
|
- 사용자 권한 화면
| 내 요청 | 작업 요청 |
|
|
| 요청 상세 조회 | 요청 수정 |
 |
 |
- 담당자 권한 화면
| 내 작업 | 작업 보드 |
 |
 |
| 팀 작업 현황 | 통계 |
|
|
| 전체 요청 기록 | 승인 대기 중인 요청 |
|
|
| 요청 승인(승인 권한O) | 요청 반려(승인 권한O) |
|
|
| 요청 상세 조회(담당자) |
 |
- 관리자 권한 화면
| 회원 관리 | 작업 보드 |
 |
 |
| 새 회원 추가 | 회원 정보 수정 |
 |
|
| 1차 카테고리 추가 | 2차 카테고리 추가 |
 |
|