Commit @e8e5a2eb81c7485d5c37ad6c376527b2fd677c82

홍아랑 08-13

240813 홍아랑 마이페이지 학생 반 관련 수정 + 퍼즐 및 다리 맞추는 문제 로직 추가

@e8e5a2eb81c7485d5c37ad6c376527b2fd677c82

bcd21ce

e8e5a2e

client/views/pages/main/Chapter/Chapter2_4.vue

--- client/views/pages/main/Chapter/Chapter2_4.vue

+++ client/views/pages/main/Chapter/Chapter2_4.vue


          this.currentCon = this.items[index].con;
          this.startTimer();
       },
+
+      
       
    },
 }

bcd21ce

e8e5a2e

client/views/pages/main/Chapter/Chapter2_6.vue

--- client/views/pages/main/Chapter/Chapter2_6.vue

+++ client/views/pages/main/Chapter/Chapter2_6.vue


       <div class="pre-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/left.png" alt=""></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step2</p>
-          <div class="flex align-center mb30">
+        <div class="flex align-center mb30">
           <p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
         </div>
         <div class="text-ct">
-          <div class="dropGroup ">
+          <div class="dropGroup">
             <div class="flex justify-center">
-              <div class="popTxt" id="drop1">
-                <img src="../../../../resources/img/img66_38s_1.png" alt="" @click="showButton(1)" >
-                <button  v-if="showButton1"><img src="../../../../resources/img/img66_38s_1_color.png" alt="" ><p>i</p></button>
+              <div class="popTxt" id="drop1" @dragover.prevent @drop="handleDrop(1)">
+                <img src="../../../../resources/img/img66_38s_1.png" alt="">
+                <button v-if="showButton1"><img src="../../../../resources/img/img66_38s_1_color.png" alt=""><p>i</p></button>
               </div>
-              <div class="popTxt" id="drop2" >
-                <img src="../../../../resources/img/img66_38s_2.png" alt="" @click="showButton(2)" >
-                <button v-if="showButton2"><img src="../../../../resources/img/img66_38s_2_color.png" alt="" ><p>have</p></button>
+              <div class="popTxt" id="drop2" @dragover.prevent @drop="handleDrop(2)">
+                <img src="../../../../resources/img/img66_38s_2.png" alt="">
+                <button v-if="showButton2"><img src="../../../../resources/img/img66_38s_2_color.png" alt=""><p>have</p></button>
               </div>
-              <div class="popTxt" id="drop3">
-                <img src="../../../../resources/img/img66_38s_3.png" alt="" @click="showButton(3)" >
-                <button  v-if="showButton3"><img src="../../../../resources/img/img66_38s_3_color.png" alt="" ><p>banana</p></button>
+              <div class="popTxt" id="drop3" @dragover.prevent @drop="handleDrop(3)">
+                <img src="../../../../resources/img/img66_38s_3.png" alt="">
+                <button v-if="showButton3"><img src="../../../../resources/img/img66_38s_3_color.png" alt=""><p>banana</p></button>
               </div>
             </div>
-
           </div>
           <div class="dragGroup">
-            <article style="  right: 0;
-    top: 36%;  " @click="handleDrag(1)" v-show="!dragHidden1">
-              <button id="drag1">
+            <article style="right: 0; top: 36%;" @dragstart="handleDragStart(1)" v-show="!dragHidden1">
+              <button id="drag1" draggable="true">
                 <img src="../../../../resources/img/img67_38s.png" alt="">
                 <p>i</p>
               </button>
             </article>
-            <article style="  left: 0;
-    top: 36%;   " @click="handleDrag(2)" v-show="!dragHidden2">
-              <button id="drag2"> 
+            <article style="left: 0; top: 36%;" @dragstart="handleDragStart(2)" v-show="!dragHidden2">
+              <button id="drag2" draggable="true"> 
                 <img src="../../../../resources/img/img68_38s.png" alt="">
                 <p>have</p>
               </button>
             </article>
-           <article style="left: 50%;
-    top: 10%;"  @click="handleDrag(3)" v-show="!dragHidden3">
-              <button id="drag3">
+            <article style="left: 50%; top: 10%;" @dragstart="handleDragStart(3)" v-show="!dragHidden3">
+              <button id="drag3" draggable="true">
                 <img src="../../../../resources/img/img69_38s.png" alt="">
                 <p>banana</p>
               </button>
-           </article>
-
+            </article>
           </div>
         </div>
       </div>

       dragHidden1: false,
       dragHidden2: false,
       dragHidden3: false,
