Commit @72a57428a298185403a3027098013b33b6e1da07

dajeong 2024-08-14

240814 정다정 사이드바 오답노트 버튼 추가

@72a57428a298185403a3027098013b33b6e1da07

71d6d88

72a5742

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>                
-            </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 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>
-        <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>
-        <!-- <div class="btn-wrap flex justify-between">
-            <button class="login-btn" @click="handleClick" >
-                <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> -->
+      </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>
+
+      <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="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>
+  </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: {
-
-        // 학생 정보를 가져오는 메서드
-        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() {
-            axios.post('/studentInfo/updateQuestion.json', {
-                userId: this.userId,
-                studentQuestion: this.studentInfo.studentQuestion
-            })
-            .then(response => {
-                console.log('질문이 성공적으로 업데이트되었습니다.');
-                alert('질문이 성공적으로 업데이트되었습니다.');
-            })
-            .catch(error => {
-                console.error('질문 업데이트 실패:', error);
-                alert('질문 업데이트에 실패했습니다.');
-            });
-        },
-
-        handleClick() {
-            this.toggleText();
-            this.goToPage('PreviewNote');
-        },
-
-        handleClick() {
-            this.toggleTextAndNavigate();
-        },
-
-        toggleTextAndNavigate() {
-            if (this.buttonText === '오답노트') {
-                this.buttonText = '학습 코스';
-                this.goToPage('PreviewNote');
-                 // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
-            } else {
-                this.buttonText = '오답노트';
-                this.goToPage('Dashboard');
-                 // 버튼 텍스트가 '오답노트'일 때 이동할 경로
-            }
-        },
-
-        goToPage(page) {
-            this.$router.push({ name: page });
-        },
-
-    },
-    watch: {
-
-    },
-    computed: {
-
-    },
-    components: {
-        ProgressBar
+  data() {
+    return {
+      buttonText: "오답노트",
+      progress: 20,
+      studentInfo: {
+        studentName: "",
+        institutionName: "",
+        grade: "",
+        className: "",
+        studentQuestion: "",
+        history: [],
+      },
+      userId: "1", // userId 임시 설정
+    };
   },
-    mounted() {
-        console.log('Side mounted');
-        this.fetchStudentInfo(); 
-    }
+  methods: {
+    // 학생 정보를 가져오는 메서드
+    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() {
+      axios
+        .post("/studentInfo/updateQuestion.json", {
+          userId: this.userId,
+          studentQuestion: this.studentInfo.studentQuestion,
+        })
+        .then((response) => {
+          console.log("질문이 성공적으로 업데이트되었습니다.");
+          alert("질문이 성공적으로 업데이트되었습니다.");
+        })
+        .catch((error) => {
+          console.error("질문 업데이트 실패:", error);
+          alert("질문 업데이트에 실패했습니다.");
+        });
+    },
+
+    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 });
+    },
+  },
+  watch: {},
+  computed: {},
+  components: {
+    ProgressBar,
+  },
+  mounted() {
+    console.log("Side mounted");
+    this.fetchStudentInfo();
+  },
+};
+</script>
+<style scoped>
+.login-btn img {
+  width: 430px;
+  height: 85px;
 }
-</script>
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,132 +1,160 @@
1	1	<template>
2		- <div class="side">
3		- <router-link to="/MyPlan.page">
4		- <div class="logo mb25"><img src="../../resources/img/logo2.png" alt=""></div>
5		- </router-link>
6		- <div class="profile mb30">
7		- <div class="flex align-start">
8		- <img src="../../resources/img/img16_s.png" alt="">
9		- <div class="ml25" >
10		- <p class="name mb10">{{ studentInfo.studentName }}</p>
11		- <p class="mb5">{{ studentInfo.institutionName }} {{ studentInfo.grade }}학년 {{ studentInfo.className }}</p>
12		- <!-- <progress-bar :progress="progress"></progress-bar> -->
13		- <span>지금까지 푼 총 문제 수:</span>
14		- <span class="brown ml10">{{ studentInfo.totalProblemsSolved}} 개</span>
15		- </div>
16		- </div>
17		- <hr>
18		- <p class="title2 mb25">최근 학습 히스토리</p>
19		- <ul class="flex justify-between ml30 mb30">
20		- <li v-for="historyItem in studentInfo.history" :key="historyItem.unitId">
21		- {{ historyItem.bookName }} {{ historyItem.unitName }}
22		- </li>
23		- </ul>
	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"
	20	+ >{{ studentInfo.totalProblemsSolved }} 개</span
	21	+ >
