Commit @72103049b399f6451140ae47a9d5ffd7209e6f3b

홍아랑 09-11

240911 홍아랑 사진첩 css 수정

@72103049b399f6451140ae47a9d5ffd7209e6f3b

96aad6f

7210304

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


   top: 179px;
   z-index: 1;
 }
+
+.main-wrap-mypage {
+  width: 134rem;
+  height: 70rem;
+  border-radius: 10px;
+  position: absolute;
+  right: 60px;
+  top: 179px;
+  z-index: 1;
+  background-image: url("../img/new_img/mypage/background.png");
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 6rem 8rem;
+}
+
 .main-wrap-plan {
   width: 134rem;
   height: 70rem;
-  background-color: #fff;
   border-radius: 10px;
   position: absolute;
   right: 60px;

 }
 
 .myphoto > div {
-  background-image: url("../img/img207_15s.png");
-  width: 1011px;
-  height: 558px;
+  background-image: url("../img/new_img/photobook/background.png");
+  width: 127rem;
+  height: 56rem;
   padding: 30px 60px;
   margin: 0 auto;
+  background-size: 100% 100%;
 }
 .tab-btn {
   position: relative;
-  color: #568bfa;
+  color: #fff;
 }
 .tab-btn p.custom-style {
   color: #fff;

   right: 7%;
   transform: translate(-50%, -50%);
   font-family: "ONEMobilePOPOTF";
-  font-size: 36px;
+  font-size: 27px;
 }
 .myphoto .btnGroup {
   width: max-content;
   position: absolute;
-  right: 45px;
+  top: 134px;
+  right: 14px;
   z-index: 10000;
 }
 .myphoto .class {

 }
 
 .class {
-  background-color: #f8f9fb;
+  /* background-color: #f8f9fb; */
+  background-image: url("../img/new_img/photobook/photo.png");
   border-radius: 10px;
   padding: 25px;
   font-size: 19px;

7210304

client/resources/img/new_img/photobook/background.png (Binary) (added)

+++ client/resources/img/new_img/photobook/background.png

Binary file is not shown

7210304

client/resources/img/new_img/photobook/down_btn.png (Binary) (added)

+++ client/resources/img/new_img/photobook/down_btn.png

Binary file is not shown

7210304

client/resources/img/new_img/photobook/heart.png (Binary) (added)

+++ client/resources/img/new_img/photobook/heart.png

Binary file is not shown

7210304

client/resources/img/new_img/photobook/heart_click.png (Binary) (added)

+++ client/resources/img/new_img/photobook/heart_click.png

Binary file is not shown

7210304

client/resources/img/new_img/photobook/page.png (Binary) (added)

+++ client/resources/img/new_img/photobook/page.png

Binary file is not shown

7210304

client/resources/img/new_img/photobook/page_click.png (Binary) (added)

+++ client/resources/img/new_img/photobook/page_click.png

Binary file is not shown

7210304

client/resources/img/new_img/photobook/photo.png (Binary) (added)

+++ client/resources/img/new_img/photobook/photo.png

Binary file is not shown

7210304

client/resources/img/new_img/photobook/up_btn.png (Binary) (added)

+++ client/resources/img/new_img/photobook/up_btn.png

Binary file is not shown

96aad6f

7210304

client/views/pages/main/MyPage.vue

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

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


 <template>
-    <div class="mypage">
-        <div class="flex justify-between mb30" style="gap: 30px;">
-            <div>
-                <div class="title-box flex justify-between mb20">
-                    <p class="title" style="color: white;">소속 반</p>
-                    <div class="flex align-center look-btn">
-                        <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
-                    </div>
-                </div>
-                <div style="width: 82rem; padding: 2rem;">
-                    <section class="flex" style="gap: 20px;">
-                        <div class="class flex justify-between" style="cursor: default; background-color: transparent;">
-                            <div class="box gd-col2" style="gap: 5px;">
-                                <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                                <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                                <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                                <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                            </div>
-                            <div class="text mt10">
-                                <p class="title1 mb10">A반</p>
-                                <span class="member">20명</span>
-                            </div>
-                        </div>
-
-                    </section>
-                </div>
-            </div>
-            <div>
-
-                <div style="position: absolute; left: 102rem; top: 10rem; "
-                    @click="selectedTab = 'tab4'; goToPage('PhotoBook')"><img
-                        src="../../../resources/img/new_img/mypage/photoBtn.png" alt=""></div>
-                <div class="title-box flex justify-between mb20" style=" position: absolute; left: 117em; top: 6em; ">
-                    <p class="title" style="color: white;">사진첩</p>
-                </div>
-            </div>
-        </div>
+  <div class="mypage">
+    <div class="flex justify-between mb30" style="gap: 30px">
+      <div>
         <div class="title-box flex justify-between mb20">
-            <p class="title" style="color: white;">{{ studentInfo.studentName }} 학생 랭킹</p>
+          <p class="title" style="color: white">소속 반</p>
+          <div class="flex align-center look-btn">
+            <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
+          </div>
         </div>
-        <div class=" mb30">
-            <div class=" flex " style="gap: 95px;">
-                <div class="textbook book-red" style="background-color: white; width: 19%; border: #f9c4eb solid 6px;">
-                    <div class="text" style="background-color: #f9c4eb;">
-                        <p class="title1" style="color: #fff;">포토북 랭킹</p>
-                    </div>
-                    <div class="box " style="gap: 10px;">
-                        <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
-                        <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="red">{{
-                            photo_rank }}등</em>입니다.</P>
-                    </div>
+        <div style="width: 82rem; padding: 2rem">
+          <section class="flex" style="gap: 20px">
+            <div
+              class="class flex justify-between"
+              style="cursor: default; background-color: transparent"
+            >
+              <div class="box gd-col2" style="gap: 5px">
+                <div>
+                  <img src="../../../resources/img/img176_82t.png" alt="" />
                 </div>
-                <div class="textbook " style="background-color: white; width: 19%;  border: #b5dbcc solid 6px;">
-                    <div class="text" style="background-color: #b5dbcc;">
-                        <p class="title1" style="color: #fff;">진도율 랭킹</p>
-                    </div>
-                    <div class="box " style="gap: 10px;">
-                        <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
-                        <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="yellow">{{
-                            problem_rank }}등</em>입니다.</P>
-                    </div>
+                <div>
+                  <img src="../../../resources/img/img176_82t.png" alt="" />
                 </div>
-                <div class="textbook book-blue "
-                    style="background-color: white; width: 19%;  border: #bcd3eb solid 6px;">
-                    <div class="text" style="background-color: #bcd3eb;">
-                        <p class="title1" style="color: #fff;">점수 랭킹</p>
-                    </div>
-                    <div class="box " style="gap: 10px;">
-                        <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
-                        <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="blue">{{
-                            score_rank }}등</em>입니다.</P>
-                    </div>
+                <div>
+                  <img src="../../../resources/img/img176_82t.png" alt="" />
                 </div>
-                <div class="textbook book-navy "
-                    style="background-color: white; width: 19%;  border: #f9c894 solid 6px;">
-                    <div class="text" style="background-color: #f9c894;">
-                        <p class="title1" style="color: #fff;">학습시간 랭킹</p>
-                    </div>
-                    <div class="box " style="gap: 10px;">
-                        <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
-                        <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="navy">{{
-                            time_rank }}등</em>입니다.</P>
-                    </div>
+                <div>
+                  <img src="../../../resources/img/img176_82t.png" alt="" />
                 </div>
+              </div>
+              <div class="text mt10">
+                <p class="title1 mb10">A반</p>
+                <span class="member">20명</span>
+              </div>
             </div>
+          </section>
         </div>
+      </div>
+      <div>
+        <div
+          style="position: absolute; left: 102rem; top: 10rem; cursor: pointer"
+          @click="
+            selectedTab = 'tab4';
+            goToPage('PhotoBook');
+          "
+        >
+          <img
+            src="../../../resources/img/new_img/mypage/photoBtn.png"
+            alt=""
+          />
+        </div>
+        <div
+          class="title-box flex justify-between mb20"
+          style="position: absolute; left: 117em; top: 6em"
+        >
+          <p class="title" style="color: white">사진첩</p>
+        </div>
+      </div>
     </div>
+    <div class="title-box flex justify-between mb20">
+      <p class="title" style="color: white">
+        {{ studentInfo.studentName }} 학생 랭킹
+      </p>
+    </div>
+    <div class="mb30">
+      <div class="flex" style="gap: 95px">
+        <div
+          class="textbook book-red"
+          style="background-color: white; width: 19%; border: #f9c4eb solid 6px"
+        >
+          <div class="text" style="background-color: #f9c4eb">
+            <p class="title1" style="color: #fff">포토북 랭킹</p>
+          </div>
+          <div class="box" style="gap: 10px">
+            <div>
+              <img src="../../../resources/img/img196_12p.png" alt="" />
+            </div>
+            <P class="subtitle mt10" style="font-size: 19px"
+              >현재 {{ stdCount }}명 중
+              <em class="red">{{ photo_rank }}등</em>입니다.</P
+            >
+          </div>
+        </div>
+        <div
+          class="textbook"
+          style="background-color: white; width: 19%; border: #b5dbcc solid 6px"
+        >
+          <div class="text" style="background-color: #b5dbcc">
+            <p class="title1" style="color: #fff">진도율 랭킹</p>
+          </div>
+          <div class="box" style="gap: 10px">
+            <div>
+              <img src="../../../resources/img/img196_12p.png" alt="" />
+            </div>
+            <P class="subtitle mt10" style="font-size: 19px"
+              >현재 {{ stdCount }}명 중
+              <em class="yellow">{{ problem_rank }}등</em>입니다.</P
+            >
+          </div>
+        </div>
+        <div
+          class="textbook book-blue"
+          style="background-color: white; width: 19%; border: #bcd3eb solid 6px"
+        >
+          <div class="text" style="background-color: #bcd3eb">
+            <p class="title1" style="color: #fff">점수 랭킹</p>
+          </div>
+          <div class="box" style="gap: 10px">
+            <div>
+              <img src="../../../resources/img/img196_12p.png" alt="" />
+            </div>
+            <P class="subtitle mt10" style="font-size: 19px"
+              >현재 {{ stdCount }}명 중
+              <em class="blue">{{ score_rank }}등</em>입니다.</P
+            >
+          </div>
+        </div>
+        <div
+          class="textbook book-navy"
+          style="background-color: white; width: 19%; border: #f9c894 solid 6px"
+        >
+          <div class="text" style="background-color: #f9c894">
+            <p class="title1" style="color: #fff">학습시간 랭킹</p>
+          </div>
+          <div class="box" style="gap: 10px">
+            <div>
+              <img src="../../../resources/img/img196_12p.png" alt="" />
+            </div>
+            <P class="subtitle mt10" style="font-size: 19px"
+              >현재 {{ stdCount }}명 중
+              <em class="navy">{{ time_rank }}등</em>입니다.</P
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, } from '@mdi/js';
-import { mdilArrowRight } from '@mdi/light-js';
-import ProgressBar from '../../component/ProgressBar.vue';
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify } from "@mdi/js";
+import { mdilArrowRight } from "@mdi/light-js";
+import ProgressBar from "../../component/ProgressBar.vue";
 import axios from "axios";
 
