initial commit

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,76 @@
+module.exports = {
+  root: true,
+
+  env: {
+    browser: true,
+    node: true,
+  },
+
+  parserOptions: {
+    parser: 'babel-eslint',
+    ecmaVersion: 2017,
+    sourceType: 'module',
+  },
+
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    'plugin:vue/recommended',
+    'plugin:prettier/recommended',
+  ],
+
+  // required to lint *.vue files
+  plugins: ['vue'],
+
+  // custom eslint rules
+  rules: {
+    semi: [2, 'never'],
+    'no-console': ['off'],
+    'vue/v-bind-style': ['off'],
+    'vue/no-unused-vars': ['warn'],
+    'vue/no-unused-components': ['warn'],
+    'vue/max-attributes-per-line': ['off'],
+    'vue/html-quotes': ['warn'],
+    'vue/require-prop-types': ['warn'],
+    'vue/no-v-html': ['off'],
+    'vue/html-self-closing': [
+      'warn',
+      {
+        html: {
+          void: 'any',
+          normal: 'always',
+          component: 'always',
+        },
+      },
+    ],
+    'vue/html-closing-bracket-newline': ['warn'],
+    'vue/multiline-html-element-content-newline': [
+      'warn',
+      {
+        ignores: ['pre', 'textarea', 'span', 'b', 'strong', 'a'],
+      },
+    ],
+
+    // Prettier options
+    'prettier/prettier': [
+      'warn',
+      {
+        semi: false,
+        singleQuote: true,
+        printWidth: 120,
+        proseWrap: 'preserve',
+        htmlWhitespaceSensitivity: 'ignore',
+        jsxBracketSameLine: true,
+        eslintIntegration: true,
+      },
+    ],
+  },
+
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+}

.gitignore

@@ -0,0 +1,29 @@
+# dependencies
+node_modules
+no_commit
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist
+
+# Bulma build
+.tmp
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sublime-*
+
+# misc
+.DS_Store

README.md

@@ -0,0 +1,43 @@
+# apateo-prj
+
+> Nuxt.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+$ npm install # Or yarn install
+```
+
+## Development server
+
+``` bash
+# serve with hot reloading at localhost:3000
+$ npm run dev
+```
+
+Go to [http://localhost:3000](http://localhost:3000)
+
+## Production server (SSR)
+
+``` bash
+# build for production and launch the server
+$ npm run build
+$ npm start
+```
+
+## Generate static files
+
+``` bash
+# generate a static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
+
+
+## Run unit tests
+
+this template includes tools to run unit tests using `@vue/test-utils`. Try `npm run test:unit` to see unit test running in action. Check `tests/unit/LoadingDots.spec.js` file to see the example test.
+
+Check out [Vue Test Utils](https://vue-test-utils.vuejs.org/) page for more explanation.

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    test: {
+      presets: ['@vue/app'],
+    },
+  },
+}

components/InfoPanel.vue

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="feature">
+    <table class="table">
+      <tr>
+        <td class="pr-md">단지</td>
+        <td>
+          {{ danjiname }}
+        </td>
+      </tr>
+      <tr class="pr-md">
+        <td>주소</td>
+        <td>
+          {{ juso }}
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    feature: {
+      type: Object,
+      default: () => ({
+        BLD_NM: 'Placehodler',
+        DONG_NM: 'Placehodler',
+      }),
+    },
+  },
+  computed: {
+    juso() {
+      return this.feature ? this.feature.juso.split('(')[0] : ''
+    },
+    danjiname() {
+      return this.feature ? this.feature.juso.split('(')[1].split(')')[0] : ''
+    },
+  },
+}
+</script>