+      currentDrag: null // 드래그 중인 퍼즐의 번호를 저장합니다.
     }
   },
   methods: {
     goToPage(page) {
       this.$router.push({ name: page });
     },
-    handleDrag(dragNumber) {
-      // Drag 버튼 숨기기
-      // 여기서는 상태 관리를 통해 버튼을 제어합니다.
-      if (dragNumber === 1) {
-        this.showButton1 = false;
-      } else if (dragNumber === 2) {
-        this.showButton2 = false;
-      } else if (dragNumber === 3) {
-        this.showButton3 = false;
-      }
+    handleDragStart(dragNumber) {
+      // 현재 드래그 중인 퍼즐의 번호를 저장
+      this.currentDrag = dragNumber;
     },
-    showButton(dropNumber) {
-      // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
-      // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
-      if (dropNumber === 1) {
-        this.showButton1 = true;
+    handleDrop(dropNumber) {
+      // 드래그한 퍼즐의 번호와 드롭할 영역의 번호가 일치하는지 확인
+      if (this.currentDrag === dropNumber) {
+        this.showButton(dropNumber); // 버튼을 보여주고
+        this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
+      }
+      // 드래그 후 상태 초기화
+      this.currentDrag = null;
+    },
+    hideDragButton(dragNumber) {
+      if (dragNumber === 1) {
         this.dragHidden1 = true;
-      } else if (dropNumber === 2) {
-        this.showButton2 = true;
+      } else if (dragNumber === 2) {
         this.dragHidden2 = true;
-      } else if (dropNumber === 3) {
-        this.showButton3 = true;
+      } else if (dragNumber === 3) {
         this.dragHidden3 = true;
       }
     },
-  },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
+    showButton(dropNumber) {
+      if (dropNumber === 1) {
+        this.showButton1 = true;
+      } else if (dropNumber === 2) {
+        this.showButton2 = true;
+      } else if (dropNumber === 3) {
+        this.showButton3 = true;
+      }
+    }
   }
 }
 </script>
+
 <style scoped>
 .dropGroup button{ left: 0;}
 .dragGroup button p{color: #fff; font-size: 35px;}
 .dropGroup button p{
   font-size: 48px;
   color: #fff;}
-</style>
+</style>

bcd21ce

e8e5a2e

client/views/pages/main/Chapter/Chapter2_7.vue

--- client/views/pages/main/Chapter/Chapter2_7.vue

+++ client/views/pages/main/Chapter/Chapter2_7.vue


       <div class="pre-btn" @click="goToPage('Chapter2_6')"><img src="../../../../resources/img/left.png" alt=""></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step2</p>
-          <div class="flex align-center mb30">
+        <div class="flex align-center mb30">
           <p class="subtitle2 mr20">앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!</p>
-          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
         </div>
 
         <div class="text-ct flex justify-center" style="gap: 80px;">
           <div class="dropGroup flex align-center justify-center">
-            <div class="flex" style="gap: 20px; position: relative;" >
+            <div class="flex" style="gap: 20px; position: relative;">
               <img src="../../../../resources/img/img70_39s.png" alt="">
               <div class="textbox">
-                <p style="    left: 247px;
-    bottom: 49px;">1</p>
-                <p  style="     left: 396px;
-    bottom: 97px;">2</p>
-                <p style="     left: 530px;
-    bottom: 179px;">3</p>
+                <p style="left: -180px;bottom: -200px;">I</p>
+                <p id="bridgeTarget" style="left: -105px;bottom: -150px;" @dragover.prevent @drop="handleDrop">?</p>
+                <p style="left: -30px;bottom: -65px;">banana</p>
               </div>
             </div>
-
           </div>
           <div class="dragGroup mt40">
             <div>
-              <button><img src="../../../../resources/img/img71_39s.png" alt=""><p>a</p></button>
-              <button><img src="../../../../resources/img/img71_39s.png" alt=""><p>b</p></button>
-              <button><img src="../../../../resources/img/img71_39s.png" alt=""><p>c</p></button>
+              <button id="have" draggable="true" @dragstart="handleDragStart">
+                <img src="../../../../resources/img/img71_39s.png" alt="">
+                <p>have</p>
+              </button>
+              <button id="has" draggable="true" @dragstart="handleDragStart">
+                <img src="../../../../resources/img/img71_39s.png" alt="">
+                <p>has</p>
+              </button>
+              <button id="had" draggable="true" @dragstart="handleDragStart">
+                <img src="../../../../resources/img/img71_39s.png" alt="">
+                <p>had</p>
+              </button>
             </div>
-
           </div>
         </div>
       </div>

 export default {
   data() {
     return {
-    }
+      draggedElementId: null, // 드래그한 요소의 ID를 저장
+      correctAnswer: "have",  // 정답 설정
+    };
   },
   methods: {
     goToPage(page) {
       this.$router.push({ name: page });
+    },
+    handleDragStart(event) {
+      // 드래그한 요소의 ID를 저장
+      this.draggedElementId = event.target.id;
+    },
+    handleDrop(event) {
+      const dropZone = event.target;
+      const draggedElement = document.getElementById(this.draggedElementId);
+
+      // 이미 드롭된 요소가 있는지 확인 -> 수정필요
+      const existingElement = dropZone.querySelector('button');
+
+      if (existingElement) {
+        // 이미 드롭된 요소가 있다면 원래 위치로 되돌림
+        const dragGroup = document.querySelector('.dragGroup > div');
+        existingElement.style.visibility = 'visible';
+        existingElement.style.position = '';
+        existingElement.style.top = '';
+        existingElement.style.left = '';
+        dragGroup.appendChild(existingElement);
+      }
+
+      // 새로운 다리 이미지와 텍스트를 드롭 영역에 추가
+      const cloneElement = draggedElement.cloneNode(true);
+      cloneElement.style.position = 'absolute';
+      cloneElement.style.top = "-70px";
+      cloneElement.style.left = "-50px";
+      dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
+      dropZone.appendChild(cloneElement);
+
+      // 드래그한 요소 숨기기
+      draggedElement.style.visibility = "hidden";
+
+      // DOM 업데이트 후 알림을 비동기적으로 처리
+      setTimeout(() => {
+        if (this.draggedElementId === this.correctAnswer) {
+          alert("정답입니다!");
+        } else {
+          alert("오답입니다!");
+        }
+
+        // 드래그 상태 초기화
+        this.draggedElementId = null;
+      }, 0);
     }
-  },
-  watch: {
+
+
 
   },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+};
 </script>
+
+
 <style scoped>
-.textbox p{position: absolute; }
-.dragGroup button{display: block;}
-.dragGroup button p, .textbox p{    width: fit-content;
-    height: fit-content;
-    background: #ffffffb8;
-    border-radius: 5px;
-    padding: 10px;
-    font-size: 30px; font-family: 'ONEMobilePOP';}
-</style>
+.textbox p {
+  position: absolute;
+}
+
+.dragGroup button {
+  display: block;
+}
+
+.dragGroup button p,
+.textbox p {
+  width: fit-content;
+  height: fit-content;
+  background: #ffffffb8;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 30px;
+  font-family: 'ONEMobilePOP';
+}
+
+.dragGroup button {
+  cursor: grab;
+}
+
+.dragGroup button[draggable="true"]:active {
+  cursor: grabbing;
+}
+</style>

bcd21ce

e8e5a2e

client/views/pages/main/MyPage.vue

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

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


 <template>
-
-   <div class="mypage">
+    <div class="mypage">
         <div class="flex justify-between mb30" style="gap: 30px;">
             <div>
                 <div class="title-box flex justify-between mb20">
-                    <p class="title">입장하기</p>
-                    <div class="flex align-center look-btn"><p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon></div>
+                    <p class="title">소속 반</p>
+                    <div class="flex align-center look-btn">
+                        <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
+                    </div>
                 </div>
                 <div class="wrap " style="width: 82rem;">
                     <section class="flex" style="gap: 20px;">
-                        <div class="class flex justify-between">
-                            <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')">
+                        <div class="class flex justify-between" style="cursor: default;">
+                            <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>

                                 <span class="member">20명</span>
                             </div>
                         </div>
-                        <div class="class flex justify-between">
-                            <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')">
-                                <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>
-                        <div class="class flex justify-between">
-                            <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')">
-                                <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>
                 <div class="title-box flex justify-between mb20">
                     <p class="title">사진첩</p>
                 </div>
                 <div class="photobook">
                     <div class="flex justify-between">
-                            <div class="box" style="gap: 5px;" >
-                                <div><img src="../../../resources/img/img198_12p.png" alt=""></div>
-                            </div>
-                            <div class="text mt10">
-                                <p class="title1 mb10">나의 사진첩</p>
-                                <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button" title="글쓰기" class="new-btn">
-   바로가기
-</button>
-
-                            </div>
+                        <div class="box" style="gap: 5px;">
+                            <div><img src="../../../resources/img/img198_12p.png" alt=""></div>
                         </div>
-                   
+                        <div class="text mt10">
+                            <p class="title1 mb10">나의 사진첩</p>
+                            <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button" title="글쓰기"
+                                class="new-btn">
+                                바로가기
+                            </button>
+
+                        </div>
+                    </div>
+
                 </div>
             </div>
         </div>

                 </div>
             </div>
         </div>
-   </div>
-
+    </div>
 </template>
 
 <script>
 import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify,  } from '@mdi/js';
+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,
+            stdCount: 0,
             rank: 0,
 
             mdiMagnify: mdiMagnify,

             axios({
                 url: "/userclass/classStdCount.json",
                 method: "post",
-                headers:{
+                headers: {
                     "Content-Type": "application/json; charset=UTF-8",
                 },
                 data: {
-                    sclsId:"1"
+                    sclsId: "1"
                 }
             })
-            .then(function (response) {
-                console.log("classStdCount - response : ", response.data);
-                vm.stdCount = response.data;
-            })
-            .catch(function (error) {
-                console.log("classStdCount - error : ", error);
-                alert("반 학생 수 조회에 오류가 발생했습니다.");
-            });
+                .then(function (response) {
+                    console.log("classStdCount - response : ", response.data);
+                    vm.stdCount = response.data;
+                })
+                .catch(function (error) {
+                    console.log("classStdCount - error : ", error);
+                    alert("반 학생 수 조회에 오류가 발생했습니다.");
+                });
         },
 
         photoRankByLikeData: function () {

             axios({
                 url: "/photo/photoRankByLikeData.json",
                 method: "post",
-                headers:{
+                headers: {
                     "Content-Type": "application/json; charset=UTF-8",
                 },
                 data: {
-                    sclsId:"1",
-                    stdId:"1"
+                    sclsId: "1",
+                    stdId: "1"
                 }
             })
-            .then(function (response) {
-                console.log("Rank - response : ", response.data);
-                vm.rank = response.data;
-            })
-            .catch(function (error) {
-                console.log("Rank - error : ", error);
-                alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
-            });
+                .then(function (response) {
+                    console.log("Rank - response : ", response.data);
+                    vm.rank = response.data;
+                })
+                .catch(function (error) {
+                    console.log("Rank - error : ", error);
+                    alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
+                });
         },
 
         goToPage(page) {

bcd21ce

e8e5a2e

webpack.config.js

--- webpack.config.js

+++ webpack.config.js


     path: `${BASE_DIR}/client/build`,	// __dirname: webpack.config.js 파일이 위치한 경로
     filename: 'bundle.js'
   },
-  configureWebpack: {
-    resolve: {
-      alias: {
-        "@amcharts/amcharts5": "@amcharts/amcharts5/dist/amcharts5.esm.js"
-      }
-    }
-  },
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -41,11 +41,4 @@
41	41	path: `${BASE_DIR}/client/build`, // __dirname: webpack.config.js 파일이 위치한 경로
42	42	filename: 'bundle.js'
43	43	},
44		- configureWebpack: {
45		- resolve: {
46		- alias: {
47		- "@amcharts/amcharts5": "@amcharts/amcharts5/dist/amcharts5.esm.js"
48		- }
49		- }
50		- },
51	44	} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -66,6 +66,8 @@
66	66	this.currentCon = this.items[index].con;
67	67	this.startTimer();
68	68	},
	69	+
	70	+
