동물구조단체 공식 홈페이지·입양 CMS

후원 CTA, 최신 구조 소식, 입양 가능 개체 카드를 한 화면에 배치한 반응형 메인과 6개 상위 메뉴를 제공합니다.

• Next.js App Router 서버 컴포넌트로 메인·목록 페이지를 SSR 렌더링
• next/image 기반 지연 로딩과 반응형 srcset 적용
• 플로팅 입양·후원·문의 버튼을 공통 레이아웃 컴포넌트로 분리

SSR 기반 메인 화면과 플로팅 CTA를 결합해 입양·후원·문의 동선을 한 화면에서 제공하도록 설계합니다.

이름, 동물 구분, 성별, 연령, 체중, 입양 상태를 조합해 개체를 찾고 상세에서 사진·건강 상태·구조 배경을 확인합니다.

• 필터 조건을 URL 쿼리 문자열로 동기화해 검색 결과 링크 공유 지원
• Prisma 동적 where 조건 조합으로 6가지 필터 처리
• 상태별 조건부 렌더링으로 신청 버튼 숨김·입양 완료 배지 구현

6가지 조건을 조합하는 서버 사이드 필터와 상태별 상세 화면 분기를 구현하도록 설계합니다.

코드나 FTP 없이 게시글 작성, 다중 사진 끌어놓기 업로드, 임시저장, 공개/숨김 전환을 처리하는 관리자 화면입니다. 업로드 즉시 미리보기를 제공하고, 임시저장과 공개 상태를 분리한 게시 상태 모델로 관리합니다.

• 드래그 앤 드롭 다중 업로드와 업로드 진행 표시 구현
• 게시 상태(임시저장·공개·숨김) 3단계 enum 모델 설계
• 서버 액션 기반 저장으로 별도 API 서버 없이 CMS 구성

운영진이 글과 사진을 올리는 전 과정을 코드 수정 없이 화면 안에서 끝내도록 설계합니다.

개체 정보 등록·수정과 보호 상태·입양 상태 변경 시 변경일을 자동으로 남기는 개체 관리 화면입니다. 상태 변경 시 서버에서 변경일과 이전 상태를 이력 테이블에 기록하여 수동 입력 누락을 막습니다.

• 상태 전이 시 Prisma 트랜잭션으로 개체와 이력 행을 함께 기록
• 이력 테이블에 이전 상태·변경 상태·변경일 컬럼 설계
• 공개/숨김 토글과 임시저장을 개체 단위로 분리

상태가 바뀔 때마다 변경일이 서버에서 자동 기록되어 운영진의 입력 부담을 없애도록 설계합니다.