24	22	</div>
25		- <div class="ask mb30">
26		- <p class="title1 mb15">선생님께 질문 있어요~</p>
27		-
28		- <div class="memo mb15"><textarea name="" id="" placeholder="궁금한 것을 적어보세요." v-model="studentInfo.studentQuestion"></textarea></div>
29		- <div class="flex justify-end"><button @click="updateQuestion">질문하기</button></div>
30		- </div>
31		- <!-- <div class="btn-wrap flex justify-between">
32		- <button class="login-btn" @click="handleClick" >
33		- <img src="../../resources/img/btn07_s.png" alt="">
34		- <p>{{ buttonText }}</p>
35		- </button>
36		-
37		- <button class="login-btn" type="submit" ><img src="../../resources/img/btn07_s.png" alt=""> <p >오늘 할 다른 공부</p></button>
38		- </div> -->
	23	+ </div>
	24	+ <hr />
	25	+ <p class="title2 mb25">최근 학습 히스토리</p>
	26	+ <ul class="flex justify-between ml30 mb30">
	27	+ <li
	28	+ v-for="historyItem in studentInfo.history"
	29	+ :key="historyItem.unitId"
	30	+ >
	31	+ {{ historyItem.bookName }} {{ historyItem.unitName }}
	32	+ </li>
	33	+ </ul>
39	34	</div>
	35	+ <div class="ask mb30">
	36	+ <p class="title1 mb15">선생님께 질문 있어요~</p>
	37	+
	38	+ <div class="memo mb15">
	39	+ <textarea
	40	+ name=""
	41	+ id=""
	42	+ placeholder="궁금한 것을 적어보세요."
	43	+ v-model="studentInfo.studentQuestion"
	44	+ ></textarea>
	45	+ </div>
	46	+ <div class="flex justify-end">
	47	+ <button @click="updateQuestion">질문하기</button>
	48	+ </div>
	49	+ </div>
	50	+ <div class="btn-wrap flex justify-between">
	51	+ <button class="login-btn" @click="handleClickEvent">
	52	+ <img src="../../resources/img/btn07_s.png" alt="" />
	53	+ <p>{{ buttonText }}</p>
	54	+ </button>
	55	+
	56	+ <!-- <button class="login-btn" type="submit">
	57	+ <img src="../../resources/img/btn07_s.png" alt="" />
	58	+ <p>오늘 할 다른 공부</p>
	59	+ </button> -->
	60	+ </div>
	61	+ </div>
40	62	</template>
41		-
	63	+
42	64	<script>
43		-import ProgressBar from '../component/ProgressBar.vue';
44		-import axios from 'axios';
	65	+import ProgressBar from "../component/ProgressBar.vue";
	66	+import axios from "axios";
