수정사항 완료

src/components/list/ProjectCard.vue

@@ -39,7 +39,6 @@
                         <div
                         v-if="isPopoverVisible"
                         class="position-absolute w-100 map text-end"
-                        @click.stop
                         >
                         <button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
                             <div class="card">
@@ -48,6 +47,7 @@
                                         v-if="coordinates"
                                         :lat="coordinates.lat"
                                         :lng="coordinates.lng"
+                                        :draggable="false"
                                         class="w-100 h-px-200"
                                         >
                                         <KakaoMapMarker
@@ -81,7 +81,7 @@
 
         </template>
         <template #footer>
-            <button type="button" class="btn btn-secondary" @click="closeModal">닫기</button>
+            <BackButton @click="closeModal" />
         </template>
     </CenterModal>
 </template>

src/components/modal/CenterModal.vue

@@ -7,7 +7,6 @@
                     <h5 class="modal-title m-auto fw-bold" id="modalCenterTitle">
                         <slot name="title">Modal Title</slot>
                     </h5>
-                    <button type="button" class="btn-close" @click="closeModal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <slot name="body">Modal body</slot>
@@ -21,17 +20,26 @@
 </template>
 
 <script setup>
+
 const prop = defineProps({
     display : {
         type: Boolean,
         default: false,
         required: true,
     },
+    create: {
+        type: Boolean,
+        default: false,
+    }
 });
 
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close' , 'reset']);
 
 const closeModal = () => {
+    if (prop.create) {
+        emit('reset');
+    }
+
     emit('close', false);
 };
 </script>
