From 4175ecd290e07bd514b905403aaa1f69701b8d24 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 20 Feb 2025 15:16:50 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=80=EC=83=89=20,=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EB=B3=84=20=EB=82=98=EC=98=A4=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCardList.vue    | 192 ---------
 src/components/projectlist/ProjectList.vue | 477 +++++++++++++++------
 2 files changed, 338 insertions(+), 331 deletions(-)
 delete mode 100644 src/components/list/ProjectCardList.vue

diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
deleted file mode 100644
index 9b6094b..0000000
--- a/src/components/list/ProjectCardList.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-    <div class="mt-4">
-        <div v-if="projectList.length === 0" class="text-center">
-            <p class="text-muted mt-4">게시물이 없습니다.</p>
-        </div>
-
-        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openModal(post)" class="cursor-pointer">
-            <ProjectCard
-                :title="post.PROJCTNAM"
-                :description="post.PROJCTDES"
-                :strdate="post.PROJCTSTR"
-                :enddate="post.PROJCTEND"
-                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
-                :projctSeq="post.PROJCTSEQ"
-                :projctCol="post.projctcolor"
-            />
-        </div>
-
-        <CenterModal :display="isModalOpen" @close="closeModal">
-            <template #title> 프로젝트 수정 </template>
-            <template #body>
-                <FormInput
-                    title="이름"
-                    name="name"
-                    :is-essential="true"
-                    :is-alert="nameAlert"
-                    v-model="selectedProject.PROJCTNAM"
-                />
-
-                <FormSelect
-                    title="컬러"
-                    name="color"
-                    :is-essential="true"
-                    :is-label="true"
-                    :is-common="true"
-                    :data="allColors"
-                    :value="selectedProject.PROJCTCOL"
-                    @update:data="selectedProject.PROJCTCOL = $event"
-                />
-
-                <FormInput
-                    title="시작일"
-                    type="date"
-                    name="startDay"
-                    v-model="selectedProject.PROJCTSTR"
-                    :is-essential="true"
-                />
-
-                <FormInput
-                    title="종료일"
-                    type="date"
-                    name="endDay"
-                    v-model="selectedProject.PROJCTEND"
-                />
-
-                <FormInput
-                    title="설명"
-                    name="description"
-                    v-model="selectedProject.PROJCTDES"
-                />
-
-                <ArrInput
-                    title="주소"
-                    name="address"
-                    :is-essential="true"
-                    :is-row="true"
-                    v-model="selectedProject"
-                    @update:data="updateAddress"
-                />
-
-            </template>
-            <template #footer>
-                <button class="btn btn-secondary" @click="closeModal">Close</button>
-                <button class="btn btn-primary" @click="handleSubmit">Save</button>
-            </template>
-        </CenterModal>
-    </div>
-</template>
-
-<script setup>
-    import { computed, ref, watch } from 'vue';
-    import ProjectCard from './ProjectCard.vue';
-    import { onMounted } from 'vue';
-    import $api from '@api';
-    import CenterModal from '@c/modal/CenterModal.vue';
-    import FormInput from '@c/input/FormInput.vue';
-    import FormSelect from '@c/input/FormSelect.vue';
-    import commonApi from '@/common/commonApi';
-    import ArrInput from '@c/input/ArrInput.vue';
-    import { useUserInfoStore } from '@/stores/useUserInfoStore';
-    import { useToastStore } from '@s/toastStore';
-
-    const toastStore = useToastStore();
-
-    const projectList = ref([]);
-    const isModalOpen = ref(false);
-    let originalColor = ref('');
-
-    const userStore = useUserInfoStore();
-    const user = ref(null);
-
-    const nameAlert = ref(false);
-    const selectedProject = ref({
-        PROJCTSEQ:'',
-        PROJCTNAM: '',
-        PROJCTSTR: '',
-        PROJCTEND: '',
-        PROJCTZIP: '',
-        PROJCTARR: '',
-        PROJCTDTL: '',
-        PROJCTDES: '',
-        PROJCTCOL: '',
-        projctcolor:'',
-    });
-
-    const { colorList } = commonApi({
-        loadColor: true,
-        colorType: 'YNP',
-    });
-
-
-    onMounted(async () => {
-        getProjectList();
-
-        await userStore.userInfo(); // 로그인한 사용자 정보
-        user.value = userStore.user;
-    });
-
-    // 프로젝트 목록 불러오기
-    const getProjectList = () => {
-        $api.get('project/select').then(res => {
-            projectList.value = res.data.data.projectList;
-        });
-    };
-
-
-    const openModal = (post) => {
-        isModalOpen.value = true;
-
-        // 여기에 기존 값 넣기
-        selectedProject.value = { ...post };
-
-        // 기존 색상 넣어두기
-        originalColor.value = post.PROJCTCOL;
-    };
-
-    const closeModal = () => {
-        isModalOpen.value = false;
-    };
-
-    // 현재 프로젝트 색상 + 사용하지 않은 색상
-    const allColors = computed(() => {
-        // 기존 색상 추가
-        const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
-
-        // colorList에 기존 색상을 추가
-        return [existingColor, ...colorList.value];
-    });
-
-    const updateAddress = (addressData) => {
-        selectedProject.value = {
-            ...selectedProject.value,
-            PROJCTZIP: addressData.postcode,
-            PROJCTARR: addressData.address,
-            PROJCTDTL: addressData.detailAddress
-        };
-};
-
-
-    const handleSubmit = () => {
-
-        $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,
-            projctUmb: user.value.name,
-            originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
-        }).then(res => {
-            if (res.status === 200) {
-                toastStore.onToast('수정이 완료 되었습니다.', 's');
-                closeModal();
-                location.reload();
-            }
-        })
-    };
-</script>
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index 812fc9c..14675d7 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -1,163 +1,362 @@
 <template>
