Commit @0a3468aa5a1fb2fbdc1bb33a518d62f28a0836f9

정다정 2024-09-10

240910 정다정 사이드바&헤더 수정

@0a3468aa5a1fb2fbdc1bb33a518d62f28a0836f9

cc9b086

0a3468a

client/views/layout/Header.vue

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

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


 <template>
-  <div class="header flex justify-end">
-    <div class="setting" @click="logout">
-      <img src="../../resources/img/setting.png" alt="" />
-    </div>
-    <div class="notice" @click="buttonSearch">
-      <img src="../../resources/img/icon2.png" alt="" />
-      <p>{{ unCheck }}</p>
-    </div>
-    <img src="../../resources/img/img03.png" alt="" />
-    <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 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>
-        <article class="flex justify-between mt20" v-for="(item, index) 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 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>
-    <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>
 </template>
 
 <script>
-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';
+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: "",
-    };
-  },
-  methods: {
-    closeModal() {
-      this.showModal = false;
+            // 사용자 정보
+            userId: 'USID_000000000000006',
+            stdId: '',
+        };
     },
-    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",
+    methods: {
+        closeModal() {
+            this.showModal = false;
         },
-        data: {
-          bbsId: item.bbsId,
-          stdId: vm.stdId,
+        buttonSearch() {
+            this.searchOpen = true;
         },
-      })
-        .then(function (res) {
-          vm.boardList();
-        })
-        .catch(function (error) {
-          console.log("result - error : ", error);
-        });
-    },
-    closeBtn() {
-      this.searchOpen = false;
-    },
-    closeBtn2() {
-      this.searchOpen2 = false;
-    },
+        buttonSearch2(item) {
+            const vm = this;
+            this.searchOpen2 = true;
+            this.boardData = item;
 
-    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",
+            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);
+                });
         },
-        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);
-        });
-    },
+        closeBtn() {
+            this.searchOpen = false;
+        },
+        closeBtn2() {
+            this.searchOpen2 = false;
+        },
 
-    previousPage() {
-      if (this.page > 1) {
-        this.page -= 1;
+        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();
-      }
     },
-
-    nextPage() {
-      if (this.page < this.totalPages) {
-        this.page += 1;
-        this.boardList();
-      }
-    },
-  },
-  watch: {},
-  computed: {},
-  components: {
-    SvgIcon,
-  },
-  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: white;
+    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;
 }
 </style>

cc9b086

0a3468a

client/views/layout/Menu.vue

--- client/views/layout/Menu.vue

+++ client/views/layout/Menu.vue


 <template>
-    <div class="menu flex" style="gap: 30px">
+    <div class="menu flex align-center" style="gap: 30px; padding-top: 10px">
         <router-link to="/MyPlan.page">
             <button :class="{ active: activeButton === 'schedule' }" type="submit" @click="goToApp('schedule')">
                 <p :class="{ active: activeButton === 'schedule' }">학습일정계획</p>

                 this.activeButton = 'mypage';
             }
         },
