Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front
This commit is contained in:
commit
22a089f97f
@ -2,7 +2,7 @@ import axios from "axios";
|
||||
import router from "@/router/index";
|
||||
|
||||
const $api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
baseURL: 'http://localhost:10325/api/',
|
||||
timeout: 300000,
|
||||
withCredentials : true
|
||||
})
|
||||
|
||||
@ -36,6 +36,7 @@ import BoardComentArea from './BoardComentArea.vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import Pagination from '../pagination/Pagination.vue';
|
||||
import PlusButton from '../button/PlusBtn.vue';
|
||||
import { defineEmits } from 'vue';
|
||||
|
||||
const comment = ref(false);
|
||||
|
||||
@ -43,6 +44,9 @@ const toggleComment = () => {
|
||||
comment.value = !comment.value
|
||||
};
|
||||
|
||||
// emits 정의
|
||||
const emit = defineEmits(['submitComment']);
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -51,6 +51,10 @@ defineProps({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
attachments: {
|
||||
type: Array, // 첨부파일 배열 타입
|
||||
default: () => [], // 기본값 설정
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -59,4 +63,4 @@ defineProps({
|
||||
.min-250 {
|
||||
min-height: 250px !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -24,72 +24,98 @@
|
||||
</div>
|
||||
<div class="ms-auto btn-area">
|
||||
<template v-if="showDetail">
|
||||
<EditButton />
|
||||
<DeleteButton />
|
||||
<EditButton @click="handleEdit" />
|
||||
<DeleteButton @click="handleDelete" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="author">
|
||||
<button class="btn author btn-label-primary btn-icon">
|
||||
<button class="btn author btn-label-primary btn-icon" @click="handleEdit">
|
||||
<i class='bx bx-edit-alt'></i>
|
||||
</button>
|
||||
<button class="btn author btn-label-primary btn-icon">
|
||||
<i class='bx bx-trash' ></i>
|
||||
<button class="btn author btn-label-primary btn-icon" @click="handleDelete">
|
||||
<i class='bx bx-trash'></i>
|
||||
</button>
|
||||
</template>
|
||||
<BoardRecommendBtn :likeClicked="true" :dislikeClicked="false"/>
|
||||
<BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from '@api';
|
||||
import DeleteButton from '../button/DeleteBtn.vue';
|
||||
import EditButton from '../button/EditBtn.vue';
|
||||
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
// Vue Router 인스턴스
|
||||
const router = useRouter();
|
||||
|
||||
// Props 정의
|
||||
defineProps({
|
||||
profileName : {
|
||||
profileName: {
|
||||
type: String,
|
||||
default: '익명',
|
||||
},
|
||||
unknown : {
|
||||
unknown: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showDetail : {
|
||||
showDetail: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
author : {
|
||||
author: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const boardId = 100; //수정필요!!
|
||||
// 수정 버튼 핸들러
|
||||
const handleEdit = () => {
|
||||
router.push({ name: 'BoardEdit', params: { id: boardId } });
|
||||
};
|
||||
|
||||
// 삭제 버튼 핸들러
|
||||
const handleDelete = async () => {
|
||||
if (confirm('정말 이 게시물을 삭제하시겠습니까?')) {
|
||||
try {
|
||||
await axios.delete(`board/${boardId}`);
|
||||
alert('게시물이 성공적으로 삭제되었습니다.');
|
||||
router.push({ name: 'BoardList' });
|
||||
} catch (error) {
|
||||
console.error('게시물 삭제 중 오류 발생:', error);
|
||||
alert('게시물 삭제에 실패했습니다.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-detail span ~ span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.profile-detail span ~ span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.ms-auto button + button {
|
||||
margin-left: 5px;
|
||||
.ms-auto button + button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.btn.author {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.btn-area {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn.author {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:450px) {
|
||||
.btn-area {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn.author {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -67,7 +67,7 @@ import dayGridPlugin from '@fullcalendar/daygrid';
|
||||
import interactionPlugin from '@fullcalendar/interaction';
|
||||
import CenterModal from '@c/modal/CenterModal.vue';
|
||||
import { inject, onMounted, reactive, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import axios from '@api';
|
||||
import { isEmpty } from '@/common/utils';
|
||||
import FormInput from '../input/FormInput.vue';
|
||||
import FlatPickr from 'vue-flatpickr-component';
|
||||
|
||||
@ -5,22 +5,26 @@
|
||||
<span :class="isEssential ? 'text-red' : 'none'">*</span>
|
||||
</label>
|
||||
<div class="col-md-10">
|
||||
<input :id="name"
|
||||
<input
|
||||
:id="name"
|
||||
class="form-control"
|
||||
:type="type"
|
||||
@input="updateInput"
|
||||
:value="value"
|
||||
v-model="inputValue"
|
||||
:maxLength="maxlength"
|
||||
:placeholder="title" />
|
||||
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">{{ title }}을 확인해주세요.</div>
|
||||
:placeholder="title"
|
||||
/>
|
||||
<div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
|
||||
{{ title }}을 확인해주세요.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
const prop = defineProps({
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '라벨',
|
||||
@ -34,39 +38,42 @@ const prop = defineProps({
|
||||
isEssential: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
required: false,
|
||||
},
|
||||
value: {
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
require: false,
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: 30,
|
||||
required: false,
|
||||
},
|
||||
isAlert : {
|
||||
isAlert: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const emits = defineEmits(['update:data'])
|
||||
// Emits 정의
|
||||
const emits = defineEmits(['update:modelValue']);
|
||||
|
||||
const updateInput = function (event) {
|
||||
//Type Number 일때 maxlength 적용 안됨 방지
|
||||
if (event.target.value.length > prop.maxlength) {
|
||||
event.target.value = event.target.value.slice(0, prop.maxlength);
|
||||
// 로컬 상태로 사용하기 위한 `inputValue`
|
||||
const inputValue = ref(props.modelValue);
|
||||
|
||||
// 부모로 데이터 업데이트
|
||||
watch(inputValue, (newValue) => {
|
||||
emits('update:modelValue', newValue);
|
||||
});
|
||||
|
||||
// 초기값 동기화
|
||||
watch(() => props.modelValue, (newValue) => {
|
||||
if (inputValue.value !== newValue) {
|
||||
inputValue.value = newValue;
|
||||
}
|
||||
emits('update:data', event.target.value);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,23 +1,38 @@
|
||||
<template>
|
||||
<div class="" role="button">
|
||||
<div class="card">
|
||||
<div class="d-sm-flex">
|
||||
<div v-if="img">
|
||||
<img class="card-img card-img-left" :src="img" alt="" style="width: 200px; height: 200px; object-fit: cover" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title align-items-center">
|
||||
<slot name="badgeType"></slot>
|
||||
{{ title }}
|
||||
</h5>
|
||||
<p class="card-text str_wrap pt-5">
|
||||
{{ content }}
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-muted">{{ date }}</small>
|
||||
<slot name="optInfo"></slot>
|
||||
</p>
|
||||
<div class="card mb-3 shadow-sm">
|
||||
<div class="row g-0">
|
||||
<!-- 이미지 섹션 -->
|
||||
<div v-if="img" class="col-md-2">
|
||||
<img
|
||||
:src="img"
|
||||
alt="이미지"
|
||||
class="img-fluid rounded-start"
|
||||
style="object-fit: cover; height: 100%; width: 100%;"
|
||||
/>
|
||||
</div>
|
||||
<!-- 게시물 내용 섹션 -->
|
||||
<div class="col-md-10">
|
||||
<div class="card-body">
|
||||
<!-- 태그 -->
|
||||
<h6 class="badge rounded-pill bg-primary text-white mb-2">
|
||||
{{ category }}
|
||||
</h6>
|
||||
<!-- 제목 -->
|
||||
<h5 class="card-title">{{ title }}</h5>
|
||||
<!-- 본문 -->
|
||||
<p class="card-text str_wrap">{{ content }}</p>
|
||||
<!-- 날짜 -->
|
||||
<div class="d-flex justify-content-between">
|
||||
<small class="text-muted">{{ formatDate(date) }}</small>
|
||||
<!-- 좋아요와 댓글 -->
|
||||
<div>
|
||||
<span class="text-muted me-3">
|
||||
<i class="bx bx-like"></i> {{ likes || 0 }}
|
||||
</span>
|
||||
<span class="text-muted">
|
||||
<i class="bx bx-comment"></i> {{ comments || 0 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -25,41 +40,79 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// const data = defineProps(['item']);
|
||||
const prop = defineProps({
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
img: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
category: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '제목',
|
||||
required: true,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: '내용',
|
||||
required: true,
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
default: 'date',
|
||||
required: true,
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
required: false,
|
||||
likes: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const colSetting = () => {
|
||||
img ? 'col-9' : '';
|
||||
};
|
||||
comments: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
|
||||
date.getDate()
|
||||
).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(
|
||||
date.getMinutes()
|
||||
).padStart(2, "0")}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.str_wrap {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
/* 카드 스타일 */
|
||||
.card {
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* 텍스트 줄임 표시 */
|
||||
.str_wrap {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* 이미지 스타일 */
|
||||
.img-fluid {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
|
||||
/* 태그 배지 스타일 */
|
||||
.badge {
|
||||
font-size: 0.8rem;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
37
src/components/list/BoardCardList.vue
Normal file
37
src/components/list/BoardCardList.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="container mt-4">
|
||||
<div v-if="posts.length === 0" class="text-center">
|
||||
게시물이 없습니다.
|
||||
</div>
|
||||
<div v-for="post in posts" :key="post.id">
|
||||
<BoardCard
|
||||
:img="post.img"
|
||||
:category="post.category"
|
||||
:title="post.title"
|
||||
:content="post.content"
|
||||
:date="post.date"
|
||||
:likes="post.likes"
|
||||
:comments="post.comments"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BoardCard from './BoardCard.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BoardCard,
|
||||
},
|
||||
props: {
|
||||
posts: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,5 +1,4 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import BoardWrite from '@v/board/BoardWrite.vue';
|
||||
|
||||
// 초기 렌더링 속도를 위해 지연 로딩 사용
|
||||
const routes = [
|
||||
@ -14,6 +13,7 @@ const routes = [
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'BoardList',
|
||||
component: () => import('@v/board/BoardList.vue')
|
||||
},
|
||||
{
|
||||
@ -21,8 +21,14 @@ const routes = [
|
||||
component: () => import('@v/board/BoardWrite.vue')
|
||||
},
|
||||
{
|
||||
path: 'get/:id',
|
||||
path: ':id',
|
||||
name: 'BoardDetail',
|
||||
component: () => import('@v/board/BoardView.vue')
|
||||
},
|
||||
{
|
||||
path: 'edit/:id',
|
||||
name: 'BoardEdit',
|
||||
component: () => import('@v/board/BoardEdit.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import axios from '@api';
|
||||
|
||||
const events = ref([]);
|
||||
|
||||
const fetchEvents = async () => {
|
||||
const response = await axios.get('/api/calendar/events');
|
||||
const response = await axios.get('/calendar/events');
|
||||
events.value = response.data;
|
||||
};
|
||||
|
||||
const addEvent = async (event) => {
|
||||
await axios.post('/api/calendar/event', event);
|
||||
await axios.post('/calendar/event', event);
|
||||
fetchEvents();
|
||||
};
|
||||
|
||||
|
||||
146
src/views/board/BoardEdit.vue
Normal file
146
src/views/board/BoardEdit.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<div class="card">
|
||||
<div class="pb-4 rounded-top">
|
||||
<div class="container py-12 px-xl-10 px-4" style="padding-bottom: 0px !important">
|
||||
<h3 class="text-center mb-2 mt-4">글 수정</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-12">
|
||||
<div class="card-body">
|
||||
<!-- 제목 입력 -->
|
||||
<FormInput
|
||||
title="제목"
|
||||
name="title"
|
||||
:is-essential="true"
|
||||
:is-alert="titleAlert"
|
||||
v-model="title"
|
||||
/>
|
||||
|
||||
<!-- 내용 입력 -->
|
||||
<div class="mb-4">
|
||||
<label for="html5-tel-input" class="col-md-2 col-form-label">
|
||||
내용
|
||||
<span class="text-red">*</span>
|
||||
<div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">
|
||||
내용을 확인해주세요.
|
||||
</div>
|
||||
</label>
|
||||
<div class="col-md-12">
|
||||
<QEditor v-model="content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 버튼 -->
|
||||
<div class="mb-4 d-flex justify-content-end">
|
||||
<button type="button" class="btn btn-info right" @click="goList">
|
||||
<i class="bx bx-left-arrow-alt"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary ms-1" @click="updateBoard">
|
||||
<i class="bx bx-check"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import QEditor from '@c/editor/QEditor.vue';
|
||||
import FormInput from '@c/input/FormInput.vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import axios from '@api';
|
||||
|
||||
// 상태 변수
|
||||
const title = ref('');
|
||||
const content = ref('');
|
||||
|
||||
// 경고 상태
|
||||
const titleAlert = ref(false);
|
||||
const contentAlert = ref(false);
|
||||
|
||||
// 라우터
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
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에서 게시물 데이터를 반환하지 않았습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 데이터 설정
|
||||
title.value = data.title || '제목 없음';
|
||||
content.value = data.content || '내용 없음';
|
||||
|
||||
} catch (error) {
|
||||
console.error('게시물 가져오기 오류:', error.response || error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// 목록 페이지로 이동
|
||||
const goList = () => {
|
||||
router.push('/board');
|
||||
};
|
||||
|
||||
// 게시물 수정
|
||||
const updateBoard = async () => {
|
||||
// 유효성 검사
|
||||
if (!title.value) {
|
||||
titleAlert.value = true;
|
||||
return;
|
||||
}
|
||||
titleAlert.value = false;
|
||||
|
||||
if (!content.value) {
|
||||
contentAlert.value = true;
|
||||
return;
|
||||
}
|
||||
contentAlert.value = false;
|
||||
|
||||
try {
|
||||
// 수정 데이터 전송
|
||||
const boardData = {
|
||||
LOCBRDTTL: title.value,
|
||||
LOCBRDCON: content.value,
|
||||
};
|
||||
|
||||
await axios.put(`board/${currentBoardId.value}`, boardData);
|
||||
|
||||
alert('게시물이 수정되었습니다.');
|
||||
goList();
|
||||
} catch (error) {
|
||||
console.error('게시물 수정 중 오류 발생:', error);
|
||||
alert('게시물 수정에 실패했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
// 컴포넌트 마운트 시 데이터 로드
|
||||
onMounted(() => {
|
||||
if (currentBoardId.value) {
|
||||
fetchBoardDetails();
|
||||
} else {
|
||||
console.error('잘못된 게시물 ID:', currentBoardId.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.text-red {
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.display-block {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@ -1,30 +1,15 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<search-bar @update:data="search" />
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="mt-8">
|
||||
<router-link to="/board/write">
|
||||
<WriteButton />
|
||||
</router-link>
|
||||
</div>
|
||||
<template v-for="(item, index) in list" :key="item.id">
|
||||
<board-card :title="item.title" :content="item.content" :img="item.img" :date="item.date" @click="goDetail(item.id)">
|
||||
<template #badgeType>
|
||||
<span v-if="item.type == 1" class="badge rounded-pill bg-label-danger">공지</span>
|
||||
<span v-else-if="item.type == 2" class="badge rounded-pill bg-label-primary">자유</span>
|
||||
<span v-else-if="item.type == 3" class="badge rounded-pill bg-label-success">익명</span>
|
||||
</template>
|
||||
<template #optInfo>
|
||||
<small v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
|
||||
><i class="fa-regular fa-eye"></i> {{ item.viewCount }}
|
||||
</small>
|
||||
<small v-show="item.cmtCount" style="padding-left: 10px" class="text-muted"
|
||||
><i class="fa-regular fa-comment-dots"></i> {{ item.cmtCount }}
|
||||
</small>
|
||||
</template>
|
||||
</board-card>
|
||||
</template>
|
||||
|
||||
<board-card :posts="filteredList" @click="goDetail" />
|
||||
|
||||
<div class="mt-8">
|
||||
<pagination />
|
||||
</div>
|
||||
@ -33,25 +18,58 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import BoardCard from '@c/list/BoardCard.vue';
|
||||
import Pagination from '@c/pagination/Pagination.vue';
|
||||
import SearchBar from '@c/search/SearchBar.vue';
|
||||
import router from '@/router';
|
||||
import dummy from '@a/boardDummy.json';
|
||||
import WriteButton from '@c/button/WriteBtn.vue';
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import BoardCard from '@/components/list/BoardCardList.vue';
|
||||
import Pagination from '@c/pagination/Pagination.vue';
|
||||
import SearchBar from '@c/search/SearchBar.vue';
|
||||
import router from '@/router';
|
||||
import WriteButton from '@c/button/WriteBtn.vue';
|
||||
import axios from '@api';
|
||||
|
||||
const list = ref(dummy);
|
||||
const searchText = ref('');
|
||||
// 데이터 초기화
|
||||
const list = ref([]);
|
||||
const searchText = ref('');
|
||||
|
||||
/** 상세로 이동 */
|
||||
const goDetail = idx => {
|
||||
router.push(`/board/get/${idx}`);
|
||||
};
|
||||
// 상세 페이지 이동
|
||||
const goDetail = (id) => {
|
||||
router.push({ name: 'BoardDetail', params: { id } });
|
||||
};
|
||||
|
||||
// 검색 처리
|
||||
const search = (e) => {
|
||||
searchText.value = e.trim();
|
||||
};
|
||||
|
||||
// 검색 결과 필터링
|
||||
const filteredList = computed(() =>
|
||||
list.value.filter((item) =>
|
||||
item.title.toLowerCase().includes(searchText.value.toLowerCase())
|
||||
)
|
||||
);
|
||||
|
||||
// 게시물 데이터 로드
|
||||
const fetchPosts = async () => {
|
||||
const response = await axios.get("board/general");
|
||||
console.log(response.data.data.list)
|
||||
if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
|
||||
list.value = response.data.data.list.map((post) => ({
|
||||
...post,
|
||||
img: post.img || null,
|
||||
likes: post.likes || 0,
|
||||
comments: post.comments || 0,
|
||||
}));
|
||||
} else {
|
||||
console.error("Unexpected API response structure:", response.data);
|
||||
}
|
||||
};
|
||||
|
||||
// 데이터 로드
|
||||
onMounted(() => {
|
||||
fetchPosts();
|
||||
});
|
||||
|
||||
const search = e => {
|
||||
console.log('검색:', e);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style>
|
||||
/* 필요에 따라 스타일 추가 */
|
||||
</style>
|
||||
|
||||
@ -3,15 +3,32 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<!-- 프로필 헤더 -->
|
||||
<div class="card-header">
|
||||
<BoardProfile profileName="만드레야2"/>
|
||||
<BoardProfile :boardId="currentBoardId.value" :profileName="profileName" />
|
||||
</div>
|
||||
<!-- 게시글 내용 -->
|
||||
<div class="card-body">
|
||||
<BoardContent boardTitle="제목1" boardContent="내용1" :dropdownItems="dropdownItems" />
|
||||
<BoardComentArea />
|
||||
<h5 class="mb-4">{{ boardTitle }}</h5>
|
||||
<!-- HTML 콘텐츠 렌더링 -->
|
||||
<div class="board-content" v-html="boardContent"></div>
|
||||
<!-- 첨부파일 목록 -->
|
||||
<ul v-if="attachments.length" class="attachments mt-4">
|
||||
<li v-for="(attachment, index) in attachments" :key="index">
|
||||
<a :href="attachment.url" target="_blank">{{ attachment.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 댓글 영역 -->
|
||||
<BoardComentArea :comments="comments" />
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<BoardComment />
|
||||
<!-- 수정 버튼 -->
|
||||
<div class="card-footer d-flex justify-content-end">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="goToEditPage"
|
||||
>
|
||||
글 수정
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -21,16 +38,51 @@
|
||||
|
||||
<script setup>
|
||||
import BoardComentArea from '@c/board/BoardComentArea.vue';
|
||||
import BoardComment from '@c/board/BoardComment.vue';
|
||||
import BoardContent from '@c/board/BoardContent.vue';
|
||||
import BoardProfile from '@c/board/BoardProfile.vue';
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import axios from '@api';
|
||||
|
||||
const dropdownItems = ref([
|
||||
{ label: '내용1'},
|
||||
{ label: '내용2'},
|
||||
{ label: '내용3'},
|
||||
]);
|
||||
// 게시물 데이터 상태
|
||||
const profileName = ref('익명 사용자');
|
||||
const boardTitle = ref('제목 없음');
|
||||
const boardContent = ref('내용 없음');
|
||||
const comments = ref([]);
|
||||
const attachments = ref([]);
|
||||
|
||||
// 라우트에서 ID 가져오기
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const currentBoardId = ref(Number(route.params.id));
|
||||
console.log(currentBoardId.value)
|
||||
|
||||
// 글 수정 페이지로 이동
|
||||
const goToEditPage = () => {
|
||||
router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
|
||||
};
|
||||
|
||||
// 게시물 상세 데이터 불러오기
|
||||
const fetchBoardDetails = async () => {
|
||||
try {
|
||||
const response = await axios.get(`board/${currentBoardId.value}`);
|
||||
const data = response.data.data;
|
||||
|
||||
// API 응답 데이터 반영
|
||||
const boardDetail = data.boardDetail || {};
|
||||
profileName.value = boardDetail.author || '익명 사용자';
|
||||
boardTitle.value = boardDetail.title || '제목 없음';
|
||||
boardContent.value = boardDetail.content || '내용 없음';
|
||||
|
||||
attachments.value = data.attachments || [];
|
||||
comments.value = data.comments || [];
|
||||
} catch (error) {
|
||||
console.error('게시물 가져오기 오류:', error);
|
||||
alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
|
||||
}
|
||||
};
|
||||
|
||||
// 컴포넌트 마운트 시 데이터 로드
|
||||
onMounted(() => {
|
||||
fetchBoardDetails();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -55,9 +55,10 @@ import FormSelect from '@c/input/FormSelect.vue';
|
||||
import FormFile from '@c/input/FormFile.vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import router from '@/router';
|
||||
import axios from '@api';
|
||||
|
||||
const categoryList = ['자유', '익명', '공지사항'];
|
||||
// input 경고문 만들어야함
|
||||
// input 경고문 만들어야함!!
|
||||
const title = ref('');
|
||||
const password = ref('');
|
||||
const category = ref(0);
|
||||
@ -76,9 +77,81 @@ const goList = () => {
|
||||
router.push('/board');
|
||||
};
|
||||
|
||||
const write = () => {
|
||||
console.log('작성');
|
||||
const write = async () => {
|
||||
// 입력값 유효성 검사
|
||||
if (!title.value) {
|
||||
titleAlert.value = true;
|
||||
return;
|
||||
} else {
|
||||
titleAlert.value = false;
|
||||
}
|
||||
|
||||
if (category.value === 1 && !password.value) {
|
||||
passwordAlert.value = true;
|
||||
return;
|
||||
} else {
|
||||
passwordAlert.value = false;
|
||||
}
|
||||
|
||||
if (!content.value) {
|
||||
contentAlert.value = true;
|
||||
return;
|
||||
} else {
|
||||
contentAlert.value = false;
|
||||
}
|
||||
|
||||
try {
|
||||
// 게시물 작성 데이터 준비
|
||||
const boardData = {
|
||||
LOCBRDTTL: title.value,
|
||||
LOCBRDCON: content.value,
|
||||
LOCBRDPWD: category.value === 1 ? password.value : null,
|
||||
LOCBRDTYP: category.value === 1 ? 'S' : 'F', //공지사항 추가해야함!!
|
||||
// MEMBERSEQ: 로그인이용자 id(세션)
|
||||
};
|
||||
|
||||
// 게시물 작성 API 호출
|
||||
const { data: boardResponse } = await axios.post('board', boardData);
|
||||
const boardId = boardResponse.data.boardId;
|
||||
|
||||
// 첨부파일 처리
|
||||
if (attachFiles.value && attachFiles.value.length > 0) {
|
||||
for (const file of attachFiles.value) {
|
||||
const realName = file.name.substring(0, file.name.lastIndexOf('.'));
|
||||
const fileInfo = {
|
||||
path: "/uploads", // 파일 경로 (수정 필요)
|
||||
originalName: realName, // 확장자를 제외한 파일명
|
||||
extension: file.name.split('.').pop(), // 파일 확장자
|
||||
registrantId: 1, // 등록자 ID (수정 필요)
|
||||
};
|
||||
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("file", file); // 첨부 파일
|
||||
formData.append("CMNFLEPAT", fileInfo.path); // 파일 경로
|
||||
formData.append("CMNFLENAM", fileInfo.originalName); // 파일 명(확장자제외)
|
||||
formData.append("CMNFLEORG", fileInfo.originalName); // 원본 파일명(확장자제외)
|
||||
formData.append("CMNFLEEXT", fileInfo.extension); // 파일 확장자
|
||||
formData.append("CMNFLESIZ", file.size); // 파일 크기
|
||||
formData.append("CMNFLEREG", fileInfo.registrantId); // 등록자 ID
|
||||
|
||||
const response = await axios.post(`board/${boardId}/attachments`, formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
alert("게시물이 작성되었습니다.");
|
||||
goList();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("게시물 작성 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user