https://github.com/romantech/beer-table

맥주 정보 테이블 토이 프로젝트
https://github.com/romantech/beer-table

ant-design material-table react redux redux-saga styled-components

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/romantech/beer-table
• Owner: romantech
• Created: 2021-11-06T03:24:13.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-14T04:02:06.000Z (3 months ago)
• Last Synced: 2025-03-14T05:19:54.903Z (3 months ago)
• Topics: ant-design, material-table, react, redux, redux-saga, styled-components
• Language: JavaScript
• Homepage: https://beer-table.vercel.app
• Size: 3.86 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# BEER TABLE 미니 프로젝트

![beerTable_02](https://user-images.githubusercontent.com/8604840/141417710-75f7c219-3719-4936-9664-1071562797de.png)

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

- **Live Demo** : [https://beer-table.vercel.app](https://beer-table.vercel.app/)

- 작업기간 6일

## 사용 스택 / 라이브러리

- React(CRA) + Hooks

- Redux + Saga

- Styled-Components + Babel Plugin Macros

- Material-Table (v4)

- Ant Design (모달 / 네비바)

## 주요 기능

- [PUNK API](https://punkapi.com/) 활용 맥주 정보 / 가이드 제공 (325개)

- 맥주 검색

- 테이블 상태(컬럼 순서) 자동 저장

- 다중 선택 ABV(알콜 도수) 필터

- 맥주 상세보기 모달

- 맥주 즐겨찾기 추가 / 삭제

## 프로젝트 목적

- Redux Saga 비동기 액션 처리 실습

- Material Table, Ant Design 활용 실습

## 스크린샷

### 홈 화면

![beerTable_01](https://user-images.githubusercontent.com/8604840/141417707-42df60ba-b8fb-4187-aa34-e875190ee4d1.png)

### 맥주 리스트 (테이블)

![beerTable_02](https://user-images.githubusercontent.com/8604840/141417710-75f7c219-3719-4936-9664-1071562797de.png)

### 즐겨찾기 리스트

![beerTable_03](https://user-images.githubusercontent.com/8604840/141417712-be4ca527-7a44-45ee-8295-0f49648196ff.png)

### 맥주 상세정보 모달

![beerTable_04](https://user-images.githubusercontent.com/8604840/141417715-8a8fdc17-df10-4d03-8cc2-8b95af507729.png)