유효성 체크 및 경고 문구 변경

src/components/main/EventModal.vue

@@ -28,10 +28,19 @@
                     placeholder="장소"
                     v-model="eventPlace"
                     maxlength="20"
+                    @input="handleChangeInput"
                 />
+                <span v-if="noInputAlert" class="invalid-feedback d-block" style="padding-left: 5px">{{ noInputAlert }}</span>
             </div>
             <div class="mb-2">
-                <input type="time" class="form-control form-control-sm py-1" style="height: 25px; font-size: 12px" v-model="eventTime" />
+                <input
+                    type="time"
+                    class="form-control form-control-sm py-1"
+                    style="height: 25px; font-size: 12px"
+                    v-model="eventTime"
+                    @input="handleChangeInput2"
+                />
+                <span v-if="noInputAlert2" class="invalid-feedback d-block" style="padding-left: 5px">{{ noInputAlert2 }}</span>
             </div>
             <div class="text-end">
                 <button class="btn btn-primary btn-sm py-1" style="font-size: 12px; height: 25px; line-height: 1" @click="handleSubmit">
@@ -70,6 +79,8 @@
     const selectedEventType = ref(null);
     const eventPlace = ref('');
     const eventTime = ref('');
+    const noInputAlert = ref(null);
+    const noInputAlert2 = ref(null);
 
     const eventTypes = [
         { type: 'birthdayParty', code: '300203', title: '생일파티' },
@@ -79,8 +90,6 @@
     ];
 
     const getEventTitle = type => {
-        console.log('type: ', type);
-        console.log('event.type: ', eventTypes);
         return eventTypes.find(event => event.code === type)?.title || '';
     };
 
@@ -99,22 +108,50 @@
             }
         } else {
             selectedEventType.value = event.code;
+            noInputAlert.value = '';
+            noInputAlert2.value = '';
         }
     };
 
     const handleSubmit = () => {
-        if (!eventPlace.value || !eventTime.value) {
+        if (isValid()) {
-            alert('장소와 시간을 모두 입력해주세요');
+            emit('insert', {
-            return;
+                date: props.selectedDate,
+                code: selectedEventType.value,
+                title: getEventTitle(selectedEventType.value),
+                place: eventPlace.value.trim(),
+                time: eventTime.value,
+            });
+        }
+    };
+
+    // 유효성 검사
+    const isValid = () => {
+        let isValid = true;
+
+        if (!eventPlace.value.trim()) {
+            noInputAlert.value = '장소를 입력해 주세요';
+            isValid = false;
+        } else {
+            noInputAlert.value = '';
         }
 
-        emit('insert', {
+        if (!eventTime.value) {
-            date: props.selectedDate,
+            noInputAlert2.value = '시간을 입력해 주세요';
-            code: selectedEventType.value,
+            isValid = false;
-            title: getEventTitle(selectedEventType.value),
+        } else {
-            place: eventPlace.value,
+            noInputAlert2.value = '';
-            time: eventTime.value,
+        }
-        });
+
+        return isValid;
+    };
+
+    const handleChangeInput = () => {
+        noInputAlert.value = null;
+    };
+
+    const handleChangeInput2 = () => {
+        noInputAlert2.value = null;
     };
 
     const resetForm = () => {