Commit @48ccb40af180b14c5bf708ca71faca2620e95670

이은진 2024-08-09

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

@48ccb40af180b14c5bf708ca71faca2620e95670

f47706f

48ccb40

client/resources/css/style.css

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

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


   width: 1063px;
 }
 
-.rabbit {
+.rabbit-start {
   position: absolute;
   top: -45px;
   left: 393px;
+}
+.rabbit-end {
+  position: absolute;
+  bottom: 24px;
+    right: 40px;
 }
 
 .rabbit img {

 .race-btn p.long {
   width: fit-content;
 }
+/* .popup-yellow{
+  background-image: url('../img/img139_72s.png');
+  min-width: 439px !important;
+  min-height: 244px !important;
+  background-color: transparent !important;
+  border: 0 !important;
+} */
 /* 사진촬영 */
 .camera{background-color: #000;}
 .camera .header{height: 110px; background-color: #eaedf4; padding: 0 60px;}

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

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

48ccb40

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

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

Binary file is not shown

f47706f

48ccb40

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" style="width: 100%;">
+                <div class="ml25" >
                     <p class="name mb10">학생이름</p>
                     <p class="mb5">xx중학교 3학년 x반</p>
                     <progress-bar :progress="progress"></progress-bar>

f47706f

48ccb40

client/views/pages/AppRouter.js

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

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


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

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

f47706f

48ccb40

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

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

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


         </div>
 
         <div class="flex align-center justify-center" style="gap: 113px;">
-          <div class="time-bg">
-              <div>
-                <div class="time">
-                  <p class="second">{{ timer }}</p>
-                  <p class="text">sec</p>
+         <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
                 </div>
               </div>
-            </div>
+         </div>
           <div class="pickGroup ">
             <div class="flex" style="gap: 250px;">
               <article  class="text-ct">

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

f47706f

48ccb40

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

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

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


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

f47706f

48ccb40

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

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

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


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

f47706f

48ccb40

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

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

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


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

f47706f

48ccb40

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

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

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


             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+         </div>
          <div class="flex justify-center ">
            <div class=" flex justify-between align-center" style="width: 50%;">
               <div class="pickGroup left">

f47706f

48ccb40

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

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

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


             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+         </div>
           <div class="imgGroup"><img src="../../../../resources/img/img124_63s.png" alt=""></div>
           
           <div class="dropGroup flex align-center justify-center mt30">

f47706f

48ccb40

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

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

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


       <div class="content title-box">
         <p class="title mt25 title-bg">step3</p>
         <div class="flex align-center mb30">
-               <p class="subtitle2 mr20">그림에 알맞는 낱말을 쓰세요.</p>
-               <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
-               </button> -->
+               <p class="subtitle2 mr20">듣고 올바른 대답을 말해보세요!</p>
+               <button><img src="../../../../resources/img/btn10_s.png" alt="">
+               </button>
             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+         </div>
           <div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt=""></div>
           
           <div class="dropGroup flex align-center justify-center mt30">
-            <div class="flex" style="gap: 20px;">
-              <div class="bd-bt textbox" @click="showButton(1)">
-                <p v-if="showButton1">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(2)">
-                <p v-if="showButton2">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(3)">
-                <p v-if="showButton3">A</p></div>
-              <div class="bd-bt textbox" @click="showButton(4)">
-                <p v-if="showButton4">A</p></div>
-            </div>
+            <img src="../../../../resources/img/btn18_64s_normal.png" alt="">
 
           </div>
 
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
   </div>
 </template>

f47706f

48ccb40

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

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

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


       <span class="subtitle">my name is dd</span>
     </div>
     <div class="flex justify-between align-center">
-      <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="pre-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div>
       <div class="content title-box">
         <p class="title mt25 title-bg">중간 평가 설문 조사</p>
         <div class="flex align-center mb30">

f47706f

48ccb40

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

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

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


         </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+         </div>
           <div class="imgGroup ">
             <img src="../../../../resources/img/img109_51s.png" alt="">  
           </div>

f47706f

48ccb40

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

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

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


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

           </div>
         </div>
       </div>
-      <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt=""></div>
+      <div class="next-btn" @click="goToPage('Chapter3_3_1')"><img src="../../../../resources/img/right.png" alt=""></div>
     </div>
   </div>
 </template>

48ccb40

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

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

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

f47706f

48ccb40

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

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

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


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

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

f47706f

48ccb40

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

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

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


         </div>
 
         <div class=" text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+         </div>
           <div class="imgGroup ">
             <img src="../../../../resources/img/img125_64s.png" alt="">  
           </div>

f47706f

48ccb40

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

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

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


                <button><img src="../../../../resources/img/btn10_s.png" alt="">
                </button>
             </div>
-            <div class="time-bg">
-               <div>
+            <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
                   <div class="time">
-                     <p class="second">{{ timer }}</p>
-                     <p class="text">sec</p>
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
                   </div>
-               </div>
-            </div>
+                </div>
+              </div>
+         </div>
             
             <div class="imgGroup">
                <img src="../../../../resources/img/img114_57s.png" alt="">

f47706f

48ccb40

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

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

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


             </div>
 
         <div class="text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+         </div>
           
-          <div class="pickGroup flex align-center justify-between" style="gap: 100px;">
+          <div class="pickGroup flex align-center justify-between mt80" style="gap: 100px;">
             <p>1. 문제</p>
             <div class="flex justify-center" style="gap: 60px;">
               <article >

f47706f

48ccb40

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

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

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


             </div>
   
           <div class="text-ct">
-            <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+            <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+         </div>
           <div class="imgGroup flex align-center justify-center mt50">
             <img src="../../../../resources/img/img114_57s.png" alt="">
                <input class="yellow-bd ml50" style="width: 30%;" type="text" name="" id="" placeholder="답을 입력하세요.">

f47706f

48ccb40

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

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

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


             </div>
 
         <div class="mt50 text-ct">
-          <div class="time-bg">
-            <div>
-              <div class="time">
-                <p class="second">{{ timer }}</p>
-                <p class="text">sec</p>
+          <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
+         </div>
           <div class="imgGroup  mt50">
             <img src="../../../../resources/img/img115_58s.png" alt="">
             <div class=" mt50">

f47706f

48ccb40

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

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

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


 
                 </div>
             </div>
-            <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt="">
+            <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt="">
             </div>
         </div>
     </div>

f47706f

48ccb40

client/views/pages/main/Dashboard.vue

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

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


                 <p class="subtitle">hi my name is dd!</p>
             </div>
             <div class="race-box">
-                <div class="rabbit"><img src="../../../resources/img/img09_s.png" alt=""></div>
+                <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
                 <div class="rcon flex justify-end mb5">
                     <div class="race-btn" @click="goToPage('Chapter1')">
                         <button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">

                         <p class="long">최종 평가</p>
                     </div>
                 </div>
+                <div class="rabbit-end" @click="buttonSearch"><img src="../../../resources/img/img138_72s.png" alt=""></div>
             </div>
             <!-- 팝업 -->
             <div v-show="searchOpen" class="popup-wrap">
-                <div class="popup-box ">
+                <div class="popup-box popup-yellow">
+                    <div class="flex justify-end">
+                        <button type="button" class="popup-close-btn" @click="closeBtn">
+                                <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
+                            </button>
+                    </div>
                     <div class=" mb30 text-ct">
                         <p class="title1 mb20">1단원이 끝났습니다! </p>
                         <p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요 </p>

             <h2 class="mb40">이 단원을 끝낸 친구들</h2>
             <article class=" flex-column" style="gap: 5px;">
                 <div class="flex" style="gap: 5px;">
-                    <div @click="buttonSearch" class="photo" ><img   src="../../../resources/img/img143_75s.png" alt=""></div>
+                    <div @click="buttonSearch2" class="photo" ><img   src="../../../resources/img/img143_75s.png" alt=""></div>
                 </div>
             </article>
-            <article class="popup-wrap" v-show="searchOpen">
+            <article class="popup-wrap" v-show="searchOpen2">
                 <div class="popup-box ">
                     <div class="flex mb10  justify-between">
                         <p class="popup-title">알림</p>
-                        <button type="button" class="popup-close-btn" @click="closeBtn">
+                        <button type="button" class="popup-close-btn" @click="closeBtn2">
                             <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
                         </button>
                     </div>

             mdiWindowClose: mdiWindowClose,
             mdiHeart: mdiHeart,
             showModal: false,
+            showModal2: false,
             searchOpen: false,
             searchOpen2: false,
         }

         buttonSearch() {
             this.searchOpen = true;
         },
+        buttonSearch2() {
+            this.searchOpen2 = true;
+        },
         closeBtn() {
             this.searchOpen = false;
 
         },
+        closeBtn2() {
+            this.searchOpen2 = false;
+
+        },
     },
     watch: {
 

f47706f

48ccb40

client/views/pages/main/MyPage.vue

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

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

...	...	@@ -172,4 +172,7 @@
172	172	}
173	173	</script>
174	174	<style scoped>
	175	+.mypage .textbook {
	176	+ width: 22%;
	177	+}
175	178	</style> (No newline at end of file)

f47706f

48ccb40

client/views/pages/main/PhotoDesign.vue

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

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


 }
 </script>
 <style scoped>
+.content{width: 19%;}
 .imgGroup {
   width: fit-content;
 }

f47706f

48ccb40

client/views/pages/teacher/Board.vue

--- client/views/pages/teacher/Board.vue

+++ client/views/pages/teacher/Board.vue


 <template>
   <div class="title-box flex justify-between mb40">
     <p class="title">게시판</p>
-    <select name="" id="">
-      <option value="">A반</option>
+    <select v-model="sclsId" @change="handleClassId()">
+      <option
+        v-for="(item, index) in classList"
+        :key="index"
+        :value="item.sclsId"
+      >
+        {{ item.sclsNm }}
+      </option>
     </select>
   </div>
   <div class="search-wrap flex justify-end mb20">

           <td>{{ item.bbsTtl }}</td>
           <td>{{ item.bbsCls }}</td>
           <td>{{ userNm }}</td>
-          <td>{{ item.bbsTm }}</td>
+          <td>{{ item.bbsTm.substr(0, 16) }}</td>
         </tr>
       </tbody>
     </table>

       dataList: [],
       totalPosts: 0,
       selectedRow: "",
+      bbsTm: "",
 
       // 페이징
       currentPage: 0,
       itemsPerPage: 8,
 
       // 반 아이디 (추후 세션에서 받는걸로 수정)
-      sclsId: "1",
+      sclsId: "",
+      classList: [],
 
+      userId: "",
       // 검색어
       searchKeyword: "",
       selectedSearchOption: "bbsTtl",
+
+      selected: null,
     };
   },
   methods: {

     // 게시글 전체 조회
     boardList() {
       const vm = this;
+      vm.sclsId = JSON.parse(sessionStorage.getItem("sclsId"));
       axios({
         url: "/board/findAll.json",
         method: "post",

           vm.userNm = res.data.result[0].userNm;
           vm.userId = res.data.result[0].userId;
           vm.totalPosts = res.data.totalBoard;
+          vm.selectClass();
+          sessionStorage.removeItem("selectedBoardList");
+          sessionStorage.removeItem("file");
+
+          console.log(vm.userId);
         })
         .catch(function (error) {
           console.log("result - error : ", error);

     },
 
     // 반 아이디 세션에 저장
-    setClassId() {
-      sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId));
-    },
 
     // 게시글 검색
     boardDataSearch() {

           console.log("dataSearch - error : ", error);
           alert("게시글이 존재하지 않습니다.");
         });
