color 색 미리보기 추가, mbti 이미지 추가

src/components/input/FormSelect.vue

@@ -4,19 +4,30 @@
             {{ title }}
             <span :class="isEssential ? 'link-danger' : 'none'">*</span>
         </label>
-        <div :class="isRow ? 'col-md-10' : 'col-md-12'">
+        <div :class="isRow ? 'col-md-10' : 'col-md-12'" class="d-flex gap-2 align-items-center">
-            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled">
+            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}">
-                <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i">
+                <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}">
                     {{ isCommon ? item.label : item }}
                 </option>
             </select>
+
+            <div v-if="isColor && selected"
+                    class="w-px-40 h-px-30"
+                    :style="{backgroundColor: selected}">
+            </div>
+
+            <img v-if="isMbti && selected"
+                role="img"
+                class="w-px-30 h-px-40"
+                :src="`/img/mbti/${selected.toLowerCase()}.png`"
+                alt="MBTI image"/>
         </div>
         <div v-if="isAlert" class="invalid-feedback">{{ title }}을 확인해주세요.</div>
     </div>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const props = defineProps({
     title: {
@@ -67,7 +78,17 @@ const props = defineProps({
     disabled: {
         type: Boolean,
         default: false
-    }
+    },
+    isColor: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    isMbti: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });
 
 const emit = defineEmits(['update:data']);
@@ -93,4 +114,13 @@ watch(() => props.data, (newData) => {
 watch(selectData, (newValue) => {
     emit('update:data', newValue);
 });
-</script>
+
+
+const selected = computed(() => {
+    const selectedItem = props.data.find(item =>
+        props.isCommon ? item.value === selectData.value : props.data.indexOf(item) === selectData.value
+    );
+    return selectedItem ? selectedItem.label : null;
+});
+
+</script>

src/components/user/RegisterForm.vue

@@ -92,6 +92,7 @@
                     :is-row="false"
                     :is-label="true"
                     :is-common="true"
+                    :is-color="true"
                     :data="colorList"
                     @update:data="color = $event"
                     class="w-50"
@@ -118,6 +119,7 @@
                     :is-row="false"
                     :is-label="true"
                     :is-common="true"
+                    :is-mbti="true"
                     :data="mbtiList"
                     @update:data="mbti = $event"
                     class="w-50"