Merge pull request #76 from yuw0l/develop

Fix: navbar css, 가계부 components 분리
GDSC-DEU · Feb 27, 2022 · 0bd3b47 · 0bd3b47
2 parents 87577f7 + b98703c
commit 0bd3b47
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 154 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -15,3 +15,9 @@
     <!-- built files will be auto injected -->
   </body>
 </html>
+
+<style>
+  body {
+    margin: 0;
+  }
+</style>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="home"> 
     <nav>
-      <router-link to="/" class="navLogo"> UsNe </router-link>
       <ul>
+        <li>
+          <router-link to="/" class="navLogo"> USNE </router-link>
+        </li>
         <li>
           <router-link to="/accountbook" class="navitem"> Account Book </router-link>
         </li>
@@ -30,31 +32,41 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
+  * {
+    font-family:serif; 
+  }
   .navLogo, .navitem {
     text-decoration-line: none;
-    color: white;
+    color: rgb(189, 189, 189);
   }
-  .navLogo {
-    padding-top: 8px;
+  .navitem:hover {
+    color: white;
   }
   .routerView{
     width: 100%;
+    margin-top: 60px;
   }
   nav {
-    width: 100%;
-    height: 50px;
     margin-top: 50px;
-    padding: 10px 50px;
-    background-color: rgba(0, 0, 0, 0.7);
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
   }
-  .navLogo, ul li {
-    float: left;
-    font-size: 35px;
+  .navLogo {
+    font-size: 30px;
+    color: white;
   }
   ul li {
-    margin-left: 60px;
+    text-align: center;
     list-style-type: none;
-    font-size: 20px;
+    font-size: 18px;
+    float: left;
+  }
+  ul {
+    display: inline-grid;
+    grid-template-columns: 350px 1fr 1fr 1fr 1fr 350px;
+    align-items: center;
+    width: 100%;
+    padding: 0px;
   }
 </style>
diff --git a/frontend/src/components/AccountTable.vue b/frontend/src/components/AccountTable.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="accountTable">
+    <div class="tableButton">
+      <div/>
+      <button id="new" @click.stop="onNew">New</button>
+      <button id="delete">Delete</button>
+    </div>
+    <table id="accountBook">
+      <thead>
+        <tr>
+          <th class="th-1">Date</th>
+          <th class="th-2">Description</th>
+          <th class="th-3">tag</th>
+          <th class="th-4">Amount</th>
+          <th class="th-5">Total</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(list, index) in lists" :key="index">
+          <td>{{ list.date }}</td>
+          <td>{{ list.description }}</td>
+          <td>{{ Object.values(list.tag)?.join(",") }}</td>
+          <td>{{ list.amount }}</td>
+          <td>{{ list.total }}</td>
+        </tr> 
+      </tbody>
+    </table>
+    <Modal 
+      v-if = "showNewModal"
+      @close="closeNewModal"
+      @insert="inputUpdate"
+    />
+  </div>
+</template>
+
+<script>
+import Modal from "@/components/newModal.vue";
+export default {
+  components: {
+    Modal
+  },
+  methods: {
+    onNew() {
+      this.showNewModal = true;
+    },
+    closeNewModal() {
+      this.showNewModal = false;
+    },
+    inputUpdate(data) {
+      console.log(data.tag.inoutTag);
+      console.log(data)
+      this.lists.push({
+        date: data.date,
+        description: data.description,
+        tag: {
+          useTag: data.tag.useTag,
+          toolTag: data.tag.toolTag,
+          inoutTag: data.tag.inoutTag
+        },
+        amount: data.amount,
+        total: this.countTotal(data.amount, data.tag.inoutTag)
+      })
+      console.log(this.lists);
+      this.date = ""
+      this.description = ""
+      this.tag = []
+      this.amount = ""
+      this.total = ""
+      this.closeNewModal()
+    },
+    countTotal(amount, inoutTag) {
+      let newAmount = 0;
+      if(inoutTag === "지출") {
+        newAmount = -amount;
+      } else if(inoutTag === "수입") {
+        newAmount = amount;
+      }
+
+      if (this.lists.length === 0) {
+        return newAmount;
+      } else {
+        return this.lists[this.lists.length - 1].total + newAmount;
+      }      
+    }
+  },
+  data() {
+    return {
+      showNewModal: false,
+      lists: [],
+      lastTotal: 0
+    };
+  }
+}
+</script>
+
+<style scoped>
+  .accountTable {
+    margin-bottom: 147px;
+  }
+  .tableButton {
+    display: grid;
+    grid-template-columns: 66% 60px 60px ;
+    grid-gap: 6px;
+    margin-bottom: 5px;
+  }
+ .th-1 {
+    width: 16%
+  }
+  .th-2 {
+    width: 45%;
+  }
+  .th-3 {
+    width: 19%;
+  }
+  .th-4, .th-5 {
+    width: 10%;
+  }
+  #new, #delete {
+    width: 55px;
+    padding: 4px;
+    margin: 5px;
+    border-radius: 35px;
+    border: none;
+    color: white;
+  }
+  #new {
+    background-color: rgb(255, 160, 160);
+  }
+  #new:hover {
+    background-color: rgb(241, 91, 91);
+  }
+  #delete {
+    background-color: rgb(100, 170, 235);
+  }
+  #delete:hover {
+    background-color: rgb(50, 134, 212);
+  }
+  table {
+    width: 55%;
+    margin: auto;
+    border-top: solid 2px black;
+    border-collapse: collapse;
+    text-align: center;
+  }
+  th, td {
+    height: 20px;
+    border-bottom: solid 1px black;
+    border-left: solid 1px black;
+    padding: 5px;
+    font-size: 15px;
+  }
+  th:first-child, td:first-child {
+    border-left: none;
+  }
+  th {
+    border-bottom: solid 2px black;
+  }
+</style>
diff --git a/frontend/src/pages/accountbook/index.vue b/frontend/src/pages/accountbook/index.vue
@@ -1,28 +1,6 @@
 <template>
   <div>
