Commit @45ef13b8b801086fd664bc402ac6ef669aa62fa8

홍아랑 09-11

240911 홍아랑 배경화면, 잉크 문제, 전체적인 프레임 css 수정

@45ef13b8b801086fd664bc402ac6ef669aa62fa8

2bfd73e

45ef13b

client/resources/css/style.css

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

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


 /* 레이아웃 */
 .side {
   width: 42rem;
+  background-color: #ffffffa6;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  padding: 2rem;
+  position: absolute;
+
+  top: 179px;
+  height: 700px;
 }
 
 .main-wrap {

 .main-wrap {
   width: 134rem;
   height: 70rem;
-  background-color: #fff;
+  background-color: #ffffffa6;
   border-radius: 10px;
   position: absolute;
   right: 60px;

   top: 179px;
   z-index: 1;
   /* background-image: url("../img/new_img/plan/background.png"); */
+  background-color: #ffffffa6;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 .header img {
   margin-left: 20px;

   /* height: 24rem; */
   /* background-color: #fff; */
   border-radius: 10px;
-  padding: 30px 20px 0px;
+  padding: 20px 20px 0px;
   font-size: 16px;
   font-family: "ONEMobileOTF-Regular";
   /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */

   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
   width: 93%;
   height: 710px;
-  background-color: #fff;
+  /* background-color: #fff; */
+  background-color: #ffffffa6;
   border-radius: 20px;
 }
 

45ef13b

client/resources/img/new_img/content_ink/background.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/background.png

Binary file is not shown

45ef13b

client/resources/img/new_img/content_ink/click_btn.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/click_btn.png

Binary file is not shown

45ef13b

client/resources/img/new_img/content_ink/ink_1.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/ink_1.png

Binary file is not shown

45ef13b

client/resources/img/new_img/content_ink/ink_2.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/ink_2.png

Binary file is not shown

45ef13b

client/resources/img/new_img/content_ink/ink_3.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/ink_3.png

Binary file is not shown

45ef13b

client/resources/img/new_img/content_ink/ink_4.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/ink_4.png

Binary file is not shown

45ef13b

client/resources/img/new_img/content_ink/return_v2.png (Binary) (added)

+++ client/resources/img/new_img/content_ink/return_v2.png

Binary file is not shown

45ef13b

client/resources/img/new_img/logo_v2.png (Binary) (added)

+++ client/resources/img/new_img/logo_v2.png

Binary file is not shown

2bfd73e

45ef13b

client/views/layout/Header.vue

--- client/views/layout/Header.vue

+++ client/views/layout/Header.vue


 <template>
-    <div class="header flex justify-between align-center header-box">
-        <div>
-            <router-link to="/MyPlan.page">
-                <div class="logo"><img src="../../resources/img/logo2.png" alt="" /></div>
-            </router-link>
+  <div class="header flex justify-between align-center header-box">
+    <div>
+      <router-link to="/MyPlan.page">
+        <div class="logo">
+          <img src="../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
-        <div class="flex align-center">
-            <Menu :currentRoute="$route.path"></Menu>
-            <div class="notice" @click="buttonSearch">
-                <img src="../../resources/img/icon2.png" alt="" />
-                <p>{{ unCheck }}</p>
-            </div>
-            <img src="../../resources/img/new_img/profile_img.png" alt="" />
-            <div class="look-btn" @click="logout">
-                <img src="../../resources/img/new_img/icon/logout_icon.png" alt="" />
-            </div>
-            <div class="popup-wrap" v-show="searchOpen">
-                <div class="popup-box">
-                    <div class="flex mb10 justify-between">
-                        <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>
-                    <article class="flex justify-between mt20" v-for="item in dataList" :key="item.id"
-                        :class="{ 'selected-row': selectedRow == item.dataList }">
-                        <img style="width: fit-content" src="../../resources/img/img200_13p.png" alt="" />
-                        <p class="title1 ml20" style="width: 60%">{{ item.bbsTtl }}</p>
-                        <button @click="buttonSearch2(item)" type="button" title="글쓰기" class="new-btn">
-                            자세히 보기
-                        </button>
-                    </article>
-                    <article class="table-pagination flex justify-center align-center mb20 mt30" style="gap: 10px">
-                        <button @click="previousPage" :disabled="page === 1">이전</button>
-                        <button class="selected-btn">{{ page }}</button>
-                        <button @click="nextPage" :disabled="page === totalPages">다음</button>
-                    </article>
-                </div>
-            </div>
-            <div class="popup-wrap popup2" 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="closeBtn2">
-                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
-                        </button>
-                    </div>
-                    <div class="board-wrap">
-                        <div class="flex align-center">
-                            <label for="" class="title2">{{ boardData.bbsTtl }}</label>
-                        </div>
-                        <hr />
-                        <!-- <textarea readonly name="" id="">{{ boardData.bbsCnt }}</textarea> -->
-                    </div>
-                    <div class="flex justify-center mt20">
-                        <button type="button" title="확인" class="new-btn" @click="closeBtn2">확인</button>
-                    </div>
-                </div>
-            </div>
-        </div>
+      </router-link>
     </div>
+    <div class="flex align-center">
+      <Menu :currentRoute="$route.path"></Menu>
+      <div class="notice" @click="buttonSearch">
+        <img src="../../resources/img/icon2.png" alt="" />
+        <p>{{ unCheck }}</p>
+      </div>
+      <img src="../../resources/img/new_img/profile_img.png" alt="" />
+      <div class="look-btn" @click="logout">
+        <img src="../../resources/img/new_img/icon/logout_icon.png" alt="" />
+      </div>
+      <div class="popup-wrap" v-show="searchOpen">
+        <div class="popup-box">
+          <div class="flex mb10 justify-between">
+            <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>
+          <article
+            class="flex justify-between mt20"
+            v-for="item in dataList"
+            :key="item.id"
+            :class="{ 'selected-row': selectedRow == item.dataList }"
+          >
+            <img
+              style="width: fit-content"
+              src="../../resources/img/img200_13p.png"
+              alt=""
+            />
+            <p class="title1 ml20" style="width: 60%">{{ item.bbsTtl }}</p>
+            <button
+              @click="buttonSearch2(item)"
+              type="button"
+              title="글쓰기"
+              class="new-btn"
+            >
+              자세히 보기
+            </button>
+          </article>
+          <article
+            class="table-pagination flex justify-center align-center mb20 mt30"
+            style="gap: 10px"
+          >
+            <button @click="previousPage" :disabled="page === 1">이전</button>
+            <button class="selected-btn">{{ page }}</button>
+            <button @click="nextPage" :disabled="page === totalPages">
+              다음
+            </button>
+          </article>
+        </div>
+      </div>
+      <div class="popup-wrap popup2" 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="closeBtn2">
+              <svg-icon
+                type="mdi"
+                :path="mdiWindowClose"
+                class="close-btn"
+              ></svg-icon>
+            </button>
+          </div>
+          <div class="board-wrap">
+            <div class="flex align-center">
+              <label for="" class="title2">{{ boardData.bbsTtl }}</label>
+            </div>
+            <hr />
+            <!-- <textarea readonly name="" id="">{{ boardData.bbsCnt }}</textarea> -->
+          </div>
+          <div class="flex justify-center mt20">
+            <button
+              type="button"
+              title="확인"
+              class="new-btn"
+              @click="closeBtn2"
+            >
+              확인
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import SvgIcon from '@jamescoyle/vue-icon';
-import { mdiMagnify, mdiWindowClose } from '@mdi/js';
-import axios from 'axios';
-import Menu from './Menu.vue';
+import SvgIcon from "@jamescoyle/vue-icon";
+import { mdiMagnify, mdiWindowClose } from "@mdi/js";
+import axios from "axios";
+import Menu from "./Menu.vue";
 export default {
-    data() {
-        return {
-            mdiWindowClose: mdiWindowClose,
-            showModal: false,
-            searchOpen: false,
-            searchOpen2: false,
+  data() {
+    return {
+      mdiWindowClose: mdiWindowClose,
+      showModal: false,
+      searchOpen: false,
+      searchOpen2: false,
 
-            // 게시글 정보
-            dataList: [],
-            totalBoard: null,
-            selectedRow: '',
-            unCheck: null,
+      // 게시글 정보
+      dataList: [],
+      totalBoard: null,
+      selectedRow: "",
+      unCheck: null,
 
-            boardData: [],
+      boardData: [],
 
-            // 페이징 정보
-            page: 1,
-            pageSize: 2,
-            totalpages: null,
+      // 페이징 정보
+      page: 1,
+      pageSize: 2,
+      totalpages: null,
 
-            // 사용자 정보
-            userId: 'USID_000000000000006',
-            stdId: '',
-        };
+      // 사용자 정보
+      userId: "USID_000000000000006",
+      stdId: "",
+    };
+  },
+  methods: {
+    closeModal() {
+      this.showModal = false;
     },
-    methods: {
-        closeModal() {
-            this.showModal = false;
-        },
-        buttonSearch() {
-            this.searchOpen = true;
-        },
-        buttonSearch2(item) {
-            const vm = this;
-            this.searchOpen2 = true;
-            this.boardData = item;
-
-            axios({
-                url: '/board/boardStudentCheck.json',
-                method: 'post',
-                headers: {
-                    'Content-Type': 'application/json; charset=UTF-8',
-                },
-                data: {
-                    bbsId: item.bbsId,
-                    stdId: vm.stdId,
-                },
-            })
-                .then(function (res) {
-                    vm.boardList();
-                })
-                .catch(function (error) {
-                    console.log('result - error : ', error);
-                });
-        },
-        closeBtn() {
-            this.searchOpen = false;
-        },
-        closeBtn2() {
-            this.searchOpen2 = false;
-        },
-
-        logout() {
-            const result = confirm('로그아웃 하시겠습니까?');
-            if (result) {
-                this.$store.dispatch('logout');
-                this.goToPage('login');
-            } else {
-                return;
-            }
-        },
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-
-        // 공지 조회
-        boardList() {
-            const vm = this;
-            axios({
-                url: '/board/boardStudentList.json',
-                method: 'post',
-                headers: {
-                    'Content-Type': 'application/json; charset=UTF-8',
-                },
-                data: { page: vm.page, pageSize: vm.pageSize, userId: vm.userId },
-            })
-                .then(function (res) {
-                    vm.dataList = res.data.result[0].boardClass[0].board;
-                    vm.userNm = res.data.result[0].userNm;
-                    vm.userId = res.data.result[0].userId;
-                    vm.unCheck = res.data.unCheck;
-                    vm.stdId = res.data.result[0].boardClass[0].board[0].boardStudent[0].stdId;
-                    vm.totalBoard = res.data.totalBoard;
-                    vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize);
-                })
-                .catch(function (error) {
-                    console.log('result - error : ', error);
-                });
-        },
-
-        previousPage() {
-            if (this.page > 1) {
-                this.page -= 1;
-                this.boardList();
-            }
-        },
-
-        nextPage() {
-            if (this.page < this.totalPages) {
-                this.page += 1;
-                this.boardList();
-            }
-        },
+    buttonSearch() {
+      this.searchOpen = true;
     },
-    watch: {},
-    computed: {},
-    components: {
-        SvgIcon,
-        Menu: Menu,
+    buttonSearch2(item) {
+      const vm = this;
+      this.searchOpen2 = true;
+      this.boardData = item;
+
+      axios({
+        url: "/board/boardStudentCheck.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: {
+          bbsId: item.bbsId,
+          stdId: vm.stdId,
+        },
+      })
+        .then(function (res) {
+          vm.boardList();
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+        });
     },
-    mounted() {
-        console.log('Header mounted');
+    closeBtn() {
+      this.searchOpen = false;
+    },
+    closeBtn2() {
+      this.searchOpen2 = false;
+    },
+
+    logout() {
+      const result = confirm("로그아웃 하시겠습니까?");
+      if (result) {
+        this.$store.dispatch("logout");
+        this.goToPage("login");
+      } else {
+        return;
+      }
+    },
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+
+    // 공지 조회
+    boardList() {
+      const vm = this;
+      axios({
+        url: "/board/boardStudentList.json",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json; charset=UTF-8",
+        },
+        data: { page: vm.page, pageSize: vm.pageSize, userId: vm.userId },
+      })
+        .then(function (res) {
+          vm.dataList = res.data.result[0].boardClass[0].board;
+          vm.userNm = res.data.result[0].userNm;
+          vm.userId = res.data.result[0].userId;
+          vm.unCheck = res.data.unCheck;
+          vm.stdId =
+            res.data.result[0].boardClass[0].board[0].boardStudent[0].stdId;
+          vm.totalBoard = res.data.totalBoard;
+          vm.totalPages = Math.ceil(vm.totalBoard / vm.pageSize);
+        })
+        .catch(function (error) {
+          console.log("result - error : ", error);
+        });
+    },
+
+    previousPage() {
+      if (this.page > 1) {
+        this.page -= 1;
         this.boardList();
+      }
     },
+
+    nextPage() {
+      if (this.page < this.totalPages) {
+        this.page += 1;
+        this.boardList();
+      }
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {
+    SvgIcon,
+    Menu: Menu,
+  },
+  mounted() {
+    console.log("Header mounted");
+    this.boardList();
+  },
 };
 </script>
 <style scoped>
 .popup-wrap {
-    position: fixed;
-    background-color: transparent;
-    width: fit-content;
-    height: fit-content;
-    z-index: 10;
+  position: fixed;
+  background-color: transparent;
+  width: fit-content;
+  height: fit-content;
+  z-index: 10;
 }
 
 .popup-box {
-    top: 300px;
-    left: 62%;
+  top: 300px;
+  left: 62%;
 }
 
 .popup2 .popup-box {
-    top: 450px;
-    left: 38%;
+  top: 450px;
+  left: 38%;
 }
 
 /* 

 } */
 
 .header-box {
-    background-color: #ffffff80;
-    padding: 10px 50px;
-    /* box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px; */
-    backdrop-filter: blur(10px);
+  background-color: #ffffff80;
+  padding: 10px 50px;
+  /* box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px; */
+  backdrop-filter: blur(10px);
 }
 </style>

2bfd73e

45ef13b

client/views/layout/Side.vue

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

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


 <template>
-    <div class="side">
-        <div class="profile mb30">
-            <div class="flex align-center" style="gap: 18px">
-                <img src="../../resources/img/img16_s.png" alt="" style="border-radius: 100%; width: 10rem" />
-                <div class="mt25">
-                    <div>
-                        <p class="name mb10">{{ studentInfo.studentName }}</p>
-                        <p class="mb5">
-                            <span><img src="../../resources/img/new_img/icon/school_icon.png" alt="" /></span>
-                            {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
-                            {{ studentInfo.className }}
-                        </p>
-                    </div>
-                    <!-- <progress-bar :progress="progress"></progress-bar> -->
-                </div>
-            </div>
-            <div class="problem-box mt25">
-                <p style="font-weight: bold">
-                    지금까지 푼 총 문제 수 :
-                    <span style="color: #9528b7; font-size: 16px; font-weight: bold"
-                        >{{ studentInfo.totalProblemsSolved }}개</span
-                    >
-                </p>
-            </div>
+  <div class="side">
+    <div class="profile mb30">
+      <div class="flex align-center" style="gap: 18px">
+        <img
+          src="../../resources/img/img16_s.png"
+          alt=""
+          style="border-radius: 100%; width: 10rem"
+        />
+        <div class="mt25">
+          <div>
+            <p class="name mb10">{{ studentInfo.studentName }}</p>
+            <p class="mb5">
+              <span
+                ><img
+                  src="../../resources/img/new_img/icon/school_icon.png"
+                  alt=""
+              /></span>
+              {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
+              {{ studentInfo.className }}
+            </p>
+          </div>
+          <!-- <progress-bar :progress="progress"></progress-bar> -->
         </div>
-        <hr style="margin: 25px 20px" />
-        <div class="history-box">
-            <p class="title2 mb20">최근 학습 히스토리</p>
-            <ul class="flex-column" style="gap: 10px">
-                <!-- 더미 데이터 -->
-                <li>· 지학사 3학년 1학기</li>
-                <li>· 지학사 3학년 2학기</li>
-                <!-- 여기까지 -->
-                <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId">
-                    · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
-                </li>
-            </ul>
-        </div>
-        <!-- <div class="ask mb30">
+      </div>
+      <div class="problem-box mt25">
+        <p style="font-weight: bold">
+          지금까지 푼 총 문제 수 :
+          <span style="color: #9528b7; font-size: 16px; font-weight: bold"
+            >{{ studentInfo.totalProblemsSolved }}개</span
+          >
+        </p>
+      </div>
+    </div>
+    <hr style="margin: 25px 20px" />
+    <div class="history-box">
+      <p class="title2 mb20">최근 학습 히스토리</p>
+      <ul class="flex-column" style="gap: 10px">
+        <!-- 더미 데이터 -->
+        <li>· 에듀캐롯 3학년 1학기</li>
+        <li>· 에듀캐롯 3학년 2학기</li>
+        <!-- 여기까지 -->
+        <li
+          v-for="historyItem in studentInfo.history"
+          :key="historyItem.unitId"
+        >
+          · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
+        </li>
+      </ul>
+    </div>
+    <!-- <div class="ask mb30">
             <p class="title1 mb15">선생님께 질문 있어요~</p>
 
             <div class="memo mb15">

                 <button @click="updateQuestion">질문하기</button>
             </div>
         </div> -->
-        <div class="mt25">
-            <div class="button-box flex">
-                <button @click="handleClickEvent" style="width: 100%">
-                    <img
-                        class="look-btn"
-                        src="../../resources/img/new_img/plan/wrong_note_btn.png"
-                        alt=""
-                        style="width: 100%"
-                    />
-                </button>
-            </div>
-            <div class="button-box flex">
-                <button @click="goPopupOpen" style="width: 100%">
-                    <img src="../../resources/img/new_img/plan/question_btn.png" alt="" style="width: 100%" />
-                </button>
-            </div>
-        </div>
+    <div class="mt25">
+      <div class="button-box flex">
+        <button @click="handleClickEvent" style="width: 100%">
+          <img
+            class="look-btn"
+            src="../../resources/img/new_img/plan/wrong_note_btn.png"
+            alt=""
+            style="width: 100%"
+          />
+        </button>
+      </div>
+      <div class="button-box flex">
+        <button @click="goPopupOpen" style="width: 100%">
+          <img
+            src="../../resources/img/new_img/plan/question_btn.png"
+            alt=""
+            style="width: 100%"
+          />
+        </button>
+      </div>
     </div>
-    <!-- 질문하기 팝업 -->
-    <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
-        <div class="question-popup">
-            <div class="flex justify-between align-center">
-                <p class="question-text mt20">선생님께 질문하기</p>
-                <img class="look-btn" @click="goPopupClose" src="../../resources/img/btn25_93t_normal.png" alt="" />
-            </div>
-            <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">선생님! 질문있어요!!</p>
-            <div class="memo mt25">
-                <p class="title1 memo-text">내용</p>
-                <textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="question"></textarea>
-            </div>
-            <div class="questionBtn-box flex justify-end" style="gap: 15px">
-                <button style="border-color: #eaedf4; color: #8c8c8c" @click="goPopupClose">취소하기</button>
-                <button @click="updateQuestion" style="border-color: #6327b9; color: white; background-color: #6327b9">
-                    질문하기
-                </button>
-            </div>
-        </div>
+  </div>
+  <!-- 질문하기 팝업 -->
+  <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
+    <div class="question-popup">
+      <div class="flex justify-between align-center">
+        <p class="question-text mt20">선생님께 질문하기</p>
+        <img
+          class="look-btn"
+          @click="goPopupClose"
+          src="../../resources/img/btn25_93t_normal.png"
+          alt=""
+        />
+      </div>
+      <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">
+        선생님! 질문있어요!!
+      </p>
+      <div class="memo mt25">
+        <p class="title1 memo-text">내용</p>
+        <textarea
+          name=""
+          id=""
+          placeholder="궁금한 것을 적어보세요."
+          v-model="question"
+        ></textarea>
+      </div>
+      <div class="questionBtn-box flex justify-end" style="gap: 15px">
+        <button
+          style="border-color: #eaedf4; color: #8c8c8c"
+          @click="goPopupClose"
+        >
+          취소하기
+        </button>
+        <button
+          @click="updateQuestion"
+          style="border-color: #6327b9; color: white; background-color: #6327b9"
+        >
+          질문하기
+        </button>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import ProgressBar from '../component/ProgressBar.vue';
-import axios from 'axios';
+import ProgressBar from "../component/ProgressBar.vue";
+import axios from "axios";
 
 export default {
-    data() {
-        return {
-            progress: 20,
-            studentInfo: {
-                studentName: '',
-                institutionName: '',
-                grade: '',
-                className: '',
-                studentQuestion: '',
-                history: [],
-            },
-            userId: '1', // userId 임시 설정
+  data() {
+    return {
+      progress: 20,
+      studentInfo: {
+        studentName: "",
+        institutionName: "",
+        grade: "",
+        className: "",
+        studentQuestion: "",
+        history: [],
+      },
+      userId: "1", // userId 임시 설정
 
-            popupOpen: false,
-            question: null,
-        };
+      popupOpen: false,
+      question: null,
+    };
+  },
+  methods: {
+    pageSetting() {
+      this.userId = this.$store.getters.getUserInfo.userId;
+      console.log("유저 아이디: ", this.userId);
+      this.fetchStudentInfo();
     },
-    methods: {
-        pageSetting() {
-            this.userId = this.$store.getters.getUserInfo.userId;
-            console.log('유저 아이디: ', this.userId);
-            this.fetchStudentInfo();
-        },
 
-        // 학생 정보를 가져오는 메서드
-        fetchStudentInfo() {
-            axios
-                .post('/studentInfo/getInfo.json', { userId: this.userId })
-                .then((response) => {
-                    console.log('학생 정보 조회 : ', response.data);
-                    this.studentInfo = response.data;
-                })
-                .catch((error) => {
-                    console.error('학생 정보 가져오기 실패:', error);
-                });
-        },
-
-        // 질문 업데이트 메서드
-        updateQuestion() {
-            if (this.question === null) {
-                alert('질문을 입력해주세요');
-                return;
-            }
-            axios
-                .post('/studentInfo/updateQuestion.json', {
-                    userId: this.userId,
-                    // userId: 'USID_000000000000002',
-                    studentQuestion: this.question,
-                })
-                .then((response) => {
-                    console.log('질문이 성공적으로 업데이트되었습니다.');
-                    alert('질문이 성공적으로 업데이트되었습니다.');
-                })
-                .catch((error) => {
-                    console.error('질문 업데이트 실패:', error);
-                    alert('질문 업데이트에 실패했습니다.');
-                });
-            this.question = null;
-        },
-
-        handleClick() {
-            this.toggleText();
-            this.goToPage('PreviewNote');
-        },
-
-        handleClick() {
-            this.toggleTextAndNavigate();
-        },
-
-        toggleTextAndNavigate() {
-            if (this.buttonText === '오답노트') {
-                this.buttonText = '학습 코스';
-                this.goToPage('PreviewNote');
-                // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
-            } else {
-                this.buttonText = '오답노트';
-                this.goToPage('Dashboard');
-                // 버튼 텍스트가 '오답노트'일 때 이동할 경로
-            }
-        },
-
-        handleClickEvent() {
-            this.goToPage('PreviewNote');
-        },
-
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-
-        goPopupOpen() {
-            this.popupOpen = true;
-        },
-        goPopupClose() {
-            this.popupOpen = false;
-            this.question = null;
-        },
+    // 학생 정보를 가져오는 메서드
+    fetchStudentInfo() {
+      axios
+        .post("/studentInfo/getInfo.json", { userId: this.userId })
+        .then((response) => {
+          console.log("학생 정보 조회 : ", response.data);
+          this.studentInfo = response.data;
+        })
+        .catch((error) => {
+          console.error("학생 정보 가져오기 실패:", error);
+        });
     },
-    watch: {},
-    computed: {},
-    components: {
-        ProgressBar,
+
+    // 질문 업데이트 메서드
+    updateQuestion() {
+      if (this.question === null) {
+        alert("질문을 입력해주세요");
+        return;
+      }
+      axios
+        .post("/studentInfo/updateQuestion.json", {
+          userId: this.userId,
+          // userId: 'USID_000000000000002',
+          studentQuestion: this.question,
+        })
+        .then((response) => {
+          console.log("질문이 성공적으로 업데이트되었습니다.");
+          alert("질문이 성공적으로 업데이트되었습니다.");
+        })
+        .catch((error) => {
+          console.error("질문 업데이트 실패:", error);
+          alert("질문 업데이트에 실패했습니다.");
+        });
+      this.question = null;
     },
-    mounted() {
-        console.log('Side mounted');
-        this.pageSetting();
+
+    handleClick() {
+      this.toggleText();
+      this.goToPage("PreviewNote");
     },
+
+    handleClick() {
+      this.toggleTextAndNavigate();
+    },
+
+    toggleTextAndNavigate() {
+      if (this.buttonText === "오답노트") {
+        this.buttonText = "학습 코스";
+        this.goToPage("PreviewNote");
+        // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
+      } else {
+        this.buttonText = "오답노트";
+        this.goToPage("Dashboard");
+        // 버튼 텍스트가 '오답노트'일 때 이동할 경로
+      }
+    },
+
+    handleClickEvent() {
+      this.goToPage("PreviewNote");
+    },
+
+    goToPage(page) {
+      this.$router.push({ name: page });
+    },
+
+    goPopupOpen() {
+      this.popupOpen = true;
+    },
+    goPopupClose() {
+      this.popupOpen = false;
+      this.question = null;
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {
+    ProgressBar,
+  },
+  mounted() {
+    console.log("Side mounted");
+    this.pageSetting();
+  },
 };
 </script>
 <style scoped>
 .login-btn img {
-    width: 430px;
-    height: 85px;
+  width: 430px;
+  height: 85px;
 }
 
 .problem-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid #6327b9;
-    background-color: #f0eaf8;
-    border-radius: 8px;
-    padding: 10px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #6327b9;
+  background-color: #f0eaf8;
+  border-radius: 8px;
+  padding: 10px 10px;
 }
 
 .history-box {
-    background-color: white;
-    padding: 30px 20px;
-    border: 1px solid #c6c6c6;
-    border-radius: 10px;
-    margin: 25px 20px 0px;
+  background-color: white;
+  padding: 30px 20px;
+  border: 1px solid #c6c6c6;
+  border-radius: 10px;
+  margin: 25px 20px 0px;
 }
 
 .history-box li {
-    background-color: #eaedf4;
-    border-radius: 10px;
-    font-size: 18px;
-    list-style-type: none;
-    padding: 10px;
+  background-color: #eaedf4;
+  border-radius: 10px;
+  font-size: 18px;
+  list-style-type: none;
+  padding: 10px;
 }
 
 .button-box {
-    margin: 10px 20px;
+  margin: 10px 20px;
 }
 
 .question-popup {
-    background-color: white;
-    border-radius: 10px;
-    padding: 30px 40px;
-    position: absolute;
-    top: 15%;
-    left: 25%;
-    width: 100rem;
+  background-color: white;
+  border-radius: 10px;
+  padding: 30px 40px;
+  position: absolute;
+  top: 15%;
+  left: 25%;
+  width: 100rem;
 }
 
 .question-text {
-    font-family: 'ONEMobilePOPOTF';
-    font-size: 32px;
-    color: #6327b9;
+  font-family: "ONEMobilePOPOTF";
+  font-size: 32px;
+  color: #6327b9;
 }
 
 .memo-text {
-    font-family: 'ONEMobilePOPOTF';
-    color: #6327b9;
+  font-family: "ONEMobilePOPOTF";
+  color: #6327b9;
 }
 
 .memo textarea {
-    border: 2px solid #cac0e3;
-    border-radius: 10px;
-    width: 100%;
-    padding: 20px;
-    height: 30rem;
-    margin: 20px 0px 40px;
+  border: 2px solid #cac0e3;
+  border-radius: 10px;
+  width: 100%;
+  padding: 20px;
+  height: 30rem;
+  margin: 20px 0px 40px;
 }
 
 .questionBtn-box button {
-    font-size: 18px;
-    padding: 8px 30px;
-    border: 2px solid;
-    border-radius: 8px;
-    font-weight: bold;
-    font-family: 'ONEMobileOTF-Regular';
+  font-size: 18px;
+  padding: 8px 30px;
+  border: 2px solid;
+  border-radius: 8px;
+  font-weight: bold;
+  font-family: "ONEMobileOTF-Regular";
 }
 </style>

2bfd73e

45ef13b

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

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

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


     <div style="margin: 30px 0px 50px; width: 20%">
       <router-link to="/MyPlan.page">
         <div class="logo mb25">
-          <img src="../../../../resources/img/logo2.png" alt="" />
+          <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
         </div>
       </router-link>
     </div>

       <div class="content title-box">
         <div style="display: flex; justify-content: space-between">
           <p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
-          <button id="returnButton" @click="returnPage" style="margin: 4rem">
-            <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
+          <button
+            id="returnButton"
+            @click="returnPage"
+            style="margin: 4rem 4rem 0 2rem"
+          >
+            <img
+              src="../../../../resources/img/new_img/content_ink/return_v2.png"
+              alt=""
+            />
             <p>되돌리기</p>
           </button>
         </div>

           <div class="dropGroup flex align-center justify-center">
             <div style="position: relative">
               <img
-                src="../../../../resources/img/img72_41s.png"
+                src="../../../../resources/img/new_img/content_ink/background.png"
                 alt=""
-                style="width: 93%"
+                style="width: 138rem; height: 49rem"
               />
               <div class="vocaGroup">
                 <div

                 <button
                   id="eraser1"
                   class="dropzone"
-                  style="left: 141px; top: 44px"
+                  style="left: 97px; top: 125px; position: fixed"
                 >
-                  <img src="../../../../resources/img/img78_41s.png" alt="" />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/ink_1.png"
+                    alt=""
+                    style="position: relative; z-index: 1"
+                  />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                    alt=""
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      height: 56px;
+                      right: 69px;
+                    "
+                  />
                 </button>
                 <button
                   id="eraser2"
                   class="dropzone"
-                  style="left: 200px; bottom: 46px"
+                  style="left: 87px; bottom: 38px; position: fixed"
                 >
-                  <img src="../../../../resources/img/img79_41s.png" alt="" />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/ink_2.png"
+                    alt=""
+                    style="position: relative; z-index: 1"
+                  />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                    alt=""
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      height: 56px;
+                      right: 139px;
+                    "
+                  />
                 </button>
                 <button
                   id="eraser3"
                   class="dropzone"
-                  style="right: 237px; top: 114px"
+                  style="right: 207px; top: 133px; position: fixed"
                 >
-                  <img src="../../../../resources/img/img80_41s.png" alt="" />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/ink_3.png"
+                    alt=""
+                    style="position: relative; z-index: 1"
+                  />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                    alt=""
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      height: 56px;
+                      right: 109px;
+                    "
+                  />
                 </button>
                 <button
                   id="eraser4"
                   class="dropzone"
-                  style="right: 159px; bottom: 5px"
+                  style="right: 206px; bottom: 51px; position: fixed"
                 >
-                  <img src="../../../../resources/img/img81_41s.png" alt="" />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/ink_4.png"
+                    alt=""
+                    style="position: relative; z-index: 1"
+                  />
+                  <img
+                    src="../../../../resources/img/new_img/content_ink/click_btn.png"
+                    alt=""
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      height: 56px;
+                      right: 115px;
+                    "
+                  />
                 </button>
               </div>
             </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -117,6 +117,14 @@
117	117	/* 레이아웃 */
118	118	.side {
119	119	width: 42rem;
	120	+ background-color: #ffffffa6;
	121	+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	122	+ border-radius: 10px;
	123	+ padding: 2rem;
	124	+ position: absolute;
	125	+
	126	+ top: 179px;
	127	+ height: 700px;
120	128	}
121	129
122	130	.main-wrap {
...	...	@@ -127,7 +135,7 @@
127	135	.main-wrap {
128	136	width: 134rem;
129	137	height: 70rem;
130		- background-color: #fff;
	138	+ background-color: #ffffffa6;
131	139	border-radius: 10px;
132	140	position: absolute;
133	141	right: 60px;
...	...	@@ -159,6 +167,8 @@
159	167	top: 179px;
160	168	z-index: 1;
161	169	/* background-image: url("../img/new_img/plan/background.png"); */
	170	+ background-color: #ffffffa6;
	171	+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
162	172	}
163	173	.header img {
164	174	margin-left: 20px;
...	...	@@ -174,7 +184,7 @@
174	184	/* height: 24rem; */
175	185	/* background-color: #fff; */
176	186	border-radius: 10px;
177		- padding: 30px 20px 0px;
	187	+ padding: 20px 20px 0px;
178	188	font-size: 16px;
179	189	font-family: "ONEMobileOTF-Regular";
180	190	/* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
...	...	@@ -749,7 +759,8 @@
749	759	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
750	760	width: 93%;
751	761	height: 710px;
752		- background-color: #fff;
	762	+ /* background-color: #fff; */
	763	+ background-color: #ffffffa6;
753	764	border-radius: 20px;
754	765	}
755	766

...	...	@@ -1,43 +1,54 @@
1	1	<template>
2		- <div class="side">
3		- <div class="profile mb30">
4		- <div class="flex align-center" style="gap: 18px">
5		- <img src="../../resources/img/img16_s.png" alt="" style="border-radius: 100%; width: 10rem" />
6		- <div class="mt25">
7		- <div>
8		- <p class="name mb10">{{ studentInfo.studentName }}</p>
9		- <p class="mb5">
10		- <span><img src="../../resources/img/new_img/icon/school_icon.png" alt="" /></span>
11		- {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
12		- {{ studentInfo.className }}
13		- </p>
14		- </div>
15		- <!-- <progress-bar :progress="progress"></progress-bar> -->
16		- </div>
17		- </div>
18		- <div class="problem-box mt25">
19		- <p style="font-weight: bold">
20		- 지금까지 푼 총 문제 수 :
21		- <span style="color: #9528b7; font-size: 16px; font-weight: bold"
22		- >{{ studentInfo.totalProblemsSolved }}개</span
23		- >
24		- </p>
25		- </div>
	2	+ <div class="side">
	3	+ <div class="profile mb30">
	4	+ <div class="flex align-center" style="gap: 18px">
	5	+ <img
	6	+ src="../../resources/img/img16_s.png"
	7	+ alt=""
	8	+ style="border-radius: 100%; width: 10rem"
	9	+ />
	10	+ <div class="mt25">
	11	+ <div>
	12	+ <p class="name mb10">{{ studentInfo.studentName }}</p>
	13	+ <p class="mb5">
	14	+ <span
	15	+ ><img
	16	+ src="../../resources/img/new_img/icon/school_icon.png"
	17	+ alt=""
	18	+ /></span>
	19	+ {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
	20	+ {{ studentInfo.className }}
	21	+ </p>
	22	+ </div>
	23	+ <!-- <progress-bar :progress="progress"></progress-bar> -->
26	24	</div>
27		- <hr style="margin: 25px 20px" />
28		- <div class="history-box">
29		- <p class="title2 mb20">최근 학습 히스토리</p>
30		- <ul class="flex-column" style="gap: 10px">
31		- <!-- 더미 데이터 -->
32		- <li>· 지학사 3학년 1학기</li>
33		- <li>· 지학사 3학년 2학기</li>
34		- <!-- 여기까지 -->
35		- <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId">
36		- · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
37		- </li>
38		- </ul>
39		- </div>
40		- <!-- <div class="ask mb30">
	25	+ </div>
	26	+ <div class="problem-box mt25">
	27	+ <p style="font-weight: bold">
	28	+ 지금까지 푼 총 문제 수 :
	29	+ <span style="color: #9528b7; font-size: 16px; font-weight: bold"
	30	+ >{{ studentInfo.totalProblemsSolved }}개</span
	31	+ >
	32	+ </p>
	33	+ </div>
	34	+ </div>
	35	+ <hr style="margin: 25px 20px" />
	36	+ <div class="history-box">
	37	+ <p class="title2 mb20">최근 학습 히스토리</p>
	38	+ <ul class="flex-column" style="gap: 10px">
	39	+ <!-- 더미 데이터 -->
	40	+ <li>· 에듀캐롯 3학년 1학기</li>
	41	+ <li>· 에듀캐롯 3학년 2학기</li>
	42	+ <!-- 여기까지 -->
	43	+ <li
	44	+ v-for="historyItem in studentInfo.history"
	45	+ :key="historyItem.unitId"
	46	+ >
	47	+ · [{{ historyItem.bookName }}] {{ historyItem.unitName }}
	48	+ </li>
	49	+ </ul>
	50	+ </div>
	51	+ <!-- <div class="ask mb30">
41	52	<p class="title1 mb15">선생님께 질문 있어요~</p>
42	53
43	54	<div class="memo mb15">
...	...	@@ -52,231 +63,255 @@
52	63	<button @click="updateQuestion">질문하기</button>
53	64	</div>
54	65	</div> -->
55		- <div class="mt25">
56		- <div class="button-box flex">
57		- <button @click="handleClickEvent" style="width: 100%">
58		- <img
59		- class="look-btn"
60		- src="../../resources/img/new_img/plan/wrong_note_btn.png"
61		- alt=""
62		- style="width: 100%"
63		- />
64		- </button>
65		- </div>
66		- <div class="button-box flex">
67		- <button @click="goPopupOpen" style="width: 100%">
68		- <img src="../../resources/img/new_img/plan/question_btn.png" alt="" style="width: 100%" />
69		- </button>
70		- </div>
71		- </div>
	66	+ <div class="mt25">
	67	+ <div class="button-box flex">
	68	+ <button @click="handleClickEvent" style="width: 100%">
	69	+ <img
	70	+ class="look-btn"
	71	+ src="../../resources/img/new_img/plan/wrong_note_btn.png"
	72	+ alt=""
	73	+ style="width: 100%"
	74	+ />
	75	+ </button>
	76	+ </div>
	77	+ <div class="button-box flex">
	78	+ <button @click="goPopupOpen" style="width: 100%">
	79	+ <img
	80	+ src="../../resources/img/new_img/plan/question_btn.png"
	81	+ alt=""
	82	+ style="width: 100%"
	83	+ />
	84	+ </button>
	85	+ </div>
72	86	</div>
73		- <!-- 질문하기 팝업 -->
74		- <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
75		- <div class="question-popup">
76		- <div class="flex justify-between align-center">
77		- <p class="question-text mt20">선생님께 질문하기</p>
78		- <img class="look-btn" @click="goPopupClose" src="../../resources/img/btn25_93t_normal.png" alt="" />
79		- </div>
80		- <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">선생님! 질문있어요!!</p>
81		- <div class="memo mt25">
82		- <p class="title1 memo-text">내용</p>
83		- <textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="question"></textarea>
84		- </div>
85		- <div class="questionBtn-box flex justify-end" style="gap: 15px">
86		- <button style="border-color: #eaedf4; color: #8c8c8c" @click="goPopupClose">취소하기</button>
87		- <button @click="updateQuestion" style="border-color: #6327b9; color: white; background-color: #6327b9">
88		- 질문하기
89		- </button>
90		- </div>
91		- </div>
	87	+ </div>
	88	+ <!-- 질문하기 팝업 -->
	89	+ <div class="popup-wrap" v-if="this.popupOpen === true" style="z-index: 100">
	90	+ <div class="question-popup">
	91	+ <div class="flex justify-between align-center">
	92	+ <p class="question-text mt20">선생님께 질문하기</p>
	93	+ <img
	94	+ class="look-btn"
	95	+ @click="goPopupClose"
	96	+ src="../../resources/img/btn25_93t_normal.png"
	97	+ alt=""
	98	+ />
	99	+ </div>
	100	+ <p style="color: #8c8c8c; font-size: 20px; margin: 40px 0px">
	101	+ 선생님! 질문있어요!!
	102	+ </p>
	103	+ <div class="memo mt25">
	104	+ <p class="title1 memo-text">내용</p>
	105	+ <textarea
	106	+ name=""
	107	+ id=""
	108	+ placeholder="궁금한 것을 적어보세요."
	109	+ v-model="question"
	110	+ ></textarea>
	111	+ </div>
	112	+ <div class="questionBtn-box flex justify-end" style="gap: 15px">
	113	+ <button
	114	+ style="border-color: #eaedf4; color: #8c8c8c"
	115	+ @click="goPopupClose"
	116	+ >
	117	+ 취소하기
	118	+ </button>
	119	+ <button
	120	+ @click="updateQuestion"
	121	+ style="border-color: #6327b9; color: white; background-color: #6327b9"
	122	+ >
	123	+ 질문하기
	124	+ </button>
	125	+ </div>
92	126	</div>
	127	+ </div>
93	128	</template>
94	129
95	130	<script>
96		-import ProgressBar from '../component/ProgressBar.vue';
97		-import axios from 'axios';
	131	+import ProgressBar from "../component/ProgressBar.vue";
	132	+import axios from "axios";
98	133
99	134	export default {
100		- data() {
101		- return {
102		- progress: 20,
103		- studentInfo: {
104		- studentName: '',
105		- institutionName: '',
106		- grade: '',
107		- className: '',
108		- studentQuestion: '',
109		- history: [],
110		- },
111		- userId: '1', // userId 임시 설정
	135	+ data() {
	136	+ return {
	137	+ progress: 20,
	138	+ studentInfo: {
	139	+ studentName: "",
	140	+ institutionName: "",
	141	+ grade: "",
	142	+ className: "",
	143	+ studentQuestion: "",
	144	+ history: [],
	145	+ },
	146	+ userId: "1", // userId 임시 설정
112	147
113		- popupOpen: false,
114		- question: null,
115		- };
	148	+ popupOpen: false,
	149	+ question: null,
	150	+ };
	151	+ },
	152	+ methods: {
	153	+ pageSetting() {
	154	+ this.userId = this.$store.getters.getUserInfo.userId;
	155	+ console.log("유저 아이디: ", this.userId);
	156	+ this.fetchStudentInfo();
116	157	},
117		- methods: {
118		- pageSetting() {
119		- this.userId = this.$store.getters.getUserInfo.userId;
120		- console.log('유저 아이디: ', this.userId);
121		- this.fetchStudentInfo();
122		- },
123	158
124		- // 학생 정보를 가져오는 메서드
125		- fetchStudentInfo() {
126		- axios
127		- .post('/studentInfo/getInfo.json', { userId: this.userId })
128		- .then((response) => {
129		- console.log('학생 정보 조회 : ', response.data);
130		- this.studentInfo = response.data;
131		- })
132		- .catch((error) => {
133		- console.error('학생 정보 가져오기 실패:', error);
134		- });
135		- },
136		-
137		- // 질문 업데이트 메서드
138		- updateQuestion() {
139		- if (this.question === null) {
140		- alert('질문을 입력해주세요');
141		- return;
142		- }
143		- axios
144		- .post('/studentInfo/updateQuestion.json', {
145		- userId: this.userId,
146		- // userId: 'USID_000000000000002',
147		- studentQuestion: this.question,
148		- })
149		- .then((response) => {
150		- console.log('질문이 성공적으로 업데이트되었습니다.');
151		- alert('질문이 성공적으로 업데이트되었습니다.');
152		- })
153		- .catch((error) => {
154		- console.error('질문 업데이트 실패:', error);
155		- alert('질문 업데이트에 실패했습니다.');
156		- });
157		- this.question = null;
158		- },
159		-
160		- handleClick() {
161		- this.toggleText();
162		- this.goToPage('PreviewNote');
163		- },
164		-
165		- handleClick() {
166		- this.toggleTextAndNavigate();
167		- },
168		-
169		- toggleTextAndNavigate() {
170		- if (this.buttonText === '오답노트') {
171		- this.buttonText = '학습 코스';
172		- this.goToPage('PreviewNote');
173		- // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
174		- } else {
175		- this.buttonText = '오답노트';
176		- this.goToPage('Dashboard');
177		- // 버튼 텍스트가 '오답노트'일 때 이동할 경로
178		- }
179		- },
180		-
181		- handleClickEvent() {
182		- this.goToPage('PreviewNote');
183		- },
184		-
185		- goToPage(page) {
186		- this.$router.push({ name: page });
187		- },
188		-
189		- goPopupOpen() {
190		- this.popupOpen = true;
191		- },
192		- goPopupClose() {
193		- this.popupOpen = false;
194		- this.question = null;
195		- },
	159	+ // 학생 정보를 가져오는 메서드
	160	+ fetchStudentInfo() {
	161	+ axios
	162	+ .post("/studentInfo/getInfo.json", { userId: this.userId })
	163	+ .then((response) => {
	164	+ console.log("학생 정보 조회 : ", response.data);
	165	+ this.studentInfo = response.data;
	166	+ })
	167	+ .catch((error) => {
	168	+ console.error("학생 정보 가져오기 실패:", error);
	169	+ });
196	170	},
197		- watch: {},
198		- computed: {},
199		- components: {
200		- ProgressBar,
	171	+
	172	+ // 질문 업데이트 메서드
	173	+ updateQuestion() {
	174	+ if (this.question === null) {
	175	+ alert("질문을 입력해주세요");
	176	+ return;
	177	+ }
	178	+ axios
	179	+ .post("/studentInfo/updateQuestion.json", {
	180	+ userId: this.userId,
	181	+ // userId: 'USID_000000000000002',
	182	+ studentQuestion: this.question,
	183	+ })
	184	+ .then((response) => {
	185	+ console.log("질문이 성공적으로 업데이트되었습니다.");
	186	+ alert("질문이 성공적으로 업데이트되었습니다.");
	187	+ })
	188	+ .catch((error) => {
	189	+ console.error("질문 업데이트 실패:", error);
	190	+ alert("질문 업데이트에 실패했습니다.");
	191	+ });
	192	+ this.question = null;
201	193	},
202		- mounted() {
203		- console.log('Side mounted');
204		- this.pageSetting();
	194	+
	195	+ handleClick() {
	196	+ this.toggleText();
	197	+ this.goToPage("PreviewNote");
205	198	},
	199	+
	200	+ handleClick() {
	201	+ this.toggleTextAndNavigate();
	202	+ },
	203	+
	204	+ toggleTextAndNavigate() {
	205	+ if (this.buttonText === "오답노트") {
	206	+ this.buttonText = "학습 코스";
	207	+ this.goToPage("PreviewNote");
	208	+ // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
	209	+ } else {
	210	+ this.buttonText = "오답노트";
	211	+ this.goToPage("Dashboard");
	212	+ // 버튼 텍스트가 '오답노트'일 때 이동할 경로
	213	+ }
	214	+ },
	215	+
	216	+ handleClickEvent() {
	217	+ this.goToPage("PreviewNote");
	218	+ },
	219	+
	220	+ goToPage(page) {
	221	+ this.$router.push({ name: page });
	222	+ },
	223	+
	224	+ goPopupOpen() {
	225	+ this.popupOpen = true;
	226	+ },
	227	+ goPopupClose() {
	228	+ this.popupOpen = false;
	229	+ this.question = null;
	230	+ },
	231	+ },
	232	+ watch: {},
	233	+ computed: {},
	234	+ components: {
	235	+ ProgressBar,
	236	+ },
	237	+ mounted() {
	238	+ console.log("Side mounted");
	239	+ this.pageSetting();
	240	+ },
206	241	};
207	242	</script>
208	243	<style scoped>
209	244	.login-btn img {
210		- width: 430px;
211		- height: 85px;
	245	+ width: 430px;
	246	+ height: 85px;
212	247	}
213	248
214	249	.problem-box {
215		- display: flex;
216		- align-items: center;
217		- justify-content: center;
218		- border: 2px solid #6327b9;
219		- background-color: #f0eaf8;
220		- border-radius: 8px;
221		- padding: 10px 10px;
	250	+ display: flex;
	251	+ align-items: center;
	252	+ justify-content: center;
	253	+ border: 2px solid #6327b9;
	254	+ background-color: #f0eaf8;
	255	+ border-radius: 8px;
	256	+ padding: 10px 10px;
222	257	}
223	258
224	259	.history-box {
225		- background-color: white;
226		- padding: 30px 20px;
227		- border: 1px solid #c6c6c6;
228		- border-radius: 10px;
229		- margin: 25px 20px 0px;
	260	+ background-color: white;
	261	+ padding: 30px 20px;
	262	+ border: 1px solid #c6c6c6;
	263	+ border-radius: 10px;
	264	+ margin: 25px 20px 0px;
230	265	}
231	266
232	267	.history-box li {
233		- background-color: #eaedf4;
234		- border-radius: 10px;
235		- font-size: 18px;
236		- list-style-type: none;
237		- padding: 10px;
	268	+ background-color: #eaedf4;
	269	+ border-radius: 10px;
	270	+ font-size: 18px;
	271	+ list-style-type: none;
	272	+ padding: 10px;
238	273	}
239	274
240	275	.button-box {
241		- margin: 10px 20px;
	276	+ margin: 10px 20px;
242	277	}
243	278
244	279	.question-popup {
245		- background-color: white;
246		- border-radius: 10px;
247		- padding: 30px 40px;
248		- position: absolute;
249		- top: 15%;
250		- left: 25%;
251		- width: 100rem;
	280	+ background-color: white;
	281	+ border-radius: 10px;
	282	+ padding: 30px 40px;
	283	+ position: absolute;
	284	+ top: 15%;
	285	+ left: 25%;
	286	+ width: 100rem;
252	287	}
253	288
254	289	.question-text {
255		- font-family: 'ONEMobilePOPOTF';
256		- font-size: 32px;
257		- color: #6327b9;
	290	+ font-family: "ONEMobilePOPOTF";
	291	+ font-size: 32px;
	292	+ color: #6327b9;
258	293	}
259	294
260	295	.memo-text {
261		- font-family: 'ONEMobilePOPOTF';
262		- color: #6327b9;
	296	+ font-family: "ONEMobilePOPOTF";
	297	+ color: #6327b9;
263	298	}
264	299
265	300	.memo textarea {
266		- border: 2px solid #cac0e3;
267		- border-radius: 10px;
268		- width: 100%;
269		- padding: 20px;
270		- height: 30rem;
271		- margin: 20px 0px 40px;
	301	+ border: 2px solid #cac0e3;
	302	+ border-radius: 10px;
	303	+ width: 100%;
	304	+ padding: 20px;
	305	+ height: 30rem;
	306	+ margin: 20px 0px 40px;
272	307	}
273	308
274	309	.questionBtn-box button {
275		- font-size: 18px;
276		- padding: 8px 30px;
277		- border: 2px solid;
278		- border-radius: 8px;
279		- font-weight: bold;
280		- font-family: 'ONEMobileOTF-Regular';
	310	+ font-size: 18px;
	311	+ padding: 8px 30px;
	312	+ border: 2px solid;
	313	+ border-radius: 8px;
	314	+ font-weight: bold;
	315	+ font-family: "ONEMobileOTF-Regular";
281	316	}
282	317	</style>

...	...	@@ -3,7 +3,7 @@
3	3	<div style="margin: 30px 0px 50px; width: 20%">
4	4	<router-link to="/MyPlan.page">
5	5	<div class="logo mb25">
6		- <img src="../../../../resources/img/logo2.png" alt="" />
	6	+ <img src="../../../../resources/img/new_img/logo_v2.png" alt="" />
7	7	</div>
8	8	</router-link>
9	9	</div>
...	...	@@ -28,8 +28,15 @@
28	28	<div class="content title-box">
29	29	<div style="display: flex; justify-content: space-between">
30	30	<p class="title mt25 title-bg">STEP 2 - 단어로 공부하는 영어</p>
31		- <button id="returnButton" @click="returnPage" style="margin: 4rem">
32		- <img src="../../../../resources/img/btn_return_50x50.png" alt="" />
	31	+ <button
	32	+ id="returnButton"
	33	+ @click="returnPage"
	34	+ style="margin: 4rem 4rem 0 2rem"
	35	+ >
	36	+ <img
	37	+ src="../../../../resources/img/new_img/content_ink/return_v2.png"
	38	+ alt=""
	39	+ />
33	40	<p>되돌리기</p>
34	41	</button>
35	42	</div>
...	...	@@ -43,9 +50,9 @@
43	50	<div class="dropGroup flex align-center justify-center">
44	51	<div style="position: relative">
45	52	<img
46		- src="../../../../resources/img/img72_41s.png"
	53	+ src="../../../../resources/img/new_img/content_ink/background.png"
47	54	alt=""
48		- style="width: 93%"
	55	+ style="width: 138rem; height: 49rem"
49	56	/>
50	57	<div class="vocaGroup">
51	58	<div
...	...	@@ -77,30 +84,86 @@
77	84	<button
78	85	id="eraser1"
79	86	class="dropzone"
80		- style="left: 141px; top: 44px"
	87	+ style="left: 97px; top: 125px; position: fixed"
81	88	>
82		- <img src="../../../../resources/img/img78_41s.png" alt="" />
	89	+ <img
	90	+ src="../../../../resources/img/new_img/content_ink/ink_1.png"
	91	+ alt=""
	92	+ style="position: relative; z-index: 1"
	93	+ />
	94	+ <img
	95	+ src="../../../../resources/img/new_img/content_ink/click_btn.png"
	96	+ alt=""
	97	+ style="
	98	+ position: absolute;
	99	+ z-index: 2;
	100	+ height: 56px;
	101	+ right: 69px;
	102	+ "
	103	+ />
83	104	</button>
84	105	<button
85	106	id="eraser2"
86	107	class="dropzone"
87		- style="left: 200px; bottom: 46px"
	108	+ style="left: 87px; bottom: 38px; position: fixed"
88	109	>
89		- <img src="../../../../resources/img/img79_41s.png" alt="" />
	110	+ <img
	111	+ src="../../../../resources/img/new_img/content_ink/ink_2.png"
	112	+ alt=""
	113	+ style="position: relative; z-index: 1"
	114	+ />
	115	+ <img
	116	+ src="../../../../resources/img/new_img/content_ink/click_btn.png"
	117	+ alt=""
	118	+ style="
	119	+ position: absolute;
	120	+ z-index: 2;
	121	+ height: 56px;
	122	+ right: 139px;
	123	+ "
	124	+ />
90	125	</button>
91	126	<button
92	127	id="eraser3"
93	128	class="dropzone"
94		- style="right: 237px; top: 114px"
	129	+ style="right: 207px; top: 133px; position: fixed"
95	130	>
96		- <img src="../../../../resources/img/img80_41s.png" alt="" />
	131	+ <img
	132	+ src="../../../../resources/img/new_img/content_ink/ink_3.png"
	133	+ alt=""
	134	+ style="position: relative; z-index: 1"
	135	+ />
	136	+ <img
	137	+ src="../../../../resources/img/new_img/content_ink/click_btn.png"
	138	+ alt=""
	139	+ style="
	140	+ position: absolute;
	141	+ z-index: 2;
	142	+ height: 56px;
	143	+ right: 109px;
	144	+ "
	145	+ />
97	146	</button>
98	147	<button
99	148	id="eraser4"
100	149	class="dropzone"
101		- style="right: 159px; bottom: 5px"
	150	+ style="right: 206px; bottom: 51px; position: fixed"
102	151	>
103		- <img src="../../../../resources/img/img81_41s.png" alt="" />
	152	+ <img
	153	+ src="../../../../resources/img/new_img/content_ink/ink_4.png"
	154	+ alt=""
	155	+ style="position: relative; z-index: 1"
	156	+ />
	157	+ <img
	158	+ src="../../../../resources/img/new_img/content_ink/click_btn.png"
	159	+ alt=""
	160	+ style="
	161	+ position: absolute;
	162	+ z-index: 2;
	163	+ height: 56px;
	164	+ right: 115px;
	165	+ "
	166	+ />
104	167	</button>
105	168	</div>
106	169	</div>

Delete comment