Commit @63b0992cd289dbd5ae988c855da328cac11c5153

307c1a2

63b0992

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

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

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


 <template>
     <div id="Chapter1" class="content-wrap">
-        <div style="margin: 30px 0px 50px">
+        <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_2" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
+    <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>

307c1a2

63b0992

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

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

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


 <template>
     <div id="Chapter1" class="content-wrap">
-        <div style="margin: 30px 0px 50px">
+        <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-            <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

             <div class="flex justify-center">
               <div class="popTxt" id="drop1" @dragover.prevent @drop="handleDrop(1)">
                 <img src="../../../../resources/img/img66_38s_1.png" alt="">
-                <button v-if="showButton1"><img src="../../../../resources/img/img66_38s_1_color.png" alt=""><p>i</p></button>
+                <button v-if="showButton1"><img src="../../../../resources/img/img66_38s_1_color.png" alt="">
+                  <p>i</p>
+                </button>
               </div>
               <div class="popTxt" id="drop2" @dragover.prevent @drop="handleDrop(2)">
                 <img src="../../../../resources/img/img66_38s_2.png" alt="">
-                <button v-if="showButton2"><img src="../../../../resources/img/img66_38s_2_color.png" alt=""><p>have</p></button>
+                <button v-if="showButton2"><img src="../../../../resources/img/img66_38s_2_color.png" alt="">
+                  <p>have</p>
+                </button>
               </div>
               <div class="popTxt" id="drop3" @dragover.prevent @drop="handleDrop(3)">
                 <img src="../../../../resources/img/img66_38s_3.png" alt="">
-                <button v-if="showButton3"><img src="../../../../resources/img/img66_38s_3_color.png" alt=""><p>banana</p></button>
+                <button v-if="showButton3"><img src="../../../../resources/img/img66_38s_3_color.png" alt="">
+                  <p>banana</p>
+                </button>
               </div>
             </div>
           </div>

               </button>
             </article>
             <article style="left: 0; top: 36%;" @dragstart="handleDragStart(2)" v-show="!dragHidden2">
-              <button id="drag2" draggable="true"> 
+              <button id="drag2" draggable="true">
                 <img src="../../../../resources/img/img68_38s.png" alt="">
                 <p>have</p>
               </button>

 </script>
 
 <style scoped>
-.dropGroup button{ left: 0;}
-.dragGroup button p{color: #fff; font-size: 35px;}
-.dropGroup button p{
+.dropGroup button {
+  left: 0;
+}
+
+.dragGroup button p {
+  color: #fff;
+  font-size: 35px;
+}
+
+.dropGroup button p {
   font-size: 48px;
-  color: #fff;}
-</style>
+  color: #fff;
+}</style>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
+    <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>

307c1a2

63b0992

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

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

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


 <template>
     <div id="Chapter1_1" class="content-wrap">
-      <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
-      </div>
+      <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

       <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>
+          <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</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>
+            <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>
+          </div>
           <div class="imgGroup  mt20">
             <img src="../../../../resources/img/img116_59s.png" alt="">
             <p class="title1 mt10" style="width: auto;"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>

 }
 </script>
 <style scoped>
-input.yellow-bd{width: 30%;}
+input.yellow-bd {
+  width: 30%;
+}
+
 .dropGroup button {
   position: relative;
 }

 
 .dragGroup button p {
   font-size: 48px;
-}
-</style>
+}</style>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

       <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="">
+          <p class="subtitle2 mr20">그림을 보고 빈칸을 채우세요.</p>
+          <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button> -->
-            </div>
+        </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>
+          </div>
           <div class="imgGroup  mt20">
             <img src="../../../../resources/img/img115_58s.png" alt="">
             <!-- <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p> -->

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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

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

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


 <template>
   <div id="Chapter1_1" class="content-wrap">
-    <div style="margin: 30px 0px 50px">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
+    <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>

307c1a2

63b0992

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">
-        <router-link to="/MyPlan.page">
-          <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
-        </router-link>
-      </div>
+      <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>

307c1a2

63b0992

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

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

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


 <template>
     <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px">
+        <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">

                 <div class="flex align-center mb30">
                     <p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
                     <button>
-                        <img
-                            src="../../../../resources/img/btn10_s.png"
-                            alt=""
-                        />
+                        <img src="../../../../resources/img/btn10_s.png" alt="" />
                     </button>
                 </div>
 

                         </div>
                     </div>
 
