From a0b4e4ee7f7f990c7c029fb0bf8dafc980522fa1 Mon Sep 17 00:00:00 2001
From: JunhoYeo <32605822+JunhoYeo@users.noreply.github.com>
Date: Sun, 19 May 2019 16:05:01 +0900
Subject: [PATCH 1/3] feat(service): add request status page

---
 app/pages/paths/management/ManageRequest.vue | 180 +++++++++++++++++++
 app/router/routers/management.js             |   9 +
 2 files changed, 189 insertions(+)
 create mode 100644 app/pages/paths/management/ManageRequest.vue

diff --git a/app/pages/paths/management/ManageRequest.vue b/app/pages/paths/management/ManageRequest.vue
new file mode 100644
index 00000000..31f8fda3
--- /dev/null
+++ b/app/pages/paths/management/ManageRequest.vue
@@ -0,0 +1,180 @@
+<script>
+import ContentWrapper from '@/components/ContentWrapper.vue'
+
+export default {
+  name: 'ManageRequest',
+  components: { ContentWrapper },
+
+  computed: {
+    today: () => new Date().getDate(),
+    month: () => 1 + new Date().getMonth(),
+    year: () => new Date().getFullYear()
+  }
+}
+</script>
+
+<template>
+  <content-wrapper>
+    <h1 slot="header">
+      <span class="icon-request" />신청 현황
+    </h1>
+    <dimi-card
+      slot="main"
+    >
+      <div class="dashboard">
+        <div class="dashboard__row">
+          <div class="dashboard__item dashboard__snack">
+            <h1 class="dashboard__title">
+              <span class="icon-muffin" /> {{ month }}월 간식 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              <div class="dashboard__status">
+                총인원 620명 중<br>
+                0명 신청
+              </div>
+              <div class="dashboard__percent">
+                0%
+              </div>
+            </div>
+          </div>
+          <div class="dashboard__item dashboard__circle">
+            <h1 class="dashboard__title">
+              <span class="icon-club-sm" /> {{ year }}년 동아리 가입 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              차트 컴포넌트를 만들자
+            </div>
+          </div>
+        </div>
+        <div class="dashboard__row">
+          <div class="dashboard__item dashboard__afterschool">
+            <h1 class="dashboard__title">
+              <span class="icon-ball" /> {{ year }}년 상반기 방과 후 활동 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              차트 컴포넌트를 만들자
+            </div>
+          </div>
+        </div>
+        <div class="dashboard__row">
+          <div class="dashboard__item dashboard__">
+            <h1 class="dashboard__title">
+              <span class="icon-comment" /> {{ month }}월 2주차 상담 신청 현황 - 진로 상담
+            </h1>
+            <div class="dashboard__content">
+              차트 컴포넌트를 만들자
+            </div>
+          </div>
+        </div>
+        <div class="dashboard__row">
+          <div class="dashboard__item dashboard__ingang">
+            <h1 class="dashboard__title">
+              <span class="icon-internet-class" /> {{ month }}월 {{ today }}일 인강실 사용 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              <div class="dashboard__ingang">
+                <div class="dashboard__time">
+                  1타임
+                </div>
+                <div class="dashboard__status">
+                  30석 중 24석 신청
+                </div>
+              </div>
+              <div class="dashboard__ingang">
+                <div class="dashboard__time">
+                  2타임
+                </div>
+                <div class="dashboard__status">
+                  2타임 30석 중 12석 신청
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="dashboard__item dashboard__ingang">
+            <h1 class="dashboard__title">
+              <span class="icon-hourglass" /> {{ month }}월 2주차 잔류 신청 현황
+            </h1>
+            <div class="dashboard__content">
+              차트 컴포넌트를 만들자
+            </div>
+          </div>
+        </div>
+      </div>
+    </dimi-card>
+  </content-wrapper>
+</template>
+
+<style lang="scss" scoped>
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: $gray;
+
+  &__title {
+    color: $gray-dark;
+    font-size: 24px;
+    font-weight: $font-weight-bold;
+  }
+
+  &__row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &__row:not(:first-child) {
+    margin-top: 2em;
+  }
+
+  &__item {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    padding: 1em;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    padding-top: 1.5em;
+    line-height: 1.8;
+  }
+
+  &__percent {
+    color: $orange;
+    font-size: 48px;
+    font-weight: $font-weight-regular;
+  }
+
+  &__status {
+    display: flex;
+  }
+
+  &__snack &__content {
+    @include from($tablet) {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  &__snack &__percent {
+    line-height: normal;
+  }
+
+  &__ingang {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__ingang:first-child {
+    margin-bottom: 2em;
+  }
+
+  &__time {
+    color: $gray-dark;
+    font-size: 16px;
+    font-weight: $font-weight-bold;
+  }
+}
+</style>
diff --git a/app/router/routers/management.js b/app/router/routers/management.js
index 49caf7a4..e42272ba 100644
--- a/app/router/routers/management.js
+++ b/app/router/routers/management.js
@@ -2,6 +2,7 @@ import withPrefix from '@/src/util/path-with-prefix'
 
 const ManageWrapper = () => import('@/pages/paths/management/ManageWrapper.vue')
 const ManageMain = () => import('@/pages/paths/management/ManageMain.vue')
+const ManageRequest = () => import('@/pages/paths/management/ManageRequest.vue')
 const ManageAssignment = () => import('@/pages/paths/management/ManageAssignment.vue')
 const ManageAfterschool = () => import('@/pages/paths/management/ManageAfterschool.vue')
 const ManageCounsel = () => import('@/pages/paths/management/ManageCounsel.vue')
@@ -27,6 +28,14 @@ export default [
       path: '/',
       component: ManageWrapper,
       children: [
+        {
+          path: 'request',
+          name: 'management/request',
+          component: ManageRequest,
+          meta: {
+            title: '디미고인 > 신청 현황'
+          }
+        },
         {
           path: 'assignment',
           name: 'management/assignment',

From dd85bc95ba9f1f47a2494efd4bc36ecc9468d2d4 Mon Sep 17 00:00:00 2001
From: JunhoYeo <32605822+JunhoYeo@users.noreply.github.com>
Date: Sun, 19 May 2019 22:30:26 +0900
Subject: [PATCH 2/3] feat: add DimiProgressbar component for snack/ingang
 status

---
 app/dimiru/components/DimiProgressbar.vue    | 100 +++++++++++++++++++
 app/dimiru/components/index.js               |   1 +
 app/pages/paths/management/ManageRequest.vue |  93 ++++++++++++-----
 3 files changed, 171 insertions(+), 23 deletions(-)
 create mode 100644 app/dimiru/components/DimiProgressbar.vue

diff --git a/app/dimiru/components/DimiProgressbar.vue b/app/dimiru/components/DimiProgressbar.vue
new file mode 100644
index 00000000..09ef9664
--- /dev/null
+++ b/app/dimiru/components/DimiProgressbar.vue
@@ -0,0 +1,100 @@
+<script>
+export default {
+  name: 'DimiProgressbar',
+  props: {
+    progress: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: 'red',
+      validator: c => ['mustard', 'orange', 'pink', 'red'].includes(c)
+    },
+    small: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    computedClass () {
+      return {
+        [this.color]: true,
+        'progress--small': (this.small)
+      }
+    },
+    barStyle () {
+      return {
+        width: ((this.progress > 100) ? 100 : this.progress) + '%'
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="progress">
+    <div
+      class="progress__background"
+      :class="computedClass"
+    >
+      <div
+        class="progress__bar"
+        :class="computedClass"
+        :style="barStyle"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.progress {
+  width: 100%;
+
+  &__bar,
+  &__background {
+    height: 48px;
+    border-radius: 24px;
+  }
+
+  &__bar.red {
+    background-color: $red;
+  }
+
+  &__bar.pink {
+    background-color: $pink;
+  }
+
+  &__bar.mustard {
+    background-color: $mustard;
+  }
+
+  &__bar.orange {
+    background-color: $orange;
+  }
+
+  &__background {
+    width: 100%;
+  }
+
+  &__background.red {
+    background-color: rgba(232, 60, 61, 0.5);
+  }
+
+  &__background.pink {
+    background-color: rgba(255, 128, 129, 0.5);
+  }
+
+  &__background.mustard {
+    background-color: rgba(253, 184, 18, 0.5);
+  }
+
+  &__background.orange {
+    background-color: rgba(245, 105, 61, 0.5);
+  }
+
+  &--small {
+    height: 32px;
+  }
+}
+</style>
diff --git a/app/dimiru/components/index.js b/app/dimiru/components/index.js
index db7c5eb6..ac8ac465 100644
--- a/app/dimiru/components/index.js
+++ b/app/dimiru/components/index.js
@@ -16,5 +16,6 @@ export { default as DimiMenu } from './DimiMenu.vue'
 export { default as DimiMenuItem } from './DimiMenuItem.vue'
 export { default as DimiModal } from './DimiModal.vue'
 export { default as DimiNavbar } from './DimiNavbar.vue'
+export { default as DimiProgressbar } from './DimiProgressbar.vue'
 export { default as DimiTab } from './DimiTab.vue'
 export { default as DimiLongInput } from './DimiLongInput.vue'
diff --git a/app/pages/paths/management/ManageRequest.vue b/app/pages/paths/management/ManageRequest.vue
index 31f8fda3..6b48821f 100644
--- a/app/pages/paths/management/ManageRequest.vue
+++ b/app/pages/paths/management/ManageRequest.vue
@@ -28,13 +28,21 @@ export default {
               <span class="icon-muffin" /> {{ month }}월 간식 신청 현황
             </h1>
             <div class="dashboard__content">
-              <div class="dashboard__status">
-                총인원 620명 중<br>
-                0명 신청
-              </div>
-              <div class="dashboard__percent">
-                0%
+              <div class="dashboard__field">
+                <div class="dashboard__status">
+                  총인원 620명 중<br>
+                  150명 신청
+                </div>
+                <div class="dashboard__percent">
+                  24%
+                </div>
               </div>
+              <dimi-progressbar
+                class="snack"
+                :progress="24"
+                color="orange"
+                :small="false"
+              />
             </div>
           </div>
           <div class="dashboard__item dashboard__circle">
@@ -67,30 +75,46 @@ export default {
           </div>
         </div>
         <div class="dashboard__row">
-          <div class="dashboard__item dashboard__ingang">
+          <div class="dashboard__item">
             <h1 class="dashboard__title">
               <span class="icon-internet-class" /> {{ month }}월 {{ today }}일 인강실 사용 신청 현황
             </h1>
             <div class="dashboard__content">
               <div class="dashboard__ingang">
-                <div class="dashboard__time">
-                  1타임
-                </div>
-                <div class="dashboard__status">
-                  30석 중 24석 신청
+                <div class="dashboard__ingang--field">
+                  <div class="dashboard__time">
+                    1타임
+                  </div>
+                  <div class="dashboard__status">
+                    30석 중 24석 신청
+                  </div>
                 </div>
+                <dimi-progressbar
+                  class="ingang"
+                  :progress="80"
+                  color="red"
+                  :small="true"
+                />
               </div>
               <div class="dashboard__ingang">
-                <div class="dashboard__time">
-                  2타임
-                </div>
-                <div class="dashboard__status">
-                  2타임 30석 중 12석 신청
+                <div class="dashboard__ingang--field">
+                  <div class="dashboard__time">
+                    2타임
+                  </div>
+                  <div class="dashboard__status">
+                    30석 중 12석 신청
+                  </div>
                 </div>
+                <dimi-progressbar
+                  class="ingang"
+                  :progress="40"
+                  color="pink"
+                  :small="true"
+                />
               </div>
             </div>
           </div>
-          <div class="dashboard__item dashboard__ingang">
+          <div class="dashboard__item">
             <h1 class="dashboard__title">
               <span class="icon-hourglass" /> {{ month }}월 2주차 잔류 신청 현황
             </h1>
@@ -137,7 +161,13 @@ export default {
   &__content {
     display: flex;
     flex-direction: column;
-    padding-top: 1.5em;
+    margin-top: 1.5em;
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     line-height: 1.8;
   }
 
@@ -151,10 +181,9 @@ export default {
     display: flex;
   }
 
-  &__snack &__content {
-    @include from($tablet) {
-      flex-direction: row;
-      justify-content: space-between;
+  &__snack &__field {
+    @include until($tablet) {
+      flex-direction: column;
     }
   }
 
@@ -164,6 +193,14 @@ export default {
 
   &__ingang {
     display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+
+  &__ingang--field {
+    display: flex;
+    width: 50%;
     flex-direction: column;
   }
 
@@ -177,4 +214,14 @@ export default {
     font-weight: $font-weight-bold;
   }
 }
+
+.progress.snack {
+  display: flex;
+  margin-top: 1em;
+}
+
+.progress.ingang {
+  display: flex;
+  padding-left: 0.5em;
+}
 </style>

From 9fe5a35c88f04f2c25e45cd6966e7e496a45397c Mon Sep 17 00:00:00 2001
From: JunhoYeo <32605822+JunhoYeo@users.noreply.github.com>
Date: Mon, 20 May 2019 12:56:55 +0900
Subject: [PATCH 3/3] feat: add DimiBarChart component for afterschool status

---
 app/dimiru/components/DimiBarChart.vue       |  99 +++++++++++++++++
 app/dimiru/components/index.js               |   4 +-
 app/pages/paths/management/ManageRequest.vue | 110 ++++++++++++++++++-
 3 files changed, 205 insertions(+), 8 deletions(-)
 create mode 100644 app/dimiru/components/DimiBarChart.vue

diff --git a/app/dimiru/components/DimiBarChart.vue b/app/dimiru/components/DimiBarChart.vue
new file mode 100644
index 00000000..538512fd
--- /dev/null
+++ b/app/dimiru/components/DimiBarChart.vue
@@ -0,0 +1,99 @@
+<script>
+export default {
+  name: 'DimiBarChart',
+  props: {
+    progress: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: 'red',
+      validator: c => ['mustard', 'orange', 'pink', 'red'].includes(c)
+    }
+  },
+  computed: {
+    computedClass () {
+      return {
+        [this.color]: true,
+        'progress--small': (this.small)
+      }
+    },
+    barStyle () {
+      return {
+        height: ((this.progress > 100) ? 100 : this.progress) + '%'
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="barchart">
+    <div
+      class="barchart__background"
+      :class="computedClass"
+    >
+      <div
+        class="barchart__bar"
+        :class="computedClass"
+        :style="barStyle"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.barchart {
+  height: 100%;
+
+  &__bar,
+  &__background {
+    width: 48px;
+    border-radius: 24px;
+  }
+
+  &__bar {
+    position: absolute;
+    bottom: 0;
+    min-height: 48px;
+  }
+
+  &__background {
+    position: relative;
+    height: 100%;
+  }
+
+  &__bar.red {
+    background-color: $red;
+  }
+
+  &__bar.pink {
+    background-color: $pink;
+  }
+
+  &__bar.mustard {
+    background-color: $mustard;
+  }
+
+  &__bar.orange {
+    background-color: $orange;
+  }
+
+  &__background.red {
+    background-color: rgba(232, 60, 61, 0.5);
+  }
+
+  &__background.pink {
+    background-color: rgba(255, 128, 129, 0.5);
+  }
+
+  &__background.mustard {
+    background-color: rgba(253, 184, 18, 0.5);
+  }
+
+  &__background.orange {
+    background-color: rgba(245, 105, 61, 0.5);
+  }
+}
+</style>
diff --git a/app/dimiru/components/index.js b/app/dimiru/components/index.js
index ac8ac465..f3426615 100644
--- a/app/dimiru/components/index.js
+++ b/app/dimiru/components/index.js
@@ -1,7 +1,7 @@
 export { default as DimiBadge } from './DimiBadge.vue'
-export { default as DimiBadgeGroup } from './DimiBadgeGroup.vue'
-export { default as DimiButton } from './DimiButton.vue'
 export { default as DimiButtonGroup } from './DimiButtonGroup.vue'
+export { default as DimiBarChart } from './DimiBarChart.vue'
+export { default as DimiButton } from './DimiButton.vue'
 export { default as DimiButtonRadio } from './DimiButtonRadio.vue'
 export { default as DimiCard } from './DimiCard.vue'
 export { default as DimiCheckbox } from './DimiCheckbox.vue'
diff --git a/app/pages/paths/management/ManageRequest.vue b/app/pages/paths/management/ManageRequest.vue
index 6b48821f..1adc848e 100644
--- a/app/pages/paths/management/ManageRequest.vue
+++ b/app/pages/paths/management/ManageRequest.vue
@@ -29,7 +29,7 @@ export default {
             </h1>
             <div class="dashboard__content">
               <div class="dashboard__field">
-                <div class="dashboard__status">
+                <div class="dashboard__day">
                   총인원 620명 중<br>
                   150명 신청
                 </div>
@@ -60,7 +60,71 @@ export default {
               <span class="icon-ball" /> {{ year }}년 상반기 방과 후 활동 신청 현황
             </h1>
             <div class="dashboard__content">
-              차트 컴포넌트를 만들자
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  월요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="50"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  50%(310명)
+                </div>
+              </div>
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  화요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="25"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  25%(155명)
+                </div>
+              </div>
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  수요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="60"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  60%(372명)
+                </div>
+              </div>
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  목요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="50"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  50%(310명)
+                </div>
+              </div>
+              <div class="dashboard__cell">
+                <div class="dashboard__day">
+                  금요일
+                </div>
+                <dimi-bar-chart
+                  class="afterschool"
+                  :progress="80"
+                  color="mustard"
+                />
+                <div class="dashboard__percent">
+                  80%(496명)
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -85,7 +149,7 @@ export default {
                   <div class="dashboard__time">
                     1타임
                   </div>
-                  <div class="dashboard__status">
+                  <div class="dashboard__day">
                     30석 중 24석 신청
                   </div>
                 </div>
@@ -101,7 +165,7 @@ export default {
                   <div class="dashboard__time">
                     2타임
                   </div>
-                  <div class="dashboard__status">
+                  <div class="dashboard__day">
                     30석 중 12석 신청
                   </div>
                 </div>
@@ -171,13 +235,13 @@ export default {
     line-height: 1.8;
   }
 
-  &__percent {
+  &__snack &__percent {
     color: $orange;
     font-size: 48px;
     font-weight: $font-weight-regular;
   }
 
-  &__status {
+  &__snack &__status {
     display: flex;
   }
 
@@ -191,6 +255,35 @@ export default {
     line-height: normal;
   }
 
+  &__afterschool &__title {
+    margin-bottom: 0.7em;
+  }
+
+  &__afterschool &__content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-right: 2.5em;
+    padding-left: 2.5em;
+  }
+
+  &__afterschool &__cell {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__afterschool &__day {
+    margin-bottom: 0.8em;
+    color: $gray-dark;
+    font-size: 18px;
+    font-weight: $font-weight-regular;
+  }
+
+  &__afterschool &__percent {
+    margin-top: 1em;
+  }
+
   &__ingang {
     display: flex;
     flex-direction: row;
@@ -224,4 +317,9 @@ export default {
   display: flex;
   padding-left: 0.5em;
 }
+
+.barchart.afterschool {
+  display: flex;
+  height: 120px;
+}
 </style>