feat(WIP): processing을 vue로 전환

hwe/ts/processing/CitiesBasedOnDistance.vue

@@ -0,0 +1,37 @@
+<template>
+  <div v-for="(cityList, distance) in distanceList" :key="distance">
+    {{ distance }}칸 떨어진 도시:
+    <template v-for="(cityID, key) in cityList" :key="key">
+      <template v-if="key !== 0">, </template>
+      <a :style="{ color: colorMap[distance] ?? undefined, textDecoration:'underline' }" @click="$emit('selected', cityID)">{{
+        citiesMap.get(cityID)?.name
+      }}</a>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+export default defineComponent({
+  props: {
+    distanceList: {
+      type: Object as PropType<Record<number, number[]>>,
+      required: true,
+    },
+    citiesMap: {
+      type: Object as PropType<Map<number, { name: string }>>,
+      required: true,
+    },
+  },
+  emits: ['selected'],
+  data() {
+    return {
+      colorMap: {
+        1: "magenta",
+        2: "orange",
+        3: "yellow",
+      },
+    };
+  },
+});
+</script>