Commit @6449a5f633ec42d96bebd5227237df12f05469fe

박민혁 2024-08-19

Merge branch 'master' of http://210.180.118.83/jichoi/lms_front

@6449a5f633ec42d96bebd5227237df12f05469fe

5221da8

6449a5f

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

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

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


     <div id="Chapter1_1" class="content-wrap">
         <div style="margin: 30px 0px 50px; width: 20%">
             <router-link to="/MyPlan.page">
-                <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+                <div class="logo mb25">
+                    <img src="../../../../resources/img/logo2.png" alt="" />
+                </div>
             </router-link>
         </div>
         <div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">

                 <img src="../../../../resources/img/left.png" alt="" />
             </div>
             <div class="content title-box">
+                ,,,
                 <p class="title mt25 title-bg">step3.</p>
-                <div class="flex align-center mb30">
+                <div class="flex align-center mb30" style="justify-content: space-between">
                     <p class="subtitle2 mr20">알맞은 것을 고르세요.</p>
                 </div>
 
-                <div class="mt80 flex align-center justify-center" style="gap: 113px">
-                    <div class="imgGroup">
-                        <div class="flex" style="gap: 60px">
-                            <img src="../../../../resources/img/img106_48s.png" alt="" />
-                        </div>
-                        <div class="time-bg">
+                <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
+                    <div class="time-hint">
+                        <button class="hint-btn">HINT</button>
+                        <div class="time-bg mt20">
                             <div>
                                 <div class="time">
                                     <p class="second">{{ timer }}</p>

                             </div>
                         </div>
                     </div>
-                    <div class="pickGroup">
-                        <div>
-                            <article class="flex justify-center mb50" style="gap: 60px">
-                                <div class="flex">
-                                    <button>
-                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                        <p>1</p>
-                                    </button>
-                                    <p>a</p>
-                                </div>
-                            </article>
-                            <article class="flex justify-center mb50" style="gap: 60px">
-                                <div class="flex">
-                                    <button>
-                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                        <p>2</p>
-                                    </button>
-                                    <p>a</p>
-                                </div>
-                            </article>
-                            <article class="flex justify-center" style="gap: 60px">
-                                <div class="flex">
-                                    <button>
-                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                        <p>3</p>
-                                    </button>
-                                    <p>a</p>
-                                </div>
-                            </article>
+                    <div class="imgGroup">
+                        <div class="flex" style="gap: 60px">
+                            <img src="../../../../resources/img/img106_48s.png" alt="" />
                         </div>
                     </div>
+                    <div class="pickGroup">
+                        <article class="flex justify-center mb50" style="gap: 60px">
+                            <div class="flex" @click="handleClick(1)">
+                                <button>
+                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                    <p :class="{ active: selectedButton === 1 }">1</p>
+                                </button>
+                                <p>guitar</p>
+                            </div>
+                        </article>
+                        <article class="flex justify-center mb50" style="gap: 60px">
+                            <div class="flex" @click="handleClick(2)">
+                                <button>
+                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                    <p :class="{ active: selectedButton === 2 }">2</p>
+                                </button>
+                                <p>violin</p>
+                            </div>
+                        </article>
+                        <article class="flex justify-center" style="gap: 60px">
+                            <div class="flex" @click="handleClick(3)">
+                                <button>
+                                    <img src="../../../../resources/img/img136_71s.png" alt="" />
+                                    <p :class="{ active: selectedButton === 3 }">3</p>
+                                </button>
+                                <p>piano</p>
+                            </div>
+                        </article>
+                    </div>
                 </div>
+                <button class="submit-button" @click="handleSubmit()">제출하기</button>
             </div>
             <div class="next-btn" @click="goToPage('Chapter3_1')">
                 <img src="../../../../resources/img/right.png" alt="" />

 export default {
     data() {
         return {
-            timer: '00',
+            timer: "00",
+            selectedButton: null, // 선택한 버튼
         };
     },
     methods: {
         complete() {
-            this.$router.push({ name: 'Dashboard', query: { value: 8 } });
+            this.$router.push({ name: "Dashboard", query: { value: 8 } });
         },
         goToPage(page) {
             this.$router.push({ name: page });

                     clearInterval(this.intervalId);
                 }
             }, 1000);
+        },
+        handleClick(number) {
+            this.selectedButton = number;
+        },
+        // 제출하기 버튼
+        handleSubmit() {
+            console.log("선택된 번호 : ", this.selectedButton);
         },
     },
     watch: {},

     border-radius: 5px;
     padding: 10px;
     font-size: 48px;
