Skip to content

Commit b892a3a

Browse files
Minkyu0424Minkyu0424
authored
Update README.md
1 parent 9c74c76 commit b892a3a

File tree

1 file changed

+121
-105
lines changed

1 file changed

+121
-105
lines changed

‎README.md‎

Lines changed: 121 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
11
# 📖 사내 티켓관리 서비스 TaskFlow ReadME
22
![LogoTF](https://github.com/user-attachments/assets/d1b949f0-d45e-443a-8d23-3e8d83a744f4)
33

4+
**배포주소** : [🔗 Visit TaskFlow](https://taskflow.shop/)
45

5-
- 배포 URL :
6+
[<img src="https://img.shields.io/badge/프로젝트 기간-2025.01.06~2025.02.20-green?style=flat&logo=&logoColor=white" />]()
67

78
<br>
89

910
## 프로젝트 소개
1011

11-
- TMS
12+
### 다음과 같은 요구사항을 반영했습니다
13+
- 효율적인 요청 처리 체계 구축
14+
- 사용자와 담당자를 위한 **가시성있는 화면 제공**
15+
- 티켓 추적을 위한 **알림 시스템**
16+
- 부서 운영 위한 **업무 및 담당자 분석 통계 기능**
17+
- 관리자의 카테고리 관리를 통한 **작업 관리**
18+
1219

1320
<br>
1421

1522
## 팀원 구성
16-
17-
<div align="center">
23+
### CLAP의 FE팀원들
24+
<div>
1825

1926
| **Chloe** | **Tony** | **Moya** |
2027
| :------: | :------: | :------: |
21-
| [<img src="https://github.com/user-attachments/assets/8d30dae3-77cb-442b-ade3-a03bb1d3d7f0" height=150 width=150> <br/> @BaekJiyeon02](https://github.com/BaekJiyeon02) | [<img src="https://github.com/user-attachments/assets/780cc5ac-6af4-46e6-8c6a-65066e180437" height=150 width=150> <br/> @seorang42](https://github.com/seorang42) | [<img src="https://github.com/user-attachments/assets/ff7197a0-85e4-41e7-a49c-3e03bf3c2a7c" height=150 width=150> <br/> @Minkyu0424](https://github.com/Minkyu0424) |
28+
| [<img src="https://github.com/user-attachments/assets/796fc29d-a594-4201-9204-a1357121c7f6" height=160 width=140> <br/> @BaekJiyeon02](https://github.com/BaekJiyeon02) | [<img src="https://github.com/user-attachments/assets/780cc5ac-6af4-46e6-8c6a-65066e180437" height=160 width=160> <br/> @seorang42](https://github.com/seorang42) | [<img src="https://github.com/user-attachments/assets/b1d2ff17-2e46-4c4b-a29f-2e4c18920f7c" height=160 width=140> <br/> @Minkyu0424](https://github.com/Minkyu0424) |
2229

2330

2431
</div>
@@ -35,169 +42,200 @@
3542
</tr>
3643
</thead>
3744
<tbody>
45+
<tr>
46+
<td>
47+
<p>Environment</p>
48+
</td>
49+
<td>
50+
<img src="https://img.shields.io/badge/Github-181717?style=for-the-badge&logo=Github&logoColor=ffffff">
51+
<img src="https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=ffffff">
52+
<img src="https://img.shields.io/badge/Vscode-007ACC?style=for-the-badge&logo=Visual Studio Code&logoColor=ffffff">
53+
</td>
54+
</tr>
3855
<tr>
3956
<td>
40-
<p>프론트엔드</p>
57+
<p>Development</p>
4158
</td>
4259
<td>
4360
<img src="https://img.shields.io/badge/vue.js-4FC08D?style=for-the-badge&logo=vue.js&logoColor=white" >
4461
<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=TypeScript&logoColor=white" />
45-
<img src="https://img.shields.io/badge/reactquery-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white" />
62+
<img src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=Vite&logoColor=white" />
63+
<img src="https://img.shields.io/badge/reactquery-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white" />
4664
<img src="https://img.shields.io/badge/axios-5A29E4?style=for-the-badge&logo=Axios&logoColor=white" />
65+
<img src="https://img.shields.io/badge/chart.js-FF6384?style=for-the-badge&logo=chartdotjs&logoColor=white" />
66+
<img src="https://img.shields.io/badge/tailwindcss-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white" />
4767
</td>
4868
</tr>
4969
<tr>
5070
<td>
51-
<p>협업</p>
71+
<p>Communication</p>
5272
</td>
5373
<td>
5474
<img src="https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=Notion">
5575
<img src="https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=Figma&logoColor=ffffff">
5676
<img src="https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=Slack&logoColor=ffffff">
5777
<img src="https://img.shields.io/badge/Jira-0052CC?style=for-the-badge&logo=Jira&logoColor=ffffff">
58-
<img src="https://img.shields.io/badge/Github-181717?style=for-the-badge&logo=Github&logoColor=ffffff">
5978
</td>
6079
</tr>
6180
</tbody>
6281

6382
</table>
6483
<br>
6584

66-
## 2. 채택한 개발 기술과 브랜치 전략
85+
## 2.개발 기술
6786

6887
### Vue
69-
70-
- Vue
71-
- Vue는 다른 프레임워크 대비 가볍고 빠르기에 초기 로딩시간이 빠르다는 장점이 있습니다.
72-
- 비교적 규모가 크지않고 SPA를 요하는 이번 프로젝트의 조건에 맞는 프레임워크라 생각이들어 채택했습니다.
88+
- Vue는 다른 프레임워크 대비 가볍고 빠르기에 초기 로딩시간이 빠르다는 장점이 있습니다.
89+
- 비교적 규모가 크지않고 SPA를 요하는 이번 프로젝트의 조건에 맞는 프레임워크라 생각이들어 채택했습니다.
90+
- 커뮤니티도 크고, 활성화 되었기에 개발 중 우리팀이 잘 모르거나 필요한 정보들에 대해 보다 쉬운 접근 가능하다 생각했습니다.
7391

7492
### pinia
75-
7693
- 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
7794
- Pinia를 채택한 이유
7895
- Pinia는 Vue 3의 Composition API를 기반으로 설계되어 코드가 간결하고 이해하기 쉬우며 팀원들이 알고있던 zustand 방식과 유사해 학습비용을 낮출 수 있었습니다.
7996
- Vuex라는 방법도 있었지만, vuex보다 더 단순한 구조로 이루어져있기에 pinia를 택했습니다.
8097
- Pinia는 TypeScript와 잘 통합되기에 타입정의도 비교적 간단한 장점들이 있었습니다.
8198
- Vue에서 제공하는 DevTools에서 기본지원되기에 상태 변화에 따른 시각적으로 확인이 가능하다는 점도 큰 장점으로 다가왔습니다.
8299
- 로그인과 최초 프로필 설정 시 유저 정보를 store에 저장해 관리하는 방식으로 사용합니다.
100+
- 작업 목록에 관한 필터링 시 필터링 params에 대한 요소들을 관리하는 방식으로 사용합니다.
83101

84102
### eslint, prettier
85-
86103
- 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
87104
- 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
88105
- 기본 컨벤션을 사용하며, 예외 규칙은 팀원들과 협의했습니다.
89106
- 협업 시 매번 컨벤션을 신경 쓸 필요 없이 빠르게 개발하는 데에 목적을 두었습니다.
90107

91108
### tailwind
92-
93109
- 사전 정의된 유틸리티 클래스들로 다양한 스타일을 빠르고 일관성있게 적용이 가능합니다.
94110
- css파일을 따로 작성없이 코드내에 작성해 빠른 스타일링 및 디자인 시스템을 일관되게 유지하도록 했습니다.
95111
- 커스텀 속성을 통해 지정된 스타일링 내에서 팀원들이 중복된 스타일 코드없이 사용하도록 했습니다.
96112

97-
### 브랜치 전략
113+
### typescript
114+
- 사전 정의된 유틸리티 클래스들로 다양한 스타일을 빠르고 일관성있게 적용이 가능합니다.
115+
- css파일을 따로 작성없이 코드내에 작성해 빠른 스타일링 및 디자인 시스템을 일관되게 유지하도록 했습니다.
116+
- 커스텀 속성을 통해 지정된 스타일링 내에서 팀원들이 중복된 스타일 코드없이 사용하도록 했습니다.
98117

99-
- Git-flow 전략을 기반으로 main, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
100-
- main, develop, Feat 브랜치로 나누어 개발을 하였습니다.
101-
- **main** 브랜치는 배포 단계에서만 사용하는 브랜치입니다.
102-
- **develop** 브랜치는 개발 단계에서 git-flow의 master 역할을 하는 브랜치입니다.
103-
- **Feat** 브랜치는 기능 단위로 독립적인 개발 환경을 위하여 사용하고 merge 후 각 브랜치를 삭제해주었습니다.
118+
### Vite
119+
- 번들링 후 서버를 띄우는 다른 번들링 도구와 다르게 **ES모듈 기반으로 동작해 빠른 로딩속도 제공**
120+
- **빠른 HMR**(Hot Module Replacement)을 지원함 개발의 편리함 향상
121+
- Vite는 영향받는 모듈만 리로드해 성능이 유지됨
122+
- **최적화된 빌드 제공(Rollup)**
123+
- 트리 쉐이킹, 코드 분한, 최적화 번들링이 자동 적용됨
124+
125+
## 3.브랜치 전략
126+
- Git-flow 전략을 기반으로 release, develop 브랜치와 feature 보조 브랜치를 운용했습니다.
127+
- release, develop, Feat 브랜치로 나누어 개발을 하였습니다.
128+
- 새로운 기능을 분류하는 **feature** 브랜치
129+
- 새로운 기능이 합쳐져 테스트와 QA가 이루어지는 **develop** 브랜치
130+
- 검증된 코드들이 합쳐지는 **release** 브랜치로 분류
104131

132+
<br>
105133
<br>
106134

107135
## 3. 프로젝트 구조
108136

109137
```
110-
.
111-
├── .github/
112-
├── .vscode/
113-
├── cypress/
114-
├── node_modules/
115-
├── public/
116-
├── src/
117-
│ ├── api/
118-
│ ├── assets/
119-
│ ├── components/
120-
│ ├── router/
121-
│ ├── stores/
122-
│ ├── types/
123-
│ ├── utils/
124-
│ ├── views/
125-
│ │ └── App.vue
126-
│ ├── main.ts
127-
│ └── labels.json
128-
├── .gitignore
129-
├── index.html
130-
├── package.json
131-
├── package-lock.json
132-
├── .editorconfig
133-
├── .prettierrc.json
134-
├── eslint.config.js
135-
├── postcss.config.js
136-
├── print-folder-structure.js
137-
├── README.md
138-
├── tailwind.config.js
139-
├── tsconfig.json
140-
└── vite.config.ts
141-
138+
src/
139+
├── api/ # axios Instance를 통한 API 관련 로직
140+
├── assets/ # 정적 파일 (이미지, 폰트, 아이콘 등)
141+
│ ├── fonts/ # 폰트 파일
142+
│ └── icons/ # 아이콘 파일
143+
├── components/ # 컴포넌트 파일 폴더
144+
│ ├── api-logs/ # 관리자 API 로그 관련 컴포넌트
145+
│ ├── charts/ # 차트 컴포넌트
146+
│ ├── common/ # 공용 컴포넌트
147+
│ ├── filters/ # 검색창 필터 관련 컴포넌트
148+
│ ├── lists/ # 리스트 목록 관련 컴포넌트
149+
│ ├── login-logs/ # 관리자 로그인 로그 관련 컴포넌트
150+
│ ├── member-management/ # 관리자 멤버 관리 컴포넌트
151+
│ ├── my-request/ # 내 요청 관리 컴포넌트
152+
│ ├── my-task/ # 내 작업 관리 컴포넌트
153+
│ ├── request-approve/ # 요청 승인 관련 컴포넌트
154+
│ ├── request-history/ # 요청 히스토리 컴포넌트
155+
│ ├── request-task/ # 작업 요청 관련 컴포넌트
156+
│ ├── requested/ # 승인 대기중인 요청관련 컴포넌트
157+
│ ├── statistics/ # 통계 관련 컴포넌트
158+
│ ├── task-board/ # 작업 보드 컴포넌트
159+
│ ├── task-detail/ # 작업 상세 정보 컴포넌트
160+
│ ├── task-management/ # 관리자 작업 관리 컴포넌트
161+
│ ├── team-board/ # 팀 보드 컴포넌트
162+
│ ├── top-bar/ # 상단 바 컴포넌트
163+
│ └── user-manage/ # 관리자 회원 관리 컴포넌트
164+
├── constants/ # 상수 파일 정의
165+
├── hooks/ # Vue 커스텀 훅
166+
├── layout/ # Vue 페이지 레이아웃 컴포넌트
167+
├── router/ # 라우팅 관련 설정
168+
├── stores/ # Pinia 상태 관리
169+
├── types/ # TypeScript 타입 정의
170+
├── utils/ # 유틸리티 함수
171+
└── views/ # 주요 페이지 컴포넌트
142172
```
143173

144174
<br>
145175

176+
146177
## 4. 역할 분담
147178

148179
### Chloe(백지연)
149180

150-
- **UI**
151-
- 페이지 : 로그인, 내 정보수정, 이메일 인증 카테고리 생성
152-
- 공통 컴포넌트 : 알림, 프로필 모달, 권한 별 사이드 바
153181
- **기능**
154-
-
182+
- **페이지** : 로그인, 비밀번호 재인증, 이메일 인증, 비밀번호 재설정, 내 정보수정
183+
- **공통 컴포넌트** : 알림, 프로필 모달, 권한 별 사이드 바, 헤더
155184

156185
<br>
157186

158187
### Tony(윤장호)
159188

160-
- **UI**
161-
- 페이지 : 내 요청, 승인 대기중인 요청, 전체 요청 기록, 내 작업, 작업보드 통계, 로그인 기록, 회원 관리
162-
- 공통 컴포넌트 :
163189
- **기능**
164-
-
190+
- **페이지** : 내 요청, 승인 대기중인 요청, 전체 요청 기록, 내 작업, 작업보드, 팀 현황, 통계, 로그인 기록, 작업 기록 회원 관리
165191

166192
<br>
167193

168194
### Moya(최민규)
169195

170-
- **UI**
171-
- 페이지 : 작업 요청, 요청 승인, 새 회원 추가, 회원 정보 수정, 작업 관리
172-
- 공통 컴포넌트 : 요청 세부정보
173196
- **기능**
174-
-
197+
- **페이지** : 작업 요청, 요청 승인, 요청 수정, 요청 세부정보, 새 회원 추가, 회원 정보 수정, 작업 관리
198+
- **공통 컴포넌트** : 아이콘
175199

176200
<br>
177201

178-
## 5. 개발 기간 및 작업 관리
179-
180-
### 개발 기간
181-
182-
- 전체 개발 기간 : 2025-01-20~
183-
- UI 구현 : 2025-01-20~
184-
- 기능 구현 :
202+
## 5. 시작가이드
185203

186-
<br>
204+
### Requirements
205+
- Node.js v22.13.0
206+
- npm v10.9.2
187207

188-
### 작업 관리
208+
### Installation
209+
```
210+
$ git clone https://github.com/TaskFlow-CLAP/TaskFlow-FE.git
189211
190-
- GitHub issue, commit PR 컨벤션을 통해 각자의 작업에 대한 진행상황을 공유하고 팀원간 코드리뷰를 주고 받습니다
191-
- 수요일, 금요일 각자의 작업 현황과 향후 주간 일정에 대해서 이야기하는 시간을 갖습니다.
192-
-
212+
$ cd TaskFlow-FE
213+
$ npm install
214+
$ npm run dev
215+
// 로컬로 실행하는 경우 http://localhost:5173 포트번호로 실행
193216
194-
<br>
217+
// 프로젝트 최상단 폴더에 .env생성 후 다음을 기입
218+
VITE_API_BASE_URL=http://210.109.14.132:9090/
219+
```
195220

196-
## 6. 신경 쓴 부분
221+
### [초기화면]
222+
- 서비스 초기 접속화면
223+
<table>
224+
<tr>
225+
<td align="center"><b>홈 화면</b></td>
226+
<td align="center"><b>대시보드</b></td>
227+
<td align="center"><b>설정 화면</b></td>
228+
</tr>
229+
<tr>
230+
<td><img src="<img width="1268" alt="image" src="https://github.com/user-attachments/assets/10d1b04c-bd20-41ac-b672-2ca9972b4e72" />"width="300 height=200"></td>
231+
<td><img src="./images/dashboard.png" width="300"></td>
232+
<td><img src="./images/settings.png" width="300"></td>
233+
</tr>
234+
</table>
197235

198236
<br>
199237

200-
## 7. 페이지별 기능
238+
## 6. 페이지별 기능
201239

202240
### [초기화면]
203241
- 서비스 초기 접속화면
@@ -207,31 +245,9 @@
207245

208246
<br>
209247

210-
## 8. 트러블 슈팅
248+
## 7. 트러블 슈팅
211249

212250
- 노션링크
213-
<br>
214-
215-
## 9. 개선 목표
216-
217-
- API 모듈화 : API를 불러오는 코드의 반복이 많아 모듈화할 예정
218-
219-
- **25-01-20 성능 개선 내용 (예시)**
220-
221-
222-
<br>
223-
224-
## 10. 프로젝트 후기
225-
226-
### Chloe(백지연)
227-
228-
<br>
229-
230-
### Tony(윤장호)
231-
232-
<br>
233-
234-
### Moya(최민규
235251

236252
<br>
237253

0 commit comments

Comments
 (0)