components/Input.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div class="sr-only">
+      렌더링 엔진의 힘을 크게 비는 특성상, 이 지도는 스크린 리더에서 활용하기 어렵습니다. 이 지도에 활용한 데이터는
+      <a href="">해당 리포 데이터 폴더</a>
+      에서 확인할 수 있습니다.
+    </div>
+    <label for="nameinput">찾는 이름을 입력한 후 엔터키를 누르세요.</label>
+    <input ref="nameinput" name="nameinput" class="textinput" type="text" placeholder="리버⏎" @change="inputChange" />
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    inputChange: function (e) {
+      this.$emit('inputchange', { value: e.target.value })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+label {
+  font-size: 12px;
+  font-weight: 600;
+}
+input.textinput {
+  width: 100%;
+  height: 41px;
+  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Ctitle%3Esearch%3C/title%3E%3Ccircle%20fill%3D%27none%27%20stroke%3D%27%23666666%27%20stroke-width%3D%272.2677%27%20stroke-miterlimit%3D%2710%27%20cx%3D%279.99%27%20cy%3D%276.512%27%20r%3D%275.5%27/%3E%3Cline%20fill%3D%27none%27%20stroke%3D%27%23666666%27%20stroke-width%3D%272.2677%27%20stroke-miterlimit%3D%2710%27%20x1%3D%2713.5%27%20y1%3D%2710.637%27%20x2%3D%2716.789%27%20y2%3D%2714.173%27/%3E%3C/svg%3E%0A);
+  background-repeat: no-repeat;
+  background-size: 19px 19px;
+  background-position: 3px 14px;
+  padding: 8px 2px 8px 26px;
+  border: 1px solid #ccc;
+}
+</style>

components/Map.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="map-shaper">
+    <div id="map" ref="map-container" />
+    <div class="uiPanel">
+      <h1 class="is-size-sm">아파트 단지 이름 찾기</h1>
+      <TextBox class="textbox" @inputchange="inputChange" />
+    </div>
+    <Selection v-if="renderSelection" :position="pixel" :feature="feature" />
+  </div>
+</template>
+<script>
+import L from 'leaflet'
+import Tangram from 'tangram'
+import TextBox from './Input'
+import Selection from '~/components/Selection'
+
+export default {
+  components: {
+    TextBox,
+    Selection,
+  },
+  data() {
+    return {
+      feature: null,
+      picking: false,
+      renderSelection: true,
+      pixel: { x: -200, y: -200 },
+    }
+  },
+  // https://github.com/tangrams/explorer/blob/master/main.js
+  mounted() {
+    const map = L.map('map', {
+      minZoom: 9,
+    })
+    this.tangramLayer = Tangram.leafletLayer({
+      scene: {
+        import: '/scene.yaml',
+      },
+      events: {
+        click: (selection) => {
+          // this.onTangramClick(selection)
+        },
+      },
+      attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> &copy; OSM contributors',
+    })
+    window.tangramLayer = this.tangramLayer
+    map.setView([37.58451, 126.96939], 12)
+
+    this.tangramLayer.addTo(map)
+
+    window.map = this.map = map
+    this.initMapEvent()
+  },
+
+  methods: {
+    initMapEvent() {
+      this.map.on('zoomend', (e) => {
+        this.renderSelection = false
+        this.feature = null
+        const zoom = this.map.getZoom()
+        // turn off popup when zoom is low: is this really better UX?
+        if (zoom < 12) this.renderSelection = false
+        else this.renderSelection = true
+      })
+
+      this.map.getContainer().addEventListener('click', (event) => {
+        if (this.renderSelection) this.picking = !this.picking
+      })
+      // when map pans, drop the toggle
+      this.map.getContainer().addEventListener('drag', (event) => {
+        if (this.renderSelection) this.picking = false
+      })
+      map.getContainer().addEventListener('mousemove', (event) => {
+        if (this.picking || !this.renderSelection) return
+        this.pixel = { x: event.clientX, y: event.clientY }
+        this.tangramLayer.scene.getFeatureAt(this.pixel).then((selection) => {
+          if (!selection) {
+            this.feature = null
+            return
+          }
+          const feature = selection.feature
+          if (!feature || !feature.properties.n) {
+            this.feature = null
+            return
+          }
+          this.feature = feature
+        })
+      })
+    },
+    inputChange(e) {
+      const valuetext = e.value
+      this.tangramLayer.scene.config.global.value_text = valuetext
+      this.tangramLayer.scene.rebuild().then((e) => console.log('yo'))
+    },
+    onTangramClick(selection) {
+      if (selection.feature) {
+        this.feature = selection.feature.properties
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.map-shaper {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+#map {
+  width: 100%;
+  height: 100%;
+  border-right: 2px solid gray;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.uiPanel {
+  width: 300px;
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  padding: 15px;
+  z-index: 1000000;
+  background-color: white;
+  border: 2px solid gray;
+  h1 {
+    font-size: 18px;
+    font-weight: 600;
+  }
+}
+</style>

components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+The components directory contains your Vue.js Components.
+Nuxt.js doesn't supercharge these components.
+
+**This directory is not required, you can delete it if you don't want to use it.**
+