69	71
70	72	},
71	73	}

...	...	@@ -8,52 +8,45 @@
8	8	<div class="pre-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/left.png" alt=""></div>
9	9	<div class="content title-box">
10	10	<p class="title mt25 title-bg">step2</p>
11		- <div class="flex align-center mb30">
	11	+ <div class="flex align-center mb30">
12	12	<p class="subtitle2 mr20">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>
13		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
14		- </button> -->
15	13	</div>
16	14	<div class="text-ct">
17		- <div class="dropGroup ">
	15	+ <div class="dropGroup">
18	16	<div class="flex justify-center">
19		- <div class="popTxt" id="drop1">
20		- <img src="../../../../resources/img/img66_38s_1.png" alt="" @click="showButton(1)" >
21		- <button v-if="showButton1"><img src="../../../../resources/img/img66_38s_1_color.png" alt="" ><p>i</p></button>
	17	+ <div class="popTxt" id="drop1" @dragover.prevent @drop="handleDrop(1)">
	18	+ <img src="../../../../resources/img/img66_38s_1.png" alt="">
	19	+ <button v-if="showButton1"><img src="../../../../resources/img/img66_38s_1_color.png" alt=""><p>i</p></button>
22	20	</div>
23		- <div class="popTxt" id="drop2" >
24		- <img src="../../../../resources/img/img66_38s_2.png" alt="" @click="showButton(2)" >
25		- <button v-if="showButton2"><img src="../../../../resources/img/img66_38s_2_color.png" alt="" ><p>have</p></button>
	21	+ <div class="popTxt" id="drop2" @dragover.prevent @drop="handleDrop(2)">
	22	+ <img src="../../../../resources/img/img66_38s_2.png" alt="">
	23	+ <button v-if="showButton2"><img src="../../../../resources/img/img66_38s_2_color.png" alt=""><p>have</p></button>