-    <SearchBar />
+    <SearchBar @update:data="search"/>
     <div class="d-flex align-items-center">
-        <CategoryBtn :lists="yearCategory" v-model:selectedCategory="selectedCategory" />
-        <WriteBtn class="mt-2 ms-auto" @click="openModal" />
-        <CenterModal :display="isModalOpen" @close="closeModal">
-            <template #title> 프로젝트 등록 </template>
-            <template #body>
-                <FormInput
-                    title="이름"
-                    name="name"
-                    :is-essential="true"
-                    :is-alert="nameAlert"
-                    @update:modelValue="name = $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="endDay"
-                    :type="'date'"
-                    @update:modelValue="endDay = $event"
-                />
-
-                <FormInput
-                    title="설명"
-                    name="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>
-                <button class="btn btn-secondary" @click="closeModal">Close</button>
-                <button class="btn btn-primary" @click="handleSubmit">Save</button>
-            </template>
-        </CenterModal>
+        <CategoryBtn :lists="yearCategory" @update:data="selectedCategory = $event" />
+        <WriteBtn class="mt-2 ms-auto" @click="openCreateModal" />
     </div>
-    <ProjectCardList :category="selectedCategory" />
+
+    <!-- 프로젝트 목록 -->
+    <div class="mt-4">
+        <div v-if="projectList.length === 0" class="text-center">
+            <p class="text-muted mt-4">게시물이 없습니다.</p>
+        </div>
+
+        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openEditModal(post)" class="cursor-pointer">
+            <ProjectCard
+                :title="post.PROJCTNAM"
+                :description="post.PROJCTDES"
+                :strdate="post.PROJCTSTR"
+                :enddate="post.PROJCTEND"
+                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
+                :projctSeq="post.PROJCTSEQ"
+                :projctCol="post.projctcolor"
+            />
+        </div>
+    </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"
+            />
+
+            <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="endDay"
+                :type="'date'"
+                @update:modelValue="endDay = $event"
+            />
+
+            <FormInput
+                title="설명"
+                name="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>
+
+    <!-- 수정 모달 -->
+    <CenterModal :display="isEditModalOpen" @close="closeEditModal">
+        <template #title> 프로젝트 수정 </template>
+        <template #body>
+            <FormInput
+                title="이름"
+                name="name"
+                :is-essential="true"
+                :is-alert="nameAlert"
+                :modelValue="selectedProject.PROJCTNAM"
+                @update:modelValue="selectedProject.PROJCTNAM = $event"
+            />
+
+            <FormSelect
+                title="컬러"
+                name="color"
+                :is-essential="true"
+                :is-label="true"
+                :is-common="true"
+                :data="allColors"
+                :value="selectedProject.PROJCTCOL"
+                @update:data="selectedProject.PROJCTCOL = $event"
+            />
+
+            <FormInput
+                title="시작일"
+                type="date"
+                name="startDay"
+                :is-essential="true"
+                :modelValue="selectedProject.PROJCTSTR"
+                @update:modelValue="selectedProject.PROJCTSTR = $event"
+            />
+
+            <FormInput
+                title="종료일"
+                type="date"
+                name="endDay"
+                :modelValue="selectedProject.PROJCTEND"
+                @update:modelValue="selectedProject.PROJCTEND = $event"
+            />
+
+            <FormInput
+                title="설명"
+                name="description"
+                :modelValue="selectedProject.PROJCTDES"
+                @update:modelValue="selectedProject.PROJCTDES = $event"
+            />
+
+            <ArrInput
+                title="주소"
+                name="address"
+                :is-essential="true"
+                :is-row="true"
+                :modelValue="selectedProject"
+                @update:data="updateAddress"
+            />
+        </template>
+        <template #footer>
+            <BackButton @click="closeEditModal" />
+            <SaveButton @click="handleUpdate" />
+        </template>
+    </CenterModal>
 </template>
 
 <script setup>
