jichoi / lms_front star
이은진 이은진 2024-08-09
Merge branch 'master' of http://210.180.118.83/jichoi/lms_front
@48ccb40af180b14c5bf708ca71faca2620e95670
client/resources/css/style.css
--- client/resources/css/style.css
+++ client/resources/css/style.css
@@ -441,10 +441,15 @@
   width: 1063px;
 }
 
-.rabbit {
+.rabbit-start {
   position: absolute;
   top: -45px;
   left: 393px;
+}
+.rabbit-end {
+  position: absolute;
+  bottom: 24px;
+    right: 40px;
 }
 
 .rabbit img {
@@ -470,6 +475,13 @@
 .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;}
@@ -500,6 +512,20 @@
 .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;
 
@@ -741,9 +767,6 @@
   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;}
 
client/resources/img/img222_57s.png (Binary) (added)
+++ client/resources/img/img222_57s.png
Binary file is not shown
client/views/layout/Side.vue
--- client/views/layout/Side.vue
+++ client/views/layout/Side.vue
@@ -4,7 +4,7 @@
         <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>
client/views/pages/AppRouter.js
--- client/views/pages/AppRouter.js
+++ client/views/pages/AppRouter.js
@@ -35,6 +35,7 @@
 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";
@@ -146,6 +147,7 @@
     { 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 },
client/views/pages/main/Chapter/Chapter3_1.vue
--- client/views/pages/main/Chapter/Chapter3_1.vue
+++ client/views/pages/main/Chapter/Chapter3_1.vue
@@ -15,14 +15,17 @@
         </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">
