Commit @606d0d825092b28af95cddf7cbcea2342029dddb

류윤주 06-30

250630 류윤주 수정

@606d0d825092b28af95cddf7cbcea2342029dddb

61fc864

606d0d8

client/resources/scss/admin/content.scss

--- client/resources/scss/admin/content.scss

+++ client/resources/scss/admin/content.scss

...	...	@@ -356,6 +356,13 @@
356	356	}
357	357	}
358	358
	359	+ .palette-picker{
	360	+ position: absolute;
	361	+ top: 50%;
	362	+ right: 5rem;
	363	+
	364	+ }
	365	+
359	366	}
360	367
361	368	&.feedback-detail-zone{
...	...	@@ -691,3 +698,15 @@
691	698
692	699
693	700	}
	701	+
	702	+.custom-modal{
	703	+ position: absolute;
	704	+ top: 185%;
	705	+ left: 50%;
	706	+ transform: translateX(-50%);
	707	+ width: 200px;
	708	+ height: auto;
	709	+ z-index: 10;
	710	+ background-color: #ffffff;
	711	+ border-radius: 2rem;
	712	+}

61fc864

606d0d8

client/views/pages/subPage/Modeling.vue

--- client/views/pages/subPage/Modeling.vue

+++ client/views/pages/subPage/Modeling.vue


                             v-for="tool in subTolls.slice(-4)"
                             :key="tool.id"
                             :class="{ active: activeToolId === tool.id && !activeSubToolId }"
-                        >
-                            <button :title="tool.title" @click="toggleTool(tool)">
+                            style="position: relative;">
+                            <button :title="tool.title" @click="toggleTool(tool)" >
                                 <img :src="tool.icon" :alt="tool.title + ' 아이콘'" style="vertical-align: middle;"/>
                             </button>
+                            <div v-if="activeModalTool?.id === tool.id" class="custom-modal">
+                                <div class="modal-content">
+                                    <p>{{ activeModalTool.title }}</p>
+                                    <button @click="closeModal">닫기</button>
+                                </div>
+                            </div>
                         </li>
+                        
                     </ul>
                 </div>
                 <div class="bottom-zone"></div>

                         <li
                             v-for="tool in tools"
                             :key="tool.id"
+                              :data-tool-id="tool.id"
                             :class="{ active: activeToolId === tool.id }"
                             style="position: relative;">
                             <button

                                 <img :src="getToolIcon(tool)" :alt="tool.title + ' 아이콘'" />
                                 <input
                                         type="color"
-                                        ref="colorInput"
+                                        :ref="'colorInput_' + tool.id"
                                         v-model="selectedColor"
                                         @input.stop
                                         v-if="tool.type === 'palette' && openedToolId === tool.id" class="palette-picker"

                     id: 400,
                     icon: require('../../../resources/img/content/ico_user_w.svg'),
                     title: '참여자',
+                     type: 'modal'
                 },
                                 {
                     id: 500,
                     icon: require('../../../resources/img/content/ico_comment_w.svg'),
                     title: '코멘트',
+                     type: 'modal'
                 },
                                 {
                     id: 600,

             activeToolId: 1,
             activeSubToolId: null,
             openedToolId: null,
-            selectedColor: '#000000'
+            selectedColor: '#000000',
+            activeModalTool : false
         };
     },
     methods: {

         this.zoom = Number(event.target.value)
         },
         toggleTool(tool) {
-            this.activeToolId = tool.id; // 항상 설정
+            if (tool.type === 'modal') {
+                this.openModal(tool);
+                return;
+            }
+
+            // 기존 도구(tool) 처리 로직
+            this.activeToolId = tool.id;
 
             if (tool.children && tool.children.length) {
                 this.openedToolId = this.openedToolId === tool.id ? null : tool.id;
-                // 서브도구를 연 경우에는 subTool 선택 초기화
                 this.activeSubToolId = null;
             } else {
                 this.activeSubToolId = null;
                 this.openedToolId = tool.id;
+            }
 
-                // 팔레트 도구일 경우 input을 강제 클릭
-                if (tool.type === 'palette') {
-                    this.$nextTick(() => {
-                        this.$refs.colorInput?.click();
-                    });
-                }
+            if (tool.type === 'palette') {
+                this.$nextTick(() => {
+                     console.log('colorInput ref:', this.$refs.colorInput);
+                    this.$refs.colorInput?.click();
+                });
             }
         },
         selectSubTool(tool, child) {

             this.activeSubToolId = child.id;
             this.openedToolId = tool.id;
         },
