Commit @8d47256c186f0b93cf50a02d8c9608860b8683a7

fb0a90c

8d47256

client/resources/css/style.css

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

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


 .complete-wrap img{width: inherit;}
 .complete-wrap .photo{cursor: pointer; width: 200px; height: 130px; }
 /* 챕터 */
+.time-hint{
+  position: absolute;
+  top: 50px;
+  right: 50px;
+  text-align: center;
+}
+.hint-btn{
+  background-image: url('../img/btn01.png');
+  width: 110px;
+  height: 45px;
+  padding: 5px 20px;
+    font-size: 28px;
+    font-family: 'ONEMobilePOP';
+}
 .content-wrap {
   margin: 90px 60px 0 60px;
 

   width: 560px;
 }
 .time-bg{
-  position: absolute;
-  top: 50px;
-  right: 50px;
   text-align: center;
   font-family: 'neodgm'; background-image: url('../img/img55_s.png'); width: 110px; height: 128px;}
   .time-bg > div{position: relative;}

8d47256

client/resources/img/img222_57s.png (Binary) (added)

+++ client/resources/img/img222_57s.png

Binary file is not shown

fb0a90c

8d47256

client/views/pages/AppRouter.js

--- client/views/pages/AppRouter.js

+++ client/views/pages/AppRouter.js


 import Chapter3_1 from "./main/Chapter/Chapter3_1.vue";
 import Chapter3_2 from "./main/Chapter/Chapter3_2.vue";
 import Chapter3_3 from "./main/Chapter/Chapter3_3.vue";
+import Chapter3_3_1 from "./main/Chapter/Chapter3_3_1.vue";
 import Chapter3_4 from "./main/Chapter/Chapter3_4.vue";
 import Chapter3_5 from "./main/Chapter/Chapter3_5.vue";
 import Chapter3_6 from "./main/Chapter/Chapter3_6.vue";

     { path: '/Chapter3_1.page', name: 'Chapter3_1', component: Chapter3_1 },
     { path: '/Chapter3_2.page', name: 'Chapter3_2', component: Chapter3_2 },
     { path: '/Chapter3_3.page', name: 'Chapter3_3', component: Chapter3_3 },
+    { path: '/Chapter3_3_1.page', name: 'Chapter3_3_1', component: Chapter3_3_1 },
     { path: '/Chapter3_4.page', name: 'Chapter3_4', component: Chapter3_4 },
     { path: '/Chapter3_5.page', name: 'Chapter3_5', component: Chapter3_5 },
     { path: '/Chapter3_6.page', name: 'Chapter3_6', component: Chapter3_6 },

fb0a90c

8d47256

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>
 
         <div class="flex align-center justify-center" style="gap: 113px;">
