---
# System prepended metadata

title: 01. Accounting application
tags: ["\_記帳本", Side project 紀錄]

---

### 開發筆記本：


#### 1. Home

- 首頁，大致上會有以下東西：

1. Title (固定)
2. 當天的日期 (自動帶入)
3. 顯示目前月份的支出總金額 
4. 左邊顯示(存入消費金額) / 右邊顯示目前月份的(支出總金額) 
5. 根據 L - R 相加之後產生盈餘 (檢視這個月份是否支出超額)


#### 2. Home / Note

- 這邊會有一個元件，點擊進去以後產生一份可填入的各種內容

```
<Note />
```

- Note:

  - 預期是一個類似按鈕的概念，點進去會導入到 `<Note />` 組件頁面
    第一個事件就是顯示出一個計算機。
    
  -  計算機輸入完以後，會列出以下內容：


1. 日期選項(預設是當天)  
2. 顯示剛剛輸入完的金額 
3. 選擇分類 , (需要討論是進入到分頁 / 還是做一個下拉選單(綁死項目))
4. 輸入匡 , 讓你填入你購買了什麼東西 (ex: 可口可樂)


輸入完資料以後
返回元件 `<Home />`


---

#### 3. Home / Log

- 於 Home 最底層，有一個 `<Log />`

```Home.jsx
// Home
<Note />
<Log />
```

- Log 設定成一個簡單的按鈕，點擊以後，跳轉到 <Log />

進入到畫面以後會分好月份 

![](https://hackmd.io/_uploads/rJHtm2mba.png)

點擊月份 , 會展開明細。

![](https://hackmd.io/_uploads/SkhiQhQb6.png)

右上角會有一個 logo , 點進去可以看到消費分類圓餅圖

![](https://hackmd.io/_uploads/rkhgV3XZ6.png)


