prettier 적용

frontend/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 4,
+  "printWidth": 100,
+  "singleAttributePerLine": true
+}

frontend/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  "presets": [
-    "@vue/cli-plugin-babel/preset"
-  ]
-}
+    presets: ['@vue/cli-plugin-babel/preset'],
+};

frontend/package.json

@@ -12,15 +12,18 @@
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/vue-fontawesome": "^2.0.6",
+    "@vue/eslint-config-prettier": "^6.0.0",
     "axios": "^0.26.1",
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.17.3",
     "core-js": "^3.6.5",
+    "eslint-plugin-prettier": "^3.4.1",
     "mutationobserver-shim": "^0.3.7",
     "ol": "^6.9.0",
     "ol-geocoder": "^4.1.2",
     "popper.js": "^1.16.1",
     "portal-vue": "^2.1.7",
+    "prettier": "^2.7.1",
     "vue": "^2.6.11",
     "vue-resizable": "^2.0.5",
     "vuex": "^3.4.0"
@@ -46,7 +49,8 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "eslint:recommended"
+      "eslint:recommended",
+      "@vue/eslint-config-prettier"
     ],
     "parserOptions": {
       "parser": "babel-eslint"

frontend/src/App.vue

@@ -1,39 +1,39 @@
 <template>
-  <div id="app">
-    <MainMap/>
-    <SideBar class="side-bar"/>
-  </div>
+    <div id="app">
+        <MainMap />
+        <SideBar class="side-bar" />
+    </div>
 </template>
 
 <script>
-import MainMap from '@/components/MainMap'
-import SideBar from '@/components/SideBar'
+import MainMap from '@/components/MainMap';
+import SideBar from '@/components/SideBar';
 
 export default {
-  name: 'App',
-  components: {
-    SideBar,
-    MainMap
-  }
-}
+    name: 'App',
+    components: {
+        SideBar,
+        MainMap,
+    },
+};
 </script>
 
 <style lang="scss">
-@import "~@/assets/scss/vendors/bootstrap-vue/index";
+@import '~@/assets/scss/vendors/bootstrap-vue/index';
 #app {
-  font-family: 'Nanum Barun Gothic', serif;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
-  > .side-bar {
+    font-family: 'Nanum Barun Gothic', serif;
     position: absolute;
-    left: 0;
     top: 0;
+    right: 0;
     bottom: 0;
-  }
+    left: 0;
+
+    > .side-bar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+    }
     /* width */
     ::-webkit-scrollbar {
         width: 10px;

frontend/src/common/Api.js

@@ -13,10 +13,9 @@ export async function process(that, func) {
             okVariant: 'danger',
             headerClass: 'p-2 border-bottom-0',
             footerClass: 'p-2 border-top-0',
-        })
+        });
         return await Promise.reject(err);
     } finally {
         that.processingCount--;
     }
-
 }

frontend/src/common/DateUtil.js