+    },
+
+    // 반 조회
+    selectClass() {
+      const vm = this;
+      console.log(vm.userId);
+      axios({
+        url: "/classes/selectClass.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          userId: vm.userId,
+        },
+      })
+        .then(function (res) {
+          console.log("classData - response : ", res.data);
+          vm.classList = res.data.data;
+          vm.selected = res.data.data.sclsId;
+        })
+        .catch(function (error) {
+          console.log("classData - error : ", error);
+        });
+    },
+    handleClassId() {
+      sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId));
+      this.boardList();
     },
 
     createNo(index) {

   mounted() {
     console.log("Main2 mounted");
     this.boardList();
-    this.setClassId();
   },
 };
 </script>

f47706f

48ccb40

client/views/pages/teacher/ClassDetail.vue

--- client/views/pages/teacher/ClassDetail.vue

+++ client/views/pages/teacher/ClassDetail.vue

...	...	@@ -1,153 +1,218 @@
1	1	<template>
2		- <div class="title-box flex justify-between mb40">
3		- <p class="title">반 관리</p>
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">반 관리</p>
	4	+ </div>
	5	+ <div class="wrap mb30">
	6	+ <div class="flex justify-between mb30 align-center">
	7	+ <label for="" class="title1">게시판</label>
	8	+ <div class="look-btn flex align-center" @click="goToPage('Board')">
	9	+ <p>자세히 보기</p>
	10	+ <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
	11	+ </div>
	12	+ </div>
	13	+ <div class="table-wrap">
	14	+ <table>
	15	+ <thead>
	16	+ <td>No.</td>
	17	+ <td>제목</td>
	18	+ <td>내용</td>
	19	+ <td>작성자</td>
	20	+ <td>등록일</td>
	21	+ </thead>
	22	+ <tbody>
	23	+ <tr
	24	+ v-for="(item, index) in dataList"
	25	+ :key="item.id"
	26	+ :class="{ 'selected-row': selectedRow == item.dataList }"
	27	+ @click="[goToPage('noticeDetail'), selectBoardList(item)]"
	28	+ >
	29	+ <td>{{ totalPosts - index }}</td>
	30	+ <td>{{ item.bbsTtl }}</td>
	31	+ <td>{{ item.bbsCls }}</td>
	32	+ <td>{{ userNm }}</td>
	33	+ <td>{{ item.bbsTm.substr(0, 16) }}</td>
	34	+ </tr>
	35	+ </tbody>
	36	+ </table>
	37	+ </div>
	38	+ </div>
	39	+ <div class="flex justify-between" style="gap: 30px">
	40	+ <div class="wrap mb30">
	41	+ <div class="flex justify-between mb30 align-center">
	42	+ <label for="" class="title1">학생 목록</label>
	43	+ <div class="look-btn align-center flex">
	44	+ <p>자세히 보기</p>
	45	+ <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
	46	+ </div>
	47	+ </div>
	48	+ <div class="table-wrap">
	49	+ <table>
	50	+ <thead>
	51	+ <td>No.</td>
	52	+ <td>이름</td>
	53	+ <td>학년</td>
	54	+ <td>반</td>
	55	+ </thead>
	56	+ <tbody>
	57	+ <tr>
	58	+ <td></td>
	59	+ <td></td>
	60	+ <td></td>
	61	+ <td></td>
	62	+ </tr>
	63	+ </tbody>
	64	+ </table>
	65	+ </div>
4	66	</div>
5	67	<div class="wrap mb30">
6		- <div class="flex justify-between mb30 align-center">
7		- <label for="" class="title1">학습 현황</label>
8		- <div class="look-btn flex align-center">
9		- <p>자세히 보기 </p>
10		- <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
	68	+ <div class="flex justify-between mb30 align-center">
	69	+ <label for="" class="title1">책 </label>
	70	+ <div class="align-center flex look-btn">
	71	+ <p>자세히 보기</p>
	72	+ <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
	73	+ </div>
	74	+ </div>
	75	+ <div class="flex" style="gap: 50px">
	76	+ <div class="textbook">
	77	+ <div class="box" style="gap: 10px"></div>
	78	+ <div class="text">
	79	+ <p class="title1" style="color: #fff">A 교재</p>
	80	+ <div
	81	+ class="btnGroup mt15 flex align-center justify-end"
	82	+ style="gap: 10px"
	83	+ >
	84	+ <button>수정</button>
	85	+ <p>\|</p>
	86	+ <button @click="showConfirm('delete')">삭제</button>
11	87	</div>
	88	+ </div>
12	89	</div>
13		- <div class="table-wrap">
14		- <table>
15		- <thead>
16		- <td>No.</td>
17		- <td>제목</td>
18		- <td>내용</td>
19		- <td>작성자</td>
20		- <td>등록일</td>
21		- </thead>
22		- <tbody>
23		- <tr>
24		- <td></td>
25		- <td></td>
26		- <td></td>
27		- <td></td>
28		- <td></td>
29		- </tr>
30		- </tbody>
31		- </table>
	90	+ <div class="textbook">
	91	+ <div class="box" style="gap: 10px"></div>
	92	+ <div class="text">
	93	+ <p class="title1" style="color: #fff">A 교재</p>
	94	+ <div
	95	+ class="btnGroup mt15 flex align-center justify-end"
	96	+ style="gap: 10px"
	97	+ >
	98	+ <button>수정</button>
	99	+ <p>\|</p>
	100	+ <button @click="showConfirm('delete')">삭제</button>
	101	+ </div>
	102	+ </div>
32	103	</div>
	104	+ </div>
33	105	</div>
34		- <div class="flex justify-between" style="gap: 30px;">
35		- <div class="wrap mb30">
36		- <div class="flex justify-between mb30 align-center">
37		- <label for="" class="title1">학생 목록</label>
38		- <div class="look-btn align-center flex">
39		- <p>자세히 보기 </p>
40		- <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
41		- </div>
42		- </div>
43		- <div class="table-wrap">
44		- <table>
45		- <thead>
46		- <td>No.</td>
47		- <td>이름</td>
48		- <td>학년</td>
49		- <td>반</td>
50		- </thead>
51		- <tbody>
52		- <tr>
53		- <td></td>
54		- <td></td>
55		- <td></td>
56		- <td></td>
57		- </tr>
58		- </tbody>
59		- </table>
60		- </div>
61		- </div>
62		- <div class="wrap mb30">
63		- <div class="flex justify-between mb30 align-center">
64		- <label for="" class="title1">책 </label>
65		- <div class="align-center flex look-btn"><p>자세히 보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon></div>
66		- </div>
67		- <div class=" flex " style="gap: 50px;">
68		- <div class="textbook">
69		- <div class="box " style="gap: 10px;">
70		- </div>
71		- <div class="text ">
72		- <p class="title1" style="color: #fff;">A 교재</p>
73		- <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
74		- <button>수정</button><p>\|</p>
75		- <button @click="showConfirm('delete')">삭제</button>
76		- </div>
77		- </div>
78		- </div>
79		- <div class="textbook">
80		- <div class="box " style="gap: 10px;">
81		- </div>
82		- <div class="text ">
83		- <p class="title1" style="color: #fff;">A 교재</p>
84		- <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
85		- <button>수정</button><p>\|</p>
86		- <button @click="showConfirm('delete')">삭제</button>
87		- </div>
88		- </div>
89		- </div>
90		- </div>
91		- </div>
92		- </div>
	106	+ </div>
93	107	</template>
94	108
95	109	<script>
96		-import SvgIcon from '@jamescoyle/vue-icon';
97		-import { mdiMagnify, } from '@mdi/js';
98		-import { mdilArrowRight } from '@mdi/light-js';
99		-import ProgressBar from '../../component/ProgressBar.vue';
100		-
	110	+import SvgIcon from "@jamescoyle/vue-icon";
	111	+import { mdiMagnify } from "@mdi/js";
	112	+import { mdilArrowRight } from "@mdi/light-js";
	113	+import ProgressBar from "../../component/ProgressBar.vue";
	114	+import axios from "axios";