+        openModal(tool) {
+            this.activeModalTool = tool; // or tool.id
+        },
+        closeModal() {
+            this.activeModalTool = null;
+        },
     },
     watch: {},
     computed: {

Add a comment

Open 0
Closed 0

List

...	...	@@ -77,11 +77,18 @@
77	77	v-for="tool in subTolls.slice(-4)"
78	78	:key="tool.id"
79	79	:class="{ active: activeToolId === tool.id && !activeSubToolId }"
80		- >
81		- <button :title="tool.title" @click="toggleTool(tool)">
	80	+ style="position: relative;">
	81	+ <button :title="tool.title" @click="toggleTool(tool)" >
82	82	<img :src="tool.icon" :alt="tool.title + ' 아이콘'" style="vertical-align: middle;"/>
83	83	</button>
	84	+ <div v-if="activeModalTool?.id === tool.id" class="custom-modal">
	85	+ <div class="modal-content">
	86	+ <p>{{ activeModalTool.title }}</p>
	87	+ <button @click="closeModal">닫기</button>
	88	+ </div>
	89	+ </div>
84	90	</li>
	91	+
85	92	</ul>
86	93	</div>
87	94	<div class="bottom-zone"></div>
...	...	@@ -92,6 +99,7 @@
92	99	<li
93	100	v-for="tool in tools"
94	101	:key="tool.id"
	102	+ :data-tool-id="tool.id"
95	103	:class="{ active: activeToolId === tool.id }"
96	104	style="position: relative;">
97	105	<button
...	...	@@ -101,7 +109,7 @@
101	109	<img :src="getToolIcon(tool)" :alt="tool.title + ' 아이콘'" />
102	110	<input
103	111	type="color"
104		- ref="colorInput"
	112	+ :ref="'colorInput_' + tool.id"
105	113	v-model="selectedColor"
106	114	@input.stop
107	115	v-if="tool.type === 'palette' && openedToolId === tool.id" class="palette-picker"
...	...	@@ -284,11 +292,13 @@
284	292	id: 400,
285	293	icon: require('../../../resources/img/content/ico_user_w.svg'),
286	294	title: '참여자',
	295	+ type: 'modal'
287	296	},
288	297	{
289	298	id: 500,
290	299	icon: require('../../../resources/img/content/ico_comment_w.svg'),
291	300	title: '코멘트',
	301	+ type: 'modal'
292	302	},
293	303	{
294	304	id: 600,
...	...	@@ -304,7 +314,8 @@
304	314	activeToolId: 1,
305	315	activeSubToolId: null,
306	316	openedToolId: null,
307		- selectedColor: '#000000'
	317	+ selectedColor: '#000000',
	318	+ activeModalTool : false
308	319	};
309	320	},
310	321	methods: {
...	...	@@ -322,22 +333,27 @@
322	333	this.zoom = Number(event.target.value)
323	334	},
324	335	toggleTool(tool) {
325		- this.activeToolId = tool.id; // 항상 설정
	336	+ if (tool.type === 'modal') {
	337	+ this.openModal(tool);
	338	+ return;
	339	+ }
	340	+
	341	+ // 기존 도구(tool) 처리 로직
	342	+ this.activeToolId = tool.id;
326	343
327	344	if (tool.children && tool.children.length) {
328	345	this.openedToolId = this.openedToolId === tool.id ? null : tool.id;
329		- // 서브도구를 연 경우에는 subTool 선택 초기화
330	346	this.activeSubToolId = null;
331	347	} else {
332	348	this.activeSubToolId = null;
333	349	this.openedToolId = tool.id;
	350	+ }
334	351
335		- // 팔레트 도구일 경우 input을 강제 클릭
336		- if (tool.type === 'palette') {
337		- this.$nextTick(() => {
338		- this.$refs.colorInput?.click();
339		- });
340		- }
	352	+ if (tool.type === 'palette') {
	353	+ this.$nextTick(() => {
	354	+ console.log('colorInput ref:', this.$refs.colorInput);
	355	+ this.$refs.colorInput?.click();
	356	+ });
341	357	}
342	358	},
343	359	selectSubTool(tool, child) {
...	...	@@ -345,6 +361,12 @@
345	361	this.activeSubToolId = child.id;
346	362	this.openedToolId = tool.id;
347	363	},
	364	+ openModal(tool) {
	365	+ this.activeModalTool = tool; // or tool.id
	366	+ },
	367	+ closeModal() {
	368	+ this.activeModalTool = null;
	369	+ },
348	370	},
349	371	watch: {},
350	372	computed: {

Delete comment