Info News 피드 페이지 구현, 배포 리포트 (FE)

React + TS, Vercel

작성일: 2026-01-17
작성자: Claude Code + mangowhoiscloud

---

1. 개요

기존 정적 Info 페이지를 동적 뉴스 피드 UI로 리뉴얼했습니다. 백엔드 /api/v1/info/news API와 연동하여 환경/에너지/AI 관련 뉴스를 실시간으로 제공합니다.

1.1 AS-IS vs TO-BE

콘텐츠	정적 분리배출 팁 (하드코딩)	동적 뉴스 피드 (API 연동)
데이터 소스	없음	네이버 뉴스 + NewsData.io
페이지네이션	없음	무한 스크롤 (cursor 기반)
카테고리	없음	전체/환경/에너지/AI

---

2. 구현 내용

2.1 프론트엔드 (React + TypeScript)

파일 구조

src/
├── api/services/info/
│   ├── info.type.ts      # 타입 정의
│   ├── info.service.ts   # API 호출
│   ├── info.queries.ts   # React Query hooks
│   └── index.ts
├── components/info/
│   ├── NewsCard.tsx      # 뉴스 카드 컴포넌트
│   ├── NewsFeed.tsx      # 무한 스크롤 피드
│   └── index.ts
└── pages/Info/
    ├── Info.tsx          # 레거시 (미사용)
    └── InfoFeed.tsx      # 새 페이지

주요 컴포넌트

InfoFeed.tsx

• 헤더: 뒤로가기 버튼 + "News" 타이틀
• 카테고리 탭: 전체/환경/에너지/AI (가운데 정렬)
• URL 쿼리 파라미터로 카테고리 상태 유지 (?category=environment)

NewsFeed.tsx

• useInfiniteQuery + IntersectionObserver로 무한 스크롤 구현
• 로딩 스켈레톤 UI
• 에러/빈 상태 처리

NewsCard.tsx

• Perplexity 스타일 카드 뉴스 UI
• 썸네일 + 제목 + 요약 + 출처/시간 + 키워드 태그
• 상대 시간 표시 (방금 전, 2시간 전 등)

2.2 백엔드 수정

CORS 설정 추가

# workloads/domains/info/base/configmap.yaml
INFO_ALLOWED_ORIGINS: '["https://growbin.app","https://www.growbin.app","https://frontend.dev.growbin.app","https://api.dev.growbin.app"]'

asyncpg DSN 호환성 수정

# apps/info/setup/dependencies.py
dsn = settings.database_url.replace("postgresql+asyncpg://", "postgresql://")

---

3. UI/UX 디자인

3.1 카테고리 탭

        전체    환경    에너지    AI
        ━━━━
       #569f87  #99a1af (inactive)

• 활성 탭: font-semibold + text-brand-primary (#569f87)
• 비활성 탭: font-normal + text-inactive (#99a1af)
• 가운데 정렬 (justify-center) + 넓은 간격 (gap-10)
• 글자 크기: text-base (16px)

3.2 뉴스 카드

┌───────────────────────────────────┐
│ ┌─────┐  제목 텍스트...           │
│ │ IMG │  요약 텍스트...           │
│ └─────┘  출처 · 2시간 전          │
│          ┌────┐ ┌────┐            │
│          │환경│ │재활용│           │
│          └────┘ └────┘            │
└───────────────────────────────────┘

• 80x80px 썸네일
• 제목 2줄 말줄임
• 요약 2줄 말줄임
• 키워드 태그 최대 3개

---

4. 기술 스택

영역	기술
상태 관리	React Query (useInfiniteQuery)
라우팅	React Router (useSearchParams)
스타일링	Tailwind CSS
무한 스크롤	IntersectionObserver API
페이지네이션	Cursor 기반 (백엔드 API)

---

5. PR 목록

frontend#85	Info 페이지 뉴스 피드 UI 리뉴얼	✅ Merged
frontend#86	Info 페이지 헤더 + 카테고리 탭	✅ Merged
frontend#87	develop → main (뉴스 피드)	✅ Merged
frontend#88	카테고리 탭 미니멀 스타일	✅ Merged
frontend#89	develop → main (탭 스타일)	✅ Merged
backend#395	CORS dev origin 추가	✅ Merged
backend#396	asyncpg DSN 호환성 수정	✅ Merged

---

6. 해결한 이슈

6.1 CORS 에러

• 문제: frontend.dev.growbin.app에서 info API 호출 시 CORS 차단
• 원인: ConfigMap에 dev origin 미등록
• 해결: INFO_ALLOWED_ORIGINS에 dev 도메인 추가

6.2 asyncpg DSN 에러

• 문제: postgresql+asyncpg:// 형식 DSN 파싱 실패
• 원인: asyncpg는 postgresql:// 형식만 지원
• 해결: DSN 문자열 변환 로직 추가

6.3 카테고리 상태 유실

• 문제: 뒤로가기 시 카테고리가 "전체"로 리셋
• 원인: useState로 관리하여 컴포넌트 언마운트 시 상태 초기화
• 해결: useSearchParams로 URL 쿼리 파라미터에 저장

---

References

• Tabs UX Best Practices - Eleken
• Tabs UI Design Guide - SetProduct
• React Query Infinite Queries

 

Service

• https://frontend.dev.growbin.app/#/login

이코에코