-
     },
     watch: {
         currentRoute() {

cc9b086

0a3468a

client/views/layout/Side.vue

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

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


 <template>
-  <div class="side">
-    <router-link to="/MyPlan.page">
-      <div class="logo mb25">
-        <img src="../../resources/img/logo2.png" alt="" />
-      </div>
-    </router-link>
-    <div class="profile mb30">
-      <div class="flex align-start">
-        <img src="../../resources/img/img16_s.png" alt="" />
-        <div class="ml25">
-          <p class="name mb10">{{ studentInfo.studentName }}</p>
-          <p class="mb5">
-            {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
-            {{ studentInfo.className }}
-          </p>
-          <!-- <progress-bar :progress="progress"></progress-bar> -->
-          <span>지금까지 푼 총 문제 수:</span>
-          <span class="brown ml10">{{ studentInfo.totalProblemsSolved }} 개</span>
+    <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>
-      </div>
-      <hr />
-      <p class="title2 mb25">최근 학습 히스토리</p>
-      <ul class="flex justify-between ml30 mb30">
-        <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>
+        <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">
-        <textarea
-          name=""
-          id=""
-          placeholder="궁금한 것을 적어보세요."
-          v-model="studentInfo.studentQuestion"
-        ></textarea>
-      </div>
-      <div class="flex justify-end">
-        <button @click="updateQuestion">질문하기</button>
-      </div>
+            <div class="memo mb15">
+                <textarea
+                    name=""
+                    id=""
+                    placeholder="궁금한 것을 적어보세요."
+                    v-model="studentInfo.studentQuestion"
+                ></textarea>
+            </div>
+            <div class="flex justify-end">
+                <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>
-    <div class="btn-wrap flex justify-between">
-      <button class="login-btn" @click="handleClickEvent">
-        <img src="../../resources/img/btn07_s.png" alt="" />
-        <p>{{ buttonText }}</p>
-      </button>
-
-      <!-- <button class="login-btn" type="submit">
-        <img src="../../resources/img/btn07_s.png" alt="" />
-        <p>오늘 할 다른 공부</p>
-      </button> -->
+    <!-- 질문하기 팝업 -->
+    <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>
 </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 {
-      buttonText: "오답노트",
-      progress: 20,
-      studentInfo: {
-        studentName: "",
-        institutionName: "",
-        grade: "",
-        className: "",
-        studentQuestion: "",
-        history: [],
-      },
-      userId: "1", // userId 임시 설정
-    };
-  },
-  methods: {
-    pageSetting() {
-      this.userId = this.$store.getters.getUserInfo.userId;
-      console.log("유저 아이디: ", this.userId);
-      this.fetchStudentInfo();
-    },
+    data() {
+        return {
+            progress: 20,
+            studentInfo: {
+                studentName: '',
+                institutionName: '',
+                grade: '',
+                className: '',
+                studentQuestion: '',
+                history: [],
+            },
+            userId: '1', // userId 임시 설정
 
-    // 학생 정보를 가져오는 메서드
-    fetchStudentInfo() {
-      axios
-        .post("/studentInfo/getInfo.json", { userId: this.userId })
-        .then((response) => {
-          console.log(response.data);
-          this.studentInfo = response.data;
-        })
-        .catch((error) => {
-          console.error("학생 정보 가져오기 실패:", error);
-        });
+            popupOpen: false,
+            question: null,
+        };
     },
+    methods: {
+        pageSetting() {
+            this.userId = this.$store.getters.getUserInfo.userId;
+            console.log('유저 아이디: ', this.userId);
+            this.fetchStudentInfo();
+        },
 
-    // 질문 업데이트 메서드
-    updateQuestion() {
-      axios
-        .post("/studentInfo/updateQuestion.json", {
-          userId: this.userId,
-          studentQuestion: this.studentInfo.studentQuestion,
-        })
-        .then((response) => {
-          console.log("질문이 성공적으로 업데이트되었습니다.");
-          alert("질문이 성공적으로 업데이트되었습니다.");
-        })
-        .catch((error) => {
-          console.error("질문 업데이트 실패:", error);
-          alert("질문 업데이트에 실패했습니다.");
-        });
-    },
+        // 학생 정보를 가져오는 메서드
+        fetchStudentInfo() {
+            axios
+                .post('/studentInfo/getInfo.json', { userId: this.userId })
+                .then((response) => {
+                    console.log('학생 정보 조회 : ', response.data);
+                    this.studentInfo = response.data;
+                })
+                .catch((error) => {
+                    console.error('학생 정보 가져오기 실패:', error);
+                });
+        },
 
-    handleClick() {
-      this.toggleText();
-      this.goToPage("PreviewNote");
-    },
+        // 질문 업데이트 메서드
+        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.toggleTextAndNavigate();
-    },
+        handleClick() {
+            this.toggleText();
+            this.goToPage('PreviewNote');
+        },
 
-    toggleTextAndNavigate() {
-      if (this.buttonText === "오답노트") {
-        this.buttonText = "학습 코스";
-        this.goToPage("PreviewNote");
-        // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
-      } else {
-        this.buttonText = "오답노트";
-        this.goToPage("Dashboard");
-        // 버튼 텍스트가 '오답노트'일 때 이동할 경로
-      }
-    },
+        handleClick() {
+            this.toggleTextAndNavigate();
+        },
 
-    handleClickEvent() {
-      this.goToPage("PreviewNote");
-    },
+        toggleTextAndNavigate() {
+            if (this.buttonText === '오답노트') {
+                this.buttonText = '학습 코스';
+                this.goToPage('PreviewNote');
+                // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
+            } else {
+                this.buttonText = '오답노트';
+                this.goToPage('Dashboard');
+                // 버튼 텍스트가 '오답노트'일 때 이동할 경로
+            }
+        },
 
-    goToPage(page) {
-      this.$router.push({ name: page });
+        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();
-  },
+    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;
+}
+
+.history-box {
+    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;
+}
+
+.button-box {
+    margin: 10px 20px;
+}
+
+.question-popup {
+    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;
+}
+
+.memo-text {
+    font-family: 'ONEMobilePOPOTF';
+    color: #6327b9;
+}
+
+.memo textarea {
+    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';
 }
 </style>

cc9b086

0a3468a

client/views/pages/main/Main.vue

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

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


 <template>
-    <div style="padding: 15px 60px 90px 60px; ">
+    <div>
         <Header></Header>
-          <div class="flex justify-between" >
-             <Side></Side>
-             <div>
-                <Menu :currentRoute="$route.path"></Menu>
-                <div class="main-wrap">
-                    <router-view />
+        <div style="padding: 40px 60px 90px">
+            <div class="flex justify-between">
+                <Side></Side>
+                <div>
+                    <!-- <Menu :currentRoute="$route.path"></Menu> -->
+                    <div class="main-wrap">
+                        <router-view />
+                    </div>
                 </div>
-             </div>
-          </div>
+            </div>
+        </div>
     </div>
-
 </template>
 
 <script>

 
 export default {
     data() {
-        return {
-        }
+        return {};
     },
-    methods: {
-       
-    },
-    watch: {
-
-    },
-    computed: {
-
-    },
+    methods: {},
+    watch: {},
+    computed: {},
     components: {
         Header: Header,
-      Menu: Menu,
-      // Footer:Footer,
-      Side:Side,
+        Menu: Menu,
+        // Footer:Footer,
+        Side: Side,
     },
     mounted() {
         console.log('main mounted');
-    }
-}
-</script>
+    },
+};
+</script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,164 +1,282 @@
1	1	<template>
2		- <div class="side">
3		- <router-link to="/MyPlan.page">
4		- <div class="logo mb25">
5		- <img src="../../resources/img/logo2.png" alt="" />
6		- </div>
7		- </router-link>
8		- <div class="profile mb30">
9		- <div class="flex align-start">
10		- <img src="../../resources/img/img16_s.png" alt="" />
11		- <div class="ml25">
12		- <p class="name mb10">{{ studentInfo.studentName }}</p>
13		- <p class="mb5">
14		- {{ studentInfo.institutionName }} {{ studentInfo.grade }}학년
15		- {{ studentInfo.className }}
16		- </p>
17		- <!-- <progress-bar :progress="progress"></progress-bar> -->
18		- <span>지금까지 푼 총 문제 수:</span>
19		- <span class="brown ml10">{{ studentInfo.totalProblemsSolved }} 개</span>
	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>
20	26	</div>
21		- </div>
22		- <hr />
23		- <p class="title2 mb25">최근 학습 히스토리</p>
24		- <ul class="flex justify-between ml30 mb30">
25		- <li
26		- v-for="historyItem in studentInfo.history"
27		- :key="historyItem.unitId"
28		- >
29		- [{{ historyItem.bookName }}] {{ historyItem.unitName }}
30		- </li>
31		- </ul>
32		- </div>
33		- <div class="ask mb30">
34		- <p class="title1 mb15">선생님께 질문 있어요~</p>
	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">
	41	+ <p class="title1 mb15">선생님께 질문 있어요~</p>
35	42
36		- <div class="memo mb15">
37		- <textarea
38		- name=""
39		- id=""
40		- placeholder="궁금한 것을 적어보세요."
41		- v-model="studentInfo.studentQuestion"
42		- ></textarea>
43		- </div>
44		- <div class="flex justify-end">
45		- <button @click="updateQuestion">질문하기</button>
46		- </div>
	43	+ <div class="memo mb15">
	44	+ <textarea
	45	+ name=""
	46	+ id=""
	47	+ placeholder="궁금한 것을 적어보세요."
	48	+ v-model="studentInfo.studentQuestion"
	49	+ ></textarea>
	50	+ </div>
	51	+ <div class="flex justify-end">
	52	+ <button @click="updateQuestion">질문하기</button>
	53	+ </div>
	54	+ </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>
47	72	</div>
48		- <div class="btn-wrap flex justify-between">
49		- <button class="login-btn" @click="handleClickEvent">
50		- <img src="../../resources/img/btn07_s.png" alt="" />
51		- <p>{{ buttonText }}</p>
52		- </button>
53		-
54		- <!-- <button class="login-btn" type="submit">
55		- <img src="../../resources/img/btn07_s.png" alt="" />
56		- <p>오늘 할 다른 공부</p>
57		- </button> -->
	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>
58	92	</div>
59		- </div>
60	93	</template>
61	94
62	95	<script>
63		-import ProgressBar from "../component/ProgressBar.vue";
64		-import axios from "axios";
	96	+import ProgressBar from '../component/ProgressBar.vue';
	97	+import axios from 'axios';
65	98
66	99	export default {
67		- data() {
68		- return {
69		- buttonText: "오답노트",
70		- progress: 20,
71		- studentInfo: {
72		- studentName: "",
73		- institutionName: "",
74		- grade: "",
75		- className: "",
76		- studentQuestion: "",
77		- history: [],
78		- },
79		- userId: "1", // userId 임시 설정
80		- };
81		- },
82		- methods: {
83		- pageSetting() {
84		- this.userId = this.$store.getters.getUserInfo.userId;
85		- console.log("유저 아이디: ", this.userId);
86		- this.fetchStudentInfo();
87		- },
	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 임시 설정
88	112
89		- // 학생 정보를 가져오는 메서드
90		- fetchStudentInfo() {
91		- axios
92		- .post("/studentInfo/getInfo.json", { userId: this.userId })
93		- .then((response) => {
94		- console.log(response.data);
95		- this.studentInfo = response.data;
96		- })
97		- .catch((error) => {
98		- console.error("학생 정보 가져오기 실패:", error);
99		- });
	113	+ popupOpen: false,
	114	+ question: null,
	115	+ };
100	116	},
	117	+ methods: {
	118	+ pageSetting() {
	119	+ this.userId = this.$store.getters.getUserInfo.userId;
	120	+ console.log('유저 아이디: ', this.userId);
	121	+ this.fetchStudentInfo();
	122	+ },
101	123
102		- // 질문 업데이트 메서드
103		- updateQuestion() {
104		- axios
105		- .post("/studentInfo/updateQuestion.json", {
106		- userId: this.userId,
107		- studentQuestion: this.studentInfo.studentQuestion,
108		- })
109		- .then((response) => {
110		- console.log("질문이 성공적으로 업데이트되었습니다.");
111		- alert("질문이 성공적으로 업데이트되었습니다.");
112		- })
113		- .catch((error) => {
114		- console.error("질문 업데이트 실패:", error);
115		- alert("질문 업데이트에 실패했습니다.");
116		- });
117		- },
	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	+ },
118	136
119		- handleClick() {
120		- this.toggleText();
121		- this.goToPage("PreviewNote");
122		- },
	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	+ },
123	159
124		- handleClick() {
125		- this.toggleTextAndNavigate();
126		- },
	160	+ handleClick() {
	161	+ this.toggleText();
	162	+ this.goToPage('PreviewNote');
	163	+ },
127	164
128		- toggleTextAndNavigate() {
129		- if (this.buttonText === "오답노트") {
130		- this.buttonText = "학습 코스";
131		- this.goToPage("PreviewNote");
132		- // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
133		- } else {
134		- this.buttonText = "오답노트";
135		- this.goToPage("Dashboard");
136		- // 버튼 텍스트가 '오답노트'일 때 이동할 경로
137		- }
138		- },
	165	+ handleClick() {
	166	+ this.toggleTextAndNavigate();
	167	+ },
139	168
140		- handleClickEvent() {
141		- this.goToPage("PreviewNote");
142		- },
	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	+ },