-          <div class="time-bg">
-              <div>
-                <div class="time">
-                  <p class="second">{{ timer }}</p>
-                  <p class="text">sec</p>
+         <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>
           <div class="pickGroup ">
             <div class="flex" style="gap: 250px;">
               <article  class="text-ct">

 
 .pickGroup button {
   position: relative;
-  margin-right: 30px;
 }
 
 .pickGroup button p {

fb0a90c

8d47256

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

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

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


             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           <div class="imgGroup  mt20">
             <img src="../../../../resources/img/img116_59s.png" alt="">
             <p class="title1 mt10" style="width: auto;"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>

fb0a90c

8d47256

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

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

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


             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           <div class="imgGroup  mt20">
             <img src="../../../../resources/img/img115_58s.png" alt="">
             <!-- <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p> -->

fb0a90c

8d47256

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

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

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


             </div>
 
         <div class=" text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           <div class="dragGroup mt40">
             <div class="flex justify-center" style="gap: 20px;">
               <button><img src="../../../../resources/img/img63_37s.png" alt="">

fb0a90c

8d47256

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

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

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


             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
          <div class="flex justify-center ">
            <div class=" flex justify-between align-center" style="width: 50%;">
               <div class="pickGroup left">

fb0a90c

8d47256

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

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

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


             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           <div class="imgGroup"><img src="../../../../resources/img/img124_63s.png" alt=""></div>
           
           <div class="dropGroup flex align-center justify-center mt30">

fb0a90c

8d47256

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

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

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


             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           <div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt=""></div>
           
           <div class="dropGroup flex align-center justify-center mt30">

fb0a90c

8d47256

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

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

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


         </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           <div class="imgGroup ">
             <img src="../../../../resources/img/img109_51s.png" alt="">  
           </div>

fb0a90c

8d47256

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>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </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>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_4')"><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>

8d47256

client/views/pages/main/Chapter/Chapter3_3_1.vue (added)

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

...	...	@@ -0,0 +1,150 @@
	1	+<template>
	2	+ <div id="Chapter1_1" class="content-wrap">
	3	+ <div class="title-box mb25 flex align-center mt40">
	4	+ <span class="title mr40">1. Hello WORLD</span>
	5	+ <span class="subtitle">my name is dd</span>
	6	+ </div>
	7	+ <div class="flex justify-between align-center">
	8	+ <div class="pre-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">step3.</p>
	11	+ <div class="flex align-center mb30">
	12	+ <p class="subtitle2 mr20">1. see the picture</p>
	13	+ <button><img src="../../../../resources/img/btn10_s.png" alt="">
	14	+ </button>
	15	+ </div>
	16	+
	17	+ <div class="text-ct">
	18	+ <div class="time-hint">
	19	+ <button class="hint-btn">HINT</button>
	20	+ <div class="time-bg mt20">
	21	+ <div>
	22	+ <div class="time">
	23	+ <p class="second">{{ timer }}</p>
	24	+ <p class="text">sec</p>
	25	+ </div>
	26	+ </div>
	27	+ </div>
	28	+ </div>
	29	+ <div class="imgGroup ">
	30	+ <img src="../../../../resources/img/img109_51s.png" alt="">
	31	+ </div>
	32	+
	33	+ <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
	34	+ <article style="gap: 60px; bottom: 159px;
	35	+ left: 242px;">
	36	+ <div class="flex align-center">
	37	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	38	+ <p>1</p>
	39	+ </button>
	40	+ <img src="../../../../resources/img/img122_62s.png" alt="">
	41	+ </div>
	42	+ </article>
	43	+ <article style="gap: 60px; bottom: 159px;
	44	+ right: 559px;">
	45	+ <div class="flex align-center">
	46	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	47	+ <p>2</p>
	48	+ </button>
	49	+ <img src="../../../../resources/img/img123_62s.png" alt="">
	50	+ </div>
	51	+ </article>
	52	+ <article style="gap: 60px; bottom: 159px;
	53	+ right: 559px;">
	54	+ <div class="flex align-center">
	55	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	56	+ <p>3</p>
	57	+ </button>
	58	+ <img src="../../../../resources/img/img121_62s.png" alt="">
	59	+ </div>
	60	+ </article>
	61	+ </div>
	62	+ </div>
	63	+ </div>
	64	+ <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt=""></div>
	65	+ </div>
	66	+ </div>
	67	+</template>
	68	+
	69	+<script>
	70	+export default {
	71	+ data() {
	72	+ return {
	73	+ timer: '00'
	74	+ }
	75	+ },
	76	+ methods: {
	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	+ }
	93	+ },
	94	+ watch: {
	95	+
	96	+ },
	97	+ computed: {
	98	+
	99	+ },
	100	+ components: {
	101	+ },
	102	+ mounted() {
	103	+
	104	+ }
	105	+}
	106	+</script>
	107	+<style scoped>
	108	+.inputbox {
	109	+ font-size: 38px;
	110	+ font-family: 'Pretendard-ExtraBold';
	111	+}
	112	+
	113	+.imgGroup button {
	114	+ position: relative;
	115	+}
	116	+
	117	+.imgGroup button p,
	118	+.textbox p {
	119	+ position: absolute;
	120	+ top: 50%;
	121	+ left: 50%;
	122	+ transform: translate(-50%, -50%);
	123	+ width: fit-content;
	124	+ height: fit-content;
	125	+ background: #ffffffb8;
	126	+ border-radius: 5px;
	127	+ padding: 10px;
	128	+ font-size: 48px;
	129	+ font-family: 'ONEMobilePOP';
	130	+}
	131	+
	132	+.pickGroup p {
	133	+ font-size: 34px;
	134	+ font-weight: bold;
	135	+}
	136	+
	137	+.pickGroup button {
	138	+ position: relative;
	139	+ margin-right: 30px;
	140	+}
	141	+
	142	+.pickGroup button p {
	143	+ font-size: 34px;
	144	+ color: #c6c6c6;
	145	+ position: absolute;
	146	+ top: 50%;
	147	+ left: 50%;
	148	+ transform: translate(-50%, -50%);
	149	+}
	150	+</style>(파일 끝에 줄바꿈 문자 없음)

