HS Lab
RoadmapDocsQuizzesLabs
MVP read-only

Frontend UI

카드 목록 + 필터

카테고리 버튼으로 카드 목록을 필터링하는 기본 인터랙션 실습입니다.

Demo

Next.js

Next Routing

동적 라우트와 상세 페이지 구조

React

Filter Cards

상태 기반 목록 필터링

Infra

Docker Network

컨테이너 간 내부 연결

Interaction

Scroll Motion

관찰자 기반 reveal

실습 정보

목표
카테고리 버튼으로 카드 목록을 필터링하는 기본 인터랙션 실습입니다.

난이도
easy

GitHub 경로
components/labs/demos/card-filter-demo.tsx

ReactTypeScriptTailwind CSS

회고 템플릿

  • AI 에이전트에게 준 지시문
  • 내가 수정한 부분
  • 막힌 점
  • 배운 점
  • 포트폴리오 활용 가능성
  • 다음 개선 사항