-
 export default {
-    data() {
-        return {
-            stdCount: 0,
-            photo_rank: 0,
-            problem_rank: 0,
-            score_rank: 0,
-            time_rank: 0,
-            mdiMagnify: mdiMagnify,
-            mdilArrowRight: mdilArrowRight,
-            timer: "00:00",
-            progress: 20,
-            studentInfo: {
-                studentName: "",
-                institutionName: "",
-                grade: "",
-                className: "",
-                studentQuestion: "",
-                history: [],
-            },
-        }
+  data() {
+    return {
+      stdCount: 0,
+      photo_rank: 0,
+      problem_rank: 0,
+      score_rank: 0,
+      time_rank: 0,
+      mdiMagnify: mdiMagnify,
+      mdilArrowRight: mdilArrowRight,
+      timer: "00:00",
+      progress: 20,
+      studentInfo: {
+        studentName: "",
+        institutionName: "",
+        grade: "",
+        className: "",
+        studentQuestion: "",
+        history: [],
+      },
+    };
+  },
+  methods: {
+    classStdCount: function () {
+      const vm = this;
+      axios({
+        url: "/userclass/classStdCountByUserId.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          userId: "USID_000000000000002", // 로그인한 학생의 userId
+        },
+      })
+        .then(function (response) {
+          console.log("classStdCount - response : ", response.data);
+          vm.stdCount = response.data;
+        })
+        .catch(function (error) {
+          console.log("classStdCount - error : ", error);
+          alert("반 학생 수 조회에 오류가 발생했습니다.");
+        });
     },
-    methods: {
-        classStdCount: function () {
-            const vm = this;
-            axios({
-                url: "/userclass/classStdCountByUserId.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: "USID_000000000000002"   // 로그인한 학생의 userId
-                }
-            })
-                .then(function (response) {
-                    console.log("classStdCount - response : ", response.data);
-                    vm.stdCount = response.data;
-                })
-                .catch(function (error) {
-                    console.log("classStdCount - error : ", error);
-                    alert("반 학생 수 조회에 오류가 발생했습니다.");
-                });
+    fetchStudentInfo() {
+      const vm = this;
+      axios({
+        url: "/studentInfo/getInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        fetchStudentInfo() {
-            const vm = this;
-            axios({
-                url: "/studentInfo/getInfo.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: "USID_000000000000002" // 로그인한 학생의 userId
-                }
-            })
-                .then((response) => {
-                    console.log(response.data);
-                    this.studentInfo = response.data;
-                })
-                .catch((error) => {
-                    console.error("학생 정보 가져오기 실패:", error);
-                });
+        data: {
+          userId: "USID_000000000000002", // 로그인한 학생의 userId
         },
-        photoRankByLikeData: function () {
-            const vm = this;
-            axios({
-                url: "/photo/photoRankByLikeData.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    sclsId: "1",
-                    stdId: "1"
-                }
-            })
-                .then(function (response) {
-                    console.log("Photo Rank - response : ", response.data);
-                    vm.photo_rank = response.data;
-                })
-                .catch(function (error) {
-                    console.log("Photo Rank - error : ", error);
-                    alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
-                });
+      })
+        .then((response) => {
+          console.log(response.data);
+          this.studentInfo = response.data;
+        })
+        .catch((error) => {
+          console.error("학생 정보 가져오기 실패:", error);
+        });
+    },
+    photoRankByLikeData: function () {
+      const vm = this;
+      axios({
+        url: "/photo/photoRankByLikeData.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        getUserRankByScore: function () {
-            const vm = this;
-            axios({
-                url: "/userclass/getUserRankByScore.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: "USID_000000000000002"   // 로그인한 학생의 userId
-                }
-            })
-                .then(function (response) {
-                    console.log("User Rank - response : ", response.data);
-                    vm.score_rank = response.data;
-                })
-                .catch(function (error) {
-                    console.log("User Rank - error : ", error);
-                    alert("점수 랭킹 조회에 오류가 발생했습니다.");
-                });
+        data: {
+          sclsId: "1",
+          stdId: "1",
         },
-        getUserRankByStudyTime: function () {
-            const vm = this;
-            axios({
-                url: "/userclass/getUserRankByStudyTime.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: "1"   // 로그인한 학생의 userId
-                }
-            })
-                .then(function (response) {
-                    console.log("User Rank - response : ", response.data);
-                    vm.time_rank = response.data;
-                })
-                .catch(function (error) {
-                    console.log("User Rank - error : ", error);
-                    alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
-                });
+      })
+        .then(function (response) {
+          console.log("Photo Rank - response : ", response.data);
+          vm.photo_rank = response.data;
+        })
+        .catch(function (error) {
+          console.log("Photo Rank - error : ", error);
+          alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
+        });
+    },
+    getUserRankByScore: function () {
+      const vm = this;
+      axios({
+        url: "/userclass/getUserRankByScore.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        problemRankByProblemData: function () {
-            const vm = this;
-            axios({
-                url: "/problemLog/problemRankByProblemData.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    sclsId: "1",
-                    stdId: "2"
-                }
-            })
-                .then(function (response) {
-                    console.log("Problem Rank - response : ", response.data);
-                    vm.problem_rank = response.data;
-                })
-                .catch(function (error) {
-                    console.log("Problem Rank - error : ", error);
-                    alert("학생 문제 랭킹 조회에 오류가 발생했습니다.");
-                });
+        data: {
+          userId: "USID_000000000000002", // 로그인한 학생의 userId
         },
-        goToPage(page) {
-            this.$router.push({ name: page });
+      })
+        .then(function (response) {
+          console.log("User Rank - response : ", response.data);
+          vm.score_rank = response.data;
+        })
+        .catch(function (error) {
+          console.log("User Rank - error : ", error);
+          alert("점수 랭킹 조회에 오류가 발생했습니다.");
+        });
+    },
+    getUserRankByStudyTime: function () {
+      const vm = this;
+      axios({
+        url: "/userclass/getUserRankByStudyTime.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        increaseProgress() {
-            if (this.progress < 100) {
-                this.progress += 10;
-            }
+        data: {
+          userId: "1", // 로그인한 학생의 userId
         },
-        showConfirm(type) {
-            let message = '';
-            if (type === 'cancel') {
-                message = '삭제하시겠습니까?';
-            } else if (type === 'reset') {
-                message = '초기화하시겠습니까?';
-            } else if (type === 'save') {
-                message = '등록하시겠습니까?';
-            }
+      })
+        .then(function (response) {
+          console.log("User Rank - response : ", response.data);
+          vm.time_rank = response.data;
+        })
+        .catch(function (error) {
+          console.log("User Rank - error : ", error);
+          alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
+        });
+    },
+    problemRankByProblemData: function () {
+      const vm = this;
+      axios({
+        url: "/problemLog/problemRankByProblemData.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          sclsId: "1",
+          stdId: "2",
+        },
+      })
+        .then(function (response) {
+          console.log("Problem Rank - response : ", response.data);
+          vm.problem_rank = response.data;
+        })
+        .catch(function (error) {
+          console.log("Problem Rank - 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();
-            }
-        },
+      if (confirm(message)) {
+        this.goBack();
+      }
     },
-    watch: {
-
-    },
-    computed: {
-
-    },
-    components: {
-        SvgIcon,
-        ProgressBar
-    },
-    mounted() {
-        console.log('Main2 mounted');
-        this.fetchStudentInfo();
-        this.classStdCount();
-        this.photoRankByLikeData();
-        this.getUserRankByScore();
-        this.problemRankByProblemData();
-        this.getUserRankByStudyTime();
-    }
-}
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+    ProgressBar,
+  },
+  mounted() {
+    console.log("Main2 mounted");
+    this.fetchStudentInfo();
+    this.classStdCount();
+    this.photoRankByLikeData();
+    this.getUserRankByScore();
+    this.problemRankByProblemData();
+    this.getUserRankByStudyTime();
+  },
+};
 </script>
 <style scoped>
 .mypage .textbook {
-    width: 22%;
+  width: 22%;
 }