101	115
102	116	export default {
103		- data() {
104		- return {
105		- mdiMagnify: mdiMagnify,
106		- mdilArrowRight: mdilArrowRight,
107		- timer: "00:00",
108		- progress: 20,
	117	+ data() {
	118	+ return {
	119	+ mdiMagnify: mdiMagnify,
	120	+ mdilArrowRight: mdilArrowRight,
	121	+ timer: "00:00",
	122	+ progress: 20,
109	123
110		- // 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디
111		- selectedClassId : this.$route.query.sclsId
112		- }
	124	+ // 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디
	125	+ selectedClassId: this.$route.query.sclsId,
	126	+
	127	+ // 게시글 정보
	128	+ dataList: [],
	129	+ totalPosts: 0,
	130	+ selectedRow: "",
	131	+ bbsTm: "",
	132	+
	133	+ // 페이징
	134	+ currentPage: 0,
	135	+ itemsPerPage: 5,
	136	+
	137	+ // 반 아이디
	138	+ sclsId: "",
	139	+ };
	140	+ },
	141	+ methods: {
	142	+ goToPage(page) {
	143	+ this.$router.push({ name: page });
113	144	},
114		- methods: {
115		- goToPage(page) {
116		- this.$router.push({ name: page });
	145	+ increaseProgress() {
	146	+ if (this.progress < 100) {
	147	+ this.progress += 10;
	148	+ }
	149	+ },
	150	+ showConfirm(type) {
	151	+ let message = "";
	152	+ if (type === "cancel") {
	153	+ message = "삭제하시겠습니까?";
	154	+ } else if (type === "reset") {
	155	+ message = "초기화하시겠습니까?";
	156	+ } else if (type === "save") {
	157	+ message = "등록하시겠습니까?";
	158	+ }
	159	+
	160	+ if (confirm(message)) {
	161	+ this.goBack();
	162	+ }
	163	+ },
	164	+
	165	+ // 게시글 조회
	166	+ boardList() {
	167	+ const vm = this;
	168	+ axios({
	169	+ url: "/board/findAll.json",
	170	+ method: "post",
	171	+ headers: {
	172	+ "Content-Type": "application/json; charset=UTF-8",
117	173	},
118		- increaseProgress() {
119		- if (this.progress < 100) {
120		- this.progress += 10;
121		- }
	174	+ data: {
	175	+ page: vm.currentPage + 1,
	176	+ pageSize: vm.itemsPerPage,
	177	+ sclsId: vm.selectedClassId,
122	178	},
123		- showConfirm(type) {
124		- let message = '';
125		- if (type === 'cancel') {
126		- message = '삭제하시겠습니까?';
127		- } else if (type === 'reset') {
128		- message = '초기화하시겠습니까?';
129		- } else if (type === 'save') {
130		- message = '등록하시겠습니까?';
131		- }
	179	+ })
	180	+ .then(function (res) {
	181	+ console.log("dataList - response : ", res.data);
132	182
133		- if (confirm(message)) {
134		- this.goBack();
135		- }
136		- },
137		- },
138		- watch: {
	183	+ vm.dataList = res.data.result[0].boardClass[0].board;
	184	+ vm.userNm = res.data.result[0].userNm;
	185	+ vm.userId = res.data.result[0].userId;
	186	+ vm.totalPosts = res.data.totalBoard;
139	187
	188	+ console.log(vm.userId);
	189	+ })
	190	+ .catch(function (error) {
	191	+ console.log("result - error : ", error);
	192	+ });
140	193	},
141		- computed: {
	194	+ setClassId() {
	195	+ sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId));
	196	+ sessionStorage.removeItem("selectedBoardList");
	197	+ sessionStorage.removeItem("file");
	198	+ this.boardList();
	199	+ },
142	200
	201	+ // 게시글 정보 세션에 저장
	202	+ selectBoardList(item) {
	203	+ sessionStorage.setItem("selectedBoardList", JSON.stringify(item));
143	204	},
144		- components: {
145		- SvgIcon,
146		- ProgressBar
147		- },
148		- mounted() {
149		- console.log('Main2 mounted');
150		- //console.log(`반 페이지 sclsId(반 아이디) 확인 : ${this.selectedClassId}`);
151		- }
152		-}
153		-</script> (No newline at end of file)
	205	+ },
	206	+ watch: {},
	207	+ computed: {},
	208	+ components: {
	209	+ SvgIcon,
	210	+ ProgressBar,
	211	+ },
	212	+ mounted() {
	213	+ console.log("Main2 mounted");
	214	+ //console.log(`반 페이지 sclsId(반 아이디) 확인 : ${this.selectedClassId}`);
	215	+ this.setClassId();
	216	+ },
	217	+};
	218	+</script>

f47706f

48ccb40

client/views/pages/teacher/Home.vue

--- client/views/pages/teacher/Home.vue

+++ client/views/pages/teacher/Home.vue


 <template>
-    <div class="title-box flex justify-between mb40">
-        <p class="title">홈</p>
-    </div>
-    <div class="content-t">
-        <div class=" flex " style="gap: 50px;" :style="{flexWrap: 'wrap'}">
-            <div class="class" v-for="classItem in classesList" :key="classItem.sclsId">
-                <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail', classItem.sclsId)">
-                    <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                    <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                    <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                    <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
-                </div>
-                <div class="text flex justify-between mt20">
-                    <p class="title1">{{ classItem.sclsNm }}</p>
-                    <span class="member">{{ classItem. studentCount}}</span>
-                </div>
-                <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
-                    <button @click="editModeModal(classItem.sclsId)">수정</button>
-                    <p>&#124;</p>
-                    <button @click="deleteClass(classItem.sclsId)">삭제</button>
-                </div>
-            </div>
-            <div class="textbook-add">
-                <button @click="addModeModal"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
-
-            </div>
-            <!-- 팝업창 -->
-            <div v-show="searchOpen" class="popup-wrap">
-                <div class="popup-box ">
-                    <div class="flex justify-between mb30">
-                        <p class="popup-title">반 이름</p>
-                        <button type="button" class="popup-close-btn" @click="closeBtn">
-                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-
-                        </button>
-                    </div>
-                    <div class="search-wrap mb30">
-                        <input type="text" v-model="createClassName"  class="data-wrap" placeholder="">
-                        <!-- <button type="button" >
+  <div class="title-box flex justify-between mb40">
+    <p class="title">홈</p>
+  </div>
+  <div class="content-t">
+    <div class="flex" style="gap: 50px" :style="{ flexWrap: 'wrap' }">
+      <div
+        class="class"
+        v-for="classItem in classesList"
+        :key="classItem.sclsId"
+      >
+        <div
+          class="box gd-col2"
+          style="gap: 10px"
+          @click="goToPage('ClassDetail', classItem.sclsId)"
+        >
+          <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
+          <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
+          <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
+          <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
+        </div>
+        <div class="text flex justify-between mt20">
+          <p class="title1">{{ classItem.sclsNm }}</p>
+          <span class="member">{{ classItem.studentCount }}</span>
+        </div>
+        <div
+          class="btnGroup mt15 flex align-center justify-end"
+          style="gap: 10px"
+        >
+          <button @click="editModeModal(classItem.sclsId)">수정</button>
+          <p>&#124;</p>
+          <button @click="deleteClass(classItem.sclsId)">삭제</button>
+        </div>
+      </div>
+      <div class="textbook-add">
+        <button @click="addModeModal">
+          <img src="../../../resources/img/btn32_98t_normal.png" alt="" />
+        </button>
+      </div>
+      <!-- 팝업창 -->
+      <div v-show="searchOpen" class="popup-wrap">
+        <div class="popup-box">
+          <div class="flex justify-between mb30">
+            <p class="popup-title">반 이름</p>
+            <button type="button" class="popup-close-btn" @click="closeBtn">
+              <svg-icon
+                type="mdi"
+                :path="mdiWindowClose"
+                class="close-btn"
+              ></svg-icon>
+            </button>
+          </div>
+          <div class="search-wrap mb30">
+            <input
+              type="text"
+              v-model="createClassName"
+              class="data-wrap"
+              placeholder=""
+            />
+            <!-- <button type="button" >
                             <img src="../../../resources/img/look_t.png" alt="">
                         </button> -->
-                    </div>
-                    <div class="flex justify-center ">
-                        <button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">
-                            취소
-                        </button>
-                        <button type="button" title="등록" class="new-btn" @click="isEditMode ? updateClass() : insertClass()">
-                            {{ isEditMode ? '수정' : '등록' }}
-                        </button>
-                    </div>
-                </div>
-            </div>
+          </div>
+          <div class="flex justify-center">
+            <button
+              type="button"
+              title="글쓰기"
+              class="new-btn mr10"
+              @click="closeBtn"
+            >
+              취소
+            </button>
+            <button
+              type="button"
+              title="등록"
+              class="new-btn"
+              @click="isEditMode ? updateClass() : insertClass()"
+            >
+              {{ isEditMode ? "수정" : "등록" }}
+            </button>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import axios from 'axios';
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
+import axios from "axios";
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify, mdiWindowClose } from "@mdi/js";
 export default {
-    data() {
-        return {
-            mdiWindowClose: mdiWindowClose,
-            showModal: false,
-            searchOpen: false,
+  data() {
+    return {
+      mdiWindowClose: mdiWindowClose,
+      showModal: false,
+      searchOpen: false,
 
-            classesList : [], // 불러온 반 정보
-            user_id : '2', //유저 아이디 : 현재는 고정
-            createClassName : "", // 생성 또는 수정할 반 이름
+      classesList: [], // 불러온 반 정보
+      user_id: "2", //유저 아이디 : 현재는 고정
+      createClassName: "", // 생성 또는 수정할 반 이름
 
-            isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수
-            current_editId : '', // 현재 수정할 반 id
-        }
+      isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수
+      current_editId: "", // 현재 수정할 반 id
+    };
+  },
+  methods: {
+    goToPage(page, sclsId) {
+      //console.log(`sclsId : ${sclsId}`); // 쿼리 확인
+      this.$router.push({ name: page, query: { sclsId: sclsId } });
     },
-    methods: {
-       
-        goToPage(page, sclsId) {
-            //console.log(`sclsId : ${sclsId}`); // 쿼리 확인
-            this.$router.push({ name: page , query : {sclsId : sclsId}});
-        },
-        closeModal() {
-            this.showModal = false;
-        },
-        editModeModal(sclsId) {
-            this.searchOpen = true;
-            this.isEditMode = true; // 수정 모드로 설정
-            this.current_editId = sclsId
-        },
-        addModeModal() {
-            this.searchOpen = true;
-            this.isEditMode = false; // 추가 모드로 설정
-        },
-        closeBtn() {
-            this.searchOpen = false;
-            this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화
+    closeModal() {
+      this.showModal = false;
+    },
+    editModeModal(sclsId) {
+      this.searchOpen = true;
+      this.isEditMode = true; // 수정 모드로 설정
+      this.current_editId = sclsId;
+    },
+    addModeModal() {
+      this.searchOpen = true;
+      this.isEditMode = false; // 추가 모드로 설정
+    },
+    closeBtn() {
+      this.searchOpen = false;
+      this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화
+    },
+    showConfirm(type, callback) {
+      let message = "";
+      if (type === "delete") {
+        message = "삭제하시겠습니까?";
+      } else if (type === "reset") {
+        message = "초기화하시겠습니까?";
+      } else if (type === "save") {
+        message = "등록하시겠습니까?";
+      } else if (type === "edit") {
+        message = "수정하시겠습니까?";
+      }
 
+      if (confirm(message)) {
+        if (callback) callback(); // 콜백 함수 호출
+      }
+    },
+    // 조회
+    selectClass() {
+      sessionStorage.removeItem("sclsId");
+      axios({
+        url: "/classes/selectClass.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        showConfirm(type, callback) {
-            let message = '';
-            if (type === 'delete') {
-                message = '삭제하시겠습니까?';
-            } else if (type === 'reset') {
-                message = '초기화하시겠습니까?';
-            } else if (type === 'save') {
-                message = '등록하시겠습니까?';
-            } else if (type === 'edit'){
-                message = '수정하시겠습니까?';
-            }
-
-
-            if (confirm(message)) {
-                if (callback) callback(); // 콜백 함수 호출
-            }
+        data: {
+          userId: this.user_id,
         },
-        // 조회
-        selectClass() {
-            axios({
-                url: "/classes/selectClass.json",
-                method: "post",
-                headers: {
-                    "Content-Type": "application/json; charset=UTF-8",
-                },
-                data: {
-                    userId: this.user_id
-                },
-            })
+      })
+        .then((res) => {
+          if (res.data.status === "success") {
+            console.log("classesList - response(조회) : ", res.data.data);
+            this.classesList = res.data.data;
+          } else {
+            console.log("조회에 실패했습니다: ", res.data);
+            alert("조회에 실패했습니다.");
+          }
+        })
+        .catch((err) => {
+          console.log("classesList - error(조회) : ", err);
+          alert("조회에 오류가 발생했습니다.");
+        });
+    },
+    // 추가
+    insertClass() {
+      if (this.createClassName.trim() === "") {
+        alert("반 이름을 입력해주세요");
+      } else {
+        this.showConfirm("save", () => {
+          axios({
+            url: "/classes/insertClass.json",
+            method: "post",
+            headers: {
+              "Content-Type": "application/json; charset=UTF-8",
+            },
+            data: {
+              userId: this.user_id,
+              sclsNm: this.createClassName,
+            },
+          })
             .then((res) => {
-                if (res.data.status === "success") {
-                    console.log("classesList - response(조회) : ", res.data.data);
-                    this.classesList = res.data.data;
-                } else {
-                    console.log("조회에 실패했습니다: ", res.data);
-                    alert("조회에 실패했습니다.");
-                }
+              if (res.data.status === "success") {
+                console.log("classesList - response(추가) : ", res.data.data);
+                this.selectClass();
+                this.createClassName = ""; // 반 이름 초기화
+                this.closeBtn(); // 생성 모달 닫기
+              } else {
+                console.log("추가에 실패했습니다: ", res.data);
+                alert("추가에 실패했습니다.");
+              }
             })
             .catch((err) => {
-                console.log("classesList - error(조회) : ", err);
-                alert("조회에 오류가 발생했습니다.");
+              console.log("classesList - error(추가) : ", err);
+              alert("추가에 오류가 발생했습니다.");
             });
-        },
-        // 추가
-        insertClass() {
-            if(this.createClassName.trim() === ""){
-                alert("반 이름을 입력해주세요");
+        });
+      }
+    },
+    // 삭제
+    deleteClass(sclsId) {
+      this.showConfirm("delete", () => {
+        axios({
+          url: "/classes/deleteClass.json",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+          data: {
+            sclsId: sclsId,
+          },
+        })
+          .then((res) => {
+            if (res.data.status === "success") {
+              console.log("classesList - response(삭제) : ", res.data.data);
+              this.selectClass();
+            } else {
+              console.log("삭제에 실패했습니다: ", res.data);
+              alert("삭제에 실패했습니다.");
             }
-            else{
-                this.showConfirm('save', () => {
-                axios({
-                    url: "/classes/insertClass.json",
-                    method: "post",
-                    headers: {
-                        "Content-Type": "application/json; charset=UTF-8",
-                    },
-                    data: {
-                        userId: this.user_id,
-                        sclsNm: this.createClassName
-                    },
-                })
-                    .then((res) => {
-                        if (res.data.status === "success") {
-                            console.log("classesList - response(추가) : ", res.data.data);
-                            this.selectClass();
-                            this.createClassName = ""; // 반 이름 초기화
-                            this.closeBtn(); // 생성 모달 닫기
-                        } else {
-                            console.log("추가에 실패했습니다: ", res.data);
-                            alert("추가에 실패했습니다.");
-                        }
-                    })
-                    .catch((err) => {
-                        console.log("classesList - error(추가) : ", err);
-                        alert("추가에 오류가 발생했습니다.");
-                    });
-                });
-            }
-            
-        },
-        // 삭제
-        deleteClass(sclsId) {
-            this.showConfirm('delete', () => {
-                axios({
-                    url: "/classes/deleteClass.json",
-                    method: "post",
-                    headers: {
-                        "Content-Type": "application/json; charset=UTF-8",
-                    },
-                    data: {
-                        sclsId: sclsId
-                    },
-                })
-                .then((res) => {
-                    if (res.data.status === "success") {
-                        console.log("classesList - response(삭제) : ", res.data.data);
-                        this.selectClass();
-                    } else {
-                        console.log("삭제에 실패했습니다: ", res.data);
-                        alert("삭제에 실패했습니다.");
-                    }
-                })
-                .catch((err) => {
-                    console.log("classesList - error(삭제) : ", err);
-                    alert("삭제에 오류가 발생했습니다.");
-                });
+          })
+          .catch((err) => {
+            console.log("classesList - error(삭제) : ", err);
+            alert("삭제에 오류가 발생했습니다.");
+          });
+      });
+    },
+    // 수정
+    updateClass() {
+      if (this.createClassName.trim() === "") {
+        alert("반 이름을 입력해주세요");
+      } else {
+        this.showConfirm("edit", () => {
+          axios({
+            url: "/classes/updateClass.json",
+            method: "post",
+            headers: {
+              "Content-Type": "application/json; charset=UTF-8",
+            },
+            data: {
+              sclsId: this.current_editId,
+              sclsNm: this.createClassName,
+            },
+          })
+            .then((res) => {
+              if (res.data.status === "success") {
+                console.log("classesList - response(수정) : ", res.data.data);
+                this.selectClass();
+                this.createClassName = ""; // 반 이름 초기화
+                this.current_editId = ""; // 반 Id 초기화
+                this.closeBtn(); // 팝업 닫기
+              } else {
+                console.log("수정에 실패했습니다: ", res.data);
+                alert("수정에 실패했습니다.");
+              }
+            })
+            .catch((err) => {
+              console.log("classesList - error(수정) : ", err);
+              alert("수정에 오류가 발생했습니다.");
             });
-        },
-        // 수정
-        updateClass() {
-            if(this.createClassName.trim() === ""){
-                alert("반 이름을 입력해주세요");
-            }
-            else{
-                this.showConfirm('edit', () => {
-                    axios({
-                        url: "/classes/updateClass.json",
-                        method: "post",
-                        headers: {
-                            "Content-Type": "application/json; charset=UTF-8",
-                        },
-                        data: {
-                            sclsId: this.current_editId,
-                            sclsNm: this.createClassName
-                        },
-                    })
-                    .then((res) => {
-                        if (res.data.status === "success") {
-                            console.log("classesList - response(수정) : ", res.data.data);
-                            this.selectClass();
-                            this.createClassName = ""; // 반 이름 초기화
-                            this.current_editId = ""; // 반 Id 초기화
-                            this.closeBtn(); // 팝업 닫기
-                        } else {
-                            console.log("수정에 실패했습니다: ", res.data);
-                            alert("수정에 실패했습니다.");
-                        }
-                    })
-                    .catch((err) => {
-                        console.log("classesList - error(수정) : ", err);
-                        alert("수정에 오류가 발생했습니다.");
-                    });
-                });
-            }
-        }
+        });
+      }
     },
-    watch: {
-
-    },
-    computed: {
-
-    },
-    components: {
-        SvgIcon
-    },
-    mounted() {
-        console.log('Main2 mounted');
-        this.selectClass();
-    }
-}
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+  },
+  mounted() {
+    console.log("Main2 mounted");
+    this.selectClass();
+  },
+};
 </script>
 
 <style>
 .content-t {
-    flex-wrap: wrap; 
-    height: 90%;
-    overflow-y: scroll;
+  flex-wrap: wrap;
+  height: 90%;
+  overflow-y: scroll;
 }
-</style>
+</style>

f47706f

48ccb40

client/views/pages/teacher/noticeDetail.vue

--- client/views/pages/teacher/noticeDetail.vue

+++ client/views/pages/teacher/noticeDetail.vue


 <template>
   <div class="title-box flex justify-between mb40">
-    <p class="title">{{ dataList.bbsCls }}</p>
+    <p class="title">{{ category }}</p>
   </div>
   <div class="board-wrap">
     <div class="flex align-center">
-      <label for="" class="title2">{{ dataList.bbsTtl }}</label>
+      <label for="" class="title2">{{ title }}</label>
     </div>
     <hr />
-    <textarea readonly name="" id="">{{ dataList.bbsCnt }}</textarea>
+    <textarea readonly name="" id="">{{ content }}</textarea>
     <hr />
     <div class="flex align-center">
       <label for="" class="title2">첨부파일</label>

       목록
     </button>
     <div class="flex">
-      <button type="button" title="글쓰기" class="new-btn mr10">수정</button>
+      <button
+        type="button"
+        title="글쓰기"
+        class="new-btn mr10"
+        @click="goToPage('noticeInsert')"
+      >
+        수정
+      </button>
       <button
         type="button"
         title="글쓰기"

       content: "",
       category: "",
       file: "",
+      time: "",
       user: "",
     };
   },

       if (seletedBoardList) {
         vm.dataList = seletedBoardList;
       }
-      console.log(vm.dataList);
+      vm.title = vm.dataList.bbsTtl;
+      vm.content = vm.dataList.bbsCnt;
+      vm.category = vm.dataList.bbsCls;
+      vm.time = vm.dataList.bbsTm;
     },
 
     findFile() {

         .then(function (res) {
           console.log("fileInfo - response : ", res.data.list[0]);
           vm.file = res.data.list[0];
+          sessionStorage.setItem("file", JSON.stringify(vm.file));
         })
         .catch(function (error) {
           console.log("result - error : ", error);

             "selectedBoardList",
             JSON.stringify(vm.dataList)
           );
+          vm.title = vm.dataList.bbsTtl;
+          vm.content = vm.dataList.bbsCnt;
+          vm.category = vm.dataList.bbsCls;
+          vm.time = vm.dataList.bbsTm;
           vm.findFile();
           console.log(vm.dataList);
         })

             "selectedBoardList",
             JSON.stringify(vm.dataList)
           );
+          vm.title = vm.dataList.bbsTtl;
+          vm.content = vm.dataList.bbsCnt;
+          vm.category = vm.dataList.bbsCls;
+          vm.time = vm.dataList.bbsTm;
           vm.findFile();
           console.log(vm.dataList);
         })

