Commit @f3ab99ff6a05de34da39760de73405f7012537cf

정다정 10-14

241014 정다정 사진첩 팝업 위치 수정

@f3ab99ff6a05de34da39760de73405f7012537cf

0acb8f9

f3ab99f

client/views/pages/main/PhotoBook.vue

--- client/views/pages/main/PhotoBook.vue

+++ client/views/pages/main/PhotoBook.vue


 <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 class="title-box flex justify-between mb20">
+        <p class="title">내 사진첩</p>
     </div>
-  </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";
+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: [],
+    data() {
+        return {
+            classList: [],
+            photoList: [],
 
-      photoData: [],
+            photoData: [],
 
-      currentPage: 1,
-      pageSize: 8,
-      totalPages: 1,
+            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",
+            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('학생 반 조회에 오류가 발생했습니다.');
+                });
         },
-        data: {
-          userId: "1",
+
+        handleClassChange(event) {
+            this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기
+            this.currentPage = 1; // 페이지 초기화
+            this.stdPhotoSelectList(); // 함수 호출
         },
-      })
-        .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",
+        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('반별 내 사진 조회에 오류가 발생했습니다.');
+                });
         },
-        data: {
-          stdId: "1",
-          sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
-          page: vm.currentPage,
-          pageSize: vm.pageSize,
+        getRotation(index) {
+            const rotations = [2, -1, 1, -2, 1, -1];
+            return `rotate(${rotations[index]}deg)`;
         },
-      })
-        .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",
+        changePage(pageNumber) {
+            this.currentPage = pageNumber;
+            this.stdPhotoSelectList(this.selectedClassId);
         },
-        data: {
-          photoId: photo.photoId,
+
+        closeModal() {
+            this.showModal = false;
         },
-      })
-        .then(function (response) {
-          console.log("photoData - response : ", response.data);
-          vm.photoData = response.data;
-        })
-        .catch(function (error) {
-          console.log("photoData - error : ", error);
-          alert("사진 조회에 오류가 발생했습니다.");
-        });
-    },
+        buttonSearch(photo) {
+            if (!photo) return;
 
-    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",
+            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('사진 조회에 오류가 발생했습니다.');
+                });
         },
-        data: {
-          photoId: photo.photoId,
+
+        closeBtn() {
+            this.searchOpen = false;
         },
-      })
-        .then(function (response) {
-          console.log("photoData - response : ", response.data);
-          vm.photoData = response.data;
-        })
-        .catch(function (error) {
-          console.log("photoData - error : ", error);
-          alert("사진 조회에 오류가 발생했습니다.");
-        });
+        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;
+        },
     },
-    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);
+        },
     },
-  },
-  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,
     },
-  },
-  components: {
-    SvgIcon,
-    ProgressBar,
-  },
-  mounted() {
-    console.log("Main2 mounted");
-    this.stdClassesSelectList();
-  },
+    mounted() {
+        console.log('Main2 mounted');
+        this.stdClassesSelectList();
+    },
 };
 </script>
 
 <style scoped>
 .btnGroup button {
-  cursor: pointer;
-  z-index: 100000;
+    cursor: pointer;
+    z-index: 100000;
 }
 
 .popup-wrap {
-  z-index: 10000000;
+    z-index: 10000000;
 }
 
 .popup-box {
-  top: 500px;
-  width: 950px;
-  height: 650px;
+    top: 500px;
+    width: 950px;
+    height: 650px;
+    left: 55rem;
 }
 
 .class {
-  width: 260px;
-  height: 200px;
-  background-repeat: no-repeat;
+    width: 260px;
+    height: 200px;
+    background-repeat: no-repeat;
 }
 
 .photo-container {
-  text-align: center;
+    text-align: center;
 }
 
 .photo-container img {
-  width: 150px;
-  height: 110px;
-  height: 105px;
-  position: relative;
-  top: 23px;
+    width: 150px;
+    height: 110px;
+    height: 105px;
+    position: relative;
+    top: 23px;
 }
 
 .photo-text {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
 }
 
 .photo-modal {
-  flex-direction: column;
+    flex-direction: column;
 }
 
 .photo-modal .box {
-  text-align: center;
+    text-align: center;
 }
 
 .photo-title-container {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
 }
 
 select {
-  border-radius: 16px;
-  position: absolute;
-  top: 42px;
-  right: 33px;
+    border-radius: 16px;
+    position: absolute;
+    top: 42px;
+    right: 33px;
 }
 
 .class-p {
-  font-size: 23px;
-  position: absolute;
-  top: 52px;
-  right: 218px;
+    font-size: 23px;
+    position: absolute;
+    top: 52px;
+    right: 218px;
 }
 
 .left-side,
 .right-side {
-  width: 48%; /* 좌우로 나눔 */
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
+    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;
+    font-size: 15px;
+    font-weight: bold;
+    font-family: 'ONEMobileOTF-Regular';
+    max-width: 175px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 </style>

Add a comment

Open 0
Closed 0

List

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

Delete comment