-</style>
+</style>

96aad6f

7210304

client/views/pages/main/PhotoBook.vue

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

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


   <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">
+          <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/btn49_15s_normal.png" alt="" />
-          <img v-else src="../../../resources/img/btn49_15s_click.png" alt="" />
+        <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">
-          <div v-for="(photo, index) in (photoList?.result || []).slice(0, 3)" :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="" />
+        <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>
-              <div class="photo-text mt10 ml10">
-                <div class="member ml30">{{ photo.likeData }}</div>
-                <div class="title2">{{ photo.unitName }}</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 class="flex justify-between mt20">
-          <div v-for="(photo, index) in (photoList?.result || []).slice(3, 6)" :key="index + 3" class="photo"
-            :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
-            <div class="class">
-              <div class="box">
-                <div class="photo-container">
-                  <img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" />
+
+          <!-- 오른쪽에 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>
-              <div class="photo-text mt10 ml10">
-                <div class="member ml30">{{ photo.likeData }}</div>
-                <div class="title2">{{ photo.unitName }}</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 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>
+              <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="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" />
+                <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>친구
+                <em class="yellow">{{ photoData[0].stdName }}</em
+                >친구
               </div>
               <p class="title2 date">{{ photoData[0].photoDate }}</p>
             </div>

       photoData: [],
 
       currentPage: 1,
