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

Merge branch 'main' into board-ji

Browse Source
This commit is contained in:
dyhj625 2025-03-28 16:33:49 +09:00
commit 5c5a2c63ef
9 changed files with 181 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/css/custom.css
View File

@ -539,7 +539,7 @@
.map {
top: -160px;
left: -5px;
left: 90px;
}
@keyframes sparkle {

10
src/components/commuters/CommuterCalendar.vue
View File

@ -63,8 +63,8 @@
<span class="fw-bold">{{ commuter.memberName }}</span>
<div class="ms-auto text-start fw-bold">
<div class="d-flex gap-1 align-items-center ">
<div class="ms-auto text-start fw-bold d-flex flex-column align-items-end">
<div class="d-flex gap-1 align-items-center">
출근 :
<div class="text-white rounded px-2" :style="`background: ${commuter.projctcolor} !important;`">
{{ commuter.PROJCTNAM }}
@ -431,9 +431,3 @@ onMounted(async () => {
);
});
</script>
<style>
.fc-daygrid-day[data-has-commuters="true"] {
cursor: pointer;
}
</style>

7
src/components/input/UserFormInput.vue
View File

@ -14,7 +14,6 @@
:value="computedValue"
:disabled="disabled"
:maxLength="maxlength"
:minLength="minlength"
:placeholder="title"
@blur="$emit('blur')"
/>
@ -30,7 +29,6 @@
:value="computedValue"
:disabled="disabled"
:maxLength="maxlength"
:minLength="minlength"
:placeholder="title"
@blur="$emit('blur')"
@click="handleDateClick"
@ -81,11 +79,6 @@
default: 30,
required: false,
},
minlength: {
type: Number,
default: 4,
required: false,
},
isAlert: {
type: Boolean,
default: false,

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

@ -32,36 +32,19 @@
</div>
<!-- 주소 -->
<div class="d-flex flex-sm-row align-items-center pb-2">
<div class="d-flex" @click.stop="isPopoverVisible = !isPopoverVisible">
<i class="bx bxs-map cursor-pointer" ref="mapIconRef"></i>
<MapPopover
:address="address"
:ref="mapIconRef"
>
<template #trigger>
<div class="d-flex align-items-center cursor-pointer">
<i class="bx bxs-map"></i>
<div class="ms-2">주소</div>
</div>
<div class="ms-12 position-relative">
</template>
</MapPopover>
<div class="ms-12">
{{ address }} {{ addressdtail }}
<!-- 팝오버 -->
<div v-if="isPopoverVisible" class="position-absolute map ">
<button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
<div class="card">
<div class="card-body p-1">
<KakaoMap
v-if="coordinates"
:lat="coordinates.lat"
:lng="coordinates.lng"
class="w-px-250 h-px-200"
@onLoadKakaoMap="onLoadKakaoMap"
>
<KakaoMapMarker
:lat="coordinates.lat"
:lng="coordinates.lng"
/>
</KakaoMap>
<div class="position-absolute top-50 translate-middle-y end-0 me-3 z-1 d-flex flex-column gap-1">
<button class="btn-secondary border-none" @click="zoomOut">+</button>
<button class="btn-secondary border-none" @click="zoomIn">-</button>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctColor} !important;`" @click.stop="openModal"><i class='bx bx-child'></i></button>
</div>
@ -195,6 +178,7 @@ import DeleteBtn from '../button/DeleteBtn.vue';
import FormInput from '@c/input/FormInput.vue';
import FormSelect from '@c/input/FormSelect.vue';
import ArrInput from '@c/input/ArrInput.vue';
import MapPopover from '@c/map/MapPopover.vue';
import { useToastStore } from '@s/toastStore';
import { useUserInfoStore } from '@/stores/useUserInfoStore';
import commonApi, { refreshColorList } from '@/common/commonApi';
@ -270,11 +254,7 @@ const emit = defineEmits(['update']);
const isModalOpen = ref(false);
const logData = ref([]);
// 주소 팝오버 상태
const isPopoverVisible = ref(false);
const map = ref();
const mapIconRef = ref(null);
const coordinates = ref(null);
// 수정 모달 상태
const isEditModalOpen = ref(false);
@ -292,8 +272,6 @@ const selectedUsers = ref({
});
const isKakaoMapLoaded = ref(false);
const startDateInput = ref(null);
const endDateInput = ref(null);
@ -538,43 +516,6 @@ const handleUpdate = async () => {
}
};
// 주소를 좌표로 변환하는 함수
const convertAddressToCoordinates = () => {
if (!window.kakao || !window.kakao.maps) {
return;
}
const geocoder = new window.kakao.maps.services.Geocoder();
geocoder.addressSearch(props.address, (result, status) => {
if (status === window.kakao.maps.services.Status.OK) {
coordinates.value = {
lat: parseFloat(result[0].y),
lng: parseFloat(result[0].x)
};
}
});
};
const onLoadKakaoMap = (mapRef) => {
map.value = mapRef;
};
// 지도 확대
const zoomIn = () => {
if (map.value) {
const level = map.value.getLevel();
map.value.setLevel(level + 1);
}
};
// 지도 축소
const zoomOut = () => {
if (map.value) {
const level = map.value.getLevel();
map.value.setLevel(level - 1);
}
};
// 프로젝트 삭제
const handleDelete = () => {
$api.patch('project/delete', {
@ -605,13 +546,6 @@ onMounted(async () => {
endInputElement = endDateInput.value.$el.querySelector('input[type="date"]');
}
const checkKakaoMapsLoaded = () => {
if (window.kakao && window.kakao.maps && window.kakao.maps.services) {
convertAddressToCoordinates();
}
};
checkKakaoMapsLoaded();
});

109
src/components/map/MapPopover.vue Normal file
View File

@ -0,0 +1,109 @@
<template>
<div class="position-relative">
<div @click="togglePopover">
<slot name="trigger">
<i class="bx bxs-map"></i>
</slot>
</div>
<div
v-if="isVisible"
class="position-absolute map z-3"
>
<button
type="button"
class="btn-close popover-close"
@click="togglePopover"
></button>
<div class="card">
<div class="card-body p-1">
<KakaoMap
v-if="coordinates"
:lat="coordinates.lat"
:lng="coordinates.lng"
class="w-px-250 h-px-200"
@onLoadKakaoMap="onLoadKakaoMap"
>
<KakaoMapMarker
:lat="coordinates.lat"
:lng="coordinates.lng"
/>
</KakaoMap>
<div class="position-absolute top-50 translate-middle-y end-0 me-3 z-1 d-flex flex-column gap-1">
<button class="btn-secondary border-none" @click="zoomOut">+</button>
<button class="btn-secondary border-none" @click="zoomIn">-</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps';
const props = defineProps({
address: {
type: String,
required: true
}
});
const isVisible = ref(false);
const coordinates = ref(null);
const map = ref(null);
// 주소를 좌표로 변환하는 함수
const convertAddressToCoordinates = () => {
return new Promise((resolve, reject) => {
if (!window.kakao || !window.kakao.maps) {
reject(new Error('Kakao Maps not loaded'));
return;
}
const geocoder = new window.kakao.maps.services.Geocoder();
geocoder.addressSearch(props.address, (result, status) => {
if (status === window.kakao.maps.services.Status.OK) {
resolve({
lat: parseFloat(result[0].y),
lng: parseFloat(result[0].x)
});
} else {
reject(new Error('Address conversion failed'));
}
});
});
};
const togglePopover = () => {
isVisible.value = !isVisible.value;
};
const onLoadKakaoMap = (mapRef) => {
map.value = mapRef;
};
// 지도 확대
const zoomIn = () => {
if (map.value) {
const level = map.value.getLevel();
map.value.setLevel(level + 1);
}
};
// 지도 축소
const zoomOut = () => {
if (map.value) {
const level = map.value.getLevel();
map.value.setLevel(level - 1);
}
};
// 컴포넌트 마운트 시 좌표 변환
onMounted(async () => {
coordinates.value = await convertAddressToCoordinates();
});
</script>

55
src/components/search/SearchBar.vue
View File

@ -1,17 +1,8 @@
<template>
<form @submit.prevent="search">
<div class="input-group mb-3 d-flex">
<input
type="text"
class="form-control"
placeholder="Search"
v-model="searchQuery"
@input="preventLeadingSpace"
/>
<button
type="submit"
class="btn btn-primary"
>
<input type="text" class="form-control" placeholder="Search" v-model="searchQuery" @input="preventLeadingSpace" />
<button type="submit" class="btn btn-primary">
<i class="bx bx-search bx-md"></i>
</button>
</div>
@ -19,28 +10,38 @@
</template>
<script setup>
import { ref } from "vue";
import { ref, watch } from 'vue';
const props = defineProps({
const props = defineProps({
maxlength: {
type: Number,
default: 30,
required: false,
},
});
initKeyword: {
type: String,
},
});
const emits = defineEmits(["update:data"]);
const searchQuery = ref("");
const emits = defineEmits(['update:data']);
const searchQuery = ref('');
// 검색 실행 함수 (버튼 클릭 or 엔터 공통)
const search = () => {
watch(
() => props.initKeyword,
(newVal, oldVal) => {
searchQuery.value = newVal;
},
);
// 검색 실행 함수 (버튼 클릭 or 엔터 공통)
const search = () => {
const trimmedQuery = searchQuery.value.trimStart();
if (trimmedQuery === "") {
emits("update:data", "");
if (trimmedQuery === '') {
emits('update:data', '');
return;
}
if (trimmedQuery.length < 2 ) {
alert("검색어는 최소 2글자 이상 입력해주세요.");
if (trimmedQuery.length < 2) {
alert('검색어는 최소 2글자 이상 입력해주세요.');
searchQuery.value = '';
return;
}
@ -52,11 +53,11 @@ const search = () => {
searchQuery.value = trimmedQuery;
}
emits("update:data", searchQuery.value);
};
emits('update:data', searchQuery.value);
};
// 좌측 공백 제거
const preventLeadingSpace = () => {
// 좌측 공백 제거
const preventLeadingSpace = () => {
searchQuery.value = searchQuery.value.trimStart();
};
};
</script>

10
src/components/user/RegisterForm.vue
View File

@ -332,9 +332,12 @@
};
watch(password, (newValue) => {
if (newValue.length >= 4) {
if (newValue && newValue.length >= 4) {
passwordErrorAlert.value = false;
passwordError.value = '';
} else if (newValue && newValue.length < 4) {
passwordErrorAlert.value = true;
passwordError.value = '비밀번호는 4자리 이상이어야 합니다.';
}
});
@ -342,6 +345,7 @@
// 회원가입
const handleSubmit = async () => {
await checkColorDuplicate();
idAlert.value = id.value.trim() === '';
passwordAlert.value = password.value.trim() === '';
passwordcheckAlert.value = passwordcheck.value.trim() === '';
@ -351,8 +355,8 @@
addressAlert.value = address.value.trim() === '';
phoneAlert.value = phone.value.trim() === '';
// 비밀번호 길이 체크 로직 추가
if (password.value.length < 4) {
// 비밀번호 길이 체크 로직 수정
if (password.value && password.value.length < 4) {
passwordErrorAlert.value = true;
passwordError.value = '비밀번호는 4자리 이상이어야 합니다.';
} else {

4
src/components/voteboard/voteCard.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="card mb-6" :class="{'ps-none opacity-50': data.localVote.LOCVOTDDT && (topVoters.length == 1 || data.localVote.LOCVOTRES || voteResult == 0)}">
<div class="card mb-6" :class="{'disabled-class': data.localVote.LOCVOTDDT && (topVoters.length == 1 || data.localVote.LOCVOTRES || voteResult == 0)}">
<div class="card-body" v-if="!data.localVote.LOCVOTDEL" >
<h5 class="card-title mb-1">
<div class="list-unstyled users-list d-flex align-items-center gap-1">
@ -59,7 +59,7 @@
:data="data.voteMembers"/>
</div>
</div>
<div v-else class="card-body">
<div v-else class="card-body disabled-class">
<h5>{{ data.localVote.LOCVOTTTL }}</h5>
삭제된 투표입니다.
</div>

2
src/views/board/BoardList.vue
View File

@ -4,7 +4,7 @@
<div class="card-header d-flex flex-column">
<!-- 검색창 -->
<div class="mb-3 w-100">
<search-bar @update:data="search" @keyup.enter="searchOnEnter" class="flex-grow-1" />
<search-bar @update:data="search" @keyup.enter="searchOnEnter" :initKeyword="searchText" class="flex-grow-1" />
</div>
<div class="d-flex align-items-center" style="gap: 15px">
<!-- 리스트 갯수 선택 -->