143	180
144		- goToPage(page) {
145		- this.$router.push({ name: page });
	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	+ },
146	196	},
147		- },
148		- watch: {},
149		- computed: {},
150		- components: {
151		- ProgressBar,
152		- },
153		- mounted() {
154		- console.log("Side mounted");
155		- this.pageSetting();
156		- },
	197	+ watch: {},
	198	+ computed: {},
	199	+ components: {
	200	+ ProgressBar,
	201	+ },
	202	+ mounted() {
	203	+ console.log('Side mounted');
	204	+ this.pageSetting();
	205	+ },
157	206	};
158	207	</script>
159	208	<style scoped>
160	209	.login-btn img {
161		- width: 430px;
162		- height: 85px;
	210	+ width: 430px;
	211	+ height: 85px;
	212	+}
	213	+
	214	+.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;
	222	+}
	223	+
	224	+.history-box {
	225	+ background-color: white;
	226	+ padding: 30px 20px;
	227	+ border: 1px solid #c6c6c6;
	228	+ border-radius: 10px;
	229	+ margin: 25px 20px 0px;
	230	+}
	231	+
	232	+.history-box li {
	233	+ background-color: #eaedf4;
	234	+ border-radius: 10px;
	235	+ font-size: 18px;
	236	+ list-style-type: none;
	237	+ padding: 10px;
	238	+}
	239	+
	240	+.button-box {
	241	+ margin: 10px 20px;
	242	+}
	243	+
	244	+.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;
	252	+}
	253	+
	254	+.question-text {
	255	+ font-family: 'ONEMobilePOPOTF';
	256	+ font-size: 32px;
	257	+ color: #6327b9;
	258	+}
	259	+
	260	+.memo-text {
	261	+ font-family: 'ONEMobilePOPOTF';
	262	+ color: #6327b9;
	263	+}
	264	+
	265	+.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;
	272	+}
	273	+
	274	+.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';
