Commit @20dd90ec2b6e7dae040fbde62e0fa16f0c65b5a7

정다정 2024-11-27

241127 정다정 문제 예시 그림 css 수정 + 내용 부분 placeholder 추가

@20dd90ec2b6e7dae040fbde62e0fa16f0c65b5a7

3e74b54

20dd90e

client/views/pages/teacher/QuestionInsert.vue

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

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


 
             <div class="flex align-center mb20">
                 <label for="" class="title2">내용</label>
-                <input name="" id="" class="data-wrap" v-model="prblm_expln" />
+                <input name="" id="" class="data-wrap" v-model="prblm_expln" :placeholder="getPlaceholder" />
             </div>
             <div class="flex align-center mb20">
                 <label for="" class="title2">힌트</label>

             <hr />
             <div class="flex align-center mb20">
                 <label for="" class="title2">문제 예시</label>
-                <img 
-                    :src="`../../../client/resources/img/QuestionInsertExample/${selectedSearchOption2.prblm_type_nm}.png`" 
-                    alt="문제 예시 이미지" 
-                    style="width: 1000px; height: auto;"
+                <img
+                    :src="`../../../client/resources/img/QuestionInsertExample/${selectedSearchOption2.prblm_type_nm}.png`"
+                    alt="문제 예시 이미지"
+                    class="problem-example-img"
                     v-if="selectedSearchOption2 && selectedSearchOption2.prblm_type_nm"
                 />
             </div>
-            <hr>
+            <hr />
             <div v-if="selectedSearchOption2.prblm_type_cls === '5지선다'">
                 <!--5지선다-->
                 <div class="gd-col2" v-for="i in 5" :key="i">

                     </div>
                 </div>
             </div> -->
-           
+
             <div class="flex align-center mb20">
                 <label for="" class="title2">해설</label>
                 <textarea name="" id="" class="data-wrap" v-model="prblm_cmmt"></textarea>

                 },
                 correctIndex: 1, // 정답으로 선택된 답의 인덱스
             },
+
+            commonPlaceholderPrefix: '빈칸이 들어갈 곳을 /로 표시해주세요. ex)',
         };
     },
     methods: {

                     console.error('selectProblemType - error: ', error);
                 });
         },
+        // 문제 유형에 따라 placeholder 반환
+        getExample(problemTypeName) {
+            switch (problemTypeName) {
+                case 'Chapter3_2 페이지 문제':
+                    return 'i / to / bed';
+                case 'Chapter3_5 페이지 문제':
+                    return 'We / chicken';
+                case 'Chapter2_7 페이지 문제':
+                    return 'I / boy';
+                case 'Chapter2_10 페이지 문제':
+                    return `i'm fine / thank you`;
+                case 'Chapter2_11 페이지 문제':
+                    return 'I / have money';
+                default:
+                    return '';
+            }
+        },
     },
     watch: {
         selectedSearchOption2() {

             this.resetPrblmDetail();
         },
     },
-    computed: {},
+    computed: {
+        getPlaceholder() {
+            const example = this.selectedSearchOption2 ? this.getExample(this.selectedSearchOption2.prblm_type_nm) : '';
+            return example ? `${this.commonPlaceholderPrefix} ${example}` : '내용을 입력해주세요.';
+        },
+    },
     components: {
         SvgIcon,
     },

     width: 30px;
     height: 30px;
 }
+.problem-example-img {
+    width: 1000px;
+    height: auto;
+    border-radius: 10px;
+    border: 1px solid #c4c4c4;
+    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+}
 </style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -76,7 +76,7 @@
76	76
77	77	<div class="flex align-center mb20">
78	78	<label for="" class="title2">내용</label>
79		- <input name="" id="" class="data-wrap" v-model="prblm_expln" />
	79	+ <input name="" id="" class="data-wrap" v-model="prblm_expln" :placeholder="getPlaceholder" />
80	80	</div>
81	81	<div class="flex align-center mb20">
82	82	<label for="" class="title2">힌트</label>
...	...	@@ -89,14 +89,14 @@
89	89	<hr />
90	90	<div class="flex align-center mb20">
91	91	<label for="" class="title2">문제 예시</label>
92		- <img
93		- :src="`../../../client/resources/img/QuestionInsertExample/${selectedSearchOption2.prblm_type_nm}.png`"
94		- alt="문제 예시 이미지"
95		- style="width: 1000px; height: auto;"
	92	+ <img
	93	+ :src="`../../../client/resources/img/QuestionInsertExample/${selectedSearchOption2.prblm_type_nm}.png`"
	94	+ alt="문제 예시 이미지"
	95	+ class="problem-example-img"
96	96	v-if="selectedSearchOption2 && selectedSearchOption2.prblm_type_nm"
97	97	/>
98	98	</div>
99		- <hr>
	99	+ <hr />
100	100	<div v-if="selectedSearchOption2.prblm_type_cls === '5지선다'">
101	101	<!--5지선다-->
102	102	<div class="gd-col2" v-for="i in 5" :key="i">
...	...	@@ -291,7 +291,7 @@
291	291	</div>
292	292	</div>
293	293	</div> -->
294		-
	294	+
295	295	<div class="flex align-center mb20">
296	296	<label for="" class="title2">해설</label>
297	297	<textarea name="" id="" class="data-wrap" v-model="prblm_cmmt"></textarea>
...	...	@@ -381,6 +381,8 @@
381	381	},
382	382	correctIndex: 1, // 정답으로 선택된 답의 인덱스
383	383	},
	384	+
	385	+ commonPlaceholderPrefix: '빈칸이 들어갈 곳을 /로 표시해주세요. ex)',
384	386	};
385	387	},
386	388	methods: {
...	...	@@ -639,6 +641,23 @@
639	641	console.error('selectProblemType - error: ', error);
640	642	});
641	643	},
	644	+ // 문제 유형에 따라 placeholder 반환
	645	+ getExample(problemTypeName) {
	646	+ switch (problemTypeName) {
	647	+ case 'Chapter3_2 페이지 문제':
	648	+ return 'i / to / bed';
	649	+ case 'Chapter3_5 페이지 문제':
	650	+ return 'We / chicken';
	651	+ case 'Chapter2_7 페이지 문제':
	652	+ return 'I / boy';
	653	+ case 'Chapter2_10 페이지 문제':
	654	+ return `i'm fine / thank you`;
	655	+ case 'Chapter2_11 페이지 문제':
	656	+ return 'I / have money';
	657	+ default:
	658	+ return '';
	659	+ }
	660	+ },
642	661	},
643	662	watch: {
644	663	selectedSearchOption2() {
...	...	@@ -646,7 +665,12 @@
646	665	this.resetPrblmDetail();
647	666	},
648	667	},
649		- computed: {},
	668	+ computed: {
	669	+ getPlaceholder() {
	670	+ const example = this.selectedSearchOption2 ? this.getExample(this.selectedSearchOption2.prblm_type_nm) : '';
	671	+ return example ? `${this.commonPlaceholderPrefix} ${example}` : '내용을 입력해주세요.';
	672	+ },
	673	+ },
650	674	components: {
651	675	SvgIcon,
652	676	},
...	...	@@ -667,4 +691,11 @@
667	691	width: 30px;
668	692	height: 30px;
669	693	}
	694	+.problem-example-img {
	695	+ width: 1000px;
	696	+ height: auto;
	697	+ border-radius: 10px;
	698	+ border: 1px solid #c4c4c4;
	699	+ box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	700	+}
670	701	</style>

Delete comment