f47706f

48ccb40

client/views/pages/teacher/noticeInsert.vue

--- client/views/pages/teacher/noticeInsert.vue

+++ client/views/pages/teacher/noticeInsert.vue


 <template>
   <div class="title-box flex justify-between mb40">
-    <p class="title">공지 등록</p>
+    <p class="title">{{ titleLabel }}</p>
   </div>
   <div class="board-wrap">
-    <form @submit.prevent="handleSubmit">
+    <form @submit.prevent="handleButtonAction">
       <div class="flex align-center">
         <label for="title" class="title2">제목</label>
         <input type="text" id="title" class="data-wrap" v-model="title" />

       <hr />
       <div class="flex align-center">
         <label for="file" class="title2">첨부파일</label>
+        <label for="file" class="title2"> {{ file.fileNm }}</label>
         <input type="file" ref="fileInput" @change="handleFileUpload" />
       </div>
       <div class="flex justify-between mt50">
         <button title="글쓰기" class="new-btn" @click="goToPage('Board')">
           목록
         </button>
-        <button title="글쓰기" class="new-btn">등록</button>
+        <button title="글쓰기" class="new-btn" @click="goToPage('Board')">
+          {{ buttonLabel }}
+        </button>
       </div>
     </form>
   </div>

       title: "",
       content: "",
       category: "Notice",