fb0a90c

8d47256

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

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

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


       <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_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">

             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           <div class="pickGroup flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
             <article style="gap: 60px; bottom: 159px;
     left: 242px;">

fb0a90c

8d47256

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>
 
         <div class=" text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           <div class="imgGroup ">
             <img src="../../../../resources/img/img125_64s.png" alt="">  
           </div>

fb0a90c

8d47256

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

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

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


                <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button>
             </div>
-            <div class="time-bg">
-               <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>
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
                   </div>
-               </div>
-            </div>
+                </div>
+              </div>
+         </div>
             
             <div class="imgGroup">
                <img src="../../../../resources/img/img114_57s.png" alt="">

fb0a90c

8d47256

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

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

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


             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           
-          <div class="pickGroup flex align-center justify-between" style="gap: 100px;">
+          <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px;">
             <p>1. 문제</p>
             <div class="flex justify-center" style="gap: 60px;">
               <article >

fb0a90c

8d47256

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

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

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


             </div>
   
           <div class="text-ct">
-            <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+            <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>
+         </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="답을 입력하세요.">

fb0a90c

8d47256

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

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

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


             </div>
 
         <div class="mt50 text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <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>
+         </div>
           <div class="imgGroup  mt50">
             <img src="../../../../resources/img/img115_58s.png" alt="">
             <div class=" mt50">

...	...	@@ -500,6 +500,20 @@
500	500	.complete-wrap img{width: inherit;}
501	501	.complete-wrap .photo{cursor: pointer; width: 200px; height: 130px; }
502	502	/* 챕터 */
	503	+.time-hint{
	504	+ position: absolute;
	505	+ top: 50px;
	506	+ right: 50px;
	507	+ text-align: center;
	508	+}
	509	+.hint-btn{
	510	+ background-image: url('../img/btn01.png');
	511	+ width: 110px;
	512	+ height: 45px;
	513	+ padding: 5px 20px;
	514	+ font-size: 28px;
	515	+ font-family: 'ONEMobilePOP';
	516	+}
503	517	.content-wrap {
504	518	margin: 90px 60px 0 60px;
505	519
...	...	@@ -741,9 +755,6 @@
741	755	width: 560px;
742	756	}
743	757	.time-bg{
744		- position: absolute;
745		- top: 50px;
746		- right: 50px;
747	758	text-align: center;
748	759	font-family: 'neodgm'; background-image: url('../img/img55_s.png'); width: 110px; height: 128px;}
749	760	.time-bg > div{position: relative;}

...	...	@@ -35,6 +35,7 @@
35	35	import Chapter3_1 from "./main/Chapter/Chapter3_1.vue";
36	36	import Chapter3_2 from "./main/Chapter/Chapter3_2.vue";
37	37	import Chapter3_3 from "./main/Chapter/Chapter3_3.vue";
	38	+import Chapter3_3_1 from "./main/Chapter/Chapter3_3_1.vue";
38	39	import Chapter3_4 from "./main/Chapter/Chapter3_4.vue";
39	40	import Chapter3_5 from "./main/Chapter/Chapter3_5.vue";
40	41	import Chapter3_6 from "./main/Chapter/Chapter3_6.vue";
...	...	@@ -146,6 +147,7 @@
146	147	{ path: '/Chapter3_1.page', name: 'Chapter3_1', component: Chapter3_1 },
147	148	{ path: '/Chapter3_2.page', name: 'Chapter3_2', component: Chapter3_2 },
148	149	{ path: '/Chapter3_3.page', name: 'Chapter3_3', component: Chapter3_3 },
	150	+ { path: '/Chapter3_3_1.page', name: 'Chapter3_3_1', component: Chapter3_3_1 },