@@ -108,7 +111,6 @@
 
 .pickGroup button {
   position: relative;
-  margin-right: 30px;
 }
 
 .pickGroup button p {
client/views/pages/main/Chapter/Chapter3_10.vue
--- client/views/pages/main/Chapter/Chapter3_10.vue
+++ client/views/pages/main/Chapter/Chapter3_10.vue
@@ -15,14 +15,17 @@
             </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>
client/views/pages/main/Chapter/Chapter3_11.vue
--- client/views/pages/main/Chapter/Chapter3_11.vue
+++ client/views/pages/main/Chapter/Chapter3_11.vue
@@ -15,14 +15,17 @@
             </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> -->
client/views/pages/main/Chapter/Chapter3_12.vue
--- client/views/pages/main/Chapter/Chapter3_12.vue
+++ client/views/pages/main/Chapter/Chapter3_12.vue
@@ -15,14 +15,17 @@
             </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="">
client/views/pages/main/Chapter/Chapter3_13.vue
--- client/views/pages/main/Chapter/Chapter3_13.vue
+++ client/views/pages/main/Chapter/Chapter3_13.vue
@@ -15,14 +15,17 @@
             </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">
client/views/pages/main/Chapter/Chapter3_14.vue
--- client/views/pages/main/Chapter/Chapter3_14.vue
+++ client/views/pages/main/Chapter/Chapter3_14.vue
@@ -15,14 +15,17 @@
             </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">
client/views/pages/main/Chapter/Chapter3_15.vue
--- client/views/pages/main/Chapter/Chapter3_15.vue
+++ client/views/pages/main/Chapter/Chapter3_15.vue
@@ -9,39 +9,33 @@
       <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>
client/views/pages/main/Chapter/Chapter3_16.vue
--- client/views/pages/main/Chapter/Chapter3_16.vue
+++ client/views/pages/main/Chapter/Chapter3_16.vue
@@ -5,7 +5,7 @@
       <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">
client/views/pages/main/Chapter/Chapter3_2.vue
--- client/views/pages/main/Chapter/Chapter3_2.vue
+++ client/views/pages/main/Chapter/Chapter3_2.vue
@@ -15,14 +15,17 @@
         </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>
client/views/pages/main/Chapter/Chapter3_3.vue
--- client/views/pages/main/Chapter/Chapter3_3.vue
+++ client/views/pages/main/Chapter/Chapter3_3.vue
@@ -13,14 +13,17 @@
         </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;">
@@ -43,7 +46,7 @@
           </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>
 
client/views/pages/main/Chapter/Chapter3_3_1.vue (added)
+++ client/views/pages/main/Chapter/Chapter3_3_1.vue
@@ -0,0 +1,150 @@
+<template>
+  <div id="Chapter1_1" class="content-wrap">
+    <div class="title-box mb25 flex align-center mt40">
+      <span class="title mr40">1. Hello WORLD</span>
+      <span class="subtitle">my name is dd</span>
+    </div>
+    <div class="flex justify-between align-center">
+      <div class="pre-btn" @click="goToPage('Chapter3_3')"><img src="../../../../resources/img/left.png" alt=""></div>
+      <div class="content title-box">
+        <p class="title mt25 title-bg">step3.</p>
+        <div class="flex align-center mb30">
+          <p class="subtitle2 mr20">1. see the picture</p>
+          <button><img src="../../../../resources/img/btn10_s.png" alt="">
+          </button>
+        </div>
+
+        <div class="text-ct">
+          <div class="time-hint">
+          <button class="hint-btn">HINT</button>
+            <div class="time-bg mt20">
+                <div>
+                  <div class="time">
+                    <p class="second">{{ timer }}</p>
+                    <p class="text">sec</p>
+                  </div>
+                </div>
+              </div>
+         </div>
+          <div class="imgGroup ">
+            <img src="../../../../resources/img/img109_51s.png" alt="">  
+          </div>
+          
+          <div class="pickGroup mt60 flex align-center justify-center" style="gap: 100px; margin-top: 7%;">
+            <article style="gap: 60px; bottom: 159px;
+    left: 242px;">
+              <div class="flex align-center">
+                <button><img src="../../../../resources/img/img136_71s.png" alt="">
+                  <p>1</p>
+                </button>
+                <img src="../../../../resources/img/img122_62s.png" alt="">
+              </div>
+            </article>
+            <article style="gap: 60px; bottom: 159px;
+    right: 559px;">
+             <div class="flex align-center">
+                <button><img src="../../../../resources/img/img136_71s.png" alt="">
+                  <p>2</p>
+                </button>
+                <img src="../../../../resources/img/img123_62s.png" alt="">
+             </div>
+            </article>
+            <article style="gap: 60px; bottom: 159px;
+    right: 559px;">
+             <div class="flex align-center">
+                <button><img src="../../../../resources/img/img136_71s.png" alt="">
+                  <p>3</p>
+                </button>
+                <img src="../../../../resources/img/img121_62s.png" alt="">
+             </div>
+            </article>
+          </div>
+        </div>
+      </div>
+      <div class="next-btn" @click="goToPage('Chapter3_4')"><img src="../../../../resources/img/right.png" alt=""></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      timer: '00'
+    }
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+    startTimer() {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+      this.timer = 5;
+      this.intervalId = setInterval(() => {
+        if (this.timer > 0) {
+          this.timer--;
+        } else {
+          clearInterval(this.intervalId);
+        }
+      }, 1000);
+    }
+  },
+  watch: {
+
+  },
+  computed: {
+
+  },
+  components: {
+  },
+  mounted() {
+
+  }
+}
+</script>
+<style scoped>
+.inputbox {
+  font-size: 38px;
+  font-family: 'Pretendard-ExtraBold';
+}
+
+.imgGroup button {
+  position: relative;
+}
+
+.imgGroup button p,
+.textbox p {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: fit-content;
+  height: fit-content;
+  background: #ffffffb8;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 48px;
+  font-family: 'ONEMobilePOP';
+}
+
+.pickGroup p {
+  font-size: 34px;
+  font-weight: bold;
+}
+
+.pickGroup button {
+  position: relative;
+  margin-right: 30px;
+}
+
+.pickGroup button p {
+  font-size: 34px;
+  color: #c6c6c6;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>(No newline at end of file)
client/views/pages/main/Chapter/Chapter3_4.vue
--- client/views/pages/main/Chapter/Chapter3_4.vue
+++ client/views/pages/main/Chapter/Chapter3_4.vue
@@ -5,7 +5,7 @@
       <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">
@@ -15,14 +15,17 @@
             </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;">
client/views/pages/main/Chapter/Chapter3_5.vue
--- client/views/pages/main/Chapter/Chapter3_5.vue
+++ client/views/pages/main/Chapter/Chapter3_5.vue
@@ -15,14 +15,17 @@
         </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>
client/views/pages/main/Chapter/Chapter3_6.vue
--- client/views/pages/main/Chapter/Chapter3_6.vue
+++ client/views/pages/main/Chapter/Chapter3_6.vue
@@ -14,14 +14,17 @@
                <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="">
client/views/pages/main/Chapter/Chapter3_7.vue
--- client/views/pages/main/Chapter/Chapter3_7.vue
+++ client/views/pages/main/Chapter/Chapter3_7.vue
@@ -15,16 +15,19 @@
             </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 >
client/views/pages/main/Chapter/Chapter3_8.vue
--- client/views/pages/main/Chapter/Chapter3_8.vue
+++ client/views/pages/main/Chapter/Chapter3_8.vue
@@ -15,14 +15,17 @@
             </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="답을 입력하세요.">
client/views/pages/main/Chapter/Chapter3_9.vue
--- client/views/pages/main/Chapter/Chapter3_9.vue
+++ client/views/pages/main/Chapter/Chapter3_9.vue
@@ -15,14 +15,17 @@
             </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">
client/views/pages/main/Chapter/Chapter4.vue
--- client/views/pages/main/Chapter/Chapter4.vue
+++ client/views/pages/main/Chapter/Chapter4.vue
@@ -102,7 +102,7 @@
 
                 </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>
client/views/pages/main/Dashboard.vue
--- client/views/pages/main/Dashboard.vue
+++ client/views/pages/main/Dashboard.vue
@@ -6,7 +6,7 @@
                 <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">
@@ -90,10 +90,16 @@
                         <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>
@@ -110,14 +116,14 @@
             <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>
@@ -150,6 +156,7 @@
             mdiWindowClose: mdiWindowClose,
             mdiHeart: mdiHeart,
             showModal: false,
+            showModal2: false,
             searchOpen: false,
             searchOpen2: false,
         }