+      file: "",
       sclsId: "",
+
       selectedFile: null,
+      dataList: "",
+
+      // 데이터 편집 상태 (true = 수정, false = 등록)
+      isEditMode: false,
     };
   },
   methods: {

     created() {
       const vm = this;
       const sclsId = JSON.parse(sessionStorage.getItem("sclsId"));
+      const dataList = JSON.parse(sessionStorage.getItem("selectedBoardList"));
+      const file = JSON.parse(sessionStorage.getItem("file"));
 
       if (sclsId) {
         vm.sclsId = sclsId;
+        if (dataList && file) {
+          vm.dataList = dataList;
+          vm.file = file;
+          vm.title = vm.dataList.bbsTtl;
+          vm.content = vm.dataList.bbsCnt;
+          vm.category = vm.dataList.bbsCls;
+          vm.isEditMode = true;
+        } else {
+          vm.isEditMode = false;
+        }
       }
-      console.log(sclsId);
     },
-
-    async handleSubmit() {
+    // 게시글 등록
+    async dataInsert() {
       const vm = this;
       try {
         // 파일 업로드

         await axios.post("/board/insert.json", newData);
 
         alert("게시물 등록 성공");
+        vm.$router.push({ name: "Board" });
       } catch (error) {
         console.error("게시물 등록 실패 ", error);
         alert("게시물 등록 실패");
       }
     },
+
+    // 게시글 수정
+    async boardUpdate() {
+      const vm = this;
+
+      // 파일 업로드
+      const formData = new FormData();
+      formData.append("files", this.selectedFile);
+
+      const fileUploadResponse = await axios.post(
+        "/file/upload.json",
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        }
+      );
+
+      // 업로드 후 파일 매니지 아이디 호출
+      const fileMngId = fileUploadResponse.data.fileMngId;
+
+      const newData = {
+        bbsTtl: vm.title,
+        bbsCls: vm.category,
+        bbsCnt: vm.content,
+        fileMngId: fileMngId,
+        sclsId: vm.sclsId,
+        bbsId: this.dataList.bbsId,
+      };
+      await axios({
+        url: "/board/update.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: newData,
+      })
+        .then(function (res) {
+          console.log("dataUpdate - response : ", res.data);
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+        });
+    },
+
+    handleButtonAction() {
+      if (this.isEditMode) {
+        this.boardUpdate();
+      } else {
+        this.dataInsert();
+      }
+    },
   },
   watch: {},
-  computed: {},
+  computed: {
+    titleLabel() {
+      return this.isEditMode ? "수정" : "공지 등록";
+    },
+
+    buttonLabel() {
+      return this.isEditMode ? "수정" : "등록";
+    },
+  },
   components: {
     SvgIcon,
   },

Add a comment

Open 0
Closed 0

List

...	...	@@ -441,10 +441,15 @@
441	441	width: 1063px;
442	442	}
443	443
444		-.rabbit {
	444	+.rabbit-start {
445	445	position: absolute;
446	446	top: -45px;
447	447	left: 393px;
	448	+}
	449	+.rabbit-end {
	450	+ position: absolute;
	451	+ bottom: 24px;
	452	+ right: 40px;
448	453	}
449	454
450	455	.rabbit img {
...	...	@@ -470,6 +475,13 @@
470	475	.race-btn p.long {
471	476	width: fit-content;
472	477	}
	478	+/* .popup-yellow{
	479	+ background-image: url('../img/img139_72s.png');
	480	+ min-width: 439px !important;
	481	+ min-height: 244px !important;
	482	+ background-color: transparent !important;
	483	+ border: 0 !important;
	484	+} */
473	485	/* 사진촬영 */
474	486	.camera{background-color: #000;}
475	487	.camera .header{height: 110px; background-color: #eaedf4; padding: 0 60px;}
...	...	@@ -500,6 +512,20 @@
500	512	.complete-wrap img{width: inherit;}
501	513	.complete-wrap .photo{cursor: pointer; width: 200px; height: 130px; }
502	514	/* 챕터 */
	515	+.time-hint{
	516	+ position: absolute;
	517	+ top: 50px;
	518	+ right: 50px;
	519	+ text-align: center;
	520	+}
	521	+.hint-btn{
	522	+ background-image: url('../img/btn01.png');
	523	+ width: 110px;
	524	+ height: 45px;
	525	+ padding: 5px 20px;
	526	+ font-size: 28px;
	527	+ font-family: 'ONEMobilePOP';
	528	+}
503	529	.content-wrap {
504	530	margin: 90px 60px 0 60px;
505	531
...	...	@@ -741,9 +767,6 @@
741	767	width: 560px;
742	768	}
743	769	.time-bg{
744		- position: absolute;
745		- top: 50px;
746		- right: 50px;
747	770	text-align: center;
748	771	font-family: 'neodgm'; background-image: url('../img/img55_s.png'); width: 110px; height: 128px;}
749	772	.time-bg > div{position: relative;}

...	...	@@ -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" style="width: 100%;">
	7	+ <div class="ml25" >
8	8	<p class="name mb10">학생이름</p>
9	9	<p class="mb5">xx중학교 3학년 x반</p>
10	10	<progress-bar :progress="progress"></progress-bar>

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

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

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

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

...	...	@@ -9,39 +9,33 @@
9	9	<div class="content title-box">
10	10	<p class="title mt25 title-bg">step3</p>
11	11	<div class="flex align-center mb30">
12		- <p class="subtitle2 mr20">그림에 알맞는 낱말을 쓰세요.</p>
13		- <!-- <button><img src="../../../../resources/img/btn10_s.png" alt="">
14		- </button> -->
	12	+ <p class="subtitle2 mr20">듣고 올바른 대답을 말해보세요!</p>
	13	+ <button><img src="../../../../resources/img/btn10_s.png" alt="">
	14	+ </button>
15	15	</div>
16	16
17	17	<div class="text-ct">
18		- <div class="time-bg">
19		- <div>
20		- <div class="time">
21		- <p class="second">{{ timer }}</p>
22		- <p class="text">sec</p>
	18	+ <div class="time-hint">
	19	+ <button class="hint-btn">HINT</button>
	20	+ <div class="time-bg mt20">
	21	+ <div>
	22	+ <div class="time">
	23	+ <p class="second">{{ timer }}</p>
	24	+ <p class="text">sec</p>
	25	+ </div>
	26	+ </div>
23	27	</div>
24		- </div>
25		- </div>
	28	+ </div>
26	29	<div class="imgGroup"><img src="../../../../resources/img/img125_64s.png" alt=""></div>
27	30
28	31	<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>
	32	+ <img src="../../../../resources/img/btn18_64s_normal.png" alt="">
39	33
40	34	</div>
41	35
42	36	</div>
43	37	</div>
44		- <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt=""></div>
	38	+ <div class="next-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/right.png" alt=""></div>
45	39	</div>
46	40	</div>
47	41	</template>

...	...	@@ -5,7 +5,7 @@
5	5	<span class="subtitle">my name is dd</span>
6	6	</div>
7	7	<div class="flex justify-between align-center">
8		- <div class="pre-btn" @click="goToPage('Chapter3_15')"><img src="../../../../resources/img/left.png" alt=""></div>
	8	+ <div class="pre-btn" @click="goToPage('Chapter4')"><img src="../../../../resources/img/left.png" alt=""></div>
9	9	<div class="content title-box">
10	10	<p class="title mt25 title-bg">중간 평가 설문 조사</p>
11	11	<div class="flex align-center mb30">

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

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

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

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

...	...	@@ -102,7 +102,7 @@
102	102
103	103	</div>
104	104	</div>
105		- <div class="next-btn" @click="goToPage('Dashboard')"><img src="../../../../resources/img/right.png" alt="">
	105	+ <div class="next-btn" @click="goToPage('Chapter3_16')"><img src="../../../../resources/img/right.png" alt="">
106	106	</div>
107	107	</div>
108	108	</div>

...	...	@@ -6,7 +6,7 @@
6	6	<p class="subtitle">hi my name is dd!</p>
7	7	</div>
8	8	<div class="race-box">
9		- <div class="rabbit"><img src="../../../resources/img/img09_s.png" alt=""></div>
	9	+ <div class="rabbit-start"><img src="../../../resources/img/img09_s.png" alt=""></div>
10	10	<div class="rcon flex justify-end mb5">
11	11	<div class="race-btn" @click="goToPage('Chapter1')">
12	12	<button class="popTxt" v-for="(item, index) in items" :key="index" @click="toggleImage(index)" data-num="1">
...	...	@@ -90,10 +90,16 @@
90	90	<p class="long">최종 평가</p>
91	91	</div>
92	92	</div>
	93	+ <div class="rabbit-end" @click="buttonSearch"><img src="../../../resources/img/img138_72s.png" alt=""></div>
93	94	</div>
94	95	<!-- 팝업 -->
95	96	<div v-show="searchOpen" class="popup-wrap">
96		- <div class="popup-box ">
	97	+ <div class="popup-box popup-yellow">
	98	+ <div class="flex justify-end">
	99	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	100	+ <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
	101	+ </button>
	102	+ </div>
97	103	<div class=" mb30 text-ct">
98	104	<p class="title1 mb20">1단원이 끝났습니다! </p>
99	105	<p class="title1"><em class="yellow">기념사진</em>을 촬영하러 가요 </p>
...	...	@@ -110,14 +116,14 @@
110	116	<h2 class="mb40">이 단원을 끝낸 친구들</h2>
111	117	<article class=" flex-column" style="gap: 5px;">
112	118	<div class="flex" style="gap: 5px;">
113		- <div @click="buttonSearch" class="photo" ><img src="../../../resources/img/img143_75s.png" alt=""></div>
	119	+ <div @click="buttonSearch2" class="photo" ><img src="../../../resources/img/img143_75s.png" alt=""></div>
114	120	</div>
115	121	</article>
116		- <article class="popup-wrap" v-show="searchOpen">
	122	+ <article class="popup-wrap" v-show="searchOpen2">
117	123	<div class="popup-box ">
118	124	<div class="flex mb10 justify-between">
119	125	<p class="popup-title">알림</p>
120		- <button type="button" class="popup-close-btn" @click="closeBtn">
	126	+ <button type="button" class="popup-close-btn" @click="closeBtn2">
121	127	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
122	128	</button>
123	129	</div>
...	...	@@ -150,6 +156,7 @@
150	156	mdiWindowClose: mdiWindowClose,
151	157	mdiHeart: mdiHeart,
152	158	showModal: false,
	159	+ showModal2: false,
153	160	searchOpen: false,
154	161	searchOpen2: false,
155	162	}
...	...	@@ -167,10 +174,17 @@
167	174	buttonSearch() {
168	175	this.searchOpen = true;
169	176	},
	177	+ buttonSearch2() {
	178	+ this.searchOpen2 = true;
	179	+ },
170	180	closeBtn() {
171	181	this.searchOpen = false;
172	182
173	183	},
	184	+ closeBtn2() {
	185	+ this.searchOpen2 = false;
	186	+
	187	+ },
174	188	},
175	189	watch: {
176	190

...	...	@@ -118,6 +118,7 @@
118	118	}
119	119	</script>
120	120	<style scoped>
	121	+.content{width: 19%;}
121	122	.imgGroup {
122	123	width: fit-content;
123	124	}

...	...	@@ -1,8 +1,14 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3	3	<p class="title">게시판</p>
4		- <select name="" id="">
5		- <option value="">A반</option>
	4	+ <select v-model="sclsId" @change="handleClassId()">
	5	+ <option
	6	+ v-for="(item, index) in classList"
	7	+ :key="index"
	8	+ :value="item.sclsId"
	9	+ >
	10	+ {{ item.sclsNm }}
	11	+ </option>
6	12	</select>
7	13	</div>
8	14	<div class="search-wrap flex justify-end mb20">
...	...	@@ -42,7 +48,7 @@
42	48	<td>{{ item.bbsTtl }}</td>
43	49	<td>{{ item.bbsCls }}</td>
44	50	<td>{{ userNm }}</td>
45		- <td>{{ item.bbsTm }}</td>
	51	+ <td>{{ item.bbsTm.substr(0, 16) }}</td>
46	52	</tr>
47	53	</tbody>
48	54	</table>
...	...	@@ -92,17 +98,22 @@
92	98	dataList: [],
93	99	totalPosts: 0,
94	100	selectedRow: "",
	101	+ bbsTm: "",
95	102
96	103	// 페이징
97	104	currentPage: 0,
98	105	itemsPerPage: 8,
99	106
100	107	// 반 아이디 (추후 세션에서 받는걸로 수정)
101		- sclsId: "1",
	108	+ sclsId: "",
	109	+ classList: [],
102	110
	111	+ userId: "",
103	112	// 검색어
104	113	searchKeyword: "",
105	114	selectedSearchOption: "bbsTtl",
	115	+
	116	+ selected: null,
106	117	};
107	118	},
108	119	methods: {
...	...	@@ -127,6 +138,7 @@
127	138	// 게시글 전체 조회
128	139	boardList() {
129	140	const vm = this;
	141	+ vm.sclsId = JSON.parse(sessionStorage.getItem("sclsId"));
130	142	axios({
131	143	url: "/board/findAll.json",
132	144	method: "post",
...	...	@@ -146,6 +158,11 @@
146	158	vm.userNm = res.data.result[0].userNm;
147	159	vm.userId = res.data.result[0].userId;
148	160	vm.totalPosts = res.data.totalBoard;
	161	+ vm.selectClass();
	162	+ sessionStorage.removeItem("selectedBoardList");
	163	+ sessionStorage.removeItem("file");
	164	+
	165	+ console.log(vm.userId);
149	166	})
150	167	.catch(function (error) {
151	168	console.log("result - error : ", error);
...	...	@@ -158,9 +175,6 @@
158	175	},
159	176
160	177	// 반 아이디 세션에 저장
161		- setClassId() {
162		- sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId));
163		- },
164	178
165	179	// 게시글 검색
166	180	boardDataSearch() {
...	...	@@ -191,6 +205,34 @@
191	205	console.log("dataSearch - error : ", error);
192	206	alert("게시글이 존재하지 않습니다.");
193	207	});
	208	+ },
	209	+
	210	+ // 반 조회
	211	+ selectClass() {
	212	+ const vm = this;
	213	+ console.log(vm.userId);
	214	+ axios({
	215	+ url: "/classes/selectClass.json",
	216	+ method: "post",
	217	+ headers: {
	218	+ "Content-Type": "application/json; charset=UTF-8",
	219	+ },
	220	+ data: {
	221	+ userId: vm.userId,
	222	+ },
	223	+ })
	224	+ .then(function (res) {
	225	+ console.log("classData - response : ", res.data);
	226	+ vm.classList = res.data.data;
	227	+ vm.selected = res.data.data.sclsId;
	228	+ })
	229	+ .catch(function (error) {
	230	+ console.log("classData - error : ", error);
	231	+ });
	232	+ },
	233	+ handleClassId() {
	234	+ sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId));
	235	+ this.boardList();
