File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="title-box flex justify-between mb20">
<p class="title">내 사진첩</p>
</div>
<div class="myphoto mb30">
<div>
<div class="title-box flex justify-end mb40">
<p class="class-p">반</p>
<select @change="handleClassChange">
<option
v-for="classItem in classList"
:key="classItem.sclsId"
:value="classItem.sclsId"
>
{{ classItem.sclsNm }}
</option>
</select>
</div>
<div class="btnGroup" style="display: flex; flex-direction: column">
<button
v-for="n in totalPages"
:key="n"
@click="changePage(n)"
type="button"
title="페이지 버튼"
class="tab-btn"
>
<img
v-if="currentPage !== n"
src="../../../resources/img/new_img/photobook/page.png"
alt=""
/>
<img
v-else
src="../../../resources/img/new_img/photobook/page_click.png"
alt=""
/>
<p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
</button>
</div>
<div v-if="selectedTab === 'tab1'" class="tab-box">
<div
class="flex justify-between"
style="margin-right: -82px; margin-left: -47px"
>
<!-- 왼쪽에 4개의 사진 -->
<div class="left-side">
<div
v-for="(photo, index) in (photoList?.result || []).slice(0, 4)"
:key="index"
class="photo"
:style="{ transform: getRotation(index) }"
@click="buttonSearch(photo)"
>
<div class="class">
<div class="box">
<div class="photo-container">
<img
:src="fetchImage(photo.fileRpath)"
alt=""
style="width: 150px"
/>
</div>
</div>
<div class="photo-text mt20 ml30">
<div class="member ml30">{{ photo.likeData }}</div>
<div class="title2-photo">{{ photo.unitName }}</div>
</div>
</div>
</div>
</div>
<!-- 오른쪽에 4개의 사진 -->
<div class="right-side">
<div
v-for="(photo, index) in (photoList?.result || []).slice(4, 8)"
:key="index + 4"
class="photo"
:style="{ transform: getRotation(index + 4) }"
style="width: fit-content"
@click="buttonSearch(photo)"
>
<div class="class" style="width: 24rem; height: 21rem">
<div class="box">
<div class="photo-container">
<img
:src="fetchImage(photo.fileRpath)"
alt=""
style="width: 150px"
/>
</div>
</div>
<div class="photo-text mt20 ml30">
<div class="member ml30">{{ photo.likeData }}</div>
<div class="title2-photo">{{ photo.unitName }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="popup-wrap" v-show="searchOpen">
<div class="popup-box">
<div class="flex mb10 justify-between">
<p class="popup-title">알림</p>
<button type="button" class="popup-close-btn" @click="closeBtn">
<svg-icon
type="mdi"
:path="mdiWindowClose"
class="close-btn"
></svg-icon>
</button>
</div>
<div
class="photo-modal flex justify-between mt20"
v-if="photoData.length > 0"
>
<div class="box">
<div>
<img
:src="fetchImage(photoData[0].fileRpath)"
alt=""
style="width: 640px; height: 480px"
/>
</div>
</div>
<div class="photo-title-container">
<div class="title1">
{{ photoData[0].unitName }}을 마친
<em class="yellow">{{ photoData[0].stdName }}</em
>친구
</div>
<p class="title2 date">{{ photoData[0].photoDate }}</p>
</div>
</div>
<div class="text flex justify-between mt20" v-else>
<span class="title1">데이터를 불러올 수 없습니다.</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify, mdiHeart, mdiWindowClose } from "@mdi/js";
import { mdilArrowRight } from "@mdi/light-js";
import ProgressBar from "../../component/ProgressBar.vue";
import axios from "axios";
export default {
data() {
return {
classList: [],
photoList: [],
photoData: [],
currentPage: 1,
pageSize: 8,
totalPages: 1,
mdiWindowClose: mdiWindowClose,
selectedTab: "tab1",
mdiMagnify: mdiMagnify,
mdilArrowRight: mdilArrowRight,
timer: "00:00",
progress: 20,
showModal: false,
searchOpen: false,
searchOpen2: false,
selectedSclsId: null,
};
},
methods: {
stdClassesSelectList: function () {
const vm = this;
axios({
url: "/classes/selectClass.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
userId: "1",
},
})
.then(function (response) {
console.log("classList - response : ", response.data);
vm.classList = response.data.data;
vm.currentPage = 1;
vm.selectedSclsId = vm.classList[0].sclsId;
vm.stdPhotoSelectList();
})
.catch(function (error) {
console.log("classList - error : ", error);
alert("학생 반 조회에 오류가 발생했습니다.");
});
},
handleClassChange(event) {
this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기
this.currentPage = 1; // 페이지 초기화
this.stdPhotoSelectList(); // 함수 호출
},
stdPhotoSelectList: function (scsId) {
const vm = this;
axios({
url: "/photo/stdPhotoList.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
stdId: "1",
sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
page: vm.currentPage,
pageSize: vm.pageSize,
},
})
.then(function (response) {
console.log("photoList - response : ", response.data);
vm.photoList = response.data;
vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
})
.catch(function (error) {
console.log("photoList - error : ", error);
alert("반별 내 사진 조회에 오류가 발생했습니다.");
});
},
getRotation(index) {
const rotations = [2, -1, 1, -2, 1, -1];
return `rotate(${rotations[index]}deg)`;
},
changePage(pageNumber) {
this.currentPage = pageNumber;
this.stdPhotoSelectList(this.selectedClassId);
},
closeModal() {
this.showModal = false;
},
buttonSearch(photo) {
if (!photo) return;
const vm = this;
this.searchOpen = true;
axios({
url: "/photo/photoDetail.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
photoId: photo.photoId,
},
})
.then(function (response) {
console.log("photoData - response : ", response.data);
vm.photoData = response.data;
})
.catch(function (error) {
console.log("photoData - error : ", error);
alert("사진 조회에 오류가 발생했습니다.");
});
},
closeBtn() {
this.searchOpen = false;
},
goToPage(page) {
this.$router.push({ name: page });
},
increaseProgress() {
if (this.progress < 100) {
this.progress += 10;
}
},
showConfirm(type) {
let message = "";
if (type === "cancel") {
message = "삭제하시겠습니까?";
} else if (type === "reset") {
message = "초기화하시겠습니까?";
} else if (type === "save") {
message = "등록하시겠습니까?";
}
if (confirm(message)) {
this.goBack();
}
},
// 사진 경로 불러오기
imageSearch(photo) {
if (!photo) return;
const vm = this;
this.searchOpen = true;
axios({
url: "/photo/photoDetail.json",
method: "post",
headers: {
"Content-Type": "application/json; charset=UTF-8",
},
data: {
photoId: photo.photoId,
},
})
.then(function (response) {
console.log("photoData - response : ", response.data);
vm.photoData = response.data;
})
.catch(function (error) {
console.log("photoData - error : ", error);
alert("사진 조회에 오류가 발생했습니다.");
});
},
fetchImage(fileRpath) {
return "http://165.229.169.113:9080/" + fileRpath;
},
},
watch: {},
computed: {
currentPhotos() {
// 현재 페이지에 해당하는 사진들만 반환
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.photoList.result.slice(start, end);
},
},
components: {
SvgIcon,
ProgressBar,
},
mounted() {
console.log("Main2 mounted");
this.stdClassesSelectList();
},
};
</script>
<style scoped>
.btnGroup button {
cursor: pointer;
z-index: 100000;
}
.popup-wrap {
z-index: 10000000;
}
.popup-box {
top: 500px;
width: 950px;
height: 650px;
}
.class {
width: 260px;
height: 200px;
background-repeat: no-repeat;
}
.photo-container {
text-align: center;
}
.photo-container img {
width: 150px;
height: 110px;
height: 105px;
position: relative;
top: 23px;
}
.photo-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.photo-modal {
flex-direction: column;
}
.photo-modal .box {
text-align: center;
}
.photo-title-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
select {
border-radius: 16px;
position: absolute;
top: 42px;
right: 33px;
}
.class-p {
font-size: 23px;
position: absolute;
top: 52px;
right: 218px;
}
.left-side,
.right-side {
width: 48%; /* 좌우로 나눔 */
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.title2-photo {
font-size: 15px;
font-weight: bold;
font-family: "ONEMobileOTF-Regular";
max-width: 175px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>