@@ -45,3 +53,4 @@ const closeModal = () => {
 
 
 
+

src/components/projectlist/ProjectList.vue

@@ -26,7 +26,8 @@
     </div>
 
     <!-- 등록 모달 -->
-    <CenterModal :display="isCreateModalOpen" @close="closeCreateModal">
+    <form @reset.prevent="formReset">
+        <CenterModal :display="isCreateModalOpen" @close="closeCreateModal" :create="true" @reset="formReset">
             <template #title> 프로젝트 등록 </template>
             <template #body>
                 <FormInput
@@ -34,7 +35,9 @@
                     name="name"
                     :is-essential="true"
                     :is-alert="nameAlert"
+                    :modelValue="name"
                     @update:modelValue="name = $event"
+                    @update:alert="nameAlert = $event"
                 />
 
                 <FormSelect
@@ -49,22 +52,25 @@
 
                 <FormInput
                     title="시작 일"
-                type="date"
                     name="startDay"
-                v-model="startDay"
+                    :type="'date'"
                     :is-essential="true"
+                    :modelValue="startDay"
+                    v-model="startDay"
                 />
 
                 <FormInput
                     title="종료 일"
-                name="endDay"
                     :type="'date'"
+                    name="endDay"
+                    :modelValue="endDay"
                     @update:modelValue="endDay = $event"
                 />
 
                 <FormInput
                     title="설명"
                     name="description"
+                    :modelValue="description"
                     @update:modelValue="description = $event"
                 />
 
@@ -79,10 +85,11 @@
                 />
             </template>
             <template #footer>
-            <BackButton @click="closeCreateModal" />
+                <BackButton type="reset" @click="closeCreateModal" />
                 <SaveButton @click="handleCreate" />
             </template>
         </CenterModal>
+    </form>
 
     <!-- 수정 모달 -->
     <CenterModal :display="isEditModalOpen" @close="closeEditModal">
@@ -95,6 +102,7 @@
                 :is-alert="nameAlert"
                 :modelValue="selectedProject.PROJCTNAM"
                 @update:modelValue="selectedProject.PROJCTNAM = $event"
+                @update:alert="nameAlert = $event"
             />
 
             <FormSelect
@@ -149,7 +157,7 @@
 </template>
 
 <script setup>
-import { computed, inject, ref, watch, onMounted } from 'vue';
+    import { computed, ref, watch, onMounted, inject } from 'vue';
     import SearchBar from '@c/search/SearchBar.vue';
     import ProjectCard from '@c/list/ProjectCard.vue';
     import CategoryBtn from '@c/category/CategoryBtn.vue';
@@ -164,10 +172,8 @@ import { useUserInfoStore } from '@/stores/useUserInfoStore';
     import { useProjectStore } from '@/stores/useProjectStore';
     import $api from '@api';
     import SaveButton from '@c/button/SaveBtn.vue';
-import BackButton from '@c/button/BackBtn.vue'
+    import BackButton from '@c/button/BackBtn.vue';
 
-const dayjs = inject('dayjs');
-const today = dayjs().format('YYYY-MM-DD');
     const toastStore = useToastStore();
     const userStore = useUserInfoStore();
     const projectStore = useProjectStore();
@@ -177,6 +183,12 @@ const user = ref(null);
     const selectedCategory = ref(null);
     const searchText = ref('');
 
+    // dayjs 인스턴스 가져오기
+    const dayjs = inject('dayjs');
+
+    // 오늘 날짜를 YYYY-MM-DD 형식으로 변환
+    const today = dayjs().format('YYYY-MM-DD');
+
     // 등록 모달 상태
     const isCreateModalOpen = ref(false);
     const name = ref('');
@@ -214,7 +226,7 @@ const { yearCategory, colorList } = commonApi({
     });
 
     // 검색 처리
-const search = async (searchKeyword) => {
+    const search = async searchKeyword => {
         searchText.value = searchKeyword.trim();
         await getProjectList();
     };
@@ -244,10 +256,9 @@ const openCreateModal = () => {
 
     const closeCreateModal = () => {
         isCreateModalOpen.value = false;
-    resetCreateForm();
     };
 
-const resetCreateForm = () => {
+    const formReset = () => {
         name.value = '';
         color.value = '';
         address.value = '';
@@ -258,7 +269,7 @@ const resetCreateForm = () => {
         description.value = '';
         nameAlert.value = false;
         addressAlert.value = false;
-};
+    }
 
     // 등록 :: 주소 업데이트 핸들러
     const handleAddressUpdate = addressData => {
@@ -286,8 +297,7 @@ const handleCreate = async () => {
             projctDtl: detailAddress.value,
             projctZip: postcode.value,
             projctCmb: user.value.name,
-    })
+        }).then(res => {
-    .then(res => {
             if (res.status === 200) {
                 toastStore.onToast('프로젝트가 등록되었습니다.', 's');
                 closeCreateModal();
@@ -297,7 +307,7 @@ const handleCreate = async () => {
     };
 
     // 수정 모달 관리
-const openEditModal = (post) => {
+    const openEditModal = post => {
         isEditModalOpen.value = true;
         selectedProject.value = { ...post };
         originalColor.value = post.PROJCTCOL;
@@ -331,17 +341,23 @@ const hasChanges = computed(() => {
     });
 
     // 수정 :: 주소
-const updateAddress = (addressData) => {
+    const updateAddress = addressData => {
         selectedProject.value = {
             ...selectedProject.value,
             PROJCTZIP: addressData.postcode,
             PROJCTARR: addressData.address,
-        PROJCTDTL: addressData.detailAddress
+            PROJCTDTL: addressData.detailAddress,
         };
     };
 
     // 프로젝트 수정
 const handleUpdate = () => {
+        nameAlert.value = selectedProject.value.PROJCTNAM.trim() === '';
+
+        if (nameAlert.value) {
+            return;
+        }
+
         if (!hasChanges.value) {
             toastStore.onToast('변경된 내용이 없습니다.', 'e');
             return;
@@ -358,7 +374,7 @@ const handleUpdate = () => {
             projctEnd: selectedProject.value.PROJCTEND || null,
             projctDes: selectedProject.value.PROJCTDES || null,
             projctUmb: user.value.name,
-        originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
+            originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value,
         }).then(res => {
             if (res.status === 200) {
                 toastStore.onToast('수정이 완료 되었습니다.', 's');