← 포트폴리오 목록

하자점검 문의·요금·유지보수 운영 콘솔

홍보 홈페이지 오픈 뒤 담당자가 사용할 운영 콘솔을 제안하는 확장 구현한 프로젝트입니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종플랫폼
기술 스택
React 18TypeScriptTailwind CSSNode.jsExpressPrismaPostgreSQLTelegram Bot API
주요 기능
  • 운영 현황
  • 문의 접수함
  • 요금표·사례
  • 유지보수·알림

프로젝트 개요

범위: 개발, 디자인, 기획

홍보 홈페이지 오픈 뒤 담당자가 사용할 운영 콘솔을 제안하는 확장 구현한 프로젝트입니다. 문의 접수 목록과 상태 처리, 견적 요금표와 사례 관리, 텔레그램 알림 설정, 월 유지보수 요청·처리 현황과 장애 감시를 한 콘솔에서 다루는 구조를 보여 줍니다.

작업 범위

  • 운영 현황: 담당자가 오늘 새로 접수된 문의와 처리 대기 건, 이번 달 유지보수 요청 처리 현황을 처리 카드로 봅니다. 카드를 누르면 해당 목록이 필터가 걸린 채 열립니다
  • 문의 접수함: 담당자가 접수된 문의를 상태와 기간으로 걸러 보고 상세를 열어 견적 선택 내역을 확인한 뒤 상태를 바꾸고 메모를 남깁니다
  • 요금표·사례: 담당자가 5구간과 옵션 2종의 단가를 수정하고 변경이 시뮬레이터 합계에 어떻게 반영되는지 미리 봅니다. 홈페이지에 노출되는 사례 6건의 노출 여부와 순서도 관리합니다
  • 유지보수·알림: 담당자가 월 유지보수 요청과 처리 이력을 보고, 장애 감시 결과를 확인하며, 텔레그램 알림 수신 조건을 설정합니다

주요 업무

  • 운영 현황 화면: 처리 카드 줄, 최근 접수 문의 표, 이번 달 유지보수 요청 요약, 사이트 상태 표시 구조를 설계합니다
  • 문의 접수함 화면: 상태 칩 필터, 문의 표와 휴대폰용 카드 목록, 상세 대화상자, 상태 변경과 되돌리기, 내부 메모 구조를 설계합니다
  • 요금표·사례 화면: 요금표 편집 표, 변경 전후 합계 미리보기, 사례 목록과 노출 토글, 순서 변경 구조를 설계합니다
  • 유지보수·알림 화면: 월별 요청·처리 이력 표, 요청 상세 대화상자, 장애 감시 결과 목록, 텔레그램 알림 조건 설정과 시험 발송 구조를 설계합니다
하자점검 문의·요금·유지보수 운영 콘솔
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

오픈 뒤 유지보수의 지속성이 핵심 기준이라 요청 접수와 처리 이력을 남기는 기록 구조를 먼저 설계할

텔레그램 알림은 옵션 범위라 알림 없이도 콘솔 확인만으로 운영되

기능을 분리해 설계할 필요

요금표 변경이 진행 중인 문의의 견적 금액에 영향을 주지 않

적용 시점 기준 설계 필요

장애 감시는 호스팅 환경 확정 뒤 확인 주소와 주기를 정하므로 설정값으로 분리하는 구조 설계

구현 내용

핵심 기능 상세

핵심 기능 1

운영 현황

담당자가 오늘 새로 접수된 문의와 처리 대기 건, 이번 달 유지보수 요청 처리 현황을 처리 카드로 봅니다. 카드를 누르면 해당 목록이 필터가 걸린 채 열립니다.

  • 문의 상태별 건수와 유지보수 요청 건수를 한 요약 쿼리로 집계해 카드에 연결
  • 카드 클릭 시 쿼리 파라미터로 필터를 전달해 목록 건수와 카드 숫자가 같도록 구성
  • 사이트 응답 확인 결과를 최근 순으로 저장해 상태 표시에 연결

카드 숫자와 목록 건수가 같은 집계 쿼리를 쓰도록 구성해 화면 간 수치가 어긋나지 않게 구현합니다.