-    font-family: 'ONEMobilePOP';
+    font-family: "ONEMobilePOP";
+}
+
+.pickGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
 
 .pickGroup button {

 .pickGroup article > div > p {
     font-size: 64px;
 }
+
+.pickGroup button p.active {
+    color: #000;
+    /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
 .completeBtn {
     margin-right: 100px;
     background-color: #ffba08;
     padding: 10px 30px;
     border-radius: 10px;
     font-size: 28px;
-    font-family: 'ONEMobilePOPOTF';
+    font-family: "ONEMobilePOPOTF";
+}
+
+.submit-button {
+    position: absolute;
+    background-color: #ffba08;
+    padding: 10px 30px;
+    border-radius: 10px;
+    font-size: 28px;
+    font-family: "ONEMobilePOPOTF";
+    right: 5rem;
+    bottom: 3rem;
 }
 </style>

5221da8

6449a5f

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
           <p class="subtitle2 mr20">1. see the picture</p>
-          <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button>
+          <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
         </div>
 
-        <div class="flex align-center justify-center" style="gap: 113px;">
-         <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+        <div class="flex align-center justify-center" style="gap: 113px">
+          <div class="time-hint">
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="pickGroup ">
-            <div class="flex" style="gap: 250px;">
-              <article  class="text-ct">
-                  <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt=""></div>
-                  <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
-                  </button>
+            </div>
+          </div>
+          <div class="pickGroup">
+            <div class="flex" style="gap: 250px">
+              <article class="text-ct" @click="handleClick(1)">
+                <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt="" /></div>
+                <button class="popTxt">
+                  <img :src="selectedButton === 1 ? selectedbuttonImg : buttonImg" alt="" />
+                </button>
               </article>
-              <article  class="text-ct" >
-                  <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt=""></div>
-                  <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
-                    <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
-                  </button>
+              <article class="text-ct" @click="handleClick(2)">
+                <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt="" /></div>
+                <button class="popTxt">
+                  <img :src="selectedButton === 2 ? selectedbuttonImg : buttonImg" alt="" />
+                </button>
               </article>
             </div>
-
           </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer:'00'
-    }
+      timer: "00",
+      selectedButton: null,
+      buttonImg: "client/resources/img/img136_71s.png",
+      selectedbuttonImg: "client/resources/img/img137_71s.png",
+    };
   },
   methods: {
     goToPage(page) {
       this.$router.push({ name: page });
     },
     startTimer() {
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-    }
-    this.timer = 5;
-    this.intervalId = setInterval(() => {
-      if (this.timer > 0) {
-        this.timer--;
-      } else {
+      if (this.intervalId) {
         clearInterval(this.intervalId);
       }
-    }, 1000);
-  }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
-.imgGroup{width: fit-content;}
+.imgGroup {
+  width: fit-content;
+}
 .imgGroup button {
   position: relative;
 }

   border-radius: 5px;
   padding: 10px;
   font-size: 48px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup button {

   left: 50%;
   transform: translate(-50%, -50%);
 }
-</style>
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

5221da8

6449a5f

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px; width: 20%">
-            <router-link to="/MyPlan.page">
-                <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
-            </router-link>
-        </div>
-        <div class="title-box mb25 flex align-center mt40">
-            <span class="title mr40">1. Hello WORLD</span>
-            <span class="subtitle">my name is dd</span>
-        </div>
-        <div class="flex justify-between align-center">
-            <div class="pre-btn" @click="goToPage('Chapter3_1')">
-                <img src="../../../../resources/img/left.png" alt="" />
-            </div>
-            <div class="content title-box">
-                <p class="title mt25 title-bg">step3.</p>
-                <div class="flex align-center mb30">
-                    <p class="subtitle2 mr20">1. see the picture</p>
-                    <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button> -->
-                </div>
-
-                <div class="text-ct">
-                    <div class="time-hint">
-                        <button class="hint-btn">HINT</button>
-                        <div class="time-bg mt20">
-                            <div>
-                                <div class="time">
-                                    <p class="second">{{ timer }}</p>
-                                    <p class="text">sec</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="imgGroup">
-                        <img src="../../../../resources/img/img109_51s.png" alt="" />
-                    </div>
-                    <div class="flex align-center justify-center">
-                        <div class="inputbox mt30">go</div>
-                    </div>
-                    <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
-                        <p>i</p>
-                        <article style="gap: 60px; bottom: 159px; left: 242px">
-                            <button>
-                                <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                <p>1</p>
-                            </button>
-                        </article>
-                        <p>to</p>
-                        <article style="gap: 60px; bottom: 159px; right: 559px">
-                            <button>
-                                <img src="../../../../resources/img/img136_71s.png" alt="" />
-                                <p>2</p>
-                            </button>
-                        </article>
-                        <p>bed</p>
-                    </div>
-                </div>
-            </div>
-            <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
-        </div>
+  <div id="Chapter1_1" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
+      <router-link to="/MyPlan.page">
+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
+      </router-link>
     </div>
+    <div class="title-box mb25 flex align-center mt40">
+      <span class="title mr40">1. Hello WORLD</span>
+      <span class="subtitle">my name is dd</span>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter3_1')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">1. see the picture</p>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
+          </button> -->
+        </div>
+
+        <div class="text-ct">
+          <div class="time-hint">
+            <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="imgGroup">
+            <img src="../../../../resources/img/img109_51s.png" alt="" />
+          </div>
+          <div class="flex align-center justify-center">
+            <div class="inputbox mt30">go</div>
+          </div>
+          <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
+            <p>i</p>
+            <article style="gap: 60px; bottom: 159px; left: 242px" @click="handleClick(1)">
+              <button>
+                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                <p :class="{ active: selectedButton === 1 }">1</p>
+              </button>
+            </article>
+            <p>to</p>
+            <article style="gap: 60px; bottom: 159px; right: 559px" @click="handleClick(2)">
+              <button>
+                <img src="../../../../resources/img/img136_71s.png" alt="" />
+                <p :class="{ active: selectedButton === 2 }">2</p>
+              </button>
+            </article>
+            <p>bed</p>
+          </div>
+        </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
+      </div>
+      <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            timer: '00',
-        };
+  data() {
+    return {
+      timer: "00",
+      selectedButton: null,
+    };
+  },
+  methods: {
+    complete() {
+      this.$router.push({ name: "Dashboard", query: { value: 8 } });
     },
-    methods: {
-        complete() {
-            this.$router.push({ name: 'Dashboard', query: { value: 8 } });
-        },
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        startTimer() {
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-            }
-            this.timer = 5;
-            this.intervalId = setInterval(() => {
-                if (this.timer > 0) {
-                    this.timer--;
-                } else {
-                    clearInterval(this.intervalId);
-                }
-            }, 1000);
-        },
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    watch: {},
-    computed: {},
-    components: {},
-    mounted() {},
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
 };
 </script>
 <style scoped>
 .inputbox {
-    font-size: 38px;
-    font-family: 'Pretendard-ExtraBold';
+  font-size: 38px;
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {
-    position: relative;
+  position: relative;
 }
 
 .imgGroup button p,
 .textbox p {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: fit-content;
-    height: fit-content;
-    background: #ffffffb8;
-    border-radius: 5px;
-    padding: 10px;
-    font-size: 48px;
-    font-family: 'ONEMobilePOP';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: fit-content;
+  height: fit-content;
+  background: #ffffffb8;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 48px;
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {
-    font-size: 34px;
-    font-weight: bold;
+  font-size: 34px;
+  font-weight: bold;
 }
 
 .pickGroup button {
-    position: relative;
-    margin-right: 30px;
+  position: relative;
+  margin-right: 30px;
 }
 
 .pickGroup button p {
-    font-size: 34px;
-    color: #c6c6c6;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  font-size: 34px;
+  color: #c6c6c6;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.pickGroup button p.active {
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
 }
 </style>

5221da8

6449a5f

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">
-      <span class="title mr40">{{ unitData.unit_nm || '(단원 이름 데이터 없음)' }}</span>
+      <span class="title mr40">{{ unitData.unit_nm || "(단원 이름 데이터 없음)" }}</span>
       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

 
         <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
-
-            <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px;">
-              <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>{{ index + 1 }}</p>
+            </div>
+          </div>
+          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%">
+            <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px">
+              <div class="flex align-center" @click="handleClick(index + 1)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === index + 1 }">{{ index + 1 }}</p>
                 </button>
                 <p>{{ detail.prblmDtlExpln }}</p>
               </div>
             </article>
-
           </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00',
+      timer: "00",
       prblmId: "",
       problemDetail: [],
       dataList: [],
       prblmExpln: null,
       unitData: {}, // 단원 정보 데이터
-    }
+      selectedButton: null,
+    };
   },
   methods: {
-
     goToPage(page) {
       this.$router.push({ name: page });
     },

 
     // 단원 정보를 불러오는 API 호출
     fetchUnitDetail(unitId) {
-        axios.post('/unit/unitDetail.json', {
-            unitId: unitId
+      axios
+        .post("/unit/unitDetail.json", {
+          unitId: unitId,
         })
-        .then(response => {
-            console.log(response.data[0]);
-            if (response.data.length > 0) {
-                this.unitData = response.data[0];
-            }
+        .then((response) => {
+          console.log(response.data[0]);
+          if (response.data.length > 0) {
+            this.unitData = response.data[0];
+          }
         })
-        .catch(error => {
-            console.error('단원 정보를 불러오는 중 오류 발생:', error);
-        })
+        .catch((error) => {
+          console.error("단원 정보를 불러오는 중 오류 발생:", error);
+        });
     },
 
     problemSearch() {
-        const vm = this;
-        vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
-        axios({
-            url: "problem/problemInfo.json",
-            method: "post",
-            headers: {
-                "Content-Type": "application/json; charset=UTF-8",
-            },
-            data: {
-                prblmId: vm.prblmId,
-            },
+      const vm = this;
+      vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+      axios({
+        url: "problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          prblmId: vm.prblmId,
+        },
+      })
+        .then(function (res) {
+          console.log("problem - response : ", res.data);
+          vm.dataList = res.data.problem;
+          vm.problemDetail = res.data.problemDetail;
+
+          // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
+          if (vm.dataList.unitId) {
+            vm.fetchUnitDetail(vm.dataList.unitId);
+          } else {
+            console.error("단원 ID가 없습니다.");
+          }
         })
-            .then(function (res) {
-                console.log("problem - response : ", res.data);
-                vm.dataList = res.data.problem;
-                vm.problemDetail = res.data.problemDetail;
-
-                // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
-                if (vm.dataList.unitId) {
-                  vm.fetchUnitDetail(vm.dataList.unitId);
-                } else {
-                  console.error("단원 ID가 없습니다.");
-                }
-            })
-            .catch(function (error) {
-                console.log("problem - error : ", error);
-            });
+        .catch(function (error) {
+          console.log("problem - error : ", error);
+        });
     },
-
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
+  watch: {},
+  computed: {},
+  components: {},
   mounted() {
     this.problemSearch();
-  }
-}
+  },
+};
 </script>
 <style scoped>
 .inputbox {
   font-size: 38px;
-  font-family: 'Pretendard-ExtraBold';
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {

   border-radius: 5px;
   padding: 10px;
   font-size: 48px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {

   left: 50%;
   transform: translate(-50%, -50%);
 }
-</style>
+
+.pickGroup button p.active {
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

5221da8

6449a5f

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">
           <p class="subtitle2 mr20">1. see the picture</p>
-          <button><img src="../../../../resources/img/btn10_s.png" alt="">
-          </button>
+          <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
         </div>
 
         <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="imgGroup ">
-            <img src="../../../../resources/img/img109_51s.png" alt="">  
+            </div>
           </div>
-          
-          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
-            <article style="gap: 60px; bottom: 159px;
-    left: 242px;">
-              <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>1</p>
+          <div class="imgGroup">
+            <img src="../../../../resources/img/img109_51s.png" alt="" />
+          </div>
+
+          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%">
+            <article style="gap: 60px; bottom: 159px; left: 242px">
+              <div class="flex align-center" @click="handleClick(1)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 1 }">1</p>
                 </button>
-                <img src="../../../../resources/img/img122_62s.png" alt="">
+                <img src="../../../../resources/img/img122_62s.png" alt="" />
               </div>
             </article>
-            <article style="gap: 60px; bottom: 159px;
-    right: 559px;">
-             <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>2</p>
+            <article style="gap: 60px; bottom: 159px; right: 559px">
+              <div class="flex align-center" @click="handleClick(2)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 2 }">2</p>
                 </button>
-                <img src="../../../../resources/img/img123_62s.png" alt="">
-             </div>
+                <img src="../../../../resources/img/img123_62s.png" alt="" />
+              </div>
             </article>
-            <article style="gap: 60px; bottom: 159px;
-    right: 559px;">
-             <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>3</p>
+            <article style="gap: 60px; bottom: 159px; right: 559px">
+              <div class="flex align-center" @click="handleClick(3)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 3 }">3</p>
                 </button>
-                <img src="../../../../resources/img/img121_62s.png" alt="">
-             </div>
+                <img src="../../../../resources/img/img121_62s.png" alt="" />
+              </div>
             </article>
           </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00'
-    }
+      timer: "00",
+      selectedButton: null,
+    };
   },
   methods: {
     goToPage(page) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
 .inputbox {
   font-size: 38px;
-  font-family: 'Pretendard-ExtraBold';
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {

   border-radius: 5px;
   padding: 10px;
   font-size: 48px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {

   left: 50%;
   transform: translate(-50%, -50%);
 }
-</style>
+
+.pickGroup button p.active {
+  color: #000;
+  /* 선택된 버튼의 숫자 색을 더 진하게 */
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

5221da8

6449a5f

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px; width: 20%">
-            <router-link to="/MyPlan.page">
-                <div class="logo mb25">
-                    <img src="../../../../resources/img/logo2.png" alt="" />
-                </div>
-            </router-link>
+  <div id="Chapter1_1" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
+      <router-link to="/MyPlan.page">
+        <div class="logo mb25">
+          <img src="../../../../resources/img/logo2.png" alt="" />
         </div>
-        <div class="title-box mb25 flex align-center mt40">
-            <span class="title mr40">1. Hello WORLD</span>
-            <span class="subtitle">my name is dd</span>
+      </router-link>
+    </div>
+    <div class="title-box mb25 flex align-center mt40">
+      <span class="title mr40">1. Hello WORLD</span>
+      <span class="subtitle">my name is dd</span>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter3_3_1')">
+        <img src="../../../../resources/img/left.png" alt="" />
+      </div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
+          <button>
+            <img src="../../../../resources/img/btn10_s.png" alt="Listen" @click="playAudio" />
+            <audio id="audio-player" src="client/resources/audio/tt.wav" preload="auto"></audio>
+          </button>
         </div>
-        <div class="flex justify-between align-center">
-            <div class="pre-btn" @click="goToPage('Chapter3_3_1')">
-                <img src="../../../../resources/img/left.png" alt="" />
-            </div>
-            <div class="content title-box">
-                <p class="title mt25 title-bg">step3.</p>
-                <div class="flex align-center mb30">
-                    <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
-                    <button>
-                        <img
-                            src="../../../../resources/img/btn10_s.png"
-                            alt="Listen"
-                            @click="playAudio"
-                        />
-                        <audio
-                            id="audio-player"
-                            src="client/resources/audio/tt.wav"
-                            preload="auto"
-                        ></audio>
-                    </button>
-                </div>
 
-                <div class="text-ct">
-                    <div class="time-hint">
-                        <button class="hint-btn">HINT</button>
-                        <div class="time-bg mt20">
-                            <div>
-                                <div class="time">
-                                    <p class="second">{{ timer }}</p>
-                                    <p class="text">sec</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div
-                        class="pickGroup flex align-center justify-center"
-                        style="
-                            flex-wrap: wrap;
-                            gap: 100px;
-                            margin-top: 7%;
-                            margin-left: 5%;
-                        "
-                    >
-                        <article
-                            v-for="(item, index) in problemDetail"
-                            :key="index"
-                            style="
-                                flex: 1 0 calc(50% - 100px);
-                                bottom: 159px;
-                                left: 242px;
-                            "
-                        >
-                            <div class="flex align-center">
-                                <button @click="submitAnswer(item)">
-                                    <img
-                                        src="../../../../resources/img/img136_71s.png"
-                                        alt=""
-                                    />
-                                    <p
-                                        :class="{
-                                            active:
-                                                answer === item.prblmDtlExpln,
-                                        }"
-                                    >
-                                        {{ index + 1 }}
-                                    </p>
-                                </button>
-                                <p>{{ item.prblmDtlExpln }}</p>
-                            </div>
-                        </article>
-                        <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
+        <div class="text-ct">
+          <div class="time-hint">
+            <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="pickGroup flex align-center justify-center" style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
+            <article v-for="(item, index) in problemDetail" :key="index" style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
+              <div class="flex align-center">
+                <button @click="submitAnswer(item)">
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p
+                    :class="{
+                      active: answer === item.prblmDtlExpln,
+                    }"
+                  >
+                    {{ index + 1 }}
+                  </p>
+                </button>
+                <p>{{ item.prblmDtlExpln }}</p>
+              </div>
+            </article>
+            <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
                             <div class="flex align-center">
                                 <button>
                                     <img

                                 <p>c</p>
                             </div>
                         </article> -->
-                    </div>
-                </div>
-            </div>
-            <div
-                class="next-btn"
-                @click="
-                    [
-                        goToPage('Chapter3_5'),
-                        // handleSubmitAnswer()
-                    ]
-                "
-            >
-                <img src="../../../../resources/img/right.png" alt="" />
-            </div>
+          </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
+      </div>
+      <div
+        class="next-btn"
+        @click="
+          [
+            goToPage('Chapter3_5'),
+            // handleSubmitAnswer()
+          ]
+        "
+      >
+        <img src="../../../../resources/img/right.png" alt="" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import axios from "axios";
 export default {
-    data() {
-        return {
-            timer: "00",
-            prblmId: "101",
-            problemDetail: [],
-            dataList: [],
-            prblmExpln: null,
-            accessTime: null,
-            answer: null,
-        };
+  data() {
+    return {
+      timer: "00",
+      prblmId: "101",
+      problemDetail: [],
+      dataList: [],
+      prblmExpln: null,
+      accessTime: null,
+      answer: null,
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-        startTimer() {
-            if (this.intervalId) {
-                clearInterval(this.intervalId);
-            }
-            this.timer = 5;
-            this.intervalId = setInterval(() => {
-                if (this.timer > 0) {
-                    this.timer--;
-                } else {
-                    clearInterval(this.intervalId);
-                }
-            }, 1000);
-        },
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
 
-        problemSearch() {
-            const vm = this;
-            sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
-            // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
-            axios({
-                url: "problem/problemInfo.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    prblmId: vm.prblmId,
-                },
-            })
-                .then(function (res) {
-                    console.log("problem - response : ", res.data);
-                    vm.dataList = res.data.problem;
-                    vm.problemDetail = res.data.problemDetail;
-                })
-                .catch(function (error) {
-                    console.log("problem - error : ", error);
-                });
+    problemSearch() {
+      const vm = this;
+      sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
+      // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
+      axios({
+        url: "problem/problemInfo.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        submitAnswer(item) {
-            console.log(item.prblmDtlExpln);
-            this.answer = item.prblmDtlExpln;
+        data: {
+          prblmId: vm.prblmId,
         },
+      })
+        .then(function (res) {
+          console.log("problem - response : ", res.data);
+          vm.dataList = res.data.problem;
+          vm.problemDetail = res.data.problemDetail;
+        })
+        .catch(function (error) {
+          console.log("problem - error : ", error);
+        });
+    },
+    submitAnswer(item) {
+      console.log(item.prblmDtlExpln);
+      this.answer = item.prblmDtlExpln;
+    },
 
-        // 문제 풀이 전송
-        handleSubmitAnswer() {
-            const vm = this;
-            // const accessTime = new Date();
-            // const formattedTime =
-            //     this.formatToTimestampWithoutTimeZone(accessTime);
-            axios({
-                url: "problemLog/insertProblemLog.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    prblmAns: vm.answer,
-                    prblmLogAnsCnt: 0,
-                    stdId: "2",
-                    // prblmStrtTm: formattedTime,
-                    prblmId: vm.prblmId,
-                },
-            })
-                .then(function (res) {
-                    console.log("answer submit - response : ", res.data);
-                })
-                .catch(function (error) {
-                    console.log("answer submit - error : ", error);
-                });
+    // 문제 풀이 전송
+    handleSubmitAnswer() {
+      const vm = this;
+      // const accessTime = new Date();
+      // const formattedTime =
+      //     this.formatToTimestampWithoutTimeZone(accessTime);
+      axios({
+        url: "problemLog/insertProblemLog.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        playAudio() {
-            const audio = document.getElementById("audio-player");
-            audio.play();
-            console.log("playing");
+        data: {
+          prblmAns: vm.answer,
+          prblmLogAnsCnt: 0,
+          stdId: "2",
+          // prblmStrtTm: formattedTime,
+          prblmId: vm.prblmId,
         },
+      })
+        .then(function (res) {
+          console.log("answer submit - response : ", res.data);
+        })
+        .catch(function (error) {
+          console.log("answer submit - error : ", error);
+        });
     },
-    watch: {},
-    computed: {},
-    components: {},
-    mounted() {
-        this.problemSearch();
+    playAudio() {
+      const audio = document.getElementById("audio-player");
+      audio.play();
+      console.log("playing");
     },
+    handleSubmit() {
+      console.log("정답 : ", this.answer);
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {
+    this.problemSearch();
+  },
 };
 </script>
 <style scoped>
 .inputbox {
-    font-size: 38px;
-    font-family: "Pretendard-ExtraBold";
+  font-size: 38px;
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {
-    position: relative;
+  position: relative;
 }
 
 .imgGroup button p,
 .textbox p {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: fit-content;
-    height: fit-content;
-    background: #ffffffb8;
-    border-radius: 5px;
-    padding: 10px;
-    font-size: 48px;
-    font-family: "ONEMobilePOP";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: fit-content;
+  height: fit-content;
+  background: #ffffffb8;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 48px;
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {
-    font-size: 34px;
-    font-weight: bold;
+  font-size: 34px;
+  font-weight: bold;
 }
 
 .pickGroup button {
-    position: relative;
-    margin-right: 30px;
+  position: relative;
+  margin-right: 30px;
 }
 
 .pickGroup button p {
-    font-size: 34px;
-    color: #c6c6c6;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  font-size: 34px;
+  color: #c6c6c6;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .pickGroup button p.active {
-    color: #000000;
+  color: #000000;
+}
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
 }
 </style>

5221da8

6449a5f

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

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

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


   <div id="Chapter1_1" class="content-wrap">
     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
       </router-link>
     </div>
     <div class="title-box mb25 flex align-center mt40">

       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/left.png" alt="" /></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step3.</p>
         <div class="flex align-center mb30">

           </button> -->
         </div>
 
-        <div class=" text-ct">
+        <div class="text-ct">
           <div class="time-hint">
-          <button class="hint-btn">HINT</button>
+            <button class="hint-btn">HINT</button>
             <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
+              <div>
+                <div class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
-          <div class="imgGroup ">
-            <img src="../../../../resources/img/img125_64s.png" alt="">  
+            </div>
+          </div>
+          <div class="imgGroup">
+            <img src="../../../../resources/img/img125_64s.png" alt="" />
           </div>
           <!-- <div class=" flex align-center justify-center">
             <div class="inputbox mt30">
               go
             </div>
           </div> -->
-          <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px;">
+          <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
             <p>i</p>
             <p>&#40;</p>
-            <article style="gap: 60px; bottom: 159px;
-    left: 242px;">
-              <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>1</p>
+            <article style="gap: 60px; bottom: 159px; left: 242px">
+              <div class="flex align-center" @click="handleClick(1)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 1 }">1</p>
                 </button>
                 <p>a</p>
               </div>
             </article>
-            <article style="gap: 60px; bottom: 159px;
-    right: 559px;">
-             <div class="flex align-center">
-                <button><img src="../../../../resources/img/img136_71s.png" alt="">
-                  <p>2</p>
+            <article style="gap: 60px; bottom: 159px; right: 559px">
+              <div class="flex align-center" @click="handleClick(2)">
+                <button>
+                  <img src="../../../../resources/img/img136_71s.png" alt="" />
+                  <p :class="{ active: selectedButton === 2 }">2</p>
                 </button>
                 <p>b</p>
-             </div>
+              </div>
             </article>
             <p>&#41;</p>
             <p>bed</p>
           </div>
         </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_6')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_6')"><img src="../../../../resources/img/right.png" alt="" /></div>
     </div>
   </div>
 </template>

 export default {
   data() {
     return {
-      timer: '00'
-    }
+      timer: "00",
+      selectedButton: null,
+    };
   },
   methods: {
     goToPage(page) {

           clearInterval(this.intervalId);
         }
       }, 1000);
-    }
+    },
+    handleClick(number) {
+      this.selectedButton = number;
+    },
+    // 제출하기 버튼
+    handleSubmit() {
+      console.log("선택된 번호 : ", this.selectedButton);
+    },
   },
-  watch: {
-
-  },
-  computed: {
-
-  },
-  components: {
-  },
-  mounted() {
-
-  }
-}
+  watch: {},
+  computed: {},
+  components: {},
+  mounted() {},
+};
 </script>
 <style scoped>
 .inputbox {
   font-size: 38px;
-  font-family: 'Pretendard-ExtraBold';
+  font-family: "Pretendard-ExtraBold";
 }
 
 .imgGroup button {

   border-radius: 5px;
   padding: 10px;
   font-size: 48px;
-  font-family: 'ONEMobilePOP';
+  font-family: "ONEMobilePOP";
 }
 
 .pickGroup p {

   left: 50%;
   transform: translate(-50%, -50%);
 }
-</style>
+
+.pickGroup button p.active {
+  color: #000000;
+}
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
+}
+</style>

5221da8

6449a5f

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

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

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


 <template>
-   <div id="Chapter2_2" class="content-wrap">
-      <div style="margin: 30px 0px 50px; width: 20%">
+  <div id="Chapter2_2" class="content-wrap">
+    <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
-        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
+        <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
       </router-link>
     </div>
-      <div class="title-box mb25 flex align-center mt40">
-         <span class="title mr40">1. Hello WORLD</span>
-         <span class="subtitle">my name is dd</span>
-      </div>
-      <div class="flex justify-between align-center">
-         <div class="pre-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/left.png" alt="">
-         </div>
-         <div class="content title-box">
-            <p class="title mt25 title-bg">step3.</p>
-            <div class="flex align-center mb30">
-               <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
-               <button><img src="../../../../resources/img/btn10_s.png" alt="">
-               </button>
-            </div>
-            <div class="time-hint">
+    <div class="title-box mb25 flex align-center mt40">
+      <span class="title mr40">1. Hello WORLD</span>
+      <span class="subtitle">my name is dd</span>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/left.png" alt="" /></div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
+          <button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio></button>
+        </div>
+        <div class="time-hint">
           <button class="hint-btn">HINT</button>
-            <div class="time-bg mt20">
-                <div>
-                  <div class="time">
-                    <p class="second">{{ timer }}</p>
-                    <p class="text">sec</p>
-                  </div>
-                </div>
+          <div class="time-bg mt20">
+            <div>
+              <div class="time">
+                <p class="second">{{ timer }}</p>
+                <p class="text">sec</p>
               </div>
-         </div>
-            
-            <div class="imgGroup">
-               <img src="../../../../resources/img/img114_57s.png" alt="">
             </div>
+          </div>
+        </div>
 
-            <div class="flex justify-center">
-               <div class="btnGroup mt50 flex justify-between">
-                  <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
-                     :class="{ active: selectedIndex === index }">
-                     <img :src="item.imgSrc1">
-                     <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
-                  </button>
-               </div>
-            </div>
-         </div>
-         <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="">
-         </div>
+        <div class="imgGroup">
+          <img src="../../../../resources/img/img114_57s.png" alt="" />
+        </div>
+
+        <div class="flex justify-center">
+          <div class="btnGroup mt50 flex justify-between">
+            <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
+              <img :src="item.imgSrc1" />
+              <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
+            </button>
+          </div>
+        </div>
+        <button class="submit-button" @click="handleSubmit()">제출하기</button>
       </div>
-   </div>
+      <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="" /></div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-   data() {
-      return {
-         items: [
-            { imgSrc2: 'client/resources/img/img53_6_35s.png', imgSrc1: 'client/resources/img/img53_1_35s.png',  },
-            { imgSrc2: 'client/resources/img/img53_7_35s.png', imgSrc1: 'client/resources/img/img53_2_35s.png', },
-            { imgSrc2: 'client/resources/img/img53_8_35s.png', imgSrc1: 'client/resources/img/img53_3_35s.png',  },
-            { imgSrc2: 'client/resources/img/img53_9_35s.png', imgSrc1: 'client/resources/img/img53_4_35s.png',  },
-            { imgSrc2: 'client/resources/img/img53_10_35s.png', imgSrc1: 'client/resources/img/img53_5_35s.png',  }
-         ],
-         selectedIndex: null,
-         timer: "00",
-         intervalId: null,
-      };
-   },
-   methods: {
-      goToPage(page) {
-         this.$router.push({ name: page });
-      },
-      updateContent(index) {
-         this.selectedIndex = index;
-         this.currentCon = this.items[index].con;
-      },
-      startTimer() {
-         if (this.intervalId) {
-            clearInterval(this.intervalId);
-         }
-         this.timer = 5;
-         this.intervalId = setInterval(() => {
-            if (this.timer > 0) {
-               this.timer--;
-            } else {
-               clearInterval(this.intervalId);
-            }
-         }, 1000);
-      }
-   },
-   beforeDestroy() {
+  data() {
+    return {
+      items: [
+        { imgSrc2: "client/resources/img/img53_6_35s.png", imgSrc1: "client/resources/img/img53_1_35s.png" },
+        { imgSrc2: "client/resources/img/img53_7_35s.png", imgSrc1: "client/resources/img/img53_2_35s.png" },
+        { imgSrc2: "client/resources/img/img53_8_35s.png", imgSrc1: "client/resources/img/img53_3_35s.png" },
+        { imgSrc2: "client/resources/img/img53_9_35s.png", imgSrc1: "client/resources/img/img53_4_35s.png" },
+        { imgSrc2: "client/resources/img/img53_10_35s.png", imgSrc1: "client/resources/img/img53_5_35s.png" },
+      ],
+      selectedIndex: null,
+      timer: "00",
+      intervalId: null,
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    updateContent(index) {
+      this.selectedIndex = index;
+      this.currentCon = this.items[index].con;
+    },
+    startTimer() {
       if (this.intervalId) {
-         clearInterval(this.intervalId);
+        clearInterval(this.intervalId);
       }
-   }
-}
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    },
+    handleSubmit() {
+      console.log("정답 : ", this.selectedIndex + 1);
+    },
+    playAudio() {
+      const audio = document.getElementById("audio-player");
+      audio.play();
+      console.log("playing");
+    },
+  },
+  beforeDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  },
+};
 </script>
 
 <style scoped>
 .popTxt img {
-   position: absolute;
-   top: 0;
-   left: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.submit-button {
+  position: absolute;
+  background-color: #ffba08;
+  padding: 10px 30px;
+  border-radius: 10px;
+  font-size: 28px;
+  font-family: "ONEMobilePOPOTF";
+  right: 5rem;
+  bottom: 3rem;
 }
 </style>

5221da8

6449a5f

client/views/pages/parents/ColumnLineChart.vue

--- client/views/pages/parents/ColumnLineChart.vue

+++ client/views/pages/parents/ColumnLineChart.vue


 <template>
-    <div ref="ColumnLineChart" style="width: 500px; height: 500px;"></div>
-  </template>
-  
-  <script>
-  import * as am5 from "@amcharts/amcharts5";
-  import * as am5xy from "@amcharts/amcharts5/xy";
-  import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
-  
-  export default {
-    name: "ColumnLineChart",
-    mounted() {
-      this.createChart();
+  <div ref="ColumnLineChart" style="width: 500px; height: 500px;"></div>
+</template>
+
+<script>
+import * as am5 from "@amcharts/amcharts5";
+import * as am5xy from "@amcharts/amcharts5/xy";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+import axios from "axios";
+
+export default {
+  name: "ColumnLineChart",
+
+  data() {
+    return {
+      chartData: [],
+      currentStdId: "1"
+    };
+  },
+
+  mounted() {
+    this.getMtrScoreData();
+  },
+
+  methods: {
+    // 학생의 문제 지표 점수 데이터 가져오기
+    getMtrScoreData() {
+      const vm = this;
+      axios.post('/dashboard/mtrScoreData.json', {
+          std_id: vm.currentStdId
+      })
+      .then(response => {
+        if (response.data) {
+          // 데이터를 날짜순으로 정렬
+          vm.chartData = response.data.sort(
+            (a, b) => new Date(a.learnedDate) - new Date(b.learnedDate)
+          );
+          vm.createChart();
+        } else {
+          console.error("mtrScoreList가 응답 데이터에 없습니다.");
+        }
+      })
+      .catch(error => {
+          console.error('문제 지표 점수 데이터를 가져오는 중 오류 발생:', error);
+      });
     },
-    methods: {
-      createChart() {
-        // Initialize root
-        const root = am5.Root.new(this.$refs.ColumnLineChart);
-  
-        // Apply themes
-        const myTheme = am5.Theme.new(root);
-        myTheme.rule("Grid", ["base"]).setAll({
-          strokeOpacity: 0.1,
+
+    createChart() {
+      // Initialize root
+      const root = am5.Root.new(this.$refs.ColumnLineChart);
+
+      // Apply themes
+      root.setThemes([
+        am5themes_Animated.new(root),
+      ]);
+
+      // Create chart
+      const chart = root.container.children.push(
+        am5xy.XYChart.new(root, {
+          panX: false,
+          panY: false,
+          wheelX: "panX",
+          wheelY: "zoomX",
+          paddingLeft: 0,
+          layout: root.verticalLayout
+        })
+      );
+
+      // Create axes
+      const xRenderer = am5xy.AxisRendererX.new(root, {
+        minorGridEnabled: true,
+        minGridDistance: 60
+      });
+
+      const xAxis = chart.xAxes.push(
+        am5xy.CategoryAxis.new(root, {
+          categoryField: "learnedDate",
+          renderer: xRenderer,
+          tooltip: am5.Tooltip.new(root, {})
+        })
+      );
+
+      xRenderer.grid.template.setAll({
+        location: 1
+      });
+
+      xAxis.data.setAll(this.chartData);
+
+      let yAxis = chart.yAxes.push(
+        am5xy.ValueAxis.new(root, {
+          min: 0,
+          extraMax: 0.1,
+          renderer: am5xy.AxisRendererY.new(root, {
+            strokeOpacity: 0.1
+          })
+        })
+      );
+
+      // 이해 점수 막대 그래프
+      let series1 = chart.series.push(
+        am5xy.ColumnSeries.new(root, {
+          name: "이해 점수",
+          xAxis: xAxis,
+          yAxis: yAxis,
+          valueYField: "totalMtr01Score",
+          categoryXField: "learnedDate",
+          tooltip: am5.Tooltip.new(root, {
+            pointerOrientation: "horizontal",
+            labelText: "{name} in {categoryX}: {valueY}"
+          })
+        })
+      );
+
+      // 파스텔 블루
+      series1.columns.template.setAll({
+        fill: am5.color(0x87CEEB),
+        stroke: am5.color(0x87CEEB),
+        tooltipY: am5.percent(10),
+      });
+
+      series1.data.setAll(this.chartData);
+
+      // 표현 점수 막대 그래프
+      let series2 = chart.series.push(
+        am5xy.ColumnSeries.new(root, {
+          name: "표현 점수",
+          xAxis: xAxis,
+          yAxis: yAxis,
+          valueYField: "totalMtr02Score",
+          categoryXField: "learnedDate",
+          tooltip: am5.Tooltip.new(root, {
+            pointerOrientation: "horizontal",
+            labelText: "{name} in {categoryX}: {valueY}"
+          })
+        })
+      );
+
+      // 파스텔 핑크
+      series2.columns.template.setAll({
+        fill: am5.color(0xFFB6C1),
+        stroke: am5.color(0xFFB6C1),
+        tooltipY: am5.percent(10),
+      });
+
+      series2.data.setAll(this.chartData);
+
+      // 이해 점수 변화 꺾은선 그래프
+      const lineSeries1 = chart.series.push(
+        am5xy.LineSeries.new(root, {
+          name: "이해 점수 변화",
+          xAxis: xAxis,
+          yAxis: yAxis,
+          valueYField: "totalMtr01Score",
+          categoryXField: "learnedDate",
+          stroke: am5.color(0xADD8E6), // 라이트 블루로 설정
+          tooltip: am5.Tooltip.new(root, {
+            pointerOrientation: "horizontal",
+            labelText: "{name} on {categoryX}: {valueY}"
+          })
+        })
+      );
+
+      lineSeries1.strokes.template.setAll({
+        strokeWidth: 3,
+        stroke: am5.color(0xADD8E6), // 다시 명시적 설정
+      });
+
+      lineSeries1.bullets.push(function () {
+        return am5.Bullet.new(root, {
+          sprite: am5.Circle.new(root, {
+            radius: 5,
+            fill: am5.color(0xADD8E6), // 라이트 블루로 설정
+            strokeWidth: 3,
+            stroke: am5.color(0xADD8E6)
+          })
         });
-        root.setThemes([
-          am5themes_Animated.new(root),
-          myTheme,
-        ]);
-  
-        // Create chart
-        let chart = root.container.children.push(
-  am5xy.XYChart.new(root, {
-    panX: false,
-    panY: false,
-    wheelX: "panX",
-    wheelY: "zoomX",
-    paddingLeft: 0,
-    layout: root.verticalLayout
-  })
-);
+      });
 
-// Add scrollbar
-// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
-// chart.set(
-//   "scrollbarX",
-//   am5.Scrollbar.new(root, {
-//     orientation: "horizontal"
-//   })
-// );
+      lineSeries1.data.setAll(this.chartData);
 
-let data = [
-  {
-    year: "2016",
-    income: 23.5,
-    expenses: 21.1
-  },
-  {
-    year: "2017",
-    income: 26.2,
-    expenses: 30.5
-  },
-  {
-    year: "2018",
-    income: 30.1,
-    expenses: 34.9
-  },
-  {
-    year: "2019",
-    income: 29.5,
-    expenses: 31.1
-  },
-  {
-    year: "2020",
-    income: 30.6,
-    expenses: 28.2,
-    strokeSettings: {
-      stroke: chart.get("colors").getIndex(1),
-      strokeWidth: 3,
-      strokeDasharray: [5, 5]
-    }
-  },
-  {
-    year: "2021",
-    income: 34.1,
-    expenses: 32.9,
-    columnSettings: {
-      strokeWidth: 1,
-      strokeDasharray: [5],
-      fillOpacity: 0.2
+      // 표현 점수 변화 꺾은선 그래프
+      const lineSeries2 = chart.series.push(
+        am5xy.LineSeries.new(root, {
+          name: "표현 점수 변화",
+          xAxis: xAxis,
+          yAxis: yAxis,
+          valueYField: "totalMtr02Score",
+          categoryXField: "learnedDate",
+          stroke: am5.color(0xFF69B4), // 핫 핑크로 설정
+          tooltip: am5.Tooltip.new(root, {
+            pointerOrientation: "horizontal",
+            labelText: "{name} on {categoryX}: {valueY}"
+          })
+        })
+      );
+
+      lineSeries2.strokes.template.setAll({
+        strokeWidth: 3,
+        stroke: am5.color(0xFF69B4), // 다시 명시적 설정
+      });
+
+      lineSeries2.bullets.push(function () {
+        return am5.Bullet.new(root, {
+          sprite: am5.Circle.new(root, {
+            radius: 5,
+            fill: am5.color(0xFF69B4), // 핫 핑크로 설정
+            strokeWidth: 3,
+            stroke: am5.color(0xFF69B4)
+          })
+        });
+      });
+
+      lineSeries2.data.setAll(this.chartData);
+
+      chart.set("cursor", am5xy.XYCursor.new(root, {}));
+
+      let legend = chart.children.push(
+        am5.Legend.new(root, {
+          centerX: am5.p50,
+          x: am5.p50
+        })
+      );
+      legend.data.setAll(chart.series.values);
+
+      chart.appear(1000, 100);
+      series1.appear();
+      series2.appear();
+      lineSeries1.appear();
+      lineSeries2.appear();
     },
-    info: "(projection)"
-  }
-];
+  },
+};
+</script>
 
-// Create axes
-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
-let xRenderer = am5xy.AxisRendererX.new(root, {
-  minorGridEnabled: true,
-  minGridDistance: 60
-});
-let xAxis = chart.xAxes.push(
-  am5xy.CategoryAxis.new(root, {
-    categoryField: "year",
-    renderer: xRenderer,
-    tooltip: am5.Tooltip.new(root, {})
-  })
-);
-xRenderer.grid.template.setAll({
-  location: 1
-})
-
-xAxis.data.setAll(data);
-
-let yAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    min: 0,
-    extraMax: 0.1,
-    renderer: am5xy.AxisRendererY.new(root, {
-      strokeOpacity: 0.1
-    })
-  })
-);
-
-
-// Add series
-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
-
-let series1 = chart.series.push(
-  am5xy.ColumnSeries.new(root, {
-    name: "Income",
-    xAxis: xAxis,
-    yAxis: yAxis,
-    valueYField: "income",
-    categoryXField: "year",
-    tooltip: am5.Tooltip.new(root, {
-      pointerOrientation: "horizontal",
-      labelText: "{name} in {categoryX}: {valueY} {info}"
-    })
-  })
-);
-
-series1.columns.template.setAll({
-  tooltipY: am5.percent(10),
-  templateField: "columnSettings"
-});
-
-series1.data.setAll(data);
-
-let series2 = chart.series.push(
-  am5xy.LineSeries.new(root, {
-    name: "Expenses",
-    xAxis: xAxis,
-    yAxis: yAxis,
-    valueYField: "expenses",
-    categoryXField: "year",
-    tooltip: am5.Tooltip.new(root, {
-      pointerOrientation: "horizontal",
-      labelText: "{name} in {categoryX}: {valueY} {info}"
-    })
-  })
-);
-
-series2.strokes.template.setAll({
-  strokeWidth: 3,
-  templateField: "strokeSettings"
-});
-
-
-series2.data.setAll(data);
-
-series2.bullets.push(function () {
-  return am5.Bullet.new(root, {
-    sprite: am5.Circle.new(root, {
-      strokeWidth: 3,
-      stroke: series2.get("stroke"),
-      radius: 5,
-      fill: root.interfaceColors.get("background")
-    })
-  });
-});
-
-chart.set("cursor", am5xy.XYCursor.new(root, {}));
-
-// Add legend
-// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
-let legend = chart.children.push(
-  am5.Legend.new(root, {
-    centerX: am5.p50,
-    x: am5.p50
-  })
-);
-legend.data.setAll(chart.series.values);
-
-// Make stuff animate on load
-// https://www.amcharts.com/docs/v5/concepts/animations/
-chart.appear(1000, 100);
-series1.appear();
-      },
-    },
-  };
-  </script>
-  
-  <style scoped>
-  /* Add necessary styles here */
-  </style>
-  
+<style scoped>
+/* Add necessary styles here */
+</style>

5221da8

6449a5f

client/views/pages/parents/Dounutchart.vue

--- client/views/pages/parents/Dounutchart.vue

+++ client/views/pages/parents/Dounutchart.vue


     return {
       chartData: {},
       currentDate: "2024-08-14",
-      currentStdId: "1"
+      currentStdId: "1",
+      root: null,
+      chart: null
     };
   },
 

     },
 
     createChart() {
+      // 차트 중복 생성 방지
+      if (this.root) {
+        this.root.dispose();
+      }
+
       // Initialize root
       const root = am5.Root.new(this.$refs.Dounutchart);
 

       series.appear(1000, 100);
     }
   }
