From 3eaafa606d819f6ce46dc519030aa191186f608c Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 28 Feb 2025 13:38:53 +0900
Subject: [PATCH] =?UTF-8?q?color=20=EC=83=89=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EC=B6=94=EA=B0=80,=20mbti=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormSelect.vue  | 42 ++++++++++++++++++++++++----
 src/components/user/RegisterForm.vue |  2 ++
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue
index 1115ea7..1da67e5 100644
--- a/src/components/input/FormSelect.vue
+++ b/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'">
-            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled">
-                <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i">
+        <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" :style="isColor ? { color: selected } : {}">
+                <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>
\ No newline at end of file
+
+
+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>
diff --git a/src/components/user/RegisterForm.vue b/src/components/user/RegisterForm.vue
index 2953ea3..5a5b557 100644
--- a/src/components/user/RegisterForm.vue
+++ b/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"