@@ -1,31 +1,28 @@
-export function utcDateStrToVisualLocalDateStr(utcDateStr)
-{
+export function utcDateStrToVisualLocalDateStr(utcDateStr) {
     return dateToVisualDateStr(utcDateStrToLocalDate(utcDateStr));
 }
 
-export function utcDateStrToLocalDate(utcDateStr)
-{
+export function utcDateStrToLocalDate(utcDateStr) {
     const date = dateStrToDate(utcDateStr);
     date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
     return date;
 }
 
 // YYYYMMDDHHMMSS
-export function dateStrToDate(dateStr)
-{
+export function dateStrToDate(dateStr) {
     return new Date(
         parseInt(dateStr.substring(0, 4)),
         parseInt(dateStr.substring(4, 6)) - 1,
         parseInt(dateStr.substring(6, 8)),
         parseInt(dateStr.substring(8, 10)),
         parseInt(dateStr.substring(10, 12)),
-        parseInt(dateStr.substring(12, 14)));
+        parseInt(dateStr.substring(12, 14))
+    );
 }
 
-export function dateToVisualDateStr(date)
-{
+export function dateToVisualDateStr(date) {
     return `
         ${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} 
         ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}
-    `
+    `;
 }

frontend/src/common/Dialog.js

@@ -1,27 +1,27 @@
-export function confirm(that, message) {
-    return that.$bvModal.msgBoxConfirm(message, {
-        hideHeader: true,
-        okTitle: '확인',
-        cancelTitle: '취소',
-        noFade: false,
-        size: 'sm',
-        buttonSize: 'sm',
-        okVariant: 'warning',
-        cancelVariant: 'secondary',
-        headerClass: 'p-2 border-bottom-0',
-        footerClass: 'p-2 border-top-0',
-    });
-}
-
-export function ok(that, message) {
-    return that.$bvModal.msgBoxOk(message, {
-        hideHeader: true,
-        okTitle: '확인',
-        noFade: false,
-        size: 'sm',
-        buttonSize: 'sm',
-        okVariant: 'success',
-        headerClass: 'p-2 border-bottom-0',
-        footerClass: 'p-2 border-top-0',
-    });
-}
+export function confirm(that, message) {
+    return that.$bvModal.msgBoxConfirm(message, {
+        hideHeader: true,
+        okTitle: '확인',
+        cancelTitle: '취소',
+        noFade: false,
+        size: 'sm',
+        buttonSize: 'sm',
+        okVariant: 'warning',
+        cancelVariant: 'secondary',
+        headerClass: 'p-2 border-bottom-0',
+        footerClass: 'p-2 border-top-0',
+    });
+}
+
+export function ok(that, message) {
+    return that.$bvModal.msgBoxOk(message, {
+        hideHeader: true,
+        okTitle: '확인',
+        noFade: false,
+        size: 'sm',
+        buttonSize: 'sm',
+        okVariant: 'success',
+        headerClass: 'p-2 border-bottom-0',
+        footerClass: 'p-2 border-top-0',
+    });
+}

frontend/src/common/Icons.js

@@ -1,25 +1,25 @@
-import Vue from 'vue';
-
-// 0. 편의를 위해 아이콘은 알파벳 순서대로 추가하자.
-// 1. 설치했던 fontawesome-svg-core 와 vue-fontawesome
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-// 2. 설치했던 아이콘 파일에서 원하는 아이콘 불러오기
-import {
-    faAngleLeft,
-    faAngleRight,
-    faLocationDot,
-    faTimes,
-    faPlus
-} from "@fortawesome/free-solid-svg-icons";
-
-// 3. 불러온 아이콘을 라이브러리에 담기
-library.add(faAngleLeft);
-library.add(faAngleRight);
-library.add(faLocationDot);
-library.add(faTimes);
-library.add(faPlus);
-
-// 4. fontawesome 아이콘을 Vue 템플릿에서 사용할 수 있도록 등록
-Vue.component("FontAwesomeIcon", FontAwesomeIcon);
+import Vue from 'vue';
+
+// 0. 편의를 위해 아이콘은 알파벳 순서대로 추가하자.
+// 1. 설치했던 fontawesome-svg-core 와 vue-fontawesome
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+// 2. 설치했던 아이콘 파일에서 원하는 아이콘 불러오기
+import {
+    faAngleLeft,
+    faAngleRight,
+    faLocationDot,
+    faTimes,
+    faPlus,
+} from '@fortawesome/free-solid-svg-icons';
+
+// 3. 불러온 아이콘을 라이브러리에 담기
+library.add(faAngleLeft);
+library.add(faAngleRight);
+library.add(faLocationDot);
+library.add(faTimes);
+library.add(faPlus);
+
+// 4. fontawesome 아이콘을 Vue 템플릿에서 사용할 수 있도록 등록
+Vue.component('FontAwesomeIcon', FontAwesomeIcon);