-  
+
 };
 </script>
 

5221da8

6449a5f

client/views/pages/parents/Main_p.vue

--- client/views/pages/parents/Main_p.vue

+++ client/views/pages/parents/Main_p.vue


                         </div>
                     </div>
                 </div>
-                <div class="gd-9">
+                <div class="gd-9 flex-column" style="flex: 1;">
                     <div class="title-box flex justify-between mb40">
                         <p class="title">전체 진행률</p>
                     </div>
                     <div class="flex">
-                        <div class="wrap">
+                        <div class="wrap" style="flex: 1;">
                             <p class="name">학습 현황</p>
-                            <div><Dounutchart/></div>
+                            <div class="flex justify-center"><Dounutchart/></div>
                             <div class="textbox">
                                 <p class="title2">오늘의 학습현황</p>
                                 <!-- 안전하게 진도율을 소수점 한자리 수까지 표시 -->

                             <p class="title2">학습시간</p>
                             <p class="name">학습시간 n시간</p>
                         </div>
-                        <div class="wrap">
+                        <div class="wrap" style="flex: 1;">
                             <p class="name">이해/표현 점수</p>
-                            <div>
+                            <div class="flex justify-center mt50">
                                 <ColumnLineChart/>
                             </div>
                         </div>
                     </div>
