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

Merge branch 'main' into project-list

Browse Source
This commit is contained in:
yoon 2025-02-10 14:47:04 +09:00
commit 2e270291f5
6 changed files with 179 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/common/axios-interceptor.js
View File

@ -1,5 +1,5 @@
import axios from "axios";
import router from "@/router/index";
import { useToastStore } from '@s/toastStore';
const $api = axios.create({
baseURL: 'http://localhost:10325/api/',
@ -30,13 +30,41 @@ $api.interceptors.request.use(
// 응답 인터셉터 추가하기
$api.interceptors.response.use(
function (response) {
// 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
// 응답 데이터가 있는 작업 수행
// 2xx 범위의 응답 처리
return response;
}, function (error) {
// 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
// 응답 오류가 있는 작업 수행
},
function (error) {
const toastStore = useToastStore()
// 오류 응답 처리
if (error.response) {
switch (error.response.status) {
case 401:
toastStore.onToast('아이디 혹은 비밀번호가 틀렸습니다.', 'e');
break;
case 403:
toastStore.onToast('접근 권한이 없습니다.', 'e');
break;
case 404:
toastStore.onToast('요청한 페이지를 찾을 수 없습니다.', 'e');
break;
case 500:
toastStore.onToast('서버 오류가 발생했습니다.', 'e');
break;
default:
toastStore.onToast('알 수 없는 오류가 발생했습니다.', 'e');
}
} else if (error.request) {
// 요청이 전송되었으나 응답을 받지 못한 경우
toastStore.onToast('서버와 통신할 수 없습니다.', 'e');
} else {
// 요청 설정 중에 오류가 발생한 경우
toastStore.onToast('요청 중 오류가 발생했습니다.', 'e');
}
return Promise.reject(error);
});
}
);
export default $api;

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

@ -21,8 +21,28 @@
</div>
<div class="ms-auto btn-area">
<template v-if="showDetail">
<div class="text-end">
<EditButton @click="handleEdit" />
<DeleteButton @click="handleDelete" />
<div class="input-group mt-3" v-if="isPassword && unknown">
<input
type="password"
v-model="password"
class="form-control"
placeholder="비밀번호 입력"
/>
<!-- <input
type="password"
class="form-control"
placeholder="비밀번호 입력"
:is-alert="idAlert"
@update:data="handleIdChange"
:value="id"
/> -->
<button class="btn btn-primary" type="button" @click="handlePasswordSubmit">확인</button>
</div>
</div>
</template>
<template v-else>
<template v-if="author">
@ -42,7 +62,7 @@
</template>
<script setup>
import { computed, defineProps } from 'vue';
import { ref, onMounted, defineProps } from 'vue';
import { useRouter } from 'vue-router';
import axios from '@api';
import DeleteButton from '../button/DeleteBtn.vue';
@ -54,6 +74,10 @@ const router = useRouter();
// Props 정의
const props = defineProps({
boardId: {
type: Number,
required: true
},
profileName: {
type: String,
default: '익명',
@ -88,26 +112,82 @@ const props = defineProps({
}
});
const boardId = 100; //수정필요!!
// 수정 버튼 핸들러
const isPassword = ref(false);
const password = ref('');
const lastClickedButton = ref('');
const boardId = 100; //수정필요!
const emit = defineEmits(['togglePasswordInput']);
// 수정 버튼
const handleEdit = () => {
router.push({ name: 'BoardEdit', params: { id: boardId } });
// router.push({ name: 'BoardEdit', params: { id: boardId } });
if (props.unknown) {
togglePassword('edit');
} else {
router.push({ name: 'BoardEdit', params: { id: 100 } }); // 로그인한 경우 바로 편집
}
};
// 삭제 버튼 핸들러
const handleDelete = async () => {
if (confirm('정말 이 게시물을 삭제하시겠습니까?')) {
// 삭제 버튼
const handleDelete = () => {
if (props.unknown) {
togglePassword('delete');
} else {
deletePost(); // 로그인한 경우 바로 삭제
}
};
// 비밀번호 입력 토글
const togglePassword = (button) => {
if (lastClickedButton.value === button) {
isPassword.value = !isPassword.value;
} else {
isPassword.value = true;
}
lastClickedButton.value = button;
};
// 비밀번호 확인
const handlePasswordSubmit = () => {
isPassword.value = false;
lastClickedButton.value = null;
console.log('비밀번호:', password.value);
// router.push({ name: 'BoardEdit', params: { id: props.boardId } }); // 편집 예시
};
const deletePost = async () => {
if (confirm('정말 삭제하시겠습니까?')) {
try {
await axios.delete(`board/${boardId}`);
alert('게시물이 성공적으로 삭제되었습니다.');
await axios.delete(`board/100`);
alert('게시물이 삭제되었습니다.');
router.push({ name: 'BoardList' });
} catch (error) {
console.error('게시물 삭제 중 오류 발생:', error);
alert('게시물 삭제에 실패했습니다.');
alert('삭제 중 오류 발생');
}
}
};
// const fetchBoardDetails = async () => {
// try {
// const response = await axios.get(`board/${props.boardId}`);
// console.log(response.data);
// } catch (error) {
// console.error('게시물 데이터 불러오기 오류:', error);
// }
// };
// onMounted(() => {
// // fetchBoardDetails();
// });
</script>
<style scoped>

27
src/components/button/BoardRecommendBtn.vue
View File

@ -62,28 +62,17 @@ watch(() => props.dislikeCount, (newVal) => {
});
const handleLike = () => {
// console.log('adadasd')
// likeClicked.value = !likeClicked.value;
// likeCount.value += likeClicked.value ? 1 : -1;
emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
// if(likeClicked.value === true){
// if(dislikeClicked.value === true) {
// dislikeClicked.value = false;
// dislikeCount.value += -1
// }
// }
console.log('좋아요',likeCount.value)
// emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
// likeClicked.value = true;
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: true, isDislike: false });
};
const handleDislike = () => {
// dislikeClicked.value = !dislikeClicked.value;
// dislikeCount.value += dislikeClicked.value ? 1 : -1;
emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
// if(dislikeClicked.value === true){
// if(likeClicked.value === true) {
// likeClicked.value = false;
// likeCount.value += -1
// }
// }
console.log('싫어요')
// emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
// dislikeClicked.value = true;
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: false, isDislike: true });
};
</script>

15
src/components/user/LoginForm.vue
View File

@ -63,20 +63,17 @@
};
const handleSubmit = async () => {
const response = await $api.post('user/login', {
$api.post('user/login', {
loginId: id.value,
password: password.value,
remember: remember.value,
});
if (response.status === 200) {
await userStore.userInfo();
})
.then(res => {
if (res.status === 200) {
userStore.userInfo();
router.push('/');
} else {
toastStore.onToast('아이디 혹은 비밀번호가 틀렸습니다.', 'e');
}
})
};
</script>

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

@ -24,7 +24,7 @@
</div>
<!-- 첨부파일 섹션 -->
<div v-if="attachments" class="btn-group">
<div v-if="attachment" class="btn-group">
<button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-download me-2"></i>
첨부파일
@ -51,6 +51,8 @@
:commentId="null"
:likeCount="likes"
:dislikeCount="dislikes"
:likeClicked="likeClicked"
:dislikeClicked="dislikeClicked"
@updateReaction="handleUpdateReaction"
/>
</div>
@ -95,7 +97,6 @@ import axios from '@api';
const profileName = ref('익명 사용자');
const boardTitle = ref('제목 없음');
const boardContent = ref('');
const attachments = ref([]);
const date = ref('');
const views = ref(0);
const likes = ref(0);
@ -107,7 +108,6 @@ const attachment = ref(false);
// 라우트에서 ID 가져오기
const route = useRoute();
const router = useRouter();
const currentBoardId = ref(Number(route.params.id));
// 글 수정 페이지로 이동
@ -124,8 +124,6 @@ const fetchBoardDetails = async () => {
// API 응답 데이터 반영
// const boardDetail = data.boardDetail || {};
// console.log('API Response:', response.data);
profileName.value = data.author || '익명 사용자';
boardTitle.value = data.title || '제목 없음';
boardContent.value = data.content || '';
@ -136,41 +134,46 @@ const fetchBoardDetails = async () => {
attachment.value = data.hasAttachment || null;
comments.value = data.commentCount || 0;
// const response2 = await axios.post(`board/${currentBoardId.value}/password`);
// console.log(response2)
} catch (error) {
alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
}
};
// 좋아요, 싫어요
const handleUpdateReaction = async ({ type, boardId, commentId }) => {
const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
// console.log(type, boardId)
try {
//이거 왜 한건지 찾아보자
const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, { type });
// console.log('API 응답:', response.data);
// console.log(commentId)
const requestData = {
LOCBRDSEQ: boardId,
LOCCMTSEQ: commentId,
MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
LOCGOBGOD: isLike ? 'T' : 'F',
LOCGOBBAD: isDislike ? 'T' : 'F'
};
if (response.data.code === 200) {
if (type === 'like') {
likeClicked.value = !likeClicked.value;
likes.value += likeClicked.value ? 1 : -1;
} else if (type === 'dislike') {
dislikeClicked.value = !dislikeClicked.value;
dislikes.value += dislikeClicked.value ? 1 : -1;
}
} else {
alert('반응 업데이트 실패');
}
// likes.value = response.data.likeCount;
// dislikes.value = response.data.dislikeCount;
console.log(requestData)
// if (type === 'like') {
// likeClicked.value = !likeClicked.value;
// console.log('aaaa' ,response.data)
const postResponse = await axios.post(`/board/${boardId}/${commentId}/reaction`, requestData);
// await axios.post(`board/${boardId}/${commentId}/reaction`, { type });
const response = await axios.get(`board/${boardId}`);
const updatedData = response.data.data;
console.log('post요청 결과:', postResponse.data);
console.log('get요청 결과(좋아요):', response.data.data.likeCount);
likes.value = updatedData.likeCount;
dislikes.value = updatedData.dislikeCount;
likeClicked.value = isLike;
dislikeClicked.value = isDislike;
console.log('반응 결과:', postResponse.data);
// } else if (type === 'dislike') {
// console.log('싫어')
// }
} catch (error) {
alert('반응을 업데이트하는 중 오류 발생');
}
@ -182,6 +185,7 @@ const formattedBoardDate = computed(() => {
return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
});
// 컴포넌트 마운트 시 데이터 로드
onMounted(() => {
fetchBoardDetails();