@@ -167,10 +174,17 @@
         buttonSearch() {
             this.searchOpen = true;
         },
+        buttonSearch2() {
+            this.searchOpen2 = true;
+        },
         closeBtn() {
             this.searchOpen = false;
 
         },
+        closeBtn2() {
+            this.searchOpen2 = false;
+
+        },
     },
     watch: {
 
client/views/pages/main/MyPage.vue
--- client/views/pages/main/MyPage.vue
+++ client/views/pages/main/MyPage.vue
@@ -172,4 +172,7 @@
 }
 </script>
 <style scoped>
+.mypage .textbook {
+    width: 22%;
+}
 </style>
(No newline at end of file)
client/views/pages/main/PhotoDesign.vue
--- client/views/pages/main/PhotoDesign.vue
+++ client/views/pages/main/PhotoDesign.vue
@@ -118,6 +118,7 @@
 }
 </script>
 <style scoped>
+.content{width: 19%;}
 .imgGroup {
   width: fit-content;
 }
client/views/pages/teacher/Board.vue
--- client/views/pages/teacher/Board.vue
+++ client/views/pages/teacher/Board.vue
@@ -1,8 +1,14 @@
 <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">
@@ -42,7 +48,7 @@
           <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>
@@ -92,17 +98,22 @@
       dataList: [],
       totalPosts: 0,
       selectedRow: "",
+      bbsTm: "",
 
       // 페이징
       currentPage: 0,
       itemsPerPage: 8,
 
       // 반 아이디 (추후 세션에서 받는걸로 수정)
-      sclsId: "1",
+      sclsId: "",
+      classList: [],
 