-                    <div class="wrap">
+                    <div class="wrap" style="flex: 2;">
                         <p class="name">교재별 진행률</p>
-                        <div>
+                        <div class="flex justify-center">
                             <StackedBarChart />
                         </div>
                     </div>
                     <div class="flex">
-                        <div class="wrap">
+                        <div class="wrap" style="flex: 1;">
                             <p class="name">오늘의 학습 일정</p>
-                            <div class="flex-column" style="gap: 20px;">
+                            <div class="flex-column mt20" style="gap: 20px;">
                                 <div class=" flex justify-between align-center " style="gap: 70px;">
                                     <div><img src="../../../resources/img/img217_22s.png" alt=""></div>
                                     <div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }"

 
                             </div>
                         </div>
-                        <div class="flex-column">
+                        <div class="flex-column" style="flex: 1;">
                             <div class="wrap">
                                 <p class="name">교재별 오답률</p>
-                                <Barchart />
+                                <div class="flex justify-center"><Barchart /></div>
                             </div>
 
                             <div class="wrap">
                                 <p class="name">LC/RC 세부 점수</p>
-                                <Bubblechart />
+                                <div class="flex justify-center"><Bubblechart /></div>
                             </div>
 
                         </div>

5221da8

6449a5f

client/views/pages/parents/StackedBarChart.vue

--- client/views/pages/parents/StackedBarChart.vue

+++ client/views/pages/parents/StackedBarChart.vue


 <template>
-    <div ref="StackedBarChart" style="height: 500px"></div>
+    <div ref="StackedBarChart" style="width: 1000px; height: 500px;"></div>
 </template>
 
 <script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -90,14 +90,14 @@
90	90	</div>
91	91	</div>
92	92	</div>
93		- <div class="gd-9">
	93	+ <div class="gd-9 flex-column" style="flex: 1;">
94	94	<div class="title-box flex justify-between mb40">
95	95	<p class="title">전체 진행률</p>
96	96	</div>
97	97	<div class="flex">
98		- <div class="wrap">
	98	+ <div class="wrap" style="flex: 1;">
99	99	<p class="name">학습 현황</p>
100		- <div><Dounutchart/></div>
	100	+ <div class="flex justify-center"><Dounutchart/></div>
101	101	<div class="textbox">
102	102	<p class="title2">오늘의 학습현황</p>
103	103	<!-- 안전하게 진도율을 소수점 한자리 수까지 표시 -->
...	...	@@ -110,23 +110,23 @@
110	110	<p class="title2">학습시간</p>
111	111	<p class="name">학습시간 n시간</p>
112	112	</div>
113		- <div class="wrap">
	113	+ <div class="wrap" style="flex: 1;">
114	114	<p class="name">이해/표현 점수</p>
115		- <div>
	115	+ <div class="flex justify-center mt50">
116	116	<ColumnLineChart/>
117	117	</div>
118	118	</div>
119	119	</div>
120		- <div class="wrap">
	120	+ <div class="wrap" style="flex: 2;">
121	121	<p class="name">교재별 진행률</p>
122		- <div>
	122	+ <div class="flex justify-center">
123	123	<StackedBarChart />
124	124	</div>
125	125	</div>
126	126	<div class="flex">
127		- <div class="wrap">
	127	+ <div class="wrap" style="flex: 1;">
128	128	<p class="name">오늘의 학습 일정</p>
129		- <div class="flex-column" style="gap: 20px;">
	129	+ <div class="flex-column mt20" style="gap: 20px;">
130	130	<div class=" flex justify-between align-center " style="gap: 70px;">
131	131	<div><img src="../../../resources/img/img217_22s.png" alt=""></div>
132	132	<div class="wrap cs-pt" :class="{ 'cs-pt-clicked': isClicked }"
...	...	@@ -150,15 +150,15 @@
150	150
151	151	</div>
152	152	</div>
153		- <div class="flex-column">
	153	+ <div class="flex-column" style="flex: 1;">
154	154	<div class="wrap">
155	155	<p class="name">교재별 오답률</p>
156		- <Barchart />
	156	+ <div class="flex justify-center"><Barchart /></div>
157	157	</div>
158	158
159	159	<div class="wrap">
160	160	<p class="name">LC/RC 세부 점수</p>
161		- <Bubblechart />
	161	+ <div class="flex justify-center"><Bubblechart /></div>
162	162	</div>
163	163
164	164	</div>

...	...	@@ -2,7 +2,9 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
	7	+ </div>
6	8	</router-link>
7	9	</div>
8	10	<div class="title-box mb25 flex align-center mt40" style="justify-content: space-between">
...	...	@@ -17,17 +19,16 @@
17	19	<img src="../../../../resources/img/left.png" alt="" />
18	20	</div>
19	21	<div class="content title-box">
	22	+ ,,,
20	23	<p class="title mt25 title-bg">step3.</p>
21		- <div class="flex align-center mb30">
	24	+ <div class="flex align-center mb30" style="justify-content: space-between">
22	25	<p class="subtitle2 mr20">알맞은 것을 고르세요.</p>
23	26	</div>
24	27
25		- <div class="mt80 flex align-center justify-center" style="gap: 113px">
26		- <div class="imgGroup">
27		- <div class="flex" style="gap: 60px">
28		- <img src="../../../../resources/img/img106_48s.png" alt="" />
29		- </div>
30		- <div class="time-bg">
	28	+ <div class="flex align-center justify-center" style="margin-top: 9rem; gap: 113px">
	29	+ <div class="time-hint">
	30	+ <button class="hint-btn">HINT</button>
	31	+ <div class="time-bg mt20">
31	32	<div>
32	33	<div class="time">
33	34	<p class="second">{{ timer }}</p>
...	...	@@ -36,38 +37,42 @@
36	37	</div>
37	38	</div>
38	39	</div>
39		- <div class="pickGroup">
40		- <div>
41		- <article class="flex justify-center mb50" style="gap: 60px">
42		- <div class="flex">
43		- <button>
44		- <img src="../../../../resources/img/img136_71s.png" alt="" />
45		- <p>1</p>
46		- </button>
47		- <p>a</p>
48		- </div>
49		- </article>
50		- <article class="flex justify-center mb50" style="gap: 60px">
51		- <div class="flex">
52		- <button>
53		- <img src="../../../../resources/img/img136_71s.png" alt="" />
54		- <p>2</p>
55		- </button>
56		- <p>a</p>
57		- </div>
58		- </article>
59		- <article class="flex justify-center" style="gap: 60px">
60		- <div class="flex">
61		- <button>
62		- <img src="../../../../resources/img/img136_71s.png" alt="" />
63		- <p>3</p>
64		- </button>
65		- <p>a</p>
66		- </div>
67		- </article>
	40	+ <div class="imgGroup">
	41	+ <div class="flex" style="gap: 60px">
	42	+ <img src="../../../../resources/img/img106_48s.png" alt="" />
68	43	</div>
69	44	</div>
	45	+ <div class="pickGroup">
	46	+ <article class="flex justify-center mb50" style="gap: 60px">
	47	+ <div class="flex" @click="handleClick(1)">
	48	+ <button>
	49	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	50	+ <p :class="{ active: selectedButton === 1 }">1</p>
	51	+ </button>
	52	+ <p>guitar</p>
	53	+ </div>
	54	+ </article>
	55	+ <article class="flex justify-center mb50" style="gap: 60px">
	56	+ <div class="flex" @click="handleClick(2)">
	57	+ <button>
	58	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	59	+ <p :class="{ active: selectedButton === 2 }">2</p>
	60	+ </button>
	61	+ <p>violin</p>
	62	+ </div>
	63	+ </article>
	64	+ <article class="flex justify-center" style="gap: 60px">
	65	+ <div class="flex" @click="handleClick(3)">
	66	+ <button>
	67	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	68	+ <p :class="{ active: selectedButton === 3 }">3</p>
	69	+ </button>
	70	+ <p>piano</p>
	71	+ </div>
	72	+ </article>
	73	+ </div>
70	74	</div>
	75	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
