법무법인 홈페이지 및 집단소송 공개 플랫폼

법인 소개, 업무분야, 진행 중 소송 하이라이트를 한 화면에서 보여주는 반응형 홈을 구성합니다. 히어로와 업무분야 카드, 모집 중 소송 요약 띠를 구현합니다.

• Tailwind CSS 브레이크포인트 3단계로 모바일·태블릿·데스크톱 반응형 레이아웃 구성
• 업무분야·구성원 데이터를 PostgreSQL 테이블과 Prisma 모델로 분리하여 CMS 편집 대상으로 설계
• 한글 장문 가독성을 고려한 serif 제목과 sans 본문 조합의 타이포그래피 체계 적용

기존 사이트의 콘텐츠를 업무분야·구성원·소식 모델로 재구조화하고, 홈 화면에서 모집 중 소송을 바로 확인하는 진입 구조를 구현합니다.

진행 중·모집 중·종결 소송을 상태 배지와 함께 카드로 나열하고 필터·검색·정렬로 좁혀 볼 수 있습니다. 좌측 필터 레일과 카드 그리드, 퀵뷰 드로어를 구현합니다.

• 상태·분야·모집 마감일 필터를 URL 쿼리와 동기화하여 목록 조건을 링크로 공유
• Prisma 동적 where 조건과 PostgreSQL 인덱스로 상태별 목록 조회 쿼리 설계
• 디바운스 검색과 정렬 옵션을 커스텀 훅으로 추상화하여 목록 화면에서 재사용

소송 상태값을 enum으로 모델링하여 필터·배지·정렬 기준을 단일 정의로 관리하고, 카드 퀵뷰에서 상세 이동 전에 핵심 정보를 확인하는 구조를 구현합니다.

개별 집단소송의 개요·배경·참여 방법·기대 절차를 템플릿 기반 랜딩으로 보여줍니다. 섹션 템플릿과 진행 타임라인, 고정 하단 참여 버튼을 구현합니다.

• 소송별 콘텐츠를 섹션 블록 JSON으로 저장하고 단일 상세 템플릿 컴포넌트로 렌더링
• Intersection Observer 기반 섹션 앵커 내비게이션과 스크롤 진행 표시 구현
• 고정 하단 참여 버튼이 모집 상태에 따라 활성·비활성으로 전환되는 상태 분기 설계

소송마다 페이지를 새로 만들지 않고 템플릿과 콘텐츠 블록 조합으로 상세 랜딩을 생성하여, 관리자가 신규 소송을 등록하면 같은 구조로 즉시 노출되는 구조를 구현합니다.

소송 참여 신청과 일반 상담 문의를 단계형 폼으로 받고 개인정보 수집 동의와 접수 완료 안내를 제공합니다. 단계형 입력, 동의 체크, 서버 저장과 알림 큐 적재를 구현합니다.

• Zod 스키마로 클라이언트·서버 동일 규칙의 입력 검증 및 연락처 형식 검사 적용
• 개인정보 필드를 AES-256-GCM으로 암호화하여 저장하는 Prisma 미들웨어 설계
• 접수 직후 이메일·SMS 알림을 큐에 적재하는 비동기 발송 구조 구현

개인정보 수집 동의 이력과 암호화 저장, 접수 알림을 한 흐름으로 묶어 법률 상담 폼에 요구되는 민감 정보 처리 구조를 구현합니다.