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

Merge branch 'main' into vacation-css

Browse Source
This commit is contained in:
dyhj625 2025-03-07 11:21:19 +09:00
commit f7d688bb60
9 changed files with 1206 additions and 1105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/img/mbti/est.png → public/img/mbti/estj.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 9.5 KiB

196
src/components/board/BoardProfile.vue
View File

@ -10,12 +10,8 @@
<div class="profile-detail"> <div class="profile-detail">
<span>{{ date }}</span> <span>{{ date }}</span>
<template v-if="showDetail"> <template v-if="showDetail">
<span class="ms-2"> <span class="ms-2"> <i class="fa-regular fa-eye"></i> {{ views }} </span>
<i class="fa-regular fa-eye"></i> {{ views }} <span class="ms-1"> <i class="bx bx-comment"></i> {{ commentNum }} </span>
</span>
<span>
<i class="bx bx-comment"></i> {{ commentNum }}
</span>
</template> </template>
</div> </div>
</div> </div>
@ -29,112 +25,104 @@
</template> </template>
<!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) --> <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
<BoardRecommendBtn <BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
v-if="isLike"
:boardId="boardId"
:comment="comment"
@updateReaction="handleUpdateReaction"
/>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, defineProps, defineEmits } from 'vue'; import { computed, defineProps, defineEmits } from 'vue';
import DeleteButton from '../button/DeleteBtn.vue'; import DeleteButton from '../button/DeleteBtn.vue';
import EditButton from '../button/EditBtn.vue'; import EditButton from '../button/EditBtn.vue';
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue'; import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
// 기본 프로필 이미지 경로 // 기본 프로필 이미지 경로
const defaultProfile = "/img/icons/icon.png"; const defaultProfile = '/img/icons/icon.png';
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능) // 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
const baseUrl = "http://localhost:10325/"; // API 서버 URL const baseUrl = 'http://localhost:10325/'; // API 서버 URL
// Props 정의 // Props 정의
const props = defineProps({ const props = defineProps({
comment: { comment: {
type: Object, type: Object,
required: false, required: false,
}, },
boardId: { boardId: {
type: Number, type: Number,
required: false required: false,
}, },
commentId: { commentId: {
type: Number, type: Number,
required: false, required: false,
}, },
profileName: { profileName: {
type: String, type: String,
default: '', default: '',
}, },
profilePath: { profilePath: {
type: String, type: String,
default: '', default: '',
}, },
unknown: { unknown: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
showDetail: { showDetail: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
isAuthor: { isAuthor: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
isCommentAuthor: Boolean, isCommentAuthor: Boolean,
isCommentProfile: Boolean, isCommentProfile: Boolean,
date: { date: {
type: String, type: String,
required: '', required: '',
}, },
views: { views: {
type: Number, type: Number,
default: 0, default: 0,
}, },
commentNum: { commentNum: {
type: Number, type: Number,
default: 0, default: 0,
}, },
isLike: { isLike: {
type: Boolean, type: Boolean,
default: false, default: false,
} },
});
const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
const isDeletedComment = computed(() => {
return props.comment?.content === '삭제된 댓글입니다' &&
props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
});
// 수정
const editClick = () => {
emit('editClick', { ...props.comment, unknown: props.unknown });
};
// 삭제
const deleteClick = () => {
emit('deleteClick', { ...props.comment, unknown: props.unknown });
};
// 좋아요/싫어요 업데이트
const handleUpdateReaction = (reactionData) => {
emit("updateReaction", {
boardId: props.boardId,
commentId: props.comment?.commentId,
...reactionData,
}); });
};
// 프로필 이미지 경로 설정 const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
const getProfileImage = (profilePath) => {
return profilePath && profilePath.trim() const isDeletedComment = computed(() => {
? `${baseUrl}upload/img/profile/${profilePath}` return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
: defaultProfile; });
};
// 수정
const editClick = () => {
emit('editClick', { ...props.comment, unknown: props.unknown });
};
// 삭제
const deleteClick = () => {
emit('deleteClick', { ...props.comment, unknown: props.unknown });
};
// 좋아요/싫어요 업데이트
const handleUpdateReaction = reactionData => {
emit('updateReaction', {
boardId: props.boardId,
commentId: props.comment?.commentId,
...reactionData,
});
};
// 프로필 이미지 경로 설정
const getProfileImage = profilePath => {
return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
};
</script> </script>

38
src/components/button/EditBtn.vue
View File

@ -1,30 +1,30 @@
<template> <template>
<button class="btn btn-label-primary btn-icon" @click="toggleText"> <button class="btn btn-label-primary btn-icon me-1" @click="toggleText">
<i :class="buttonClass"></i> <i :class="buttonClass"></i>
</button> </button>
</template> </template>
<script setup> <script setup>
import { ref, defineProps } from 'vue'; import { ref, defineProps } from 'vue';
const props = defineProps({ const props = defineProps({
isToggleEnabled: { isToggleEnabled: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}); });
const buttonClass = ref("bx bx-edit-alt"); const buttonClass = ref('bx bx-edit-alt');
const toggleText = () => { const toggleText = () => {
if (props.isToggleEnabled) { if (props.isToggleEnabled) {
buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt"; buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
} }
}; };
const resetButton = () => { const resetButton = () => {
buttonClass.value = "bx bx-edit-alt"; buttonClass.value = 'bx bx-edit-alt';
}; };
defineExpose({ resetButton }); defineExpose({ resetButton });
</script> </script>

253
src/components/editor/QEditor.vue
View File

@ -52,147 +52,148 @@
</template> </template>
<script setup> <script setup>
import Quill from 'quill'; import Quill from 'quill';
import 'quill/dist/quill.snow.css'; import 'quill/dist/quill.snow.css';
import { onMounted, ref, watch, defineEmits, defineProps } from 'vue'; import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
import $api from '@api'; import $api from '@api';
const props = defineProps({
const props = defineProps({ isAlert: {
isAlert: { type: Boolean,
type: Boolean, default: false,
default: false, },
}, initialData: {
initialData: { type: [String, Object],
type: String, default: () => null,
default: () => null,
},
});
const editor = ref(null); // 에디터 DOM 참조
const font = ref('nanum-gothic'); // 기본 폰트
const fontSize = ref('16px'); // 기본 폰트 크기
const emit = defineEmits(['update:data']);
onMounted(() => {
// 툴바에서 선택할 수 있는 폰트 목록 설정
const Font = Quill.import('formats/font');
Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
Quill.register(Font, true);
// 툴바에서 선택할 수 있는 폰트 크기 목록 설정
const Size = Quill.import('attributors/style/size');
Size.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px', '48px'];
Quill.register(Size, true);
// Quill 에디터 인스턴스 생성
const quillInstance = new Quill(editor.value, {
theme: 'snow',
placeholder: '내용을 입력해주세요...',
modules: {
toolbar: {
container: '#toolbar',
},
syntax: true,
}, },
}); });
// 폰트와 폰트 크기 설정 const editor = ref(null); // 에디터 DOM 참조
quillInstance.format('font', font.value); const font = ref('nanum-gothic'); // 기본 폰트
quillInstance.format('size', fontSize.value); const fontSize = ref('16px'); // 기본 폰트 크기
const emit = defineEmits(['update:data']);
// 텍스트가 변경될 때마다 부모 컴포넌트로 변경된 내용 전달 onMounted(() => {
quillInstance.on('text-change', () => { // 툴바에서 선택할 수 있는 폰트 목록 설정
const delta = quillInstance.getContents(); // Delta 포맷으로 내용 가져오기 const Font = Quill.import('formats/font');
emit('update:data', delta); Font.whitelist = ['nanum-gothic', 'd2coding', 'consolas', 'serif', 'monospace'];
}); Quill.register(Font, true);
// 폰트나 폰트 크기가 변경될 때 에디터 스타일 업데이트 // 툴바에서 선택할 수 있는 폰트 크기 목록 설정
watch([font, fontSize], () => { const Size = Quill.import('attributors/style/size');
Size.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px', '48px'];
Quill.register(Size, true);
// Quill 에디터 인스턴스 생성
const quillInstance = new Quill(editor.value, {
theme: 'snow',
placeholder: '내용을 입력해주세요...',
modules: {
toolbar: {
container: '#toolbar',
},
syntax: true,
},
});
// 폰트와 폰트 크기 설정
quillInstance.format('font', font.value); quillInstance.format('font', font.value);
quillInstance.format('size', fontSize.value); quillInstance.format('size', fontSize.value);
}); // 텍스트가 변경될 때마다 부모 컴포넌트로 변경된 내용 전달
quillInstance.on('text-change', () => {
// 초기 데이터가 있을 경우, HTML 형식으로 삽입 const delta = quillInstance.getContents(); // Delta 포맷으로 내용 가져오기
if (props.initialData) { emit('update:data', delta);
quillInstance.setContents(JSON.parse(props.initialData));
}
// 이미지 업로드 기능 처리
let imageUrls = new Set(); // 업로드된 이미지 URL을 추적
quillInstance.getModule('toolbar').addHandler('image', () => {
selectLocalImage(); // 이미지 버튼 클릭 시 로컬 이미지 선택
});
// 에디터의 텍스트가 변경될 때마다 이미지 처리
quillInstance.on('text-change', (delta, oldDelta, source) => {
emit('update:data', quillInstance.getContents());
delta.ops.forEach(op => {
if (op.insert && typeof op.insert === 'object' && op.insert.image) {
const imageUrl = op.insert.image; // 이미지 URL 추출
imageUrls.add(imageUrl); // URL 추가
} else if (op.delete) {
checkForDeletedImages(); // 삭제된 이미지 확인
}
}); });
});
// 로컬 이미지 파일 선택
async function selectLocalImage() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click(); // 파일 선택 다이얼로그 열기
input.onchange = () => {
const file = input.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
// 이미지 서버에 업로드 후 URL 받기 // 폰트나 폰트 크기가 변경될 때 에디터 스타일 업데이트
uploadImageToServer(formData).then(serverImageUrl => { watch([font, fontSize], () => {
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, ''); quillInstance.format('font', font.value);
const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`; quillInstance.format('size', fontSize.value);
});
const range = quillInstance.getSelection(); // 초기 데이터가 있을 경우, HTML 형식으로 삽입
quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입 if (props.initialData) {
console.log(props.initialData);
imageUrls.add(fullImageUrl); // 이미지 URL 추가 quillInstance.setContents(JSON.parse(props.initialData));
}).catch(e => {
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
});
}
};
}
// 이미지 서버 업로드
async function uploadImageToServer(formData) {
try {
const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
const imageUrl = response.data.data;
return imageUrl; // 서버에서 받은 이미지 URL 반환
} catch (error) {
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
throw error;
} }
}
// 삭제된 이미지 확인 // 이미지 업로드 기능 처리
function checkForDeletedImages() { let imageUrls = new Set(); // 업로드된 이미지 URL을 추적
const editorImages = document.querySelectorAll('#editor img'); quillInstance.getModule('toolbar').addHandler('image', () => {
const currentImages = new Set(Array.from(editorImages).map(img => img.src)); // 현재 에디터에 있는 이미지들 selectLocalImage(); // 이미지 버튼 클릭 시 로컬 이미지 선택
imageUrls.forEach(url => {
if (!currentImages.has(url)) {
imageUrls.delete(url);
}
}); });
}
}); // 에디터의 텍스트가 변경될 때마다 이미지 처리
quillInstance.on('text-change', (delta, oldDelta, source) => {
emit('update:data', quillInstance.getContents());
delta.ops.forEach(op => {
if (op.insert && typeof op.insert === 'object' && op.insert.image) {
const imageUrl = op.insert.image; // 이미지 URL 추출
imageUrls.add(imageUrl); // URL 추가
} else if (op.delete) {
checkForDeletedImages(); // 삭제된 이미지 확인
}
});
});
// 로컬 이미지 파일 선택
async function selectLocalImage() {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.click(); // 파일 선택 다이얼로그 열기
input.onchange = () => {
const file = input.files[0];
if (file) {
const formData = new FormData();
formData.append('file', file);
// 이미지 서버에 업로드 후 URL 받기
uploadImageToServer(formData)
.then(serverImageUrl => {
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
const range = quillInstance.getSelection();
quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입
imageUrls.add(fullImageUrl); // 이미지 URL 추가
})
.catch(e => {
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
});
}
};
}
// 이미지 서버 업로드
async function uploadImageToServer(formData) {
try {
const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
const imageUrl = response.data.data;
return imageUrl; // 서버에서 받은 이미지 URL 반환
} catch (error) {
toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
throw error;
}
}
// 삭제된 이미지 확인
function checkForDeletedImages() {
const editorImages = document.querySelectorAll('#editor img');
const currentImages = new Set(Array.from(editorImages).map(img => img.src)); // 현재 에디터에 있는 이미지들
imageUrls.forEach(url => {
if (!currentImages.has(url)) {
imageUrls.delete(url);
}
});
}
});
</script> </script>
<style> <style>
@import 'quill/dist/quill.snow.css'; @import 'quill/dist/quill.snow.css';
.ql-editor { .ql-editor {
min-height: 300px; min-height: 300px;
font-family: 'Nanum Gothic', sans-serif; font-family: 'Nanum Gothic', sans-serif;
} }
</style> </style>

8
src/components/input/FormSelect.vue
View File

@ -5,7 +5,7 @@
<span :class="isEssential ? 'link-danger' : 'none'">*</span> <span :class="isEssential ? 'link-danger' : 'none'">*</span>
</label> </label>
<div :class="isRow ? 'col-md-10' : 'col-md-12'" class="d-flex gap-2 align-items-center"> <div :class="isRow ? 'col-md-10' : 'col-md-12'" class="d-flex gap-2 align-items-center">
<select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}"> <select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}" @blur="$emit('blur')">
<option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}"> <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}">
{{ isCommon ? item.label : item }} {{ isCommon ? item.label : item }}
</option> </option>
@ -91,7 +91,7 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(['update:data']); const emit = defineEmits(['update:data', 'blur']);
const selectData = ref(props.value); const selectData = ref(props.value);
// props.value의 변경을 감지하는 watch 추가 // props.value의 변경을 감지하는 watch 추가
@ -106,6 +106,10 @@ watch(() => props.data, (newData) => {
if (props.value === '0') { if (props.value === '0') {
selectData.value = newData[0].value; selectData.value = newData[0].value;
emit('update:data', selectData.value); emit('update:data', selectData.value);
if (props.isColor) {
emit('blur');
}
} }
} }
}, { immediate: true }); }, { immediate: true });

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

@ -95,9 +95,11 @@
:is-color="true" :is-color="true"
:data="colorList" :data="colorList"
@update:data="color = $event" @update:data="color = $event"
@blur="checkColorDuplicate"
class="w-50" class="w-50"
/> />
</div> </div>
<span v-if="colorError" class="w-50 ps-1 ms-auto invalid-feedback d-block">{{ colorError }}</span>
<div class="d-flex"> <div class="d-flex">
<UserFormInput <UserFormInput
@ -187,6 +189,7 @@
const phone = ref(''); const phone = ref('');
const phoneError = ref(''); const phoneError = ref('');
const color = ref(''); // 선택된 color const color = ref(''); // 선택된 color
const colorError = ref('');
const mbti = ref(''); // 선택된 MBTI const mbti = ref(''); // 선택된 MBTI
const pwhint = ref(''); // 선택된 pwhint const pwhint = ref(''); // 선택된 pwhint
@ -202,6 +205,7 @@
const addressAlert = ref(false); const addressAlert = ref(false);
const phoneAlert = ref(false); const phoneAlert = ref(false);
const phoneErrorAlert = ref(false); const phoneErrorAlert = ref(false);
const colorErrorAlert = ref(false);
const toastStore = useToastStore(); const toastStore = useToastStore();
@ -247,7 +251,6 @@
// 아이디 중복체크 // 아이디 중복체크
const checkIdDuplicate = async () => { const checkIdDuplicate = async () => {
const response = await $api.get(`/user/checkId?memberIds=${id.value}`); const response = await $api.get(`/user/checkId?memberIds=${id.value}`);
if (!response.data.data) { if (!response.data.data) {
idErrorAlert.value = true; idErrorAlert.value = true;
idError.value = '이미 사용 중인 아이디입니다.'; idError.value = '이미 사용 중인 아이디입니다.';
@ -295,9 +298,26 @@
} }
}; };
// 색상 중복체크
const checkColorDuplicate = async () => {
const response = await $api.get(`/user/checkColor?memberCol=${color.value}`);
if (response.data.data) {
colorErrorAlert.value = true;
colorError.value = '이미 사용 중인 색상입니다.';
} else {
colorErrorAlert.value = false;
colorError.value = '';
}
};
// 회원가입 // 회원가입
const handleSubmit = async () => { const handleSubmit = async () => {
await checkColorDuplicate();
idAlert.value = id.value.trim() === ''; idAlert.value = id.value.trim() === '';
passwordAlert.value = password.value.trim() === ''; passwordAlert.value = password.value.trim() === '';
passwordcheckAlert.value = passwordcheck.value.trim() === ''; passwordcheckAlert.value = passwordcheck.value.trim() === '';
@ -317,7 +337,8 @@
} }
if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value || if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value ||
passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value || phoneErrorAlert.value) { passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value ||
addressAlert.value || phoneAlert.value || phoneErrorAlert.value || colorErrorAlert.value) {
return; return;
} }

277
src/components/wordDict/DictWrite.vue
View File

@ -14,13 +14,13 @@
/> />
</div> </div>
<div class="col-2 btn-margin" v-if="!isDisabled"> <div class="col-2 btn-margin" v-if="!isDisabled">
<PlusBtn @click="toggleInput"/> <PlusBtn @click="toggleInput" />
</div> </div>
</div> </div>
<div class="row" v-if="showInput"> <div class="row" v-if="showInput">
<div class="col-10"> <div class="col-10">
<FormInput <FormInput
ref="categoryInputRef" ref="categoryInputRef"
title="카테고리 입력" title="카테고리 입력"
name="카테고리" name="카테고리"
@ -44,7 +44,12 @@
/> />
</div> </div>
<div> <div>
<QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event" :is-alert="wordContentAlert" :initialData="contentValue"/> <QEditor
@update:data="content = $event"
@update:imageUrls="imageUrls = $event"
:is-alert="wordContentAlert"
:initialData="contentValue"
/>
<div class="text-end mt-5"> <div class="text-end mt-5">
<button class="btn btn-primary" @click="saveWord"> <button class="btn btn-primary" @click="saveWord">
<i class="bx bx-check"></i> <i class="bx bx-check"></i>
@ -54,165 +59,153 @@
</template> </template>
<script setup> <script setup>
import { defineProps, computed, ref, defineEmits } from 'vue'; import { defineProps, computed, ref, defineEmits } from 'vue';
import QEditor from '@/components/editor/QEditor.vue'; import QEditor from '@/components/editor/QEditor.vue';
import FormInput from '@/components/input/FormInput.vue'; import FormInput from '@/components/input/FormInput.vue';
import FormSelect from '@/components/input/FormSelect.vue'; import FormSelect from '@/components/input/FormSelect.vue';
import PlusBtn from '../button/PlusBtn.vue'; import PlusBtn from '../button/PlusBtn.vue';
const emit = defineEmits(['close','addCategory','addWord']); const emit = defineEmits(['close', 'addCategory', 'addWord']);
//용어제목 //용어제목
const wordTitle = ref(''); const wordTitle = ref('');
const addCategory = ref(''); const addCategory = ref('');
const content = ref(''); const content = ref('');
const imageUrls = ref([]); const imageUrls = ref([]);
//용어 Vaildation용 //용어 Vaildation용
const wordTitleAlert = ref(false); const wordTitleAlert = ref(false);
const wordContentAlert = ref(false); const wordContentAlert = ref(false);
const addCategoryAlert = ref(false); const addCategoryAlert = ref(false);
//선택 카테고리 //선택 카테고리
const selectCategory = ref(''); const selectCategory = ref('');
// 제목 상태 // 제목 상태
const computedTitle = computed(() => const computedTitle = computed(() => (wordTitle.value === '' ? props.titleValue : wordTitle.value));
wordTitle.value === '' ? props.titleValue : wordTitle.value
);
// 카테고리 상태 // 카테고리 상태
const selectedCategory = computed(() => const selectedCategory = computed(() => (selectCategory.value === '' ? props.formValue : selectCategory.value));
selectCategory.value === '' ? props.formValue : selectCategory.value
);
// 카테고리 입력 중복 ref // 카테고리 입력 중복 ref
const categoryInputRef = ref(null); const categoryInputRef = ref(null);
const props = defineProps({ const props = defineProps({
dataList: { dataList: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
NumValue : { NumValue: {
type: Number type: Number,
}, },
formValue : { formValue: {
type:[String, Number] type: [String, Number],
}, },
titleValue : { titleValue: {
type:String, type: String,
},contentValue : { },
type:String, contentValue: {
}, type: String,
isDisabled: { },
type: Boolean, isDisabled: {
default: false type: Boolean,
} default: false,
}); },
});
// 카테고리 입력 창 // 카테고리 입력 창
const showInput = ref(false); const showInput = ref(false);
// 카테고리 입력 토글 // 카테고리 입력 토글
const toggleInput = () => { const toggleInput = () => {
showInput.value = !showInput.value; showInput.value = !showInput.value;
};
const onChange = (newValue) => {
selectCategory.value = newValue.target.value;
};
//용어 등록
const saveWord = () => {
//validation
let computedTitleTrim;
if(computedTitle.value != undefined){
computedTitleTrim = computedTitle.value.trim()
}
// 용어 체크
if(computedTitleTrim == undefined || computedTitleTrim == ''){
wordTitleAlert.value = true;
return;
} else {
wordTitleAlert.value = false;
}
// 내용 확인
let inserts = [];
if (inserts.length === 0 && content.value?.ops?.length > 0) {
inserts = content.value.ops.map(op =>
typeof op.insert === 'string' ? op.insert.trim() : op.insert
);
}
// 내용 체크
if(content.value == '' || inserts.join('') === ''){
wordContentAlert.value = true;
return;
}
const wordData = {
id: props.NumValue || null,
title: computedTitle.value,
category: selectedCategory.value,
content: content.value,
}; };
emit('addWord', wordData, addCategory.value); const onChange = newValue => {
} selectCategory.value = newValue.target.value;
};
//용어 등록
const saveWord = () => {
//validation
let computedTitleTrim;
// 카테고리 focusout 이벤트 핸들러 추가 if (computedTitle.value != undefined) {
const handleCategoryFocusout = (value) => { computedTitleTrim = computedTitle.value.trim();
const valueTrim = value.trim(); }
const existingCategory = props.dataList.find(item => item.label === valueTrim); // 용어 체크
if (computedTitleTrim == undefined || computedTitleTrim == '') {
// 카테고리 입력시 공백 wordTitleAlert.value = true;
if(valueTrim == ''){ return;
addCategoryAlert.value = true; } else {
wordTitleAlert.value = false;
// 공백시 강제 focus }
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
// 내용 확인
}else if (existingCategory) { let inserts = [];
addCategoryAlert.value = true; if (inserts.length === 0 && content.value?.ops?.length > 0) {
inserts = content.value.ops.map(op => (typeof op.insert === 'string' ? op.insert.trim() : op.insert));
// 중복시 강제 focus }
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
} else { // 내용 체크
addCategoryAlert.value = false; if (content.value == '' || inserts.join('') === '') {
} wordContentAlert.value = true;
}; return;
}
const wordData = {
id: props.NumValue || null,
title: computedTitle.value,
category: selectedCategory.value,
content: content.value,
};
emit('addWord', wordData, addCategory.value);
};
// 카테고리 focusout 이벤트 핸들러 추가
const handleCategoryFocusout = value => {
const valueTrim = value.trim();
const existingCategory = props.dataList.find(item => item.label === valueTrim);
// 카테고리 입력시 공백
if (valueTrim == '') {
addCategoryAlert.value = true;
// 공백시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
} else if (existingCategory) {
addCategoryAlert.value = true;
// 중복시 강제 focus
setTimeout(() => {
const inputElement = categoryInputRef.value?.$el?.querySelector('input');
if (inputElement) {
inputElement.focus();
}
}, 0);
} else {
addCategoryAlert.value = false;
}
};
</script> </script>
<style scoped> <style scoped>
.dict-w { .dict-w {
width: 83%; width: 83%;
}
@media (max-width: 768px) {
.btn-margin {
margin-top: 2.5rem
} }
}
</style> @media (max-width: 768px) {
.btn-margin {
margin-top: 2.5rem;
}
}
</style>

261
src/views/board/BoardEdit.vue
View File

@ -10,25 +10,48 @@
<div class="col-xl-12"> <div class="col-xl-12">
<div class="card-body"> <div class="card-body">
<!-- 제목 입력 --> <!-- 제목 입력 -->
<FormInput <FormInput title="제목" name="title" :is-essential="true" :is-alert="titleAlert" v-model="title" />
title="제목"
name="title" <!-- 첨부파일 업로드 -->
:is-essential="true" <FormFile
:is-alert="titleAlert" title="첨부파일"
v-model="title" name="files"
:is-alert="attachFilesAlert"
@update:data="handleFileUpload"
@update:isValid="isFileValid = $event"
/> />
<!-- 실시간 반영된 파일 개수 표시 -->
<div>
<p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
<p v-if="fileError" class="text-danger">{{ fileError }}</p>
<ul class="list-group mb-2" v-if="attachFiles.length">
<li
v-for="(file, index) in attachFiles"
:key="index"
class="list-group-item d-flex justify-content-between align-items-center"
>
{{ file.name }}
<button class="close-btn" @click="removeFile(index, file)">✖</button>
</li>
</ul>
</div>
<!-- 내용 입력 --> <!-- 내용 입력 -->
<div class="mb-4"> <div class="mb-4">
<label for="html5-tel-input" class="col-md-2 col-form-label"> <label for="html5-tel-input" class="col-md-2 col-form-label">
내용 내용
<span class="text-red">*</span> <span class="text-red">*</span>
<div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''"> <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
내용을 확인해주세요.
</div>
</label> </label>
<div class="col-md-12"> <div class="col-md-12">
<QEditor v-model="content" /> <QEditor
v-if="contentLoaded"
@update:data="content = $event"
@update:imageUrls="imageUrls = $event"
:initialData="content"
/>
</div> </div>
</div> </div>
@ -48,95 +71,167 @@
</template> </template>
<script setup> <script setup>
import QEditor from '@c/editor/QEditor.vue'; import QEditor from '@c/editor/QEditor.vue';
import FormInput from '@c/input/FormInput.vue'; import FormInput from '@c/input/FormInput.vue';
import { ref, onMounted } from 'vue'; import FormFile from '@c/input/FormFile.vue';
import { useRoute, useRouter } from 'vue-router'; import { ref, onMounted, computed, watch } from 'vue';
import axios from '@api'; import { useRoute, useRouter } from 'vue-router';
import axios from '@api';
// 상태 변수 // 상태 변수
const title = ref(''); const title = ref('');
const content = ref(''); const content = ref('');
// 경고 상태 // 경고 상태
const titleAlert = ref(false); const titleAlert = ref(false);
const contentAlert = ref(false); const contentAlert = ref(false);
const contentLoaded = ref(false);
// 라우터 // 라우터
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기 const currentBoardId = ref(route.params.id); // 라우트에서 ID 가져오기
console.log(currentBoardId.value)
// 게시물 데이터 로드
const fetchBoardDetails = async () => {
try {
const response = await axios.get(`board/${currentBoardId.value}`);
const data = response.data.data.boardDetail;
if (!data) { // 파일
console.error('API에서 게시물 데이터를 반환하지 않았습니다.'); const maxFiles = 5;
const maxSize = 10 * 1024 * 1024;
const attachFiles = ref([]);
const fileError = ref('');
const attachFilesAlert = ref(false);
const isFileValid = ref(true);
const delFileIdx = ref([]); // 제외할 기존 첨부파일 ID
const additionalFiles = ref([]); // 새로 추가할 첨부파일
// 게시물 데이터 로드
const fetchBoardDetails = async () => {
try {
const response = await axios.get(`board/${currentBoardId.value}`);
const data = response.data.data;
// 기존 첨부파일 추가
if (data.hasAttachment && data.attachments.length > 0) {
attachFiles.value = addDisplayFileName([...data.attachments]);
}
// 데이터 설정
title.value = data.title || '제목 없음';
content.value = data.content || '내용 없음';
contentLoaded.value = true;
} catch (error) {
console.error('게시물 가져오기 오류:', error.response || error.message);
}
};
// 기존 첨부파일명을 노출
const addDisplayFileName = fileInfos =>
fileInfos.map(file => ({
...file,
name: `${file.originalName}.${file.extension}`,
}));
// 목록 페이지로 이동
const goList = () => {
router.push('/board');
};
// 게시물 수정
const updateBoard = async () => {
// 유효성 검사
if (!title.value) {
titleAlert.value = true;
return; return;
} }
titleAlert.value = false;
// 데이터 설정 if (!content.value) {
title.value = data.title || '제목 없음'; contentAlert.value = true;
content.value = data.content || '내용 없음'; return;
}
contentAlert.value = false;
} catch (error) { try {
console.error('게시물 가져오기 오류:', error.response || error.message); // 수정 데이터 전송
} const boardData = {
}; LOCBRDTTL: title.value,
LOCBRDCON: JSON.stringify(content.value),
LOCBRDSEQ: currentBoardId.value,
};
// 목록 페이지로 이동 if (delFileIdx.value && delFileIdx.value.length > 0) {
const goList = () => { boardData.delFileIdx = [...delFileIdx.value];
router.push('/board'); }
};
// 게시물 수정 const fileArray = newFileFilter(attachFiles);
const updateBoard = async () => { const formData = new FormData();
// 유효성 검사
if (!title.value) {
titleAlert.value = true;
return;
}
titleAlert.value = false;
if (!content.value) { Object.entries(boardData).forEach(([key, value]) => {
contentAlert.value = true; formData.append(key, value);
return; });
}
contentAlert.value = false;
try { fileArray.forEach((file, idx) => {
// 수정 데이터 전송 formData.append('files', file);
const boardData = { });
LOCBRDTTL: title.value,
LOCBRDCON: content.value,
};
await axios.put(`board/${currentBoardId.value}`, boardData); await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
alert('게시물이 수정되었습니다.'); alert('게시물이 수정되었습니다.');
goList(); goList();
} catch (error) { } catch (error) {
console.error('게시물 수정 중 오류 발생:', error); console.error('게시물 수정 중 오류 발생:', error);
alert('게시물 수정에 실패했습니다.'); alert('게시물 수정에 실패했습니다.');
} }
}; };
// 컴포넌트 마운트 시 데이터 로드 ////////////////// fileSection[S] ////////////////////
onMounted(() => { const fileCount = computed(() => attachFiles.value.length);
if (currentBoardId.value) {
fetchBoardDetails(); const handleFileUpload = files => {
} else { const validFiles = files.filter(file => file.size <= maxSize);
console.error('잘못된 게시물 ID:', currentBoardId.value);
} if (files.some(file => file.size > maxSize)) {
}); fileError.value = '파일 크기가 10MB를 초과할 수 없습니다.';
return;
}
if (attachFiles.value.length + validFiles.length > maxFiles) {
fileError.value = `최대 ${maxFiles}개의 파일만 업로드할 수 있습니다.`;
return;
}
fileError.value = '';
attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
};
const removeFile = (index, file) => {
if (file.id) delFileIdx.value.push(file.id);
attachFiles.value.splice(index, 1);
if (attachFiles.value.length <= maxFiles) {
fileError.value = '';
}
};
watch(attachFiles, () => {
isFileValid.value = attachFiles.value.length <= maxFiles;
});
const newFileFilter = attachFiles => {
const copyFiles = [...attachFiles.value];
return copyFiles.filter(item => !item.id);
};
////////////////// fileSection[E] ////////////////////
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
if (currentBoardId.value) {
fetchBoardDetails();
} else {
console.error('잘못된 게시물 ID:', currentBoardId.value);
}
});
</script> </script>
<style> <style>
.text-red { .text-red {
color: red; color: red;
text-align: center; text-align: center;
} }
</style> </style>

1253
src/views/board/BoardView.vue
View File

File diff suppressed because it is too large Load Diff