프로젝트 목록
This commit is contained in:
yoon
parent
bbc8d8b6b9
commit
3047011de8
@ -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>
|
||||
|
||||
@ -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"
|
||||
:description="post.description"
|
||||
:date="post.date"
|
||||
:address="post.address"
|
||||
:title="post.PROJCTNAM"
|
||||
:description="post.PROJCTDES"
|
||||
:strdate="post.PROJCTSTR"
|
||||
: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 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 projectList = ref([]);
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
// 상세 페이지 이동
|
||||
const goDetail = (id) => {
|
||||
emit('click', id);
|
||||
};
|
||||
onMounted(()=>{
|
||||
getProjectList();
|
||||
})
|
||||
const getProjectList = () => {
|
||||
$api.get('project/select').then((res) => {
|
||||
projectList.value = res.data.data.projectList;
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -11,9 +11,9 @@
|
||||
name="name"
|
||||
:is-essential="true"
|
||||
:is-alert="nameAlert"
|
||||
@update:alert="nameAlert = $event"
|
||||
:value="name"
|
||||
@update:modelValue="name = $event"
|
||||
/>
|
||||
|
||||
<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"
|
||||
:value="endDay"
|
||||
@update:modelValue="endDay = $event"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
title="설명"
|
||||
name="description"
|
||||
@update:data="description = $event"
|
||||
:value="description"
|
||||
@update:modelValue="description = $event"
|
||||
/>
|
||||
|
||||
<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,
|
||||
projctCdt: startDay.value,
|
||||
projctEdt: endDay.value,
|
||||
projctDes: description.value,
|
||||
projctCol: String(color.value),
|
||||
projctStr: startDay.value,
|
||||
projctEnd: endDay.value || null,
|
||||
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();
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user