45	67
46	68	export default {
47		- data () {
48		- return {
49		- buttonText: '오답노트',
50		- progress: 20,
51		- studentInfo: {
52		- studentName: '',
53		- institutionName: '',
54		- grade: '',
55		- className: '',
56		- studentQuestion: '',
57		- history: []
58		- },
59		- userId: '1' // userId 임시 설정
60		- }
61		- },
62		- methods: {
63		-
64		- // 학생 정보를 가져오는 메서드
65		- fetchStudentInfo() {
66		- axios.post('/studentInfo/getInfo.json', { userId: this.userId })
67		- .then(response => {
68		- console.log(response.data);
69		- this.studentInfo = response.data;
70		- })
71		- .catch(error => {
72		- console.error('학생 정보 가져오기 실패:', error);
73		- });
74		- },
75		-
76		- // 질문 업데이트 메서드
77		- updateQuestion() {
78		- axios.post('/studentInfo/updateQuestion.json', {
79		- userId: this.userId,
80		- studentQuestion: this.studentInfo.studentQuestion
81		- })
82		- .then(response => {
83		- console.log('질문이 성공적으로 업데이트되었습니다.');
84		- alert('질문이 성공적으로 업데이트되었습니다.');
85		- })
86		- .catch(error => {
87		- console.error('질문 업데이트 실패:', error);
88		- alert('질문 업데이트에 실패했습니다.');
89		- });
90		- },
91		-
92		- handleClick() {
93		- this.toggleText();
94		- this.goToPage('PreviewNote');
95		- },
96		-
97		- handleClick() {
98		- this.toggleTextAndNavigate();
99		- },
100		-
101		- toggleTextAndNavigate() {
102		- if (this.buttonText === '오답노트') {
103		- this.buttonText = '학습 코스';
104		- this.goToPage('PreviewNote');
105		- // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
106		- } else {
107		- this.buttonText = '오답노트';
108		- this.goToPage('Dashboard');
109		- // 버튼 텍스트가 '오답노트'일 때 이동할 경로
110		- }
111		- },
112		-
113		- goToPage(page) {
114		- this.$router.push({ name: page });
115		- },
116		-
117		- },
118		- watch: {
119		-
120		- },
121		- computed: {
122		-
123		- },
124		- components: {
125		- ProgressBar
	69	+ data() {
	70	+ return {
	71	+ buttonText: "오답노트",
	72	+ progress: 20,
	73	+ studentInfo: {
	74	+ studentName: "",
	75	+ institutionName: "",
	76	+ grade: "",
	77	+ className: "",
	78	+ studentQuestion: "",
	79	+ history: [],
	80	+ },
	81	+ userId: "1", // userId 임시 설정
	82	+ };
126	83	},
127		- mounted() {
128		- console.log('Side mounted');
129		- this.fetchStudentInfo();
130		- }
	84	+ methods: {
	85	+ // 학생 정보를 가져오는 메서드
	86	+ fetchStudentInfo() {
	87	+ axios
	88	+ .post("/studentInfo/getInfo.json", { userId: this.userId })
	89	+ .then((response) => {
	90	+ console.log(response.data);
	91	+ this.studentInfo = response.data;
	92	+ })
	93	+ .catch((error) => {
	94	+ console.error("학생 정보 가져오기 실패:", error);
	95	+ });
	96	+ },
	97	+
	98	+ // 질문 업데이트 메서드
	99	+ updateQuestion() {
	100	+ axios
	101	+ .post("/studentInfo/updateQuestion.json", {
	102	+ userId: this.userId,
	103	+ studentQuestion: this.studentInfo.studentQuestion,
	104	+ })
	105	+ .then((response) => {
	106	+ console.log("질문이 성공적으로 업데이트되었습니다.");
	107	+ alert("질문이 성공적으로 업데이트되었습니다.");
	108	+ })
	109	+ .catch((error) => {
	110	+ console.error("질문 업데이트 실패:", error);
	111	+ alert("질문 업데이트에 실패했습니다.");
	112	+ });
	113	+ },
	114	+
	115	+ handleClick() {
	116	+ this.toggleText();
	117	+ this.goToPage("PreviewNote");
	118	+ },
	119	+
	120	+ handleClick() {
	121	+ this.toggleTextAndNavigate();
	122	+ },
	123	+
	124	+ toggleTextAndNavigate() {
	125	+ if (this.buttonText === "오답노트") {
	126	+ this.buttonText = "학습 코스";
	127	+ this.goToPage("PreviewNote");
	128	+ // 버튼 텍스트가 '학습 코스'일 때 이동할 경로
	129	+ } else {
	130	+ this.buttonText = "오답노트";
	131	+ this.goToPage("Dashboard");
	132	+ // 버튼 텍스트가 '오답노트'일 때 이동할 경로
	133	+ }
	134	+ },
	135	+
	136	+ handleClickEvent() {
	137	+ this.goToPage("PreviewNote");
	138	+ },
	139	+
	140	+ goToPage(page) {
	141	+ this.$router.push({ name: page });
	142	+ },
	143	+ },
	144	+ watch: {},
	145	+ computed: {},
	146	+ components: {
	147	+ ProgressBar,
	148	+ },
	149	+ mounted() {
	150	+ console.log("Side mounted");
	151	+ this.fetchStudentInfo();
	152	+ },
	153	+};
	154	+</script>
	155	+<style scoped>
	156	+.login-btn img {
	157	+ width: 430px;
	158	+ height: 85px;
131	159	}
132		-</script> (No newline at end of file)
	160	+</style>

Delete comment