지역 서비스 SEO 웹사이트 빌더

좌측 블록 트리, 중앙 미리보기 캔버스, 우측 속성 패널로 지역 페이지의 문구와 블록 구성을 편집하는 화면입니다.

• 블록 트리 상태를 Zustand로 관리하고 Immer로 불변 업데이트를 적용
• 템플릿 변수({지역명} 등)를 서버에서 치환하는 렌더 함수로 지역별 페이지를 일괄 생성
• dnd-kit 기반 블록 순서 변경과 속성 인스펙터 폼을 React Hook Form + Zod로 검증

하나의 템플릿에서 지역별 페이지를 생성하는 변수 치환 구조와 실시간 캔버스 미리보기를 구현합니다.

강남, 해운대 등 지역 슬러그로 접속하면 해당 지역 정보가 담긴 반응형 랜딩페이지가 서버에서 렌더링되는 방문자용 화면입니다.

• App Router 동적 세그먼트([region])와 generateStaticParams로 지역 경로를 빌드 시점에 생성
• 지역 데이터 변경 시 on-demand revalidate로 해당 경로만 재생성
• Tailwind CSS 반응형 그리드와 모바일 우선 레이아웃 적용

지역 슬러그 하나로 URL·콘텐츠·메타 정보가 함께 생성되는 동적 라우팅 구조를 구현합니다.

페이지별 Title·Description·H1·canonical 값과 JSON-LD 구조화 데이터, 사이트맵·robots.txt 생성 결과를 한 화면에서 확인하는 점검 화면입니다.

• generateMetadata로 지역별 Title·Description·canonical·Open Graph를 서버에서 생성
• LocalBusiness·FAQPage JSON-LD를 지역 데이터에서 직렬화해 script 태그로 삽입
• sitemap.ts와 robots.ts 라우트로 지역 추가 시 사이트맵 항목 자동 갱신

지역 데이터에서 메타태그·JSON-LD·사이트맵 항목이 함께 생성되는 서버 렌더링 SEO 구조를 설계합니다.

방문자가 이름·연락처·희망 일정을 입력해 문의와 예약을 접수하는 폼과 접수 완료 안내 화면입니다. 입력값 검증 후 PostgreSQL에 저장하고 지역 페이지 출처를 함께 기록합니다.

• React Hook Form + Zod 스키마를 클라이언트와 API Route에서 공유해 이중 검증
• Prisma로 문의·예약 테이블에 저장하고 유입 지역 페이지를 외래키로 기록
• 중복 제출 방지를 위한 요청 멱등 키와 간단한 제출 간격 제한 적용

접수 데이터에 유입 지역 페이지를 함께 기록해 관리자가 지역별로 문의를 구분할 수 있는 구조를 구현합니다.