포트폴리오
웹TOVLAB 자체 구현 ShowcaseFEATURED
HelpMind 고객 상담 워크스페이스 Showcase
문의 목록·대화 맥락·답변 초안·검토 단계를 한 화면에서 다루는 상담 워크스페이스 UI를 구현한 TOVLAB 자체 제작 Showcase입니다. 상담 내용과 고객 정보는 포트폴리오 시연용 fixture입니다.
프로젝트 화면
PC 화면
1모바일 웹
1주요 기능
상담 대기열채널별 문의 분류초안·검토 상태담당자 배정 상태이관 상태모바일 화면
구축 내용
실제 개발 범위에 포함된 주요 작업입니다.
주요 구현 범위
- 채널과 처리 상태를 기준으로 분류되는 상담 대기열
- 상담 상세와 초안·검토·승인 상태 UI
- 담당자 배정·이관 상태를 보여 주는 워크스페이스와 모바일 레이아웃
기술 스택
Next.js 16 (App Router)React 19TypeScriptTailwind CSS 4React Context APIuseReducerlocalStorageESLint 9
작업 배경과 확인한 문제
- 사용자가 현재 상태와 다음 조치를 확인할 수 있도록 화면을 구성했습니다.
- 화면에 보이는 값은 포트폴리오 시연용 fixture로 분리했습니다.
진행 결과
- 이 항목은 TOVLAB 자체 구현 Showcase입니다. 이미지에 보이는 항목과 수치는 UI와 상태 흐름을 확인하기 위한 포트폴리오 fixture입니다.
우선 적용 범위
- 상담 대기열
- 채널별 문의 분류
- 초안·검토 상태
- 담당자 배정 상태
이후 확장 방향
- 실제 상담 채널 연동
- 고객 정보 접근 권한
- 상담 이력 저장과 품질 검토
유사하게 적용할 수 있는 경우
- 상태 확인과 다음 조치 UI가 필요한 업무 화면
- 필터·선택·검토 단계를 가진 웹 서비스
상담 전에 정리하면 좋은 내용
- 확인할 상태와 다음 조치 규칙
- 실제 데이터·권한·연동의 범위
- 모바일에서 우선할 업무 흐름