-    import SearchBar from '@c/search/SearchBar.vue';
-    import ProjectCardList from '@c/list/ProjectCardList.vue';
-    import CategoryBtn from '@c/category/CategoryBtn.vue';
-    import commonApi from '@/common/commonApi';
-    import { inject, onMounted, ref } from '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 { useToastStore } from '@s/toastStore';
-    import $api from '@api';
-    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+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 $api from '@api';
+import SaveButton from '@c/button/SaveBtn.vue';
+import BackButton from '@c/button/BackBtn.vue'
 
-    const dayjs = inject('dayjs');
+const dayjs = inject('dayjs');
+const today = dayjs().format('YYYY-MM-DD');
+const toastStore = useToastStore();
+const userStore = useUserInfoStore();
 
-    const today = dayjs().format('YYYY-MM-DD');
+// 상태 관리
+const user = ref(null);
+const projectList = ref([]);
+const filteredProjects = ref([]);
+const selectedCategory = ref(null);
+const searchText = ref('');
 
-    const toastStore = useToastStore();
-    const userStore = useUserInfoStore();
+// 등록 모달 상태
+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 user = ref(null);
+// 수정 모달 상태
+const isEditModalOpen = ref(false);
+const originalColor = ref('');
+const selectedProject = ref({
+    PROJCTSEQ: '',
+    PROJCTNAM: '',
+    PROJCTSTR: '',
+    PROJCTEND: '',
+    PROJCTZIP: '',
+    PROJCTARR: '',
+    PROJCTDTL: '',
+    PROJCTDES: '',
+    PROJCTCOL: '',
+    projctcolor: '',
+});
 
-    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('');
+// API 호출
+const { yearCategory, colorList } = commonApi({
+    loadColor: true,
+    colorType: 'YNP',
+    loadYearCategory: true,
+});
 
-    const isModalOpen = ref(false);
-    const nameAlert = ref(false);
-    const addressAlert = ref(false);
-
-    const openModal = () => {
-        isModalOpen.value = true;
-    };
-
-    const closeModal = () => {
-        isModalOpen.value = false;
-    };
-
-
-    const selectedCategory = ref(null);
-
-    const { yearCategory, colorList } = commonApi({
-        loadColor: true,
-        colorType: 'YNP',
-        loadYearCategory: true,
+// 프로젝트 목록 조회
+const getProjectList = async () => {
+    const res = await $api.get('project/select', {
+        params: {
+            searchKeyword : searchText.value,
+            category : selectedYear.value,
+        },
     });
+    projectList.value = res.data.data.projectList;
+};
 
-    // 주소 업데이트 핸들러
-    const handleAddressUpdate = addressData => {
-        address.value = addressData.address;
-        detailAddress.value = addressData.detailAddress;
-        postcode.value = addressData.postcode;
-    };
+// 검색 처리
+const search = async (searchKeyword) => {
+    searchText.value = searchKeyword.trim();
+    await getProjectList();
+};
+
+const selectedYear = computed(() => {
+    if (!selectedCategory.value || selectedCategory.value === 900101) {
+        return null;
+    }
+    return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null;
+});
 
 
-    onMounted(async () => {
-        await userStore.userInfo(); // 로그인한 사용자 정보
-        user.value = userStore.user;
-    });
+// 카테고리 변경 감지
+watch(selectedCategory, async () => {
+    await getProjectList();
+});
 
-    const handleSubmit = async () => {
+// 등록 모달 관리
+const openCreateModal = () => {
+    isCreateModalOpen.value = true;
+};
 
-        nameAlert.value = name.value.trim() === '';
-        addressAlert.value = address.value.trim() === '';
+const closeCreateModal = () => {
+    isCreateModalOpen.value = false;
+};
 
-        if (nameAlert.value ||  addressAlert.value ) {
-            return;
+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();
+            location.reload();
         }
+    });
+};
 
-        $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');
-                closeModal();
-                location.reload();
-            }
-        })
+// 수정 모달 관리
+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 = projectList.value.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 = () => {
+    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,
+        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>