194	236	},
195	237
196	238	createNo(index) {
...	...	@@ -230,7 +272,6 @@
230	272	mounted() {
231	273	console.log("Main2 mounted");
232	274	this.boardList();
233		- this.setClassId();
234	275	},
235	276	};
236	277	</script>

...	...	@@ -1,268 +1,289 @@
1	1	<template>
2		- <div class="title-box flex justify-between mb40">
3		- <p class="title">홈</p>
4		- </div>
5		- <div class="content-t">
6		- <div class=" flex " style="gap: 50px;" :style="{flexWrap: 'wrap'}">
7		- <div class="class" v-for="classItem in classesList" :key="classItem.sclsId">
8		- <div class="box gd-col2" style="gap: 10px;" @click="goToPage('ClassDetail', classItem.sclsId)">
9		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
10		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
11		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
12		- <div><img src="../../../resources/img/img176_82t.png" alt=""></div>
13		- </div>
14		- <div class="text flex justify-between mt20">
15		- <p class="title1">{{ classItem.sclsNm }}</p>
16		- <span class="member">{{ classItem. studentCount}}</span>
17		- </div>
18		- <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
19		- <button @click="editModeModal(classItem.sclsId)">수정</button>
20		- <p>\|</p>
21		- <button @click="deleteClass(classItem.sclsId)">삭제</button>
22		- </div>
23		- </div>
24		- <div class="textbook-add">
25		- <button @click="addModeModal"><img src="../../../resources/img/btn32_98t_normal.png" alt=""></button>
26		-
27		- </div>
28		- <!-- 팝업창 -->
29		- <div v-show="searchOpen" class="popup-wrap">
30		- <div class="popup-box ">
31		- <div class="flex justify-between mb30">
32		- <p class="popup-title">반 이름</p>
33		- <button type="button" class="popup-close-btn" @click="closeBtn">
34		- <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
35		-
36		- </button>
37		- </div>
38		- <div class="search-wrap mb30">
39		- <input type="text" v-model="createClassName" class="data-wrap" placeholder="">
40		- <!-- <button type="button" >
	2	+ <div class="title-box flex justify-between mb40">
	3	+ <p class="title">홈</p>
	4	+ </div>
	5	+ <div class="content-t">
	6	+ <div class="flex" style="gap: 50px" :style="{ flexWrap: 'wrap' }">
	7	+ <div
	8	+ class="class"
	9	+ v-for="classItem in classesList"
	10	+ :key="classItem.sclsId"
	11	+ >
	12	+ <div
	13	+ class="box gd-col2"
	14	+ style="gap: 10px"
	15	+ @click="goToPage('ClassDetail', classItem.sclsId)"
	16	+ >
	17	+ <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
	18	+ <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
	19	+ <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
	20	+ <div><img src="../../../resources/img/img176_82t.png" alt="" /></div>
	21	+ </div>
	22	+ <div class="text flex justify-between mt20">
	23	+ <p class="title1">{{ classItem.sclsNm }}</p>
	24	+ <span class="member">{{ classItem.studentCount }}</span>
	25	+ </div>
	26	+ <div
	27	+ class="btnGroup mt15 flex align-center justify-end"
	28	+ style="gap: 10px"
	29	+ >
	30	+ <button @click="editModeModal(classItem.sclsId)">수정</button>
	31	+ <p>\|</p>
	32	+ <button @click="deleteClass(classItem.sclsId)">삭제</button>
	33	+ </div>
	34	+ </div>
	35	+ <div class="textbook-add">
	36	+ <button @click="addModeModal">
	37	+ <img src="../../../resources/img/btn32_98t_normal.png" alt="" />
	38	+ </button>
	39	+ </div>
	40	+ <!-- 팝업창 -->
	41	+ <div v-show="searchOpen" class="popup-wrap">
	42	+ <div class="popup-box">
	43	+ <div class="flex justify-between mb30">
	44	+ <p class="popup-title">반 이름</p>
	45	+ <button type="button" class="popup-close-btn" @click="closeBtn">
	46	+ <svg-icon
	47	+ type="mdi"
	48	+ :path="mdiWindowClose"
	49	+ class="close-btn"
	50	+ ></svg-icon>
	51	+ </button>
	52	+ </div>
	53	+ <div class="search-wrap mb30">
	54	+ <input
	55	+ type="text"
	56	+ v-model="createClassName"
	57	+ class="data-wrap"
	58	+ placeholder=""
	59	+ />
	60	+ <!-- <button type="button" >
41	61	<img src="../../../resources/img/look_t.png" alt="">
42	62	</button> -->
43		- </div>
44		- <div class="flex justify-center ">
45		- <button type="button" title="글쓰기" class="new-btn mr10" @click="closeBtn">
46		- 취소
47		- </button>
48		- <button type="button" title="등록" class="new-btn" @click="isEditMode ? updateClass() : insertClass()">
49		- {{ isEditMode ? '수정' : '등록' }}
50		- </button>
51		- </div>
52		- </div>
53		- </div>
	63	+ </div>
	64	+ <div class="flex justify-center">
	65	+ <button
	66	+ type="button"
	67	+ title="글쓰기"
	68	+ class="new-btn mr10"
	69	+ @click="closeBtn"
	70	+ >
	71	+ 취소
	72	+ </button>
	73	+ <button
	74	+ type="button"
	75	+ title="등록"
	76	+ class="new-btn"
	77	+ @click="isEditMode ? updateClass() : insertClass()"
	78	+ >
	79	+ {{ isEditMode ? "수정" : "등록" }}
	80	+ </button>
	81	+ </div>
54	82	</div>
	83	+ </div>
55	84	</div>
	85	+ </div>
56	86	</template>
57	87
58	88	<script>
59		-import axios from 'axios';
60		-import SvgIcon from '@jamescoyle/vue-icon';
61		-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
	89	+import axios from "axios";
	90	+import SvgIcon from "@jamescoyle/vue-icon";
	91	+import { mdiMagnify, mdiWindowClose } from "@mdi/js";