-    <button id="new" @click.stop="onNew">New</button>
-    <button id="delete">Delete</button>
-    <table id="accountBook">
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Description</th>
-          <th>tag</th>
-          <th>Amount</th>
-          <th>Total</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(list, index) in lists" :key="index">
-          <td>{{ list.date }}</td>
-          <td>{{ list.description }}</td>
-          <td>{{ Object.values(list.tag)?.join(",") }}</td>
-          <td>{{ list.amount }}</td>
-          <td>{{ list.total }}</td>
-        </tr> 
-      </tbody>
-    </table>
-
+    <AccountTable />
    <body style="overflow: hidden;">
     <div class="modalShow">
      <h1>My Goal</h1>
@@ -33,125 +11,18 @@
      <p>#금융 #의료 </p> 
     </div>
  </body>
-
-    <Modal 
-      v-if = "showNewModal"
-      @close="closeNewModal"
-      @insert="inputUpdate"
-    />
   </div>
 </template>
 
 <script>
-import Modal from "@/components/newModal.vue";
+import AccountTable from "@/components/AccountTable.vue";
 export default {
   components: {
-    Modal
-  },
-  methods: {
-    onNew() {
-      this.showNewModal = true;
-    },
-    closeNewModal() {
-      this.showNewModal = false;
-    },
-    inputUpdate(data) {
-      console.log(data.tag.inoutTag);
-      console.log(data)
-      this.lists.push({
-        date: data.date,
-        description: data.description,
-        tag: {
-          useTag: data.tag.useTag,
-          toolTag: data.tag.toolTag,
-          inoutTag: data.tag.inoutTag
-        },
-        amount: data.amount,
-        total: this.countTotal(data.amount, data.tag.inoutTag)
-      })
-      console.log(this.lists);
-      this.date = ""
-      this.description = ""
-      this.tag = []
-      this.amount = ""
-      this.total = ""
-      this.closeNewModal()
-    },
-    countTotal(amount, inoutTag) {
-      let newAmount = 0;
-      if(inoutTag === "지출") {
-        newAmount = -amount;
-      } else if(inoutTag === "수입") {
-        newAmount = amount;
-      }
-
-      if (this.lists.length === 0) {
-        return newAmount;
-      } else {
-        return this.lists[this.lists.length - 1].total + newAmount;
-      }      
-    }
-  },
-  data() {
-    return {
-      showNewModal: false,
-      lists: [],
-      lastTotal: 0
-    };
+    AccountTable
   }
 }
 </script>
 
-<style>    
-  * {
-    font-family:serif; 
-  }
-  h2 {
-    color: rgb(46, 46, 139);
-  }
-  #new, #delete {
-    width: 55px;
-    padding: 4px;
-    margin: 5px;
-    border-radius: 35px;
-    border: none;
-    color: white;
-    position: relative;
-    left: 65%;
-  }
-  #new {
-    background-color: rgb(255, 160, 160);
-  }
-  #new:hover {
-    background-color: rgb(241, 91, 91);
-  }
-  #delete {
-    background-color: rgb(100, 170, 235);
-  }
-  #delete:hover {
-    background-color: rgb(50, 134, 212);
-  }
-  table {
-    width: 55%;
-    margin: auto;
-    border-top: solid 2px black;
-    border-collapse: collapse;
-    text-align: center;
-  }
-  th, td {
-    height: 20px;
-    border-bottom: solid 1px black;
-    border-left: solid 1px black;
-    padding: 5px;
-    font-size: 15px;
-  }
-  th:first-child, td:first-child {
-    border-left: none;
-  }
-  th {
-    border-bottom: solid 2px black;
-  }
-  input {
-    margin: 10px;
-  }
+<style scoped>
+
 </style>