✨ CheckIn

프로젝트 소개

• 카카오엔터프라이즈 5기 기업 실무 프로젝트에서 진행하는 협업 프로젝트입니다.
• TMS(Ticket Management System)을 개발합니다.

서비스 배포 주소

• kc.quartz-checkin.xyz

개발 기간

• 팀 구성 및 기획 2025.01.06 ~ 2025.01.19
• 프로젝트 개발 2025.01.20 ~ 2025.02.07
• QA 2025.02.08 ~ 2025.02.18

🧑‍💻 개발자 소개

김현중(PL)	박석종	박준한
Frontend Developer	Frontend Developer	Frontend Developer
GitHub	GitHub	GitHub

🤖 개발 환경 설정

⚙️ Node 버전과 패키지 매니저

• Node.js: v22.13.1
• 패키지 매니저: npm

🔐 환경 변수

프로젝트 실행을 위해 루트 디렉토리에 .env 파일을 생성하고 다음 환경 변수를 설정해주세요:

VUE_APP_BASE_URL='https://api.quartz-checkin.xyz'

🛠️ 기술 스택

언어

프레임워크

스타일링

라이브러리

• Pinia (로컬 상태 관리)

• vueRouter (라우팅 라이브러리)

• TanStack Query(VueQuery) (강력한 서버 상태 관리 및 데이터 동기화 라이브러리)

• VeeValidate (폼 유효성 검사)

• VueUse (Vue Composition API 유틸리티 컬렉션)

• apex-chart (차트 UI)

• yup (스키마 기반 유효성 검증)

• date-fns (날짜 관리 유틸리티 라이브러리)

데이터 프로세싱

코드 포매터 및 검사 도구

협업툴

💻 주요 기능

1. 대시보드

dashboard.mp4

• 헤더를 통해 현재 티켓 상황 파악 가능
• 검색, 정렬, 개수 조절, 다양한 필터링, 페이지네이션 기능 제공
• 티켓 선택 시 상세로 연결

2. 티켓 생성 및 관리

create_ticket.mp4

• 저장된 템플릿 불러오기 가능
• 각 카테고리 별 요청사항 가이드 추가
• 생성된 티켓은 모든 담당자 목록에 표시됨

3. 템플릿 생성 및 사용

template.mp4

• 템플릿 생성 및 수정 가능
• 템플릿 목록에서 템플릿 상세 조회 가능
• 티켓 생성 화면에서 작성한 템플릿 불러오기 가능

4. 티켓 내부 채팅

chatting.mp4

• 사용자와 담당자의 실시간 채팅 기능
• 각 말풍선에 좋아요 버튼을 누를 수 있고, 좋아요를 누른 사용자 조회 가능
• 채팅창에서 업데이트 로그 확인 가능능

5. 통계 조회

statistics.mp4

• 각종 통계를 차트 및 표를 통해 확인 가능
• 차트를 이미지 혹은 .csv 파일로 다운로드 가능