-      pageSize: 6,
+      pageSize: 8,
       totalPages: 1,
 
       mdiWindowClose: mdiWindowClose,

           console.log("classList - response : ", response.data);
           vm.classList = response.data.data;
           vm.currentPage = 1;
-          vm.selectedSclsId= vm.classList[0].sclsId;
+          vm.selectedSclsId = vm.classList[0].sclsId;
           vm.stdPhotoSelectList();
-
         })
         .catch(function (error) {
           console.log("classList - error : ", error);

     },
 
     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);
+      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,
+        },
       })
-      .catch(function (error) {
-        console.log("photoList - error : ", error);
-        alert("반별 내 사진 조회에 오류가 발생했습니다.");
-      });
-  },
+        .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)`;

 .class {
   width: 260px;
   height: 200px;
+  background-repeat: no-repeat;
 }
 
 .photo-container {

 .photo-container img {
   width: 150px;
   height: 110px;
+  height: 105px;
+  position: relative;
+  top: 23px;
 }
 
 .photo-text {

   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>

Add a comment

Open 0
Closed 0

List

...	...	@@ -134,10 +134,25 @@
134	134	top: 179px;
135	135	z-index: 1;
136	136	}
	137	+
	138	+.main-wrap-mypage {
	139	+ width: 134rem;
	140	+ height: 70rem;
	141	+ border-radius: 10px;
	142	+ position: absolute;
	143	+ right: 60px;
	144	+ top: 179px;
	145	+ z-index: 1;
	146	+ background-image: url("../img/new_img/mypage/background.png");
	147	+ background-size: 100% 100%;
	148	+ background-position: center;
	149	+ background-repeat: no-repeat;
	150	+ padding: 6rem 8rem;
	151	+}
	152	+
137	153	.main-wrap-plan {
138	154	width: 134rem;
139	155	height: 70rem;
140		- background-color: #fff;
141	156	border-radius: 10px;
142	157	position: absolute;
143	158	right: 60px;
...	...	@@ -406,15 +421,16 @@
406	421	}
407	422
408	423	.myphoto > div {
409		- background-image: url("../img/img207_15s.png");
410		- width: 1011px;
411		- height: 558px;
	424	+ background-image: url("../img/new_img/photobook/background.png");
	425	+ width: 127rem;
	426	+ height: 56rem;
412	427	padding: 30px 60px;
413	428	margin: 0 auto;
	429	+ background-size: 100% 100%;
414	430	}
415	431	.tab-btn {
416	432	position: relative;
417		- color: #568bfa;
	433	+ color: #fff;
418	434	}
419	435	.tab-btn p.custom-style {
420	436	color: #fff;
...	...	@@ -426,12 +442,13 @@
426	442	right: 7%;
427	443	transform: translate(-50%, -50%);
428	444	font-family: "ONEMobilePOPOTF";
429		- font-size: 36px;
	445	+ font-size: 27px;
430	446	}
431	447	.myphoto .btnGroup {
432	448	width: max-content;
433	449	position: absolute;
434		- right: 45px;
	450	+ top: 134px;
	451	+ right: 14px;
435	452	z-index: 10000;
436	453	}
437	454	.myphoto .class {
...	...	@@ -1169,7 +1186,8 @@
1169	1186	}
1170	1187
1171	1188	.class {
1172		- background-color: #f8f9fb;
	1189	+ /* background-color: #f8f9fb; */
	1190	+ background-image: url("../img/new_img/photobook/photo.png");
1173	1191	border-radius: 10px;
1174	1192	padding: 25px;
1175	1193	font-size: 19px;

...	...	@@ -1,297 +1,341 @@
1	1	<template>
2		- <div class="mypage">
3		- <div class="flex justify-between mb30" style="gap: 30px;">
4		- <div>
5		- <div class="title-box flex justify-between mb20">
6		- <p class="title" style="color: white;">소속 반</p>
7		- <div class="flex align-center look-btn">
8		- <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
9		- </div>
10		- </div>
11		- <div style="width: 82rem; padding: 2rem;">
12		- <section class="flex" style="gap: 20px;">
13		- <div class="class flex justify-between" style="cursor: default; background-color: transparent;">
14		- <div class="box gd-col2" style="gap: 5px;">
15		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
16		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
17		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
18		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
19		- </div>
20		- <div class="text mt10">
21		- <p class="title1 mb10">A반</p>
22		- <span class="member">20명</span>
23		- </div>
24		- </div>
25		-
26		- </section>
27		- </div>
28		- </div>
29		- <div>
30		-
31		- <div style="position: absolute; left: 102rem; top: 10rem; "
32		- @click="selectedTab = 'tab4'; goToPage('PhotoBook')"><img
33		- src="../../../resources/img/new_img/mypage/photoBtn.png" alt=""></div>
34		- <div class="title-box flex justify-between mb20" style=" position: absolute; left: 117em; top: 6em; ">
35		- <p class="title" style="color: white;">사진첩</p>
36		- </div>
37		- </div>
38		- </div>
	2	+ <div class="mypage">
	3	+ <div class="flex justify-between mb30" style="gap: 30px">
	4	+ <div>
39	5	<div class="title-box flex justify-between mb20">
40		- <p class="title" style="color: white;">{{ studentInfo.studentName }} 학생 랭킹</p>
	6	+ <p class="title" style="color: white">소속 반</p>
	7	+ <div class="flex align-center look-btn">
	8	+ <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
	9	+ </div>
41	10	</div>
42		- <div class=" mb30">
43		- <div class=" flex " style="gap: 95px;">
44		- <div class="textbook book-red" style="background-color: white; width: 19%; border: #f9c4eb solid 6px;">
45		- <div class="text" style="background-color: #f9c4eb;">
46		- <p class="title1" style="color: #fff;">포토북 랭킹</p>
47		- </div>
48		- <div class="box " style="gap: 10px;">
49		- <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
50		- <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="red">{{
51		- photo_rank }}등</em>입니다.</P>
52		- </div>
	11	+ <div style="width: 82rem; padding: 2rem">
	12	+ <section class="flex" style="gap: 20px">
	13	+ <div
	14	+ class="class flex justify-between"
	15	+ style="cursor: default; background-color: transparent"
	16	+ >
	17	+ <div class="box gd-col2" style="gap: 5px">
	18	+ <div>
	19	+ <img src="../../../resources/img/img176_82t.png" alt="" />
53	20	</div>
54		- <div class="textbook " style="background-color: white; width: 19%; border: #b5dbcc solid 6px;">
55		- <div class="text" style="background-color: #b5dbcc;">
56		- <p class="title1" style="color: #fff;">진도율 랭킹</p>
57		- </div>
58		- <div class="box " style="gap: 10px;">
59		- <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
60		- <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="yellow">{{
61		- problem_rank }}등</em>입니다.</P>
62		- </div>
	21	+ <div>
	22	+ <img src="../../../resources/img/img176_82t.png" alt="" />
63	23	</div>
64		- <div class="textbook book-blue "
65		- style="background-color: white; width: 19%; border: #bcd3eb solid 6px;">
66		- <div class="text" style="background-color: #bcd3eb;">
67		- <p class="title1" style="color: #fff;">점수 랭킹</p>
68		- </div>
69		- <div class="box " style="gap: 10px;">
70		- <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
71		- <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="blue">{{
72		- score_rank }}등</em>입니다.</P>
73		- </div>
	24	+ <div>
	25	+ <img src="../../../resources/img/img176_82t.png" alt="" />
74	26	</div>
75		- <div class="textbook book-navy "
76		- style="background-color: white; width: 19%; border: #f9c894 solid 6px;">
77		- <div class="text" style="background-color: #f9c894;">
78		- <p class="title1" style="color: #fff;">학습시간 랭킹</p>
79		- </div>
80		- <div class="box " style="gap: 10px;">
81		- <div><img src="../../../resources/img/img196_12p.png" alt=""></div>
82		- <P class="subtitle mt10" style="font-size: 19px;">현재 {{ stdCount }}명 중 <em class="navy">{{
83		- time_rank }}등</em>입니다.</P>
84		- </div>
	27	+ <div>
	28	+ <img src="../../../resources/img/img176_82t.png" alt="" />
85	29	</div>
	30	+ </div>
	31	+ <div class="text mt10">
	32	+ <p class="title1 mb10">A반</p>
	33	+ <span class="member">20명</span>
	34	+ </div>
86	35	</div>
	36	+ </section>
87	37	</div>
	38	+ </div>
	39	+ <div>
	40	+ <div
	41	+ style="position: absolute; left: 102rem; top: 10rem; cursor: pointer"
	42	+ @click="
	43	+ selectedTab = 'tab4';
	44	+ goToPage('PhotoBook');
	45	+ "
	46	+ >
	47	+ <img
	48	+ src="../../../resources/img/new_img/mypage/photoBtn.png"
	49	+ alt=""
	50	+ />
	51	+ </div>
	52	+ <div
	53	+ class="title-box flex justify-between mb20"
	54	+ style="position: absolute; left: 117em; top: 6em"
	55	+ >
	56	+ <p class="title" style="color: white">사진첩</p>
	57	+ </div>
	58	+ </div>
88	59	</div>
	60	+ <div class="title-box flex justify-between mb20">
	61	+ <p class="title" style="color: white">
	62	+ {{ studentInfo.studentName }} 학생 랭킹
	63	+ </p>
	64	+ </div>
	65	+ <div class="mb30">
	66	+ <div class="flex" style="gap: 95px">
	67	+ <div
	68	+ class="textbook book-red"
	69	+ style="background-color: white; width: 19%; border: #f9c4eb solid 6px"
	70	+ >
	71	+ <div class="text" style="background-color: #f9c4eb">
	72	+ <p class="title1" style="color: #fff">포토북 랭킹</p>
	73	+ </div>
	74	+ <div class="box" style="gap: 10px">
	75	+ <div>
	76	+ <img src="../../../resources/img/img196_12p.png" alt="" />
	77	+ </div>
	78	+ <P class="subtitle mt10" style="font-size: 19px"
	79	+ >현재 {{ stdCount }}명 중
	80	+ <em class="red">{{ photo_rank }}등</em>입니다.</P
	81	+ >
	82	+ </div>
	83	+ </div>
	84	+ <div
	85	+ class="textbook"
	86	+ style="background-color: white; width: 19%; border: #b5dbcc solid 6px"
	87	+ >
	88	+ <div class="text" style="background-color: #b5dbcc">
	89	+ <p class="title1" style="color: #fff">진도율 랭킹</p>
	90	+ </div>
	91	+ <div class="box" style="gap: 10px">
	92	+ <div>
	93	+ <img src="../../../resources/img/img196_12p.png" alt="" />
	94	+ </div>
	95	+ <P class="subtitle mt10" style="font-size: 19px"
	96	+ >현재 {{ stdCount }}명 중
	97	+ <em class="yellow">{{ problem_rank }}등</em>입니다.</P
	98	+ >
	99	+ </div>
	100	+ </div>
	101	+ <div
	102	+ class="textbook book-blue"
	103	+ style="background-color: white; width: 19%; border: #bcd3eb solid 6px"
	104	+ >
	105	+ <div class="text" style="background-color: #bcd3eb">
	106	+ <p class="title1" style="color: #fff">점수 랭킹</p>
	107	+ </div>
	108	+ <div class="box" style="gap: 10px">
	109	+ <div>
	110	+ <img src="../../../resources/img/img196_12p.png" alt="" />
	111	+ </div>
	112	+ <P class="subtitle mt10" style="font-size: 19px"
	113	+ >현재 {{ stdCount }}명 중
	114	+ <em class="blue">{{ score_rank }}등</em>입니다.</P
	115	+ >
	116	+ </div>
	117	+ </div>
	118	+ <div
	119	+ class="textbook book-navy"
	120	+ style="background-color: white; width: 19%; border: #f9c894 solid 6px"
	121	+ >
	122	+ <div class="text" style="background-color: #f9c894">
	123	+ <p class="title1" style="color: #fff">학습시간 랭킹</p>
	124	+ </div>
	125	+ <div class="box" style="gap: 10px">
	126	+ <div>
	127	+ <img src="../../../resources/img/img196_12p.png" alt="" />
	128	+ </div>
	129	+ <P class="subtitle mt10" style="font-size: 19px"
	130	+ >현재 {{ stdCount }}명 중
	131	+ <em class="navy">{{ time_rank }}등</em>입니다.</P
	132	+ >
	133	+ </div>
	134	+ </div>
	135	+ </div>
	136	+ </div>
	137	+ </div>
89	138	</template>
90	139
91	140	<script>
92		-import SvgIcon from '@jamescoyle/vue-icon';
93		-import { mdiMagnify, } from '@mdi/js';
94		-import { mdilArrowRight } from '@mdi/light-js';
95		-import ProgressBar from '../../component/ProgressBar.vue';
	141	+import SvgIcon from "@jamescoyle/vue-icon";
	142	+import { mdiMagnify } from "@mdi/js";
	143	+import { mdilArrowRight } from "@mdi/light-js";
	144	+import ProgressBar from "../../component/ProgressBar.vue";
96	145	import axios from "axios";
97	146
98		-
99	147	export default {
100		- data() {
101		- return {
102		- stdCount: 0,
103		- photo_rank: 0,
104		- problem_rank: 0,
105		- score_rank: 0,
106		- time_rank: 0,
107		- mdiMagnify: mdiMagnify,
108		- mdilArrowRight: mdilArrowRight,
109		- timer: "00:00",
110		- progress: 20,
111		- studentInfo: {
112		- studentName: "",
113		- institutionName: "",
114		- grade: "",
115		- className: "",
116		- studentQuestion: "",
117		- history: [],
118		- },
119		- }
	148	+ data() {
	149	+ return {
	150	+ stdCount: 0,
	151	+ photo_rank: 0,
	152	+ problem_rank: 0,
	153	+ score_rank: 0,
	154	+ time_rank: 0,
	155	+ mdiMagnify: mdiMagnify,
	156	+ mdilArrowRight: mdilArrowRight,
	157	+ timer: "00:00",
	158	+ progress: 20,
	159	+ studentInfo: {
	160	+ studentName: "",
	161	+ institutionName: "",
	162	+ grade: "",
	163	+ className: "",
	164	+ studentQuestion: "",
	165	+ history: [],
	166	+ },
	167	+ };
	168	+ },
	169	+ methods: {
	170	+ classStdCount: function () {
	171	+ const vm = this;
	172	+ axios({
	173	+ url: "/userclass/classStdCountByUserId.json",
	174	+ method: "post",
	175	+ headers: {
	176	+ "Content-Type": "application/json; charset=UTF-8",
	177	+ },
	178	+ data: {
	179	+ userId: "USID_000000000000002", // 로그인한 학생의 userId
	180	+ },
	181	+ })
	182	+ .then(function (response) {
	183	+ console.log("classStdCount - response : ", response.data);
	184	+ vm.stdCount = response.data;
	185	+ })
	186	+ .catch(function (error) {
	187	+ console.log("classStdCount - error : ", error);
	188	+ alert("반 학생 수 조회에 오류가 발생했습니다.");
	189	+ });
120	190	},
121		- methods: {
122		- classStdCount: function () {
123		- const vm = this;
124		- axios({
125		- url: "/userclass/classStdCountByUserId.json",
126		- method: "post",
127		- headers: {
128		- "Content-Type": "application/json; charset=UTF-8",
129		- },
130		- data: {
131		- userId: "USID_000000000000002" // 로그인한 학생의 userId
132		- }
133		- })
134		- .then(function (response) {
135		- console.log("classStdCount - response : ", response.data);
136		- vm.stdCount = response.data;
137		- })
138		- .catch(function (error) {
139		- console.log("classStdCount - error : ", error);
140		- alert("반 학생 수 조회에 오류가 발생했습니다.");
141		- });
	191	+ fetchStudentInfo() {
	192	+ const vm = this;
	193	+ axios({
	194	+ url: "/studentInfo/getInfo.json",
	195	+ method: "post",
	196	+ headers: {
	197	+ "Content-Type": "application/json; charset=UTF-8",
142	198	},
143		- fetchStudentInfo() {
144		- const vm = this;
145		- axios({
146		- url: "/studentInfo/getInfo.json",
147		- method: "post",
148		- headers: {
149		- "Content-Type": "application/json; charset=UTF-8",
150		- },
151		- data: {
152		- userId: "USID_000000000000002" // 로그인한 학생의 userId
153		- }
154		- })
155		- .then((response) => {
156		- console.log(response.data);
157		- this.studentInfo = response.data;
158		- })
159		- .catch((error) => {
160		- console.error("학생 정보 가져오기 실패:", error);
161		- });
	199	+ data: {
	200	+ userId: "USID_000000000000002", // 로그인한 학생의 userId
162	201	},
163		- photoRankByLikeData: function () {
164		- const vm = this;
165		- axios({
166		- url: "/photo/photoRankByLikeData.json",
167		- method: "post",
168		- headers: {
169		- "Content-Type": "application/json; charset=UTF-8",
170		- },
171		- data: {
172		- sclsId: "1",
173		- stdId: "1"
174		- }
175		- })
176		- .then(function (response) {
177		- console.log("Photo Rank - response : ", response.data);
178		- vm.photo_rank = response.data;
179		- })
180		- .catch(function (error) {
181		- console.log("Photo Rank - error : ", error);
182		- alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
183		- });
	202	+ })
	203	+ .then((response) => {
	204	+ console.log(response.data);
	205	+ this.studentInfo = response.data;
	206	+ })
	207	+ .catch((error) => {
	208	+ console.error("학생 정보 가져오기 실패:", error);
	209	+ });
	210	+ },
	211	+ photoRankByLikeData: function () {
	212	+ const vm = this;
	213	+ axios({
	214	+ url: "/photo/photoRankByLikeData.json",
	215	+ method: "post",
	216	+ headers: {
	217	+ "Content-Type": "application/json; charset=UTF-8",
184	218	},
185		- getUserRankByScore: function () {
186		- const vm = this;
187		- axios({
188		- url: "/userclass/getUserRankByScore.json",
189		- method: "post",
190		- headers: {
191		- "Content-Type": "application/json; charset=UTF-8",
192		- },
193		- data: {
194		- userId: "USID_000000000000002" // 로그인한 학생의 userId
195		- }
196		- })
197		- .then(function (response) {
198		- console.log("User Rank - response : ", response.data);
199		- vm.score_rank = response.data;
200		- })
201		- .catch(function (error) {
202		- console.log("User Rank - error : ", error);
203		- alert("점수 랭킹 조회에 오류가 발생했습니다.");
204		- });
	219	+ data: {
	220	+ sclsId: "1",
	221	+ stdId: "1",
205	222	},
206		- getUserRankByStudyTime: function () {
207		- const vm = this;
208		- axios({
209		- url: "/userclass/getUserRankByStudyTime.json",
210		- method: "post",
211		- headers: {
212		- "Content-Type": "application/json; charset=UTF-8",
213		- },
214		- data: {
215		- userId: "1" // 로그인한 학생의 userId
216		- }
217		- })
218		- .then(function (response) {
219		- console.log("User Rank - response : ", response.data);
220		- vm.time_rank = response.data;
221		- })
222		- .catch(function (error) {
223		- console.log("User Rank - error : ", error);
224		- alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
225		- });
	223	+ })
	224	+ .then(function (response) {
	225	+ console.log("Photo Rank - response : ", response.data);
	226	+ vm.photo_rank = response.data;
	227	+ })
	228	+ .catch(function (error) {
	229	+ console.log("Photo Rank - error : ", error);
	230	+ alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
	231	+ });
	232	+ },
	233	+ getUserRankByScore: function () {
	234	+ const vm = this;
	235	+ axios({
	236	+ url: "/userclass/getUserRankByScore.json",
	237	+ method: "post",
	238	+ headers: {
	239	+ "Content-Type": "application/json; charset=UTF-8",
226	240	},
227		- problemRankByProblemData: function () {
228		- const vm = this;
229		- axios({
230		- url: "/problemLog/problemRankByProblemData.json",
231		- method: "post",
232		- headers: {
233		- "Content-Type": "application/json; charset=UTF-8",
234		- },
235		- data: {
236		- sclsId: "1",
237		- stdId: "2"
238		- }
239		- })
240		- .then(function (response) {
241		- console.log("Problem Rank - response : ", response.data);
242		- vm.problem_rank = response.data;
243		- })
244		- .catch(function (error) {
245		- console.log("Problem Rank - error : ", error);
246		- alert("학생 문제 랭킹 조회에 오류가 발생했습니다.");
247		- });
	241	+ data: {
	242	+ userId: "USID_000000000000002", // 로그인한 학생의 userId
248	243	},
249		- goToPage(page) {
250		- this.$router.push({ name: page });
	244	+ })
	245	+ .then(function (response) {
	246	+ console.log("User Rank - response : ", response.data);
	247	+ vm.score_rank = response.data;
	248	+ })
	249	+ .catch(function (error) {
	250	+ console.log("User Rank - error : ", error);
	251	+ alert("점수 랭킹 조회에 오류가 발생했습니다.");
	252	+ });
	253	+ },
	254	+ getUserRankByStudyTime: function () {
	255	+ const vm = this;
	256	+ axios({
	257	+ url: "/userclass/getUserRankByStudyTime.json",
	258	+ method: "post",
	259	+ headers: {
	260	+ "Content-Type": "application/json; charset=UTF-8",
251	261	},
252		- increaseProgress() {
253		- if (this.progress < 100) {
254		- this.progress += 10;
255		- }
	262	+ data: {
	263	+ userId: "1", // 로그인한 학생의 userId
256	264	},
257		- showConfirm(type) {
258		- let message = '';
259		- if (type === 'cancel') {
260		- message = '삭제하시겠습니까?';
261		- } else if (type === 'reset') {
262		- message = '초기화하시겠습니까?';
263		- } else if (type === 'save') {
264		- message = '등록하시겠습니까?';
265		- }
	265	+ })
	266	+ .then(function (response) {
	267	+ console.log("User Rank - response : ", response.data);
	268	+ vm.time_rank = response.data;
	269	+ })
	270	+ .catch(function (error) {
	271	+ console.log("User Rank - error : ", error);
	272	+ alert("학습시간 랭킹 조회에 오류가 발생했습니다.");
	273	+ });
	274	+ },
	275	+ problemRankByProblemData: function () {
	276	+ const vm = this;
	277	+ axios({
	278	+ url: "/problemLog/problemRankByProblemData.json",
	279	+ method: "post",
	280	+ headers: {
	281	+ "Content-Type": "application/json; charset=UTF-8",
	282	+ },
	283	+ data: {
	284	+ sclsId: "1",
	285	+ stdId: "2",
	286	+ },
	287	+ })
	288	+ .then(function (response) {
	289	+ console.log("Problem Rank - response : ", response.data);
	290	+ vm.problem_rank = response.data;
	291	+ })
	292	+ .catch(function (error) {
	293	+ console.log("Problem Rank - error : ", error);
	294	+ alert("학생 문제 랭킹 조회에 오류가 발생했습니다.");
	295	+ });
	296	+ },
	297	+ goToPage(page) {
	298	+ this.$router.push({ name: page });
	299	+ },
	300	+ increaseProgress() {
	301	+ if (this.progress < 100) {
	302	+ this.progress += 10;
	303	+ }
	304	+ },
	305	+ showConfirm(type) {
	306	+ let message = "";
	307	+ if (type === "cancel") {
	308	+ message = "삭제하시겠습니까?";
	309	+ } else if (type === "reset") {
	310	+ message = "초기화하시겠습니까?";
	311	+ } else if (type === "save") {
	312	+ message = "등록하시겠습니까?";
	313	+ }
266	314
267		- if (confirm(message)) {
268		- this.goBack();
269		- }
270		- },
	315	+ if (confirm(message)) {
	316	+ this.goBack();
	317	+ }
271	318	},
272		- watch: {
273		-
274		- },
275		- computed: {
276		-
277		- },
278		- components: {
279		- SvgIcon,
280		- ProgressBar
281		- },
282		- mounted() {
283		- console.log('Main2 mounted');
284		- this.fetchStudentInfo();
285		- this.classStdCount();
286		- this.photoRankByLikeData();
287		- this.getUserRankByScore();
288		- this.problemRankByProblemData();
289		- this.getUserRankByStudyTime();
290		- }
291		-}
	319	+ },
	320	+ watch: {},
	321	+ computed: {},
	322	+ components: {
	323	+ SvgIcon,
	324	+ ProgressBar,
	325	+ },
	326	+ mounted() {
	327	+ console.log("Main2 mounted");
	328	+ this.fetchStudentInfo();
	329	+ this.classStdCount();
	330	+ this.photoRankByLikeData();
	331	+ this.getUserRankByScore();
	332	+ this.problemRankByProblemData();
	333	+ this.getUserRankByStudyTime();
	334	+ },
	335	+};
292	336	</script>
293	337	<style scoped>
294	338	.mypage .textbook {
295		- width: 22%;
	339	+ width: 22%;
296	340	}
297		-</style> (파일 끝에 줄바꿈 문자 없음)
	341	+</style>

...	...	@@ -5,48 +5,95 @@
5	5	<div class="myphoto mb30">
6	6	<div>
7	7	<div class="title-box flex justify-end mb40">
	8	+ <p class="class-p">반</p>
8	9	<select @change="handleClassChange">
9		- <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId">
	10	+ <option
	11	+ v-for="classItem in classList"
	12	+ :key="classItem.sclsId"
	13	+ :value="classItem.sclsId"
	14	+ >
10	15	{{ classItem.sclsNm }}
11	16	</option>
12	17	</select>
13	18	</div>
14	19	<div class="btnGroup" style="display: flex; flex-direction: column">
15		- <button v-for="n in totalPages" :key="n" @click="changePage(n)" type="button" title="페이지 버튼" class="tab-btn">
16		- <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="" />
17		- <img v-else src="../../../resources/img/btn49_15s_click.png" alt="" />
	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	+ />
18	38	<p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
19	39	</button>
20	40	</div>
21	41	<div v-if="selectedTab === 'tab1'" class="tab-box">
22		- <div class="flex justify-between">
23		- <div v-for="(photo, index) in (photoList?.result \|\| []).slice(0, 3)" :key="index" class="photo"
24		- :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
25		- <div class="class">
26		- <div class="box">
27		- <div class="photo-container">
28		- <img :src="fetchImage(photo.fileRpath)" alt="" />
	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>
29	64	</div>
30		- </div>
31		- <div class="photo-text mt10 ml10">
32		- <div class="member ml30">{{ photo.likeData }}</div>
33		- <div class="title2">{{ photo.unitName }}</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>
34	69	</div>
35	70	</div>
36	71	</div>
37		- </div>
38		- <div class="flex justify-between mt20">
39		- <div v-for="(photo, index) in (photoList?.result \|\| []).slice(3, 6)" :key="index + 3" class="photo"
40		- :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
41		- <div class="class">
42		- <div class="box">
43		- <div class="photo-container">
44		- <img :src="fetchImage(photo.fileRpath)" alt="" style="width: 150px" />
	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>
45	92	</div>
46		- </div>
47		- <div class="photo-text mt10 ml10">
48		- <div class="member ml30">{{ photo.likeData }}</div>
49		- <div class="title2">{{ photo.unitName }}</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>
50	97	</div>
51	98	</div>
52	99	</div>
...	...	@@ -57,20 +104,32 @@
57	104	<div class="flex mb10 justify-between">
58	105	<p class="popup-title">알림</p>
59	106	<button type="button" class="popup-close-btn" @click="closeBtn">
60		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	107	+ <svg-icon
	108	+ type="mdi"
	109	+ :path="mdiWindowClose"
	110	+ class="close-btn"
	111	+ ></svg-icon>
61	112	</button>
62	113	</div>
63	114
64		- <div class="photo-modal flex justify-between mt20" v-if="photoData.length > 0">
	115	+ <div
	116	+ class="photo-modal flex justify-between mt20"
	117	+ v-if="photoData.length > 0"
	118	+ >
65	119	<div class="box">
66	120	<div>
67		- <img :src="fetchImage(photoData[0].fileRpath)" alt="" style="width: 640px; height: 480px" />
	121	+ <img
	122	+ :src="fetchImage(photoData[0].fileRpath)"
	123	+ alt=""
	124	+ style="width: 640px; height: 480px"
	125	+ />
68	126	</div>
69	127	</div>
70	128	<div class="photo-title-container">
71	129	<div class="title1">
72	130	{{ photoData[0].unitName }}을 마친
73		- <em class="yellow">{{ photoData[0].stdName }}</em>친구
	131	+ <em class="yellow">{{ photoData[0].stdName }}</em
	132	+ >친구
74	133	</div>
75	134	<p class="title2 date">{{ photoData[0].photoDate }}</p>
76	135	</div>
...	...	@@ -101,7 +160,7 @@
101	160	photoData: [],
102	161
103	162	currentPage: 1,
104		- pageSize: 6,
	163	+ pageSize: 8,
105	164	totalPages: 1,
106	165
107	166	mdiWindowClose: mdiWindowClose,
...	...	@@ -133,9 +192,8 @@
133	192	console.log("classList - response : ", response.data);
134	193	vm.classList = response.data.data;
135	194	vm.currentPage = 1;
136		- vm.selectedSclsId= vm.classList[0].sclsId;
	195	+ vm.selectedSclsId = vm.classList[0].sclsId;
137	196	vm.stdPhotoSelectList();
138		-
139	197	})
140	198	.catch(function (error) {
141	199	console.log("classList - error : ", error);
...	...	@@ -144,35 +202,35 @@
144	202	},
145	203
146	204	handleClassChange(event) {
147		- this.selectedSclsId = event.target.value; // 선택된 sclsId 가져오기
148		- this.currentPage = 1; // 페이지 초기화
149		- this.stdPhotoSelectList(); // 함수 호출
150		- },
151		- stdPhotoSelectList: function (scsId) {
152		- const vm = this;
153		- axios({
154		- url: "/photo/stdPhotoList.json",
155		- method: "post",
156		- headers: {
157		- "Content-Type": "application/json; charset=UTF-8",
158		- },
159		- data: {
160		- stdId: "1",
161		- sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
162		- page: vm.currentPage,
163		- pageSize: vm.pageSize,
164		- },
165		- })
166		- .then(function (response) {
167		- console.log("photoList - response : ", response.data);
168		- vm.photoList = response.data;
169		- vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
	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",
	216	+ },
	217	+ data: {
	218	+ stdId: "1",
	219	+ sclsId: vm.selectedSclsId, // 여기에 sclsId 들어가야 함
	220	+ page: vm.currentPage,
	221	+ pageSize: vm.pageSize,
	222	+ },
170	223	})
171		- .catch(function (error) {
172		- console.log("photoList - error : ", error);
173		- alert("반별 내 사진 조회에 오류가 발생했습니다.");
174		- });
175		- },
	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	+ },
176	234	getRotation(index) {
177	235	const rotations = [2, -1, 1, -2, 1, -1];
178	236	return `rotate(${rotations[index]}deg)`;
...	...	@@ -305,6 +363,7 @@
305	363	.class {
306	364	width: 260px;
307	365	height: 200px;
	366	+ background-repeat: no-repeat;
308	367	}
309	368
310	369	.photo-container {
...	...	@@ -314,6 +373,9 @@
314	373	.photo-container img {
315	374	width: 150px;
316	375	height: 110px;
	376	+ height: 105px;
	377	+ position: relative;
	378	+ top: 23px;
317	379	}
318	380
319	381	.photo-text {
...	...	@@ -335,4 +397,36 @@
335	397	justify-content: space-between;
336	398	margin-top: 20px;
337	399	}
	400	+
	401	+select {
	402	+ border-radius: 16px;
	403	+ position: absolute;
	404	+ top: 42px;
	405	+ right: 33px;
	406	+}
	407	+
	408	+.class-p {
	409	+ font-size: 23px;
	410	+ position: absolute;
	411	+ top: 52px;
	412	+ right: 218px;
	413	+}
	414	+
	415	+.left-side,
	416	+.right-side {
	417	+ width: 48%; /* 좌우로 나눔 */
	418	+ display: flex;
	419	+ flex-wrap: wrap;
	420	+ align-content: flex-start;
	421	+}
	422	+
	423	+.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;
	431	+}
338	432	</style>

Delete comment