add: UI comp 추가

components/comp/Dropdown.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { CompDropdown } from '~/utils/settingComps'
+
+const { data } = defineProps<{ data: CompDropdown }>()
+const isExpanded = useState(undefined, () => false)
+const isActive = useState(undefined, () => false)
+
+const wrapEl = ref()
+
+const closeList = () => {
+  isExpanded.value = false
+  isActive.value = false
+}
+
+onClickOutside(wrapEl, closeList)
+</script>
+
+<template>
+  <div class="vert" ref="wrapEl">
+    <p>
+      <!-- 보안 초대 방식 -->
+      {{ $t('invite.category1.type.title') }}
+    </p>
+    <div
+      class="select select-l"
+      :class="{ active: isActive }"
+      @click="
+        isExpanded = true
+        isActive = true
+      "
+      v-click-outside="onClickOutside"
+    >
+      {{ data.list[data.index] }}
+    </div>
+
+    <ul class="list-l" v-if="isExpanded">
+      <li
+        v-for="(name, index) in data.list"
+        v-bind:key="index"
+        @click="
+          data.index = index
+          isActive = false
+        "
+      >
+        {{ name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss"></style>

components/comp/InputMenu.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { CompInputMenu } from '~/utils/settingComps'
+
+const { data } = defineProps<{ data: CompInputMenu }>()
+const isExpanded = useState(undefined, () => false)
+
+const wrapEl = ref()
+
+const closeList = () => {
+  isExpanded.value = false
+}
+
+onClickOutside(wrapEl, closeList)
+</script>
+
+<template>
+  <div class="vert" ref="wrapEl">
+    <p>
+      {{ $t('verify.category1.role') }}
+      <!-- 인증 시 지급될 역할 -->
+    </p>
+    <input
+      class="input-l"
+      id="role_input"
+      :value="data.inputValue"
+      @click="isExpanded = true"
+      readonly
+      type="text"
+      :placeholder="$t('verify.category1.rolePlaceholder')"
+    />
+    <ul class="list-l" v-if="isExpanded">
+      <li v-for="(value, index) in data.list" @click="data.inputValue = value" v-bind:key="index">
+        {{ value }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss"></style>

utils/settingComps.ts

@@ -0,0 +1,39 @@
+export class CompSwitch {
+  public value: boolean = false
+
+  constructor(value: boolean) {
+    this.value = value
+  }
+
+  switch() {
+    this.value = !this.value
+  }
+}
+
+export class CompDropdown {
+  public index: number = 0
+  public list: string[] = []
+
+  constructor(index: number, list: string[]) {
+    this.index = index
+    this.list = list
+  }
+}
+
+export class CompInput {
+  public value: string = ''
+
+  constructor(value: string) {
+    this.value = value
+  }
+}
+
+export class CompInputMenu {
+  public inputValue: string = ''
+  public list: string[] = []
+
+  constructor(inputValue: string, list: string[]) {
+    this.inputValue = inputValue
+    this.list = list
+  }
+}