26	24	</div>
27		- <div class="popTxt" id="drop3">
28		- <img src="../../../../resources/img/img66_38s_3.png" alt="" @click="showButton(3)" >
29		- <button v-if="showButton3"><img src="../../../../resources/img/img66_38s_3_color.png" alt="" ><p>banana</p></button>
	25	+ <div class="popTxt" id="drop3" @dragover.prevent @drop="handleDrop(3)">
	26	+ <img src="../../../../resources/img/img66_38s_3.png" alt="">
	27	+ <button v-if="showButton3"><img src="../../../../resources/img/img66_38s_3_color.png" alt=""><p>banana</p></button>
30	28	</div>
31	29	</div>
32		-
33	30	</div>
34	31	<div class="dragGroup">
35		- <article style=" right: 0;
36		- top: 36%; " @click="handleDrag(1)" v-show="!dragHidden1">
37		- <button id="drag1">
	32	+ <article style="right: 0; top: 36%;" @dragstart="handleDragStart(1)" v-show="!dragHidden1">
	33	+ <button id="drag1" draggable="true">
38	34	<img src="../../../../resources/img/img67_38s.png" alt="">
39	35	<p>i</p>
40	36	</button>
41	37	</article>
42		- <article style=" left: 0;
43		- top: 36%; " @click="handleDrag(2)" v-show="!dragHidden2">
44		- <button id="drag2">
	38	+ <article style="left: 0; top: 36%;" @dragstart="handleDragStart(2)" v-show="!dragHidden2">
	39	+ <button id="drag2" draggable="true">
