하자점검 서비스 반응형 홍보 홈페이지

방문자가 첫 화면에서 외벽 점검 사진과 점검 사례 카드, 서비스 카드 6개, 프로세스 4단계, 장비 소개를 한 흐름으로 봅니다. FAQ 아코디언을 열어 자주 묻는 질문을 확인합니다.

• 서비스 카드·사례·FAQ 데이터를 JSON 스키마로 분리해 문구 교체만으로 화면이 바뀌는 구조 설계
• IntersectionObserver 로 섹션 등장 효과를 구성하고 동작 줄이기 설정을 따르도록 구현
• Tailwind 브레이크포인트 3단계로 카드 그리드와 내비게이션 반응형 구현

클라이언트가 제공할 영상·사진·문구를 데이터 파일 교체만으로 반영하도록 구성해, 자료 수령 뒤 바로 화면에 올릴 수 있게 설계합니다.

방문자가 5개 구간과 옵션 2종을 고르면 기본 금액과 옵션 금액이 나뉘어 실시간으로 합산됩니다. 합계를 확인한 뒤 같은 내용으로 문의 화면으로 넘어갑니다.

• 구간별 단가와 옵션 단가를 요금표 데이터로 분리하고 합계를 순수 함수로 계산
• 선택 변경 시 견적서의 기본·옵션 항목이 즉시 다시 그려지도록 상태 구조 설계
• 선택 내역을 문의 폼 초기값으로 전달하는 URL 파라미터 연동

견적 계산 함수를 서버와 화면이 같은 요금표로 공유해, 화면 합계와 접수 시 저장되는 금액이 어긋나지 않게 구현합니다.

방문자가 연락 카드를 보고 문의 폼을 작성해 접수합니다. 전화번호가 자동 포맷되고 접수 뒤 조회 번호가 안내되며, 같은 정보로 간이 인증을 거쳐 진행 상태를 확인합니다.

• 문의 접수 API 1종을 Express 로 구현하고 서버에서 입력값을 다시 검증
• 전화번호 정규화와 하이픈 포맷을 화면과 서버가 같은 규칙으로 처리
• 이름·연락처 끝자리 조합의 간이 인증으로 본인 문의만 조회되도록 구현

접수 API 와 조회 API 를 같은 Prisma 모델로 연결해 접수 직후 조회 화면에서 같은 진행 상태가 보이도록 구현합니다.

방문자가 최근 접수된 문의 5건을 이름과 연락처가 가려진 상태로 확인하고, 검색 노출을 위한 구조화 데이터 구성이 화면에서 보입니다.

• 이름·연락처 마스킹을 서버 응답 단계에서 적용해 원본이 화면 코드에 내려가지 않도록 구현
• JSON-LD 구조화 데이터와 OG 태그를 페이지별 메타 정보에서 생성
• sitemap.xml 과 robots.txt 를 라우트 목록에서 자동 생성

공개 목록 API 가 마스킹된 값만 응답하도록 구성해 개인정보 노출 경로를 서버에서 차단하도록 구현합니다.