62	92	export default {
63		- data() {
64		- return {
65		- mdiWindowClose: mdiWindowClose,
66		- showModal: false,
67		- searchOpen: false,
	93	+ data() {
	94	+ return {
	95	+ mdiWindowClose: mdiWindowClose,
	96	+ showModal: false,
	97	+ searchOpen: false,
68	98
69		- classesList : [], // 불러온 반 정보
70		- user_id : '2', //유저 아이디 : 현재는 고정
71		- createClassName : "", // 생성 또는 수정할 반 이름
	99	+ classesList: [], // 불러온 반 정보
	100	+ user_id: "2", //유저 아이디 : 현재는 고정
	101	+ createClassName: "", // 생성 또는 수정할 반 이름
72	102
73		- isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수
74		- current_editId : '', // 현재 수정할 반 id
75		- }
	103	+ isEditMode: false, // 추가 모드인지 수정 모드인지 구분하는 변수
	104	+ current_editId: "", // 현재 수정할 반 id
	105	+ };
	106	+ },
	107	+ methods: {
	108	+ goToPage(page, sclsId) {
	109	+ //console.log(`sclsId : ${sclsId}`); // 쿼리 확인
	110	+ this.$router.push({ name: page, query: { sclsId: sclsId } });
76	111	},
77		- methods: {
78		-
79		- goToPage(page, sclsId) {
80		- //console.log(`sclsId : ${sclsId}`); // 쿼리 확인
81		- this.$router.push({ name: page , query : {sclsId : sclsId}});
82		- },
83		- closeModal() {
84		- this.showModal = false;
85		- },
86		- editModeModal(sclsId) {
87		- this.searchOpen = true;
88		- this.isEditMode = true; // 수정 모드로 설정
89		- this.current_editId = sclsId
90		- },
91		- addModeModal() {
92		- this.searchOpen = true;
93		- this.isEditMode = false; // 추가 모드로 설정
94		- },
95		- closeBtn() {
96		- this.searchOpen = false;
97		- this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화
	112	+ closeModal() {
	113	+ this.showModal = false;
	114	+ },
	115	+ editModeModal(sclsId) {
	116	+ this.searchOpen = true;
	117	+ this.isEditMode = true; // 수정 모드로 설정
	118	+ this.current_editId = sclsId;
	119	+ },
	120	+ addModeModal() {
	121	+ this.searchOpen = true;
	122	+ this.isEditMode = false; // 추가 모드로 설정
	123	+ },
	124	+ closeBtn() {
	125	+ this.searchOpen = false;
	126	+ this.createClassName = ""; // 팝업 닫을 때 반 이름 초기화
	127	+ },
	128	+ showConfirm(type, callback) {
	129	+ let message = "";
	130	+ if (type === "delete") {
	131	+ message = "삭제하시겠습니까?";
	132	+ } else if (type === "reset") {
	133	+ message = "초기화하시겠습니까?";
	134	+ } else if (type === "save") {
	135	+ message = "등록하시겠습니까?";
	136	+ } else if (type === "edit") {
	137	+ message = "수정하시겠습니까?";
	138	+ }
98	139
	140	+ if (confirm(message)) {
	141	+ if (callback) callback(); // 콜백 함수 호출
	142	+ }
	143	+ },
	144	+ // 조회
	145	+ selectClass() {
	146	+ sessionStorage.removeItem("sclsId");
	147	+ axios({
	148	+ url: "/classes/selectClass.json",
	149	+ method: "post",
	150	+ headers: {
	151	+ "Content-Type": "application/json; charset=UTF-8",
99	152	},
100		- showConfirm(type, callback) {
101		- let message = '';
102		- if (type === 'delete') {
103		- message = '삭제하시겠습니까?';
104		- } else if (type === 'reset') {
105		- message = '초기화하시겠습니까?';
106		- } else if (type === 'save') {
107		- message = '등록하시겠습니까?';
108		- } else if (type === 'edit'){
109		- message = '수정하시겠습니까?';
110		- }
111		-
112		-
113		- if (confirm(message)) {
114		- if (callback) callback(); // 콜백 함수 호출
115		- }
	153	+ data: {
	154	+ userId: this.user_id,
116	155	},
117		- // 조회
118		- selectClass() {
119		- axios({
120		- url: "/classes/selectClass.json",
121		- method: "post",
122		- headers: {
123		- "Content-Type": "application/json; charset=UTF-8",
124		- },
125		- data: {
126		- userId: this.user_id
127		- },
128		- })
	156	+ })
	157	+ .then((res) => {
	158	+ if (res.data.status === "success") {
	159	+ console.log("classesList - response(조회) : ", res.data.data);
	160	+ this.classesList = res.data.data;
	161	+ } else {
	162	+ console.log("조회에 실패했습니다: ", res.data);
	163	+ alert("조회에 실패했습니다.");
	164	+ }
	165	+ })
	166	+ .catch((err) => {
	167	+ console.log("classesList - error(조회) : ", err);
	168	+ alert("조회에 오류가 발생했습니다.");
	169	+ });
	170	+ },
	171	+ // 추가
	172	+ insertClass() {
	173	+ if (this.createClassName.trim() === "") {
	174	+ alert("반 이름을 입력해주세요");
	175	+ } else {
	176	+ this.showConfirm("save", () => {
	177	+ axios({
	178	+ url: "/classes/insertClass.json",
	179	+ method: "post",
	180	+ headers: {
	181	+ "Content-Type": "application/json; charset=UTF-8",
	182	+ },
	183	+ data: {
	184	+ userId: this.user_id,
	185	+ sclsNm: this.createClassName,
	186	+ },
	187	+ })
129	188	.then((res) => {
130		- if (res.data.status === "success") {
131		- console.log("classesList - response(조회) : ", res.data.data);
132		- this.classesList = res.data.data;
133		- } else {
134		- console.log("조회에 실패했습니다: ", res.data);
135		- alert("조회에 실패했습니다.");
136		- }
	189	+ if (res.data.status === "success") {
	190	+ console.log("classesList - response(추가) : ", res.data.data);
	191	+ this.selectClass();
	192	+ this.createClassName = ""; // 반 이름 초기화
	193	+ this.closeBtn(); // 생성 모달 닫기
	194	+ } else {
	195	+ console.log("추가에 실패했습니다: ", res.data);
	196	+ alert("추가에 실패했습니다.");
	197	+ }
137	198	})
138	199	.catch((err) => {
139		- console.log("classesList - error(조회) : ", err);
140		- alert("조회에 오류가 발생했습니다.");
	200	+ console.log("classesList - error(추가) : ", err);
	201	+ alert("추가에 오류가 발생했습니다.");
141	202	});
142		- },
143		- // 추가
144		- insertClass() {
145		- if(this.createClassName.trim() === ""){
146		- alert("반 이름을 입력해주세요");
	203	+ });
	204	+ }
	205	+ },
	206	+ // 삭제
	207	+ deleteClass(sclsId) {
	208	+ this.showConfirm("delete", () => {
	209	+ axios({
	210	+ url: "/classes/deleteClass.json",
	211	+ method: "post",
	212	+ headers: {
	213	+ "Content-Type": "application/json; charset=UTF-8",
	214	+ },
	215	+ data: {
	216	+ sclsId: sclsId,
	217	+ },
	218	+ })
	219	+ .then((res) => {
	220	+ if (res.data.status === "success") {
	221	+ console.log("classesList - response(삭제) : ", res.data.data);
	222	+ this.selectClass();
	223	+ } else {
	224	+ console.log("삭제에 실패했습니다: ", res.data);
	225	+ alert("삭제에 실패했습니다.");
147	226	}
148		- else{
149		- this.showConfirm('save', () => {
150		- axios({
151		- url: "/classes/insertClass.json",
152		- method: "post",
153		- headers: {
154		- "Content-Type": "application/json; charset=UTF-8",
155		- },
156		- data: {
157		- userId: this.user_id,
158		- sclsNm: this.createClassName
159		- },
160		- })
161		- .then((res) => {
162		- if (res.data.status === "success") {
163		- console.log("classesList - response(추가) : ", res.data.data);
164		- this.selectClass();
165		- this.createClassName = ""; // 반 이름 초기화
166		- this.closeBtn(); // 생성 모달 닫기
167		- } else {
168		- console.log("추가에 실패했습니다: ", res.data);
169		- alert("추가에 실패했습니다.");
170		- }
171		- })
172		- .catch((err) => {
173		- console.log("classesList - error(추가) : ", err);
174		- alert("추가에 오류가 발생했습니다.");
175		- });
176		- });
177		- }
178		-
179		- },
180		- // 삭제
181		- deleteClass(sclsId) {
182		- this.showConfirm('delete', () => {
183		- axios({
184		- url: "/classes/deleteClass.json",
185		- method: "post",
186		- headers: {
187		- "Content-Type": "application/json; charset=UTF-8",
188		- },
189		- data: {
190		- sclsId: sclsId
191		- },
192		- })
193		- .then((res) => {
194		- if (res.data.status === "success") {
195		- console.log("classesList - response(삭제) : ", res.data.data);
196		- this.selectClass();
197		- } else {
198		- console.log("삭제에 실패했습니다: ", res.data);
199		- alert("삭제에 실패했습니다.");
200		- }
201		- })
202		- .catch((err) => {
203		- console.log("classesList - error(삭제) : ", err);
204		- alert("삭제에 오류가 발생했습니다.");
205		- });
	227	+ })
	228	+ .catch((err) => {
	229	+ console.log("classesList - error(삭제) : ", err);
	230	+ alert("삭제에 오류가 발생했습니다.");
	231	+ });
	232	+ });
	233	+ },
	234	+ // 수정
	235	+ updateClass() {
	236	+ if (this.createClassName.trim() === "") {
	237	+ alert("반 이름을 입력해주세요");
	238	+ } else {
	239	+ this.showConfirm("edit", () => {
	240	+ axios({
	241	+ url: "/classes/updateClass.json",
	242	+ method: "post",
	243	+ headers: {
	244	+ "Content-Type": "application/json; charset=UTF-8",
	245	+ },
	246	+ data: {
	247	+ sclsId: this.current_editId,
	248	+ sclsNm: this.createClassName,
	249	+ },
	250	+ })
	251	+ .then((res) => {
	252	+ if (res.data.status === "success") {
	253	+ console.log("classesList - response(수정) : ", res.data.data);
	254	+ this.selectClass();
	255	+ this.createClassName = ""; // 반 이름 초기화
	256	+ this.current_editId = ""; // 반 Id 초기화
	257	+ this.closeBtn(); // 팝업 닫기
	258	+ } else {
	259	+ console.log("수정에 실패했습니다: ", res.data);
	260	+ alert("수정에 실패했습니다.");
	261	+ }
	262	+ })
	263	+ .catch((err) => {
	264	+ console.log("classesList - error(수정) : ", err);
	265	+ alert("수정에 오류가 발생했습니다.");
206	266	});
207		- },
208		- // 수정
209		- updateClass() {
210		- if(this.createClassName.trim() === ""){
211		- alert("반 이름을 입력해주세요");
212		- }
213		- else{
214		- this.showConfirm('edit', () => {
215		- axios({
216		- url: "/classes/updateClass.json",
217		- method: "post",
218		- headers: {
219		- "Content-Type": "application/json; charset=UTF-8",
220		- },
221		- data: {
222		- sclsId: this.current_editId,
223		- sclsNm: this.createClassName
224		- },
225		- })
226		- .then((res) => {
227		- if (res.data.status === "success") {
228		- console.log("classesList - response(수정) : ", res.data.data);
229		- this.selectClass();
230		- this.createClassName = ""; // 반 이름 초기화
231		- this.current_editId = ""; // 반 Id 초기화
232		- this.closeBtn(); // 팝업 닫기
233		- } else {
234		- console.log("수정에 실패했습니다: ", res.data);
235		- alert("수정에 실패했습니다.");
236		- }
237		- })
238		- .catch((err) => {
239		- console.log("classesList - error(수정) : ", err);
240		- alert("수정에 오류가 발생했습니다.");
241		- });
242		- });
243		- }
244		- }
	267	+ });
	268	+ }
245	269	},
246		- watch: {
247		-
248		- },
249		- computed: {
250		-
251		- },
252		- components: {
253		- SvgIcon
254		- },
255		- mounted() {
256		- console.log('Main2 mounted');
257		- this.selectClass();
258		- }
259		-}
	270	+ },
	271	+ watch: {},
	272	+ computed: {},
	273	+ components: {
	274	+ SvgIcon,
	275	+ },
	276	+ mounted() {
	277	+ console.log("Main2 mounted");
	278	+ this.selectClass();
	279	+ },
	280	+};
260	281	</script>
261	282
262	283	<style>
263	284	.content-t {
264		- flex-wrap: wrap;
265		- height: 90%;
266		- overflow-y: scroll;
	285	+ flex-wrap: wrap;
	286	+ height: 90%;
	287	+ overflow-y: scroll;
267	288	}
268		-</style> (No newline at end of file)
	289	+</style>

...	...	@@ -1,13 +1,13 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">{{ dataList.bbsCls }}</p>
	3	+ <p class="title">{{ category }}</p>
4	4	</div>
5	5	<div class="board-wrap">
6	6	<div class="flex align-center">
7		- <label for="" class="title2">{{ dataList.bbsTtl }}</label>
	7	+ <label for="" class="title2">{{ title }}</label>
8	8	</div>
9	9	<hr />
10		- <textarea readonly name="" id="">{{ dataList.bbsCnt }}</textarea>
	10	+ <textarea readonly name="" id="">{{ content }}</textarea>
11	11	<hr />
12	12	<div class="flex align-center">
13	13	<label for="" class="title2">첨부파일</label>
...	...	@@ -35,7 +35,14 @@
35	35	목록
36	36	</button>
37	37	<div class="flex">
38		- <button type="button" title="글쓰기" class="new-btn mr10">수정</button>
	38	+ <button
	39	+ type="button"
	40	+ title="글쓰기"
	41	+ class="new-btn mr10"
	42	+ @click="goToPage('noticeInsert')"
	43	+ >
	44	+ 수정
	45	+ </button>
39	46	<button
40	47	type="button"
41	48	title="글쓰기"
...	...	@@ -68,6 +75,7 @@
68	75	content: "",
69	76	category: "",
70	77	file: "",
	78	+ time: "",
71	79	user: "",
72	80	};
73	81	},
...	...	@@ -84,7 +92,10 @@
84	92	if (seletedBoardList) {
85	93	vm.dataList = seletedBoardList;
86	94	}
87		- console.log(vm.dataList);
	95	+ vm.title = vm.dataList.bbsTtl;
	96	+ vm.content = vm.dataList.bbsCnt;
	97	+ vm.category = vm.dataList.bbsCls;
	98	+ vm.time = vm.dataList.bbsTm;
88	99	},
89	100
90	101	findFile() {
...	...	@@ -102,6 +113,7 @@
102	113	.then(function (res) {
103	114	console.log("fileInfo - response : ", res.data.list[0]);
104	115	vm.file = res.data.list[0];
	116	+ sessionStorage.setItem("file", JSON.stringify(vm.file));
105	117	})
106	118	.catch(function (error) {
107	119	console.log("result - error : ", error);
...	...	@@ -128,6 +140,10 @@
128	140	"selectedBoardList",
129	141	JSON.stringify(vm.dataList)
130	142	);
	143	+ vm.title = vm.dataList.bbsTtl;
	144	+ vm.content = vm.dataList.bbsCnt;
	145	+ vm.category = vm.dataList.bbsCls;
	146	+ vm.time = vm.dataList.bbsTm;
131	147	vm.findFile();
132	148	console.log(vm.dataList);
133	149	})
...	...	@@ -157,6 +173,10 @@
157	173	"selectedBoardList",
158	174	JSON.stringify(vm.dataList)
159	175	);
	176	+ vm.title = vm.dataList.bbsTtl;
	177	+ vm.content = vm.dataList.bbsCnt;
	178	+ vm.category = vm.dataList.bbsCls;
	179	+ vm.time = vm.dataList.bbsTm;
160	180	vm.findFile();
161	181	console.log(vm.dataList);
162	182	})