-                    <div
-                        class="pickGroup flex align-center justify-between mt80"
-                        style="gap: 100px"
-                        v-for="(item, index) in problemDetail"
-                        :key="item.id"
-                    >
+                    <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px"
+                        v-for="(item, index) in problemDetail" :key="item.id">
                         <p>{{ index + 1 }}. {{ item.prblmDtlExpln }}</p>
                         <div class="flex justify-center" style="gap: 60px">
                             <article>
                                 <div class="flex align-center">
                                     <button>
-                                        <img
-                                            src="../../../../resources/img/img136_71s.png"
-                                            alt=""
-                                        />
+                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
                                         <p>1</p>
                                     </button>
-                                    <img
-                                        src="../../../../resources/img/img111_56s.png"
-                                        alt=""
-                                    />
+                                    <img src="../../../../resources/img/img111_56s.png" alt="" />
                                 </div>
                             </article>
                             <article>
                                 <div class="flex align-center">
                                     <button>
-                                        <img
-                                            src="../../../../resources/img/img136_71s.png"
-                                            alt=""
-                                        />
+                                        <img src="../../../../resources/img/img136_71s.png" alt="" />
                                         <p>2</p>
                                     </button>
-                                    <img
-                                        src="../../../../resources/img/img112_56s.png"
-                                        alt=""
-                                    />
+                                    <img src="../../../../resources/img/img112_56s.png" alt="" />
                                 </div>
                             </article>
                         </div>

     font-size: 48px;
     font-family: "ONEMobilePOP";
 }
+
 .pickGroup {
     padding: 0px 80px;
 }
