땡그랑 앱 2번째 전체 구현

- 회계 장부처럼 차변과 대변을 통해서. 특히 현금흐름표처럼 모양을 만들고자 했다.

 

처음 목표하고자 했던 차,대변처럼 수입과 지출을 나누는방식은 구현해보았다.

ㅡ> 구현해보고 실험해보니 한 페이지 담기에는 렌더링 시간은 물론, 사용자가 보기에도 불편하다.

 

 

문제점:

여전히 새롭게 올라오는 많은 회계과목들이 있고, 반영해보고자 했으나, 혼자 업데이트 관리가 힘들다.

(회계 데이터를 다루는 현직 개발자를 만나서 얘기해보니 자신도 공기업 쪽에서 문의가 오면 부분적으로 그것을 반영하고 수정하는 것만해도 제법 많은 시간과 공을 들인다고 한다.)

- 회계 erp 회사는 고문으로 회계사를 두고 있다는데, 2년 간 회계 공부했다고 내가 모든 과목들을 오류없이 관리 불가.  

 

 

- 해결책 :

수입, 지출, 전체 총량 등에 집중해서 그 부분들을 라우터로 따로 관리해서 배치할 예정.

(과목을 나누기 보단, 유연한 가계부이니 앱 소비자가 과목을 선택하고 추가 메모를 할 수 있도록 만들 계획)

 

- Vite를 사용해서 개발 경험과 빌드 프로세스를 개선하여 전반적인 개발 효율성을 높일 예정.

- 가계부에 중요하지 않은 주식 데이터는 추가하지 않기로 했고, 3d 디자인 추가를 고려중.

---

렌더링 화면 

 

---

구현 코드 일부.

import React, { useState, useEffect } from "react";

import "./App.css";

function App() {

  const [items, setItems] = useState([]);

  const [description, setDescription] = useState("");

  const [amount, setAmount] = useState("");

  const [totalIncome, setTotalIncome] = useState(0);

  const [totalExpense, setTotalExpense] = useState(0);

  const addItem = (type) => {

    const newItem = {

      id: Math.floor(Math.random() * 10000), //uuid로 교체가능하지만 보류.

      description: description,

      // 금액을 정수로 변환하여 저장합니다.

      amount: parseInt(amount, 10) || 0,

      type: type,

    };

    setItems([...items, newItem]);

    setDescription("");

    setAmount("");

  };

  const deleteItem = (id) => {

    setItems(items.filter((item) => item.id !== id));

  };

  // 수입과 지출 계산

  const calculateTotals = () => {

    let income = 0;

    let expense = 0;

    items.forEach((item) => {

      if (item.type === "income") {

        income += item.amount;

      } else {

        expense += item.amount;

      }

    });

    setTotalIncome(income);

    setTotalExpense(expense);

  };

  // 수입, 지출 항목이 변경될 때마다 총액 계산

  useEffect(() => {

    calculateTotals();

  }, [items]);

  return (

    <div className="container">

      <div className="budget__numbers">

        <div className="number">

          <small>벌어들인 돈</small>

          <div className="amount__container">

            <p>₩</p>

            <span>{totalIncome}</span>

          </div>

        </div>

        <div className="number">

          <small>사용 가능한 돈</small>

          <div className="amount__container">

            <p>₩</p>

            <span>{totalIncome - totalExpense}</span>

          </div>

        </div>

        <div className="number">

          <small>쓴 돈</small>

          <div className="amount__container">

            <p>₩</p>

            <span>{totalExpense}</span>

          </div>

        </div>

      </div>

      <div className="input__area">

        <input

          type="text"

          value={description}

          onChange={(e) => setDescription(e.target.value)}

          placeholder="설명"

        />

        <input

          type="number"

          value={amount}

          onChange={(e) => setAmount(e.target.value)}

          placeholder="금액"

        />

      </div>

      <div className="buttons__area">

        <button onClick={() => addItem("income")}>수입 추가</button>

        <button onClick={() => addItem("expense")}>지출 추가</button>

      </div>

      <div className="items__container">

        {items.map((item) => (

          <div key={item.id} className={`item ${item.type}`}>

            <h4>{item.description}</h4>

            <div className={`item__${item.type}`}>

              <p className="symbol">₩</p>

              <span>{item.amount}</span>

            </div>

            <button onClick={() => deleteItem(item.id)}>삭제</button>

          </div>

        ))}

      </div>

    </div>

  );

}

export default App;