KendoReact를 사용한 개인 금융 대시보드 개발 가이드
2025-03-19 08:14:36KendoReact로 만드는 개인 금융 대시보드
KendoReact를 활용하여 나만의 개인 금융 대시보드를 만들어 보는 것은 어떨까요? 이 글에서는 다양한 KendoReact 컴포넌트를 효과적으로 사용하여 개인 금융을 쉽게 관리할 수 있는 앱을 구축하는 방법을 소개합니다. 따라 하기 쉬운 단계별 가이드를 통해 KendoReact의 강력한 기능을 경험해보세요.
프로젝트 개요
개인 금융 대시보드는 세 가지 주요 탭으로 구성됩니다:
- 개요: 총 수입과 지출에 대한 요약 통계를 보여주며, 카테고리별 지출을 파이 차트로 시각화합니다.
- 거래 내용: 모든 거래 내역을 표 형태로 관리하며, 거래 추가, 수정, 삭제 기능을 지원합니다.
- 보고서: 월별 지출 추세를 라인 차트로 시각화하고, AI 기반의 절약 팁을 제공합니다.
KendoReact 컴포넌트 활용
이번 프로젝트에서는 총 12개의 KendoReact 무료 컴포넌트를 사용하여 보다 효율적인 대시보드 개발을 목표로 합니다. 다음은 사용된 주요 컴포넌트 목록입니다:
- Grid: 거래 목록 표시
- Chart: 지출 데이터를 시각화 (Overview 탭의 파이 차트 및 Reports 탭의 라인 차트)
- Form: 거래 입력 관리
- DatePicker: 거래 날짜 선택
- Button: 폼 제출 및 AI 인사이트 획득 등 동작 트리거
- DropDownList: 거래 카테고리 선택
- Input: 거래 설명 입력
- NumericTextBox: 거래 금액 입력
- Switch: 수입 및 지출 유형 간 전환
- TabStrip: 앱 섹션 간의 탐색
- PanelBar: (옵션) 접이식 섹션을 원할 경우 사용, 그러나 간소화를 위해 TabStrip 사용
- Tooltip: 파이 차트에 마우스오버 정보 추가
단계별 앱 구현
프로젝트 설정
먼저 새로운 React 프로젝트를 설정하고 필요한 KendoReact 패키지를 설치합니다:
npx create-react-app finance-dashboard
cd finance-dashboard
npm install @progress/kendo-react-grid @progress/kendo-react-charts @progress/kendo-react-form @progress/kendo-react-inputs @progress/kendo-react-buttons @progress/kendo-react-dropdowns @progress/kendo-react-dateinputs @progress/kendo-react-layout @progress/kendo-theme-default
이 패키지들은 필요한 무료 컴포넌트를 모두 포함하며, 기본 테마도 제공합니다.
테마 커스터마이징
app의 디자인을 향상시키기 위해 KendoReact 테마빌더를 활용하여 커스텀 테마를 만듭니다:
- ThemeBuilder를 방문하여 새 프로젝트를 시작하고, 기본 테마를 토대로 설정합니다.
- 금융 앱에 적합하도록 테마를 커스터마이즈: 어두운 배경, 수입은 초록색(#28a745), 지출은 빨간색(#dc3545)으로 지정합니다.
- 테마를
custom-theme.css파일로 내보내고src/디렉토리에 저장합니다.
그리고 src/App.js에 커스텀 테마를 불러옵니다:
import './custom-theme.css';
데이터 구조 및 상태 관리
거래 데이터 구조 정의:
{
id: number,
date: Date,
description: string,
amount: number,
category: string,
type: 'income' | 'expense'
}
메인 App 컴포넌트에서 React의 useState 훅을 사용하여 거래를 관리하고, 일부 샘플 데이터를 초기값으로 설정합니다:
const initialTransactions = [
{ id: 1, date: new Date(2023, 0, 1), description: '월급', amount: 3000000, category: '수입', type: 'income' },
{ id: 2, date: new Date(2023, 0, 5), description: '마트에서 식료품', amount: 100000, category: '식품', type: 'expense' },
{ id: 3, date: new Date(2023, 0, 10), description: '버스 티켓', amount: 50000, category: '교통', type: 'expense' },
];
앱 컴포넌트 구조
App 컴포넌트는 상태를 관리하고 탭 방식의 인터페이스를 렌더링하는 역할을 수행합니다.
src/App.js 코드:
import React, { useState } from 'react';
import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
import Overview from './Overview';
import Transactions from './Transactions';
import Reports from './Reports';
import './App.css';
import './custom-theme.css';
const App = () => {
const [transactions, setTransactions] = useState(initialTransactions);
const [selectedTab, setSelectedTab] = useState(0);
const handleSelect = (e) => setSelectedTab(e.selected);
const addTransaction = (newTransaction) => {
setTransactions([...transactions, { ...newTransaction, id: transactions.length + 1 }]);
};
const editTransaction = (updatedTransaction) => {
setTransactions(transactions.map(t => t.id === updatedTransaction.id ? updatedTransaction : t));
};
const deleteTransaction = (id) => {
setTransactions(transactions.filter(t => t.id !== id));
};
return (
<div className="app">
<h1>개인 금융 대시보드</h1>
<TabStrip selected={selectedTab} onSelect={handleSelect}>
<TabStripTab title="개요">
<Overview transactions={transactions} />
</TabStripTab>
<TabStripTab title="거래 내역">
<Transactions
transactions={transactions}
addTransaction={addTransaction}
editTransaction={editTransaction}
deleteTransaction={deleteTransaction}
/>
</TabStripTab>
<TabStripTab title="보고서">
<Reports transactions={transactions} />
</TabStripTab>
</TabStrip>
</div>
);
};
export default App;
기본 스타일링은 src/App.css에 다음과 같이 정의됩니다:
.app {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
거래 내역 컴포넌트
이 컴포넌트는 거래 내역을 표 형태로 표시하고, 거래를 추가/수정/삭제하는 폼을 제공합니다.
src/Transactions.js 코드:
import React, { useState } from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { Button } from '@progress/kendo-react-buttons';
import TransactionForm from './TransactionForm';
const Transactions = ({ transactions, addTransaction, editTransaction, deleteTransaction }) => {
const [showForm, setShowForm] = useState(false);
const [editingTransaction, setEditingTransaction] = useState(null);
const handleAdd = () => {
setEditingTransaction(null);
setShowForm(true);
};
const handleEdit = (transaction) => {
setEditingTransaction(transaction);
setShowForm(true);
};
const handleDelete = (id) => {
if (window.confirm('이 거래를 삭제하시겠습니까?')) {
deleteTransaction(id);
}
};
const handleFormSubmit = (transaction) => {
if (editingTransaction) {
editTransaction(transaction);
} else {
addTransaction(transaction);
}
setShowForm(false);
};
return (
<div>
<Button onClick={handleAdd}>거래 추가</Button>
{showForm && <TransactionForm transaction={editingTransaction} onSubmit={handleFormSubmit} />}
<Grid data={transactions} style={{ marginTop: '20px' }}>
<GridColumn field="date" title="날짜" format="{0:d}" />
<GridColumn field="description" title="설명" />
<GridColumn field="amount" title="금액" format="{0:c}" />
<GridColumn field="category" title="카테고리" />
<GridColumn field="type" title="유형" />
<GridColumn title="동작" cell={(props) => (
<td>
<Button onClick={() => handleEdit(props.dataItem)}>수정</Button>
<Button onClick={() => handleDelete(props.dataItem.id)}>삭제</Button>
</td>
)} />
</Grid>
</div>
);
};
export default Transactions;
층별한 사용자 사례 및 컴포넌트 설명을 통해 사용자들이 KendoReact의 기능을 완벽하게 활용할 수 있도록 하고, 이를 개인 금융 대시보드 프로젝트에 효과적으로 활용하여 금융 관리를 쉽고 간편하게 만들어 보세요.
참고 링크
- KendoReact Free Components: KendoReact 공식 사이트
- ThemeBuilder: KendoReact ThemeBuilder