KendoReact를 사용한 개인 금융 대시보드 개발 가이드

KendoReact로 만드는 개인 금융 대시보드

KendoReact를 활용하여 나만의 개인 금융 대시보드를 만들어 보는 것은 어떨까요? 이 글에서는 다양한 KendoReact 컴포넌트를 효과적으로 사용하여 개인 금융을 쉽게 관리할 수 있는 앱을 구축하는 방법을 소개합니다. 따라 하기 쉬운 단계별 가이드를 통해 KendoReact의 강력한 기능을 경험해보세요.

프로젝트 개요

개인 금융 대시보드는 세 가지 주요 탭으로 구성됩니다:

• 개요: 총 수입과 지출에 대한 요약 통계를 보여주며, 카테고리별 지출을 파이 차트로 시각화합니다.
• 거래 내용: 모든 거래 내역을 표 형태로 관리하며, 거래 추가, 수정, 삭제 기능을 지원합니다.
• 보고서: 월별 지출 추세를 라인 차트로 시각화하고, AI 기반의 절약 팁을 제공합니다.

KendoReact 컴포넌트 활용

이번 프로젝트에서는 총 12개의 KendoReact 무료 컴포넌트를 사용하여 보다 효율적인 대시보드 개발을 목표로 합니다. 다음은 사용된 주요 컴포넌트 목록입니다:

1. Grid: 거래 목록 표시
2. Chart: 지출 데이터를 시각화 (Overview 탭의 파이 차트 및 Reports 탭의 라인 차트)
3. Form: 거래 입력 관리
4. DatePicker: 거래 날짜 선택
5. Button: 폼 제출 및 AI 인사이트 획득 등 동작 트리거
6. DropDownList: 거래 카테고리 선택
7. Input: 거래 설명 입력
8. NumericTextBox: 거래 금액 입력
9. Switch: 수입 및 지출 유형 간 전환
10. TabStrip: 앱 섹션 간의 탐색
11. PanelBar: (옵션) 접이식 섹션을 원할 경우 사용, 그러나 간소화를 위해 TabStrip 사용
12. 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 테마빌더를 활용하여 커스텀 테마를 만듭니다:

1. ThemeBuilder를 방문하여 새 프로젝트를 시작하고, 기본 테마를 토대로 설정합니다.
2. 금융 앱에 적합하도록 테마를 커스터마이즈: 어두운 배경, 수입은 초록색(#28a745), 지출은 빨간색(#dc3545)으로 지정합니다.
3. 테마를 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