+
 .pickGroup p {
     font-size: 34px;
     font-weight: bold;

307c1a2

63b0992

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

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

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


 <template>
-    <div id="Chapter1_1" class="content-wrap">
-      <div style="margin: 30px 0px 50px">
-        <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_7')"><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="">
+  <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_7')"><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="text-ct">
-            <div class="time-hint">
-          <button class="hint-btn">HINT</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 class="time">
+                  <p class="second">{{ timer }}</p>
+                  <p class="text">sec</p>
                 </div>
               </div>
-         </div>
+            </div>
+          </div>
           <div class="imgGroup flex align-center justify-center mt50">
             <img src="../../../../resources/img/img114_57s.png" alt="">
-               <input class="yellow-bd ml50" style="width: 30%;" type="text" name="" id="" placeholder="답을 입력하세요.">
-             
+            <input class="yellow-bd ml50" style="width: 30%;" type="text" name="" id="" placeholder="답을 입력하세요.">
+
           </div>
-          <div class="flex justify-center mt40 " >
-              <div class="dragGroup flex " style="gap: 50px;">
-              <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
-              <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
+          <div class="flex justify-center mt40 ">
+            <div class="dragGroup flex " style="gap: 50px;">
+              <button><img src="../../../../resources/img/img63_37s.png" alt="">
+                <p @click="handleDrag(1)">A</p>
+              </button>
+              <button><img src="../../../../resources/img/img63_37s_1.png" alt="">
+                <p @click="handleDrag(1)">A</p>
+              </button>
+              <button><img src="../../../../resources/img/img63_37s.png" alt="">
+                <p @click="handleDrag(1)">A</p>
+              </button>
+              <button><img src="../../../../resources/img/img63_37s_2.png" alt="">
+                <p @click="handleDrag(1)">A</p>
+              </button>
+              <button><img src="../../../../resources/img/img63_37s_1.png" alt="">
+                <p @click="handleDrag(1)">A</p>
+              </button>
+              <button><img src="../../../../resources/img/img63_37s_2.png" alt="">
+                <p @click="handleDrag(1)">A</p>
+              </button>
             </div>
-            
+
           </div>
         </div>
-        </div>
-        <div class="next-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/right.png" alt=""></div>
       </div>
+      <div class="next-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
-  </template>
+  </div>
+</template>
   
-  <script>
-  export default {
-    data() {
-      return {
-          timer: '00',
-        showButton1: false,
+<script>
+export default {
+  data() {
+    return {
+      timer: '00',
+      showButton1: false,
       showButton2: false,
       showButton3: false,
       showButton4: false,
-      }
+    }
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    methods: {
-      goToPage(page) {
-        this.$router.push({ name: page });
-      },
-      handleDrag(dragNumber) {
+    handleDrag(dragNumber) {
       // Drag 버튼 숨기기
       // 여기서는 상태 관리를 통해 버튼을 제어합니다.
       if (dragNumber === 1) {

         }
       }, 1000);
     }
-    },
-    watch: {
-  
-    },
-    computed: {
-  
-    },
-    components: {
-    },
-    mounted() {
-      
-    }
+  },
+  watch: {
+
+  },
+  computed: {
+
+  },
+  components: {
+  },
+  mounted() {
+
   }
-  </script>
-  <style scoped>
-  .dropGroup button{position: relative;}
-  .dropGroup button p{ font-size: 48px;}
-  .dragGroup{background-color: #F2F4F8; padding: 30px 50px; width: max-content; border-radius: 20px;}
-.dragGroup button p{
+}
+</script>
+<style scoped>.dropGroup button {
+  position: relative;
+}
+
+.dropGroup button p {
   font-size: 48px;
-  }
-</style>
+}
+
+.dragGroup {
+  background-color: #F2F4F8;
+  padding: 30px 50px;
+  width: max-content;
+  border-radius: 20px;
+}
+
+.dragGroup button p {
+  font-size: 48px;
+}</style>

307c1a2

63b0992

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

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

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


 <template>
     <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px">
+        <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">

                         </div>
                     </div>
                     <div class="imgGroup mt50">
-                        <img
-                            src="../../../../resources/img/img115_58s.png"
-                            alt=""
-                        />
+                        <img src="../../../../resources/img/img115_58s.png" alt="" />
                         <div class="mt50">
-                            <input
-                                class="yellow-bd"
-                                type="text"
-                                name=""
-                                id=""
-                                placeholder="답을 입력하세요."
-                            />
+                            <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요." />
                         </div>
                     </div>
                 </div>

 input.yellow-bd {
     width: 30%;
 }
+
 .dropGroup button {
     position: relative;
 }

307c1a2

63b0992

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

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

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


 <template>
     <div id="Chapter1_1" class="content-wrap">
-        <div style="margin: 30px 0px 50px">
+        <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">

                  </button>
                 </div> -->
 
-                <div
-                    class="text-ct flex justify-center"
-                    style="gap: 150px; margin: 0 auto"
-                >
+                <div class="text-ct flex justify-center" style="gap: 150px; margin: 0 auto">
                     <div class="wrap-bg">
                         <div class="title-box flex mb10 justify-between">
                             <p class="title mb20">최종 점수</p>
-                            <button
-                                type="button"
-                                class="popup-close-btn"
-                                @click="closeBtn"
-                            >
-                                <svg-icon
-                                    type="mdi"
-                                    :path="mdiWindowClose"
-                                    class="close-btn"
-                                ></svg-icon>
+                            <button type="button" class="popup-close-btn" @click="closeBtn">
+                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                             </button>
                         </div>
                         <div style="width: 100%" class="flex mt30">

                     <div class="bg-gray" style="width: 980px">
                         <div class="title-box flex mb10 justify-between">
                             <p class="title mb20">오답 문제 리스트</p>
-                            <button
-                                type="button"
-                                class="popup-close-btn"
-                                @click="closeBtn"
-                            >
-                                <svg-icon
-                                    type="mdi"
-                                    :path="mdiWindowClose"
-                                    class="close-btn"
-                                ></svg-icon>
+                            <button type="button" class="popup-close-btn" @click="closeBtn">
+                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                             </button>
                         </div>
-                        <article
-                            class="mb20 flex-column result-box"
-                            style="gap: 20px"
-                        >
-                            <div
-                                class="flex justify-between wrap"
-                                v-for="(item, index) in dataList"
-                                :key="item.id"
-                            >
+                        <article class="mb20 flex-column result-box" style="gap: 20px">
+                            <div class="flex justify-between wrap" v-for="(item, index) in dataList" :key="item.id">
                                 <div class="flex align-center">
                                     <div>
                                         <p class="title1 mr20">

                                     </div>
                                 </div>
                                 <div>
-                                    <div
-                                        class="flex align-center"
-                                        style="gap: 10px"
-                                    >
-                                        <button
-                                            type="button"
-                                            title="정답 확인"
-                                            class="yellow-btn"
-                                            @click="
-                                                [
-                                                    handleProblemDetail(item),
-                                                    goToPage(problemType),
-                                                ]
-                                            "
-                                        >
+                                    <div class="flex align-center" style="gap: 10px">
+                                        <button type="button" title="정답 확인" class="yellow-btn" @click="
+                                            [
+                                                handleProblemDetail(item),
+                                                goToPage(problemType),
+                                            ]
+                                            ">
                                             정답 확인
                                         </button>
                                     </div>

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div id="Chapter1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5	5	<div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6	6	</router-link>

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5	5	<div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6	6	</router-link>

...	...	@@ -1,6 +1,6 @@
1	1	<template>
2	2	<div id="Chapter1_2" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5	5	<div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6	6	</router-link>

...	...	@@ -1,9 +1,9 @@
1	1	<template>
2	2	<div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
	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	7	</div>
8	8	<div class="title-box mb25 flex align-center mt40">
9	9	<span class="title mr40">1. Hello WORLD</span>

...	...	@@ -1,10 +1,10 @@
1	1	<template>
2	2	<div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
7		- </div>
	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	8	<div class="title-box mb25 flex align-center mt40">
9	9	<span class="title mr40">1. Hello WORLD</span>
10	10	<span class="subtitle">my name is dd</span>

...	...	@@ -1,10 +1,10 @@
1	1	<template>
2	2	<div id="Chapter2_2" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
4		- <router-link to="/MyPlan.page">
5		- <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
6		- </router-link>
7		- </div>
	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	8	<div class="title-box mb25 flex align-center mt40">
9	9	<span class="title mr40">1. Hello WORLD</span>
10	10	<span class="subtitle">my name is dd</span>

...	...	@@ -1,10 +1,8 @@
1	1	<template>
2	2	<div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
	3	+ <div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5		- <div class="logo mb25">
6		- <img src="../../../../resources/img/logo2.png" alt="" />
7		- </div>
	5	+ <div class="logo mb25"><img src="../../../../resources/img/logo2.png" alt=""></div>
8	6	</router-link>
9	7	</div>
10	8	<div class="title-box mb25 flex align-center mt40">
...	...	@@ -20,10 +18,7 @@
20	18	<div class="flex align-center mb30">
21	19	<p class="subtitle2 mr20">{{ dataList.prblmExpln }}</p>
22	20	<button>
23		- <img
24		- src="../../../../resources/img/btn10_s.png"
25		- alt=""
26		- />
	21	+ <img src="../../../../resources/img/btn10_s.png" alt="" />
27	22	</button>
28	23	</div>
29	24
...	...	@@ -40,42 +35,26 @@
40	35	</div>
41	36	</div>
42	37
43		- <div
44		- class="pickGroup flex align-center justify-between mt80"
45		- style="gap: 100px"
46		- v-for="(item, index) in problemDetail"
47		- :key="item.id"
48		- >
	38	+ <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px"
	39	+ v-for="(item, index) in problemDetail" :key="item.id">
49	40	<p>{{ index + 1 }}. {{ item.prblmDtlExpln }}</p>
50	41	<div class="flex justify-center" style="gap: 60px">
51	42	<article>
52	43	<div class="flex align-center">
53	44	<button>
54		- <img
55		- src="../../../../resources/img/img136_71s.png"
56		- alt=""
57		- />
	45	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
58	46	<p>1</p>
59	47	</button>
60		- <img
61		- src="../../../../resources/img/img111_56s.png"
62		- alt=""
63		- />
	48	+ <img src="../../../../resources/img/img111_56s.png" alt="" />
64	49	</div>
65	50	</article>
66	51	<article>
67	52	<div class="flex align-center">
68	53	<button>
69		- <img
70		- src="../../../../resources/img/img136_71s.png"
71		- alt=""
72		- />
	54	+ <img src="../../../../resources/img/img136_71s.png" alt="" />
73	55	<p>2</p>
74	56	</button>
75		- <img
76		- src="../../../../resources/img/img112_56s.png"
77		- alt=""
78		- />
	57	+ <img src="../../../../resources/img/img112_56s.png" alt="" />
79	58	</div>
80	59	</article>
81	60	</div>
...	...	@@ -174,9 +153,11 @@
174	153	font-size: 48px;
175	154	font-family: "ONEMobilePOP";
176	155	}
	156	+
177	157	.pickGroup {
178	158	padding: 0px 80px;
179	159	}
	160	+
180	161	.pickGroup p {
181	162	font-size: 34px;
182	163	font-weight: bold;

...	...	@@ -1,75 +1,87 @@
1	1	<template>
2		- <div id="Chapter1_1" class="content-wrap">
3		- <div style="margin: 30px 0px 50px">
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_7')"><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><img src="../../../../resources/img/btn10_s.png" alt="">
	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_7')"><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><img src="../../../../resources/img/btn10_s.png" alt="">
19	19	</button> -->
20		- </div>
21		-
22		- <div class="text-ct">
23		- <div class="time-hint">
24		- <button class="hint-btn">HINT</button>
	20	+ </div>
	21	+
	22	+ <div class="text-ct">
	23	+ <div class="time-hint">
	24	+ <button class="hint-btn">HINT</button>
25	25	<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>
	26	+ <div>
	27	+ <div class="time">
	28	+ <p class="second">{{ timer }}</p>
	29	+ <p class="text">sec</p>
31	30	</div>
32	31	</div>
33		- </div>
	32	+ </div>
	33	+ </div>
34	34	<div class="imgGroup flex align-center justify-center mt50">
35	35	<img src="../../../../resources/img/img114_57s.png" alt="">
36		- <input class="yellow-bd ml50" style="width: 30%;" type="text" name="" id="" placeholder="답을 입력하세요.">
37		-
	36	+ <input class="yellow-bd ml50" style="width: 30%;" type="text" name="" id="" placeholder="답을 입력하세요.">
	37	+
38	38	</div>
39		- <div class="flex justify-center mt40 " >
40		- <div class="dragGroup flex " style="gap: 50px;">
41		- <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
42		- <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
43		- <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
44		- <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
45		- <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
46		- <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
	39	+ <div class="flex justify-center mt40 ">
	40	+ <div class="dragGroup flex " style="gap: 50px;">
	41	+ <button><img src="../../../../resources/img/img63_37s.png" alt="">
	42	+ <p @click="handleDrag(1)">A</p>
	43	+ </button>
	44	+ <button><img src="../../../../resources/img/img63_37s_1.png" alt="">
	45	+ <p @click="handleDrag(1)">A</p>
	46	+ </button>
	47	+ <button><img src="../../../../resources/img/img63_37s.png" alt="">
	48	+ <p @click="handleDrag(1)">A</p>
	49	+ </button>
	50	+ <button><img src="../../../../resources/img/img63_37s_2.png" alt="">
	51	+ <p @click="handleDrag(1)">A</p>
	52	+ </button>
	53	+ <button><img src="../../../../resources/img/img63_37s_1.png" alt="">
	54	+ <p @click="handleDrag(1)">A</p>
	55	+ </button>
	56	+ <button><img src="../../../../resources/img/img63_37s_2.png" alt="">
	57	+ <p @click="handleDrag(1)">A</p>
	58	+ </button>
47	59	</div>
48		-
	60	+
49	61	</div>
50	62	</div>
51		- </div>
52		- <div class="next-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/right.png" alt=""></div>
53	63	</div>
	64	+ <div class="next-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/right.png" alt=""></div>
54	65	</div>
55		- </template>
	66	+ </div>
	67	+</template>
56	68
57		- <script>
58		- export default {
59		- data() {
60		- return {
61		- timer: '00',
62		- showButton1: false,
	69	+<script>
	70	+export default {
	71	+ data() {
	72	+ return {
	73	+ timer: '00',
	74	+ showButton1: false,
63	75	showButton2: false,
64	76	showButton3: false,
65	77	showButton4: false,
66		- }
	78	+ }
	79	+ },
	80	+ methods: {
	81	+ goToPage(page) {
	82	+ this.$router.push({ name: page });
67	83	},
68		- methods: {
69		- goToPage(page) {
70		- this.$router.push({ name: page });
71		- },
72		- handleDrag(dragNumber) {
	84	+ handleDrag(dragNumber) {
73	85	// Drag 버튼 숨기기
74	86	// 여기서는 상태 관리를 통해 버튼을 제어합니다.
75	87	if (dragNumber === 1) {
...	...	@@ -106,25 +118,35 @@
106	118	}
107	119	}, 1000);
108	120	}
109		- },
110		- watch: {
111		-
112		- },
113		- computed: {
114		-
115		- },
116		- components: {
117		- },
118		- mounted() {
119		-
120		- }
	121	+ },
	122	+ watch: {
	123	+
	124	+ },
	125	+ computed: {
	126	+
	127	+ },
	128	+ components: {
	129	+ },
	130	+ mounted() {
	131	+
121	132	}
122		- </script>
123		- <style scoped>
124		- .dropGroup button{position: relative;}
125		- .dropGroup button p{ font-size: 48px;}
126		- .dragGroup{background-color: #F2F4F8; padding: 30px 50px; width: max-content; border-radius: 20px;}
127		-.dragGroup button p{
	133	+}
	134	+</script>
	135	+<style scoped>.dropGroup button {
	136	+ position: relative;
	137	+}
	138	+
	139	+.dropGroup button p {
128	140	font-size: 48px;
129		- }
130		-</style> (No newline at end of file)
	141	+}
	142	+
	143	+.dragGroup {
	144	+ background-color: #F2F4F8;
	145	+ padding: 30px 50px;
	146	+ width: max-content;
	147	+ border-radius: 20px;
	148	+}
	149	+
	150	+.dragGroup button p {
	151	+ font-size: 48px;
	152	+}</style> (No newline at end of file)

Delete comment