프로젝트 목록

src/components/list/ProjectCard.vue

@@ -10,13 +10,13 @@
                 <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
                     <i class="bx bx-calendar"></i>
                     <div class="ms-2">날짜</div>
-                    <div class="ms-12">{{ date }}</div>
+                    <div class="ms-12">{{ strdate }} ~ {{ enddate }}</div>
                 </div>
                 <!-- 참여자 -->
                 <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
                     <i class="bx bxs-user"></i>
                     <div class="ms-2">참여자</div>
-                    <UserList class="ms-8 mb-0" />
+                    <UserList :projctSeq="projctSeq" class="ms-8 mb-0" />
                 </div>
                 <!-- 설명 -->
                 <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
@@ -37,7 +37,7 @@
 </template>
 
 <script setup>
-    import { defineProps } from 'vue';
+    import { computed, defineProps } from 'vue';
     import UserList from '../user/UserList.vue';
 
     // Props 정의
@@ -46,10 +46,15 @@
             type: String,
             required: true,
         },
-        date: {
+        strdate: {
             type: String,
             required: true,
         },
+        enddate: {
+            type: String,
+            required: true,
+            default: "",
+        },
         description: {
             type: String,
             required: false,
@@ -58,5 +63,10 @@
             type: String,
             required: true,
         },
+        projctSeq: {
+            type: Number,
+            required: false
+        },
     });
+
 </script>

src/components/list/ProjectCardList.vue

@@ -1,47 +1,38 @@
 <template>
     <div class="mt-4">
-        <div v-if="posts.length === 0" class="text-center">
+        <div v-if="projectList.length === 0" class="text-center">
             <p class="text-muted mt-4">게시물이 없습니다.</p>
         </div>
 
-        <div v-for="post in posts" :key="post.id" @click="goDetail(post.id)">
+        <div v-for="post in projectList" :key="post.PROJCTSEQ">
             <ProjectCard
-                :title="post.title"
+                :title="post.PROJCTNAM"
-                :description="post.description"
+                :description="post.PROJCTDES"
-                :date="post.date"
+                :strdate="post.PROJCTSTR"
-                :address="post.address"
+                :enddate="post.PROJCTEND"
+                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
+                :projctSeq="post.PROJCTSEQ"
             />
         </div>
+
     </div>
 </template>
 
 <script setup>
-import { ref, defineEmits } from 'vue';
+import { ref } from 'vue';
 import ProjectCard from './ProjectCard.vue';
+import { onMounted } from 'vue';
+import $api from '@api';
 
-// 테스트용 데이터
+const projectList = ref([]);
-const posts = ref([
-    {
-        id: 1,
-        title: 'Vue 3 Composition API 소개',
-        description: 'Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다.',
-        date: '2025-02-10',
-        address: '서울특별시 구로구'
-    },
-    {
-        id: 2,
-        title: 'Spring Boot로 REST API 만들기',
-        description: 'Spring Boot를 사용하여 간단한 RESTful API를 구현하는 방법을 다룹니다.',
-        date: '2025-02-09',
-        address: '서울특별시 강남구'
-    }
-]);
 
-const emit = defineEmits(['click']);
+onMounted(()=>{
-
+    getProjectList();
-// 상세 페이지 이동
+})
-const goDetail = (id) => {
+const getProjectList = () => {
-    emit('click', id);
+    $api.get('project/select').then((res) => {
-};
+        projectList.value = res.data.data.projectList;
+    })
+}
 
 </script>

src/components/projectlist/ProjectList.vue

@@ -11,9 +11,9 @@
                     name="name"
                     :is-essential="true"
                     :is-alert="nameAlert"
-                    @update:alert="nameAlert = $event"
+                    @update:modelValue="name = $event"
-                    :value="name"
                 />
+
                 <FormSelect
                     title="컬러"
                     name="color"
@@ -26,29 +26,23 @@
 
                 <FormInput
                     title="시작 일"
-                    :type="'date'"
+                    type="date"
                     name="startDay"
-                    v-model="today"
+                    v-model="startDay"
                     :is-essential="true"
-                    :is-alert="startDayAlert"
-                    @update:data="startDay = $event"
-                    @update:alert="startDayAlert = $event"
-                    :value="startDay"
                 />
 
                 <FormInput
                     title="종료 일"
                     name="endDay"
                     :type="'date'"
-                    @update:data="endDay = $event"
+                    @update:modelValue="endDay = $event"
-                    :value="endDay"
                 />
 
                 <FormInput
                     title="설명"
                     name="description"
-                    @update:data="description = $event"
+                    @update:modelValue="description = $event"
-                    :value="description"
                 />
 
                 <ArrInput
@@ -59,7 +53,6 @@
                     :is-alert="addressAlert"
                     @update:data="handleAddressUpdate"
                     @update:alert="addressAlert = $event"
-                    :value="address"
                 />
             </template>
             <template #footer>
@@ -76,33 +69,37 @@
     import ProjectCardList from '@c/list/ProjectCardList.vue';
     import CategoryBtn from '@c/category/CategoryBtn.vue';
     import commonApi from '@/common/commonApi';
-    import { inject, ref } from 'vue';
+    import { inject, onMounted, ref } from 'vue';
     import WriteBtn from '../button/WriteBtn.vue';
     import CenterModal from '../modal/CenterModal.vue';
     import FormSelect from '../input/FormSelect.vue';
     import FormInput from '../input/FormInput.vue';
     import ArrInput from '../input/ArrInput.vue';
     import { useToastStore } from '@s/toastStore';
+    import $api from '@api';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
 
     const dayjs = inject('dayjs');
 
     const today = dayjs().format('YYYY-MM-DD');
 
     const toastStore = useToastStore();
+    const userStore = useUserInfoStore();
+
+    const user = ref(null);
 
     const name = ref('');
     const color = ref('');
     const address = ref('');
     const detailAddress = ref('');
     const postcode = ref('');
-    const startDay = ref('');
+    const startDay = ref(today);
     const endDay = ref('');
     const description = ref('');
 
     const isModalOpen = ref(false);
     const nameAlert = ref(false);
     const addressAlert = ref(false);
-    const startDayAlert = ref(false);
 
     const openModal = () => {
         isModalOpen.value = true;
@@ -128,26 +125,37 @@
         postcode.value = addressData.postcode;
     };
 
-    const handleSubmit = () => {
+
-        addressAlert.value = address.value.trim() === '';
+    onMounted(async () => {
+        await userStore.userInfo(); // 로그인한 사용자 정보
+        user.value = userStore.user;
+    });
+
+    const handleSubmit = async () => {
+
         nameAlert.value = name.value.trim() === '';
-        startDayAlert.value = startDay.value.trim() === '';
+        addressAlert.value = address.value.trim() === '';
+
+        if (nameAlert.value ||  addressAlert.value ) {
+            return;
+        }
 
         $api.post('project/insert', {
             projctNam: name.value,
-            projctCol: color.value,
+            projctCol: String(color.value),
-            projctCdt: startDay.value,
+            projctStr: startDay.value,
-            projctEdt: endDay.value,
+            projctEnd: endDay.value || null,
-            projctDes: description.value,
+            projctDes: description.value || null,
             projctAdd: address.value,
             projctDtl: detailAddress.value,
             projctZip: postcode.value,
-
+            projctCmb: user.value.name,
         })
         .then(res => {
             if (res.status === 200) {
                 toastStore.onToast('프로젝트가 등록되었습니다.', 's');
                 closeModal();
+                location.reload();
             }
         })
     };