06 · Developer Guide
개발 가이드Developer Guide
PCL 시안에서 정적 사이트로 만든 코드와, 실제 운영 사이트로 갈 때 필요한 코드를 모두 담은 자료입니다.
컴포넌트 단위가 아니라 시나리오 단위로 묶여 있어 그대로 가져다 쓸 수 있습니다.
A. 운영 토대 — DB · 관리
정적 시안에서 동적 운영 사이트로 가는 첫 관문. 데이터·관리 페이지가 만들어지면 나머지는 그 위에 얹힙니다.
B. 사용자 경험 — 운영 수준
검색 · 업로드 · 폼 검증 · 오류 처리. 「되는 사이트」와 「믿을 수 있는 사이트」를 가르는 영역.
게시판 통합 검색
Fuse.js 정적 인덱스(시안 단계) → Postgres FTS + pgroonga 한국어 형태소 분석(실서비스 단계) 두 전략.
레시피 보기다중 이미지 업로드
드래그앤드롭 + 브라우저 압축(8MB → 1.5MB) + 진행률 + EXIF 자동 회전. 모바일 카메라 직찍에 최적.
레시피 보기폼 검증 (zod)
react-hook-form + zod 단일 스키마로 클라이언트·서버 검증 통일. 한국 휴대전화·동의 체크박스 정규식 포함.
레시피 보기오류 · 로딩 · 빈 화면
loading.tsx · error.tsx · not-found.tsx · Suspense · EmptyState. 행복한 길이 아닌 상태도 같은 디자인 수준으로.
레시피 보기
C. 운영 · 성장
검색 노출과 일정 관리. 사이트가 살아 움직이게 하는 외부 연동.
D. UI 레시피 — 시안 작업 시 반복 등장
갤러리 · 모달 · 공유 버튼 등 PCL 시안 사이트에서 실제 사용한 컴포넌트 단위 패턴.
AI 안내 챗봇 (FAQ 즉답)
키워드 매칭 FAQ 즉답 · 외부 키 0원 · Claude 하이브리드로 확장.
레시피 보기게시판 동적 라우트
generateStaticParams + lib/preview/*.ts + 이전/다음 네비.
레시피 보기이미지 갤러리 라이트박스
← → ESC · 외부 클릭 닫기 · body scroll lock.
레시피 보기유튜브 영상 카드 + 모달
썸네일 자동 대체 + 영상 자동 재생 + ESC 닫기.
레시피 보기공유 버튼
모바일 OS 공유 시트 + 데스크탑 SNS 드롭다운.
레시피 보기신청 폼 (DB 연동 전)
라디오 카드 + textarea + 동의 + 토스트. 한 줄만 바꿔 실 연동.
레시피 보기PDF → 이미지 자체호스팅
pdftoppm + sips. Vercel 배포 한도 안전.
레시피 보기모바일 메가패널
데스크탑 사이드 + 모바일 아코디언 분기.
레시피 보기인물 카드 사진 대체
외부 「no image」 자동 감지 → PCL 로고로 대체.
레시피 보기