From e81127ee8a9854620a2fb144a4c85cf3ba8823dc Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 17 Feb 2025 15:07:10 +0900
Subject: [PATCH] =?UTF-8?q?log,=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue     | 116 ++++++++++++++-----
 src/components/list/ProjectCardList.vue | 145 +++++++++++++++++++++---
 2 files changed, 216 insertions(+), 45 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 65cef5b..d90ba07 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -29,44 +29,98 @@
                     <i class="bx bxs-map"></i>
                     <div class="ms-2">주소</div>
                     <div class="ms-12">{{ address }}</div>
-                    <button type="button" class="btn btn-info ms-auto">log</button>
+                    <button type="button" class="btn ms-auto text-white zindex-5" :style="`background-color: ${projctCol} !important;`" @click="openModal">log</button>
                 </div>
             </div>
         </div>
     </div>
+    <CenterModal :display="isModalOpen" @close="closeModal">
+        <template #title> Log </template>
+        <template #body>
+            <div class="ms-4 mt-2" v-if="logData">
+                <p class="mb-1">{{ logData.createDate }}</p>
+                <strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
+            </div>
+
+            <div class="log-item" v-if="logData?.updateDate">
+                <div class="d-flex align-items-center">
+                    <i class="bx bx-edit me-2"></i>
+                    <strong>수정 정보</strong>
+                </div>
+                <div class="ms-4 mt-2">
+                    <p class="mb-1">{{ logData.updateDate }}</p>
+                    <p class="mb-0 text-muted">[{{ logData.updater }}] 프로젝트 수정</p>
+                </div>
+            </div>
+
+        </template>
+        <template #footer>
+            <button type="button" class="btn btn-secondary" @click="closeModal">닫기</button>
+        </template>
+    </CenterModal>
 </template>
 
 <script setup>
-    import { computed, defineProps } from 'vue';
-    import UserList from '../user/UserList.vue';
+import { defineProps, ref } from 'vue';
+import UserList from '@c/user/UserList.vue';
+import CenterModal from '../modal/CenterModal.vue';
+import $api from '@api';
 
-    // Props 정의
-    const props = defineProps({
-        title: {
-            type: String,
-            required: true,
-        },
-        strdate: {
-            type: String,
-            required: true,
-        },
-        enddate: {
-            type: String,
-            required: true,
-            default: "",
-        },
-        description: {
-            type: String,
-            required: false,
-        },
-        address: {
-            type: String,
-            required: true,
-        },
-        projctSeq: {
-            type: Number,
-            required: false
-        },
-    });
+// Props 정의
+const props = defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    strdate: {
+        type: String,
+        required: true,
+    },
+    enddate: {
+        type: String,
+        required: true,
+        default: "",
+    },
+    description: {
+        type: String,
+        required: false,
+    },
+    address: {
+        type: String,
+        required: true,
+    },
+    projctSeq: {
+        type: Number,
+        required: false
+    },
+    projctCol: {
+        type: String,
+        required: false
+    },
+});
+
+defineEmits(['click']);
+
+const isModalOpen = ref(false);
+const logData = ref(null);
+
+const fetchLogData = async () => {
+    try {
+        const response = await $api.get(`project/log/${props.projctSeq}`);
+        logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
+    } catch (error) {
+        console.error('로그 정보 조회 실패:', error);
+    }
+};
+
+const openModal = async () => {
+    await fetchLogData();
+    isModalOpen.value = true;
+};
+
+const closeModal = () => {
+    isModalOpen.value = false;
+};
 
 </script>
+
diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
index 97bdc8c..f862200 100644
--- a/src/components/list/ProjectCardList.vue
+++ b/src/components/list/ProjectCardList.vue
@@ -4,7 +4,7 @@
             <p class="text-muted mt-4">게시물이 없습니다.</p>
         </div>
 
-        <div v-for="post in projectList" :key="post.PROJCTSEQ">
+        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openModal(post)" class="cursor-pointer">
             <ProjectCard
                 :title="post.PROJCTNAM"
                 :description="post.PROJCTDES"
@@ -12,27 +12,144 @@
                 :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.projctcolor"
+                />
+
+                <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 { ref } from 'vue';
-import ProjectCard from './ProjectCard.vue';
-import { onMounted } from 'vue';
-import $api from '@api';
+    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 '../input/ArrInput.vue';
 
-const projectList = ref([]);
+    const projectList = ref([]);
+    const isModalOpen = ref(false);
 
-onMounted(()=>{
-    getProjectList();
-})
-const getProjectList = () => {
-    $api.get('project/select').then((res) => {
-        projectList.value = res.data.data.projectList;
-    })
-}
+    const nameAlert = ref(false);
+    const selectedProject = ref({
+        PROJCTNAM: '',
+        projctcolor: '',
+        PROJCTSTR: '',
+        PROJCTEND: '',
+        PROJCTZIP: '',
+        PROJCTARR: '',
+        PROJCTDTL: '',
+        PROJCTDES: '',
+        PROJCTCOL: '',
+    });
 
+    const { colorList } = commonApi({
+        loadColor: true,
+        colorType: 'YNP',
+    });
+
+
+    onMounted(() => {
+        getProjectList();
+    });
+
+    // 프로젝트 목록 불러오기
+    const getProjectList = () => {
+        $api.get('project/select').then(res => {
+            projectList.value = res.data.data.projectList;
+        });
+    };
+
+    const openModal = (post) => {
+        isModalOpen.value = true;
+        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);
+    };
 </script>