홍아랑
2024-08-21
240821 홍아랑,정다정 사진첩 사진 불러오기 추가
@25bdf8b065a94ac9d56219138e3a6d1c6542a798
--- client/views/pages/main/PhotoBook.vue
+++ client/views/pages/main/PhotoBook.vue
... | ... | @@ -1,279 +1,373 @@ |
| 1 | 1 |
<template> |
| 2 |
- <div class="title-box flex justify-between mb20"> |
|
| 3 |
- <p class="title">내 사진첩</p> |
|
| 4 |
- </div> |
|
| 5 |
- <div class="myphoto mb30"> |
|
| 6 |
- <div> |
|
| 7 |
- <div class="title-box flex justify-end mb40"> |
|
| 8 |
- <select name="" id=""> |
|
| 9 |
- <option |
|
| 10 |
- v-for="classItem in classList" |
|
| 11 |
- :key="classItem.sclsId" |
|
| 12 |
- :value="classItem.sclsId" |
|
| 13 |
- @click=" |
|
| 14 |
- currentPage = 1; |
|
| 15 |
- stdPhotoSelectList(classItem.sclsId); |
|
| 16 |
- " |
|
| 17 |
- > |
|
| 18 |
- {{ classItem.sclsNm }}
|
|
| 19 |
- </option> |
|
| 20 |
- </select> |
|
| 21 |
- </div> |
|
| 22 |
- <div class="btnGroup" style="display: flex; flex-direction: column"> |
|
| 23 |
- <button |
|
| 24 |
- v-for="n in totalPages" |
|
| 25 |
- :key="n" |
|
| 26 |
- @click="changePage(n)" |
|
| 27 |
- type="button" |
|
| 28 |
- title="페이지 버튼" |
|
| 29 |
- class="tab-btn" |
|
| 30 |
- > |
|
| 31 |
- <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="" /> |
|
| 32 |
- <img v-else src="../../../resources/img/btn49_15s_click.png" alt="" /> |
|
| 33 |
- <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
|
|
| 34 |
- </button> |
|
| 35 |
- </div> |
|
| 36 |
- <div v-if="selectedTab === 'tab1'" class="tab-box"> |
|
| 37 |
- <div class="flex justify-between"> |
|
| 38 |
- <div |
|
| 39 |
- v-for="(photo, index) in (photoList?.result || []).slice(0, 3)" |
|
| 40 |
- :key="index" |
|
| 41 |
- class="photo" |
|
| 42 |
- :style="{ transform: getRotation(index) }"
|
|
| 43 |
- @click="buttonSearch(photo)" |
|
| 44 |
- > |
|
| 45 |
- <div class="class"> |
|
| 46 |
- <div class="box"> |
|
| 47 |
- <div><img src="../../../resources/img/img213_15s.png" alt="" /></div> |
|
| 48 |
- </div> |
|
| 49 |
- <div class="text flex justify-between mt20"> |
|
| 50 |
- <span class="member ml30">{{ photo.likeData }}</span>
|
|
| 51 |
- <p class="title2">{{ photo.unitName }}</p>
|
|
| 52 |
- </div> |
|
| 53 |
- </div> |
|
| 54 |
- </div> |
|
| 2 |
+ <div class="title-box flex justify-between mb20"> |
|
| 3 |
+ <p class="title">내 사진첩</p> |
|
| 4 |
+ </div> |
|
| 5 |
+ <div class="myphoto mb30"> |
|
| 6 |
+ <div> |
|
| 7 |
+ <div class="title-box flex justify-end mb40"> |
|
| 8 |
+ <select name="" id=""> |
|
| 9 |
+ <option |
|
| 10 |
+ v-for="classItem in classList" |
|
| 11 |
+ :key="classItem.sclsId" |
|
| 12 |
+ :value="classItem.sclsId" |
|
| 13 |
+ @click=" |
|
| 14 |
+ currentPage = 1; |
|
| 15 |
+ stdPhotoSelectList(classItem.sclsId); |
|
| 16 |
+ " |
|
| 17 |
+ > |
|
| 18 |
+ {{ classItem.sclsNm }}
|
|
| 19 |
+ </option> |
|
| 20 |
+ </select> |
|
| 21 |
+ </div> |
|
| 22 |
+ <div class="btnGroup" style="display: flex; flex-direction: column"> |
|
| 23 |
+ <button |
|
| 24 |
+ v-for="n in totalPages" |
|
| 25 |
+ :key="n" |
|
| 26 |
+ @click="changePage(n)" |
|
| 27 |
+ type="button" |
|
| 28 |
+ title="페이지 버튼" |
|
| 29 |
+ class="tab-btn" |
|
| 30 |
+ > |
|
| 31 |
+ <img |
|
| 32 |
+ v-if="currentPage !== n" |
|
| 33 |
+ src="../../../resources/img/btn49_15s_normal.png" |
|
| 34 |
+ alt="" |
|
| 35 |
+ /> |
|
| 36 |
+ <img v-else src="../../../resources/img/btn49_15s_click.png" alt="" /> |
|
| 37 |
+ <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
|
|
| 38 |
+ </button> |
|
| 39 |
+ </div> |
|
| 40 |
+ <div v-if="selectedTab === 'tab1'" class="tab-box"> |
|
| 41 |
+ <div class="flex justify-between"> |
|
| 42 |
+ <div |
|
| 43 |
+ v-for="(photo, index) in (photoList?.result || []).slice(0, 3)" |
|
| 44 |
+ :key="index" |
|
| 45 |
+ class="photo" |
|
| 46 |
+ :style="{ transform: getRotation(index) }"
|
|
| 47 |
+ @click="buttonSearch(photo)" |
|
| 48 |
+ > |
|
| 49 |
+ <div class="class"> |
|
| 50 |
+ <div class="box"> |
|
| 51 |
+ <div class="photo-container"> |
|
| 52 |
+ <img :src="fetchImage(photo.fileRpath)" alt="" /> |
|
| 55 | 53 |
</div> |
| 56 |
- <div class="flex justify-between mt50"> |
|
| 57 |
- <div |
|
| 58 |
- v-for="(photo, index) in (photoList?.result || []).slice(3, 6)" |
|
| 59 |
- :key="index + 3" |
|
| 60 |
- class="photo" |
|
| 61 |
- :style="{ transform: getRotation(index + 3) }"
|
|
| 62 |
- @click="buttonSearch(photo)" |
|
| 63 |
- > |
|
| 64 |
- <div class="class"> |
|
| 65 |
- <div class="box"> |
|
| 66 |
- <div><img src="../../../resources/img/img213_15s.png" alt="" /></div> |
|
| 67 |
- </div> |
|
| 68 |
- <div class="text flex justify-between mt20"> |
|
| 69 |
- <span class="member ml30">{{ photo.likeData }}</span>
|
|
| 70 |
- <p class="title2">{{ photo.unitName }}</p>
|
|
| 71 |
- </div> |
|
| 72 |
- </div> |
|
| 73 |
- </div> |
|
| 74 |
- </div> |
|
| 54 |
+ </div> |
|
| 55 |
+ <div class="photo-text mt10 ml10"> |
|
| 56 |
+ <div class="member ml30">{{ photo.likeData }}</div>
|
|
| 57 |
+ <div class="title2">{{ photo.unitName }}</div>
|
|
| 58 |
+ </div> |
|
| 75 | 59 |
</div> |
| 76 |
- <div class="popup-wrap" v-show="searchOpen"> |
|
| 77 |
- <div class="popup-box"> |
|
| 78 |
- <div class="flex mb10 justify-between"> |
|
| 79 |
- <p class="popup-title">알림</p> |
|
| 80 |
- <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
| 81 |
- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon> |
|
| 82 |
- </button> |
|
| 83 |
- </div> |
|
| 84 |
- <div class="box"> |
|
| 85 |
- <div><img src="../../../resources/img/img184_91t.png" alt="" /></div> |
|
| 86 |
- </div> |
|
| 87 |
- <div class="text flex justify-between mt20" v-if="photoData.length > 0"> |
|
| 88 |
- <span class="title1" |
|
| 89 |
- >{{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em
|
|
| 90 |
- >친구</span |
|
| 91 |
- > |
|
| 92 |
- <p class="title2 date">{{ photoData[0].photoDate }}</p>
|
|
| 93 |
- </div> |
|
| 94 |
- <div class="text flex justify-between mt20" v-else> |
|
| 95 |
- <span class="title1">데이터를 불러올 수 없습니다.</span> |
|
| 96 |
- </div> |
|
| 97 |
- </div> |
|
| 98 |
- </div> |
|
| 60 |
+ </div> |
|
| 99 | 61 |
</div> |
| 62 |
+ <div class="flex justify-between mt20"> |
|
| 63 |
+ <div |
|
| 64 |
+ v-for="(photo, index) in (photoList?.result || []).slice(3, 6)" |
|
| 65 |
+ :key="index + 3" |
|
| 66 |
+ class="photo" |
|
| 67 |
+ :style="{ transform: getRotation(index + 3) }"
|
|
| 68 |
+ @click="buttonSearch(photo)" |
|
| 69 |
+ > |
|
| 70 |
+ <div class="class"> |
|
| 71 |
+ <div class="box"> |
|
| 72 |
+ <div class="photo-container"> |
|
| 73 |
+ <img |
|
| 74 |
+ :src="fetchImage(photo.fileRpath)" |
|
| 75 |
+ alt="" |
|
| 76 |
+ style="width: 150px" |
|
| 77 |
+ /> |
|
| 78 |
+ </div> |
|
| 79 |
+ </div> |
|
| 80 |
+ <div class="photo-text mt10 ml10"> |
|
| 81 |
+ <div class="member ml30">{{ photo.likeData }}</div>
|
|
| 82 |
+ <div class="title2">{{ photo.unitName }}</div>
|
|
| 83 |
+ </div> |
|
| 84 |
+ </div> |
|
| 85 |
+ </div> |
|
| 86 |
+ </div> |
|
| 87 |
+ </div> |
|
| 88 |
+ <div class="popup-wrap" v-show="searchOpen"> |
|
| 89 |
+ <div class="popup-box"> |
|
| 90 |
+ <div class="flex mb10 justify-between"> |
|
| 91 |
+ <p class="popup-title">알림</p> |
|
| 92 |
+ <button type="button" class="popup-close-btn" @click="closeBtn"> |
|
| 93 |
+ <svg-icon |
|
| 94 |
+ type="mdi" |
|
| 95 |
+ :path="mdiWindowClose" |
|
| 96 |
+ class="close-btn" |
|
| 97 |
+ ></svg-icon> |
|
| 98 |
+ </button> |
|
| 99 |
+ </div> |
|
| 100 |
+ |
|
| 101 |
+ <div |
|
| 102 |
+ class="photo-modal flex justify-between mt20" |
|
| 103 |
+ v-if="photoData.length > 0" |
|
| 104 |
+ > |
|
| 105 |
+ <div class="box"> |
|
| 106 |
+ <div> |
|
| 107 |
+ <img |
|
| 108 |
+ :src="fetchImage(photoData[0].fileRpath)" |
|
| 109 |
+ alt="" |
|
| 110 |
+ style="width: 640px; height: 480px" |
|
| 111 |
+ /> |
|
| 112 |
+ </div> |
|
| 113 |
+ </div> |
|
| 114 |
+ <div class="photo-title-container"> |
|
| 115 |
+ <div class="title1"> |
|
| 116 |
+ {{ photoData[0].unitName }}을 마친
|
|
| 117 |
+ <em class="yellow">{{ photoData[0].stdName }}</em
|
|
| 118 |
+ >친구 |
|
| 119 |
+ </div> |
|
| 120 |
+ <p class="title2 date">{{ photoData[0].photoDate }}</p>
|
|
| 121 |
+ </div> |
|
| 122 |
+ </div> |
|
| 123 |
+ |
|
| 124 |
+ <div class="text flex justify-between mt20" v-else> |
|
| 125 |
+ <span class="title1">데이터를 불러올 수 없습니다.</span> |
|
| 126 |
+ </div> |
|
| 127 |
+ </div> |
|
| 128 |
+ </div> |
|
| 100 | 129 |
</div> |
| 130 |
+ </div> |
|
| 101 | 131 |
</template> |
| 102 | 132 |
|
| 103 | 133 |
<script> |
| 104 |
-import SvgIcon from '@jamescoyle/vue-icon'; |
|
| 105 |
-import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
|
|
| 106 |
-import { mdilArrowRight } from '@mdi/light-js';
|
|
| 107 |
-import ProgressBar from '../../component/ProgressBar.vue'; |
|
| 108 |
-import axios from 'axios'; |
|
| 134 |
+import SvgIcon from "@jamescoyle/vue-icon"; |
|
| 135 |
+import { mdiMagnify, mdiHeart, mdiWindowClose } from "@mdi/js";
|
|
| 136 |
+import { mdilArrowRight } from "@mdi/light-js";
|
|
| 137 |
+import ProgressBar from "../../component/ProgressBar.vue"; |
|
| 138 |
+import axios from "axios"; |
|
| 109 | 139 |
|
| 110 | 140 |
export default {
|
| 111 |
- data() {
|
|
| 112 |
- return {
|
|
| 113 |
- classList: [], |
|
| 114 |
- photoList: [], |
|
| 141 |
+ data() {
|
|
| 142 |
+ return {
|
|
| 143 |
+ classList: [], |
|
| 144 |
+ photoList: [], |
|
| 115 | 145 |
|
| 116 |
- photoData: [], |
|
| 146 |
+ photoData: [], |
|
| 117 | 147 |
|
| 118 |
- currentPage: 1, |
|
| 119 |
- pageSize: 6, |
|
| 120 |
- totalPages: 1, |
|
| 148 |
+ currentPage: 1, |
|
| 149 |
+ pageSize: 6, |
|
| 150 |
+ totalPages: 1, |
|
| 121 | 151 |
|
| 122 |
- mdiWindowClose: mdiWindowClose, |
|
| 123 |
- selectedTab: 'tab1', |
|
| 124 |
- mdiMagnify: mdiMagnify, |
|
| 125 |
- mdilArrowRight: mdilArrowRight, |
|
| 126 |
- timer: '00:00', |
|
| 127 |
- progress: 20, |
|
| 128 |
- showModal: false, |
|
| 129 |
- searchOpen: false, |
|
| 130 |
- searchOpen2: false, |
|
| 131 |
- }; |
|
| 152 |
+ mdiWindowClose: mdiWindowClose, |
|
| 153 |
+ selectedTab: "tab1", |
|
| 154 |
+ mdiMagnify: mdiMagnify, |
|
| 155 |
+ mdilArrowRight: mdilArrowRight, |
|
| 156 |
+ timer: "00:00", |
|
| 157 |
+ progress: 20, |
|
| 158 |
+ showModal: false, |
|
| 159 |
+ searchOpen: false, |
|
| 160 |
+ searchOpen2: false, |
|
| 161 |
+ }; |
|
| 162 |
+ }, |
|
| 163 |
+ methods: {
|
|
| 164 |
+ stdClassesSelectList: function () {
|
|
| 165 |
+ const vm = this; |
|
| 166 |
+ axios({
|
|
| 167 |
+ url: "/classes/selectClass.json", |
|
| 168 |
+ method: "post", |
|
| 169 |
+ headers: {
|
|
| 170 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 171 |
+ }, |
|
| 172 |
+ data: {
|
|
| 173 |
+ userId: "1", |
|
| 174 |
+ }, |
|
| 175 |
+ }) |
|
| 176 |
+ .then(function (response) {
|
|
| 177 |
+ console.log("classList - response : ", response.data);
|
|
| 178 |
+ vm.classList = response.data.data; |
|
| 179 |
+ vm.currentPage = 1; |
|
| 180 |
+ }) |
|
| 181 |
+ .catch(function (error) {
|
|
| 182 |
+ console.log("classList - error : ", error);
|
|
| 183 |
+ alert("학생 반 조회에 오류가 발생했습니다.");
|
|
| 184 |
+ }); |
|
| 132 | 185 |
}, |
| 133 |
- methods: {
|
|
| 134 |
- stdClassesSelectList: function () {
|
|
| 135 |
- const vm = this; |
|
| 136 |
- axios({
|
|
| 137 |
- url: '/classes/selectClass.json', |
|
| 138 |
- method: 'post', |
|
| 139 |
- headers: {
|
|
| 140 |
- 'Content-Type': 'application/json; charset=UTF-8', |
|
| 141 |
- }, |
|
| 142 |
- data: {
|
|
| 143 |
- userId: '1', |
|
| 144 |
- }, |
|
| 145 |
- }) |
|
| 146 |
- .then(function (response) {
|
|
| 147 |
- console.log('classList - response : ', response.data);
|
|
| 148 |
- vm.classList = response.data.data; |
|
| 149 |
- vm.currentPage = 1; |
|
| 150 |
- }) |
|
| 151 |
- .catch(function (error) {
|
|
| 152 |
- console.log('classList - error : ', error);
|
|
| 153 |
- alert('학생 반 조회에 오류가 발생했습니다.');
|
|
| 154 |
- }); |
|
| 155 |
- }, |
|
| 156 | 186 |
|
| 157 |
- stdPhotoSelectList: function (sclsId) {
|
|
| 158 |
- const vm = this; |
|
| 159 |
- axios({
|
|
| 160 |
- url: '/photo/stdPhotoList.json', |
|
| 161 |
- method: 'post', |
|
| 162 |
- headers: {
|
|
| 163 |
- 'Content-Type': 'application/json; charset=UTF-8', |
|
| 164 |
- }, |
|
| 165 |
- data: {
|
|
| 166 |
- stdId: '1', |
|
| 167 |
- sclsId: '1', // 여기에 sclsId들어가야함 |
|
| 168 |
- page: vm.currentPage, |
|
| 169 |
- pageSize: vm.pageSize, |
|
| 170 |
- }, |
|
| 171 |
- }) |
|
| 172 |
- .then(function (response) {
|
|
| 173 |
- console.log('photoList - response : ', response.data);
|
|
| 174 |
- vm.photoList = response.data; |
|
| 175 |
- vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize); |
|
| 176 |
- }) |
|
| 177 |
- .catch(function (error) {
|
|
| 178 |
- console.log('photoList - error : ', error);
|
|
| 179 |
- alert('반별 내 사진 조회에 오류가 발생했습니다.');
|
|
| 180 |
- }); |
|
| 187 |
+ stdPhotoSelectList: function (sclsId) {
|
|
| 188 |
+ const vm = this; |
|
| 189 |
+ axios({
|
|
| 190 |
+ url: "/photo/stdPhotoList.json", |
|
| 191 |
+ method: "post", |
|
| 192 |
+ headers: {
|
|
| 193 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 181 | 194 |
}, |
| 182 |
- |
|
| 183 |
- getRotation(index) {
|
|
| 184 |
- const rotations = [2, -1, 1, -2, 1, -1]; |
|
| 185 |
- return `rotate(${rotations[index]}deg)`;
|
|
| 195 |
+ data: {
|
|
| 196 |
+ stdId: "1", |
|
| 197 |
+ sclsId: "1", // 여기에 sclsId들어가야함 |
|
| 198 |
+ page: vm.currentPage, |
|
| 199 |
+ pageSize: vm.pageSize, |
|
| 186 | 200 |
}, |
| 187 |
- |
|
| 188 |
- changePage(pageNumber) {
|
|
| 189 |
- this.currentPage = pageNumber; |
|
| 190 |
- this.stdPhotoSelectList(this.selectedClassId); |
|
| 191 |
- }, |
|
| 192 |
- |
|
| 193 |
- closeModal() {
|
|
| 194 |
- this.showModal = false; |
|
| 195 |
- }, |
|
| 196 |
- buttonSearch(photo) {
|
|
| 197 |
- if (!photo) return; |
|
| 198 |
- |
|
| 199 |
- const vm = this; |
|
| 200 |
- this.searchOpen = true; |
|
| 201 |
- axios({
|
|
| 202 |
- url: '/photo/photoDetail.json', |
|
| 203 |
- method: 'post', |
|
| 204 |
- headers: {
|
|
| 205 |
- 'Content-Type': 'application/json; charset=UTF-8', |
|
| 206 |
- }, |
|
| 207 |
- data: {
|
|
| 208 |
- photoId: photo.photoId, |
|
| 209 |
- }, |
|
| 210 |
- }) |
|
| 211 |
- .then(function (response) {
|
|
| 212 |
- console.log('photoData - response : ', response.data);
|
|
| 213 |
- vm.photoData = response.data; |
|
| 214 |
- }) |
|
| 215 |
- .catch(function (error) {
|
|
| 216 |
- console.log('photoData - error : ', error);
|
|
| 217 |
- alert('사진 조회에 오류가 발생했습니다.');
|
|
| 218 |
- }); |
|
| 219 |
- }, |
|
| 220 |
- |
|
| 221 |
- closeBtn() {
|
|
| 222 |
- this.searchOpen = false; |
|
| 223 |
- }, |
|
| 224 |
- goToPage(page) {
|
|
| 225 |
- this.$router.push({ name: page });
|
|
| 226 |
- }, |
|
| 227 |
- increaseProgress() {
|
|
| 228 |
- if (this.progress < 100) {
|
|
| 229 |
- this.progress += 10; |
|
| 230 |
- } |
|
| 231 |
- }, |
|
| 232 |
- showConfirm(type) {
|
|
| 233 |
- let message = ''; |
|
| 234 |
- if (type === 'cancel') {
|
|
| 235 |
- message = '삭제하시겠습니까?'; |
|
| 236 |
- } else if (type === 'reset') {
|
|
| 237 |
- message = '초기화하시겠습니까?'; |
|
| 238 |
- } else if (type === 'save') {
|
|
| 239 |
- message = '등록하시겠습니까?'; |
|
| 240 |
- } |
|
| 241 |
- |
|
| 242 |
- if (confirm(message)) {
|
|
| 243 |
- this.goBack(); |
|
| 244 |
- } |
|
| 245 |
- }, |
|
| 201 |
+ }) |
|
| 202 |
+ .then(function (response) {
|
|
| 203 |
+ console.log("photoList - response : ", response.data);
|
|
| 204 |
+ vm.photoList = response.data; |
|
| 205 |
+ vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize); |
|
| 206 |
+ }) |
|
| 207 |
+ .catch(function (error) {
|
|
| 208 |
+ console.log("photoList - error : ", error);
|
|
| 209 |
+ alert("반별 내 사진 조회에 오류가 발생했습니다.");
|
|
| 210 |
+ }); |
|
| 246 | 211 |
}, |
| 247 |
- watch: {},
|
|
| 248 |
- computed: {
|
|
| 249 |
- currentPhotos() {
|
|
| 250 |
- // 현재 페이지에 해당하는 사진들만 반환 |
|
| 251 |
- const start = (this.currentPage - 1) * this.pageSize; |
|
| 252 |
- const end = start + this.pageSize; |
|
| 253 |
- return this.photoList.result.slice(start, end); |
|
| 212 |
+ |
|
| 213 |
+ getRotation(index) {
|
|
| 214 |
+ const rotations = [2, -1, 1, -2, 1, -1]; |
|
| 215 |
+ return `rotate(${rotations[index]}deg)`;
|
|
| 216 |
+ }, |
|
| 217 |
+ |
|
| 218 |
+ changePage(pageNumber) {
|
|
| 219 |
+ this.currentPage = pageNumber; |
|
| 220 |
+ this.stdPhotoSelectList(this.selectedClassId); |
|
| 221 |
+ }, |
|
| 222 |
+ |
|
| 223 |
+ closeModal() {
|
|
| 224 |
+ this.showModal = false; |
|
| 225 |
+ }, |
|
| 226 |
+ buttonSearch(photo) {
|
|
| 227 |
+ if (!photo) return; |
|
| 228 |
+ |
|
| 229 |
+ const vm = this; |
|
| 230 |
+ this.searchOpen = true; |
|
| 231 |
+ axios({
|
|
| 232 |
+ url: "/photo/photoDetail.json", |
|
| 233 |
+ method: "post", |
|
| 234 |
+ headers: {
|
|
| 235 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 254 | 236 |
}, |
| 237 |
+ data: {
|
|
| 238 |
+ photoId: photo.photoId, |
|
| 239 |
+ }, |
|
| 240 |
+ }) |
|
| 241 |
+ .then(function (response) {
|
|
| 242 |
+ console.log("photoData - response : ", response.data);
|
|
| 243 |
+ vm.photoData = response.data; |
|
| 244 |
+ }) |
|
| 245 |
+ .catch(function (error) {
|
|
| 246 |
+ console.log("photoData - error : ", error);
|
|
| 247 |
+ alert("사진 조회에 오류가 발생했습니다.");
|
|
| 248 |
+ }); |
|
| 255 | 249 |
}, |
| 256 |
- components: {
|
|
| 257 |
- SvgIcon, |
|
| 258 |
- ProgressBar, |
|
| 250 |
+ |
|
| 251 |
+ closeBtn() {
|
|
| 252 |
+ this.searchOpen = false; |
|
| 259 | 253 |
}, |
| 260 |
- mounted() {
|
|
| 261 |
- console.log('Main2 mounted');
|
|
| 262 |
- this.stdClassesSelectList(); |
|
| 263 |
- this.stdPhotoSelectList(); |
|
| 254 |
+ goToPage(page) {
|
|
| 255 |
+ this.$router.push({ name: page });
|
|
| 264 | 256 |
}, |
| 257 |
+ increaseProgress() {
|
|
| 258 |
+ if (this.progress < 100) {
|
|
| 259 |
+ this.progress += 10; |
|
| 260 |
+ } |
|
| 261 |
+ }, |
|
| 262 |
+ showConfirm(type) {
|
|
| 263 |
+ let message = ""; |
|
| 264 |
+ if (type === "cancel") {
|
|
| 265 |
+ message = "삭제하시겠습니까?"; |
|
| 266 |
+ } else if (type === "reset") {
|
|
| 267 |
+ message = "초기화하시겠습니까?"; |
|
| 268 |
+ } else if (type === "save") {
|
|
| 269 |
+ message = "등록하시겠습니까?"; |
|
| 270 |
+ } |
|
| 271 |
+ |
|
| 272 |
+ if (confirm(message)) {
|
|
| 273 |
+ this.goBack(); |
|
| 274 |
+ } |
|
| 275 |
+ }, |
|
| 276 |
+ |
|
| 277 |
+ // 사진 경로 불러오기 |
|
| 278 |
+ imageSearch(photo) {
|
|
| 279 |
+ if (!photo) return; |
|
| 280 |
+ |
|
| 281 |
+ const vm = this; |
|
| 282 |
+ this.searchOpen = true; |
|
| 283 |
+ axios({
|
|
| 284 |
+ url: "/photo/photoDetail.json", |
|
| 285 |
+ method: "post", |
|
| 286 |
+ headers: {
|
|
| 287 |
+ "Content-Type": "application/json; charset=UTF-8", |
|
| 288 |
+ }, |
|
| 289 |
+ data: {
|
|
| 290 |
+ photoId: photo.photoId, |
|
| 291 |
+ }, |
|
| 292 |
+ }) |
|
| 293 |
+ .then(function (response) {
|
|
| 294 |
+ console.log("photoData - response : ", response.data);
|
|
| 295 |
+ vm.photoData = response.data; |
|
| 296 |
+ }) |
|
| 297 |
+ .catch(function (error) {
|
|
| 298 |
+ console.log("photoData - error : ", error);
|
|
| 299 |
+ alert("사진 조회에 오류가 발생했습니다.");
|
|
| 300 |
+ }); |
|
| 301 |
+ }, |
|
| 302 |
+ fetchImage(fileRpath) {
|
|
| 303 |
+ return "http://localhost:9080/" + fileRpath; |
|
| 304 |
+ }, |
|
| 305 |
+ }, |
|
| 306 |
+ watch: {},
|
|
| 307 |
+ computed: {
|
|
| 308 |
+ currentPhotos() {
|
|
| 309 |
+ // 현재 페이지에 해당하는 사진들만 반환 |
|
| 310 |
+ const start = (this.currentPage - 1) * this.pageSize; |
|
| 311 |
+ const end = start + this.pageSize; |
|
| 312 |
+ return this.photoList.result.slice(start, end); |
|
| 313 |
+ }, |
|
| 314 |
+ }, |
|
| 315 |
+ components: {
|
|
| 316 |
+ SvgIcon, |
|
| 317 |
+ ProgressBar, |
|
| 318 |
+ }, |
|
| 319 |
+ mounted() {
|
|
| 320 |
+ console.log("Main2 mounted");
|
|
| 321 |
+ this.stdClassesSelectList(); |
|
| 322 |
+ this.stdPhotoSelectList(); |
|
| 323 |
+ }, |
|
| 265 | 324 |
}; |
| 266 | 325 |
</script> |
| 267 | 326 |
|
| 268 | 327 |
<style> |
| 269 | 328 |
.btnGroup button {
|
| 270 |
- cursor: pointer; |
|
| 271 |
- z-index: 100000; |
|
| 329 |
+ cursor: pointer; |
|
| 330 |
+ z-index: 100000; |
|
| 272 | 331 |
} |
| 273 | 332 |
.popup-wrap {
|
| 274 |
- z-index: 10000000; |
|
| 333 |
+ z-index: 10000000; |
|
| 275 | 334 |
} |
| 276 | 335 |
.popup-box {
|
| 277 |
- top: 500px; |
|
| 336 |
+ top: 500px; |
|
| 337 |
+ width: 950px; |
|
| 338 |
+ height: 650px; |
|
| 339 |
+} |
|
| 340 |
+ |
|
| 341 |
+.class {
|
|
| 342 |
+ width: 260px; |
|
| 343 |
+ height: 200px; |
|
| 344 |
+} |
|
| 345 |
+ |
|
| 346 |
+.photo-container {
|
|
| 347 |
+ text-align: center; |
|
| 348 |
+} |
|
| 349 |
+ |
|
| 350 |
+.photo-container img {
|
|
| 351 |
+ width: 150px; |
|
| 352 |
+ height: 110px; |
|
| 353 |
+} |
|
| 354 |
+ |
|
| 355 |
+.photo-text {
|
|
| 356 |
+ display: flex; |
|
| 357 |
+ flex-direction: column; |
|
| 358 |
+ gap: 5px; |
|
| 359 |
+} |
|
| 360 |
+.photo-modal {
|
|
| 361 |
+ flex-direction: column; |
|
| 362 |
+} |
|
| 363 |
+ |
|
| 364 |
+.photo-modal .box {
|
|
| 365 |
+ text-align: center; |
|
| 366 |
+} |
|
| 367 |
+ |
|
| 368 |
+.photo-title-container {
|
|
| 369 |
+ display: flex; |
|
| 370 |
+ justify-content: space-between; |
|
| 371 |
+ margin-top: 20px; |
|
| 278 | 372 |
} |
| 279 | 373 |
</style> |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?