71	76	</div>
72	77	<div class="next-btn" @click="goToPage('Chapter3_1')">
73	78	<img src="../../../../resources/img/right.png" alt="" />
...	...	@@ -80,12 +85,13 @@
80	85	export default {
81	86	data() {
82	87	return {
83		- timer: '00',
	88	+ timer: "00",
	89	+ selectedButton: null, // 선택한 버튼
84	90	};
85	91	},
86	92	methods: {
87	93	complete() {
88		- this.$router.push({ name: 'Dashboard', query: { value: 8 } });
	94	+ this.$router.push({ name: "Dashboard", query: { value: 8 } });
89	95	},
90	96	goToPage(page) {
91	97	this.$router.push({ name: page });
...	...	@@ -102,6 +108,13 @@
102	108	clearInterval(this.intervalId);
103	109	}
104	110	}, 1000);
	111	+ },
	112	+ handleClick(number) {
	113	+ this.selectedButton = number;
	114	+ },
	115	+ // 제출하기 버튼
	116	+ handleSubmit() {
	117	+ console.log("선택된 번호 : ", this.selectedButton);
105	118	},
106	119	},
107	120	watch: {},
...	...	@@ -130,7 +143,13 @@
130	143	border-radius: 5px;
131	144	padding: 10px;
132	145	font-size: 48px;
133		- font-family: 'ONEMobilePOP';
	146	+ font-family: "ONEMobilePOP";
	147	+}
	148	+
	149	+.pickGroup {
	150	+ display: flex;
	151	+ flex-direction: column;
	152	+ align-items: flex-start;
134	153	}
135	154
136	155	.pickGroup button {
...	...	@@ -153,12 +172,29 @@
153	172	.pickGroup article > div > p {
154	173	font-size: 64px;
155	174	}
	175	+
	176	+.pickGroup button p.active {
	177	+ color: #000;
	178	+ /* 선택된 버튼의 숫자 색을 더 진하게 */
	179	+}
	180	+
156	181	.completeBtn {
157	182	margin-right: 100px;
158	183	background-color: #ffba08;
159	184	padding: 10px 30px;
160	185	border-radius: 10px;
161	186	font-size: 28px;
162		- font-family: 'ONEMobilePOPOTF';
	187	+ font-family: "ONEMobilePOPOTF";
	188	+}
	189	+
	190	+.submit-button {
	191	+ position: absolute;
	192	+ background-color: #ffba08;
	193	+ padding: 10px 30px;
	194	+ border-radius: 10px;
	195	+ font-size: 28px;
	196	+ font-family: "ONEMobilePOPOTF";
	197	+ right: 5rem;
	198	+ bottom: 3rem;
163	199	}
164	200	</style>

...	...	@@ -2,7 +2,7 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6	6	</router-link>
7	7	</div>
8	8	<div class="title-box mb25 flex align-center mt40">
...	...	@@ -10,47 +10,46 @@
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/left.png" alt=""></div>
	13	+ <div class="pre-btn" @click="goToPage('Chapter3')"><img src="../../../../resources/img/left.png" alt="" /></div>
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">step3.</p>
16	16	<div class="flex align-center mb30">
17	17	<p class="subtitle2 mr20">1. see the picture</p>
18		- <button><img src="../../../../resources/img/btn10_s.png" alt="">
19		- </button>
	18	+ <button><img src="../../../../resources/img/btn10_s.png" alt="" /></button>
20	19	</div>
21	20
22		- <div class="flex align-center justify-center" style="gap: 113px;">
23		- <div class="time-hint">
24		- <button class="hint-btn">HINT</button>
	21	+ <div class="flex align-center justify-center" style="gap: 113px">
	22	+ <div class="time-hint">
	23	+ <button class="hint-btn">HINT</button>
25	24	<div class="time-bg mt20">
26		- <div>
27		- <div class="time">
28		- <p class="second">{{ timer }}</p>
29		- <p class="text">sec</p>
30		- </div>
	25	+ <div>
	26	+ <div class="time">
	27	+ <p class="second">{{ timer }}</p>
	28	+ <p class="text">sec</p>
31	29	</div>
32	30	</div>
33		- </div>
34		- <div class="pickGroup ">
35		- <div class="flex" style="gap: 250px;">
36		- <article class="text-ct">
37		- <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt=""></div>
38		- <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
39		- <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
40		- </button>
	31	+ </div>
	32	+ </div>
	33	+ <div class="pickGroup">
	34	+ <div class="flex" style="gap: 250px">
	35	+ <article class="text-ct" @click="handleClick(1)">
	36	+ <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt="" /></div>
	37	+ <button class="popTxt">
	38	+ <img :src="selectedButton === 1 ? selectedbuttonImg : buttonImg" alt="" />
	39	+ </button>
41	40	</article>
42		- <article class="text-ct" >
43		- <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt=""></div>
44		- <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
45		- <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
46		- </button>
	41	+ <article class="text-ct" @click="handleClick(2)">
	42	+ <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt="" /></div>
	43	+ <button class="popTxt">
	44	+ <img :src="selectedButton === 2 ? selectedbuttonImg : buttonImg" alt="" />
	45	+ </button>
47	46	</article>
48	47	</div>
49		-
50	48	</div>
51	49	</div>
	50	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
52	51	</div>
53		- <div class="next-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/right.png" alt=""></div>
	52	+ <div class="next-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/right.png" alt="" /></div>
54	53	</div>
55	54	</div>
56	55	</template>
...	...	@@ -59,42 +58,47 @@
59	58	export default {
60	59	data() {
61	60	return {
62		- timer:'00'
63		- }
	61	+ timer: "00",
	62	+ selectedButton: null,
	63	+ buttonImg: "client/resources/img/img136_71s.png",
	64	+ selectedbuttonImg: "client/resources/img/img137_71s.png",
	65	+ };
64	66	},
65	67	methods: {
66	68	goToPage(page) {
67	69	this.$router.push({ name: page });
68	70	},
69	71	startTimer() {
70		- if (this.intervalId) {
71		- clearInterval(this.intervalId);
72		- }
73		- this.timer = 5;
74		- this.intervalId = setInterval(() => {
75		- if (this.timer > 0) {
76		- this.timer--;
77		- } else {
	72	+ if (this.intervalId) {
78	73	clearInterval(this.intervalId);
79	74	}
80		- }, 1000);
81		- }
	75	+ this.timer = 5;
	76	+ this.intervalId = setInterval(() => {
	77	+ if (this.timer > 0) {
	78	+ this.timer--;
	79	+ } else {
	80	+ clearInterval(this.intervalId);
	81	+ }
	82	+ }, 1000);
	83	+ },
	84	+ handleClick(number) {
	85	+ this.selectedButton = number;
	86	+ },
	87	+ // 제출하기 버튼
	88	+ handleSubmit() {
	89	+ console.log("선택된 번호 : ", this.selectedButton);
	90	+ },
82	91	},
83		- watch: {
84		-
85		- },
86		- computed: {
87		-
88		- },
89		- components: {
90		- },
91		- mounted() {
92		-
93		- }
94		-}
	92	+ watch: {},
	93	+ computed: {},
	94	+ components: {},
	95	+ mounted() {},
	96	+};
95	97	</script>
96	98	<style scoped>
97		-.imgGroup{width: fit-content;}
	99	+.imgGroup {
	100	+ width: fit-content;
	101	+}
98	102	.imgGroup button {
99	103	position: relative;
100	104	}
...	...	@@ -111,7 +115,7 @@
111	115	border-radius: 5px;
112	116	padding: 10px;
113	117	font-size: 48px;
114		- font-family: 'ONEMobilePOP';
	118	+ font-family: "ONEMobilePOP";
115	119	}
116	120
117	121	.pickGroup button {
...	...	@@ -126,4 +130,15 @@
126	130	left: 50%;
127	131	transform: translate(-50%, -50%);
128	132	}
129		-</style> (파일 끝에 줄바꿈 문자 없음)
	133	+
	134	+.submit-button {
	135	+ position: absolute;
	136	+ background-color: #ffba08;
	137	+ padding: 10px 30px;
	138	+ border-radius: 10px;
	139	+ font-size: 28px;
	140	+ font-family: "ONEMobilePOPOTF";
	141	+ right: 5rem;
	142	+ bottom: 3rem;
	143	+}
	144	+</style>

...	...	@@ -1,143 +1,168 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6		- </router-link>
7		- </div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_1')">
14		- <img src="../../../../resources/img/left.png" alt="" />
15		- </div>
16		- <div class="content title-box">
17		- <p class="title mt25 title-bg">step3.</p>
18		- <div class="flex align-center mb30">
19		- <p class="subtitle2 mr20">1. see the picture</p>
20		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
21		- </button> -->
22		- </div>
23		-
24		- <div class="text-ct">
25		- <div class="time-hint">
26		- <button class="hint-btn">HINT</button>
27		- <div class="time-bg mt20">
28		- <div>
29		- <div class="time">
30		- <p class="second">{{ timer }}</p>
31		- <p class="text">sec</p>
32		- </div>
33		- </div>
34		- </div>
35		- </div>
36		- <div class="imgGroup">
37		- <img src="../../../../resources/img/img109_51s.png" alt="" />
38		- </div>
39		- <div class="flex align-center justify-center">
40		- <div class="inputbox mt30">go</div>
41		- </div>
42		- <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
43		- <p>i</p>
44		- <article style="gap: 60px; bottom: 159px; left: 242px">
45		- <button>
46		- <img src="../../../../resources/img/img136_71s.png" alt="" />
47		- <p>1</p>
48		- </button>
49		- </article>
50		- <p>to</p>
51		- <article style="gap: 60px; bottom: 159px; right: 559px">
52		- <button>
53		- <img src="../../../../resources/img/img136_71s.png" alt="" />
54		- <p>2</p>
55		- </button>
56		- </article>
57		- <p>bed</p>
58		- </div>
59		- </div>
60		- </div>
61		- <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
62		- </div>
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
	6	+ </router-link>
63	7	</div>
	8	+ <div class="title-box mb25 flex align-center mt40">
	9	+ <span class="title mr40">1. Hello WORLD</span>
	10	+ <span class="subtitle">my name is dd</span>
	11	+ </div>
	12	+ <div class="flex justify-between align-center">
	13	+ <div class="pre-btn" @click="goToPage('Chapter3_1')">
	14	+ <img src="../../../../resources/img/left.png" alt="" />
	15	+ </div>
	16	+ <div class="content title-box">
	17	+ <p class="title mt25 title-bg">step3.</p>
	18	+ <div class="flex align-center mb30">
	19	+ <p class="subtitle2 mr20">1. see the picture</p>
	20	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	21	+ </button> -->
	22	+ </div>
	23	+
	24	+ <div class="text-ct">
	25	+ <div class="time-hint">
	26	+ <button class="hint-btn">HINT</button>
	27	+ <div class="time-bg mt20">
	28	+ <div>
	29	+ <div class="time">
	30	+ <p class="second">{{ timer }}</p>
	31	+ <p class="text">sec</p>
	32	+ </div>
	33	+ </div>
	34	+ </div>
	35	+ </div>
	36	+ <div class="imgGroup">
	37	+ <img src="../../../../resources/img/img109_51s.png" alt="" />
	38	+ </div>
	39	+ <div class="flex align-center justify-center">
	40	+ <div class="inputbox mt30">go</div>
	41	+ </div>
	42	+ <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px">
	43	+ <p>i</p>
	44	+ <article style="gap: 60px; bottom: 159px; left: 242px" @click="handleClick(1)">
	45	+ <button>
	46	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	47	+ <p :class="{ active: selectedButton === 1 }">1</p>
	48	+ </button>
	49	+ </article>
	50	+ <p>to</p>
	51	+ <article style="gap: 60px; bottom: 159px; right: 559px" @click="handleClick(2)">
	52	+ <button>
	53	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	54	+ <p :class="{ active: selectedButton === 2 }">2</p>
	55	+ </button>
	56	+ </article>
	57	+ <p>bed</p>
	58	+ </div>
	59	+ </div>
	60	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
	61	+ </div>
	62	+ <div class="next-btn" @click="complete()"><img src="../../../../resources/img/right.png" alt="" /></div>
	63	+ </div>
	64	+ </div>
