DO-SOPT-WEB · aazkgh · Oct 22, 2023 · Oct 22, 2023 · Oct 23, 2023 · Oct 23, 2023
diff --git a/jsbank/.vscode/settings.json b/jsbank/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/jsbank/category-manage.js b/jsbank/category-manage.js
@@ -0,0 +1,70 @@
+import {HISTORY_CATEGORY} from './initial.js';
+
+const listIn = document.getElementById("list_in");
+const listOut = document.getElementById("list_out");
+
+/*최초 렌더링*/
+HISTORY_CATEGORY.forEach((element)=>{
+    addCategory(element);
+});
+
+/*카테고리 화면에 추가*/
+function addCategory(element){
+    const list = document.createElement("li");
+
+    list.innerHTML = `
+    <span>${element.name}</span>
+    `;  
+
+    element.type === "input"
+    ? listIn.appendChild(list)
+    : listOut.appendChild(list);
+}
+
+/*새 카테고리 생성*/
+const inCategory = document.getElementById("categorypg_input");
+const outCategory = document.getElementById("categorypg_output");
+
+function createCateogry(element){
+    if(element.keyCode === 13){
+        let tempVal = {};
+
+        element.target.id === "categorypg_input"
+        ? tempVal.type = "input"
+        : tempVal.type = "output";
+
+        tempVal.name = element.target.value;
+
+        addCategory(tempVal);
+        addStorage(tempVal);
+    }
+}
+
+/*로컬 저장소에 업데이트*/
+function addStorage(element){
+    localStorage.setItem(localStorage.length, JSON.stringify(element));
+}
+
+inCategory.addEventListener("keypress",createCateogry);
+outCategory.addEventListener("keypress",createCateogry);
+
+/*카테고리 값 불러오기*/
+function loadCategory(){
+    let keys = Object.keys(localStorage);
+
+    for (let key of keys){
+        let objOption = document.createElement("li");
+        let tempObj = JSON.parse(localStorage.getItem(key));
+
+        let type = tempObj.type;
+        let name = tempObj.name;
+
+        objOption.innerHTML = name;
+
+        type === "input"
+        ?listIn.appendChild(objOption)
+        :listOut.appendChild(objOption);
+    };
+}
+
+loadCategory();
diff --git a/jsbank/category.html b/jsbank/category.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="sub-style.css">
+    <title>돈쪽이의 카테고리 관리</title>
+</head>
+<body>
+    <header>
+        <h1>돈쪽이의 카테고리 관리</h1>
+    </header>
+    <main>
+        <section class="category">
+            <h2>수입 카테고리</h2>
+            <section>
+                <ul class="category_list" id="list_in">
+                </ul>
+                <div class="insert_category">
+                    <label for="categorypg_input">추가</label>
+                    <input type="text" name="categorypg_input" id="categorypg_input"/>
+                </div>
+            </section>
+        </section>
+        <hr>
+        <section class="category">
+            <h2>지출 카테고리</h2>
+            <section>
+                <ul class="category_list" id="list_out">
+                </ul>
+                <div class="insert_category">
+                    <label for="categorypg_output">추가</label>
+                    <input type="text" name="categorypg_output" id="categorypg_output"/>
+                </div>
+            </section>
+        </section>
+    </main>
+    <footer>
+        <a href="./index.html"><img src="./home.png" class="btn" id="home_btn"></a>
+    </footer>
+    <script src="category-manage.js" type="module"></script>
+</body>
+</html>
diff --git a/jsbank/category.png b/jsbank/category.png
diff --git a/jsbank/home.png b/jsbank/home.png
diff --git a/jsbank/index.html b/jsbank/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="main-style.css">
+    <title>돈쪽이의 가계부</title>
+</head>
+<body>
+    <header>
+        <h1>돈쪽이의 가계부</h1>
+    </header>
+    <main>
+        <section id="asset">
+            <h2>나의 자산</h2>
+            <span class="total_asset"></span>
+            <div class="total_inout">
+                <span class="input" id="plus_ic">+</span><span class="input">-</span>
+                &nbsp;
+                <span class="output" id="minus_ic">-</span><span class="output">-</span>
+            </div>
+        </section>
+        <hr>
+        <section id="nav">
+            <nav id="nav_date">
+                <button>&lt;</button>
+                <h3>10월 11일</h3>
+                <button>&gt;</button>
+            </nav>
+            <div id="nav_list">
+                <span>내역 리스트</span>
+                <div class="input_wrapper">
+                    <input type="checkbox" id="input_box" name="input_box" checked />
+                    <label for="input_box">수입</label>
+                    <input type="checkbox" id="output_box" name="output_box" checked />
+                    <label for="output_box">지출</label>
+                </div>
+            </div>
+        </section>
+        <hr>
+        <section id="list_wrapper">
+            <ul>
+            </ul>
+        </section>
+    </main>
+    <section class="delete_modal">
+        <span>삭제하시겠습니까?</span>
+        <div class="input_wrapper">
+            <button type="button" id="allow">예</button>
+            <button type="button" id="reject">아니오</button>
+        </div>
+    </section>
+    <section class="modal_wrapper">
+        <h2>내역 추가</h2>
+        <div class="input_wrapper">
+            <input type="checkbox" id="input_modalbox" name="modalbox" checked />
+            <label for="input_modalbox">수입</label>
+            <input type="checkbox" id="output_modalbox" name="modalbox" />
+            <label for="output_modalbox">지출</label>
+        </div>
+        <div class="modal_type" id="select_input">
+            <label for="category_input">카테고리</label>
+            <select name="category" id="category_input">
+                <option value="" selected disabled hidden>선택해주세요</option>
+                <option value="알바">알바</option>
+                <option value="용돈">용돈</option>
+            </select>
+        </div>
+        <div class="modal_type" id="select_output">    
+            <label for="category_output">카테고리</label>
+            <select name="category" id="category_output">
+                <option value="" selected disabled hidden>선택해주세요</option>
+                <option value="food">음식</option>
+                <option value="shop">쇼핑</option>
+            </select>
+        </div>
+        <div class="modal_type">
+            <label for="amount">금액</label>
+            <input type="text" name="amount" id="amount"/>
+        </div>
+        <div class="modal_type">
+            <label for="title">내역</label>
+            <input type="text" name="title" id="title"/>
+        </div>
+        <button type="button" id="save">저장하기</button>
+        <button type="button" id="close">닫기</button>
+    </section>
+    <footer>
+        <button type="button" class="btn" id="add_btn">+</button>
+        <a href="./category.html"><img src="./category.png" class="btn" id="category_btn"></a>
+    </footer>
+    <script src="main.js" type="module"></script>
+    <script src="modal.js" type="module"></script>
+</body>
+</html>
diff --git a/jsbank/initial.js b/jsbank/initial.js
@@ -0,0 +1,47 @@
+export const INIT_BALANCE = 0;
+
+export const HISTORY_LIST = [
+    {   
+        category: "음식",
+        title: "GS25 코엑스점",
+        type: "output",
+        amount: 3100, 
+    },
+    {   
+        category: "음식",
+        title: "그릭 요거트",
+        type: "output",
+        amount: 12000, 
+    },
+    {   
+        category: "알바",
+        title: "현대 백화점",
+        type: "input",
+        amount: 120000, 
+    },
+    {   
+        category: "쇼핑",
+        title: "지그재그",
+        type: "output",
+        amount: 24500, 
+    }
+];
+
+export const HISTORY_CATEGORY = [
+    {
+        type: "input",
+        name: "알바"
+    },
+    {
+        type: "input",
+        name: "용돈"
+    },
+    {
+        type: "output",
+        name: "음식"
+    },
+    {
+        type: "output",
+        name: "쇼핑"
+    }
+];