기초작업

components/button/basic.scss

@@ -57,7 +57,6 @@ $size-icon-large: 22px;
   }
   &[type='button'], &[type='submit'], &[type='reset'] {
     width: 100%;
-    cursor: pointer;
     -webkit-appearance: button;
   }
   &[disabled] {

components/button/icon.scss

@@ -0,0 +1,39 @@
+@import "../../assets/scss/variables";
+@import "../../assets/scss/mixins";
+
+.button-icon {
+  display: block;
+  width: var(--button-icon-size, 42px);
+  height: var(--button-icon-size, 42px);
+  cursor: pointer;
+  box-sizing: border-box;
+  border: none;
+  user-select: none;
+  border-radius: 2px;
+  background: var(--button-icon-bgcolor, var(--color-content-bg));
+  transition: opacity 200ms ease-out;
+  &[type='button'], &[type='submit'], &[type='reset'] {
+    -webkit-appearance: button;
+    outline: 0;
+  }
+  &:active {
+    opacity: .5;
+  }
+  &__unit {
+    display: block;
+    margin: 0 auto;
+    width: var(--button-icon-unit-size, 20px);
+    height: var(--button-icon-unit-size, 20px);
+    color: var(--button-icon-color, var(--color-base));
+    stroke-width: var(--button-icon-stroke, 2px);
+  }
+  &--link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &--disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+}

components/button/icon.vue

@@ -0,0 +1,68 @@
+<template>
+<a
+  v-if="computedType === 'a'"
+  :title="title"
+  :href="href"
+  :target="target"
+  :class="computedClass">
+  <icon :name="iconName" class="button-icon__unit"/>
+</a>
+<nuxt-link
+  v-else-if="computedType === 'router'"
+  :title="title"
+  :to="href"
+  :class="computedClass">
+  <icon :name="iconName" class="button-icon__unit"/>
+</nuxt-link>
+<button
+  v-else
+  :type="computedType"
+  :title="title"
+  :class="computedClass">
+  <icon :name="iconName" class="button-icon__unit"/>
+</button>
+</template>
+
+<script>
+export default {
+  name: 'button-icon',
+  components: {
+    'icon': () => import('~/components/icon'),
+  },
+  props: {
+    iconName: { type: String, default: 'menu' },
+    href: { type: String },
+    target: { type: String },
+    title: { type: String },
+    disabled: { type: Boolean, default: false },
+  },
+  computed: {
+    computedType()
+    {
+      if (this.href)
+      {
+        return /^http/.test(this.href) ? 'a' : 'router';
+      }
+      switch (this.type)
+      {
+        case 'reset':
+        case 'submit':
+          return this.type;
+        case 'button':
+        default:
+          return 'button';
+      }
+    },
+    computedClass()
+    {
+      return [
+        'button-icon',
+        (this.computedType === 'a' || this.computedType === 'router') && 'button-icon--link',
+        this.disabled && 'button-icon--disabled',
+      ];
+    }
+  },
+}
+</script>
+
+<style src="./icon.scss" lang="scss" scoped></style>

components/contents/page-header.scss

@@ -5,7 +5,18 @@ $self: '.page-header';
 
 .page-header {
   margin: 0 0 30px;
-
+  display: flex;
+  align-items: center;
+  &__body {
+    flex: 1;
+  }
+  &__nav {
+    display: flex;
+    align-items: center;
+    > *:nth-child(n+2) {
+      margin-left: 8px;
+    }
+  }
   &__prefix {
     display: block;
     margin: 0 0 -4px;
@@ -28,9 +39,8 @@ $self: '.page-header';
     color: var(--color-blur);
     letter-spacing: -.25px;
   }
-
   &--eng {
-    #{$self} {
+    .page-header {
       &__title {
         padding-top: 0;
         font-family: $font-eng-circular;
@@ -42,7 +52,6 @@ $self: '.page-header';
       }
     }
   }
-
   @include dark-mode() {
     &__title {
       color: #fff;

components/contents/page-header.vue

@@ -1,8 +1,13 @@
 <template>
 <header :class="['page-header', eng && 'page-header--eng']">
-  <small v-if="!!prefix" class="page-header__prefix">{{prefix}}</small>
-  <h2 class="page-header__title">{{title || messages.title}}</h2>
-  <p class="page-header__description">{{messages.description}}</p>
+  <div class="page-header__body">
+    <small v-if="!!prefix" class="page-header__prefix">{{prefix}}</small>
+    <h2 class="page-header__title">{{title || messages.title}}</h2>
+    <p class="page-header__description">{{messages.description}}</p>
+  </div>
+  <nav v-if="!!$slots.default" class="page-header__nav">
+    <slot/>
+  </nav>
 </header>
 </template>
 
@@ -53,7 +58,12 @@ export default {
         case 'files':
           return {
             title: this.title || 'Files',
-            description: this.description || '첨부된 파일들의 목록입니다.',
+            description: this.description || '첨부된 파일들을 관리하는 모듈입니다.',
+          };
+        case 'checklist':
+          return {
+            title: this.title || 'Checklist',
+            description: this.description || '체크리스트를 관리하는 모듈입니다.',
           };
         default:
           return {

components/pages/articles/index/filter/index.vue

@@ -1,5 +1,5 @@
 <template>
-<form @submit.prevent="" class="index-filter">
+<form class="index-filter" @submit.prevent="">
   <div class="index-filter__section">
     <p><label for="filter_type">Type</label></p>
     <div>

components/pages/checklist/progress.scss

@@ -0,0 +1 @@
+.checklist-progress {}

components/pages/checklist/progress.vue

@@ -0,0 +1,13 @@
+<template>
+<div class="checklist-progress">
+  .progress
+</div>
+</template>
+
+<script>
+export default {
+  name: 'checklist-progress',
+}
+</script>
+
+<style src="./progress.scss" lang="scss" scoped></style>

components/pages/checklist/src.js

@@ -0,0 +1,22 @@
+import { compareDate } from '~/libs/dates';
+
+/**
+ * check time
+ * 시간을 검사하여 아이템을 새로 추가할건지 마지막 데이터를 사용할건지 결정한다.
+ *
+ * @param {String|String[]} src `0000-00-00`
+ * @param {String|String[]} resetTime `00:00`
+ * @return {Boolean} 데이터를 새로 만드는 상황이라면 true
+ */
+export function checkTime(src, resetTime)
+{
+  const now = new Date();
+  const reset = new Date();
+  reset.setHours(Number(resetTime.split(':')[0]));
+  reset.setMinutes(Number(resetTime.split(':')[1]));
+  reset.setSeconds(0);
+  reset.setMilliseconds(0);
+  src = src.split('-');
+  let srcDate = new Date(Number(src[0]), Number(src[1])-1, Number(src[2]));
+  return ((now.getTime() > reset.getTime()) && compareDate(srcDate, now, '<'))
+}

libs/dates.js

@@ -67,3 +67,29 @@ export function convertDateInService(item, field)
       return getFormatDate(item.regdate, false);
   }
 }
+
+/**
+ * compare date
+ *
+ * @param {Date} date1
+ * @param {Date} date2
+ * @param {String} compare
+ * @return {Boolean}
+ * @throws
+ * */
+export function compareDate(date1, date2, compare = '<')
+{
+  if (!(date1 && date2)) throw new Error('no date1 or date2');
+  let d1 = date1.setHours(0,0,0,0);
+  let d2 = date2.setHours(0,0,0,0);
+  switch (compare)
+  {
+    case '<':
+      return d1 < d2;
+    case '>':
+      return d1 > d2;
+    case '=':
+    default:
+      return d1 === d2;
+  }
+}

libs/forms.js

@@ -7,11 +7,9 @@
 export function formData(obj=null)
 {
 	if (!(obj && typeof obj === 'object')) return null;
-
+	if (!FormData) return obj;
 	let data = new FormData();
-	Object.keys(obj).forEach((o) => {
-		data.append(o, obj[o]);
-	});
+	Object.keys(obj).forEach((o) => data.append(o, obj[o]));
 	return data;
 }
 

nuxt.config.js

@@ -1,7 +1,7 @@
 import bodyParser from 'body-parser';
 import session from 'express-session';
-const MYSQLStore = require('express-mysql-session')(session);
 import extendRoutes from './assets/routes';
+const MYSQLStore = require('express-mysql-session')(session);
 
 // get .env
 require('dotenv').config();
@@ -14,6 +14,7 @@ const sessionStore = (env.APP_DB_HOST && env.APP_DB_PORT && env.APP_DB_USERNAME
 // nuxt config
 module.exports = {
   ssr: true,
+  telemetry: false,
   head: {
     title: env.APP_NAME,
     meta: [
@@ -82,5 +83,4 @@ module.exports = {
     }),
     '~/api',
   ],
-  telemetry: false,
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "goose-manager",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "private": false,
   "license": "MIT",
   "scripts": {
@@ -11,22 +11,22 @@
     "build-check": "./node_modules/.bin/nuxt build --analyze"
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.12.5",
+    "@nuxtjs/axios": "^5.13.1",
     "@nuxtjs/dotenv": "^1.4.1",
     "body-parser": "^1.19.0",
     "express": "^4.17.1",
     "express-mysql-session": "^2.1.5",
     "express-session": "^1.17.1",
     "image-resize": "^1.1.5",
-    "marked": "^1.2.7",
+    "marked": "^2.0.0",
     "nuxt": "^2.14.12",
     "redgoose-content-body": "git+https://github.com/redgoose-dev/redgoose-content-body.git",
     "vue-croppie": "^2.0.2",
     "vuedraggable": "^2.24.3"
   },
   "devDependencies": {
     "fibers": "^5.0.0",
-    "sass": "^1.32.5",
+    "sass": "^1.32.7",
     "sass-loader": "^10.1.1"
   }
 }

pages-extend/articles/index.vue

@@ -111,7 +111,7 @@ export default {
   computed: {
     computedTotal()
     {
-      return number.withCommas(this.total);
+      return number.withCommas(this.total) || 0;
     },
   },
   watch: {
@@ -174,7 +174,7 @@ export default {
       if (keyword) params.q = keyword;
       this.$router.push(`./${text.serialize(params, true)}`);
     },
-    setQueryDataInArticles(item)
+    setQueryDataInArticles()
     {
       let query = {};
       if (this.page && this.page > 1) query.page = this.page;

pages/checklist.scss

@@ -0,0 +1,17 @@
+@import "../assets/scss/variables";
+@import "../assets/scss/mixins";
+
+.checklist {
+  &__wrap {}
+  &__side {}
+  &__body {}
+  &__header-button {
+    --button-icon-unit-size: 16px;
+  }
+  &__progress {
+    position: sticky;
+    left: 50%;
+    bottom: 30px;
+    border: 1px solid red;
+  }
+}