64	65	</template>
65	66
66	67	<script>
67	68	export default {
68		- data() {
69		- return {
70		- timer: '00',
71		- };
	69	+ data() {
	70	+ return {
	71	+ timer: "00",
	72	+ selectedButton: null,
	73	+ };
	74	+ },
	75	+ methods: {
	76	+ complete() {
	77	+ this.$router.push({ name: "Dashboard", query: { value: 8 } });
72	78	},
73		- methods: {
74		- complete() {
75		- this.$router.push({ name: 'Dashboard', query: { value: 8 } });
76		- },
77		- goToPage(page) {
78		- this.$router.push({ name: page });
79		- },
80		- startTimer() {
81		- if (this.intervalId) {
82		- clearInterval(this.intervalId);
83		- }
84		- this.timer = 5;
85		- this.intervalId = setInterval(() => {
86		- if (this.timer > 0) {
87		- this.timer--;
88		- } else {
89		- clearInterval(this.intervalId);
90		- }
91		- }, 1000);
92		- },
	79	+ goToPage(page) {
	80	+ this.$router.push({ name: page });
93	81	},
94		- watch: {},
95		- computed: {},
96		- components: {},
97		- mounted() {},
	82	+ startTimer() {
	83	+ if (this.intervalId) {
	84	+ clearInterval(this.intervalId);
	85	+ }
	86	+ this.timer = 5;
	87	+ this.intervalId = setInterval(() => {
	88	+ if (this.timer > 0) {
	89	+ this.timer--;
	90	+ } else {
	91	+ clearInterval(this.intervalId);
	92	+ }
	93	+ }, 1000);
	94	+ },
	95	+ handleClick(number) {
	96	+ this.selectedButton = number;
	97	+ },
	98	+ // 제출하기 버튼
	99	+ handleSubmit() {
	100	+ console.log("선택된 번호 : ", this.selectedButton);
	101	+ },
	102	+ },
	103	+ watch: {},
	104	+ computed: {},
	105	+ components: {},
	106	+ mounted() {},
98	107	};
99	108	</script>
100	109	<style scoped>
101	110	.inputbox {
102		- font-size: 38px;
103		- font-family: 'Pretendard-ExtraBold';
	111	+ font-size: 38px;
	112	+ font-family: "Pretendard-ExtraBold";
104	113	}
105	114
106	115	.imgGroup button {
107		- position: relative;
	116	+ position: relative;
108	117	}
109	118
110	119	.imgGroup button p,
111	120	.textbox p {
112		- position: absolute;
113		- top: 50%;
114		- left: 50%;
115		- transform: translate(-50%, -50%);
116		- width: fit-content;
117		- height: fit-content;
118		- background: #ffffffb8;
119		- border-radius: 5px;
120		- padding: 10px;
121		- font-size: 48px;
122		- font-family: 'ONEMobilePOP';
	121	+ position: absolute;
	122	+ top: 50%;
	123	+ left: 50%;
	124	+ transform: translate(-50%, -50%);
	125	+ width: fit-content;
	126	+ height: fit-content;
	127	+ background: #ffffffb8;
	128	+ border-radius: 5px;
	129	+ padding: 10px;
	130	+ font-size: 48px;
	131	+ font-family: "ONEMobilePOP";
123	132	}
124	133
125	134	.pickGroup p {
126		- font-size: 34px;
127		- font-weight: bold;
	135	+ font-size: 34px;
	136	+ font-weight: bold;
128	137	}
129	138
130	139	.pickGroup button {
131		- position: relative;
132		- margin-right: 30px;
	140	+ position: relative;
	141	+ margin-right: 30px;
133	142	}
134	143
135	144	.pickGroup button p {
136		- font-size: 34px;
137		- color: #c6c6c6;
138		- position: absolute;
139		- top: 50%;
140		- left: 50%;
141		- transform: translate(-50%, -50%);
	145	+ font-size: 34px;
	146	+ color: #c6c6c6;
	147	+ position: absolute;
	148	+ top: 50%;
	149	+ left: 50%;
	150	+ transform: translate(-50%, -50%);
	151	+}
	152	+
	153	+.pickGroup button p.active {
	154	+ color: #000;
	155	+ /* 선택된 버튼의 숫자 색을 더 진하게 */
	156	+}
	157	+
	158	+.submit-button {
	159	+ position: absolute;
	160	+ background-color: #ffba08;
	161	+ padding: 10px 30px;
	162	+ border-radius: 10px;
	163	+ font-size: 28px;
	164	+ font-family: "ONEMobilePOPOTF";
	165	+ right: 5rem;
	166	+ bottom: 3rem;
142	167	}
143	168	</style>

...	...	@@ -2,15 +2,15 @@
2	2	<div id="Chapter1_1" class="content-wrap">
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6	6	</router-link>
7	7	</div>
8	8	<div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">{{ unitData.unit_nm \|\| '(단원 이름 데이터 없음)' }}</span>
	9	+ <span class="title mr40">{{ unitData.unit_nm \|\| "(단원 이름 데이터 없음)" }}</span>
10	10	<span class="subtitle">my name is dd</span>
11	11	</div>
12	12	<div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/left.png" alt=""></div>
	13	+ <div class="pre-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/left.png" alt="" /></div>
14	14	<div class="content title-box">
15	15	<p class="title mt25 title-bg">step3.</p>
16	16	<div class="flex align-center mb30">
...	...	@@ -19,31 +19,31 @@
19	19
20	20	<div class="text-ct">
21	21	<div class="time-hint">
22		- <button class="hint-btn">HINT</button>
	22	+ <button class="hint-btn">HINT</button>
23	23	<div class="time-bg mt20">
24		- <div>
25		- <div class="time">
26		- <p class="second">{{ timer }}</p>
27		- <p class="text">sec</p>
28		- </div>
	24	+ <div>
	25	+ <div class="time">
	26	+ <p class="second">{{ timer }}</p>
	27	+ <p class="text">sec</p>
29	28	</div>
30	29	</div>
31		- </div>
32		- <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
33		-
34		- <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px;">
35		- <div class="flex align-center">
36		- <button><img src="../../../../resources/img/img136_71s.png" alt="">
37		- <p>{{ index + 1 }}</p>
	30	+ </div>
	31	+ </div>
	32	+ <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%">
	33	+ <article v-for="(detail, index) in problemDetail" :key="index" style="gap: 60px">
	34	+ <div class="flex align-center" @click="handleClick(index + 1)">
	35	+ <button>
	36	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	37	+ <p :class="{ active: selectedButton === index + 1 }">{{ index + 1 }}</p>
38	38	</button>
39	39	<p>{{ detail.prblmDtlExpln }}</p>
40	40	</div>
41	41	</article>
42		-
43	42	</div>
44	43	</div>
	44	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
45	45	</div>
46		- <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt=""></div>
	46	+ <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt="" /></div>
47	47	</div>
48	48	</div>
49	49	</template>
...	...	@@ -54,16 +54,16 @@
54	54	export default {
55	55	data() {
56	56	return {
57		- timer: '00',
	57	+ timer: "00",
58	58	prblmId: "",
59	59	problemDetail: [],
60	60	dataList: [],
61	61	prblmExpln: null,
62	62	unitData: {}, // 단원 정보 데이터
63		- }
	63	+ selectedButton: null,
	64	+ };
64	65	},
65	66	methods: {
66		-
67	67	goToPage(page) {
68	68	this.$router.push({ name: page });
69	69	},
...	...	@@ -84,68 +84,70 @@
84	84
85	85	// 단원 정보를 불러오는 API 호출
86	86	fetchUnitDetail(unitId) {
87		- axios.post('/unit/unitDetail.json', {
88		- unitId: unitId
	87	+ axios
	88	+ .post("/unit/unitDetail.json", {
	89	+ unitId: unitId,
89	90	})
90		- .then(response => {
91		- console.log(response.data[0]);
92		- if (response.data.length > 0) {
93		- this.unitData = response.data[0];
94		- }
	91	+ .then((response) => {
	92	+ console.log(response.data[0]);
	93	+ if (response.data.length > 0) {
	94	+ this.unitData = response.data[0];
	95	+ }
95	96	})
96		- .catch(error => {
97		- console.error('단원 정보를 불러오는 중 오류 발생:', error);
98		- })
	97	+ .catch((error) => {
	98	+ console.error("단원 정보를 불러오는 중 오류 발생:", error);
	99	+ });
99	100	},
100	101
101	102	problemSearch() {
102		- const vm = this;
103		- vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
104		- axios({
105		- url: "problem/problemInfo.json",
106		- method: "post",
107		- headers: {
108		- "Content-Type": "application/json; charset=UTF-8",
109		- },
110		- data: {
111		- prblmId: vm.prblmId,
112		- },
	103	+ const vm = this;
	104	+ vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	105	+ axios({
	106	+ url: "problem/problemInfo.json",
	107	+ method: "post",
	108	+ headers: {
	109	+ "Content-Type": "application/json; charset=UTF-8",
	110	+ },
	111	+ data: {
	112	+ prblmId: vm.prblmId,
	113	+ },
	114	+ })
	115	+ .then(function (res) {
	116	+ console.log("problem - response : ", res.data);
	117	+ vm.dataList = res.data.problem;
	118	+ vm.problemDetail = res.data.problemDetail;
	119	+
	120	+ // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
	121	+ if (vm.dataList.unitId) {
	122	+ vm.fetchUnitDetail(vm.dataList.unitId);
	123	+ } else {
	124	+ console.error("단원 ID가 없습니다.");
	125	+ }
113	126	})
114		- .then(function (res) {
115		- console.log("problem - response : ", res.data);
116		- vm.dataList = res.data.problem;
117		- vm.problemDetail = res.data.problemDetail;
118		-
119		- // 문제 정보가 성공적으로 받아와진 후, unitId를 이용해 단원 정보를 가져옴
120		- if (vm.dataList.unitId) {
121		- vm.fetchUnitDetail(vm.dataList.unitId);
122		- } else {
123		- console.error("단원 ID가 없습니다.");
124		- }
125		- })
126		- .catch(function (error) {
127		- console.log("problem - error : ", error);
128		- });
	127	+ .catch(function (error) {
	128	+ console.log("problem - error : ", error);
	129	+ });
129	130	},
130		-
	131	+ handleClick(number) {
	132	+ this.selectedButton = number;
	133	+ },
	134	+ // 제출하기 버튼
	135	+ handleSubmit() {
	136	+ console.log("선택된 번호 : ", this.selectedButton);
	137	+ },
131	138	},
132		- watch: {
133		-
134		- },
135		- computed: {
136		-
137		- },
138		- components: {
139		- },
	139	+ watch: {},
	140	+ computed: {},
	141	+ components: {},
140	142	mounted() {
141	143	this.problemSearch();
142		- }
143		-}
	144	+ },
	145	+};
144	146	</script>
145	147	<style scoped>
146	148	.inputbox {
147	149	font-size: 38px;
148		- font-family: 'Pretendard-ExtraBold';
	150	+ font-family: "Pretendard-ExtraBold";
149	151	}
150	152
151	153	.imgGroup button {
...	...	@@ -164,7 +166,7 @@
164	166	border-radius: 5px;
165	167	padding: 10px;
166	168	font-size: 48px;
167		- font-family: 'ONEMobilePOP';
	169	+ font-family: "ONEMobilePOP";
168	170	}
169	171
170	172	.pickGroup p {
...	...	@@ -185,4 +187,20 @@
185	187	left: 50%;
186	188	transform: translate(-50%, -50%);
187	189	}
188		-</style> (파일 끝에 줄바꿈 문자 없음)
	190	+
	191	+.pickGroup button p.active {
	192	+ color: #000;
	193	+ /* 선택된 버튼의 숫자 색을 더 진하게 */
	194	+}
	195	+
	196	+.submit-button {
	197	+ position: absolute;
	198	+ background-color: #ffba08;
	199	+ padding: 10px 30px;
	200	+ border-radius: 10px;
	201	+ font-size: 28px;
	202	+ font-family: "ONEMobilePOPOTF";
	203	+ right: 5rem;
	204	+ bottom: 3rem;
	205	+}
	206	+</style>

...	...	@@ -1,87 +1,59 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25">
6		- <img src="../../../../resources/img/logo2.png" alt="" />
7		- </div>
8		- </router-link>
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
	4	+ <router-link to="/MyPlan.page">
	5	+ <div class="logo mb25">
	6	+ <img src="../../../../resources/img/logo2.png" alt="" />
9	7	</div>
10		- <div class="title-box mb25 flex align-center mt40">
11		- <span class="title mr40">1. Hello WORLD</span>
12		- <span class="subtitle">my name is dd</span>
	8	+ </router-link>
	9	+ </div>
	10	+ <div class="title-box mb25 flex align-center mt40">
	11	+ <span class="title mr40">1. Hello WORLD</span>
	12	+ <span class="subtitle">my name is dd</span>
	13	+ </div>
	14	+ <div class="flex justify-between align-center">
	15	+ <div class="pre-btn" @click="goToPage('Chapter3_3_1')">
	16	+ <img src="../../../../resources/img/left.png" alt="" />
	17	+ </div>
	18	+ <div class="content title-box">
	19	+ <p class="title mt25 title-bg">step3.</p>
	20	+ <div class="flex align-center mb30">
	21	+ <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
	22	+ <button>
	23	+ <img src="../../../../resources/img/btn10_s.png" alt="Listen" @click="playAudio" />
	24	+ <audio id="audio-player" src="client/resources/audio/tt.wav" preload="auto"></audio>
	25	+ </button>
13	26	</div>
14		- <div class="flex justify-between align-center">
15		- <div class="pre-btn" @click="goToPage('Chapter3_3_1')">
16		- <img src="../../../../resources/img/left.png" alt="" />
17		- </div>
18		- <div class="content title-box">
19		- <p class="title mt25 title-bg">step3.</p>
20		- <div class="flex align-center mb30">
21		- <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
22		- <button>
23		- <img
24		- src="../../../../resources/img/btn10_s.png"
25		- alt="Listen"
26		- @click="playAudio"
27		- />
28		- <audio
29		- id="audio-player"
30		- src="client/resources/audio/tt.wav"
31		- preload="auto"
32		- ></audio>
33		- </button>
34		- </div>
35	27
36		- <div class="text-ct">
37		- <div class="time-hint">
38		- <button class="hint-btn">HINT</button>
39		- <div class="time-bg mt20">
40		- <div>
41		- <div class="time">
42		- <p class="second">{{ timer }}</p>
43		- <p class="text">sec</p>
44		- </div>
45		- </div>
46		- </div>
47		- </div>
48		- <div
49		- class="pickGroup flex align-center justify-center"
50		- style="
51		- flex-wrap: wrap;
52		- gap: 100px;
53		- margin-top: 7%;
54		- margin-left: 5%;
55		- "
56		- >
57		- <article
58		- v-for="(item, index) in problemDetail"
59		- :key="index"
60		- style="
61		- flex: 1 0 calc(50% - 100px);
62		- bottom: 159px;
63		- left: 242px;
64		- "
65		- >
66		- <div class="flex align-center">
67		- <button @click="submitAnswer(item)">
68		- <img
69		- src="../../../../resources/img/img136_71s.png"
70		- alt=""
71		- />
72		- <p
73		- :class="{
74		- active:
75		- answer === item.prblmDtlExpln,
76		- }"
77		- >
78		- {{ index + 1 }}
79		- </p>
80		- </button>
81		- <p>{{ item.prblmDtlExpln }}</p>
82		- </div>
83		- </article>
84		- <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
	28	+ <div class="text-ct">
	29	+ <div class="time-hint">
	30	+ <button class="hint-btn">HINT</button>
	31	+ <div class="time-bg mt20">
	32	+ <div>
	33	+ <div class="time">
	34	+ <p class="second">{{ timer }}</p>
	35	+ <p class="text">sec</p>
	36	+ </div>
	37	+ </div>
	38	+ </div>
	39	+ </div>
	40	+ <div class="pickGroup flex align-center justify-center" style="flex-wrap: wrap; gap: 100px; margin-top: 7%; margin-left: 5%">
	41	+ <article v-for="(item, index) in problemDetail" :key="index" style="flex: 1 0 calc(50% - 100px); bottom: 159px; left: 242px">
	42	+ <div class="flex align-center">
	43	+ <button @click="submitAnswer(item)">
	44	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
	45	+ <p
	46	+ :class="{
	47	+ active: answer === item.prblmDtlExpln,
	48	+ }"
	49	+ >
	50	+ {{ index + 1 }}
	51	+ </p>
	52	+ </button>
	53	+ <p>{{ item.prblmDtlExpln }}</p>
	54	+ </div>
	55	+ </article>
	56	+ <!-- <article style="gap: 60px; bottom: 159px; right: 559px">
85	57	<div class="flex align-center">
86	58	<button>
87	59	<img
...	...	@@ -105,169 +77,183 @@
105	77	<p>c</p>
106	78	</div>
107	79	</article> -->
108		- </div>
109		- </div>
110		- </div>
111		- <div
112		- class="next-btn"
113		- @click="
114		- [
115		- goToPage('Chapter3_5'),
116		- // handleSubmitAnswer()
117		- ]
118		- "
119		- >
120		- <img src="../../../../resources/img/right.png" alt="" />
121		- </div>
	80	+ </div>
122	81	</div>
	82	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
	83	+ </div>
	84	+ <div
	85	+ class="next-btn"
	86	+ @click="
	87	+ [
	88	+ goToPage('Chapter3_5'),
	89	+ // handleSubmitAnswer()
	90	+ ]
	91	+ "
	92	+ >
	93	+ <img src="../../../../resources/img/right.png" alt="" />
	94	+ </div>
123	95	</div>
	96	+ </div>
124	97	</template>
125	98
126	99	<script>
127	100	import axios from "axios";
128	101	export default {
129		- data() {
130		- return {
131		- timer: "00",
132		- prblmId: "101",
133		- problemDetail: [],
134		- dataList: [],
135		- prblmExpln: null,
136		- accessTime: null,
137		- answer: null,
138		- };
	102	+ data() {
	103	+ return {
	104	+ timer: "00",
	105	+ prblmId: "101",
	106	+ problemDetail: [],
	107	+ dataList: [],
	108	+ prblmExpln: null,
	109	+ accessTime: null,
	110	+ answer: null,
	111	+ };
	112	+ },
	113	+ methods: {
	114	+ goToPage(page) {
	115	+ this.$router.push({ name: page });
139	116	},
140		- methods: {
141		- goToPage(page) {
142		- this.$router.push({ name: page });
143		- },
144		- startTimer() {
145		- if (this.intervalId) {
146		- clearInterval(this.intervalId);
147		- }
148		- this.timer = 5;
149		- this.intervalId = setInterval(() => {
150		- if (this.timer > 0) {
151		- this.timer--;
152		- } else {
153		- clearInterval(this.intervalId);
154		- }
155		- }, 1000);
156		- },
	117	+ startTimer() {
	118	+ if (this.intervalId) {
	119	+ clearInterval(this.intervalId);
	120	+ }
	121	+ this.timer = 5;
	122	+ this.intervalId = setInterval(() => {
	123	+ if (this.timer > 0) {
	124	+ this.timer--;
	125	+ } else {
	126	+ clearInterval(this.intervalId);
	127	+ }
	128	+ }, 1000);
	129	+ },
157	130
158		- problemSearch() {
159		- const vm = this;
160		- sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
161		- // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
162		- axios({
163		- url: "problem/problemInfo.json",
164		- method: "post",
165		- headers: {
166		- "Content-Type": "application/json; charset=UTF-8",
167		- },
168		- data: {
169		- prblmId: vm.prblmId,
170		- },
171		- })
172		- .then(function (res) {
173		- console.log("problem - response : ", res.data);
174		- vm.dataList = res.data.problem;
175		- vm.problemDetail = res.data.problemDetail;
176		- })
177		- .catch(function (error) {
178		- console.log("problem - error : ", error);
179		- });
	131	+ problemSearch() {
	132	+ const vm = this;
	133	+ sessionStorage.setItem("prblmId", JSON.stringify(vm.prblmId));
	134	+ // vm.prblmId = JSON.parse(sessionStorage.getItem("prblmId"));
	135	+ axios({
	136	+ url: "problem/problemInfo.json",
	137	+ method: "post",
	138	+ headers: {
	139	+ "Content-Type": "application/json; charset=UTF-8",
180	140	},
181		- submitAnswer(item) {
182		- console.log(item.prblmDtlExpln);
183		- this.answer = item.prblmDtlExpln;
	141	+ data: {
	142	+ prblmId: vm.prblmId,
184	143	},
	144	+ })
	145	+ .then(function (res) {
	146	+ console.log("problem - response : ", res.data);
	147	+ vm.dataList = res.data.problem;
	148	+ vm.problemDetail = res.data.problemDetail;
	149	+ })
	150	+ .catch(function (error) {
	151	+ console.log("problem - error : ", error);
	152	+ });
	153	+ },
	154	+ submitAnswer(item) {
	155	+ console.log(item.prblmDtlExpln);
	156	+ this.answer = item.prblmDtlExpln;
	157	+ },
185	158
186		- // 문제 풀이 전송
187		- handleSubmitAnswer() {
188		- const vm = this;
189		- // const accessTime = new Date();
190		- // const formattedTime =
191		- // this.formatToTimestampWithoutTimeZone(accessTime);
192		- axios({
193		- url: "problemLog/insertProblemLog.json",
194		- method: "post",
195		- headers: {
196		- "Content-Type": "application/json; charset=UTF-8",
197		- },
198		- data: {
199		- prblmAns: vm.answer,
200		- prblmLogAnsCnt: 0,
201		- stdId: "2",
202		- // prblmStrtTm: formattedTime,
203		- prblmId: vm.prblmId,
204		- },
205		- })
206		- .then(function (res) {
207		- console.log("answer submit - response : ", res.data);
208		- })
209		- .catch(function (error) {
210		- console.log("answer submit - error : ", error);
211		- });
	159	+ // 문제 풀이 전송
	160	+ handleSubmitAnswer() {
	161	+ const vm = this;
	162	+ // const accessTime = new Date();
	163	+ // const formattedTime =
	164	+ // this.formatToTimestampWithoutTimeZone(accessTime);
	165	+ axios({
	166	+ url: "problemLog/insertProblemLog.json",
	167	+ method: "post",
	168	+ headers: {
	169	+ "Content-Type": "application/json; charset=UTF-8",
212	170	},
213		- playAudio() {
214		- const audio = document.getElementById("audio-player");
215		- audio.play();
216		- console.log("playing");
	171	+ data: {
	172	+ prblmAns: vm.answer,
	173	+ prblmLogAnsCnt: 0,
	174	+ stdId: "2",
	175	+ // prblmStrtTm: formattedTime,
	176	+ prblmId: vm.prblmId,
217	177	},
	178	+ })
	179	+ .then(function (res) {
	180	+ console.log("answer submit - response : ", res.data);
	181	+ })
	182	+ .catch(function (error) {
	183	+ console.log("answer submit - error : ", error);
	184	+ });
218	185	},
219		- watch: {},
220		- computed: {},
221		- components: {},
222		- mounted() {
223		- this.problemSearch();
	186	+ playAudio() {
	187	+ const audio = document.getElementById("audio-player");
	188	+ audio.play();
	189	+ console.log("playing");
224	190	},
	191	+ handleSubmit() {
	192	+ console.log("정답 : ", this.answer);
	193	+ },
	194	+ },
	195	+ watch: {},
	196	+ computed: {},
	197	+ components: {},
	198	+ mounted() {
	199	+ this.problemSearch();
	200	+ },
225	201	};
226	202	</script>
227	203	<style scoped>
228	204	.inputbox {
229		- font-size: 38px;
230		- font-family: "Pretendard-ExtraBold";
	205	+ font-size: 38px;
	206	+ font-family: "Pretendard-ExtraBold";
231	207	}
232	208
233	209	.imgGroup button {
234		- position: relative;
	210	+ position: relative;
235	211	}
236	212
237	213	.imgGroup button p,
238	214	.textbox p {
239		- position: absolute;
240		- top: 50%;
241		- left: 50%;
242		- transform: translate(-50%, -50%);
243		- width: fit-content;
244		- height: fit-content;
245		- background: #ffffffb8;
246		- border-radius: 5px;
247		- padding: 10px;
248		- font-size: 48px;
249		- font-family: "ONEMobilePOP";
	215	+ position: absolute;
	216	+ top: 50%;
	217	+ left: 50%;
	218	+ transform: translate(-50%, -50%);
	219	+ width: fit-content;
	220	+ height: fit-content;
	221	+ background: #ffffffb8;
	222	+ border-radius: 5px;
	223	+ padding: 10px;
	224	+ font-size: 48px;
	225	+ font-family: "ONEMobilePOP";
250	226	}
251	227
252	228	.pickGroup p {
253		- font-size: 34px;
254		- font-weight: bold;
	229	+ font-size: 34px;
	230	+ font-weight: bold;
255	231	}
256	232
257	233	.pickGroup button {
258		- position: relative;
259		- margin-right: 30px;
	234	+ position: relative;
	235	+ margin-right: 30px;
260	236	}
261	237
262	238	.pickGroup button p {
263		- font-size: 34px;
264		- color: #c6c6c6;
265		- position: absolute;
266		- top: 50%;
267		- left: 50%;
268		- transform: translate(-50%, -50%);
	239	+ font-size: 34px;
	240	+ color: #c6c6c6;
	241	+ position: absolute;
	242	+ top: 50%;
	243	+ left: 50%;
	244	+ transform: translate(-50%, -50%);
269	245	}
270	246	.pickGroup button p.active {
271		- color: #000000;
	247	+ color: #000000;
	248	+}
	249	+.submit-button {
	250	+ position: absolute;
	251	+ background-color: #ffba08;
	252	+ padding: 10px 30px;
	253	+ border-radius: 10px;
	254	+ font-size: 28px;
	255	+ font-family: "ONEMobilePOPOTF";
	256	+ right: 5rem;
	257	+ bottom: 3rem;
272	258	}
273	259	</style>

...	...	@@ -1,106 +1,122 @@
1	1	<template>
2		- <div id="Chapter2_2" class="content-wrap">
3		- <div style="margin: 30px 0px 50px; width: 20%">
	2	+ <div id="Chapter2_2" class="content-wrap">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt="" /></div>
6	6	</router-link>
7	7	</div>
8		- <div class="title-box mb25 flex align-center mt40">
9		- <span class="title mr40">1. Hello WORLD</span>
10		- <span class="subtitle">my name is dd</span>
11		- </div>
12		- <div class="flex justify-between align-center">
13		- <div class="pre-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/left.png" alt="">
14		- </div>
15		- <div class="content title-box">
16		- <p class="title mt25 title-bg">step3.</p>
17		- <div class="flex align-center mb30">
18		- <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
19		- <button><img src="../../../../resources/img/btn10_s.png" alt="">
20		- </button>
21		- </div>
22		- <div class="time-hint">
	8	+ <div class="title-box mb25 flex align-center mt40">
	9	+ <span class="title mr40">1. Hello WORLD</span>
	10	+ <span class="subtitle">my name is dd</span>
	11	+ </div>
	12	+ <div class="flex justify-between align-center">
	13	+ <div class="pre-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/left.png" alt="" /></div>
	14	+ <div class="content title-box">
	15	+ <p class="title mt25 title-bg">step3.</p>
	16	+ <div class="flex align-center mb30">
	17	+ <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
	18	+ <button @click="playAudio"><img src="../../../../resources/img/btn10_s.png" alt="" /> <audio id="audio-player" src="client/resources/audio/bank.wav" preload="auto"></audio></button>
	19	+ </div>
	20	+ <div class="time-hint">
23	21	<button class="hint-btn">HINT</button>
24		- <div class="time-bg mt20">
25		- <div>
26		- <div class="time">
27		- <p class="second">{{ timer }}</p>
28		- <p class="text">sec</p>
29		- </div>
30		- </div>
	22	+ <div class="time-bg mt20">
	23	+ <div>
	24	+ <div class="time">
	25	+ <p class="second">{{ timer }}</p>
	26	+ <p class="text">sec</p>
31	27	</div>
32		- </div>
33		-
34		- <div class="imgGroup">
35		- <img src="../../../../resources/img/img114_57s.png" alt="">
36	28	</div>
	29	+ </div>
	30	+ </div>
37	31
38		- <div class="flex justify-center">
39		- <div class="btnGroup mt50 flex justify-between">
40		- <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
41		- :class="{ active: selectedIndex === index }">
42		- <img :src="item.imgSrc1">
43		- <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
44		- </button>
45		- </div>
46		- </div>
47		- </div>
48		- <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="">
49		- </div>
	32	+ <div class="imgGroup">
	33	+ <img src="../../../../resources/img/img114_57s.png" alt="" />
	34	+ </div>
	35	+
	36	+ <div class="flex justify-center">
	37	+ <div class="btnGroup mt50 flex justify-between">
	38	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
	39	+ <img :src="item.imgSrc1" />
	40	+ <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block" />
	41	+ </button>
	42	+ </div>
	43	+ </div>
	44	+ <button class="submit-button" @click="handleSubmit()">제출하기</button>
50	45	</div>
51		- </div>
	46	+ <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="" /></div>
	47	+ </div>
	48	+ </div>
52	49	</template>
53	50
54	51	<script>
55	52	export default {
56		- data() {
57		- return {
58		- items: [
59		- { imgSrc2: 'client/resources/img/img53_6_35s.png', imgSrc1: 'client/resources/img/img53_1_35s.png', },
60		- { imgSrc2: 'client/resources/img/img53_7_35s.png', imgSrc1: 'client/resources/img/img53_2_35s.png', },
61		- { imgSrc2: 'client/resources/img/img53_8_35s.png', imgSrc1: 'client/resources/img/img53_3_35s.png', },
62		- { imgSrc2: 'client/resources/img/img53_9_35s.png', imgSrc1: 'client/resources/img/img53_4_35s.png', },
63		- { imgSrc2: 'client/resources/img/img53_10_35s.png', imgSrc1: 'client/resources/img/img53_5_35s.png', }
64		- ],
65		- selectedIndex: null,
66		- timer: "00",
67		- intervalId: null,
68		- };
69		- },
70		- methods: {
71		- goToPage(page) {
72		- this.$router.push({ name: page });
73		- },
74		- updateContent(index) {
75		- this.selectedIndex = index;
76		- this.currentCon = this.items[index].con;
77		- },
78		- startTimer() {
79		- if (this.intervalId) {
80		- clearInterval(this.intervalId);
81		- }
82		- this.timer = 5;
83		- this.intervalId = setInterval(() => {
84		- if (this.timer > 0) {
85		- this.timer--;
86		- } else {
87		- clearInterval(this.intervalId);
88		- }
89		- }, 1000);
90		- }
91		- },
92		- beforeDestroy() {
	53	+ data() {
	54	+ return {
	55	+ items: [
	56	+ { imgSrc2: "client/resources/img/img53_6_35s.png", imgSrc1: "client/resources/img/img53_1_35s.png" },
	57	+ { imgSrc2: "client/resources/img/img53_7_35s.png", imgSrc1: "client/resources/img/img53_2_35s.png" },
	58	+ { imgSrc2: "client/resources/img/img53_8_35s.png", imgSrc1: "client/resources/img/img53_3_35s.png" },
	59	+ { imgSrc2: "client/resources/img/img53_9_35s.png", imgSrc1: "client/resources/img/img53_4_35s.png" },
	60	+ { imgSrc2: "client/resources/img/img53_10_35s.png", imgSrc1: "client/resources/img/img53_5_35s.png" },
	61	+ ],
	62	+ selectedIndex: null,
	63	+ timer: "00",
	64	+ intervalId: null,
	65	+ };
	66	+ },
	67	+ methods: {
	68	+ goToPage(page) {
	69	+ this.$router.push({ name: page });
	70	+ },
	71	+ updateContent(index) {
	72	+ this.selectedIndex = index;
	73	+ this.currentCon = this.items[index].con;
	74	+ },
	75	+ startTimer() {
93	76	if (this.intervalId) {
94		- clearInterval(this.intervalId);
	77	+ clearInterval(this.intervalId);
95	78	}
96		- }
97		-}
	79	+ this.timer = 5;
	80	+ this.intervalId = setInterval(() => {
	81	+ if (this.timer > 0) {
	82	+ this.timer--;
	83	+ } else {
	84	+ clearInterval(this.intervalId);
	85	+ }
	86	+ }, 1000);
	87	+ },
	88	+ handleSubmit() {
	89	+ console.log("정답 : ", this.selectedIndex + 1);
	90	+ },
	91	+ playAudio() {
	92	+ const audio = document.getElementById("audio-player");
	93	+ audio.play();
	94	+ console.log("playing");
	95	+ },
	96	+ },
	97	+ beforeDestroy() {
	98	+ if (this.intervalId) {
	99	+ clearInterval(this.intervalId);
	100	+ }
	101	+ },
	102	+};
98	103	</script>
99	104
100	105	<style scoped>
101	106	.popTxt img {
102		- position: absolute;
103		- top: 0;
104		- left: 0;
	107	+ position: absolute;
	108	+ top: 0;
	109	+ left: 0;
	110	+}
	111	+
	112	+.submit-button {
	113	+ position: absolute;
	114	+ background-color: #ffba08;
	115	+ padding: 10px 30px;
	116	+ border-radius: 10px;
	117	+ font-size: 28px;
	118	+ font-family: "ONEMobilePOPOTF";
	119	+ right: 5rem;
	120	+ bottom: 3rem;
105	121	}
106	122	</style>

...	...	@@ -1,206 +1,237 @@
1	1	<template>
2		- <div ref="ColumnLineChart" style="width: 500px; height: 500px;"></div>
3		- </template>
4		-
5		- <script>
6		- import * as am5 from "@amcharts/amcharts5";
7		- import * as am5xy from "@amcharts/amcharts5/xy";
8		- import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
9		-
10		- export default {
11		- name: "ColumnLineChart",
12		- mounted() {
13		- this.createChart();
	2	+ <div ref="ColumnLineChart" style="width: 500px; height: 500px;"></div>
	3	+</template>
	4	+
	5	+<script>
	6	+import * as am5 from "@amcharts/amcharts5";
	7	+import * as am5xy from "@amcharts/amcharts5/xy";
	8	+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
	9	+import axios from "axios";
	10	+
	11	+export default {
	12	+ name: "ColumnLineChart",
	13	+
	14	+ data() {
	15	+ return {
	16	+ chartData: [],
	17	+ currentStdId: "1"
	18	+ };
	19	+ },
	20	+
	21	+ mounted() {
	22	+ this.getMtrScoreData();
	23	+ },
	24	+
	25	+ methods: {
	26	+ // 학생의 문제 지표 점수 데이터 가져오기
	27	+ getMtrScoreData() {
	28	+ const vm = this;
	29	+ axios.post('/dashboard/mtrScoreData.json', {
	30	+ std_id: vm.currentStdId
	31	+ })
	32	+ .then(response => {
	33	+ if (response.data) {
	34	+ // 데이터를 날짜순으로 정렬
	35	+ vm.chartData = response.data.sort(
	36	+ (a, b) => new Date(a.learnedDate) - new Date(b.learnedDate)
	37	+ );
	38	+ vm.createChart();
	39	+ } else {
	40	+ console.error("mtrScoreList가 응답 데이터에 없습니다.");
	41	+ }
	42	+ })
	43	+ .catch(error => {
	44	+ console.error('문제 지표 점수 데이터를 가져오는 중 오류 발생:', error);
	45	+ });
14	46	},
15		- methods: {
16		- createChart() {
17		- // Initialize root
18		- const root = am5.Root.new(this.$refs.ColumnLineChart);
19		-
20		- // Apply themes
21		- const myTheme = am5.Theme.new(root);
22		- myTheme.rule("Grid", ["base"]).setAll({
23		- strokeOpacity: 0.1,
	47	+
	48	+ createChart() {
	49	+ // Initialize root
	50	+ const root = am5.Root.new(this.$refs.ColumnLineChart);
	51	+
	52	+ // Apply themes
	53	+ root.setThemes([
	54	+ am5themes_Animated.new(root),
	55	+ ]);
	56	+
	57	+ // Create chart
	58	+ const chart = root.container.children.push(
	59	+ am5xy.XYChart.new(root, {
	60	+ panX: false,
	61	+ panY: false,
	62	+ wheelX: "panX",
	63	+ wheelY: "zoomX",
	64	+ paddingLeft: 0,
	65	+ layout: root.verticalLayout
	66	+ })
	67	+ );
	68	+
	69	+ // Create axes
	70	+ const xRenderer = am5xy.AxisRendererX.new(root, {
	71	+ minorGridEnabled: true,
	72	+ minGridDistance: 60
	73	+ });
	74	+
	75	+ const xAxis = chart.xAxes.push(
	76	+ am5xy.CategoryAxis.new(root, {
	77	+ categoryField: "learnedDate",
	78	+ renderer: xRenderer,
	79	+ tooltip: am5.Tooltip.new(root, {})
	80	+ })
	81	+ );
	82	+
	83	+ xRenderer.grid.template.setAll({
	84	+ location: 1
	85	+ });
	86	+
	87	+ xAxis.data.setAll(this.chartData);
	88	+
	89	+ let yAxis = chart.yAxes.push(
	90	+ am5xy.ValueAxis.new(root, {
	91	+ min: 0,
	92	+ extraMax: 0.1,
	93	+ renderer: am5xy.AxisRendererY.new(root, {
	94	+ strokeOpacity: 0.1
	95	+ })
	96	+ })
	97	+ );
	98	+
	99	+ // 이해 점수 막대 그래프
	100	+ let series1 = chart.series.push(
	101	+ am5xy.ColumnSeries.new(root, {
	102	+ name: "이해 점수",
	103	+ xAxis: xAxis,
	104	+ yAxis: yAxis,
	105	+ valueYField: "totalMtr01Score",
	106	+ categoryXField: "learnedDate",
	107	+ tooltip: am5.Tooltip.new(root, {
	108	+ pointerOrientation: "horizontal",
	109	+ labelText: "{name} in {categoryX}: {valueY}"
	110	+ })
	111	+ })
	112	+ );
	113	+
	114	+ // 파스텔 블루
	115	+ series1.columns.template.setAll({
	116	+ fill: am5.color(0x87CEEB),
	117	+ stroke: am5.color(0x87CEEB),
	118	+ tooltipY: am5.percent(10),
	119	+ });
	120	+
	121	+ series1.data.setAll(this.chartData);
	122	+
	123	+ // 표현 점수 막대 그래프
	124	+ let series2 = chart.series.push(
	125	+ am5xy.ColumnSeries.new(root, {
	126	+ name: "표현 점수",
	127	+ xAxis: xAxis,
	128	+ yAxis: yAxis,
	129	+ valueYField: "totalMtr02Score",
	130	+ categoryXField: "learnedDate",
	131	+ tooltip: am5.Tooltip.new(root, {
	132	+ pointerOrientation: "horizontal",
	133	+ labelText: "{name} in {categoryX}: {valueY}"
	134	+ })
	135	+ })
	136	+ );
	137	+
	138	+ // 파스텔 핑크
	139	+ series2.columns.template.setAll({
	140	+ fill: am5.color(0xFFB6C1),
	141	+ stroke: am5.color(0xFFB6C1),
	142	+ tooltipY: am5.percent(10),
	143	+ });
	144	+
	145	+ series2.data.setAll(this.chartData);
	146	+
	147	+ // 이해 점수 변화 꺾은선 그래프
	148	+ const lineSeries1 = chart.series.push(
	149	+ am5xy.LineSeries.new(root, {
	150	+ name: "이해 점수 변화",
	151	+ xAxis: xAxis,
	152	+ yAxis: yAxis,
	153	+ valueYField: "totalMtr01Score",
	154	+ categoryXField: "learnedDate",
	155	+ stroke: am5.color(0xADD8E6), // 라이트 블루로 설정
	156	+ tooltip: am5.Tooltip.new(root, {
	157	+ pointerOrientation: "horizontal",
	158	+ labelText: "{name} on {categoryX}: {valueY}"
	159	+ })
	160	+ })
	161	+ );
	162	+
	163	+ lineSeries1.strokes.template.setAll({
	164	+ strokeWidth: 3,
	165	+ stroke: am5.color(0xADD8E6), // 다시 명시적 설정
	166	+ });
	167	+
	168	+ lineSeries1.bullets.push(function () {
	169	+ return am5.Bullet.new(root, {
	170	+ sprite: am5.Circle.new(root, {
	171	+ radius: 5,
	172	+ fill: am5.color(0xADD8E6), // 라이트 블루로 설정
	173	+ strokeWidth: 3,
	174	+ stroke: am5.color(0xADD8E6)
	175	+ })
24	176	});
25		- root.setThemes([
26		- am5themes_Animated.new(root),
27		- myTheme,
28		- ]);
29		-
30		- // Create chart
31		- let chart = root.container.children.push(
32		- am5xy.XYChart.new(root, {
33		- panX: false,
34		- panY: false,
35		- wheelX: "panX",
36		- wheelY: "zoomX",
37		- paddingLeft: 0,
38		- layout: root.verticalLayout
39		- })
40		-);
	177	+ });
41	178
42		-// Add scrollbar
43		-// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
44		-// chart.set(
45		-// "scrollbarX",
46		-// am5.Scrollbar.new(root, {
47		-// orientation: "horizontal"
48		-// })
49		-// );
	179	+ lineSeries1.data.setAll(this.chartData);
50	180
51		-let data = [
52		- {
53		- year: "2016",
54		- income: 23.5,
55		- expenses: 21.1
56		- },
57		- {
58		- year: "2017",
59		- income: 26.2,
60		- expenses: 30.5
61		- },
62		- {
63		- year: "2018",
64		- income: 30.1,
65		- expenses: 34.9
66		- },
67		- {
68		- year: "2019",
69		- income: 29.5,
70		- expenses: 31.1
71		- },
72		- {
73		- year: "2020",
74		- income: 30.6,
75		- expenses: 28.2,
76		- strokeSettings: {
77		- stroke: chart.get("colors").getIndex(1),
78		- strokeWidth: 3,
79		- strokeDasharray: [5, 5]
80		- }
81		- },
82		- {
83		- year: "2021",
84		- income: 34.1,
85		- expenses: 32.9,
86		- columnSettings: {
87		- strokeWidth: 1,
88		- strokeDasharray: [5],
89		- fillOpacity: 0.2
	181	+ // 표현 점수 변화 꺾은선 그래프
	182	+ const lineSeries2 = chart.series.push(
	183	+ am5xy.LineSeries.new(root, {
	184	+ name: "표현 점수 변화",
	185	+ xAxis: xAxis,
	186	+ yAxis: yAxis,
	187	+ valueYField: "totalMtr02Score",
	188	+ categoryXField: "learnedDate",
	189	+ stroke: am5.color(0xFF69B4), // 핫 핑크로 설정
	190	+ tooltip: am5.Tooltip.new(root, {
	191	+ pointerOrientation: "horizontal",
	192	+ labelText: "{name} on {categoryX}: {valueY}"
	193	+ })
	194	+ })
	195	+ );
	196	+
	197	+ lineSeries2.strokes.template.setAll({
	198	+ strokeWidth: 3,
	199	+ stroke: am5.color(0xFF69B4), // 다시 명시적 설정
	200	+ });
	201	+
	202	+ lineSeries2.bullets.push(function () {
	203	+ return am5.Bullet.new(root, {
	204	+ sprite: am5.Circle.new(root, {
	205	+ radius: 5,
	206	+ fill: am5.color(0xFF69B4), // 핫 핑크로 설정
	207	+ strokeWidth: 3,
	208	+ stroke: am5.color(0xFF69B4)
	209	+ })
	210	+ });
	211	+ });
	212	+
	213	+ lineSeries2.data.setAll(this.chartData);
	214	+
	215	+ chart.set("cursor", am5xy.XYCursor.new(root, {}));
	216	+
	217	+ let legend = chart.children.push(
	218	+ am5.Legend.new(root, {
	219	+ centerX: am5.p50,
	220	+ x: am5.p50
	221	+ })
	222	+ );
	223	+ legend.data.setAll(chart.series.values);
	224	+
	225	+ chart.appear(1000, 100);
	226	+ series1.appear();
	227	+ series2.appear();
	228	+ lineSeries1.appear();
	229	+ lineSeries2.appear();
90	230	},
91		- info: "(projection)"
92		- }
93		-];
	231	+ },
	232	+};
	233	+</script>
94	234
95		-// Create axes
96		-// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
97		-let xRenderer = am5xy.AxisRendererX.new(root, {
98		- minorGridEnabled: true,
99		- minGridDistance: 60
100		-});
101		-let xAxis = chart.xAxes.push(
102		- am5xy.CategoryAxis.new(root, {
103		- categoryField: "year",
104		- renderer: xRenderer,
105		- tooltip: am5.Tooltip.new(root, {})
106		- })
107		-);
108		-xRenderer.grid.template.setAll({
109		- location: 1
110		-})
111		-
112		-xAxis.data.setAll(data);
113		-
114		-let yAxis = chart.yAxes.push(
115		- am5xy.ValueAxis.new(root, {
116		- min: 0,
117		- extraMax: 0.1,
118		- renderer: am5xy.AxisRendererY.new(root, {
119		- strokeOpacity: 0.1
120		- })
121		- })
122		-);
123		-
124		-
125		-// Add series
126		-// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
127		-
128		-let series1 = chart.series.push(
129		- am5xy.ColumnSeries.new(root, {
130		- name: "Income",
131		- xAxis: xAxis,
132		- yAxis: yAxis,
133		- valueYField: "income",
134		- categoryXField: "year",
135		- tooltip: am5.Tooltip.new(root, {
136		- pointerOrientation: "horizontal",
137		- labelText: "{name} in {categoryX}: {valueY} {info}"
138		- })
139		- })
140		-);
141		-
142		-series1.columns.template.setAll({
143		- tooltipY: am5.percent(10),
144		- templateField: "columnSettings"
145		-});
146		-
147		-series1.data.setAll(data);
148		-
149		-let series2 = chart.series.push(
150		- am5xy.LineSeries.new(root, {
151		- name: "Expenses",
152		- xAxis: xAxis,
153		- yAxis: yAxis,
154		- valueYField: "expenses",
155		- categoryXField: "year",
156		- tooltip: am5.Tooltip.new(root, {
157		- pointerOrientation: "horizontal",
158		- labelText: "{name} in {categoryX}: {valueY} {info}"
159		- })
160		- })
161		-);
162		-
163		-series2.strokes.template.setAll({
164		- strokeWidth: 3,
165		- templateField: "strokeSettings"
166		-});
167		-
168		-
169		-series2.data.setAll(data);
170		-
171		-series2.bullets.push(function () {
172		- return am5.Bullet.new(root, {
173		- sprite: am5.Circle.new(root, {
174		- strokeWidth: 3,
175		- stroke: series2.get("stroke"),
176		- radius: 5,
177		- fill: root.interfaceColors.get("background")
178		- })
179		- });
180		-});
181		-
182		-chart.set("cursor", am5xy.XYCursor.new(root, {}));
183		-
184		-// Add legend
185		-// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
186		-let legend = chart.children.push(
187		- am5.Legend.new(root, {
188		- centerX: am5.p50,
189		- x: am5.p50
190		- })
191		-);
192		-legend.data.setAll(chart.series.values);
193		-
194		-// Make stuff animate on load
195		-// https://www.amcharts.com/docs/v5/concepts/animations/
196		-chart.appear(1000, 100);
197		-series1.appear();
198		- },
199		- },
200		- };
201		- </script>
202		-
203		- <style scoped>
204		- /* Add necessary styles here */
205		- </style>
206		- (파일 끝에 줄바꿈 문자 없음)
	235	+<style scoped>
	236	+/* Add necessary styles here */
	237	+</style>

...	...	@@ -15,7 +15,9 @@
15	15	return {
16	16	chartData: {},
17	17	currentDate: "2024-08-14",
18		- currentStdId: "1"
	18	+ currentStdId: "1",
	19	+ root: null,
	20	+ chart: null
19	21	};
20	22	},
21	23
...	...	@@ -42,6 +44,11 @@
42	44	},
43	45
44	46	createChart() {
	47	+ // 차트 중복 생성 방지
	48	+ if (this.root) {
	49	+ this.root.dispose();
	50	+ }
	51	+
45	52	// Initialize root
46	53	const root = am5.Root.new(this.$refs.Dounutchart);
47	54
...	...	@@ -118,7 +125,7 @@
118	125	series.appear(1000, 100);
119	126	}
120	127	}
121		-
	128	+
122	129	};
123	130	</script>
124	131

...	...	@@ -1,5 +1,5 @@
1	1	<template>
2		- <div ref="StackedBarChart" style="height: 500px"></div>
	2	+ <div ref="StackedBarChart" style="width: 1000px; height: 500px;"></div>
3	3	</template>
4	4
5	5	<script>

Delete comment