From 7e484c12be8a24908d3727a3f57cc545c2f3d763 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Wed, 26 Feb 2025 19:09:04 +0900
Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue        |   4 +-
 src/components/modal/CenterModal.vue       |  15 +-
 src/components/projectlist/ProjectList.vue | 542 +++++++++++----------
 3 files changed, 293 insertions(+), 268 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 8e1b6c4..d0b2e9a 100644
--- a/src/components/list/ProjectCard.vue
+++ b/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>
diff --git a/src/components/modal/CenterModal.vue b/src/components/modal/CenterModal.vue
index c0064a1..35e6ca6 100644
--- a/src/components/modal/CenterModal.vue
+++ b/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,18 +20,27 @@
 </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 = () => {
-    emit('close' , false);
+    if (prop.create) {
+        emit('reset');
+    }
+
+    emit('close', false);
 };
 </script>
 
@@ -45,3 +53,4 @@ const closeModal = () => {
 
 
 
+
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index 0a8f549..feb80ff 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -1,5 +1,5 @@
 <template>
-    <SearchBar @update:data="search"/>
+    <SearchBar @update:data="search" />
     <div class="d-flex align-items-center">
         <CategoryBtn :lists="yearCategory" @update:data="selectedCategory = $event" />
         <WriteBtn class="mt-2 ms-auto" @click="openCreateModal" />
@@ -26,63 +26,70 @@
     </div>
 
     <!-- 등록 모달 -->
-    <CenterModal :display="isCreateModalOpen" @close="closeCreateModal">
-        <template #title> 프로젝트 등록 </template>
-        <template #body>
-            <FormInput
-                title="이름"
-                name="name"
-                :is-essential="true"
-                :is-alert="nameAlert"
-                @update:modelValue="name = $event"
-            />
+    <form @reset.prevent="formReset">
+        <CenterModal :display="isCreateModalOpen" @close="closeCreateModal" :create="true" @reset="formReset">
+            <template #title> 프로젝트 등록 </template>
+            <template #body>
+                <FormInput
+                    title="이름"
+                    name="name"
+                    :is-essential="true"
+                    :is-alert="nameAlert"
+                    :modelValue="name"
+                    @update:modelValue="name = $event"
+                    @update:alert="nameAlert = $event"
+                />
 
-            <FormSelect
-                title="컬러"
-                name="color"
-                :is-essential="true"
-                :is-label="true"
-                :is-common="true"
-                :data="colorList"
-                @update:data="color = $event"
-            />
+                <FormSelect
+                    title="컬러"
+                    name="color"
+                    :is-essential="true"
+                    :is-label="true"
+                    :is-common="true"
+                    :data="colorList"
+                    @update:data="color = $event"
+                />
 
-            <FormInput
-                title="시작 일"
-                type="date"
-                name="startDay"
-                v-model="startDay"
-                :is-essential="true"
-            />
+                <FormInput
+                    title="시작 일"
+                    name="startDay"
+                    :type="'date'"
+                    :is-essential="true"
+                    :modelValue="startDay"
+                    v-model="startDay"
+                />
 
-            <FormInput
-                title="종료 일"
-                name="endDay"
-                :type="'date'"
-                @update:modelValue="endDay = $event"
-            />
+                <FormInput
+                    title="종료 일"
+                    :type="'date'"
+                    name="endDay"
+                    :modelValue="endDay"
+                    @update:modelValue="endDay = $event"
+                />
 
-            <FormInput
-                title="설명"
-                name="description"
-                @update:modelValue="description = $event"
-            />
+                <FormInput
+                    title="설명"
+                    name="description"
+                    :modelValue="description"
+                    @update:modelValue="description = $event"
+                />
 
-            <ArrInput
-                title="주소"
-                name="address"
-                :isEssential="true"
-                :is-row="true"
-                :is-alert="addressAlert"
-                @update:data="handleAddressUpdate"
-                @update:alert="addressAlert = $event"
-            />
-        </template>
-        <template #footer>
-            <BackButton @click="closeCreateModal" />
-            <SaveButton @click="handleCreate" />
-        </template>
-    </CenterModal>
+                <ArrInput
+                    title="주소"
+                    name="address"
+                    :isEssential="true"
+                    :is-row="true"
+                    :is-alert="addressAlert"
+                    @update:data="handleAddressUpdate"
+                    @update:alert="addressAlert = $event"
+                />
+            </template>
+            <template #footer>
+                <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,228 +157,236 @@
 </template>
 
 <script setup>
-import { computed, inject, ref, watch, onMounted } from 'vue';
-import SearchBar from '@c/search/SearchBar.vue';
-import ProjectCard from '@c/list/ProjectCard.vue';
-import CategoryBtn from '@c/category/CategoryBtn.vue';
-import WriteBtn from '@c/button/WriteBtn.vue';
-import CenterModal from '@c/modal/CenterModal.vue';
-import FormSelect from '@c/input/FormSelect.vue';
-import FormInput from '@c/input/FormInput.vue';
-import ArrInput from '@c/input/ArrInput.vue';
-import commonApi from '@/common/commonApi';
-import { useToastStore } from '@s/toastStore';
-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 { 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';
+    import WriteBtn from '@c/button/WriteBtn.vue';
+    import CenterModal from '@c/modal/CenterModal.vue';
+    import FormSelect from '@c/input/FormSelect.vue';
+    import FormInput from '@c/input/FormInput.vue';
+    import ArrInput from '@c/input/ArrInput.vue';
+    import commonApi from '@/common/commonApi';
+    import { useToastStore } from '@s/toastStore';
+    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';
 
-const dayjs = inject('dayjs');
-const today = dayjs().format('YYYY-MM-DD');
-const toastStore = useToastStore();
-const userStore = useUserInfoStore();
-const projectStore = useProjectStore();
+    const toastStore = useToastStore();
+    const userStore = useUserInfoStore();
+    const projectStore = useProjectStore();
 
-// 상태 관리
-const user = ref(null);
-const selectedCategory = ref(null);
-const searchText = ref('');
+    // 상태 관리
+    const user = ref(null);
+    const selectedCategory = ref(null);
+    const searchText = ref('');
 
-// 등록 모달 상태
-const isCreateModalOpen = ref(false);
-const name = ref('');
-const color = ref('');
-const address = ref('');
-const detailAddress = ref('');
-const postcode = ref('');
-const startDay = ref(today);
-const endDay = ref('');
-const description = ref('');
-const nameAlert = ref(false);
-const addressAlert = ref(false);
+    // dayjs 인스턴스 가져오기
+    const dayjs = inject('dayjs');
 
-// 수정 모달 상태
-const isEditModalOpen = ref(false);
-const originalColor = ref('');
-const selectedProject = ref({
-    PROJCTSEQ: '',
-    PROJCTNAM: '',
-    PROJCTSTR: '',
-    PROJCTEND: '',
-    PROJCTZIP: '',
-    PROJCTARR: '',
-    PROJCTDTL: '',
-    PROJCTDES: '',
-    PROJCTCOL: '',
-    projctcolor: '',
-});
+    // 오늘 날짜를 YYYY-MM-DD 형식으로 변환
+    const today = dayjs().format('YYYY-MM-DD');
 
-// API 호출
-const { yearCategory, colorList } = commonApi({
-    loadColor: true,
-    colorType: 'YNP',
-    loadYearCategory: true,
-});
+    // 등록 모달 상태
+    const isCreateModalOpen = ref(false);
+    const name = ref('');
+    const color = ref('');
+    const address = ref('');
+    const detailAddress = ref('');
+    const postcode = ref('');
+    const startDay = ref(today);
+    const endDay = ref('');
+    const description = ref('');
+    const nameAlert = ref(false);
+    const addressAlert = ref(false);
 
-// 검색 처리
-const search = async (searchKeyword) => {
-    searchText.value = searchKeyword.trim();
-    await getProjectList();
-};
-
-const selectedYear = computed(() => {
-    if (!selectedCategory.value || selectedCategory.value === 900101) {
-        return null;
-    }
-    // 선택된 category 값 label 값으로 변환
-    return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null;
-});
-
-// 프로젝트 목록 조회
-const getProjectList = async () => {
-    await projectStore.getProjectList(searchText.value, selectedYear.value);
-};
-
-// 카테고리 변경 감지
-watch(selectedCategory, async () => {
-    await getProjectList();
-});
-
-// 등록 모달 관리
-const openCreateModal = () => {
-    isCreateModalOpen.value = true;
-};
-
-const closeCreateModal = () => {
-    isCreateModalOpen.value = false;
-    resetCreateForm();
-};
-
-const resetCreateForm = () => {
-    name.value = '';
-    color.value = '';
-    address.value = '';
-    detailAddress.value = '';
-    postcode.value = '';
-    startDay.value = today;
-    endDay.value = '';
-    description.value = '';
-    nameAlert.value = false;
-    addressAlert.value = false;
-};
-
-// 등록 :: 주소 업데이트 핸들러
-const handleAddressUpdate = addressData => {
-    address.value = addressData.address;
-    detailAddress.value = addressData.detailAddress;
-    postcode.value = addressData.postcode;
-};
-
-// 프로젝트 등록
-const handleCreate = async () => {
-    nameAlert.value = name.value.trim() === '';
-    addressAlert.value = address.value.trim() === '';
-
-    if (nameAlert.value || addressAlert.value) {
-        return;
-    }
-
-    $api.post('project/insert', {
-        projctNam: name.value,
-        projctCol: color.value,
-        projctStr: startDay.value,
-        projctEnd: endDay.value || null,
-        projctDes: description.value || null,
-        projctArr: address.value,
-        projctDtl: detailAddress.value,
-        projctZip: postcode.value,
-        projctCmb: user.value.name,
-    })
-    .then(res => {
-        if (res.status === 200) {
-            toastStore.onToast('프로젝트가 등록되었습니다.', 's');
-            closeCreateModal();
-            getProjectList();
-        }
+    // 수정 모달 상태
+    const isEditModalOpen = ref(false);
+    const originalColor = ref('');
+    const selectedProject = ref({
+        PROJCTSEQ: '',
+        PROJCTNAM: '',
+        PROJCTSTR: '',
+        PROJCTEND: '',
+        PROJCTZIP: '',
+        PROJCTARR: '',
+        PROJCTDTL: '',
+        PROJCTDES: '',
+        PROJCTCOL: '',
+        projctcolor: '',
     });
-};
 
-// 수정 모달 관리
-const openEditModal = (post) => {
-    isEditModalOpen.value = true;
-    selectedProject.value = { ...post };
-    originalColor.value = post.PROJCTCOL;
-};
+    // API 호출
+    const { yearCategory, colorList } = commonApi({
+        loadColor: true,
+        colorType: 'YNP',
+        loadYearCategory: true,
+    });
 
-const closeEditModal = () => {
-    isEditModalOpen.value = false;
-};
-
-// 기존 컬러 + 사용 가능 한 컬러
-const allColors = computed(() => {
-    const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
-    return [existingColor, ...colorList.value];
-});
-
-// 변경된 내용 있는지 확인
-const hasChanges = computed(() => {
-    const original = projectStore.projectList.find(p => p.PROJCTSEQ === selectedProject.value.PROJCTSEQ);
-    if (!original) return false;
-
-    return (
-        original.PROJCTNAM !== selectedProject.value.PROJCTNAM ||
-        original.PROJCTCOL !== selectedProject.value.PROJCTCOL ||
-        original.PROJCTARR !== selectedProject.value.PROJCTARR ||
-        original.PROJCTDTL !== selectedProject.value.PROJCTDTL ||
-        original.PROJCTZIP !== selectedProject.value.PROJCTZIP ||
-        original.PROJCTSTR !== selectedProject.value.PROJCTSTR ||
-        original.PROJCTEND !== selectedProject.value.PROJCTEND ||
-        original.PROJCTDES !== selectedProject.value.PROJCTDES
-    );
-});
-
-// 수정 :: 주소
-const updateAddress = (addressData) => {
-    selectedProject.value = {
-        ...selectedProject.value,
-        PROJCTZIP: addressData.postcode,
-        PROJCTARR: addressData.address,
-        PROJCTDTL: addressData.detailAddress
+    // 검색 처리
+    const search = async searchKeyword => {
+        searchText.value = searchKeyword.trim();
+        await getProjectList();
     };
-};
 
-// 프로젝트 수정
-const handleUpdate = () => {
-    if (!hasChanges.value) {
-        toastStore.onToast('변경된 내용이 없습니다.', 'e');
-        return;
+    const selectedYear = computed(() => {
+        if (!selectedCategory.value || selectedCategory.value === 900101) {
+            return null;
+        }
+        // 선택된 category 값 label 값으로 변환
+        return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null;
+    });
+
+    // 프로젝트 목록 조회
+    const getProjectList = async () => {
+        await projectStore.getProjectList(searchText.value, selectedYear.value);
+    };
+
+    // 카테고리 변경 감지
+    watch(selectedCategory, async () => {
+        await getProjectList();
+    });
+
+    // 등록 모달 관리
+    const openCreateModal = () => {
+        isCreateModalOpen.value = true;
+    };
+
+    const closeCreateModal = () => {
+        isCreateModalOpen.value = false;
+    };
+
+    const formReset = () => {
+        name.value = '';
+        color.value = '';
+        address.value = '';
+        detailAddress.value = '';
+        postcode.value = '';
+        startDay.value = today;
+        endDay.value = '';
+        description.value = '';
+        nameAlert.value = false;
+        addressAlert.value = false;
     }
 
-    $api.patch('project/update', {
-        projctSeq: selectedProject.value.PROJCTSEQ,
-        projctNam: selectedProject.value.PROJCTNAM,
-        projctCol: selectedProject.value.PROJCTCOL,
-        projctArr: selectedProject.value.PROJCTARR,
-        projctDtl: selectedProject.value.PROJCTDTL,
-        projctZip: selectedProject.value.PROJCTZIP,
-        projctStr: selectedProject.value.PROJCTSTR,
-        projctEnd: selectedProject.value.PROJCTEND || null,
-        projctDes: selectedProject.value.PROJCTDES || null,
-        projctUmb: user.value.name,
-        originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
-    }).then(res => {
-        if (res.status === 200) {
-            toastStore.onToast('수정이 완료 되었습니다.', 's');
-            closeEditModal();
-            location.reload();
-        }
-    });
-};
+    // 등록 :: 주소 업데이트 핸들러
+    const handleAddressUpdate = addressData => {
+        address.value = addressData.address;
+        detailAddress.value = addressData.detailAddress;
+        postcode.value = addressData.postcode;
+    };
 
-onMounted(async () => {
-    await getProjectList();
-    await userStore.userInfo();
-    user.value = userStore.user;
-});
+    // 프로젝트 등록
+    const handleCreate = async () => {
+        nameAlert.value = name.value.trim() === '';
+        addressAlert.value = address.value.trim() === '';
+
+        if (nameAlert.value || addressAlert.value) {
+            return;
+        }
+
+        $api.post('project/insert', {
+            projctNam: name.value,
+            projctCol: color.value,
+            projctStr: startDay.value,
+            projctEnd: endDay.value || null,
+            projctDes: description.value || null,
+            projctArr: address.value,
+            projctDtl: detailAddress.value,
+            projctZip: postcode.value,
+            projctCmb: user.value.name,
+        }).then(res => {
+            if (res.status === 200) {
+                toastStore.onToast('프로젝트가 등록되었습니다.', 's');
+                closeCreateModal();
+                getProjectList();
+            }
+        });
+    };
+
+    // 수정 모달 관리
+    const openEditModal = post => {
+        isEditModalOpen.value = true;
+        selectedProject.value = { ...post };
+        originalColor.value = post.PROJCTCOL;
+    };
+
+    const closeEditModal = () => {
+        isEditModalOpen.value = false;
+    };
+
+    // 기존 컬러 + 사용 가능 한 컬러
+    const allColors = computed(() => {
+        const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
+        return [existingColor, ...colorList.value];
+    });
+
+    // 변경된 내용 있는지 확인
+    const hasChanges = computed(() => {
+        const original = projectStore.projectList.find(p => p.PROJCTSEQ === selectedProject.value.PROJCTSEQ);
+        if (!original) return false;
+
+        return (
+            original.PROJCTNAM !== selectedProject.value.PROJCTNAM ||
+            original.PROJCTCOL !== selectedProject.value.PROJCTCOL ||
+            original.PROJCTARR !== selectedProject.value.PROJCTARR ||
+            original.PROJCTDTL !== selectedProject.value.PROJCTDTL ||
+            original.PROJCTZIP !== selectedProject.value.PROJCTZIP ||
+            original.PROJCTSTR !== selectedProject.value.PROJCTSTR ||
+            original.PROJCTEND !== selectedProject.value.PROJCTEND ||
+            original.PROJCTDES !== selectedProject.value.PROJCTDES
+        );
+    });
+
+    // 수정 :: 주소
+    const updateAddress = addressData => {
+        selectedProject.value = {
+            ...selectedProject.value,
+            PROJCTZIP: addressData.postcode,
+            PROJCTARR: addressData.address,
+            PROJCTDTL: addressData.detailAddress,
+        };
+    };
+
+    // 프로젝트 수정
+const handleUpdate = () => {
+        nameAlert.value = selectedProject.value.PROJCTNAM.trim() === '';
+
+        if (nameAlert.value) {
+            return;
+        }
+
+        if (!hasChanges.value) {
+            toastStore.onToast('변경된 내용이 없습니다.', 'e');
+            return;
+        }
+
+        $api.patch('project/update', {
+            projctSeq: selectedProject.value.PROJCTSEQ,
+            projctNam: selectedProject.value.PROJCTNAM,
+            projctCol: selectedProject.value.PROJCTCOL,
+            projctArr: selectedProject.value.PROJCTARR,
+            projctDtl: selectedProject.value.PROJCTDTL,
+            projctZip: selectedProject.value.PROJCTZIP,
+            projctStr: selectedProject.value.PROJCTSTR,
+            projctEnd: selectedProject.value.PROJCTEND || null,
+            projctDes: selectedProject.value.PROJCTDES || null,
+            projctUmb: user.value.name,
+            originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value,
+        }).then(res => {
+            if (res.status === 200) {
+                toastStore.onToast('수정이 완료 되었습니다.', 's');
+                closeEditModal();
+                location.reload();
+            }
+        });
+    };
+
+    onMounted(async () => {
+        await getProjectList();
+        await userStore.userInfo();
+        user.value = userStore.user;
+    });
 </script>