...	...	@@ -1,9 +1,9 @@
1	1	<template>
2	2	<div class="title-box flex justify-between mb40">
3		- <p class="title">공지 등록</p>
	3	+ <p class="title">{{ titleLabel }}</p>
4	4	</div>
5	5	<div class="board-wrap">
6		- <form @submit.prevent="handleSubmit">
	6	+ <form @submit.prevent="handleButtonAction">
7	7	<div class="flex align-center">
8	8	<label for="title" class="title2">제목</label>
9	9	<input type="text" id="title" class="data-wrap" v-model="title" />
...	...	@@ -13,13 +13,16 @@
13	13	<hr />
14	14	<div class="flex align-center">
15	15	<label for="file" class="title2">첨부파일</label>
	16	+ <label for="file" class="title2"> {{ file.fileNm }}</label>
16	17	<input type="file" ref="fileInput" @change="handleFileUpload" />
17	18	</div>
18	19	<div class="flex justify-between mt50">
19	20	<button title="글쓰기" class="new-btn" @click="goToPage('Board')">
20	21	목록
21	22	</button>
22		- <button title="글쓰기" class="new-btn">등록</button>
	23	+ <button title="글쓰기" class="new-btn" @click="goToPage('Board')">
	24	+ {{ buttonLabel }}
	25	+ </button>
23	26	</div>
24	27	</form>
25	28	</div>
...	...	@@ -38,8 +41,14 @@
38	41	title: "",
39	42	content: "",
40	43	category: "Notice",
	44	+ file: "",
41	45	sclsId: "",
	46	+
42	47	selectedFile: null,
	48	+ dataList: "",
	49	+
	50	+ // 데이터 편집 상태 (true = 수정, false = 등록)
	51	+ isEditMode: false,
43	52	};
44	53	},
45	54	methods: {
...	...	@@ -55,14 +64,25 @@
55	64	created() {
56	65	const vm = this;
57	66	const sclsId = JSON.parse(sessionStorage.getItem("sclsId"));
	67	+ const dataList = JSON.parse(sessionStorage.getItem("selectedBoardList"));
	68	+ const file = JSON.parse(sessionStorage.getItem("file"));
58	69
59	70	if (sclsId) {
60	71	vm.sclsId = sclsId;
	72	+ if (dataList && file) {
	73	+ vm.dataList = dataList;
	74	+ vm.file = file;
	75	+ vm.title = vm.dataList.bbsTtl;
	76	+ vm.content = vm.dataList.bbsCnt;
	77	+ vm.category = vm.dataList.bbsCls;
	78	+ vm.isEditMode = true;
	79	+ } else {
	80	+ vm.isEditMode = false;
	81	+ }
61	82	}
62		- console.log(sclsId);
63	83	},
64		-
65		- async handleSubmit() {
	84	+ // 게시글 등록
	85	+ async dataInsert() {
66	86	const vm = this;
67	87	try {
68	88	// 파일 업로드
...	...	@@ -94,14 +114,76 @@
94	114	await axios.post("/board/insert.json", newData);
95	115
96	116	alert("게시물 등록 성공");
	117	+ vm.$router.push({ name: "Board" });
97	118	} catch (error) {
98	119	console.error("게시물 등록 실패 ", error);
99	120	alert("게시물 등록 실패");
100	121	}
101	122	},
	123	+
	124	+ // 게시글 수정
	125	+ async boardUpdate() {
	126	+ const vm = this;
	127	+
	128	+ // 파일 업로드
	129	+ const formData = new FormData();
	130	+ formData.append("files", this.selectedFile);
	131	+
	132	+ const fileUploadResponse = await axios.post(
	133	+ "/file/upload.json",
	134	+ formData,
	135	+ {
	136	+ headers: {
	137	+ "Content-Type": "multipart/form-data",
	138	+ },
	139	+ }
	140	+ );
	141	+
	142	+ // 업로드 후 파일 매니지 아이디 호출
	143	+ const fileMngId = fileUploadResponse.data.fileMngId;
	144	+
	145	+ const newData = {
	146	+ bbsTtl: vm.title,
	147	+ bbsCls: vm.category,
	148	+ bbsCnt: vm.content,
	149	+ fileMngId: fileMngId,
	150	+ sclsId: vm.sclsId,
	151	+ bbsId: this.dataList.bbsId,
	152	+ };
	153	+ await axios({
	154	+ url: "/board/update.json",
	155	+ method: "post",
	156	+ headers: {
	157	+ "Content-Type": "application/json; charset=UTF-8",
	158	+ },
	159	+ data: newData,
	160	+ })
	161	+ .then(function (res) {
	162	+ console.log("dataUpdate - response : ", res.data);
	163	+ })
	164	+ .catch(function (error) {
	165	+ console.log("result - error : ", error);
	166	+ });
	167	+ },
	168	+
	169	+ handleButtonAction() {
	170	+ if (this.isEditMode) {
	171	+ this.boardUpdate();
	172	+ } else {
	173	+ this.dataInsert();
	174	+ }
	175	+ },
102	176	},
103	177	watch: {},
104		- computed: {},
	178	+ computed: {
	179	+ titleLabel() {
	180	+ return this.isEditMode ? "수정" : "공지 등록";
	181	+ },
	182	+
	183	+ buttonLabel() {
	184	+ return this.isEditMode ? "수정" : "등록";
	185	+ },
	186	+ },
105	187	components: {
106	188	SvgIcon,
107	189	},

Delete comment