Skip to content

맥주 정보 테이블 토이 프로젝트

Notifications You must be signed in to change notification settings

romantech/beer-table

Repository files navigation

BEER TABLE 미니 프로젝트

beerTable_02

테이블 형태로 맥주 정보를 제공하는 미니 어플리케이션입니다.

사용 스택 / 라이브러리

  • React(CRA) + Hooks
  • Redux + Saga
  • Styled-Components + Babel Plugin Macros
  • Material-Table (v4)
  • Ant Design (모달 / 네비바)

주요 기능

  • PUNK API 활용 맥주 정보 / 가이드 제공 (325개)
  • 맥주 검색
  • 테이블 상태(컬럼 순서) 자동 저장
  • 다중 선택 ABV(알콜 도수) 필터
  • 맥주 상세보기 모달
  • 맥주 즐겨찾기 추가 / 삭제

프로젝트 목적

  • Redux Saga 비동기 액션 처리 실습
  • Material Table, Ant Design 활용 실습

스크린샷

홈 화면

beerTable_01

맥주 리스트 (테이블)

beerTable_02

즐겨찾기 리스트

beerTable_03

맥주 상세정보 모달

beerTable_04