45	40	<img src="../../../../resources/img/img68_38s.png" alt="">
46	41	<p>have</p>
47	42	</button>
48	43	</article>
49		- <article style="left: 50%;
50		- top: 10%;" @click="handleDrag(3)" v-show="!dragHidden3">
51		- <button id="drag3">
	44	+ <article style="left: 50%; top: 10%;" @dragstart="handleDragStart(3)" v-show="!dragHidden3">
	45	+ <button id="drag3" draggable="true">
52	46	<img src="../../../../resources/img/img69_38s.png" alt="">
53	47	<p>banana</p>
54	48	</button>
55		- </article>
56		-
	49	+ </article>
57	50	</div>
58	51	</div>
59	52	</div>
...	...	@@ -72,55 +65,52 @@
72	65	dragHidden1: false,
73	66	dragHidden2: false,
74	67	dragHidden3: false,
	68	+ currentDrag: null // 드래그 중인 퍼즐의 번호를 저장합니다.
75	69	}
76	70	},
77	71	methods: {
78	72	goToPage(page) {
79	73	this.$router.push({ name: page });
80	74	},
81		- handleDrag(dragNumber) {
82		- // Drag 버튼 숨기기
83		- // 여기서는 상태 관리를 통해 버튼을 제어합니다.
84		- if (dragNumber === 1) {
85		- this.showButton1 = false;
86		- } else if (dragNumber === 2) {
87		- this.showButton2 = false;
88		- } else if (dragNumber === 3) {
89		- this.showButton3 = false;
90		- }
	75	+ handleDragStart(dragNumber) {
	76	+ // 현재 드래그 중인 퍼즐의 번호를 저장
	77	+ this.currentDrag = dragNumber;
91	78	},
92		- showButton(dropNumber) {
93		- // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
94		- // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
95		- if (dropNumber === 1) {
96		- this.showButton1 = true;
	79	+ handleDrop(dropNumber) {
	80	+ // 드래그한 퍼즐의 번호와 드롭할 영역의 번호가 일치하는지 확인
	81	+ if (this.currentDrag === dropNumber) {
	82	+ this.showButton(dropNumber); // 버튼을 보여주고
	83	+ this.hideDragButton(dropNumber); // 드래그한 퍼즐은 숨김
	84	+ }
	85	+ // 드래그 후 상태 초기화
	86	+ this.currentDrag = null;
	87	+ },
	88	+ hideDragButton(dragNumber) {
	89	+ if (dragNumber === 1) {
97	90	this.dragHidden1 = true;
98		- } else if (dropNumber === 2) {
99		- this.showButton2 = true;
	91	+ } else if (dragNumber === 2) {
100	92	this.dragHidden2 = true;
101		- } else if (dropNumber === 3) {
102		- this.showButton3 = true;
	93	+ } else if (dragNumber === 3) {
103	94	this.dragHidden3 = true;
104	95	}
105	96	},
106		- },
107		- watch: {
108		-
109		- },
110		- computed: {
111		-
112		- },
113		- components: {
114		- },
115		- mounted() {
116		-
	97	+ showButton(dropNumber) {
	98	+ if (dropNumber === 1) {
	99	+ this.showButton1 = true;
	100	+ } else if (dropNumber === 2) {
	101	+ this.showButton2 = true;
	102	+ } else if (dropNumber === 3) {
	103	+ this.showButton3 = true;
	104	+ }
	105	+ }
117	106	}
118	107	}
119	108	</script>
	109	+
120	110	<style scoped>
121	111	.dropGroup button{ left: 0;}
122	112	.dragGroup button p{color: #fff; font-size: 35px;}
123	113	.dropGroup button p{
124	114	font-size: 48px;
125	115	color: #fff;}
126		-</style> (파일 끝에 줄바꿈 문자 없음)
	116	+</style>

...	...	@@ -8,34 +8,36 @@
8	8	<div class="pre-btn" @click="goToPage('Chapter2_6')"><img src="../../../../resources/img/left.png" alt=""></div>
9	9	<div class="content title-box">
10	10	<p class="title mt25 title-bg">step2</p>
11		- <div class="flex align-center mb30">
	11	+ <div class="flex align-center mb30">
12	12	<p class="subtitle2 mr20">앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!</p>
13		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
14		- </button> -->
15	13	</div>
16	14
17	15	<div class="text-ct flex justify-center" style="gap: 80px;">
18	16	<div class="dropGroup flex align-center justify-center">
19		- <div class="flex" style="gap: 20px; position: relative;" >
	17	+ <div class="flex" style="gap: 20px; position: relative;">
20	18	<img src="../../../../resources/img/img70_39s.png" alt="">
21	19	<div class="textbox">
22		- <p style=" left: 247px;
23		- bottom: 49px;">1</p>
24		- <p style=" left: 396px;
25		- bottom: 97px;">2</p>
26		- <p style=" left: 530px;
27		- bottom: 179px;">3</p>
	20	+ <p style="left: -180px;bottom: -200px;">I</p>
	21	+ <p id="bridgeTarget" style="left: -105px;bottom: -150px;" @dragover.prevent @drop="handleDrop">?</p>
	22	+ <p style="left: -30px;bottom: -65px;">banana</p>
28	23	</div>
29	24	</div>
30		-
31	25	</div>
32	26	<div class="dragGroup mt40">
33	27	<div>
34		- <button><img src="../../../../resources/img/img71_39s.png" alt=""><p>a</p></button>
35		- <button><img src="../../../../resources/img/img71_39s.png" alt=""><p>b</p></button>
36		- <button><img src="../../../../resources/img/img71_39s.png" alt=""><p>c</p></button>
	28	+ <button id="have" draggable="true" @dragstart="handleDragStart">
	29	+ <img src="../../../../resources/img/img71_39s.png" alt="">
	30	+ <p>have</p>
	31	+ </button>
	32	+ <button id="has" draggable="true" @dragstart="handleDragStart">
	33	+ <img src="../../../../resources/img/img71_39s.png" alt="">
	34	+ <p>has</p>
	35	+ </button>
	36	+ <button id="had" draggable="true" @dragstart="handleDragStart">
	37	+ <img src="../../../../resources/img/img71_39s.png" alt="">
	38	+ <p>had</p>
	39	+ </button>
37	40	</div>
38		-
39	41	</div>
40	42	</div>
41	43	</div>
...	...	@@ -48,33 +50,91 @@
48	50	export default {
49	51	data() {
50	52	return {
51		- }
	53	+ draggedElementId: null, // 드래그한 요소의 ID를 저장
	54	+ correctAnswer: "have", // 정답 설정
	55	+ };
52	56	},
53	57	methods: {
54	58	goToPage(page) {
55	59	this.$router.push({ name: page });
	60	+ },
	61	+ handleDragStart(event) {
	62	+ // 드래그한 요소의 ID를 저장
	63	+ this.draggedElementId = event.target.id;
	64	+ },
	65	+ handleDrop(event) {
	66	+ const dropZone = event.target;
	67	+ const draggedElement = document.getElementById(this.draggedElementId);
	68	+
	69	+ // 이미 드롭된 요소가 있는지 확인 -> 수정필요
	70	+ const existingElement = dropZone.querySelector('button');
	71	+
	72	+ if (existingElement) {
	73	+ // 이미 드롭된 요소가 있다면 원래 위치로 되돌림
	74	+ const dragGroup = document.querySelector('.dragGroup > div');
	75	+ existingElement.style.visibility = 'visible';
	76	+ existingElement.style.position = '';
	77	+ existingElement.style.top = '';
	78	+ existingElement.style.left = '';
	79	+ dragGroup.appendChild(existingElement);
	80	+ }
	81	+
	82	+ // 새로운 다리 이미지와 텍스트를 드롭 영역에 추가
	83	+ const cloneElement = draggedElement.cloneNode(true);
	84	+ cloneElement.style.position = 'absolute';
	85	+ cloneElement.style.top = "-70px";
	86	+ cloneElement.style.left = "-50px";
	87	+ dropZone.innerHTML = ""; // 기존 ? 텍스트 제거
	88	+ dropZone.appendChild(cloneElement);
	89	+
	90	+ // 드래그한 요소 숨기기
	91	+ draggedElement.style.visibility = "hidden";
	92	+
	93	+ // DOM 업데이트 후 알림을 비동기적으로 처리
	94	+ setTimeout(() => {
	95	+ if (this.draggedElementId === this.correctAnswer) {
	96	+ alert("정답입니다!");
	97	+ } else {
	98	+ alert("오답입니다!");
	99	+ }
	100	+
	101	+ // 드래그 상태 초기화
	102	+ this.draggedElementId = null;
	103	+ }, 0);
56	104	}
57		- },
58		- watch: {
	105	+
	106	+
59	107
60	108	},
61		- computed: {
62		-
63		- },
64		- components: {
65		- },
66		- mounted() {
67		-
68		- }
69		-}
	109	+};
70	110	</script>
	111	+
	112	+
71	113	<style scoped>
72		-.textbox p{position: absolute; }
73		-.dragGroup button{display: block;}
74		-.dragGroup button p, .textbox p{ width: fit-content;
75		- height: fit-content;
76		- background: #ffffffb8;
77		- border-radius: 5px;
78		- padding: 10px;
79		- font-size: 30px; font-family: 'ONEMobilePOP';}
80		-</style> (파일 끝에 줄바꿈 문자 없음)
	114	+.textbox p {
	115	+ position: absolute;
	116	+}
	117	+
	118	+.dragGroup button {
	119	+ display: block;
	120	+}
	121	+
	122	+.dragGroup button p,
	123	+.textbox p {
	124	+ width: fit-content;
	125	+ height: fit-content;
	126	+ background: #ffffffb8;
	127	+ border-radius: 5px;
	128	+ padding: 10px;
	129	+ font-size: 30px;
	130	+ font-family: 'ONEMobilePOP';
	131	+}
	132	+
	133	+.dragGroup button {
	134	+ cursor: grab;
	135	+}
	136	+
	137	+.dragGroup button[draggable="true"]:active {
	138	+ cursor: grabbing;
	139	+}
	140	+</style>

...	...	@@ -1,16 +1,17 @@
1	1	<template>
2		-
3		- <div class="mypage">
	2	+ <div class="mypage">
4	3	<div class="flex justify-between mb30" style="gap: 30px;">
5	4	<div>
6	5	<div class="title-box flex justify-between mb20">
7		- <p class="title">입장하기</p>
8		- <div class="flex align-center look-btn"><p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon></div>
	6	+ <p class="title">소속 반</p>
	7	+ <div class="flex align-center look-btn">
	8	+ <!-- <p>더보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon> -->
	9	+ </div>
9	10	</div>
10	11	<div class="wrap " style="width: 82rem;">
11	12	<section class="flex" style="gap: 20px;">
12		- <div class="class flex justify-between">
13		- <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')">
	13	+ <div class="class flex justify-between" style="cursor: default;">
	14	+ <div class="box gd-col2" style="gap: 5px;">
14	15	<div><img src="../../../resources/img/img176_82t.png" alt=""></div>
15	16	<div><img src="../../../resources/img/img176_82t.png" alt=""></div>
16	17	<div><img src="../../../resources/img/img176_82t.png" alt=""></div>
...	...	@@ -21,51 +22,29 @@
21	22	<span class="member">20명</span>
22	23	</div>
23	24	</div>
24		- <div class="class flex justify-between">
25		- <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')">
26		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
27		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
28		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
29		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
30		- </div>
31		- <div class="text mt10">
32		- <p class="title1 mb10">A반</p>
33		- <span class="member">20명</span>
34		- </div>
35		- </div>
36		- <div class="class flex justify-between">
37		- <div class="box gd-col2" style="gap: 5px;" @click="goToPage('ClassDetail')">
38		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
39		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
40		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
41		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
42		- </div>
43		- <div class="text mt10">
44		- <p class="title1 mb10">A반</p>
45		- <span class="member">20명</span>
46		- </div>
47		- </div>
	25	+
48	26	</section>
49	27	</div>
50	28	</div>
51		- <div >
	29	+ <div>
52	30	<div class="title-box flex justify-between mb20">
53	31	<p class="title">사진첩</p>
54	32	</div>
55	33	<div class="photobook">
56	34	<div class="flex justify-between">
57		- <div class="box" style="gap: 5px;" >
58		- <div><img src="../../../resources/img/img198_12p.png" alt=""></div>
59		- </div>
60		- <div class="text mt10">
61		- <p class="title1 mb10">나의 사진첩</p>
62		- <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button" title="글쓰기" class="new-btn">
63		- 바로가기
64		-</button>
65		-
66		- </div>
	35	+ <div class="box" style="gap: 5px;">
	36	+ <div><img src="../../../resources/img/img198_12p.png" alt=""></div>
67	37	</div>
68		-
	38	+ <div class="text mt10">
	39	+ <p class="title1 mb10">나의 사진첩</p>
	40	+ <button @click="selectedTab = 'tab4'; goToPage('PhotoBook')" type="button" title="글쓰기"
	41	+ class="new-btn">
	42	+ 바로가기
	43	+ </button>
	44	+
	45	+ </div>
	46	+ </div>
	47	+
69	48	</div>
70	49	</div>
71	50	</div>
...	...	@@ -112,13 +91,12 @@
112	91	</div>
113	92	</div>
114	93	</div>
115		- </div>
116		-
	94	+ </div>
117	95	</template>
118	96
119	97	<script>
120	98	import SvgIcon from '@jamescoyle/vue-icon';
121		-import { mdiMagnify, } from '@mdi/js';
	99	+import { mdiMagnify, } from '@mdi/js';
122	100	import { mdilArrowRight } from '@mdi/light-js';
123	101	import ProgressBar from '../../component/ProgressBar.vue';
124	102	import axios from "axios";
...	...	@@ -127,7 +105,7 @@
127	105	export default {
128	106	data() {
129	107	return {
130		- stdCount : 0,
	108	+ stdCount: 0,
131	109	rank: 0,
132	110
133	111	mdiMagnify: mdiMagnify,
...	...	@@ -142,21 +120,21 @@
142	120	axios({
143	121	url: "/userclass/classStdCount.json",
144	122	method: "post",
145		- headers:{
	123	+ headers: {
146	124	"Content-Type": "application/json; charset=UTF-8",
147	125	},
148	126	data: {
149		- sclsId:"1"
	127	+ sclsId: "1"
150	128	}
151	129	})
152		- .then(function (response) {
153		- console.log("classStdCount - response : ", response.data);
154		- vm.stdCount = response.data;
155		- })
156		- .catch(function (error) {
157		- console.log("classStdCount - error : ", error);
158		- alert("반 학생 수 조회에 오류가 발생했습니다.");
159		- });
	130	+ .then(function (response) {
	131	+ console.log("classStdCount - response : ", response.data);
	132	+ vm.stdCount = response.data;
	133	+ })
	134	+ .catch(function (error) {
	135	+ console.log("classStdCount - error : ", error);
	136	+ alert("반 학생 수 조회에 오류가 발생했습니다.");
	137	+ });
160	138	},
161	139
162	140	photoRankByLikeData: function () {
...	...	@@ -164,22 +142,22 @@
164	142	axios({
165	143	url: "/photo/photoRankByLikeData.json",
166	144	method: "post",
167		- headers:{
	145	+ headers: {
168	146	"Content-Type": "application/json; charset=UTF-8",
169	147	},
170	148	data: {
171		- sclsId:"1",
172		- stdId:"1"
	149	+ sclsId: "1",
	150	+ stdId: "1"
173	151	}
174	152	})
175		- .then(function (response) {
176		- console.log("Rank - response : ", response.data);
177		- vm.rank = response.data;
178		- })
179		- .catch(function (error) {
180		- console.log("Rank - error : ", error);
181		- alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
182		- });
	153	+ .then(function (response) {
	154	+ console.log("Rank - response : ", response.data);
	155	+ vm.rank = response.data;
	156	+ })
	157	+ .catch(function (error) {
	158	+ console.log("Rank - error : ", error);
	159	+ alert("학생 사진 랭킹 조회에 오류가 발생했습니다.");
	160	+ });
183	161	},
184	162
185	163	goToPage(page) {

Delete comment