운영 현황
운영 현황 실제 화면
핵심 기능 2

문의 접수함

담당자가 접수된 문의를 상태와 기간으로 걸러 보고 상세를 열어 견적 선택 내역을 확인한 뒤 상태를 바꾸고 메모를 남깁니다.

  • 상태·기간 조건을 서버 쿼리 파라미터로 받아 조회하는 목록 API 구현
  • 상태 변경 이력을 별도 테이블에 기록해 처리 과정을 추적
  • 상태 변경 시 방문자 간이 조회 화면의 진행 상태가 같은 값을 읽도록 연결

상태 변경이 방문자 조회 화면과 같은 데이터를 바꾸도록 구성해 접수부터 처리까지 한 기록으로 이어지게 구현합니다.

문의 접수함
문의 접수함 실제 화면
핵심 기능 3

요금표·사례

담당자가 5구간과 옵션 2종의 단가를 수정하고 변경이 시뮬레이터 합계에 어떻게 반영되는지 미리 봅니다. 홈페이지에 노출되는 사례 6건의 노출 여부와 순서도 관리합니다.

  • 요금표를 버전 단위로 저장하고 적용 시점을 구분해 변경 이력을 보존
  • 단가 입력값을 서버에서 범위 검증하고 오류 칸을 표시
  • 사례 노출 상태와 순서를 저장해 홍보 홈페이지 사례 섹션이 같은 데이터를 읽도록 연결

요금표 변경을 저장하기 전에 시뮬레이터 합계 변화를 미리 보여 주어, 단가 실수를 적용 전에 발견하도록 구현합니다.

요금표·사례
요금표·사례 실제 화면
핵심 기능 4

유지보수·알림

담당자가 월 유지보수 요청과 처리 이력을 보고, 장애 감시 결과를 확인하며, 텔레그램 알림 수신 조건을 설정합니다.

  • 요청 접수·처리 시각을 저장해 월별 이력과 처리 중 건을 집계
  • 주기적 응답 확인 작업의 결과를 저장하고 연속 실패 시 알림 대상으로 표시
  • 텔레그램 봇 토큰과 수신 조건을 서버 설정으로 분리하고 시험 발송 API 구현

알림 발송 실패가 문의 접수를 막지 않도록 접수와 알림을 분리해, 알림 장애가 서비스에 영향을 주지 않게 구현합니다.

유지보수·알림
유지보수·알림 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

운영 데이터 모델 설계 · 2026.11

문의 상태 이력, 요금표 버전, 유지보수 요청 테이블 설계

STEP 2

문의 접수함·상태 처리 구현 · 2026.11

목록 필터, 상세 대화상자, 상태 변경과 메모 구현

STEP 3

요금표·사례 관리 구현 · 2026.11

단가 편집, 합계 미리보기, 사례 노출·순서 관리 구현

STEP 4

알림·유지보수 현황 구현 · 2026.11

텔레그램 알림 설정, 장애 감시 결과, 월별 요청 이력 구현

개발 결과

접수부터 처리까지 단일 기록 구조 설계방문자 조회와 관리 콘솔이 같은 문의 데이터를 읽는 구조를 설계합니다.
요금표 버전 관리 구현단가 변경을 버전으로 저장해 적용 전 미리보기와 이력 확인이 가능하도록 구현합니다.
알림 분리 구조 구성접수와 알림 발송을 분리해 알림 장애가 접수에 영향을 주지 않도록 구성합니다.
월 유지보수 이력 집계 구축요청·처리 시각을 저장해 월별 이력과 처리 중 건을 집계하는 구조를 구축합니다.

기술적 주안점

  • 카드 숫자와 목록 건수가 같은 집계 쿼리를 쓰도록 구성해 화면 간 수치가 어긋나지 않게 구현합니다
  • 상태 변경이 방문자 조회 화면과 같은 데이터를 바꾸도록 구성해 접수부터 처리까지 한 기록으로 이어지게 구현합니다
  • 요금표 변경을 저장하기 전에 시뮬레이터 합계 변화를 미리 보여 주어, 단가 실수를 적용 전에 발견하도록 구현합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의