Commit @a67c9001dae6b1d7a3878b175a452d8ea4805cc9

730242f

a67c900

client/resources/css/common.css

--- client/resources/css/common.css

+++ client/resources/css/common.css


 
 /* text color */
 .orange {
-    color: var(--color-orange);
+    color: #ffa300;
 }
 
 .green {
-    color: var(--color-green);
+    color: #00b029;
 }
 
 .blue {
-    color: var(--color-blue);
+    color:#0042ff;
 }
 
 .red {
-    color: var(--color-red);
+    color: #fe0000;
 }
 
 .cursor {

730242f

a67c900

client/resources/css/reset.css

--- client/resources/css/reset.css

+++ client/resources/css/reset.css


 @charset "utf-8";
-@font-face {
-	font-family: 'Pretendard';
-	font-weight: 100;
-	font-display: swap;
-	src: local('Pretendard Thin'), url(../font/Pretendard-Thin.woff2) format('woff2'), url(../font/Pretendard-Thin.woff) format('woff');
-}
+
 @font-face {
 	font-family: 'Pretendard-Bold';
-	font-weight: 100;
-	font-display: swap;
-	src: local('Pretendard Bold'), url(../font/Pretendard-Bold.woff2) format('woff2'), url(../font/Pretendard-Bold.woff2) format('woff');
+    src: url('../font/Pretendard-Bold.otf') format('opentype');
+}
+@font-face {
+	font-family: 'Pretendard-Black';
+    src: url('../font/Pretendard-Black.otf') format('opentype');
+}
+@font-face {
+	font-family: 'Pretendard-ExtraBold';
+    src: url('../font/Pretendard-ExtraBold.otf') format('opentype');
+}
+@font-face {
+	font-family: 'Pretendard-ExtraLight';
+    src: url('../font/Pretendard-ExtraLight.otf') format('opentype');
+}
+@font-face {
+	font-family: 'Pretendard-Light';
+    src: url('../font/Pretendard-Light.otf') format('opentype');
+}
+@font-face {
+	font-family: 'Pretendard-Medium';
+    src: url('../font/Pretendard-Medium.otf') format('opentype');
 }
 @font-face {
 	font-family: 'Pretendard-Regular';
-	font-weight: 100;
-	font-display: swap;
-	src: local('Pretendard Regular'), url(../font/Pretendard-Regular.woff2) format('woff2'), url(../font/Pretendard-Regular.woff2) format('woff');
+    src: url('../font/Pretendard-Regular.otf') format('opentype');
 }
+@font-face {
+	font-family: 'Pretendard-SemiBold';
+    src: url('../font/Pretendard-SemiBold.otf') format('opentype');
+}
+@font-face {
+	font-family: 'Pretendard-Thin';
+    src: url('../font/Pretendard-Thin.otf') format('opentype');
+}
+
 
 @font-face {
 	font-family: 'ONEMobilePOP';

     src: url('../font/ONEMobilePOPOTF.otf') format('opentype');
 }
 
+@font-face {
+	font-family: 'neodgm';
+    src: url('../font/neodgm.ttf') format('truetype');
+}
 
 * {
     padding: 0;

730242f

a67c900

client/resources/css/style.css

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

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


   display: inline-block;
   font-family: 'ONEMobileOTF-Bold';
 }
-
+.race-wrap .title-box .subtitle2{}
 .race-box {
   width: 1063px;
   height: 516px;

 /* 챕터 */
 .content-wrap {
   width: 1808px;
-  
+
 }
 
 .content-wrap::before {

   position: absolute;
   top: 17px;
 }
-.content-wrap > .title-box{margin-left: 75px;}
+
+.content-wrap>.title-box {
+  margin-left: 75px;
+}
+
 .content p.title-bg {
   width: max-content;
   height: max-content;
-  background: linear-gradient(to right, #eaedf4, #fff);
+  background: linear-gradient(to right, #eaedf4, rgba(255, 255, 255, 0));
   padding: 20px 60px;
   margin-bottom: 30px;
 }
+
+
 .content {
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  position: relative;
+  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
   width: 1670px;
   height: 710px;
   background-color: #fff;

   left: 50%;
   transform: translateY(-50%) translateX(-50%);
 }
-.look-text{position: absolute; right: 60px; bottom: 0;}
-.look-text button{position: relative;}
-.look-text p{    position: absolute;
+
+.look-text {
+  position: absolute;
+  right: 60px;
+  bottom: 0;
+}
+
+.look-text button {
+  position: relative;
+}
+
+.look-text p {
+  position: absolute;
   top: 45%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 28px;
-  
- }
+
+}
 
 /* step1-1 */
-.imgGroup, .textareaGroup{width: 100%; text-align: center;}
-.textareaGroup{margin-top: 40px;}
-.textareaGroup textarea{width: 1460px; height: 200px; background-color: #eff2f7; border-radius: 10px; padding: 30px 40px; 
-  line-height: 30px; font-size: 24px; font-family: 'Pretendard-Regular';}
-  /* step1-1-팝업 */
-  .popup {
-    /* display: none; */
+.imgGroup,
+.textareaGroup {
+  width: 100%;
+  text-align: center;
+}
+
+.textareaGroup {
+  margin-top: 40px;
+}
+
+.textareaGroup textarea {
+  width: 1460px;
+  height: 200px;
+  background-color: #eff2f7;
+  border-radius: 10px;
+  padding: 30px 40px;
+  line-height: 30px;
+  font-size: 24px;
+  font-family: 'Pretendard-Regular';
+}
+
+/* step1-1-팝업 */
+.popup {
+  /* display: none; */
+  position: absolute;
+  width: 355px;
+  height: 327px;
+  background-color: white;
+  border: 3px solid #FFBD14;
+  border-radius: 10px;
+  padding: 20px 40px;
+}
+
+.popup h3 {
+  font-size: 42px;
+}
+
+.popup .yellow-box {
+  width: 33px;
+  height: 33px;
+  color: #FFBA08;
+  background-color: #FFF3D7;
+  padding: 7px;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+
+
+/* step1-2 */
+.readGroup h4{font-size: 20px; margin-bottom: 10px;}
+.readGroup > div{background-image: url('../img/img38_1_s.png'); width: 1282px; height: 492px; padding: 10px;}
+.readGroup .textbox{height: calc(100% - 51px);  overflow-y: auto; padding: 20px; }
+.readGroup .icon {
+  text-align: center;
+}
+
+.readGroup p.read {
+  width: max-content;
+  border-radius: 10px;
+  font-size: 24px;
+  font-family: 'Pretendard-Regular';
+  background-color: #EAEDF4;
+  padding: 10px 20px;
+}
+
+/* step1-3 */
+.listenGroup .title-bg {
+  position: absolute;
+  z-index: 1;
+}
+
+.listenGroup img.bg {
+  position: absolute;
+  top: 0;
+  width: 1670px;
+  height: 710px;
+}
+
+.listenGroup .listen-btn {
+  position: absolute;
+  top: 77%;
+  left: 50%;
+  transform: translateY(-50%) translateX(-50%);
+}
+
+.listenGroup .textbox {
+  position: absolute;
+  top: 45%;
+    left: 31%;
+  transform: translate(-50%, -50%);
+  width: 900px;
+}
+
+.listenGroup .textbox p {
+  font-size: 28px;
+  line-height: 45px;
+}
+
+.listenGroup p.title {
+  font-size: 42px;
+  text-shadow: 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff;
+  -webkit-text-stroke-width: 0px;
+  -webkit-text-stroke-color: #fff;
+  font-family: 'ONEMobilePOP';
+  margin-bottom: 25px;
+}
+
+/* step2 */
+.vocaGroup{width: 1380px;}
+.vocaGroup h3 {
+  font-size: 42px;
+}
+
+.vocaGroup .yellow-box {
+  width: 33px;
+  height: 33px;
+  color: #FFBA08;
+  background-color: #FFF3D7;
+  padding: 7px;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+
+.vocaGroup .imgGroup{width: max-content;}
+
+/* step2_1 */
+.mic-btn{position: relative; background-image: url('../img/img44_s.png'); width: 315px; height: 315px;}
+.mic-btn img{position: absolute;
+  top: 50%;
+    left: 50%;
+  transform: translate(-50%, -50%);}
+  
+  .readGroup section p, .readGroup section input{
+    width: 780px;
+    height: 65px;
+    border-radius: 10px;
+    padding: 20px ;
+    text-align: center;
+    font-size: 28px;
+
+  }
+
+/* step2_2 */
+.popTxt{position: relative; width: fit-content;}
+.popTxt img:last-child{position: absolute; top: 0; left: 0;}
+
+h4{font-size: 20px;}
+
+
+input.speak{background-color: #FFF8E9; border: 0;}
+p.read-ai{border: 3px solid #FFBA08 ;}
+
+/* step2_3 */
+.yellow-box-big {
+  width: 60px;
+  height: 60px;
+  color: #FFBA08;
+  background-color: #FFF3D7;
+  padding: 13px;
+  border-radius: 10px;
+  margin-right: 10px;
+  font-size: 32px;
+}
+.btnGroup{
+  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;}
+  .time{
+    color: #752AFF;
     position: absolute;
-    width: 355px;
-    height: 327px;
-    background-color: white;
-    border: 3px solid #FFBD14;
-    border-radius: 10px;
-    padding: 20px 40px;    
- }
+    top: 70px;
+      left: 50%;
+    transform: translate(-50%, -50%);}
+    .time .second{font-size: 51px;}
+    .time .text{font-size: 21px;}
 
- .popup h3{font-size: 42px;}
- .popup .yellow-box{width: 33px; height: 33px; color: #FFBA08; background-color: #FFF3D7; padding: 7px;
-  border-radius: 5px; margin-right: 10px;}
+/* step2_5 */
+.dropGroup .popTxt{position: relative; width: fit-content;}
+.dropGroup .popTxt img:last-child{position: relative}
+.dropGroup span{
+  font-size: 36px;
+  font-family: 'Pretendard-Bold';
+
+}
+.dropGroup button{position: absolute;}
+.dropGroup button p{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.dragGroup article{position: absolute;}
+.dragGroup button{position: relative;}
+.dragGroup button p{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  
+}
+
+/* step2_11 */
+.inputGroup{
+  position: relative;
+  background-color: #FFF3D7;
+  border: #FFBA08 2px solid; 
+  border-radius: 10px;
+  padding: 15px 20px;
+  min-height: 100px;
+    min-width: 300px;
+    font-size: 28px;
+}
+.inputGroup::before{
+  background-image: url('../img/img89_43s.png');
+  background-size: 58px 20px;
+  width: 58px;
+  height: 20px;
+  content: "";
+  display: block;
+  position: absolute;
+  top: 93px;
+}
+.inputGroup input{border: #CAE5FF 1px solid; border-radius: 5px; padding: 10px 20px; width: min-content;}
 
 
-   /* step1-2 */
-   .readGroup{
+/* step3_2 */
+.inputbox{border: #FFE029 solid 5px; border-radius: 10px; padding: 20px; background-color: #FFF3D7; width: min-content;}
 
-   }
-   .readGroup .icon{text-align: center;}
-   .readGroup p.read{
-    width: max-content;
-    border-radius: 10px;
-    font-size: 24px; font-family: 'Pretendard-Regular'; background-color: #EAEDF4; padding: 10px 20px;}
-
-
-.next-btn, .pre-btn{cursor: pointer;}
+.next-btn,
+.pre-btn {
+  cursor: pointer;
+}
 
 
 

 .underline {
   text-decoration: underline;
 }
-
+.bd-bt{border-bottom:#FFBA08 solid 2px ;     min-width: 66px;
+  width: max-content; }
 hr {
   color: #C6C6C6;
   margin: 10px 0 20px 0;
 }
+em.yellow{color: #FFBA08; font-style: normal;}
+em.yellow-bg{background-color: #FFBA08; font-style: normal;}
+input.yellow-bd{border:#FFBA08 solid 2px ; border-radius: 10px; padding: 20px; font-size: 24px; font-family: 'ONEMobileOTF-Regular';}
 
-.title2 {
-  font-size: 20px;
-  font-weight: bold;
+.blue-c{border: #2948FF solid 5px; width: 30px; height: 30px; border-radius: 50px;}
+
+.title-box .title {
+  font-size: 32px;
+  font-family: 'ONEMobilePOPOTF';
 }
 
 .title1 {
   font-size: 24px;
   font-weight: bold;
 }
-
-.title-box .title {
-  font-size: 32px;
-  font-family: 'ONEMobilePOPOTF';
+.title2 {
+  font-size: 20px;
+  font-weight: bold;
 }
+.title3 {
+  font-size: 64px;
+  font-family: 'Pretendard-ExtraBold';
+}
+.title4 {
+  font-size: 31px;
+  font-weight: bold;
+}
+
+
 
 .title-box .subtitle {
   font-size: 16px;

   border-radius: 20px;
   display: inline-block;
   font-family: 'ONEMobileOTF-Bold';
-}
+}
+
+.title-box .subtitle2{
+  padding-left: 60px;
+  font-size: 28px;
+}
+.subtitle3 {
+  font-size: 42px;
+  font-weight: bold;
+  color: #464749;
+  font-family: 'Pretendard-Light';
+}
+
+.listen-btn{cursor: pointer;}

a67c900

client/resources/font/Pretendard-Black.otf (Binary) (added)

+++ client/resources/font/Pretendard-Black.otf

Binary file is not shown

a67c900

client/resources/font/Pretendard-Bold.otf (Binary) (added)

+++ client/resources/font/Pretendard-Bold.otf

Binary file is not shown

730242f

client/resources/font/Pretendard-Bold.woff2 (Binary) (deleted)

--- client/resources/font/Pretendard-Bold.woff2

Binary file is not shown

a67c900

client/resources/font/Pretendard-ExtraBold.otf (Binary) (added)

+++ client/resources/font/Pretendard-ExtraBold.otf

Binary file is not shown

a67c900

client/resources/font/Pretendard-ExtraLight.otf (Binary) (added)

+++ client/resources/font/Pretendard-ExtraLight.otf

Binary file is not shown

a67c900

client/resources/font/Pretendard-Light.otf (Binary) (added)

+++ client/resources/font/Pretendard-Light.otf

Binary file is not shown

730242f

client/resources/font/Pretendard-Light.woff2 (Binary) (deleted)

--- client/resources/font/Pretendard-Light.woff2

Binary file is not shown

a67c900

client/resources/font/Pretendard-Medium.otf (Binary) (added)

+++ client/resources/font/Pretendard-Medium.otf

Binary file is not shown

730242f

client/resources/font/Pretendard-Medium.woff2 (Binary) (deleted)

--- client/resources/font/Pretendard-Medium.woff2

Binary file is not shown

a67c900

client/resources/font/Pretendard-Regular.otf (Binary) (added)

+++ client/resources/font/Pretendard-Regular.otf

Binary file is not shown

730242f

client/resources/font/Pretendard-Regular.woff2 (Binary) (deleted)

--- client/resources/font/Pretendard-Regular.woff2

Binary file is not shown

a67c900

client/resources/font/Pretendard-SemiBold.otf (Binary) (added)

+++ client/resources/font/Pretendard-SemiBold.otf

Binary file is not shown

a67c900

client/resources/font/Pretendard-Thin.otf (Binary) (added)

+++ client/resources/font/Pretendard-Thin.otf

Binary file is not shown

730242f

client/resources/font/Pretendard-Thin.woff2 (Binary) (deleted)

--- client/resources/font/Pretendard-Thin.woff2

Binary file is not shown

a67c900

client/resources/font/neodgm.ttf (Binary) (added)

+++ client/resources/font/neodgm.ttf

Binary file is not shown

a67c900

client/resources/img/31img40_s.png (Binary) (added)

+++ client/resources/img/31img40_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn10_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn11_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn12_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn13_42s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn13_48s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn14_50s_click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn14_50s_hover.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn14_50s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn15_60s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn16_63s_hoverl.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn16_63s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn17_63s_hover.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn17_63s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn18_64s_click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn18_64s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn18_65s_click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn18_65s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn19_74s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn20_74s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn20_75s_click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn20_75s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn21_75s_click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn21_75s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn22_75s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/btn23_76s_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img03_01.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img100_45s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img101_45s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img102_45s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img103_45s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img104_46s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img105_46s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img106_48s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img107_50s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img108_50s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img109_51s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img110_54s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img111_56s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img112_56s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img113_57s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img114_57s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img115_58s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img116_59s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img117_61s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img118_61s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img119_61s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img120_61s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img121_62s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img122_62s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img123_62s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img124_63s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img125_64s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img126_65s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img127_65s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img128_65s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img129_66s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img129_69s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img130_66s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img131_66s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img132_70s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img132_71s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img133_70s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img134_70s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img135_71s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img136_71s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img137_71s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img138_72s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img139_72s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img140_747s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img141_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img142_76s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img143_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img143_76s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img144_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img145_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img146_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img147_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img148_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img149_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img150_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img151_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img152_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img153_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img154_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img155_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img156_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img157_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img158_75s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img159_42s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img29_s_01.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img30_s_01.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img31_s_01.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img38_1_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img40_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img41_31s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img41_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img42_31s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img42_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img43_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img44_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img45_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img46_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img47_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img48_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img49_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img49_s_1.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img49_s_2.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img49_s_3.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img49_s_4.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img50_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img50_s_1.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img50_s_2.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img50_s_3.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img50_s_4.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img51_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img52_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_10_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_1_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_2_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_3_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_4_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_5_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_6_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_7_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_8_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_9_35s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img53_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img54_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img55_s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img56_36s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img57_36s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img58_36s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img59_36s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img60_36s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_1.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_1_Click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_1_noraml.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_2.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_2_Click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_2_noraml.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_2_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_3.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_3_Click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_3_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_4.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_43_Click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_43_normal.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img61_36s_4_Click.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img62_36s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img62_36s_1.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img63_37s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img63_37s_1.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img63_37s_2.png

Binary file is not shown

a67c900

client/resources/img/img63_37s_수정.png (Binary) (added)

+++ client/resources/img/img63_37s_수정.png

Binary file is not shown

a67c900

client/resources/img/img63_s37/78img_s37_01.png (Binary) (added)

+++ client/resources/img/img63_s37/78img_s37_01.png

Binary file is not shown

a67c900

client/resources/img/img63_s37/78img_s37_02.png (Binary) (added)

+++ client/resources/img/img63_s37/78img_s37_02.png

Binary file is not shown

a67c900

client/resources/img/img63_s37/78img_s37_03.png (Binary) (added)

+++ client/resources/img/img63_s37/78img_s37_03.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img64_37s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img65_37s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img66_38s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img66_38s_1.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img66_38s_1_color.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img66_38s_2.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img66_38s_2_color.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img66_38s_3.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img66_38s_3_color.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img67_38s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img68_38s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img69_38s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img69_38s_1.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img70_39s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img71_39s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img72_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img72_41s_1.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img73_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img74_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img75_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img76_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img77_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img78_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img79_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img80_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img81_41s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img82_42s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img83_42s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img84_42s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img85_42s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img86_42s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img87_43s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img88_43s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img89_43s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img90_44s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img91_44s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img92_44s.png

Binary file is not shown

a67c900

client/resources/img/img93.5_44s.png (Binary) (added)

+++ client/resources/img/img93.5_44s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img93_44s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img94_44s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img95_44s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img96_44s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img97_44s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img98_44s.png

Binary file is not shown

a67c900

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

+++ client/resources/img/img99_45s.png

Binary file is not shown

730242f

a67c900

client/views/layout/Side.vue

--- client/views/layout/Side.vue

+++ client/views/layout/Side.vue


         <div class="profile mb30">
             <div class="flex align-start">
                 <img src="../../resources/img/img16_s.png" alt="">
-                <div class="ml25">
+                <div class="ml25" style="width: 100%;">
                     <p class="name mb10">학생이름</p>
                     <p class="mb5">xx중학교 3학년 x반</p>
                     <progress-bar :progress="progress"></progress-bar>

730242f

a67c900

client/views/pages/AppRouter.js

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

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

...	...	@@ -11,7 +11,36 @@
11	11	import Chapter1_2 from "./main/Chapter/Chapter1_2.vue";
12	12	import Chapter1_3 from "./main/Chapter/Chapter1_3.vue";
13	13	import Chapter2 from "./main/Chapter/Chapter2.vue";
	14	+import Chapter2_1 from "./main/Chapter/Chapter2_1.vue";
	15	+import Chapter2_2 from "./main/Chapter/Chapter2_2.vue";
	16	+import Chapter2_3 from "./main/Chapter/Chapter2_3.vue";
	17	+import Chapter2_4 from "./main/Chapter/Chapter2_4.vue";
	18	+import Chapter2_5 from "./main/Chapter/Chapter2_5.vue";
	19	+import Chapter2_6 from "./main/Chapter/Chapter2_6.vue";
	20	+import Chapter2_7 from "./main/Chapter/Chapter2_7.vue";
	21	+import Chapter2_8 from "./main/Chapter/Chapter2_8.vue";
	22	+import Chapter2_9 from "./main/Chapter/Chapter2_9.vue";
	23	+import Chapter2_10 from "./main/Chapter/Chapter2_10.vue";
	24	+import Chapter2_11 from "./main/Chapter/Chapter2_11.vue";
	25	+import Chapter2_12 from "./main/Chapter/Chapter2_12.vue";
	26	+import Chapter2_13 from "./main/Chapter/Chapter2_13.vue";
14	27	import Chapter3 from "./main/Chapter/Chapter3.vue";
	28	+import Chapter3_1 from "./main/Chapter/Chapter3_1.vue";
	29	+import Chapter3_2 from "./main/Chapter/Chapter3_2.vue";
	30	+import Chapter3_3 from "./main/Chapter/Chapter3_3.vue";
	31	+import Chapter3_4 from "./main/Chapter/Chapter3_4.vue";
	32	+import Chapter3_5 from "./main/Chapter/Chapter3_5.vue";
	33	+import Chapter3_6 from "./main/Chapter/Chapter3_6.vue";
	34	+import Chapter3_7 from "./main/Chapter/Chapter3_7.vue";
	35	+import Chapter3_8 from "./main/Chapter/Chapter3_8.vue";
	36	+import Chapter3_9 from "./main/Chapter/Chapter3_9.vue";
	37	+import Chapter3_10 from "./main/Chapter/Chapter3_10.vue";
	38	+import Chapter3_11 from "./main/Chapter/Chapter3_11.vue";
	39	+import Chapter3_12 from "./main/Chapter/Chapter3_12.vue";
	40	+import Chapter3_13 from "./main/Chapter/Chapter3_13.vue";
	41	+import Chapter3_14 from "./main/Chapter/Chapter3_14.vue";
	42	+import Chapter3_15 from "./main/Chapter/Chapter3_15.vue";
	43	+import Chapter3_16 from "./main/Chapter/Chapter3_16.vue";
15	44	import Chapter4 from "./main/Chapter/Chapter4.vue";
16	45	import Chapter5 from "./main/Chapter/Chapter5.vue";
17	46	import Chapter6 from "./main/Chapter/Chapter6.vue";
...	...	@@ -26,43 +55,76 @@
26	55	import Main_t from "./teacher/Main_t.vue";
27	56
28	57	const routes = [
29		- { path: '/login.page', name: 'login', component: login},
	58	+ { path: '/login.page', name: 'login', component: login },
30	59	// { path: '/App.page', name: 'App', component: App,
31	60	// children:[
32		-
33		-
	61	+
	62	+
34	63	// ]
35	64	// },
36	65	// { path: '/Main.page', name: 'Main', component: Main},
37	66	/* 학생 */
38		- { path: '/',
39		- name: 'Main',
40		- component: Main,
41		- children:[
42		- { path: '/Dashboard.page', name: 'Dashboard', component: Dashboard},
43		- { path: '/MyPage.page', name: 'MyPage', component: MyPage},
44		- { path: '/MyPlan.page', name: 'MyPlan', component: MyPlan},
45		- ]
46		-},
47		-{ path: '/Chapter1.page', name: 'Chapter1', component: Chapter1},
48		-{ path: '/Chapter1_1.page', name: 'Chapter1_1', component: Chapter1_1},
49		-{ path: '/Chapter1_2.page', name: 'Chapter1_2', component: Chapter1_2},
50		-{ path: '/Chapter1_3.page', name: 'Chapter1_3', component: Chapter1_3},
51		- { path: '/Chapter2.page', name: 'Chapter2', component: Chapter2},
52		- { path: '/Chapter3.page', name: 'Chapter3', component: Chapter3},
53		- { path: '/Chapter4.page', name: 'Chapter4', component: Chapter4},
54		- { path: '/Chapter5.page', name: 'Chapter5', component: Chapter5},
55		- { path: '/Chapter6.page', name: 'Chapter6', component: Chapter6},
56		- { path: '/Chapter7.page', name: 'Chapter7', component: Chapter7},
57		- { path: '/Chapter8.page', name: 'Chapter8', component: Chapter8},
58		- { path: '/Chapter9.page', name: 'Chapter9', component: Chapter9},
59		- { path: '/Chapter10.page', name: 'Chapter10', component: Chapter10},
60		- { path: '/Chapter11.page', name: 'Chapter11', component: Chapter11},
	67	+ {
	68	+ path: '/',
	69	+ name: 'Main',
	70	+ component: Main,
	71	+ children: [
	72	+ { path: '/Dashboard.page', name: 'Dashboard', component: Dashboard },
	73	+ { path: '/MyPage.page', name: 'MyPage', component: MyPage },
	74	+ { path: '/MyPlan.page', name: 'MyPlan', component: MyPlan },
	75	+ ]
	76	+ },
	77	+ { path: '/Chapter1.page', name: 'Chapter1', component: Chapter1 },
	78	+ { path: '/Chapter1_1.page', name: 'Chapter1_1', component: Chapter1_1 },
	79	+ { path: '/Chapter1_2.page', name: 'Chapter1_2', component: Chapter1_2 },
	80	+ { path: '/Chapter1_3.page', name: 'Chapter1_3', component: Chapter1_3 },
61	81
62		- /* 부모님 */
63		- { path: '/Main_p.page', name: 'Main_p', component: Main_p},
64		- /* 선생님 */
65		- { path: '/Main_t.page', name: 'Main_t', component: Main_t},
	82	+ { path: '/Chapter2.page', name: 'Chapter2', component: Chapter2 },
	83	+ { path: '/Chapter2_1.page', name: 'Chapter2_1', component: Chapter2_1 },
	84	+ { path: '/Chapter2_2.page', name: 'Chapter2_2', component: Chapter2_2 },
	85	+ { path: '/Chapter2_3.page', name: 'Chapter2_3', component: Chapter2_3 },
	86	+ { path: '/Chapter2_4.page', name: 'Chapter2_4', component: Chapter2_4 },
	87	+ { path: '/Chapter2_5.page', name: 'Chapter2_5', component: Chapter2_5 },
	88	+ { path: '/Chapter2_6.page', name: 'Chapter2_6', component: Chapter2_6 },
	89	+ { path: '/Chapter2_7.page', name: 'Chapter2_7', component: Chapter2_7 },
	90	+ { path: '/Chapter2_8.page', name: 'Chapter2_8', component: Chapter2_8 },
	91	+ { path: '/Chapter2_9.page', name: 'Chapter2_9', component: Chapter2_9 },
	92	+ { path: '/Chapter2_10.page', name: 'Chapter2_10', component: Chapter2_10 },
	93	+ { path: '/Chapter2_11.page', name: 'Chapter2_11', component: Chapter2_11 },
	94	+ { path: '/Chapter2_12.page', name: 'Chapter2_12', component: Chapter2_12 },
	95	+ { path: '/Chapter2_13.page', name: 'Chapter2_13', component: Chapter2_13 },
	96	+
	97	+ { path: '/Chapter3.page', name: 'Chapter3', component: Chapter3 },
	98	+ { path: '/Chapter3_1.page', name: 'Chapter3_1', component: Chapter3_1 },
	99	+ { path: '/Chapter3_2.page', name: 'Chapter3_2', component: Chapter3_2 },
	100	+ { path: '/Chapter3_3.page', name: 'Chapter3_3', component: Chapter3_3 },
	101	+ { path: '/Chapter3_4.page', name: 'Chapter3_4', component: Chapter3_4 },
	102	+ { path: '/Chapter3_5.page', name: 'Chapter3_5', component: Chapter3_5 },
	103	+ { path: '/Chapter3_6.page', name: 'Chapter3_6', component: Chapter3_6 },
	104	+ { path: '/Chapter3_7.page', name: 'Chapter3_7', component: Chapter3_7 },
	105	+ { path: '/Chapter3_8.page', name: 'Chapter3_8', component: Chapter3_8 },
	106	+ { path: '/Chapter3_9.page', name: 'Chapter3_9', component: Chapter3_9 },
	107	+ { path: '/Chapter3_10.page', name: 'Chapter3_10', component: Chapter3_10 },
	108	+ { path: '/Chapter3_11.page', name: 'Chapter3_11', component: Chapter3_11 },
	109	+ { path: '/Chapter3_12.page', name: 'Chapter3_12', component: Chapter3_12 },
	110	+ { path: '/Chapter3_13.page', name: 'Chapter3_13', component: Chapter3_13 },
	111	+ { path: '/Chapter3_14.page', name: 'Chapter3_14', component: Chapter3_14 },
	112	+ { path: '/Chapter3_15.page', name: 'Chapter3_15', component: Chapter3_15 },
	113	+ { path: '/Chapter3_16.page', name: 'Chapter3_16', component: Chapter3_16 },
	114	+
	115	+ { path: '/Chapter4.page', name: 'Chapter4', component: Chapter4 },
	116	+ { path: '/Chapter5.page', name: 'Chapter5', component: Chapter5 },
	117	+ { path: '/Chapter6.page', name: 'Chapter6', component: Chapter6 },
	118	+ { path: '/Chapter7.page', name: 'Chapter7', component: Chapter7 },
	119	+ { path: '/Chapter8.page', name: 'Chapter8', component: Chapter8 },
	120	+ { path: '/Chapter9.page', name: 'Chapter9', component: Chapter9 },
	121	+ { path: '/Chapter10.page', name: 'Chapter10', component: Chapter10 },
	122	+ { path: '/Chapter11.page', name: 'Chapter11', component: Chapter11 },
	123	+
	124	+ /* 부모님 */
	125	+ { path: '/Main_p.page', name: 'Main_p', component: Main_p },
	126	+ /* 선생님 */
	127	+ { path: '/Main_t.page', name: 'Main_t', component: Main_t },
66	128	];
67	129
68	130	const AppRouter = createRouter({

730242f

a67c900

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

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

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


       <div class="pre-btn"  @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt=""></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">step1. Hello WORLD</p>
-<h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
-        <div class="readGroup">
-          <article class="flex align-start mb10">
-            <div class="icon mr40">
-              <img src="../../../../resources/img/img37_s.png" alt="">
-              <p class="name">발화좌</p>
+        <div class="flex justify-center">
+          <div class="readGroup">
+            <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
+            <div>
+              <div class="textbox">
+                <article class="flex align-start mb10">
+                  <div class="icon mr40">
+                    <img src="../../../../resources/img/img37_s.png" alt="">
+                    <p class="name">발화좌</p>
+                  </div>
+                  <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
+                </article>
+                <article class="flex align-start mb10 justify-end">
+                  <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
+                  <div class="icon ">
+                    <img src="../../../../resources/img/img37_s.png" alt="">
+                    <p class="name">발화좌</p>
+                  </div>
+                </article>
+                <article class="flex align-start mb10">
+                  <div class="icon mr40">
+                    <img src="../../../../resources/img/img37_s.png" alt="">
+                    <p class="name">발화좌</p>
+                  </div>
+                  <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
+                </article>
+                <article class="flex align-start mb10 justify-end">
+                  <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
+                  <div class="icon ">
+                    <img src="../../../../resources/img/img37_s.png" alt="">
+                    <p class="name">발화좌</p>
+                  </div>
+                </article>
+              </div>
             </div>
-            <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
-          </article>
-          <article class="flex align-start mb10 justify-end">
-            <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
-            <div class="icon ">
-              <img src="../../../../resources/img/img37_s.png" alt="">
-              <p class="name">발화좌</p>
-            </div>
-          </article>
-          <article class="flex align-start mb10">
-            <div class="icon mr40">
-              <img src="../../../../resources/img/img37_s.png" alt="">
-              <p class="name">발화좌</p>
-            </div>
-            <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
-          </article>
-          <article class="flex align-start mb10 justify-end">
-            <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
-            <div class="icon ">
-              <img src="../../../../resources/img/img37_s.png" alt="">
-              <p class="name">발화좌</p>
-            </div>
-          </article>
-
+  
+          </div>
         </div>
       </div>
       <div class="next-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/right.png" alt=""></div>

730242f

a67c900

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

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

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


         <div class="flex justify-between align-center">
             <div class="pre-btn"  @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/left.png" alt=""></div>
             <div class="content title-box">
-                <p class="title mt25 title-bg">step1. Hello WORLD</p>
-                <div class="videoCon">
-                    <img src="../../../../resources/img/img34_s.png" data-num="1">
-                    <button class="videoStart" data-video="1" tabindex="0" aria-label="동영상 재생"><img src="../../../../resources/img/btn09_s.png"
+                <div class="listenGroup">
+                    <p class="title mt25 title-bg">step1. Hello WORLD</p>
+                    <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1">
+                    <div class="textbox">
+                        <p class="title">The Eiffel Tower and the statue of Lierbty</p>
+                        <p>The Eiffel Tower is a symbol of Paris, France. People call it the "Iron Lady." It was built for the 1889 World's Fair in Paris. It's 320 meters tall. There are 1,665 steps to the top. You can walk or take elevators to the top.</p>
+                    </div>
+                    <button class="listen-btn" data-video="1" tabindex="0" aria-label="재생"><img src="../../../../resources/img/btn09_s.png"
                             data-num="1"></button>
-                           <div class="look-text"> <button ><img src="../../../../resources/img/btn08_s.png" alt=""><p>지문 보기</p></button></div>
                 </div>
             </div>
-            <div class="next-btn"  @click="goToPage('Chapter1_4')"><img src="../../../../resources/img/right.png" alt=""></div>
+            <div class="next-btn"  @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div>
         </div>
     </div>
 </template>

730242f

a67c900

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

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

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

...	...	@@ -1,0 +1,105 @@
	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('Dashboard')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	11	+
	12	+ <div class="flex justify-center">
	13	+ <div class="vocaGroup">
	14	+ <div class="flex justify-between mb80">
	15	+ <article class="flex align-center">
	16	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
	17	+ <div class="flex align-start">
	18	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
	19	+ data-num="1"></button>
	20	+ <div>
	21	+ <h3>sidewalk</h3>
	22	+ <div class="flex align-center mt10">
	23	+ <p class="yellow-box">명</p>
	24	+ <span class="title1">보도</span>
	25	+ </div>
	26	+ </div>
	27	+ </div>
	28	+ </article>
	29	+ <article class="flex align-center">
	30	+ <div class="imgGroup mr30"><img src="../../../../resources/img/31img40_s.png" data-num="1"></div>
	31	+ <div class="flex align-start">
	32	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
	33	+ data-num="1"></button>
	34	+ <div>
	35	+ <h3>sidewalk</h3>
	36	+ <div class="flex align-center mt10">
	37	+ <p class="yellow-box">명</p>
	38	+ <span class="title1">보도</span>
	39	+ </div>
	40	+ </div>
	41	+ </div>
	42	+ </article>
	43	+ </div>
	44	+ <div class="flex justify-between">
	45	+ <article class="flex align-center">
	46	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img41_s.png" data-num="1"></div>
	47	+ <div class="flex align-start">
	48	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
	49	+ data-num="1"></button>
	50	+ <div>
	51	+ <h3>sidewalk</h3>
	52	+ <div class="flex align-center mt10">
	53	+ <p class="yellow-box">명</p>
	54	+ <span class="title1">보도</span>
	55	+ </div>
	56	+ </div>
	57	+ </div>
	58	+ </article>
	59	+ <article class="flex align-center">
	60	+ <div class="imgGroup mr30"><img src="../../../../resources/img/img40_s.png" data-num="1"></div>
	61	+ <div class="flex align-start">
	62	+ <button class="listen-btn mr30" data-video="1" tabindex="0" aria-label="음성 재생"><img src="../../../../resources/img/btn10_s.png"
	63	+ data-num="1"></button>
	64	+ <div>
	65	+ <h3>sidewalk</h3>
	66	+ <div class="flex align-center mt10">
	67	+ <p class="yellow-box">명</p>
	68	+ <span class="title1">보도</span>
	69	+ </div>
	70	+ </div>
	71	+ </div>
	72	+ </article>
	73	+ </div>
	74	+ </div>
	75	+ </div>
	76	+ </div>
	77	+ <div class="next-btn" @click="goToPage('Chapter2_1')"><img src="../../../../resources/img/right.png" alt=""></div>
	78	+ </div>
	79	+ </div>
	80	+ </template>
	81	+
	82	+ <script>
	83	+ export default {
	84	+ data() {
	85	+ return {
	86	+ }
	87	+ },
	88	+ methods: {
	89	+ goToPage(page) {
	90	+ this.$router.push({ name: page });
	91	+ }
	92	+ },
	93	+ watch: {
	94	+
	95	+ },
	96	+ computed: {
	97	+
	98	+ },
	99	+ components: {
	100	+ },
	101	+ mounted() {
	102	+
	103	+ }
	104	+ }
	105	+ </script> (파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,59 @@
	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('Chapter2')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt40 ml50">오늘 배웠던 단어를 말하고 생성된 예문을 따라 읽어보세요!</p>
	11	+
	12	+ <div class="flex justify-center mt50">
	13	+ <div class="readGroup">
	14	+ <section >
	15	+ <div class="imgGroup flex justify-center">
	16	+ <div class="mic-btn">
	17	+ <img src="../../../../resources/img/btn11_s.png" alt="">
	18	+ </div>
	19	+
	20	+ </div>
	21	+ <article class="mt30">
	22	+ <input type="text" class="speak mb25" placeholder="오늘 배운 단어를 말해보세요!">
	23	+ <p class="read-ai"><img style="margin-top: -5px;" src="../../../../resources/img/img43_s.png" alt=""></p>
	24	+ </article>
	25	+
	26	+ </section>
	27	+
	28	+ </div>
	29	+ </div>
	30	+ </div>
	31	+ <div class="next-btn" @click="goToPage('Chapter2_2')"><img src="../../../../resources/img/right.png" alt=""></div>
	32	+ </div>
	33	+ </div>
	34	+ </template>
	35	+
	36	+ <script>
	37	+ export default {
	38	+ data() {
	39	+ return {
	40	+ }
	41	+ },
	42	+ methods: {
	43	+ goToPage(page) {
	44	+ this.$router.push({ name: page });
	45	+ }
	46	+ },
	47	+ watch: {
	48	+
	49	+ },
	50	+ computed: {
	51	+
	52	+ },
	53	+ components: {
	54	+ },
	55	+ mounted() {
	56	+
	57	+ }
	58	+ }
	59	+ </script>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,128 @@
	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('Chapter2_9')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">방문이 자물쇠로 잠겨져 있네? 세 개 중에 맞는 열쇠 하나를 찾아줘!</p>
	11	+ <p class="subtitle2 "></p>
	12	+
	13	+ <div class="mt80 flex align-center justify-center" style="gap: 113px;">
	14	+ <div class="imgGroup">
	15	+ <div class="flex" style="gap: 60px;">
	16	+ <button><img src="../../../../resources/img/img82_42s.png" alt="">
	17	+ <p>1</p>
	18	+ </button>
	19	+ <button><img src="../../../../resources/img/img159_42s.png" alt=""></button>
	20	+ <button><img src="../../../../resources/img/img83_42s.png" alt="">
	21	+ <p>1</p>
	22	+ </button>
	23	+ </div>
	24	+
	25	+ </div>
	26	+ <div class="pickGroup">
	27	+ <div>
	28	+ <article class="flex justify-center" style="gap: 60px;">
	29	+ <img src="../../../../resources/img/img84_42s.png" alt="">
	30	+ <div class="flex">
	31	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	32	+ <p>1</p>
	33	+ </button>
	34	+ <p>a</p>
	35	+ </div>
	36	+ </article>
	37	+ <article class="flex justify-center" style="gap: 60px;">
	38	+ <img src="../../../../resources/img/img85_42s.png" alt="">
	39	+ <div class="flex">
	40	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	41	+ <p>2</p>
	42	+ </button>
	43	+ <p>a</p>
	44	+ </div>
	45	+ </article>
	46	+ <article class="flex justify-center" style="gap: 60px;">
	47	+ <img src="../../../../resources/img/img86_42s.png" alt="">
	48	+ <div class="flex">
	49	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	50	+ <p>3</p>
	51	+ </button>
	52	+ <p>a</p>
	53	+ </div>
	54	+ </article>
	55	+ </div>
	56	+
	57	+ </div>
	58	+ </div>
	59	+ </div>
	60	+ <div class="next-btn" @click="goToPage('Chapter2_11')"><img src="../../../../resources/img/right.png" alt=""></div>
	61	+ </div>
	62	+ </div>
	63	+</template>
	64	+
	65	+<script>
	66	+export default {
	67	+ data() {
	68	+ return {
	69	+ }
	70	+ },
	71	+ methods: {
	72	+ goToPage(page) {
	73	+ this.$router.push({ name: page });
	74	+ }
	75	+ },
	76	+ watch: {
	77	+
	78	+ },
	79	+ computed: {
	80	+
	81	+ },
	82	+ components: {
	83	+ },
	84	+ mounted() {
	85	+
	86	+ }
	87	+}
	88	+</script>
	89	+<style scoped>
	90	+.imgGroup{width: fit-content;}
	91	+.imgGroup button {
	92	+ position: relative;
	93	+}
	94	+
	95	+.imgGroup button p,
	96	+.textbox p {
	97	+ position: absolute;
	98	+ top: 50%;
	99	+ left: 50%;
	100	+ transform: translate(-50%, -50%);
	101	+ width: fit-content;
	102	+ height: fit-content;
	103	+ background: #ffffffb8;
	104	+ border-radius: 5px;
	105	+ padding: 10px;
	106	+ font-size: 48px;
	107	+ font-family: 'ONEMobilePOP';
	108	+}
	109	+
	110	+.pickGroup button {
	111	+ position: relative;
	112	+ margin-right: 30px;
	113	+}
	114	+
	115	+.pickGroup button p {
	116	+ font-size: 34px;
	117	+ color: #c6c6c6;
	118	+ position: absolute;
	119	+ top: 50%;
	120	+ left: 50%;
	121	+ transform: translate(-50%, -50%);
	122	+}
	123	+.pickGroup article{margin-bottom: 50px;}
	124	+.pickGroup article img{object-fit: contain; width: -webkit-fill-available;}
	125	+.pickGroup article >div >p {
	126	+ font-size: 64px;
	127	+}
	128	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,92 @@
	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('Chapter2_10')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">빈칸에 들어갈 알맞은 낱말을 골라 문장 완성시키기</p>
	11	+ <p class="subtitle2 ">앗! 연못에 도끼를 빠뜨렸어! 둘 중에 어느 도끼가 내 도끼였지?</p>
	12	+
	13	+ <div class="mt50 text-ct">
	14	+ <div class="imgGroup flex align-start justify-center mt30">
	15	+ <img src="../../../../resources/img/img87_43s.png" alt="">
	16	+ <div class="inputGroup" >
	17	+ the dog <input type="text" name="" id="">
	18	+ </div>
	19	+
	20	+ </div>
	21	+ <div class="pickGroup mt40">
	22	+ <article class="flex justify-center" style="gap: 60px; bottom: 159px;
	23	+ left: 242px;">
	24	+ <div class="flex">
	25	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	26	+ <p>1</p>
	27	+ </button>
	28	+ <p>a</p>
	29	+ </div>
	30	+ </article>
	31	+ <article class="flex justify-center" style="gap: 60px; bottom: 159px;
	32	+ right: 559px;">
	33	+ <div class="flex">
	34	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	35	+ <p>2</p>
	36	+ </button>
	37	+ <p>a</p>
	38	+ </div>
	39	+ </article>
	40	+
	41	+ </div>
	42	+ </div>
	43	+ </div>
	44	+ <div class="next-btn" @click="goToPage('Chapter2_12')"><img src="../../../../resources/img/right.png" alt=""></div>
	45	+ </div>
	46	+ </div>
	47	+ </template>
	48	+
	49	+ <script>
	50	+ export default {
	51	+ data() {
	52	+ return {
	53	+ }
	54	+ },
	55	+ methods: {
	56	+ goToPage(page) {
	57	+ this.$router.push({ name: page });
	58	+ }
	59	+ },
	60	+ watch: {
	61	+
	62	+ },
	63	+ computed: {
	64	+
	65	+ },
	66	+ components: {
	67	+ },
	68	+ mounted() {
	69	+
	70	+ }
	71	+ }
	72	+ </script>
	73	+ <style scoped>
	74	+ .pickGroup button {
	75	+ position: relative;
	76	+ margin-right: 30px;
	77	+}
	78	+
	79	+.pickGroup button p {
	80	+ font-size: 34px;
	81	+ color: #c6c6c6;
	82	+ position: absolute;
	83	+ top: 50%;
	84	+ left: 50%;
	85	+ transform: translate(-50%, -50%);
	86	+}
	87	+.pickGroup article{position: absolute;}
	88	+.pickGroup article img{object-fit: contain; width: -webkit-fill-available;}
	89	+.pickGroup article >div >p {
	90	+ font-size: 64px;
	91	+}
	92	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,117 @@
	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('Chapter2_11')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">단어 짝 맞추기 게임</p>
	11	+ <p class="subtitle2 ">앗...책들이 엉망이야 단어책과 뜻책을 맞추어 책을 책꽃이로 돌려놓자!</p>
	12	+
	13	+ <div class="mt50 text-ct">
	14	+ <div class="pickGroup flex align-center justify-center mt50" style="gap: 100px;">
	15	+ <div>
	16	+ <div class="mb20">
	17	+ <button><img src="../../../../resources/img/img100_45s.png" alt="">
	18	+ <p>1</p>
	19	+ </button>
	20	+ <button><img src="../../../../resources/img/img101_45s.png" alt="">
	21	+ <p>1</p>
	22	+ </button>
	23	+ <button><img src="../../../../resources/img/img102_45s.png" alt="">
	24	+ <p>1</p>
	25	+ </button>
	26	+ <button><img src="../../../../resources/img/img103_45s.png" alt="">
	27	+ <p>1</p>
	28	+ </button>
	29	+ </div>
	30	+ <div>
	31	+ <button><img src="../../../../resources/img/img100_45s.png" alt="">
	32	+ <p>1</p>
	33	+ </button>
	34	+ <button><img src="../../../../resources/img/img101_45s.png" alt="">
	35	+ <p>1</p>
	36	+ </button>
	37	+ <button><img src="../../../../resources/img/img102_45s.png" alt="">
	38	+ <p>1</p>
	39	+ </button>
	40	+ <button><img src="../../../../resources/img/img103_45s.png" alt="">
	41	+ <p>1</p>
	42	+ </button>
	43	+ </div>
	44	+ </div>
	45	+ <div class="flex" style="gap: 20px;">
	46	+ <img src="../../../../resources/img/img99_45s.png" alt="">
	47	+ </div>
	48	+
	49	+ </div>
	50	+
	51	+ <div class="time-bg">
	52	+ <div>
	53	+ <div class="time">
	54	+ <p class="second">{{ timer }}</p>
	55	+ <p class="text">sec</p>
	56	+ </div>
	57	+ </div>
	58	+ </div>
	59	+ </div>
	60	+ </div>
	61	+ <div class="next-btn" @click="goToPage('Chapter2_13')"><img src="../../../../resources/img/right.png" alt=""></div>
	62	+ </div>
	63	+ </div>
	64	+</template>
	65	+
	66	+<script>
	67	+export default {
	68	+ data() {
	69	+ return {
	70	+ timer: "00",
	71	+ }
	72	+ },
	73	+ methods: {
	74	+ goToPage(page) {
	75	+ this.$router.push({ name: page });
	76	+ },
	77	+ startTimer() {
	78	+ if (this.intervalId) {
	79	+ clearInterval(this.intervalId);
	80	+ }
	81	+ this.timer = 5;
	82	+ this.intervalId = setInterval(() => {
	83	+ if (this.timer > 0) {
	84	+ this.timer--;
	85	+ } else {
	86	+ clearInterval(this.intervalId);
	87	+ }
	88	+ }, 1000);
	89	+ }
	90	+ },
	91	+ watch: {
	92	+
	93	+ },
	94	+ computed: {
	95	+
	96	+ },
	97	+ components: {
	98	+ },
	99	+ mounted() {
	100	+
	101	+ }
	102	+}
	103	+</script>
	104	+<style scoped>
	105	+.pickGroup button {
	106	+ position: relative;
	107	+ margin: 10px 40px;
	108	+}
	109	+
	110	+.pickGroup button p {
	111	+ font-size: 34px;
	112	+ position: absolute;
	113	+ top: 50%;
	114	+ left: 50%;
	115	+ transform: translate(-50%, -50%);
	116	+}
	117	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,135 @@
	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('Chapter2_12')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">객관식 미니게임</p>
	11	+ <p class="subtitle2 ">헉... 물폭탄이 작동해서 물난리가 나기 전에 알맞은 선을 잘라 해제해야겠어!</p>
	12	+
	13	+ <div class="mt50 text-ct">
	14	+ <div class="imgGroup flex align-center justify-center mt30">
	15	+ <div class="flex" style="gap: 20px; position: relative;">
	16	+ <img src="../../../../resources/img/img105_46s.png" alt="">
	17	+ <div class="time-bg">
	18	+ <div>
	19	+ <div class="time">
	20	+ <p class="second">{{ timer }}</p>
	21	+ <p class="text">sec</p>
	22	+ </div>
	23	+ </div>
	24	+ </div>
	25	+ <div class="textbox mt40">
	26	+ <p class="title1 text-lf"> 문제</p>
	27	+ <div class="pickGroup">
	28	+ <div>
	29	+ <article class="flex mb20" style="gap: 60px;">
	30	+ <div class="flex align-center">
	31	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	32	+ <p>1</p>
	33	+ </button>
	34	+ <p class="red">a</p>
	35	+ </div>
	36	+ </article>
	37	+ <article class="flex mb20" style="gap: 60px;">
	38	+ <div class="flex align-center">
	39	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	40	+ <p>2</p>
	41	+ </button>
	42	+ <p class="orange">a</p>
	43	+ </div>
	44	+ </article>
	45	+ <article class="flex mb20" style="gap: 60px;">
	46	+ <div class="flex align-center">
	47	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	48	+ <p>3</p>
	49	+ </button>
	50	+ <p class="blue">a</p>
	51	+ </div>
	52	+ </article>
	53	+ <article class="flex " style="gap: 60px;">
	54	+ <div class="flex align-center">
	55	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	56	+ <p>4</p>
	57	+ </button>
	58	+ <p class="green">a</p>
	59	+ </div>
	60	+ </article>
	61	+ </div>
	62	+ </div>
	63	+
	64	+ <div class="flex justify-center" style="gap: 20px;">
	65	+ </div>
	66	+
	67	+ </div>
	68	+ </div>
	69	+ </div>
	70	+ </div>
	71	+ </div>
	72	+ <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div>
	73	+ </div>
	74	+ </div>
	75	+</template>
	76	+
	77	+<script>
	78	+export default {
	79	+ data() {
	80	+ return {
	81	+ }
	82	+ },
	83	+ methods: {
	84	+ goToPage(page) {
	85	+ this.$router.push({ name: page });
	86	+ },
	87	+ startTimer() {
	88	+ if (this.intervalId) {
	89	+ clearInterval(this.intervalId);
	90	+ }
	91	+ this.timer = 5;
	92	+ this.intervalId = setInterval(() => {
	93	+ if (this.timer > 0) {
	94	+ this.timer--;
	95	+ } else {
	96	+ clearInterval(this.intervalId);
	97	+ }
	98	+ }, 1000);
	99	+ }
	100	+ },
	101	+ watch: {
	102	+
	103	+ },
	104	+ computed: {
	105	+
	106	+ },
	107	+ components: {
	108	+ },
	109	+ mounted() {
	110	+
	111	+ }
	112	+}
	113	+</script>
	114	+<style scoped>
	115	+.textbox{position: absolute; top: 114px;
	116	+ left: 45px;}
	117	+ .time-bg{ top: 137px;}
	118	+ .pickGroup{margin: 50px 0 0 180px;}
	119	+.pickGroup button {
	120	+ position: relative;
	121	+ margin-right: 30px;
	122	+}
	123	+.pickGroup button img{width: 33px; height: 33px;}
	124	+.pickGroup button p {
	125	+ font-size: 20px;
	126	+ color: #c6c6c6;
	127	+ position: absolute;
	128	+ top: 50%;
	129	+ left: 50%;
	130	+ transform: translate(-50%, -50%);
	131	+}
	132	+.pickGroup article >div >p {
	133	+ font-size: 24px;
	134	+}
	135	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,49 @@
	1	+<template>
	2	+ <div id="Chapter2_2" 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('Chapter2_1')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">카드를 뒤집어 보세요.</p>
	11	+
	12	+ <div class="imgGroup mt80">
	13	+ <div class="flex justify-center" style="gap: 90px;">
	14	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)">
	15	+ <img :src="item.imgSrc1" >
	16	+ <img :src="item.imgSrc2" :style="{ display: item.isSecondImageVisible ? 'block' : 'none' }">
	17	+ </button>
	18	+ </div>
	19	+ </div>
	20	+ </div>
	21	+ <div class="next-btn" @click="goToPage('Chapter2_3')"><img src="../../../../resources/img/right.png" alt=""></div>
	22	+ </div>
	23	+ </div>
	24	+</template>
	25	+
	26	+
	27	+<script>
	28	+export default {
	29	+ data() {
	30	+ return {
	31	+ items: [
	32	+ { imgSrc1: 'http://localhost/client/build/d7b87b0aee959597bc7a8ff59c92e172.png', imgSrc2: 'http://localhost/client/build/eeb66d34a14f431520977cac0a89adf1.png', isSecondImageVisible: false },
	33	+ { imgSrc1: 'http://localhost/client/build/75be1e0527bdc23177d46d5525646b57.png', imgSrc2: 'http://localhost/client/build/f1c52445fc7b070642d6d4add5208383.png', isSecondImageVisible: false },
	34	+ { imgSrc1: 'http://localhost/client/build/5351236e4d5e2d68b4c0d475c2a6bad2.png', imgSrc2: 'http://localhost/client/build/82edbab93426e02a09ee3518801c956e.png', isSecondImageVisible: false },
	35	+ { imgSrc1: 'http://localhost/client/build/c9ab71d4ac740b625b6ed54611775727.png', imgSrc2: 'http://localhost/client/build/1fa02c19c1f627c33be9dcb2de41b869.png', isSecondImageVisible: false }
	36	+ ]
	37	+ };
	38	+ },
	39	+ methods: {
	40	+ goToPage(page) {
	41	+ this.$router.push({ name: page });
	42	+ },
	43	+ toggleImage(index) {
	44	+ this.items[index].isSecondImageVisible = !this.items[index].isSecondImageVisible;
	45	+ }
	46	+ }
	47	+}
	48	+
	49	+</script>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,100 @@
	1	+<template>
	2	+ <div id="Chapter2_2" 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('Chapter2_2')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">다음을 듣고 따라 말하세요.</p>
	11	+ <p class="subtitle2 "></p>
	12	+ <div class="time-bg">
	13	+ <div>
	14	+ <div class="time">
	15	+ <p class="second">{{timer}}</p>
	16	+ <p class="text">sec</p>
	17	+ </div>
	18	+ </div>
	19	+ </div>
	20	+
	21	+ <div class="imgGroup">
	22	+ <div class="con">
	23	+ <img :src="currentCon.imgSrc" alt="">
	24	+ <p class="title3"><em class="yellow">{{ currentCon.titleEm }}</em>{{ currentCon.title }}</p>
	25	+ <div class="flex align-center justify-center mt10">
	26	+ <p class="yellow-box-big">{{ currentCon.boxText }}</p>
	27	+ <span class="subtitle3">{{ currentCon.subtitle }}</span>
	28	+ </div>
	29	+ </div>
	30	+
	31	+ <div class="flex justify-center">
	32	+ <div class="btnGroup mt50 flex justify-between">
	33	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)" :class="{ active: selectedIndex === index }">
	34	+ <img :src="item.imgSrc1" >
	35	+ <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
	36	+ </button>
	37	+ </div>
	38	+ </div>
	39	+ </div>
	40	+ </div>
	41	+ <div class="next-btn" @click="goToPage('Chapter2_4')"><img src="../../../../resources/img/right.png" alt=""></div>
	42	+ </div>
	43	+ </div>
	44	+</template>
	45	+
	46	+<script>
	47	+export default {
	48	+ data() {
	49	+ return {
	50	+ items: [
	51	+ {imgSrc1: 'client/resources/img/img53_6_35s.png', imgSrc2: 'client/resources/img/img53_1_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'c', title: 'loud', boxText: '명', subtitle: '구름' } },
	52	+ {imgSrc1: 'client/resources/img/img53_7_35s.png', imgSrc2: 'client/resources/img/img53_2_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 's', title: 'un', boxText: '명', subtitle: '태양' } },
	53	+ {imgSrc1: 'client/resources/img/img53_8_35s.png', imgSrc2: 'client/resources/img/img53_3_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'r', title: 'ain', boxText: '명', subtitle: '비' } },
	54	+ {imgSrc1: 'client/resources/img/img53_9_35s.png', imgSrc2: 'client/resources/img/img53_4_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 's', title: 'now', boxText: '명', subtitle: '눈' } },
	55	+ {imgSrc1: 'client/resources/img/img53_10_35s.png', imgSrc2: 'client/resources/img/img53_5_35s.png', con: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'w', title: 'ind', boxText: '명', subtitle: '바람' } }
	56	+ ],
	57	+ currentCon: { imgSrc: 'client/resources/img/img54_s.png', titleEm: 'c', title: 'loud', boxText: '명', subtitle: '구름' },
	58	+ selectedIndex: 0,
	59	+ timer: "00",
	60	+ intervalId: null,
	61	+ };
	62	+ },
	63	+ methods: {
	64	+ goToPage(page) {
	65	+ this.$router.push({ name: page });
	66	+ },
	67	+ updateContent(index) {
	68	+ this.selectedIndex = index;
	69	+ this.currentCon = this.items[index].con;
	70	+ this.startTimer();
	71	+ },
	72	+ startTimer() {
	73	+ if (this.intervalId) {
	74	+ clearInterval(this.intervalId);
	75	+ }
	76	+ this.timer = 5;
	77	+ this.intervalId = setInterval(() => {
	78	+ if (this.timer > 0) {
	79	+ this.timer--;
	80	+ } else {
	81	+ clearInterval(this.intervalId);
	82	+ }
	83	+ }, 1000);
	84	+ }
	85	+ },
	86	+ beforeDestroy() {
	87	+ if (this.intervalId) {
	88	+ clearInterval(this.intervalId);
	89	+ }
	90	+ }
	91	+}
	92	+</script>
	93	+
	94	+<style scoped>
	95	+.popTxt img{
	96	+ position: absolute;
	97	+ top: 0;
	98	+ left: 0;
	99	+}
	100	+</style>

a67c900

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

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

...	...	@@ -0,0 +1,75 @@
	1	+<template>
	2	+ <div id="Chapter2_2" 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('Chapter2_3')"><img src="../../../../resources/img/left.png" alt="">
	9	+ </div>
	10	+ <div class="content title-box">
	11	+ <p class="title mt25 title-bg">다음을 듣고 맞는 단어를 선택하세요.</p>
	12	+ <p class="subtitle2 "></p>
	13	+
	14	+
	15	+ <div class="imgGroup">
	16	+
	17	+ <div class="flex justify-center">
	18	+ <div class="btnGroup mt30 flex" style="gap: 60px;">
	19	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
	20	+ :class="{ active: selectedIndex === index }">
	21	+ <img :src="item.imgSrc1">
	22	+ <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
	23	+ </button>
	24	+ </div>
	25	+ </div>
	26	+ <div class="listen-btn">
	27	+ <img src="client/resources/img/img60_36s.png" alt="">
	28	+ </div>
	29	+ <div class="look-text"> <button ><img src="../../../../resources/img/btn08_s.png" alt=""><p>정답확인</p></button></div>
	30	+ </div>
	31	+ </div>
	32	+ <div class="next-btn" @click="goToPage('Chapter2_5')"><img src="../../../../resources/img/right.png" alt="">
	33	+ </div>
	34	+ </div>
	35	+ </div>
	36	+</template>
	37	+<script>
	38	+export default {
	39	+ data() {
	40	+ return {
	41	+ items: [
	42	+ { imgSrc1: 'client/resources/img/img61_36s_1.png', imgSrc2: 'client/resources/img/img61_36s_1_Click.png' },
	43	+ { imgSrc1: 'client/resources/img/img61_36s_2.png', imgSrc2: 'client/resources/img/img61_36s_2_Click.png' },
	44	+ { imgSrc1: 'client/resources/img/img61_36s_3.png', imgSrc2: 'client/resources/img/img61_36s_4_Click.png' },
	45	+ { imgSrc1: 'client/resources/img/img61_36s_4.png', imgSrc2: 'client/resources/img/img61_36s_3_Click.png' },
	46	+ ],
	47	+ selectedIndex: 0,
	48	+ timer: "00",
	49	+ intervalId: null,
	50	+ };
	51	+ },
	52	+ methods: {
	53	+ goToPage(page) {
	54	+ this.$router.push({ name: page });
	55	+ },
	56	+ updateContent(index) {
	57	+ this.selectedIndex = index;
	58	+ this.currentCon = this.items[index].con;
	59	+ this.startTimer();
	60	+ },
	61	+
	62	+ },
	63	+}
	64	+</script>
	65	+
	66	+<style scoped>
	67	+.look-text{bottom: 50px;}
	68	+.btnGroup{width: 1060px; height: 340px;}
	69	+.popTxt{width: 216px;}
	70	+.popTxt img {
	71	+ position: absolute;
	72	+ top: 0;
	73	+ left: 0;
	74	+}
	75	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,102 @@
	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('Chapter2_4')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">아래 지문을 보고 빈칸을 채워주세요.</p>
	11	+ <p class="subtitle2 "></p>
	12	+
	13	+ <div class="mt50 text-ct">
	14	+ <p class="title1 mb40" style="color: #464749;">the sun rises in the</p>
	15	+ <img src="../../../../resources/img/img65_37s.png" alt="">
	16	+ <div class="dropGroup flex align-center justify-center mt30">
	17	+ <span class="mr30">the sunrise the</span>
	18	+ <div class="flex" style="gap: 20px;">
	19	+ <button @click="showButton(1)"><img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton1">A</p></button>
	20	+ <button @click="showButton(2)" > <img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton2">A</p></button>
	21	+ <button @click="showButton(3)" ><img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton3">A</p></button>
	22	+ <button @click="showButton(4)" ><img src="../../../../resources/img/img64_37s.png" alt=""><p v-if="showButton4">A</p></button>
	23	+ </div>
	24	+
	25	+ </div>
	26	+ <div class="dragGroup mt40">
	27	+ <div class="flex justify-center" style="gap: 20px;">
	28	+ <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
	29	+ <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
	30	+ <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
	31	+ <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
	32	+ <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
	33	+ <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
	34	+ </div>
	35	+
	36	+ </div>
	37	+ </div>
	38	+ </div>
	39	+ <div class="next-btn" @click="goToPage('Chapter2_6')"><img src="../../../../resources/img/right.png" alt=""></div>
	40	+ </div>
	41	+ </div>
	42	+ </template>
	43	+
	44	+ <script>
	45	+ export default {
	46	+ data() {
	47	+ return {
	48	+ showButton1: false,
	49	+ showButton2: false,
	50	+ showButton3: false,
	51	+ showButton4: false,
	52	+ }
	53	+ },
	54	+ methods: {
	55	+ goToPage(page) {
	56	+ this.$router.push({ name: page });
	57	+ },
	58	+ handleDrag(dragNumber) {
	59	+ // Drag 버튼 숨기기
	60	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	61	+ if (dragNumber === 1) {
	62	+ this.showButton1 = false;
	63	+ } else if (dragNumber === 2) {
	64	+ this.showButton2 = false;
	65	+ } else if (dragNumber === 3) {
	66	+ this.showButton3 = false;
	67	+ }
	68	+ },
	69	+ showButton(dropNumber) {
	70	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	71	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	72	+ if (dropNumber === 1) {
	73	+ this.showButton1 = true;
	74	+ } else if (dropNumber === 2) {
	75	+ this.showButton2 = true;
	76	+ } else if (dropNumber === 3) {
	77	+ this.showButton3 = true;
	78	+ } else if (dropNumber === 4) {
	79	+ this.showButton4 = true;
	80	+ }
	81	+ },
	82	+ },
	83	+ watch: {
	84	+
	85	+ },
	86	+ computed: {
	87	+
	88	+ },
	89	+ components: {
	90	+ },
	91	+ mounted() {
	92	+
	93	+ }
	94	+ }
	95	+ </script>
	96	+ <style scoped>
	97	+ .dropGroup button{position: relative;}
	98	+ .dropGroup button p{ font-size: 48px;}
	99	+.dragGroup button p{
	100	+ font-size: 48px;
	101	+ }
	102	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

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

a67c900

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

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

...	...	@@ -0,0 +1,76 @@
	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('Chapter2_6')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">앗! 다리가 무너져서 건널 수가 없어! 다리 조각을 옮겨줘!</p>
	11	+ <p class="subtitle2 "></p>
	12	+
	13	+ <div class="mt50 text-ct flex justify-center" style="gap: 80px;">
	14	+ <div class="dropGroup flex align-center justify-center mt30">
	15	+ <div class="flex" style="gap: 20px; position: relative;" >
	16	+ <img src="../../../../resources/img/img70_39s.png" alt="">
	17	+ <div class="textbox">
	18	+ <p style=" left: 247px;
	19	+ bottom: 49px;">1</p>
	20	+ <p style=" left: 396px;
	21	+ bottom: 97px;">2</p>
	22	+ <p style=" left: 530px;
	23	+ bottom: 179px;">3</p>
	24	+ </div>
	25	+ </div>
	26	+
	27	+ </div>
	28	+ <div class="dragGroup mt40">
	29	+ <div>
	30	+ <button><img src="../../../../resources/img/img71_39s.png" alt=""><p>a</p></button>
	31	+ <button><img src="../../../../resources/img/img71_39s.png" alt=""><p>b</p></button>
	32	+ <button><img src="../../../../resources/img/img71_39s.png" alt=""><p>c</p></button>
	33	+ </div>
	34	+
	35	+ </div>
	36	+ </div>
	37	+ </div>
	38	+ <div class="next-btn" @click="goToPage('Chapter2_8')"><img src="../../../../resources/img/right.png" alt=""></div>
	39	+ </div>
	40	+ </div>
	41	+</template>
	42	+
	43	+<script>
	44	+export default {
	45	+ data() {
	46	+ return {
	47	+ }
	48	+ },
	49	+ methods: {
	50	+ goToPage(page) {
	51	+ this.$router.push({ name: page });
	52	+ }
	53	+ },
	54	+ watch: {
	55	+
	56	+ },
	57	+ computed: {
	58	+
	59	+ },
	60	+ components: {
	61	+ },
	62	+ mounted() {
	63	+
	64	+ }
	65	+}
	66	+</script>
	67	+<style scoped>
	68	+.textbox p{position: absolute; }
	69	+.dragGroup button{display: block;}
	70	+.dragGroup button p, .textbox p{ width: fit-content;
	71	+ height: fit-content;
	72	+ background: #ffffffb8;
	73	+ border-radius: 5px;
	74	+ padding: 10px;
	75	+ font-size: 30px; font-family: 'ONEMobilePOP';}
	76	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,69 @@
	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('Chapter2_7')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">앗! 퍼즐이 망가졌어! 퍼즐을 맞춰 문장을 완성해보자!</p>
	11	+ <p class="subtitle2 "></p>
	12	+
	13	+ <div class="mt80 text-ct">
	14	+ <div class="dropGroup flex align-center justify-center mt30">
	15	+ <div style="position: relative;" >
	16	+ <img src="../../../../resources/img/img28_s.png" alt="">
	17	+ <button style=" left: 30px;
	18	+ top: 167px;"><img src="../../../../resources/img/img29_s_01.png" alt=""><p>a</p></button>
	19	+ <button style=" right: 409px;
	20	+ top: 133px;"><img src="../../../../resources/img/img30_s_01.png" alt=""><p>a</p></button>
	21	+ <button style=" right: 46px;
	22	+ top: 128px;"><img src="../../../../resources/img/img31_s_01.png" alt=""><p>a</p></button>
	23	+
	24	+ </div>
	25	+ </div>
	26	+ <div class="dragGroup mt40">
	27	+ <div class="flex justify-center" style="gap: 20px;">
	28	+ <article style=" right: 0;
	29	+ top: 36%; "><button><img src="../../../../resources/img/img29_s.png" alt=""><p>a</p></button></article>
	30	+ <article style=" left: 0;
	31	+ top: 36%; "><button><img src="../../../../resources/img/img30_s.png" alt=""><p>a</p></button></article>
	32	+ <article style="left: 50%;
	33	+ top: 10%;"><button><img src="../../../../resources/img/img31_s.png" alt=""><p>a</p></button></article>
	34	+ </div>
	35	+
	36	+ </div>
	37	+ </div>
	38	+ </div>
	39	+ <div class="next-btn" @click="goToPage('Chapter2_9')"><img src="../../../../resources/img/right.png" alt=""></div>
	40	+ </div>
	41	+ </div>
	42	+ </template>
	43	+
	44	+ <script>
	45	+ export default {
	46	+ data() {
	47	+ return {
	48	+ }
	49	+ },
	50	+ methods: {
	51	+ goToPage(page) {
	52	+ this.$router.push({ name: page });
	53	+ }
	54	+ },
	55	+ watch: {
	56	+
	57	+ },
	58	+ computed: {
	59	+
	60	+ },
	61	+ components: {
	62	+ },
	63	+ mounted() {
	64	+
	65	+ }
	66	+ }
	67	+ </script>
	68	+ <style scoped>
	69	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,67 @@
	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('Chapter2_8')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">앗! 잉크가 쏟아졌어! 잉크를 지워줘!</p>
	11	+ <p class="subtitle2 "></p>
	12	+
	13	+ <div class="mt40 text-ct">
	14	+ <div class="dropGroup flex align-center justify-center mt30">
	15	+ <div style="position: relative;" >
	16	+ <img src="../../../../resources/img/img72_41s_1.png" alt="">
	17	+ <button style="left: 141px;
	18	+ top: 60px;"><img src="../../../../resources/img/img78_41s.png" alt=""><p>a</p></button>
	19	+ <button style=" left: 200px;
	20	+ bottom: 86px;"><img src="../../../../resources/img/img79_41s.png" alt=""><p>a</p></button>
	21	+ <button style=" right: 237px;
	22	+ top: 159px;"><img src="../../../../resources/img/img80_41s.png" alt=""><p>a</p></button>
	23	+ <button style=" right: 159px;
	24	+ bottom: 46px;"><img src="../../../../resources/img/img81_41s.png" alt=""><p>a</p></button>
	25	+
	26	+ </div>
	27	+ </div>
	28	+ <div class="dragGroup mt40">
	29	+ <div >
	30	+ <article style=" left: 83px;
	31	+ top: 69%; "><button><img src="../../../../resources/img/img73_41s.png" alt=""><p>a</p></button></article>
	32	+ </div>
	33	+
	34	+ </div>
	35	+ </div>
	36	+ </div>
	37	+ <div class="next-btn" @click="goToPage('Chapter2_10')"><img src="../../../../resources/img/right.png" alt=""></div>
	38	+ </div>
	39	+ </div>
	40	+ </template>
	41	+
	42	+ <script>
	43	+ export default {
	44	+ data() {
	45	+ return {
	46	+ }
	47	+ },
	48	+ methods: {
	49	+ goToPage(page) {
	50	+ this.$router.push({ name: page });
	51	+ }
	52	+ },
	53	+ watch: {
	54	+
	55	+ },
	56	+ computed: {
	57	+
	58	+ },
	59	+ components: {
	60	+ },
	61	+ mounted() {
	62	+
	63	+ }
	64	+ }
	65	+ </script>
	66	+ <style scoped>
	67	+</style>(파일 끝에 줄바꿈 문자 없음)

730242f

a67c900

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

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

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

...	...	@@ -1,0 +1,141 @@
	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('Dashboard')"><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">알맞은 것을 고르세요.</p>
	13	+ </div>
	14	+
	15	+ <div class="mt80 flex align-center justify-center" style="gap: 113px;">
	16	+ <div class="imgGroup">
	17	+ <div class="flex" style="gap: 60px;">
	18	+ <img src="../../../../resources/img/img106_48s.png" alt="">
	19	+ </div>
	20	+ <div class="time-bg">
	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="pickGroup">
	30	+ <div>
	31	+ <article class="flex justify-center mb50" style="gap: 60px;">
	32	+ <div class="flex">
	33	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	34	+ <p>1</p>
	35	+ </button>
	36	+ <p>a</p>
	37	+ </div>
	38	+ </article>
	39	+ <article class="flex justify-center mb50" style="gap: 60px;">
	40	+ <div class="flex">
	41	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	42	+ <p>2</p>
	43	+ </button>
	44	+ <p>a</p>
	45	+ </div>
	46	+ </article>
	47	+ <article class="flex justify-center" style="gap: 60px;">
	48	+ <div class="flex">
	49	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	50	+ <p>3</p>
	51	+ </button>
	52	+ <p>a</p>
	53	+ </div>
	54	+ </article>
	55	+ </div>
	56	+
	57	+ </div>
	58	+ </div>
	59	+ </div>
	60	+ <div class="next-btn" @click="goToPage('Chapter3_1')"><img src="../../../../resources/img/right.png" alt=""></div>
	61	+ </div>
	62	+ </div>
	63	+ </template>
	64	+
	65	+ <script>
	66	+ export default {
	67	+ data() {
	68	+ return {
	69	+ timer:'00'
	70	+ }
	71	+ },
	72	+ methods: {
	73	+ goToPage(page) {
	74	+ this.$router.push({ name: page });
	75	+ },
	76	+ startTimer() {
	77	+ if (this.intervalId) {
	78	+ clearInterval(this.intervalId);
	79	+ }
	80	+ this.timer = 5;
	81	+ this.intervalId = setInterval(() => {
	82	+ if (this.timer > 0) {
	83	+ this.timer--;
	84	+ } else {
	85	+ clearInterval(this.intervalId);
	86	+ }
	87	+ }, 1000);
	88	+ }
	89	+ },
	90	+ watch: {
	91	+
	92	+ },
	93	+ computed: {
	94	+
	95	+ },
	96	+ components: {
	97	+ },
	98	+ mounted() {
	99	+
	100	+ }
	101	+ }
	102	+ </script>
	103	+ <style scoped>
	104	+ .imgGroup{width: fit-content;}
	105	+ .imgGroup button {
	106	+ position: relative;
	107	+ }
	108	+
	109	+ .imgGroup button p,
	110	+ .textbox p {
	111	+ position: absolute;
	112	+ top: 50%;
	113	+ left: 50%;
	114	+ transform: translate(-50%, -50%);
	115	+ width: fit-content;
	116	+ height: fit-content;
	117	+ background: #ffffffb8;
	118	+ border-radius: 5px;
	119	+ padding: 10px;
	120	+ font-size: 48px;
	121	+ font-family: 'ONEMobilePOP';
	122	+ }
	123	+
	124	+ .pickGroup button {
	125	+ position: relative;
	126	+ margin-right: 30px;
	127	+ }
	128	+
	129	+ .pickGroup button p {
	130	+ font-size: 34px;
	131	+ color: #c6c6c6;
	132	+ position: absolute;
	133	+ top: 50%;
	134	+ left: 50%;
	135	+ transform: translate(-50%, -50%);
	136	+ }
	137	+ .pickGroup article img{object-fit: contain; width: -webkit-fill-available;}
	138	+ .pickGroup article >div >p {
	139	+ font-size: 64px;
	140	+ }
	141	+ </style> (파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,122 @@
	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')"><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="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>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="pickGroup ">
	27	+ <div class="flex" style="gap: 250px;">
	28	+ <article class="text-ct">
	29	+ <div class="mb30"><img src="../../../../resources/img/img107_50s.png" alt=""></div>
	30	+ <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
	31	+ <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
	32	+ </button>
	33	+ </article>
	34	+ <article class="text-ct" >
	35	+ <div class="mb30"><img src="../../../../resources/img/img108_50s.png" alt=""></div>
	36	+ <button class="popTxt"><img src="../../../../resources/img/img136_71s.png" alt="">
	37	+ <img style="display: none;" src="../../../../resources/img/img137_71s.png" alt="">
	38	+ </button>
	39	+ </article>
	40	+ </div>
	41	+
	42	+ </div>
	43	+ </div>
	44	+ </div>
	45	+ <div class="next-btn" @click="goToPage('Chapter3_2')"><img src="../../../../resources/img/right.png" alt=""></div>
	46	+ </div>
	47	+ </div>
	48	+</template>
	49	+
	50	+<script>
	51	+export default {
	52	+ data() {
	53	+ return {
	54	+ timer:'00'
	55	+ }
	56	+ },
	57	+ methods: {
	58	+ goToPage(page) {
	59	+ this.$router.push({ name: page });
	60	+ },
	61	+ startTimer() {
	62	+ if (this.intervalId) {
	63	+ clearInterval(this.intervalId);
	64	+ }
	65	+ this.timer = 5;
	66	+ this.intervalId = setInterval(() => {
	67	+ if (this.timer > 0) {
	68	+ this.timer--;
	69	+ } else {
	70	+ clearInterval(this.intervalId);
	71	+ }
	72	+ }, 1000);
	73	+ }
	74	+ },
	75	+ watch: {
	76	+
	77	+ },
	78	+ computed: {
	79	+
	80	+ },
	81	+ components: {
	82	+ },
	83	+ mounted() {
	84	+
	85	+ }
	86	+}
	87	+</script>
	88	+<style scoped>
	89	+.imgGroup{width: fit-content;}
	90	+.imgGroup button {
	91	+ position: relative;
	92	+}
	93	+
	94	+.imgGroup button p,
	95	+.textbox p {
	96	+ position: absolute;
	97	+ top: 50%;
	98	+ left: 50%;
	99	+ transform: translate(-50%, -50%);
	100	+ width: fit-content;
	101	+ height: fit-content;
	102	+ background: #ffffffb8;
	103	+ border-radius: 5px;
	104	+ padding: 10px;
	105	+ font-size: 48px;
	106	+ font-family: 'ONEMobilePOP';
	107	+}
	108	+
	109	+.pickGroup button {
	110	+ position: relative;
	111	+ margin-right: 30px;
	112	+}
	113	+
	114	+.pickGroup button p {
	115	+ font-size: 34px;
	116	+ color: #c6c6c6;
	117	+ position: absolute;
	118	+ top: 50%;
	119	+ left: 50%;
	120	+ transform: translate(-50%, -50%);
	121	+}
	122	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,129 @@
	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_9')"><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">듣고 알맞은 것을 고르세요.</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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="imgGroup mt20">
	27	+ <img src="../../../../resources/img/img116_59s.png" alt="">
	28	+ <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p>
	29	+ <div class=" mt20">
	30	+ <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요.">
	31	+
	32	+ </div>
	33	+ </div>
	34	+
	35	+ </div>
	36	+ </div>
	37	+ <div class="next-btn" @click="goToPage('Chapter3_11')"><img src="../../../../resources/img/right.png" alt="">
	38	+ </div>
	39	+ </div>
	40	+ </div>
	41	+</template>
	42	+
	43	+<script>
	44	+export default {
	45	+ data() {
	46	+ return {
	47	+ timer: '00',
	48	+ showButton1: false,
	49	+ showButton2: false,
	50	+ showButton3: false,
	51	+ showButton4: false,
	52	+ }
	53	+ },
	54	+ methods: {
	55	+ goToPage(page) {
	56	+ this.$router.push({ name: page });
	57	+ },
	58	+ handleDrag(dragNumber) {
	59	+ // Drag 버튼 숨기기
	60	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	61	+ if (dragNumber === 1) {
	62	+ this.showButton1 = false;
	63	+ } else if (dragNumber === 2) {
	64	+ this.showButton2 = false;
	65	+ } else if (dragNumber === 3) {
	66	+ this.showButton3 = false;
	67	+ }
	68	+ },
	69	+ showButton(dropNumber) {
	70	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	71	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	72	+ if (dropNumber === 1) {
	73	+ this.showButton1 = true;
	74	+ } else if (dropNumber === 2) {
	75	+ this.showButton2 = true;
	76	+ } else if (dropNumber === 3) {
	77	+ this.showButton3 = true;
	78	+ } else if (dropNumber === 4) {
	79	+ this.showButton4 = true;
	80	+ }
	81	+ },
	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	+ },
	96	+ watch: {
	97	+
	98	+ },
	99	+ computed: {
	100	+
	101	+ },
	102	+ components: {
	103	+ },
	104	+ mounted() {
	105	+
	106	+ }
	107	+}
	108	+</script>
	109	+<style scoped>
	110	+input.yellow-bd{width: 30%;}
	111	+.dropGroup button {
	112	+ position: relative;
	113	+}
	114	+
	115	+.dropGroup button p {
	116	+ font-size: 48px;
	117	+}
	118	+
	119	+.dragGroup {
	120	+ background-color: #F2F4F8;
	121	+ padding: 30px 50px;
	122	+ width: max-content;
	123	+ border-radius: 20px;
	124	+}
	125	+
	126	+.dragGroup button p {
	127	+ font-size: 48px;
	128	+}
	129	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,133 @@
	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_10')"><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">그림을 보고 빈칸을 채우세요.</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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="imgGroup mt20">
	27	+ <img src="../../../../resources/img/img115_58s.png" alt="">
	28	+ <!-- <p class="title1 mt10"><strong>진수가 거절한 제안</strong>은 무엇인지 우리말로 쓰세요.</p> -->
	29	+ <div class=" mt50 flex justify-center" style="gap: 50px;">
	30	+ <input class="yellow-bd" type="text" name="" id="">
	31	+ <p class="title3">e</p>
	32	+ <input class="yellow-bd" type="text" name="" id="">
	33	+ </div>
	34	+ </div>
	35	+
	36	+ </div>
	37	+ </div>
	38	+ <div class="next-btn" @click="goToPage('Chapter3_12')"><img src="../../../../resources/img/right.png" alt="">
	39	+ </div>
	40	+ </div>
	41	+ </div>
	42	+</template>
	43	+
	44	+<script>
	45	+export default {
	46	+ data() {
	47	+ return {
	48	+ timer: '00',
	49	+ showButton1: false,
	50	+ showButton2: false,
	51	+ showButton3: false,
	52	+ showButton4: false,
	53	+ }
	54	+ },
	55	+ methods: {
	56	+ goToPage(page) {
	57	+ this.$router.push({ name: page });
	58	+ },
	59	+ handleDrag(dragNumber) {
	60	+ // Drag 버튼 숨기기
	61	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	62	+ if (dragNumber === 1) {
	63	+ this.showButton1 = false;
	64	+ } else if (dragNumber === 2) {
	65	+ this.showButton2 = false;
	66	+ } else if (dragNumber === 3) {
	67	+ this.showButton3 = false;
	68	+ }
	69	+ },
	70	+ showButton(dropNumber) {
	71	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	72	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	73	+ if (dropNumber === 1) {
	74	+ this.showButton1 = true;
	75	+ } else if (dropNumber === 2) {
	76	+ this.showButton2 = true;
	77	+ } else if (dropNumber === 3) {
	78	+ this.showButton3 = true;
	79	+ } else if (dropNumber === 4) {
	80	+ this.showButton4 = true;
	81	+ }
	82	+ },
	83	+ startTimer() {
	84	+ if (this.intervalId) {
	85	+ clearInterval(this.intervalId);
	86	+ }
	87	+ this.timer = 5;
	88	+ this.intervalId = setInterval(() => {
	89	+ if (this.timer > 0) {
	90	+ this.timer--;
	91	+ } else {
	92	+ clearInterval(this.intervalId);
	93	+ }
	94	+ }, 1000);
	95	+ }
	96	+ },
	97	+ watch: {
	98	+
	99	+ },
	100	+ computed: {
	101	+
	102	+ },
	103	+ components: {
	104	+ },
	105	+ mounted() {
	106	+
	107	+ }
	108	+}
	109	+</script>
	110	+<style scoped>
	111	+input.yellow-bd {
	112	+ width: 76px;
	113	+}
	114	+
	115	+.dropGroup button {
	116	+ position: relative;
	117	+}
	118	+
	119	+.dropGroup button p {
	120	+ font-size: 48px;
	121	+}
	122	+
	123	+.dragGroup {
	124	+ background-color: #F2F4F8;
	125	+ padding: 30px 50px;
	126	+ width: max-content;
	127	+ border-radius: 20px;
	128	+}
	129	+
	130	+.dragGroup button p {
	131	+ font-size: 48px;
	132	+}
	133	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

+++ client/views/pages/main/Chapter/Chapter3_12.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_11')"><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">그림을 보고 빈칸을 채우세요.</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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="dragGroup mt40">
	27	+ <div class="flex justify-center" style="gap: 20px;">
	28	+ <button><img src="../../../../resources/img/img63_37s.png" alt="">
	29	+ <p @click="handleDrag(1)">A</p>
	30	+ </button>
	31	+ <button><img src="../../../../resources/img/img63_37s_1.png" alt="">
	32	+ <p @click="handleDrag(1)">A</p>
	33	+ </button>
	34	+ <button><img src="../../../../resources/img/img63_37s.png" alt="">
	35	+ <p @click="handleDrag(1)">A</p>
	36	+ </button>
	37	+ <button><img src="../../../../resources/img/img63_37s_2.png" alt="">
	38	+ <p @click="handleDrag(1)">A</p>
	39	+ </button>
	40	+ <button><img src="../../../../resources/img/img63_37s_1.png" alt="">
	41	+ <p @click="handleDrag(1)">A</p>
	42	+ </button>
	43	+ <button><img src="../../../../resources/img/img63_37s_2.png" alt="">
	44	+ <p @click="handleDrag(1)">A</p>
	45	+ </button>
	46	+ </div>
	47	+
	48	+ </div>
	49	+ <div class="dropGroup flex align-center justify-center mt30">
	50	+ <div class="flex" style="gap: 20px;">
	51	+ <div class="bd-bt textbox" @click="showButton(1)">
	52	+ <p v-if="showButton1">A</p></div>
	53	+ <div class="bd-bt textbox" @click="showButton(2)">
	54	+ <p v-if="showButton2">A</p></div>
	55	+ <div class="bd-bt textbox" @click="showButton(3)">
	56	+ <p v-if="showButton3">A</p></div>
	57	+ <div class="bd-bt textbox" @click="showButton(4)">
	58	+ <p v-if="showButton4">A</p></div>
	59	+ </div>
	60	+
	61	+ </div>
	62	+
	63	+ </div>
	64	+ </div>
	65	+ <div class="next-btn" @click="goToPage('Chapter3_13')"><img src="../../../../resources/img/right.png" alt=""></div>
	66	+ </div>
	67	+ </div>
	68	+</template>
	69	+
	70	+<script>
	71	+export default {
	72	+ data() {
	73	+ return {
	74	+ timer: '00',
	75	+ showButton1: false,
	76	+ showButton2: false,
	77	+ showButton3: false,
	78	+ showButton4: false,
	79	+ }
	80	+ },
	81	+ methods: {
	82	+ goToPage(page) {
	83	+ this.$router.push({ name: page });
	84	+ },
	85	+ handleDrag(dragNumber) {
	86	+ // Drag 버튼 숨기기
	87	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	88	+ if (dragNumber === 1) {
	89	+ this.showButton1 = false;
	90	+ } else if (dragNumber === 2) {
	91	+ this.showButton2 = false;
	92	+ } else if (dragNumber === 3) {
	93	+ this.showButton3 = false;
	94	+ }
	95	+ },
	96	+ showButton(dropNumber) {
	97	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	98	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	99	+ if (dropNumber === 1) {
	100	+ this.showButton1 = true;
	101	+ } else if (dropNumber === 2) {
	102	+ this.showButton2 = true;
	103	+ } else if (dropNumber === 3) {
	104	+ this.showButton3 = true;
	105	+ } else if (dropNumber === 4) {
	106	+ this.showButton4 = true;
	107	+ }
	108	+ },
	109	+ startTimer() {
	110	+ if (this.intervalId) {
	111	+ clearInterval(this.intervalId);
	112	+ }
	113	+ this.timer = 5;
	114	+ this.intervalId = setInterval(() => {
	115	+ if (this.timer > 0) {
	116	+ this.timer--;
	117	+ } else {
	118	+ clearInterval(this.intervalId);
	119	+ }
	120	+ }, 1000);
	121	+ }
	122	+ },
	123	+ watch: {
	124	+
	125	+ },
	126	+ computed: {
	127	+
	128	+ },
	129	+ components: {
	130	+ },
	131	+ mounted() {
	132	+
	133	+ }
	134	+}
	135	+</script>
	136	+<style scoped>
	137	+.textbox {height: 60px;}
	138	+.textbox p{font-size: 28px; font-weight: bold; line-height: 65px;}
	139	+.dropGroup button {
	140	+ position: relative;
	141	+}
	142	+
	143	+.dropGroup button p {
	144	+ font-size: 48px;
	145	+}
	146	+
	147	+.dragGroup button p {
	148	+ font-size: 48px;
	149	+}
	150	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,173 @@
	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_12')"><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">그림과 일치하는 올바른 단어를 연결하세요.</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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="flex justify-center ">
	27	+ <div class=" flex justify-between align-center" style="width: 50%;">
	28	+ <div class="pickGroup left">
	29	+ <div>
	30	+ <article class="flex align-center justify-between mb20" style="gap: 60px;">
	31	+ <img src="../../../../resources/img/img121_62s.png" alt="">
	32	+ <div >
	33	+ <button class="blue-c">
	34	+ </button>
	35	+ </div>
	36	+ </article>
	37	+ <article class="flex align-center justify-between mb20" style="gap: 60px;">
	38	+ <img src="../../../../resources/img/img122_62s.png" alt="">
	39	+ <div >
	40	+ <button class="blue-c">
	41	+ </button>
	42	+ </div>
	43	+ </article>
	44	+ <article class="flex align-center justify-between mb20" style="gap: 60px;">
	45	+ <img src="../../../../resources/img/img123_62s.png" alt="">
	46	+ <div class="flex">
	47	+ <button class="blue-c">
	48	+ </button>
	49	+ </div>
	50	+ </article>
	51	+ </div>
	52	+
	53	+ </div>
	54	+ <div class="pickGroup right">
	55	+ <div>
	56	+ <article class="flex align-center justify-between mb20" style="gap: 60px;">
	57	+ <div class="flex">
	58	+ <button class="blue-c">
	59	+ </button>
	60	+ </div>
	61	+ <img src="../../../../resources/img/img121_62s.png" alt="">
	62	+
	63	+ </article>
	64	+ <article class="flex align-center justify-between mb20" style="gap: 60px;">
	65	+ <div class="flex">
	66	+ <button class="blue-c">
	67	+ </button>
	68	+ </div>
	69	+ <img src="../../../../resources/img/img122_62s.png" alt="">
	70	+
	71	+ </article>
	72	+ <article class="flex align-center justify-between mb20" style="gap: 60px;">
	73	+ <div class="flex">
	74	+ <button class="blue-c">
	75	+ </button>
	76	+ </div>
	77	+ <img src="../../../../resources/img/img123_62s.png" alt="">
	78	+
	79	+ </article>
	80	+ </div>
	81	+
	82	+ </div>
	83	+ </div>
	84	+ </div>
	85	+
	86	+ </div>
	87	+ </div>
	88	+ <div class="next-btn" @click="goToPage('Chapter3_14')"><img src="../../../../resources/img/right.png" alt=""></div>
	89	+ </div>
	90	+ </div>
	91	+</template>
	92	+
	93	+<script>
	94	+export default {
	95	+ data() {
	96	+ return {
	97	+ timer: '00',
	98	+ showButton1: false,
	99	+ showButton2: false,
	100	+ showButton3: false,
	101	+ showButton4: false,
	102	+ }
	103	+ },
	104	+ methods: {
	105	+ goToPage(page) {
	106	+ this.$router.push({ name: page });
	107	+ },
	108	+ handleDrag(dragNumber) {
	109	+ // Drag 버튼 숨기기
	110	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	111	+ if (dragNumber === 1) {
	112	+ this.showButton1 = false;
	113	+ } else if (dragNumber === 2) {
	114	+ this.showButton2 = false;
	115	+ } else if (dragNumber === 3) {
	116	+ this.showButton3 = false;
	117	+ }
	118	+ },
	119	+ showButton(dropNumber) {
	120	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	121	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	122	+ if (dropNumber === 1) {
	123	+ this.showButton1 = true;
	124	+ } else if (dropNumber === 2) {
	125	+ this.showButton2 = true;
	126	+ } else if (dropNumber === 3) {
	127	+ this.showButton3 = true;
	128	+ } else if (dropNumber === 4) {
	129	+ this.showButton4 = true;
	130	+ }
	131	+ },
	132	+ startTimer() {
	133	+ if (this.intervalId) {
	134	+ clearInterval(this.intervalId);
	135	+ }
	136	+ this.timer = 5;
	137	+ this.intervalId = setInterval(() => {
	138	+ if (this.timer > 0) {
	139	+ this.timer--;
	140	+ } else {
	141	+ clearInterval(this.intervalId);
	142	+ }
	143	+ }, 1000);
	144	+ }
	145	+ },
	146	+ watch: {
	147	+
	148	+ },
	149	+ computed: {
	150	+
	151	+ },
	152	+ components: {
	153	+ },
	154	+ mounted() {
	155	+
	156	+ }
	157	+}
	158	+</script>
	159	+<style scoped>
	160	+.textbox {height: 60px;}
	161	+.textbox p{font-size: 28px; font-weight: bold; line-height: 65px;}
	162	+.dropGroup button {
	163	+ position: relative;
	164	+}
	165	+
	166	+.dropGroup button p {
	167	+ font-size: 48px;
	168	+}
	169	+
	170	+.dragGroup button p {
	171	+ font-size: 48px;
	172	+}
	173	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,129 @@
	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_13')"><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">그림에 알맞는 낱말을 쓰세요.</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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="imgGroup"><img src="../../../../resources/img/img124_63s.png" alt=""></div>
	27	+
	28	+ <div class="dropGroup flex align-center justify-center mt30">
	29	+ <div class="flex" style="gap: 20px;">
	30	+ <div class="bd-bt textbox" @click="showButton(1)">
	31	+ <p v-if="showButton1">A</p></div>
	32	+ <div class="bd-bt textbox" @click="showButton(2)">
	33	+ <p v-if="showButton2">A</p></div>
	34	+ <div class="bd-bt textbox" @click="showButton(3)">
	35	+ <p v-if="showButton3">A</p></div>
	36	+ <div class="bd-bt textbox" @click="showButton(4)">
	37	+ <p v-if="showButton4">A</p></div>
	38	+ </div>
	39	+
	40	+ </div>
	41	+
	42	+ </div>
	43	+ </div>
	44	+ <div class="next-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/right.png" alt=""></div>
	45	+ </div>
	46	+ </div>
	47	+</template>
	48	+
	49	+<script>
	50	+export default {
	51	+ data() {
	52	+ return {
	53	+ timer: '00',
	54	+ showButton1: false,
	55	+ showButton2: false,
	56	+ showButton3: false,
	57	+ showButton4: false,
	58	+ }
	59	+ },
	60	+ methods: {
	61	+ goToPage(page) {
	62	+ this.$router.push({ name: page });
	63	+ },
	64	+ handleDrag(dragNumber) {
	65	+ // Drag 버튼 숨기기
	66	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	67	+ if (dragNumber === 1) {
	68	+ this.showButton1 = false;
	69	+ } else if (dragNumber === 2) {
	70	+ this.showButton2 = false;
	71	+ } else if (dragNumber === 3) {
	72	+ this.showButton3 = false;
	73	+ }
	74	+ },
	75	+ showButton(dropNumber) {
	76	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	77	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	78	+ if (dropNumber === 1) {
	79	+ this.showButton1 = true;
	80	+ } else if (dropNumber === 2) {
	81	+ this.showButton2 = true;
	82	+ } else if (dropNumber === 3) {
	83	+ this.showButton3 = true;
	84	+ } else if (dropNumber === 4) {
	85	+ this.showButton4 = true;
	86	+ }
	87	+ },
	88	+ startTimer() {
	89	+ if (this.intervalId) {
	90	+ clearInterval(this.intervalId);
	91	+ }
	92	+ this.timer = 5;
	93	+ this.intervalId = setInterval(() => {
	94	+ if (this.timer > 0) {
	95	+ this.timer--;
	96	+ } else {
	97	+ clearInterval(this.intervalId);
	98	+ }
	99	+ }, 1000);
	100	+ }
	101	+ },
	102	+ watch: {
	103	+
	104	+ },
	105	+ computed: {
	106	+
	107	+ },
	108	+ components: {
	109	+ },
	110	+ mounted() {
	111	+
	112	+ }
	113	+}
	114	+</script>
	115	+<style scoped>
	116	+.textbox {height: 60px;}
	117	+.textbox p{font-size: 28px; font-weight: bold; line-height: 65px;}
	118	+.dropGroup button {
	119	+ position: relative;
	120	+}
	121	+
	122	+.dropGroup button p {
	123	+ font-size: 48px;
	124	+}
	125	+
	126	+.dragGroup button p {
	127	+ font-size: 48px;
	128	+}
	129	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,129 @@
	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_14')"><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">그림에 알맞는 낱말을 쓰세요.</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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt=""></div>
	27	+
	28	+ <div class="dropGroup flex align-center justify-center mt30">
	29	+ <div class="flex" style="gap: 20px;">
	30	+ <div class="bd-bt textbox" @click="showButton(1)">
	31	+ <p v-if="showButton1">A</p></div>
	32	+ <div class="bd-bt textbox" @click="showButton(2)">
	33	+ <p v-if="showButton2">A</p></div>
	34	+ <div class="bd-bt textbox" @click="showButton(3)">
	35	+ <p v-if="showButton3">A</p></div>
	36	+ <div class="bd-bt textbox" @click="showButton(4)">
	37	+ <p v-if="showButton4">A</p></div>
	38	+ </div>
	39	+
	40	+ </div>
	41	+
	42	+ </div>
	43	+ </div>
	44	+ <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt=""></div>
	45	+ </div>
	46	+ </div>
	47	+</template>
	48	+
	49	+<script>
	50	+export default {
	51	+ data() {
	52	+ return {
	53	+ timer: '00',
	54	+ showButton1: false,
	55	+ showButton2: false,
	56	+ showButton3: false,
	57	+ showButton4: false,
	58	+ }
	59	+ },
	60	+ methods: {
	61	+ goToPage(page) {
	62	+ this.$router.push({ name: page });
	63	+ },
	64	+ handleDrag(dragNumber) {
	65	+ // Drag 버튼 숨기기
	66	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	67	+ if (dragNumber === 1) {
	68	+ this.showButton1 = false;
	69	+ } else if (dragNumber === 2) {
	70	+ this.showButton2 = false;
	71	+ } else if (dragNumber === 3) {
	72	+ this.showButton3 = false;
	73	+ }
	74	+ },
	75	+ showButton(dropNumber) {
	76	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	77	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	78	+ if (dropNumber === 1) {
	79	+ this.showButton1 = true;
	80	+ } else if (dropNumber === 2) {
	81	+ this.showButton2 = true;
	82	+ } else if (dropNumber === 3) {
	83	+ this.showButton3 = true;
	84	+ } else if (dropNumber === 4) {
	85	+ this.showButton4 = true;
	86	+ }
	87	+ },
	88	+ startTimer() {
	89	+ if (this.intervalId) {
	90	+ clearInterval(this.intervalId);
	91	+ }
	92	+ this.timer = 5;
	93	+ this.intervalId = setInterval(() => {
	94	+ if (this.timer > 0) {
	95	+ this.timer--;
	96	+ } else {
	97	+ clearInterval(this.intervalId);
	98	+ }
	99	+ }, 1000);
	100	+ }
	101	+ },
	102	+ watch: {
	103	+
	104	+ },
	105	+ computed: {
	106	+
	107	+ },
	108	+ components: {
	109	+ },
	110	+ mounted() {
	111	+
	112	+ }
	113	+}
	114	+</script>
	115	+<style scoped>
	116	+.textbox {height: 60px;}
	117	+.textbox p{font-size: 28px; font-weight: bold; line-height: 65px;}
	118	+.dropGroup button {
	119	+ position: relative;
	120	+}
	121	+
	122	+.dropGroup button p {
	123	+ font-size: 48px;
	124	+}
	125	+
	126	+.dragGroup button p {
	127	+ font-size: 48px;
	128	+}
	129	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,107 @@
	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_15')"><img src="../../../../resources/img/left.png" alt=""></div>
	9	+ <div class="content title-box">
	10	+ <p class="title mt25 title-bg">중간 평가 설문 조사</p>
	11	+ <div class="flex align-center mb30">
	12	+ <p class="subtitle2 mr20"></p>
	13	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	14	+ </button> -->
	15	+ </div>
	16	+
	17	+ <div class="text-ct">
	18	+
	19	+
	20	+ </div>
	21	+ </div>
	22	+ <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div>
	23	+ </div>
	24	+ </div>
	25	+</template>
	26	+
	27	+<script>
	28	+export default {
	29	+ data() {
	30	+ return {
	31	+ timer: '00',
	32	+ showButton1: false,
	33	+ showButton2: false,
	34	+ showButton3: false,
	35	+ showButton4: false,
	36	+ }
	37	+ },
	38	+ methods: {
	39	+ goToPage(page) {
	40	+ this.$router.push({ name: page });
	41	+ },
	42	+ handleDrag(dragNumber) {
	43	+ // Drag 버튼 숨기기
	44	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	45	+ if (dragNumber === 1) {
	46	+ this.showButton1 = false;
	47	+ } else if (dragNumber === 2) {
	48	+ this.showButton2 = false;
	49	+ } else if (dragNumber === 3) {
	50	+ this.showButton3 = false;
	51	+ }
	52	+ },
	53	+ showButton(dropNumber) {
	54	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	55	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	56	+ if (dropNumber === 1) {
	57	+ this.showButton1 = true;
	58	+ } else if (dropNumber === 2) {
	59	+ this.showButton2 = true;
	60	+ } else if (dropNumber === 3) {
	61	+ this.showButton3 = true;
	62	+ } else if (dropNumber === 4) {
	63	+ this.showButton4 = true;
	64	+ }
	65	+ },
	66	+ startTimer() {
	67	+ if (this.intervalId) {
	68	+ clearInterval(this.intervalId);
	69	+ }
	70	+ this.timer = 5;
	71	+ this.intervalId = setInterval(() => {
	72	+ if (this.timer > 0) {
	73	+ this.timer--;
	74	+ } else {
	75	+ clearInterval(this.intervalId);
	76	+ }
	77	+ }, 1000);
	78	+ }
	79	+ },
	80	+ watch: {
	81	+
	82	+ },
	83	+ computed: {
	84	+
	85	+ },
	86	+ components: {
	87	+ },
	88	+ mounted() {
	89	+
	90	+ }
	91	+}
	92	+</script>
	93	+<style scoped>
	94	+.textbox {height: 60px;}
	95	+.textbox p{font-size: 28px; font-weight: bold; line-height: 65px;}
	96	+.dropGroup button {
	97	+ position: relative;
	98	+}
	99	+
	100	+.dropGroup button p {
	101	+ font-size: 48px;
	102	+}
	103	+
	104	+.dragGroup button p {
	105	+ font-size: 48px;
	106	+}
	107	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,139 @@
	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_1')"><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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="imgGroup ">
	27	+ <img src="../../../../resources/img/img109_51s.png" alt="">
	28	+ </div>
	29	+ <div class=" flex align-center justify-center">
	30	+ <div class="inputbox mt30">
	31	+ go
	32	+ </div>
	33	+ </div>
	34	+ <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px;">
	35	+ <p>i</p>
	36	+ <article style="gap: 60px; bottom: 159px;
	37	+ left: 242px;">
	38	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	39	+ <p>1</p>
	40	+ </button>
	41	+ </article>
	42	+ <p>to</p>
	43	+ <article style="gap: 60px; bottom: 159px;
	44	+ right: 559px;">
	45	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	46	+ <p>2</p>
	47	+ </button>
	48	+ </article>
	49	+ <p>bed</p>
	50	+ </div>
	51	+ </div>
	52	+ </div>
	53	+ <div class="next-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/right.png" alt=""></div>
	54	+ </div>
	55	+ </div>
	56	+</template>
	57	+
	58	+<script>
	59	+export default {
	60	+ data() {
	61	+ return {
	62	+ timer: '00'
	63	+ }
	64	+ },
	65	+ methods: {
	66	+ goToPage(page) {
	67	+ this.$router.push({ name: page });
	68	+ },
	69	+ 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 {
	78	+ clearInterval(this.intervalId);
	79	+ }
	80	+ }, 1000);
	81	+ }
	82	+ },
	83	+ watch: {
	84	+
	85	+ },
	86	+ computed: {
	87	+
	88	+ },
	89	+ components: {
	90	+ },
	91	+ mounted() {
	92	+
	93	+ }
	94	+}
	95	+</script>
	96	+<style scoped>
	97	+.inputbox {
	98	+ font-size: 38px;
	99	+ font-family: 'Pretendard-ExtraBold';
	100	+}
	101	+
	102	+.imgGroup button {
	103	+ position: relative;
	104	+}
	105	+
	106	+.imgGroup button p,
	107	+.textbox p {
	108	+ position: absolute;
	109	+ top: 50%;
	110	+ left: 50%;
	111	+ transform: translate(-50%, -50%);
	112	+ width: fit-content;
	113	+ height: fit-content;
	114	+ background: #ffffffb8;
	115	+ border-radius: 5px;
	116	+ padding: 10px;
	117	+ font-size: 48px;
	118	+ font-family: 'ONEMobilePOP';
	119	+}
	120	+
	121	+.pickGroup p {
	122	+ font-size: 34px;
	123	+ font-weight: bold;
	124	+}
	125	+
	126	+.pickGroup button {
	127	+ position: relative;
	128	+ margin-right: 30px;
	129	+}
	130	+
	131	+.pickGroup button p {
	132	+ font-size: 34px;
	133	+ color: #c6c6c6;
	134	+ position: absolute;
	135	+ top: 50%;
	136	+ left: 50%;
	137	+ transform: translate(-50%, -50%);
	138	+}
	139	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,132 @@
	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_2')"><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">주어진 단어 중 <em class="yellow-bg">명사</em>인 것을 고르세요.</p>
	13	+ </div>
	14	+
	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>
	21	+ </div>
	22	+ </div>
	23	+ </div>
	24	+ <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px;">
	25	+ <article style="gap: 60px; bottom: 159px;
	26	+ left: 242px;">
	27	+ <div class="flex align-center">
	28	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	29	+ <p>1</p>
	30	+ </button>
	31	+ <p>a</p>
	32	+ </div>
	33	+ </article>
	34	+ <article style="gap: 60px; bottom: 159px;
	35	+ right: 559px;">
	36	+ <div class="flex align-center">
	37	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	38	+ <p>2</p>
	39	+ </button>
	40	+ <p>b</p>
	41	+ </div>
	42	+ </article>
	43	+ </div>
	44	+ </div>
	45	+ </div>
	46	+ <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt=""></div>
	47	+ </div>
	48	+ </div>
	49	+</template>
	50	+
	51	+<script>
	52	+export default {
	53	+ data() {
	54	+ return {
	55	+ timer: '00'
	56	+ }
	57	+ },
	58	+ methods: {
	59	+ goToPage(page) {
	60	+ this.$router.push({ name: page });
	61	+ },
	62	+ startTimer() {
	63	+ if (this.intervalId) {
	64	+ clearInterval(this.intervalId);
	65	+ }
	66	+ this.timer = 5;
	67	+ this.intervalId = setInterval(() => {
	68	+ if (this.timer > 0) {
	69	+ this.timer--;
	70	+ } else {
	71	+ clearInterval(this.intervalId);
	72	+ }
	73	+ }, 1000);
	74	+ }
	75	+ },
	76	+ watch: {
	77	+
	78	+ },
	79	+ computed: {
	80	+
	81	+ },
	82	+ components: {
	83	+ },
	84	+ mounted() {
	85	+
	86	+ }
	87	+}
	88	+</script>
	89	+<style scoped>
	90	+.inputbox {
	91	+ font-size: 38px;
	92	+ font-family: 'Pretendard-ExtraBold';
	93	+}
	94	+
	95	+.imgGroup button {
	96	+ position: relative;
	97	+}
	98	+
	99	+.imgGroup button p,
	100	+.textbox p {
	101	+ position: absolute;
	102	+ top: 50%;
	103	+ left: 50%;
	104	+ transform: translate(-50%, -50%);
	105	+ width: fit-content;
	106	+ height: fit-content;
	107	+ background: #ffffffb8;
	108	+ border-radius: 5px;
	109	+ padding: 10px;
	110	+ font-size: 48px;
	111	+ font-family: 'ONEMobilePOP';
	112	+}
	113	+
	114	+.pickGroup p {
	115	+ font-size: 34px;
	116	+ font-weight: bold;
	117	+}
	118	+
	119	+.pickGroup button {
	120	+ position: relative;
	121	+ margin-right: 30px;
	122	+}
	123	+
	124	+.pickGroup button p {
	125	+ font-size: 34px;
	126	+ color: #c6c6c6;
	127	+ position: absolute;
	128	+ top: 50%;
	129	+ left: 50%;
	130	+ transform: translate(-50%, -50%);
	131	+}
	132	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,143 @@
	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">듣고 알맞은 것을 고르세요.</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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="pickGroup flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
	27	+ <article style="gap: 60px; bottom: 159px;
	28	+ left: 242px;">
	29	+ <div class="flex align-center">
	30	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	31	+ <p>1</p>
	32	+ </button>
	33	+ <p>a</p>
	34	+ </div>
	35	+ </article>
	36	+ <article style="gap: 60px; bottom: 159px;
	37	+ right: 559px;">
	38	+ <div class="flex align-center">
	39	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	40	+ <p>2</p>
	41	+ </button>
	42	+ <p>b</p>
	43	+ </div>
	44	+ </article>
	45	+ <article style="gap: 60px; bottom: 159px;
	46	+ right: 559px;">
	47	+ <div class="flex align-center">
	48	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	49	+ <p>3</p>
	50	+ </button>
	51	+ <p>c</p>
	52	+ </div>
	53	+ </article>
	54	+ </div>
	55	+ </div>
	56	+ </div>
	57	+ <div class="next-btn" @click="goToPage('Chapter3_5')"><img src="../../../../resources/img/right.png" alt=""></div>
	58	+ </div>
	59	+ </div>
	60	+</template>
	61	+
	62	+<script>
	63	+export default {
	64	+ data() {
	65	+ return {
	66	+ timer: '00'
	67	+ }
	68	+ },
	69	+ methods: {
	70	+ goToPage(page) {
	71	+ this.$router.push({ name: page });
	72	+ },
	73	+ startTimer() {
	74	+ if (this.intervalId) {
	75	+ clearInterval(this.intervalId);
	76	+ }
	77	+ this.timer = 5;
	78	+ this.intervalId = setInterval(() => {
	79	+ if (this.timer > 0) {
	80	+ this.timer--;
	81	+ } else {
	82	+ clearInterval(this.intervalId);
	83	+ }
	84	+ }, 1000);
	85	+ }
	86	+ },
	87	+ watch: {
	88	+
	89	+ },
	90	+ computed: {
	91	+
	92	+ },
	93	+ components: {
	94	+ },
	95	+ mounted() {
	96	+
	97	+ }
	98	+}
	99	+</script>
	100	+<style scoped>
	101	+.inputbox {
	102	+ font-size: 38px;
	103	+ font-family: 'Pretendard-ExtraBold';
	104	+}
	105	+
	106	+.imgGroup button {
	107	+ position: relative;
	108	+}
	109	+
	110	+.imgGroup button p,
	111	+.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';
	123	+}
	124	+
	125	+.pickGroup p {
	126	+ font-size: 34px;
	127	+ font-weight: bold;
	128	+}
	129	+
	130	+.pickGroup button {
	131	+ position: relative;
	132	+ margin-right: 30px;
	133	+}
	134	+
	135	+.pickGroup button p {
	136	+ font-size: 34px;
	137	+ color: #c6c6c6;
	138	+ position: absolute;
	139	+ top: 50%;
	140	+ left: 50%;
	141	+ transform: translate(-50%, -50%);
	142	+}
	143	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,146 @@
	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_4')"><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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="imgGroup ">
	27	+ <img src="../../../../resources/img/img125_64s.png" alt="">
	28	+ </div>
	29	+ <!-- <div class=" flex align-center justify-center">
	30	+ <div class="inputbox mt30">
	31	+ go
	32	+ </div>
	33	+ </div> -->
	34	+ <div class="pickGroup mt40 flex align-center justify-center" style="gap: 100px;">
	35	+ <p>i</p>
	36	+ <p>(</p>
	37	+ <article style="gap: 60px; bottom: 159px;
	38	+ left: 242px;">
	39	+ <div class="flex align-center">
	40	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	41	+ <p>1</p>
	42	+ </button>
	43	+ <p>a</p>
	44	+ </div>
	45	+ </article>
	46	+ <article style="gap: 60px; bottom: 159px;
	47	+ right: 559px;">
	48	+ <div class="flex align-center">
	49	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	50	+ <p>2</p>
	51	+ </button>
	52	+ <p>b</p>
	53	+ </div>
	54	+ </article>
	55	+ <p>)</p>
	56	+ <p>bed</p>
	57	+ </div>
	58	+ </div>
	59	+ </div>
	60	+ <div class="next-btn" @click="goToPage('Chapter3_6')"><img src="../../../../resources/img/right.png" alt=""></div>
	61	+ </div>
	62	+ </div>
	63	+</template>
	64	+
	65	+<script>
	66	+export default {
	67	+ data() {
	68	+ return {
	69	+ timer: '00'
	70	+ }
	71	+ },
	72	+ methods: {
	73	+ goToPage(page) {
	74	+ this.$router.push({ name: page });
	75	+ },
	76	+ startTimer() {
	77	+ if (this.intervalId) {
	78	+ clearInterval(this.intervalId);
	79	+ }
	80	+ this.timer = 5;
	81	+ this.intervalId = setInterval(() => {
	82	+ if (this.timer > 0) {
	83	+ this.timer--;
	84	+ } else {
	85	+ clearInterval(this.intervalId);
	86	+ }
	87	+ }, 1000);
	88	+ }
	89	+ },
	90	+ watch: {
	91	+
	92	+ },
	93	+ computed: {
	94	+
	95	+ },
	96	+ components: {
	97	+ },
	98	+ mounted() {
	99	+
	100	+ }
	101	+}
	102	+</script>
	103	+<style scoped>
	104	+.inputbox {
	105	+ font-size: 38px;
	106	+ font-family: 'Pretendard-ExtraBold';
	107	+}
	108	+
	109	+.imgGroup button {
	110	+ position: relative;
	111	+}
	112	+
	113	+.imgGroup button p,
	114	+.textbox p {
	115	+ position: absolute;
	116	+ top: 50%;
	117	+ left: 50%;
	118	+ transform: translate(-50%, -50%);
	119	+ width: fit-content;
	120	+ height: fit-content;
	121	+ background: #ffffffb8;
	122	+ border-radius: 5px;
	123	+ padding: 10px;
	124	+ font-size: 48px;
	125	+ font-family: 'ONEMobilePOP';
	126	+}
	127	+
	128	+.pickGroup p {
	129	+ font-size: 34px;
	130	+ font-weight: bold;
	131	+}
	132	+
	133	+.pickGroup button {
	134	+ position: relative;
	135	+ margin-right: 30px;
	136	+}
	137	+
	138	+.pickGroup button p {
	139	+ font-size: 34px;
	140	+ color: #c6c6c6;
	141	+ position: absolute;
	142	+ top: 50%;
	143	+ left: 50%;
	144	+ transform: translate(-50%, -50%);
	145	+}
	146	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,98 @@
	1	+<template>
	2	+ <div id="Chapter2_2" 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_5')"><img src="../../../../resources/img/left.png" alt="">
	9	+ </div>
	10	+ <div class="content title-box">
	11	+ <p class="title mt25 title-bg">step3.</p>
	12	+ <div class="flex align-center mb30">
	13	+ <p class="subtitle2 mr20">듣고 알맞은 것을 고르세요.</p>
	14	+ <button><img src="../../../../resources/img/btn10_s.png" alt="">
	15	+ </button>
	16	+ </div>
	17	+ <div class="time-bg">
	18	+ <div>
	19	+ <div class="time">
	20	+ <p class="second">{{ timer }}</p>
	21	+ <p class="text">sec</p>
	22	+ </div>
	23	+ </div>
	24	+ </div>
	25	+
	26	+ <div class="imgGroup">
	27	+ <img src="../../../../resources/img/img114_57s.png" alt="">
	28	+ </div>
	29	+
	30	+ <div class="flex justify-center">
	31	+ <div class="btnGroup mt50 flex justify-between">
	32	+ <button class="popTxt" v-for="(item, index) in items" :key="index" @click="updateContent(index)"
	33	+ :class="{ active: selectedIndex === index }">
	34	+ <img :src="item.imgSrc1">
	35	+ <img :src="item.imgSrc2" v-if="selectedIndex === index" style="display: block;">
	36	+ </button>
	37	+ </div>
	38	+ </div>
	39	+ </div>
	40	+ <div class="next-btn" @click="goToPage('Chapter3_7')"><img src="../../../../resources/img/right.png" alt="">
	41	+ </div>
	42	+ </div>
	43	+ </div>
	44	+</template>
	45	+
	46	+<script>
	47	+export default {
	48	+ data() {
	49	+ return {
	50	+ items: [
	51	+ { imgSrc2: 'client/resources/img/img53_6_35s.png', imgSrc1: 'client/resources/img/img53_1_35s.png', },
	52	+ { imgSrc2: 'client/resources/img/img53_7_35s.png', imgSrc1: 'client/resources/img/img53_2_35s.png', },
	53	+ { imgSrc2: 'client/resources/img/img53_8_35s.png', imgSrc1: 'client/resources/img/img53_3_35s.png', },
	54	+ { imgSrc2: 'client/resources/img/img53_9_35s.png', imgSrc1: 'client/resources/img/img53_4_35s.png', },
	55	+ { imgSrc2: 'client/resources/img/img53_10_35s.png', imgSrc1: 'client/resources/img/img53_5_35s.png', }
	56	+ ],
	57	+ selectedIndex: null,
	58	+ timer: "00",
	59	+ intervalId: null,
	60	+ };
	61	+ },
	62	+ methods: {
	63	+ goToPage(page) {
	64	+ this.$router.push({ name: page });
	65	+ },
	66	+ updateContent(index) {
	67	+ this.selectedIndex = index;
	68	+ this.currentCon = this.items[index].con;
	69	+ },
	70	+ startTimer() {
	71	+ if (this.intervalId) {
	72	+ clearInterval(this.intervalId);
	73	+ }
	74	+ this.timer = 5;
	75	+ this.intervalId = setInterval(() => {
	76	+ if (this.timer > 0) {
	77	+ this.timer--;
	78	+ } else {
	79	+ clearInterval(this.intervalId);
	80	+ }
	81	+ }, 1000);
	82	+ }
	83	+ },
	84	+ beforeDestroy() {
	85	+ if (this.intervalId) {
	86	+ clearInterval(this.intervalId);
	87	+ }
	88	+ }
	89	+}
	90	+</script>
	91	+
	92	+<style scoped>
	93	+.popTxt img {
	94	+ position: absolute;
	95	+ top: 0;
	96	+ left: 0;
	97	+}
	98	+</style>

a67c900

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

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

...	...	@@ -0,0 +1,157 @@
	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_6')"><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">듣고 알맞은 것을 고르세요.</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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+
	27	+ <div class="pickGroup flex align-center justify-between" style="gap: 100px;">
	28	+ <p>1. 문제</p>
	29	+ <div class="flex justify-center" style="gap: 60px;">
	30	+ <article >
	31	+ <div class="flex align-center">
	32	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	33	+ <p>1</p>
	34	+ </button>
	35	+ <img src="../../../../resources/img/img111_56s.png" alt="">
	36	+ </div>
	37	+ </article>
	38	+ <article >
	39	+ <div class="flex align-center">
	40	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	41	+ <p>2</p>
	42	+ </button>
	43	+ <img src="../../../../resources/img/img112_56s.png" alt="">
	44	+ </div>
	45	+ </article>
	46	+ </div>
	47	+ </div>
	48	+ <div class="pickGroup mt40 flex align-center justify-between" style="gap: 100px;">
	49	+ <p>2. 문제 ㅇㅇㅇ</p>
	50	+ <div class="flex justify-center" style="gap: 60px;">
	51	+ <article >
	52	+ <div class="flex align-center">
	53	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	54	+ <p>1</p>
	55	+ </button>
	56	+ <img src="../../../../resources/img/img111_56s.png" alt="">
	57	+ </div>
	58	+ </article>
	59	+ <article >
	60	+ <div class="flex align-center">
	61	+ <button><img src="../../../../resources/img/img136_71s.png" alt="">
	62	+ <p>2</p>
	63	+ </button>
	64	+ <img src="../../../../resources/img/img112_56s.png" alt="">
	65	+ </div>
	66	+ </article>
	67	+ </div>
	68	+ </div>
	69	+ </div>
	70	+ </div>
	71	+ <div class="next-btn" @click="goToPage('Chapter3_8')"><img src="../../../../resources/img/right.png" alt=""></div>
	72	+ </div>
	73	+ </div>
	74	+</template>
	75	+
	76	+<script>
	77	+export default {
	78	+ data() {
	79	+ return {
	80	+ timer: '00'
	81	+ }
	82	+ },
	83	+ methods: {
	84	+ goToPage(page) {
	85	+ this.$router.push({ name: page });
	86	+ },
	87	+ startTimer() {
	88	+ if (this.intervalId) {
	89	+ clearInterval(this.intervalId);
	90	+ }
	91	+ this.timer = 5;
	92	+ this.intervalId = setInterval(() => {
	93	+ if (this.timer > 0) {
	94	+ this.timer--;
	95	+ } else {
	96	+ clearInterval(this.intervalId);
	97	+ }
	98	+ }, 1000);
	99	+ }
	100	+ },
	101	+ watch: {
	102	+
	103	+ },
	104	+ computed: {
	105	+
	106	+ },
	107	+ components: {
	108	+ },
	109	+ mounted() {
	110	+
	111	+ }
	112	+}
	113	+</script>
	114	+<style scoped>
	115	+.inputbox {
	116	+ font-size: 38px;
	117	+ font-family: 'Pretendard-ExtraBold';
	118	+}
	119	+
	120	+.imgGroup button {
	121	+ position: relative;
	122	+}
	123	+
	124	+.imgGroup button p,
	125	+.textbox p {
	126	+ position: absolute;
	127	+ top: 50%;
	128	+ left: 50%;
	129	+ transform: translate(-50%, -50%);
	130	+ width: fit-content;
	131	+ height: fit-content;
	132	+ background: #ffffffb8;
	133	+ border-radius: 5px;
	134	+ padding: 10px;
	135	+ font-size: 48px;
	136	+ font-family: 'ONEMobilePOP';
	137	+}
	138	+.pickGroup{padding: 0px 80px;}
	139	+.pickGroup p {
	140	+ font-size: 34px;
	141	+ font-weight: bold;
	142	+}
	143	+
	144	+.pickGroup button {
	145	+ position: relative;
	146	+ margin-right: 30px;
	147	+}
	148	+
	149	+.pickGroup button p {
	150	+ font-size: 34px;
	151	+ color: #c6c6c6;
	152	+ position: absolute;
	153	+ top: 50%;
	154	+ left: 50%;
	155	+ transform: translate(-50%, -50%);
	156	+}
	157	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,122 @@
	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_7')"><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">주어진 단어 중 인 것을 고르세요.</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-bg">
	19	+ <div>
	20	+ <div class="time">
	21	+ <p class="second">{{ timer }}</p>
	22	+ <p class="text">sec</p>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="imgGroup flex align-center justify-center mt50">
	27	+ <img src="../../../../resources/img/img114_57s.png" alt="">
	28	+ <input class="yellow-bd ml50" type="text" name="" id="" placeholder="답을 입력하세요.">
	29	+
	30	+ </div>
	31	+ <div class="flex justify-center mt40 " >
	32	+ <div class="dragGroup flex " style="gap: 50px;">
	33	+ <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
	34	+ <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
	35	+ <button><img src="../../../../resources/img/img63_37s.png" alt=""><p @click="handleDrag(1)">A</p></button>
	36	+ <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
	37	+ <button><img src="../../../../resources/img/img63_37s_1.png" alt=""><p @click="handleDrag(1)">A</p></button>
	38	+ <button><img src="../../../../resources/img/img63_37s_2.png" alt=""><p @click="handleDrag(1)">A</p></button>
	39	+ </div>
	40	+
	41	+ </div>
	42	+ </div>
	43	+ </div>
	44	+ <div class="next-btn" @click="goToPage('Chapter3_9')"><img src="../../../../resources/img/right.png" alt=""></div>
	45	+ </div>
	46	+ </div>
	47	+ </template>
	48	+
	49	+ <script>
	50	+ export default {
	51	+ data() {
	52	+ return {
	53	+ timer: '00',
	54	+ showButton1: false,
	55	+ showButton2: false,
	56	+ showButton3: false,
	57	+ showButton4: false,
	58	+ }
	59	+ },
	60	+ methods: {
	61	+ goToPage(page) {
	62	+ this.$router.push({ name: page });
	63	+ },
	64	+ handleDrag(dragNumber) {
	65	+ // Drag 버튼 숨기기
	66	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	67	+ if (dragNumber === 1) {
	68	+ this.showButton1 = false;
	69	+ } else if (dragNumber === 2) {
	70	+ this.showButton2 = false;
	71	+ } else if (dragNumber === 3) {
	72	+ this.showButton3 = false;
	73	+ }
	74	+ },
	75	+ showButton(dropNumber) {
	76	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	77	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	78	+ if (dropNumber === 1) {
	79	+ this.showButton1 = true;
	80	+ } else if (dropNumber === 2) {
	81	+ this.showButton2 = true;
	82	+ } else if (dropNumber === 3) {
	83	+ this.showButton3 = true;
	84	+ } else if (dropNumber === 4) {
	85	+ this.showButton4 = true;
	86	+ }
	87	+ },
	88	+ startTimer() {
	89	+ if (this.intervalId) {
	90	+ clearInterval(this.intervalId);
	91	+ }
	92	+ this.timer = 5;
	93	+ this.intervalId = setInterval(() => {
	94	+ if (this.timer > 0) {
	95	+ this.timer--;
	96	+ } else {
	97	+ clearInterval(this.intervalId);
	98	+ }
	99	+ }, 1000);
	100	+ }
	101	+ },
	102	+ watch: {
	103	+
	104	+ },
	105	+ computed: {
	106	+
	107	+ },
	108	+ components: {
	109	+ },
	110	+ mounted() {
	111	+
	112	+ }
	113	+ }
	114	+ </script>
	115	+ <style scoped>
	116	+ .dropGroup button{position: relative;}
	117	+ .dropGroup button p{ font-size: 48px;}
	118	+ .dragGroup{background-color: #F2F4F8; padding: 30px 50px; width: max-content; border-radius: 20px;}
	119	+.dragGroup button p{
	120	+ font-size: 48px;
	121	+ }
	122	+</style>(파일 끝에 줄바꿈 문자 없음)

a67c900

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

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

...	...	@@ -0,0 +1,128 @@
	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_8')"><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">그림을 보고 단어를 입력하세요.</p>
	13	+ <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
	14	+ </button> -->
	15	+ </div>
	16	+
	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>
	23	+ </div>
	24	+ </div>
	25	+ </div>
	26	+ <div class="imgGroup mt50">
	27	+ <img src="../../../../resources/img/img115_58s.png" alt="">
	28	+ <div class=" mt50">
	29	+ <input class="yellow-bd" type="text" name="" id="" placeholder="답을 입력하세요.">
	30	+
	31	+ </div>
	32	+ </div>
	33	+
	34	+ </div>
	35	+ </div>
	36	+ <div class="next-btn" @click="goToPage('Chapter3_10')"><img src="../../../../resources/img/right.png" alt="">
	37	+ </div>
	38	+ </div>
	39	+ </div>
	40	+</template>
	41	+
	42	+<script>
	43	+export default {
	44	+ data() {
	45	+ return {
	46	+ timer: '00',
	47	+ showButton1: false,
	48	+ showButton2: false,
	49	+ showButton3: false,
	50	+ showButton4: false,
	51	+ }
	52	+ },
	53	+ methods: {
	54	+ goToPage(page) {
	55	+ this.$router.push({ name: page });
	56	+ },
	57	+ handleDrag(dragNumber) {
	58	+ // Drag 버튼 숨기기
	59	+ // 여기서는 상태 관리를 통해 버튼을 제어합니다.
	60	+ if (dragNumber === 1) {
	61	+ this.showButton1 = false;
	62	+ } else if (dragNumber === 2) {
	63	+ this.showButton2 = false;
	64	+ } else if (dragNumber === 3) {
	65	+ this.showButton3 = false;
	66	+ }
	67	+ },
	68	+ showButton(dropNumber) {
	69	+ // Drop 영역의 이미지 클릭 이벤트 핸들러 설정
	70	+ // 여기서는 상태 관리를 통해 버튼을 보이게 합니다.
	71	+ if (dropNumber === 1) {
	72	+ this.showButton1 = true;
	73	+ } else if (dropNumber === 2) {
	74	+ this.showButton2 = true;
	75	+ } else if (dropNumber === 3) {
	76	+ this.showButton3 = true;
	77	+ } else if (dropNumber === 4) {
	78	+ this.showButton4 = true;
	79	+ }
	80	+ },
	81	+ startTimer() {
	82	+ if (this.intervalId) {
	83	+ clearInterval(this.intervalId);
	84	+ }
	85	+ this.timer = 5;
	86	+ this.intervalId = setInterval(() => {
	87	+ if (this.timer > 0) {
	88	+ this.timer--;
	89	+ } else {
	90	+ clearInterval(this.intervalId);
	91	+ }
	92	+ }, 1000);
	93	+ }
	94	+ },
	95	+ watch: {
	96	+
	97	+ },
	98	+ computed: {
	99	+
	100	+ },
	101	+ components: {
	102	+ },
	103	+ mounted() {
	104	+
	105	+ }
	106	+}
	107	+</script>
	108	+<style scoped>
	109	+input.yellow-bd{width: 30%;}
	110	+.dropGroup button {
	111	+ position: relative;
	112	+}
	113	+
	114	+.dropGroup button p {
	115	+ font-size: 48px;
	116	+}
	117	+
	118	+.dragGroup {
	119	+ background-color: #F2F4F8;
	120	+ padding: 30px 50px;
	121	+ width: max-content;
	122	+ border-radius: 20px;
	123	+}
	124	+
	125	+.dragGroup button p {
	126	+ font-size: 48px;
	127	+}
	128	+</style>(파일 끝에 줄바꿈 문자 없음)

...	...	@@ -919,19 +919,19 @@
919	919
920	920	/* text color */
921	921	.orange {
922		- color: var(--color-orange);
	922	+ color: #ffa300;
923	923	}
924	924
925	925	.green {
926		- color: var(--color-green);
	926	+ color: #00b029;
927	927	}
928	928
929	929	.blue {
930		- color: var(--color-blue);
	930	+ color:#0042ff;
931	931	}
932	932
933	933	.red {
934		- color: var(--color-red);
	934	+ color: #fe0000;
935	935	}
936	936
937	937	.cursor {

...	...	@@ -1,22 +1,42 @@
1	1	@charset "utf-8";
2		-@font-face {
3		- font-family: 'Pretendard';
4		- font-weight: 100;
5		- font-display: swap;
6		- src: local('Pretendard Thin'), url(../font/Pretendard-Thin.woff2) format('woff2'), url(../font/Pretendard-Thin.woff) format('woff');
7		-}
	2	+
8	3	@font-face {
9	4	font-family: 'Pretendard-Bold';
10		- font-weight: 100;
11		- font-display: swap;
12		- src: local('Pretendard Bold'), url(../font/Pretendard-Bold.woff2) format('woff2'), url(../font/Pretendard-Bold.woff2) format('woff');
	5	+ src: url('../font/Pretendard-Bold.otf') format('opentype');
	6	+}
	7	+@font-face {
	8	+ font-family: 'Pretendard-Black';
	9	+ src: url('../font/Pretendard-Black.otf') format('opentype');
	10	+}
	11	+@font-face {
	12	+ font-family: 'Pretendard-ExtraBold';
	13	+ src: url('../font/Pretendard-ExtraBold.otf') format('opentype');
	14	+}
	15	+@font-face {
	16	+ font-family: 'Pretendard-ExtraLight';
	17	+ src: url('../font/Pretendard-ExtraLight.otf') format('opentype');
	18	+}
	19	+@font-face {
	20	+ font-family: 'Pretendard-Light';
	21	+ src: url('../font/Pretendard-Light.otf') format('opentype');
	22	+}
	23	+@font-face {
	24	+ font-family: 'Pretendard-Medium';
	25	+ src: url('../font/Pretendard-Medium.otf') format('opentype');
13	26	}
14	27	@font-face {
15	28	font-family: 'Pretendard-Regular';
16		- font-weight: 100;
17		- font-display: swap;
18		- src: local('Pretendard Regular'), url(../font/Pretendard-Regular.woff2) format('woff2'), url(../font/Pretendard-Regular.woff2) format('woff');
	29	+ src: url('../font/Pretendard-Regular.otf') format('opentype');
19	30	}
	31	+@font-face {
	32	+ font-family: 'Pretendard-SemiBold';
	33	+ src: url('../font/Pretendard-SemiBold.otf') format('opentype');
	34	+}
	35	+@font-face {
	36	+ font-family: 'Pretendard-Thin';
	37	+ src: url('../font/Pretendard-Thin.otf') format('opentype');
	38	+}
	39	+
20	40
21	41	@font-face {
22	42	font-family: 'ONEMobilePOP';
...	...	@@ -39,6 +59,10 @@
39	59	src: url('../font/ONEMobilePOPOTF.otf') format('opentype');
40	60	}
41	61
	62	+@font-face {
	63	+ font-family: 'neodgm';
	64	+ src: url('../font/neodgm.ttf') format('truetype');
	65	+}
42	66
43	67	* {
44	68	padding: 0;

...	...	@@ -258,7 +258,7 @@
258	258	display: inline-block;
259	259	font-family: 'ONEMobileOTF-Bold';
260	260	}
261		-
	261	+.race-wrap .title-box .subtitle2{}
262	262	.race-box {
263	263	width: 1063px;
264	264	height: 516px;
...	...	@@ -314,7 +314,7 @@
314	314	/* 챕터 */
315	315	.content-wrap {
316	316	width: 1808px;
317		-
	317	+
318	318	}
319	319
320	320	.content-wrap::before {
...	...	@@ -327,16 +327,23 @@
327	327	position: absolute;
328	328	top: 17px;
329	329	}
330		-.content-wrap > .title-box{margin-left: 75px;}
	330	+
	331	+.content-wrap>.title-box {
	332	+ margin-left: 75px;
	333	+}
	334	+
331	335	.content p.title-bg {
332	336	width: max-content;
333	337	height: max-content;
334		- background: linear-gradient(to right, #eaedf4, #fff);
	338	+ background: linear-gradient(to right, #eaedf4, rgba(255, 255, 255, 0));
335	339	padding: 20px 60px;
336	340	margin-bottom: 30px;
337	341	}
	342	+
	343	+
338	344	.content {
339		- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	345	+ position: relative;
	346	+ box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
340	347	width: 1670px;
341	348	height: 710px;
342	349	background-color: #fff;
...	...	@@ -358,50 +365,265 @@
358	365	left: 50%;
359	366	transform: translateY(-50%) translateX(-50%);
360	367	}
361		-.look-text{position: absolute; right: 60px; bottom: 0;}
362		-.look-text button{position: relative;}
363		-.look-text p{ position: absolute;
	368	+
	369	+.look-text {
	370	+ position: absolute;
	371	+ right: 60px;
	372	+ bottom: 0;
	373	+}
	374	+
	375	+.look-text button {
	376	+ position: relative;
	377	+}
	378	+
	379	+.look-text p {
	380	+ position: absolute;
364	381	top: 45%;
365	382	left: 50%;
366	383	transform: translate(-50%, -50%);
367	384	font-size: 28px;
368		-
369		- }
	385	+
	386	+}
370	387
371	388	/* step1-1 */
372		-.imgGroup, .textareaGroup{width: 100%; text-align: center;}
373		-.textareaGroup{margin-top: 40px;}
374		-.textareaGroup textarea{width: 1460px; height: 200px; background-color: #eff2f7; border-radius: 10px; padding: 30px 40px;
375		- line-height: 30px; font-size: 24px; font-family: 'Pretendard-Regular';}
376		- /* step1-1-팝업 */
377		- .popup {
378		- /* display: none; */
	389	+.imgGroup,
	390	+.textareaGroup {
	391	+ width: 100%;
	392	+ text-align: center;
	393	+}
	394	+
	395	+.textareaGroup {
	396	+ margin-top: 40px;
	397	+}
	398	+
	399	+.textareaGroup textarea {
	400	+ width: 1460px;
	401	+ height: 200px;
	402	+ background-color: #eff2f7;
	403	+ border-radius: 10px;
	404	+ padding: 30px 40px;
	405	+ line-height: 30px;
	406	+ font-size: 24px;
	407	+ font-family: 'Pretendard-Regular';
	408	+}
	409	+
	410	+/* step1-1-팝업 */
	411	+.popup {
	412	+ /* display: none; */
	413	+ position: absolute;
	414	+ width: 355px;
	415	+ height: 327px;
	416	+ background-color: white;
	417	+ border: 3px solid #FFBD14;
	418	+ border-radius: 10px;
	419	+ padding: 20px 40px;
	420	+}
	421	+
	422	+.popup h3 {
	423	+ font-size: 42px;
	424	+}
	425	+
	426	+.popup .yellow-box {
	427	+ width: 33px;
	428	+ height: 33px;
	429	+ color: #FFBA08;
	430	+ background-color: #FFF3D7;
	431	+ padding: 7px;
	432	+ border-radius: 5px;
	433	+ margin-right: 10px;
	434	+}
	435	+
	436	+
	437	+/* step1-2 */
	438	+.readGroup h4{font-size: 20px; margin-bottom: 10px;}
	439	+.readGroup > div{background-image: url('../img/img38_1_s.png'); width: 1282px; height: 492px; padding: 10px;}
	440	+.readGroup .textbox{height: calc(100% - 51px); overflow-y: auto; padding: 20px; }
	441	+.readGroup .icon {
	442	+ text-align: center;
	443	+}
	444	+
	445	+.readGroup p.read {
	446	+ width: max-content;
	447	+ border-radius: 10px;
	448	+ font-size: 24px;
	449	+ font-family: 'Pretendard-Regular';
	450	+ background-color: #EAEDF4;
	451	+ padding: 10px 20px;
	452	+}
	453	+
	454	+/* step1-3 */
	455	+.listenGroup .title-bg {
	456	+ position: absolute;
	457	+ z-index: 1;
	458	+}
	459	+
	460	+.listenGroup img.bg {
	461	+ position: absolute;
	462	+ top: 0;
	463	+ width: 1670px;
	464	+ height: 710px;
	465	+}
	466	+
	467	+.listenGroup .listen-btn {
	468	+ position: absolute;
	469	+ top: 77%;
	470	+ left: 50%;
	471	+ transform: translateY(-50%) translateX(-50%);
	472	+}
	473	+
	474	+.listenGroup .textbox {
	475	+ position: absolute;
	476	+ top: 45%;
	477	+ left: 31%;
	478	+ transform: translate(-50%, -50%);
	479	+ width: 900px;
	480	+}
	481	+
	482	+.listenGroup .textbox p {
	483	+ font-size: 28px;
	484	+ line-height: 45px;
	485	+}
	486	+
	487	+.listenGroup p.title {
	488	+ font-size: 42px;
	489	+ text-shadow: 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff, 0px 0px 0 #fff;
	490	+ -webkit-text-stroke-width: 0px;
	491	+ -webkit-text-stroke-color: #fff;
	492	+ font-family: 'ONEMobilePOP';
	493	+ margin-bottom: 25px;
	494	+}
	495	+
	496	+/* step2 */
	497	+.vocaGroup{width: 1380px;}
	498	+.vocaGroup h3 {
	499	+ font-size: 42px;
	500	+}
	501	+
	502	+.vocaGroup .yellow-box {
	503	+ width: 33px;
	504	+ height: 33px;
	505	+ color: #FFBA08;
	506	+ background-color: #FFF3D7;
	507	+ padding: 7px;
	508	+ border-radius: 5px;
	509	+ margin-right: 10px;
	510	+}
	511	+
	512	+.vocaGroup .imgGroup{width: max-content;}
	513	+
	514	+/* step2_1 */
	515	+.mic-btn{position: relative; background-image: url('../img/img44_s.png'); width: 315px; height: 315px;}
	516	+.mic-btn img{position: absolute;
	517	+ top: 50%;
	518	+ left: 50%;
	519	+ transform: translate(-50%, -50%);}
	520	+
	521	+ .readGroup section p, .readGroup section input{
	522	+ width: 780px;
	523	+ height: 65px;
	524	+ border-radius: 10px;
	525	+ padding: 20px ;
	526	+ text-align: center;
	527	+ font-size: 28px;
	528	+
	529	+ }
	530	+
	531	+/* step2_2 */
	532	+.popTxt{position: relative; width: fit-content;}
	533	+.popTxt img:last-child{position: absolute; top: 0; left: 0;}
	534	+
	535	+h4{font-size: 20px;}
	536	+
	537	+
	538	+input.speak{background-color: #FFF8E9; border: 0;}
	539	+p.read-ai{border: 3px solid #FFBA08 ;}
	540	+
	541	+/* step2_3 */
	542	+.yellow-box-big {
	543	+ width: 60px;
	544	+ height: 60px;
	545	+ color: #FFBA08;
	546	+ background-color: #FFF3D7;
	547	+ padding: 13px;
	548	+ border-radius: 10px;
	549	+ margin-right: 10px;
	550	+ font-size: 32px;
	551	+}
	552	+.btnGroup{
	553	+ width: 560px;
	554	+}
	555	+.time-bg{
	556	+ position: absolute;
	557	+ top: 50px;
	558	+ right: 50px;
	559	+ text-align: center;
	560	+ font-family: 'neodgm'; background-image: url('../img/img55_s.png'); width: 110px; height: 128px;}
	561	+ .time-bg > div{position: relative;}
	562	+ .time{
	563	+ color: #752AFF;
379	564	position: absolute;
380		- width: 355px;
381		- height: 327px;
382		- background-color: white;
383		- border: 3px solid #FFBD14;
384		- border-radius: 10px;
385		- padding: 20px 40px;
386		- }
	565	+ top: 70px;
	566	+ left: 50%;
	567	+ transform: translate(-50%, -50%);}
	568	+ .time .second{font-size: 51px;}
	569	+ .time .text{font-size: 21px;}
387	570
388		- .popup h3{font-size: 42px;}
389		- .popup .yellow-box{width: 33px; height: 33px; color: #FFBA08; background-color: #FFF3D7; padding: 7px;
390		- border-radius: 5px; margin-right: 10px;}
	571	+/* step2_5 */
	572	+.dropGroup .popTxt{position: relative; width: fit-content;}
	573	+.dropGroup .popTxt img:last-child{position: relative}
	574	+.dropGroup span{
	575	+ font-size: 36px;
	576	+ font-family: 'Pretendard-Bold';
	577	+
	578	+}
	579	+.dropGroup button{position: absolute;}
	580	+.dropGroup button p{
	581	+ position: absolute;
	582	+ top: 50%;
	583	+ left: 50%;
	584	+ transform: translate(-50%, -50%);
	585	+}
	586	+.dragGroup article{position: absolute;}
	587	+.dragGroup button{position: relative;}
	588	+.dragGroup button p{
	589	+ position: absolute;
	590	+ top: 50%;
	591	+ left: 50%;
	592	+ transform: translate(-50%, -50%);
	593	+
	594	+}
	595	+
	596	+/* step2_11 */
	597	+.inputGroup{
	598	+ position: relative;
	599	+ background-color: #FFF3D7;
	600	+ border: #FFBA08 2px solid;
	601	+ border-radius: 10px;
	602	+ padding: 15px 20px;
	603	+ min-height: 100px;
	604	+ min-width: 300px;
	605	+ font-size: 28px;
	606	+}
	607	+.inputGroup::before{
	608	+ background-image: url('../img/img89_43s.png');
	609	+ background-size: 58px 20px;
	610	+ width: 58px;
	611	+ height: 20px;
	612	+ content: "";
	613	+ display: block;
	614	+ position: absolute;
	615	+ top: 93px;
	616	+}
	617	+.inputGroup input{border: #CAE5FF 1px solid; border-radius: 5px; padding: 10px 20px; width: min-content;}
391	618
392	619
393		- /* step1-2 */
394		- .readGroup{
	620	+/* step3_2 */
	621	+.inputbox{border: #FFE029 solid 5px; border-radius: 10px; padding: 20px; background-color: #FFF3D7; width: min-content;}
395	622
396		- }
397		- .readGroup .icon{text-align: center;}
398		- .readGroup p.read{
399		- width: max-content;
400		- border-radius: 10px;
401		- font-size: 24px; font-family: 'Pretendard-Regular'; background-color: #EAEDF4; padding: 10px 20px;}
402		-
403		-
404		-.next-btn, .pre-btn{cursor: pointer;}
	623	+.next-btn,
	624	+.pre-btn {
	625	+ cursor: pointer;
	626	+}
405	627
406	628
407	629
...	...	@@ -412,26 +634,41 @@
412	634	.underline {
413	635	text-decoration: underline;
414	636	}
415		-
	637	+.bd-bt{border-bottom:#FFBA08 solid 2px ; min-width: 66px;
	638	+ width: max-content; }
416	639	hr {
417	640	color: #C6C6C6;
418	641	margin: 10px 0 20px 0;
419	642	}
	643	+em.yellow{color: #FFBA08; font-style: normal;}
	644	+em.yellow-bg{background-color: #FFBA08; font-style: normal;}
	645	+input.yellow-bd{border:#FFBA08 solid 2px ; border-radius: 10px; padding: 20px; font-size: 24px; font-family: 'ONEMobileOTF-Regular';}
420	646
421		-.title2 {
422		- font-size: 20px;
423		- font-weight: bold;
	647	+.blue-c{border: #2948FF solid 5px; width: 30px; height: 30px; border-radius: 50px;}
	648	+
	649	+.title-box .title {
	650	+ font-size: 32px;
	651	+ font-family: 'ONEMobilePOPOTF';
424	652	}
425	653
426	654	.title1 {
427	655	font-size: 24px;
428	656	font-weight: bold;
429	657	}
430		-
431		-.title-box .title {
432		- font-size: 32px;
433		- font-family: 'ONEMobilePOPOTF';
	658	+.title2 {
	659	+ font-size: 20px;
	660	+ font-weight: bold;
434	661	}
	662	+.title3 {
	663	+ font-size: 64px;
	664	+ font-family: 'Pretendard-ExtraBold';
	665	+}
	666	+.title4 {
	667	+ font-size: 31px;
	668	+ font-weight: bold;
	669	+}
	670	+
	671	+
435	672
436	673	.title-box .subtitle {
437	674	font-size: 16px;
...	...	@@ -442,4 +679,17 @@
442	679	border-radius: 20px;
443	680	display: inline-block;
444	681	font-family: 'ONEMobileOTF-Bold';
445		-} (파일 끝에 줄바꿈 문자 없음)
	682	+}
	683	+
	684	+.title-box .subtitle2{
	685	+ padding-left: 60px;
	686	+ font-size: 28px;
	687	+}
	688	+.subtitle3 {
	689	+ font-size: 42px;
	690	+ font-weight: bold;
	691	+ color: #464749;
	692	+ font-family: 'Pretendard-Light';
	693	+}
	694	+
	695	+.listen-btn{cursor: pointer;} (파일 끝에 줄바꿈 문자 없음)

...	...	@@ -4,7 +4,7 @@
4	4	<div class="profile mb30">
5	5	<div class="flex align-start">
6	6	<img src="../../resources/img/img16_s.png" alt="">
7		- <div class="ml25">
	7	+ <div class="ml25" style="width: 100%;">
8	8	<p class="name mb10">학생이름</p>
9	9	<p class="mb5">xx중학교 3학년 x반</p>
10	10	<progress-bar :progress="progress"></progress-bar>

...	...	@@ -8,37 +8,43 @@
8	8	<div class="pre-btn" @click="goToPage('Chapter1_1')"><img src="../../../../resources/img/left.png" alt=""></div>
9	9	<div class="content title-box">
10	10	<p class="title mt25 title-bg">step1. Hello WORLD</p>
11		-<h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
12		- <div class="readGroup">
13		- <article class="flex align-start mb10">
14		- <div class="icon mr40">
15		- <img src="../../../../resources/img/img37_s.png" alt="">
16		- <p class="name">발화좌</p>
	11	+ <div class="flex justify-center">
	12	+ <div class="readGroup">
	13	+ <h4>각 인물들의 대화를 집중해서 읽어보세요</h4>
	14	+ <div>
	15	+ <div class="textbox">
	16	+ <article class="flex align-start mb10">
	17	+ <div class="icon mr40">
	18	+ <img src="../../../../resources/img/img37_s.png" alt="">
	19	+ <p class="name">발화좌</p>
	20	+ </div>
	21	+ <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
	22	+ </article>
	23	+ <article class="flex align-start mb10 justify-end">
	24	+ <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
	25	+ <div class="icon ">
	26	+ <img src="../../../../resources/img/img37_s.png" alt="">
	27	+ <p class="name">발화좌</p>
	28	+ </div>
	29	+ </article>
	30	+ <article class="flex align-start mb10">
	31	+ <div class="icon mr40">
	32	+ <img src="../../../../resources/img/img37_s.png" alt="">
	33	+ <p class="name">발화좌</p>
	34	+ </div>
	35	+ <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
	36	+ </article>
	37	+ <article class="flex align-start mb10 justify-end">
	38	+ <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
	39	+ <div class="icon ">
	40	+ <img src="../../../../resources/img/img37_s.png" alt="">
	41	+ <p class="name">발화좌</p>
	42	+ </div>
	43	+ </article>
	44	+ </div>
17	45	</div>
18		- <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
19		- </article>
20		- <article class="flex align-start mb10 justify-end">
21		- <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
22		- <div class="icon ">
23		- <img src="../../../../resources/img/img37_s.png" alt="">
24		- <p class="name">발화좌</p>
25		- </div>
26		- </article>
27		- <article class="flex align-start mb10">
28		- <div class="icon mr40">
29		- <img src="../../../../resources/img/img37_s.png" alt="">
30		- <p class="name">발화좌</p>
31		- </div>
32		- <p class="read">What’s up man, nice to meet you Minsu. how are you today?</p>
33		- </article>
34		- <article class="flex align-start mb10 justify-end">
35		- <p class="read mr40">What’s up man, nice to meet you Minsu. how are you today?</p>
36		- <div class="icon ">
37		- <img src="../../../../resources/img/img37_s.png" alt="">
38		- <p class="name">발화좌</p>
39		- </div>
40		- </article>
41		-
	46	+
	47	+ </div>
42	48	</div>
43	49	</div>
44	50	<div class="next-btn" @click="goToPage('Chapter1_3')"><img src="../../../../resources/img/right.png" alt=""></div>

...	...	@@ -7,15 +7,18 @@
7	7	<div class="flex justify-between align-center">
8	8	<div class="pre-btn" @click="goToPage('Chapter1_2')"><img src="../../../../resources/img/left.png" alt=""></div>
9	9	<div class="content title-box">
10		- <p class="title mt25 title-bg">step1. Hello WORLD</p>
11		- <div class="videoCon">
12		- <img src="../../../../resources/img/img34_s.png" data-num="1">
13		- <button class="videoStart" data-video="1" tabindex="0" aria-label="동영상 재생"><img src="../../../../resources/img/btn09_s.png"
	10	+ <div class="listenGroup">
	11	+ <p class="title mt25 title-bg">step1. Hello WORLD</p>
	12	+ <img class="bg" src="../../../../resources/img/img39_s.png" data-num="1">
	13	+ <div class="textbox">
	14	+ <p class="title">The Eiffel Tower and the statue of Lierbty</p>
	15	+ <p>The Eiffel Tower is a symbol of Paris, France. People call it the "Iron Lady." It was built for the 1889 World's Fair in Paris. It's 320 meters tall. There are 1,665 steps to the top. You can walk or take elevators to the top.</p>
	16	+ </div>
	17	+ <button class="listen-btn" data-video="1" tabindex="0" aria-label="재생"><img src="../../../../resources/img/btn09_s.png"
14	18	data-num="1"></button>
15		- <div class="look-text"> <button ><img src="../../../../resources/img/btn08_s.png" alt=""><p>지문 보기</p></button></div>
16	19	</div>
17	20	</div>
18		- <div class="next-btn" @click="goToPage('Chapter1_4')"><img src="../../../../resources/img/right.png" alt=""></div>
	21	+ <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt=""></div>
19	22	</div>
20	23	</div>
21	24	</template>

Delete comment