localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

수정사항 완료

Browse Source
This commit is contained in:
yoon 2025-02-26 19:09:04 +09:00
parent 37c335fc12
commit 7e484c12be
3 changed files with 293 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/list/ProjectCard.vue
View File

@ -39,7 +39,6 @@
<div <div
v-if="isPopoverVisible" v-if="isPopoverVisible"
class="position-absolute w-100 map text-end" class="position-absolute w-100 map text-end"
@click.stop
> >
<button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button> <button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
<div class="card"> <div class="card">
@ -48,6 +47,7 @@
v-if="coordinates" v-if="coordinates"
:lat="coordinates.lat" :lat="coordinates.lat"
:lng="coordinates.lng" :lng="coordinates.lng"
:draggable="false"
class="w-100 h-px-200" class="w-100 h-px-200"
> >
<KakaoMapMarker <KakaoMapMarker
@ -81,7 +81,7 @@
</template> </template>
<template #footer> <template #footer>
<button type="button" class="btn btn-secondary" @click="closeModal">닫기</button> <BackButton @click="closeModal" />
</template> </template>
</CenterModal> </CenterModal>
</template> </template>

15
src/components/modal/CenterModal.vue
View File

@ -7,7 +7,6 @@
<h5 class="modal-title m-auto fw-bold" id="modalCenterTitle"> <h5 class="modal-title m-auto fw-bold" id="modalCenterTitle">
<slot name="title">Modal Title</slot> <slot name="title">Modal Title</slot>
</h5> </h5>
<button type="button" class="btn-close" @click="closeModal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<slot name="body">Modal body</slot> <slot name="body">Modal body</slot>
@ -21,18 +20,27 @@
</template> </template>
<script setup> <script setup>
const prop = defineProps({ const prop = defineProps({
display : { display : {
type: Boolean, type: Boolean,
default: false, default: false,
required: true, required: true,
}, },
create: {
type: Boolean,
default: false,
}
}); });
const emit = defineEmits(['close']); const emit = defineEmits(['close' , 'reset']);
const closeModal = () => { const closeModal = () => {
emit('close' , false); if (prop.create) {
emit('reset');
}
emit('close', false);
}; };
</script> </script>
@ -45,3 +53,4 @@ const closeModal = () => {

212
src/components/projectlist/ProjectList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<SearchBar @update:data="search"/> <SearchBar @update:data="search" />
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<CategoryBtn :lists="yearCategory" @update:data="selectedCategory = $event" /> <CategoryBtn :lists="yearCategory" @update:data="selectedCategory = $event" />
<WriteBtn class="mt-2 ms-auto" @click="openCreateModal" /> <WriteBtn class="mt-2 ms-auto" @click="openCreateModal" />
@ -26,7 +26,8 @@
</div> </div>
<!-- 등록 모달 --> <!-- 등록 모달 -->
<CenterModal :display="isCreateModalOpen" @close="closeCreateModal"> <form @reset.prevent="formReset">
<CenterModal :display="isCreateModalOpen" @close="closeCreateModal" :create="true" @reset="formReset">
<template #title> 프로젝트 등록 </template> <template #title> 프로젝트 등록 </template>
<template #body> <template #body>
<FormInput <FormInput
@ -34,7 +35,9 @@
name="name" name="name"
:is-essential="true" :is-essential="true"
:is-alert="nameAlert" :is-alert="nameAlert"
:modelValue="name"
@update:modelValue="name = $event" @update:modelValue="name = $event"
@update:alert="nameAlert = $event"
/> />
<FormSelect <FormSelect
@ -49,22 +52,25 @@
<FormInput <FormInput
title="시작 일" title="시작 일"
type="date"
name="startDay" name="startDay"
v-model="startDay" :type="'date'"
:is-essential="true" :is-essential="true"
:modelValue="startDay"
v-model="startDay"
/> />
<FormInput <FormInput
title="종료 일" title="종료 일"
name="endDay"
:type="'date'" :type="'date'"
name="endDay"
:modelValue="endDay"
@update:modelValue="endDay = $event" @update:modelValue="endDay = $event"
/> />
<FormInput <FormInput
title="설명" title="설명"
name="description" name="description"
:modelValue="description"
@update:modelValue="description = $event" @update:modelValue="description = $event"
/> />
@ -79,10 +85,11 @@
/> />
</template> </template>
<template #footer> <template #footer>
<BackButton @click="closeCreateModal" /> <BackButton type="reset" @click="closeCreateModal" />
<SaveButton @click="handleCreate" /> <SaveButton @click="handleCreate" />
</template> </template>
</CenterModal> </CenterModal>
</form>
<!-- 수정 모달 --> <!-- 수정 모달 -->
<CenterModal :display="isEditModalOpen" @close="closeEditModal"> <CenterModal :display="isEditModalOpen" @close="closeEditModal">
@ -95,6 +102,7 @@
:is-alert="nameAlert" :is-alert="nameAlert"
:modelValue="selectedProject.PROJCTNAM" :modelValue="selectedProject.PROJCTNAM"
@update:modelValue="selectedProject.PROJCTNAM = $event" @update:modelValue="selectedProject.PROJCTNAM = $event"
@update:alert="nameAlert = $event"
/> />
<FormSelect <FormSelect
@ -149,51 +157,55 @@
</template> </template>
<script setup> <script setup>
import { computed, inject, ref, watch, onMounted } from 'vue'; import { computed, ref, watch, onMounted, inject } from 'vue';
import SearchBar from '@c/search/SearchBar.vue'; import SearchBar from '@c/search/SearchBar.vue';
import ProjectCard from '@c/list/ProjectCard.vue'; import ProjectCard from '@c/list/ProjectCard.vue';
import CategoryBtn from '@c/category/CategoryBtn.vue'; import CategoryBtn from '@c/category/CategoryBtn.vue';
import WriteBtn from '@c/button/WriteBtn.vue'; import WriteBtn from '@c/button/WriteBtn.vue';
import CenterModal from '@c/modal/CenterModal.vue'; import CenterModal from '@c/modal/CenterModal.vue';
import FormSelect from '@c/input/FormSelect.vue'; import FormSelect from '@c/input/FormSelect.vue';
import FormInput from '@c/input/FormInput.vue'; import FormInput from '@c/input/FormInput.vue';
import ArrInput from '@c/input/ArrInput.vue'; import ArrInput from '@c/input/ArrInput.vue';
import commonApi from '@/common/commonApi'; import commonApi from '@/common/commonApi';
import { useToastStore } from '@s/toastStore'; import { useToastStore } from '@s/toastStore';
import { useUserInfoStore } from '@/stores/useUserInfoStore'; import { useUserInfoStore } from '@/stores/useUserInfoStore';
import { useProjectStore } from '@/stores/useProjectStore'; import { useProjectStore } from '@/stores/useProjectStore';
import $api from '@api'; import $api from '@api';
import SaveButton from '@c/button/SaveBtn.vue'; import SaveButton from '@c/button/SaveBtn.vue';
import BackButton from '@c/button/BackBtn.vue' import BackButton from '@c/button/BackBtn.vue';
const dayjs = inject('dayjs'); const toastStore = useToastStore();
const today = dayjs().format('YYYY-MM-DD'); const userStore = useUserInfoStore();
const toastStore = useToastStore(); const projectStore = useProjectStore();
const userStore = useUserInfoStore();
const projectStore = useProjectStore();
// 상태 관리 // 상태 관리
const user = ref(null); const user = ref(null);
const selectedCategory = ref(null); const selectedCategory = ref(null);
const searchText = ref(''); const searchText = ref('');
// 등록 모달 상태 // dayjs 인스턴스 가져오기
const isCreateModalOpen = ref(false); const dayjs = inject('dayjs');
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);
// 수정 모달 상태 // 오늘 날짜를 YYYY-MM-DD 형식으로 변환
const isEditModalOpen = ref(false); const today = dayjs().format('YYYY-MM-DD');
const originalColor = ref('');
const selectedProject = ref({ // 등록 모달 상태
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 isEditModalOpen = ref(false);
const originalColor = ref('');
const selectedProject = ref({
PROJCTSEQ: '', PROJCTSEQ: '',
PROJCTNAM: '', PROJCTNAM: '',
PROJCTSTR: '', PROJCTSTR: '',
@ -204,50 +216,49 @@ const selectedProject = ref({
PROJCTDES: '', PROJCTDES: '',
PROJCTCOL: '', PROJCTCOL: '',
projctcolor: '', projctcolor: '',
}); });
// API 호출 // API 호출
const { yearCategory, colorList } = commonApi({ const { yearCategory, colorList } = commonApi({
loadColor: true, loadColor: true,
colorType: 'YNP', colorType: 'YNP',
loadYearCategory: true, loadYearCategory: true,
}); });
// 검색 처리 // 검색 처리
const search = async (searchKeyword) => { const search = async searchKeyword => {
searchText.value = searchKeyword.trim(); searchText.value = searchKeyword.trim();
await getProjectList(); await getProjectList();
}; };
const selectedYear = computed(() => { const selectedYear = computed(() => {
if (!selectedCategory.value || selectedCategory.value === 900101) { if (!selectedCategory.value || selectedCategory.value === 900101) {
return null; return null;
} }
// 선택된 category 값 label 값으로 변환 // 선택된 category 값 label 값으로 변환
return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null; return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null;
}); });
// 프로젝트 목록 조회 // 프로젝트 목록 조회
const getProjectList = async () => { const getProjectList = async () => {
await projectStore.getProjectList(searchText.value, selectedYear.value); await projectStore.getProjectList(searchText.value, selectedYear.value);
}; };
// 카테고리 변경 감지 // 카테고리 변경 감지
watch(selectedCategory, async () => { watch(selectedCategory, async () => {
await getProjectList(); await getProjectList();
}); });
// 등록 모달 관리 // 등록 모달 관리
const openCreateModal = () => { const openCreateModal = () => {
isCreateModalOpen.value = true; isCreateModalOpen.value = true;
}; };
const closeCreateModal = () => { const closeCreateModal = () => {
isCreateModalOpen.value = false; isCreateModalOpen.value = false;
resetCreateForm(); };
};
const resetCreateForm = () => { const formReset = () => {
name.value = ''; name.value = '';
color.value = ''; color.value = '';
address.value = ''; address.value = '';
@ -258,17 +269,17 @@ const resetCreateForm = () => {
description.value = ''; description.value = '';
nameAlert.value = false; nameAlert.value = false;
addressAlert.value = false; addressAlert.value = false;
}; }
// 등록 :: 주소 업데이트 핸들러 // 등록 :: 주소 업데이트 핸들러
const handleAddressUpdate = addressData => { const handleAddressUpdate = addressData => {
address.value = addressData.address; address.value = addressData.address;
detailAddress.value = addressData.detailAddress; detailAddress.value = addressData.detailAddress;
postcode.value = addressData.postcode; postcode.value = addressData.postcode;
}; };
// 프로젝트 등록 // 프로젝트 등록
const handleCreate = async () => { const handleCreate = async () => {
nameAlert.value = name.value.trim() === ''; nameAlert.value = name.value.trim() === '';
addressAlert.value = address.value.trim() === ''; addressAlert.value = address.value.trim() === '';
@ -286,35 +297,34 @@ const handleCreate = async () => {
projctDtl: detailAddress.value, projctDtl: detailAddress.value,
projctZip: postcode.value, projctZip: postcode.value,
projctCmb: user.value.name, projctCmb: user.value.name,
}) }).then(res => {
.then(res => {
if (res.status === 200) { if (res.status === 200) {
toastStore.onToast('프로젝트가 등록되었습니다.', 's'); toastStore.onToast('프로젝트가 등록되었습니다.', 's');
closeCreateModal(); closeCreateModal();
getProjectList(); getProjectList();
} }
}); });
}; };
// 수정 모달 관리 // 수정 모달 관리
const openEditModal = (post) => { const openEditModal = post => {
isEditModalOpen.value = true; isEditModalOpen.value = true;
selectedProject.value = { ...post }; selectedProject.value = { ...post };
originalColor.value = post.PROJCTCOL; originalColor.value = post.PROJCTCOL;
}; };
const closeEditModal = () => { const closeEditModal = () => {
isEditModalOpen.value = false; isEditModalOpen.value = false;
}; };
// 기존 컬러 + 사용 가능 한 컬러 // 기존 컬러 + 사용 가능 한 컬러
const allColors = computed(() => { const allColors = computed(() => {
const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor }; const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
return [existingColor, ...colorList.value]; return [existingColor, ...colorList.value];
}); });
// 변경된 내용 있는지 확인 // 변경된 내용 있는지 확인
const hasChanges = computed(() => { const hasChanges = computed(() => {
const original = projectStore.projectList.find(p => p.PROJCTSEQ === selectedProject.value.PROJCTSEQ); const original = projectStore.projectList.find(p => p.PROJCTSEQ === selectedProject.value.PROJCTSEQ);
if (!original) return false; if (!original) return false;
@ -328,20 +338,26 @@ const hasChanges = computed(() => {
original.PROJCTEND !== selectedProject.value.PROJCTEND || original.PROJCTEND !== selectedProject.value.PROJCTEND ||
original.PROJCTDES !== selectedProject.value.PROJCTDES original.PROJCTDES !== selectedProject.value.PROJCTDES
); );
}); });
// 수정 :: 주소 // 수정 :: 주소
const updateAddress = (addressData) => { const updateAddress = addressData => {
selectedProject.value = { selectedProject.value = {
...selectedProject.value, ...selectedProject.value,
PROJCTZIP: addressData.postcode, PROJCTZIP: addressData.postcode,
PROJCTARR: addressData.address, PROJCTARR: addressData.address,
PROJCTDTL: addressData.detailAddress PROJCTDTL: addressData.detailAddress,
};
}; };
};
// 프로젝트 수정 // 프로젝트 수정
const handleUpdate = () => { const handleUpdate = () => {
nameAlert.value = selectedProject.value.PROJCTNAM.trim() === '';
if (nameAlert.value) {
return;
}
if (!hasChanges.value) { if (!hasChanges.value) {
toastStore.onToast('변경된 내용이 없습니다.', 'e'); toastStore.onToast('변경된 내용이 없습니다.', 'e');
return; return;
@ -358,7 +374,7 @@ const handleUpdate = () => {
projctEnd: selectedProject.value.PROJCTEND || null, projctEnd: selectedProject.value.PROJCTEND || null,
projctDes: selectedProject.value.PROJCTDES || null, projctDes: selectedProject.value.PROJCTDES || null,
projctUmb: user.value.name, projctUmb: user.value.name,
originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value,
}).then(res => { }).then(res => {
if (res.status === 200) { if (res.status === 200) {
toastStore.onToast('수정이 완료 되었습니다.', 's'); toastStore.onToast('수정이 완료 되었습니다.', 's');
@ -366,11 +382,11 @@ const handleUpdate = () => {
location.reload(); location.reload();
} }
}); });
}; };
onMounted(async () => { onMounted(async () => {
await getProjectList(); await getProjectList();
await userStore.userInfo(); await userStore.userInfo();
user.value = userStore.user; user.value = userStore.user;
}); });
</script> </script>