163	281	}
164	282	</style>

...	...	@@ -1,17 +1,18 @@
1	1	<template>
2		- <div style="padding: 15px 60px 90px 60px; ">
	2	+ <div>
3	3	<Header></Header>
4		- <div class="flex justify-between" >
5		- <Side></Side>
6		- <div>
7		- <Menu :currentRoute="$route.path"></Menu>
8		- <div class="main-wrap">
9		- <router-view />
	4	+ <div style="padding: 40px 60px 90px">
	5	+ <div class="flex justify-between">
	6	+ <Side></Side>
	7	+ <div>
	8	+ <!-- <Menu :currentRoute="$route.path"></Menu> -->
	9	+ <div class="main-wrap">
	10	+ <router-view />
	11	+ </div>
10	12	</div>
11		- </div>
12		- </div>
	13	+ </div>
	14	+ </div>
13	15	</div>
14		-
15	16	</template>
16	17
17	18	<script>
...	...	@@ -21,26 +22,19 @@
21	22
22	23	export default {
23	24	data() {
24		- return {
25		- }
	25	+ return {};
26	26	},
27		- methods: {
28		-
29		- },
30		- watch: {
31		-
32		- },
33		- computed: {
34		-
35		- },
	27	+ methods: {},
	28	+ watch: {},
	29	+ computed: {},
36	30	components: {
37	31	Header: Header,
38		- Menu: Menu,
39		- // Footer:Footer,
40		- Side:Side,
	32	+ Menu: Menu,
	33	+ // Footer:Footer,
	34	+ Side: Side,
41	35	},
42	36	mounted() {
43	37	console.log('main mounted');
44		- }
45		-}
46		-</script> (No newline at end of file)
	38	+ },
	39	+};
	40	+</script>

Delete comment