localhost-front/src/components/list/ProjectCardList.vue

<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"
                    v-model="selectedProject.PROJCTCOL"
                />

                <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 } 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;

        originalColor.value = post.PROJCTCOL;
        selectedProject.value = { ...post };
    };

    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 = () => {

        console.log(selectedProject.value.PROJCTCOL)
        console.log(originalColor.value)

        $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>