Merge pull request #5 from DO-SOPT-WEB/week2/#2

[2주차 기본/심화 과제] 가계부 💸
DO-SOPT-WEB · Feb 13, 2024 · 2787862 · 2787862
2 parents 730dbb8 + 411f53b
commit 2787862
Show file tree

Hide file tree

Showing 9 changed files with 1,243 additions and 0 deletions.
diff --git a/week2/assign2/assign4-favicon.png b/week2/assign2/assign4-favicon.png
diff --git a/week2/assign2/category/index.html b/week2/assign2/category/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>💸시믄서의 가계부💸</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="assign4-favicon.png" />
+  </head>
+  <body>
+    <section class="summary">
+      <header>✍️ 카테고리 관리 ✍️</header>
+      <article class="income-category">
+        <h2>수입 카테고리</h2>
+        <div class="category-list" id="income-category-list">
+            <ol id="income-category-list-wrapper">
+            </ol>
+            <div>🖊️ <input id="income-category-input" type="text"></div>
+        </div>
+      </article>
+      <article class="spending-category">
+        <h2>지출 카테고리</h2>
+        <div class="category-list" id="spending-category-list">
+            <ol id="spending-category-list-wrapper">
+            </ol>
+            <div>🖊️ <input id="spending-category-input" type="text"></div>
+        </div>
+      </article>
+
+      <a href="/">
+        <button type="button" id="home-btn">🏠</button>
+      </a>
+    <script type="module" src="script.js"></script>
+  </body>
+</html>
diff --git a/week2/assign2/category/script.js b/week2/assign2/category/script.js
@@ -0,0 +1,88 @@
+import { INCOME_CATEGORY } from "../data.js";
+import { SPENDING_CATEGORY } from "../data.js";
+
+let incomeCategoryData = []; //localStorage에 저장된 수입 카테고리 목록을 가져와 저장하는 배열
+let spendingCategoryData = []; //localStorage에 저장된 지출 카테고리 목록을 가져와 저장하는 배열
+
+window.onload = () => {
+  //localStorage 초기화
+  localStorage.getItem("income_category_data") === null &&
+    localStorage.setItem(
+      "income_category_data",
+      JSON.stringify(INCOME_CATEGORY)
+    );
+  localStorage.getItem("spending_category_data") === null &&
+    localStorage.setItem(
+      "spending_category_data",
+      JSON.stringify(SPENDING_CATEGORY)
+    );
+
+  //localStorage에 저장된 목록을 가져옴
+  incomeCategoryData = JSON.parse(localStorage.getItem("income_category_data"));
+  spendingCategoryData = JSON.parse(
+    localStorage.getItem("spending_category_data")
+  );
+
+  renderCategoryList();
+  handleAddIncome();
+  handleAddSpending();
+};
+
+function renderCategoryList() {
+  const IncomeCategoryWrapper = document.getElementById(
+    "income-category-list-wrapper"
+  );
+  const SpendingCategoryWrapper = document.getElementById(
+    "spending-category-list-wrapper"
+  );
+
+  IncomeCategoryWrapper.replaceChildren();
+  incomeCategoryData.forEach((category) => {
+    const li = document.createElement("li");
+    li.innerText = category;
+    IncomeCategoryWrapper.appendChild(li);
+  });
+
+  SpendingCategoryWrapper.replaceChildren();
+  spendingCategoryData.forEach((category) => {
+    const li = document.createElement("li");
+    li.innerText = category;
+    SpendingCategoryWrapper.appendChild(li);
+  });
+}
+
+function handleAddIncome() {
+  const incomeCategoryInput = document.getElementById("income-category-input");
+  incomeCategoryInput.addEventListener("keyup", (e) => {
+    if (incomeCategoryInput.value !== "" && e.key === "Enter") {
+      e.target.blur();
+
+      incomeCategoryData.push(incomeCategoryInput.value);
+      localStorage.setItem(
+        "income_category_data",
+        JSON.stringify(incomeCategoryData)
+      );
+      renderCategoryList(incomeCategoryData);
+      incomeCategoryInput.value = "";
+    }
+  });
+}
+
+function handleAddSpending() {
+  const spendingCategoryInput = document.getElementById(
+    "spending-category-input"
+  );
+  spendingCategoryInput.addEventListener("keyup", (e) => {
+    if (spendingCategoryInput.value !== "" && e.key === "Enter") {
+      e.target.blur();
+
+      spendingCategoryData.push(spendingCategoryInput.value);
+      localStorage.setItem(
+        "spending_category_data",
+        JSON.stringify(spendingCategoryData)
+      );
+      renderCategoryList(spendingCategoryData);
+      spendingCategoryInput.value = "";
+    }
+  });
+}
diff --git a/week2/assign2/category/style.css b/week2/assign2/category/style.css
@@ -0,0 +1,117 @@
+@import url("../reset.css");
+
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css");
+
+:root {
+  --yellow-color: #f9e44c;
+  --dark-yellow-color: #f1db49;
+  --red-color: #d06661;
+  --blue-color: #618dd0;
+  --white-color: #ffffff;
+  --weak-white-color: #ffffff5a;
+  --weak-gray-color: rgb(231, 231, 231);
+  --dark-gray-color: #464646;
+  --gray-color: #898989;
+}
+
+html,
+body {
+  font-size: 62.5%;
+  line-height: 1.285;
+}
+
+body {
+  font-family: "Pretendard";
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  font-size: 1rem;
+  color: var(--dark-gray-color-color);
+
+  height: 100%;
+}
+
+/* summary section */
+.summary {
+  background-color: var(--yellow-color);
+
+  width: 100%;
+  height: 100%;
+  padding-bottom: 5rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 1.6rem;
+}
+
+header {
+  font-size: 2.4rem;
+  font-weight: 700;
+
+  margin: 2.5rem 0;
+  padding-bottom: 2rem;
+  margin-bottom: 4rem;
+  width: 100%;
+
+  text-align: center;
+
+  border-bottom: 0.1rem solid var(--weak-white-color);
+}
+
+article > h2 {
+  width: 100%;
+
+  margin-bottom: 1rem;
+}
+
+.category-list {
+  width: 31rem;
+
+  background-color: var(--white-color);
+
+  margin-bottom: 3rem;
+  padding: 2rem;
+
+  border-radius: 1rem;
+
+  display: flex;
+  flex-direction: column;
+  gap: 5rem;
+}
+
+.category-list > ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+#income-category-list > ol > li {
+  padding: 1rem 1.5rem;
+  border-radius: 1rem;
+
+  background-color: var(--red-color);
+  color: var(--white-color);
+}
+
+#spending-category-list > ol > li {
+  padding: 1rem 1.5rem;
+  border-radius: 1rem;
+
+  background-color: var(--blue-color);
+  color: var(--white-color);
+}
+
+input {
+  width: 90%;
+
+  border-bottom: 0.1rem solid var(--dark-gray-color);
+}
+
+#home-btn {
+  background-color: var(--white-color);
+  padding: 1rem;
+  border-radius: 100%;
+}
diff --git a/week2/assign2/data.js b/week2/assign2/data.js
@@ -0,0 +1,31 @@
+export const INIT_BALANCE = 0;
+export const LIST_DATA = [
+  {
+    customId: 1,
+    category: "식비",
+    name: "크라이치즈버거 역곡점",
+    cost: -10800,
+  },
+  {
+    customId: 2,
+    category: "취미",
+    name: "포토그레이 부천점",
+    cost: -4000,
+  },
+  {
+    customId: 3,
+    category: "월급",
+    name: "근로장학",
+    cost: 300000,
+  },
+  {
+    customId: 4,
+    category: "쇼핑",
+    name: "풋락커 커먼그라운드점",
+    cost: -99000,
+  },
+];
+
+export const INCOME_CATEGORY = ["월급", "용돈"];
+
+export const SPENDING_CATEGORY = ["식비", "쇼핑", "취미"];