149	151	{ path: '/Chapter3_4.page', name: 'Chapter3_4', component: Chapter3_4 },
150	152	{ path: '/Chapter3_5.page', name: 'Chapter3_5', component: Chapter3_5 },
151	153	{ path: '/Chapter3_6.page', name: 'Chapter3_6', component: Chapter3_6 },

...	...	@@ -15,14 +15,17 @@
15	15	</div>
16	16
17	17	<div class="flex align-center justify-center" style="gap: 113px;">
18		- <div class="time-bg">
19		- <div>
20		- <div class="time">
21		- <p class="second">{{ timer }}</p>
22		- <p class="text">sec</p>
	18	+ <div class="time-hint">
	19	+ <button class="hint-btn">HINT</button>
	20	+ <div class="time-bg mt20">
	21	+ <div>
	22	+ <div class="time">
	23	+ <p class="second">{{ timer }}</p>
	24	+ <p class="text">sec</p>
	25	+ </div>
23	26	</div>
24	27	</div>
25		- </div>
	28	+ </div>
26	29	<div class="pickGroup ">
27	30	<div class="flex" style="gap: 250px;">
28	31	<article class="text-ct">
...	...	@@ -108,7 +111,6 @@
108	111
109	112	.pickGroup button {
110	113	position: relative;
111		- margin-right: 30px;
112	114	}
113	115
114	116	.pickGroup button p {

...	...	@@ -15,14 +15,17 @@
15	15	</div>
16	16
17	17	<div class="text-ct">
18		- <div class="time-bg">
19		- <div>
20		- <div class="time">
21		- <p class="second">{{ timer }}</p>
22		- <p class="text">sec</p>
	18	+ <div class="time-hint">
	19	+ <button class="hint-btn">HINT</button>
	20	+ <div class="time-bg mt20">
	21	+ <div>
	22	+ <div class="time">
	23	+ <p class="second">{{ timer }}</p>
	24	+ <p class="text">sec</p>
	25	+ </div>
	26	+ </div>
23	27	</div>
24		- </div>
25		- </div>
	28	+ </div>
26	29	<div class="imgGroup mt20">
27	30	<img src="../../../../resources/img/img116_59s.png" alt="">
28	31	<p class="title1 mt10" style="width: auto;"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>

...	...	@@ -15,14 +15,17 @@
15	15	</div>
16	16
17	17	<div class=" text-ct">
18		- <div class="time-bg">
19		- <div>
20		- <div class="time">
21		- <p class="second">{{ timer }}</p>
22		- <p class="text">sec</p>
	18	+ <div class="time-hint">
	19	+ <button class="hint-btn">HINT</button>
	20	+ <div class="time-bg mt20">
	21	+ <div>
	22	+ <div class="time">
	23	+ <p class="second">{{ timer }}</p>
	24	+ <p class="text">sec</p>
	25	+ </div>
	26	+ </div>
23	27	</div>
24		- </div>
25		- </div>
	28	+ </div>
26	29	<div class="dragGroup mt40">
27	30	<div class="flex justify-center" style="gap: 20px;">
28	31	<button><img src="../../../../resources/img/img63_37s.png" alt="">

...	...	@@ -13,14 +13,17 @@
13	13	</div>
14	14
15	15	<div class="text-ct">
16		- <div class="time-bg">
17		- <div>
18		- <div class="time">
19		- <p class="second">{{ timer }}</p>
20		- <p class="text">sec</p>
	16	+ <div class="time-hint">
	17	+ <button class="hint-btn">HINT</button>
	18	+ <div class="time-bg mt20">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
21	25	</div>
22		- </div>
23		- </div>
	26	+ </div>
24	27	<div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
25	28	<article style="gap: 60px; bottom: 159px;
26	29	left: 242px;">
...	...	@@ -43,7 +46,7 @@
43	46	</div>
44	47	</div>
45	48	</div>
46		- <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt=""></div>
	49	+ <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt=""></div>
47	50	</div>
48	51	</div>
49	52	</template>

...	...	@@ -5,7 +5,7 @@
5	5	<span class="subtitle">my name is dd</span>
6	6	</div>
7	7	<div class="flex justify-between align-center">
8		- <div class="pre-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt=""></div>
	8	+ <div class="pre-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/left.png" alt=""></div>
9	9	<div class="content title-box">
10	10	<p class="title mt25 title-bg">step3.</p>
11	11	<div class="flex align-center mb30">
...	...	@@ -15,14 +15,17 @@
15	15	</div>
16	16
17	17	<div class="text-ct">
18		- <div class="time-bg">
19		- <div>
20		- <div class="time">
21		- <p class="second">{{ timer }}</p>
22		- <p class="text">sec</p>
	18	+ <div class="time-hint">
	19	+ <button class="hint-btn">HINT</button>
	20	+ <div class="time-bg mt20">
	21	+ <div>
	22	+ <div class="time">
	23	+ <p class="second">{{ timer }}</p>
	24	+ <p class="text">sec</p>
	25	+ </div>
	26	+ </div>
23	27	</div>
24		- </div>
25		- </div>
	28	+ </div>
26	29	<div class="pickGroup flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
27	30	<article style="gap: 60px; bottom: 159px;
28	31	left: 242px;">

...	...	@@ -14,14 +14,17 @@
14	14	<button><img src="../../../../resources/img/btn10_s.png" alt="">
15	15	</button>
16	16	</div>
17		- <div class="time-bg">
18		- <div>
	17	+ <div class="time-hint">
	18	+ <button class="hint-btn">HINT</button>
	19	+ <div class="time-bg mt20">
	20	+ <div>
19	21	<div class="time">
20		- <p class="second">{{ timer }}</p>
21		- <p class="text">sec</p>
	22	+ <p class="second">{{ timer }}</p>
	23	+ <p class="text">sec</p>
22	24	</div>
23		- </div>
24		- </div>
	25	+ </div>
	26	+ </div>
	27	+ </div>
25	28
26	29	<div class="imgGroup">
27	30	<img src="../../../../resources/img/img114_57s.png" alt="">

...	...	@@ -15,16 +15,19 @@
15	15	</div>
16	16
17	17	<div class="text-ct">
18		- <div class="time-bg">
19		- <div>
20		- <div class="time">
21		- <p class="second">{{ timer }}</p>
22		- <p class="text">sec</p>
	18	+ <div class="time-hint">
	19	+ <button class="hint-btn">HINT</button>
	20	+ <div class="time-bg mt20">
	21	+ <div>
	22	+ <div class="time">
	23	+ <p class="second">{{ timer }}</p>
	24	+ <p class="text">sec</p>
	25	+ </div>
	26	+ </div>
23	27	</div>
24		- </div>
25		- </div>
	28	+ </div>
26	29
27		- <div class="pickGroup flex align-center justify-between" style="gap: 100px;">
	30	+ <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px;">
28	31	<p>1. 문제</p>
29	32	<div class="flex justify-center" style="gap: 60px;">
30	33	<article >

...	...	@@ -15,14 +15,17 @@
15	15	</div>
16	16
17	17	<div class="mt50 text-ct">
18		- <div class="time-bg">
19		- <div>
20		- <div class="time">
21		- <p class="second">{{ timer }}</p>
22		- <p class="text">sec</p>
	18	+ <div class="time-hint">
	19	+ <button class="hint-btn">HINT</button>
	20	+ <div class="time-bg mt20">
	21	+ <div>
	22	+ <div class="time">
	23	+ <p class="second">{{ timer }}</p>
	24	+ <p class="text">sec</p>
	25	+ </div>
	26	+ </div>
23	27	</div>
24		- </div>
25		- </div>
	28	+ </div>
26	29	<div class="imgGroup mt50">
27	30	<img src="../../../../resources/img/img115_58s.png" alt="">
28	31	<div class=" mt50">

Delete comment