feat: processing 검색 켬/끔 추가

hwe/ts/components/TopBackBar.vue

@@ -2,8 +2,16 @@
   <div class="bg0 back_bar">
     <button type="button" class="btn btn-sammo-base2 back_btn" @click="back">
       돌아가기
-    </button>
+    </button><b-button
+      class="btn-toggle-zoom"
+      :variant="toggleSearch ? 'info' : 'secondary'"
+      :pressed="toggleSearch"
+      v-if="toggleSearch !== undefined"
+      @click="toggleSearch = !toggleSearch"
+      >{{ toggleSearch ? "검색 켜짐" : "검색 꺼짐" }}</b-button
+    >
     <h2 class="title">{{ title }}</h2>
+
   </div>
 </template>
 
@@ -25,6 +33,17 @@ export default defineComponent({
       }
     },
   },
+  data() {
+    return {
+      toggleSearch: this.searchable,
+    };
+  },
+  emits: ["update:searchable"],
+  watch: {
+    toggleSearch(val: boolean) {
+      this.$emit("update:searchable", val);
+    },
+  },
   props: {
     title: {
       type: String,
@@ -35,6 +54,11 @@ export default defineComponent({
       default: "normal",
       required: false,
     },
+    searchable: {
+      type: Boolean,
+      default: undefined,
+      required: false,
+    },
   },
 });
 </script>
@@ -55,6 +79,12 @@ export default defineComponent({
   height: 24pt;
 }
 
+.btn-toggle-zoom{
+  position: absolute;
+  height: 24pt;
+  right: 0;
+}
+
 .title {
   text-align: center;
   line-height: 24pt;