손해사정사의 무료 상담 신청 페이지입니다. 의뢰인이 받아 둔 모바일 화면 시안은 신청 버튼을 눌러도 어디에도 저장되지 않는 상태였고, 이 화면을 그대로 살려 실제로 접수되는 서비스로 만들었습니다. 사고ㆍ질병 유형을 고르고 성함과 연락처를 남기면 서버에서 다시 검증해 저장하고, 같은 번호의 재신청은 한 건으로 합치며 자동 입력은 걸러 냅니다. 관리자 페이지에서는 오늘 할 일을 모은 대시보드, 상담 신청 검색ㆍ상세ㆍ처리 상태ㆍ엑셀 내려받기와 함께 화면 위에 흐르는 문의 띠 문구와 실제 사례 카드를 직접 고치고 끌어서 순서를 바꿀 수 있으며, 휴대폰에서도 그대로 씁니다. 태블릿ㆍPC 배치를 새로 잡았고 서버ㆍ도메인ㆍhttps, 매일 백업, 보관 기간이 지난 개인정보 자동 파기까지 맡았습니다. 화면의 신청 내역은 가상 데이터이며 손해사정사 이름ㆍ등록번호ㆍ연락처는 가렸습니다. 기술 스택: TypeScript, Vite, React, Tailwind CSS, Express, Prisma, SQLite, Nginx

PC 첫 화면: 사진 왼쪽ㆍ카피 오른쪽 2단, 위에 흐르는 '자주 받는 문의' 띠, 무료 상담ㆍ전화ㆍ실제 사례 버튼

휴대폰 3화면: 첫 화면 / 사고ㆍ질병 유형 선택 / 신청서(입력 확인ㆍ동의)

PC 손해사정 실제 사례: 총 금액과 항목별 금액이 들어간 카드가 흐르는 띠

PC 신청서: 손해사정사 카드, 비밀 보장 안내, 성함ㆍ연락처 입력 확인, 개인정보 동의, 무료 도움 요청 버튼

휴대폰 3화면: 신청 완료 / 관리자 상담 신청 목록(바로 전화) / 상담 상세(연락처ㆍ처리 상태)

관리자 대시보드: 연락이 늦어진 신청 알림, 상담 흐름(신규>연락완료>수임ㆍ종결), 확인할 일ㆍ성과ㆍ띠ㆍ알림 상태

관리자 상담 신청: 목록과 오른쪽 상세 패널(전화ㆍ문자ㆍ번호 복사, 처리 상태)

관리자 실시간 바 문구: 표시 방식(연출 문구ㆍ누적 신청 건수ㆍ실제 최근 신청ㆍ숨김)ㆍ띠 제목, 실제 모양 미리보기

관리자 실제 사례: 켜기/끄기ㆍ수정ㆍ끌어서 순서 변경, 금액 자동 합계, 광고 문구 주의 안내

휴대폰 3화면(관리자): 대시보드 / 실시간 바 문구 / 실제 사례