+      userId: "",
       // 검색어
       searchKeyword: "",
       selectedSearchOption: "bbsTtl",
+
+      selected: null,
     };
   },
   methods: {
@@ -127,6 +138,7 @@
     // 게시글 전체 조회
     boardList() {
       const vm = this;
+      vm.sclsId = JSON.parse(sessionStorage.getItem("sclsId"));
       axios({
         url: "/board/findAll.json",
         method: "post",
@@ -146,6 +158,11 @@
           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);
@@ -158,9 +175,6 @@
     },
 
     // 반 아이디 세션에 저장
-    setClassId() {
-      sessionStorage.setItem("sclsId", JSON.stringify(this.sclsId));
-    },
 
     // 게시글 검색
     boardDataSearch() {
@@ -191,6 +205,34 @@
           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) {
@@ -230,7 +272,6 @@
   mounted() {
     console.log("Main2 mounted");
     this.boardList();
-    this.setClassId();
   },
 };
 </script>
client/views/pages/teacher/ClassDetail.vue
--- client/views/pages/teacher/ClassDetail.vue
+++ client/views/pages/teacher/ClassDetail.vue
@@ -1,153 +1,218 @@
 <template>
-    <div class="title-box flex justify-between mb40">
-        <p class="title">반 관리</p>
+  <div class="title-box flex justify-between mb40">
+    <p class="title">반 관리</p>
+  </div>
+  <div class="wrap mb30">
+    <div class="flex justify-between mb30 align-center">
+      <label for="" class="title1">게시판</label>
+      <div class="look-btn flex align-center" @click="goToPage('Board')">
+        <p>자세히 보기</p>
+        <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
+      </div>
+    </div>
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <td>No.</td>
+          <td>제목</td>
+          <td>내용</td>
+          <td>작성자</td>
+          <td>등록일</td>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(item, index) in dataList"
+            :key="item.id"
+            :class="{ 'selected-row': selectedRow == item.dataList }"
+            @click="[goToPage('noticeDetail'), selectBoardList(item)]"
+          >
+            <td>{{ totalPosts - index }}</td>
+            <td>{{ item.bbsTtl }}</td>
+            <td>{{ item.bbsCls }}</td>
+            <td>{{ userNm }}</td>
+            <td>{{ item.bbsTm.substr(0, 16) }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div class="flex justify-between" style="gap: 30px">
+    <div class="wrap mb30">
+      <div class="flex justify-between mb30 align-center">
+        <label for="" class="title1">학생 목록</label>
+        <div class="look-btn align-center flex">
+          <p>자세히 보기</p>
+          <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
+        </div>
+      </div>
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <td>No.</td>
+            <td>이름</td>
+            <td>학년</td>
+            <td>반</td>
+          </thead>
+          <tbody>
+            <tr>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
     <div class="wrap mb30">
-        <div class="flex justify-between mb30 align-center">
-            <label for="" class="title1">학습 현황</label>
-            <div class="look-btn flex align-center">
-                <p>자세히 보기 </p>
-                <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
+      <div class="flex justify-between mb30 align-center">
+        <label for="" class="title1">책 </label>
+        <div class="align-center flex look-btn">
+          <p>자세히 보기</p>
+          <svg-icon type="mdi" :path="mdilArrowRight" class="ml10"></svg-icon>
+        </div>
+      </div>
+      <div class="flex" style="gap: 50px">
+        <div class="textbook">
+          <div class="box" style="gap: 10px"></div>
+          <div class="text">
+            <p class="title1" style="color: #fff">A 교재</p>
+            <div
+              class="btnGroup mt15 flex align-center justify-end"
+              style="gap: 10px"
+            >
+              <button>수정</button>
+              <p>&#124;</p>
+              <button @click="showConfirm('delete')">삭제</button>
             </div>
+          </div>
         </div>
-        <div class="table-wrap">
-            <table>
-                <thead>
-                    <td>No.</td>
-                    <td>제목</td>
-                    <td>내용</td>
-                    <td>작성자</td>
-                    <td>등록일</td>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                        <td></td>
-                    </tr>
-                </tbody>
-            </table>
+        <div class="textbook">
+          <div class="box" style="gap: 10px"></div>
+          <div class="text">
+            <p class="title1" style="color: #fff">A 교재</p>
+            <div
+              class="btnGroup mt15 flex align-center justify-end"
+              style="gap: 10px"
+            >
+              <button>수정</button>
+              <p>&#124;</p>
+              <button @click="showConfirm('delete')">삭제</button>
+            </div>
+          </div>
         </div>
+      </div>
     </div>
-    <div class="flex justify-between" style="gap: 30px;">
-        <div class="wrap mb30">
-            <div class="flex justify-between mb30 align-center">
-                <label for="" class="title1">학생 목록</label>
-                <div class="look-btn align-center flex">
-                    <p>자세히 보기 </p>
-                    <svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon>
-                </div>
-            </div>
-            <div class="table-wrap">
-                <table>
-                    <thead>
-                        <td>No.</td>
-                        <td>이름</td>
-                        <td>학년</td>
-                        <td>반</td>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                            <td></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <div class="wrap mb30">
-            <div class="flex justify-between mb30 align-center">
-                <label for="" class="title1">책 </label>
-                <div class="align-center flex look-btn"><p>자세히 보기 </p><svg-icon type="mdi" :path="mdilArrowRight" class=" ml10"></svg-icon></div>
-            </div>
-            <div  class=" flex " style="gap: 50px;">
-                <div class="textbook">
-                    <div class="box " style="gap: 10px;">
-                    </div>
-                    <div class="text ">
-                        <p class="title1" style="color: #fff;">A 교재</p>
-                        <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
-                            <button>수정</button><p>&#124;</p>
-                            <button @click="showConfirm('delete')">삭제</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="textbook">
-                    <div class="box " style="gap: 10px;">
-                    </div>
-                    <div class="text ">
-                        <p class="title1" style="color: #fff;">A 교재</p>
-                        <div class="btnGroup mt15 flex align-center justify-end" style="gap: 10px;">
-                            <button>수정</button><p>&#124;</p>
-                            <button @click="showConfirm('delete')">삭제</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+  </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify,  } from '@mdi/js';
-import { mdilArrowRight } from '@mdi/light-js';
-import ProgressBar from '../../component/ProgressBar.vue';
-
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify } from "@mdi/js";
+import { mdilArrowRight } from "@mdi/light-js";
+import ProgressBar from "../../component/ProgressBar.vue";
+import axios from "axios";
 
 export default {
-    data() {
-        return {
-            mdiMagnify: mdiMagnify,
-            mdilArrowRight: mdilArrowRight,
-            timer: "00:00",
-            progress: 20,
+  data() {
+    return {
+      mdiMagnify: mdiMagnify,
+      mdilArrowRight: mdilArrowRight,
+      timer: "00:00",
+      progress: 20,
 
-            // 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디
-            selectedClassId : this.$route.query.sclsId 
-        }
+      // 교사 홈페이지에서 쿼리 파라미터로부터 전달받은 선택된 반의 아이디
+      selectedClassId: this.$route.query.sclsId,
+
+      // 게시글 정보
+      dataList: [],
+      totalPosts: 0,
+      selectedRow: "",
+      bbsTm: "",
+
+      // 페이징
+      currentPage: 0,
+      itemsPerPage: 5,
+
+      // 반 아이디
+      sclsId: "",
+    };
+  },
+  methods: {
+    goToPage(page) {
+      this.$router.push({ name: page });
     },
-    methods: {
-        goToPage(page) {
-            this.$router.push({ name: page });
+    increaseProgress() {
+      if (this.progress < 100) {
+        this.progress += 10;
+      }
+    },
+    showConfirm(type) {
+      let message = "";
+      if (type === "cancel") {
+        message = "삭제하시겠습니까?";
+      } else if (type === "reset") {
+        message = "초기화하시겠습니까?";
+      } else if (type === "save") {
+        message = "등록하시겠습니까?";
+      }
+
+      if (confirm(message)) {
+        this.goBack();
+      }
+    },
+
+    // 게시글 조회
+    boardList() {
+      const vm = this;
+      axios({
+        url: "/board/findAll.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
         },
-        increaseProgress() {
-            if (this.progress < 100) {
-                this.progress += 10;
-            }
+        data: {
+          page: vm.currentPage + 1,
+          pageSize: vm.itemsPerPage,
+          sclsId: vm.selectedClassId,
         },
-        showConfirm(type) {
-            let message = '';
-            if (type === 'cancel') {
-                message = '삭제하시겠습니까?';
-            } else if (type === 'reset') {
-                message = '초기화하시겠습니까?';
-            } else if (type === 'save') {
-                message = '등록하시겠습니까?';
-            }
+      })
+        .then(function (res) {
+          console.log("dataList - response : ", res.data);
 
-            if (confirm(message)) {
-                this.goBack();
-            }
-        },
-    },
-    watch: {
+          vm.dataList = res.data.result[0].boardClass[0].board;
+          vm.userNm = res.data.result[0].userNm;
+          vm.userId = res.data.result[0].userId;
+          vm.totalPosts = res.data.totalBoard;
 
+          console.log(vm.userId);
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+        });
     },
-    computed: {
+    setClassId() {
+      sessionStorage.setItem("sclsId", JSON.stringify(this.selectedClassId));
+      sessionStorage.removeItem("selectedBoardList");
+      sessionStorage.removeItem("file");
+      this.boardList();
+    },
 
+    // 게시글 정보 세션에 저장
+    selectBoardList(item) {
+      sessionStorage.setItem("selectedBoardList", JSON.stringify(item));
     },
-    components: {
-        SvgIcon,
-        ProgressBar
-    },
-    mounted() {
-        console.log('Main2 mounted');
-        //console.log(`반 페이지 sclsId(반 아이디) 확인 : ${this.selectedClassId}`);
-    }
-}
-</script>
(No newline at end of file)
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+    ProgressBar,
+  },
+  mounted() {
+    console.log("Main2 mounted");
+    //console.log(`반 페이지 sclsId(반 아이디) 확인 : ${this.selectedClassId}`);
+    this.setClassId();
+  },
+};
+</script>
client/views/pages/teacher/Home.vue
--- client/views/pages/teacher/Home.vue
+++ client/views/pages/teacher/Home.vue
@@ -1,268 +1,289 @@
 <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>
(No newline at end of file)
+</style>
client/views/pages/teacher/noticeDetail.vue
--- client/views/pages/teacher/noticeDetail.vue
+++ client/views/pages/teacher/noticeDetail.vue
@@ -1,13 +1,13 @@
 <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>
@@ -35,7 +35,14 @@
       목록
     </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="글쓰기"
@@ -68,6 +75,7 @@
       content: "",
       category: "",
       file: "",
+      time: "",
       user: "",
     };
   },
@@ -84,7 +92,10 @@
       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() {
@@ -102,6 +113,7 @@
         .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);
@@ -128,6 +140,10 @@
             "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);
         })
@@ -157,6 +173,10 @@
             "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);
         })
client/views/pages/teacher/noticeInsert.vue
--- client/views/pages/teacher/noticeInsert.vue
+++ client/views/pages/teacher/noticeInsert.vue
@@ -1,9 +1,9 @@
 <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" />
@@ -13,13 +13,16 @@
       <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>
@@ -38,8 +41,14 @@
       title: "",
       content: "",
       category: "Notice",
+      file: "",
       sclsId: "",
+
       selectedFile: null,
+      dataList: "",
+
+      // 데이터 편집 상태 (true = 수정, false = 등록)
+      isEditMode: false,
     };
   },
   methods: {
@@ -55,14 +64,25 @@
     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 {
         // 파일 업로드
@@ -94,14 +114,76 @@
         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
List