라이프스타일 매거진 콘텐츠 플랫폼

여가·라이프스타일 기사를 타임라인 형태의 피드로 노출하는 매거진 홈 화면을 제공합니다. 카테고리 필터 chip과 상단 sticky 검색 바로 원하는 콘텐츠를 빠르게 찾을 수 있습니다.

• React Query로 기사 목록 페이지네이션 캐싱 및 무한 스크롤 구현
• 카테고리 chip 필터 상태를 URL 쿼리 파라미터와 동기화하는 구조 설계
• Intersection Observer 기반 지연 이미지 로딩으로 피드 스크롤 구조 적용

매거진형 피드 카드 컴포넌트를 추상화해 홈·카테고리·검색 결과 화면에서 동일 컴포넌트를 재사용하는 구조를 설계합니다.

기사 상세 페이지에서 본문, 저자 프로필 링크, 관련 기사를 함께 노출하고 Article Schema.org 구조화 데이터를 삽입해 검색 엔진 노출을 최적화합니다.

• Article/BreadcrumbList JSON-LD 구조화 데이터를 서버 사이드에서 주입하는 구조 설계
• 기존 URL → 신규 URL 301 리다이렉트 매핑 테이블 및 미들웨어 구현
• Open Graph·Twitter Card 메타 태그 자동 생성 로직 적용

검색 엔진 크롤러가 인식하는 구조화 데이터와 리다이렉트 규칙을 코드 레벨에서 관리해, 기존 시스템 연동 시 URL 트래픽 유실을 방지하는 구조를 설계합니다.

PC/모바일 반응형 레이아웃으로 카테고리 목록, 통합 검색 결과, 저자별 프로필·기고 목록 화면을 제공합니다. breakpoint 체계로 3단 그리드(PC)에서 1단 스택(모바일)으로 전환되는 구조를 구현합니다.

• Tailwind CSS breakpoint 체계로 PC 3단 그리드 → 모바일 1단 스택 반응형 레이아웃 구현
• 저자 프로필 페이지에 해당 저자의 기고 기사 목록을 페이지네이션으로 노출
• 디바운스 검색 입력 + 최근 검색어 로컬 저장 구조 적용

단일 검색 컴포넌트를 카테고리·저자·홈 검색에 공통 적용해 반응형 breakpoint 전반에서 일관된 탐색 경험을 구현합니다.

광고주 대상 비즈니스 소개 페이지와 객원 에디터 소개 페이지를 신설하고, 제휴·광고 문의를 접수해 알림으로 전달하는 폼을 구현합니다.

• React Hook Form과 Zod 스키마로 제휴 문의 폼 유효성 검증 구현
• 폼 제출 시 서버에서 이메일 발송 및 Slack Webhook 알림을 트리거하는 API 설계
• 비즈니스/에디터 소개 페이지를 콘텐츠 블록 기반으로 구성해 재사용 가능한 구조 설계

제휴 문의 접수부터 알림 전달까지 이어지는 단일 파이프라인을 구현해, 관리자 기능과 연동되는 문의 관리 확장의 토대를 마련합니다.