Commit @4198252b9361eb1e948580f22da27b56cfc82710

박현정 07-22

250722 박현정 프로젝트 생성 시 이미지 주석 입력 기능 추가

@4198252b9361eb1e948580f22da27b56cfc82710

bd35297

4198252

client/views/pages/subPage/Modeling.vue

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

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


                 <div class="tab-content">
                     <div class="layout center justify-center h_100" style="background-color: #ffffff; border-radius: 2rem;"  v-if="activeTab === 'Image Prompt'">
                         <div class="layout center center" style="flex-direction: column;">
-                            <input type="file" name="" id="file" class="sr-only">
+                            <input type="file" ref="fileInput" name="" id="file" class="sr-only">
                             <span class="file-icon" id="file"><img src="../../../resources/img/content/ico_file.svg" alt=""></span>
                             <label for="file" style="text-align: center;">파일을 업로드하세요.</label>
                         </div>

                                         <div v-else-if="activeModalTool.title === '코멘트'" class="mb10">
                                             <div class="input-group mb10">
                                                 <label for="">writer</label>
-                                                <input type="text" class="form-control sm" disabled>
+                                                <input type="text" class="form-control sm" :value="getMemNm" disabled>
                                             </div>
                                             <div class="input-group mb10">
                                                 <label for="">summary</label>
-                                                <input type="text" class="form-control sm">
+                                                <input type="text" class="form-control sm" v-model="localCommentData.summary">
                                             </div>
                                             <div class="input-group">
                                                 <label for="">comment</label>
-                                                <textarea  class="form-control sm"></textarea>
+                                                <textarea  class="form-control sm" v-model="localCommentData.comment"></textarea>
                                             </div>
                                         </div>
                                         <div class="btn-group layout center justify-center gap10">
                                             <button class="btn sm black" v-if="activeModalTool.title === '참여자'" @click="closeModal">닫기</button>
-                                            <button class="btn sm purple" v-if="activeModalTool.title === '코멘트'">저장</button>
+                                            <button class="btn sm purple" v-if="activeModalTool.title === '코멘트'" @click="saveComment">저장</button>
                                             <button class="btn sm black" v-if="activeModalTool.title === '코멘트'" @click="closeModal">취소</button>
                                         </div>
                                     </div>

             activeSubToolId: null,
             openedToolId: null,
             selectedColor: '#000000',
-            activeModalTool : false
+            activeModalTool : false,
+            commentData: { // 주석 입력 데이터
+                summary: '',
+                comment: ''
+            },
+            localCommentData: { // 복사본
+                summary: '',
+                comment: ''
+            }
         };
     },
     methods: {

         },
         saveProject() {
             console.log('프로젝트(자산) 저장');
-            saveProjectProc({ 
-                memberId: this.getMemId, 
-                imageFileName: null,
-                imageFileUrl : null,
-                summary: "요약",
-                comment: "주석"})
+
+            const formData = new FormData();
+            const fileInput = this.$refs.fileInput; // 업로드 파일 가져오기
+            if (!fileInput || !fileInput.files.length) {
+                alert("파일을 선택해주세요.");
+                return;
+            }
+
+            formData.append("imageFile", fileInput.files[0]);
+            formData.append("memberId", this.getMemId);
+            formData.append("summary", this.commentData.summary);
+            formData.append("comment", this.commentData.comment);
+            saveProjectProc(formData)
             .then(response => {
                 console.log('프로젝트(자산) 페이지로 이동');
                 this.$router.push('/asset.page');
             })
             .catch(error => {console.error('자산 생성 실패: ', error);})
+        },
+        saveComment() {
+            this.commentData = {...this.localCommentData}; // 저장 시 반영
+            console.log('요약: ', this.commentData.summary);
+            console.log('주석: ', this.commentData.comment);
+            this.closeModal();
         }
     },
     watch: {},

Add a comment

Open 0
Closed 0

List

...	...	@@ -15,7 +15,7 @@
15	15	<div class="tab-content">
16	16	<div class="layout center justify-center h_100" style="background-color: #ffffff; border-radius: 2rem;" v-if="activeTab === 'Image Prompt'">
17	17	<div class="layout center center" style="flex-direction: column;">
18		- <input type="file" name="" id="file" class="sr-only">
	18	+ <input type="file" ref="fileInput" name="" id="file" class="sr-only">
19	19	<span class="file-icon" id="file"><img src="../../../resources/img/content/ico_file.svg" alt=""></span>
20	20	<label for="file" style="text-align: center;">파일을 업로드하세요.</label>
21	21	</div>
...	...	@@ -96,20 +96,20 @@
96	96	<div v-else-if="activeModalTool.title === '코멘트'" class="mb10">
97	97	<div class="input-group mb10">
98	98	<label for="">writer</label>
99		- <input type="text" class="form-control sm" disabled>
	99	+ <input type="text" class="form-control sm" :value="getMemNm" disabled>
100	100	</div>
101	101	<div class="input-group mb10">
102	102	<label for="">summary</label>
103		- <input type="text" class="form-control sm">
	103	+ <input type="text" class="form-control sm" v-model="localCommentData.summary">
104	104	</div>
105	105	<div class="input-group">
106	106	<label for="">comment</label>
107		- <textarea class="form-control sm"></textarea>
	107	+ <textarea class="form-control sm" v-model="localCommentData.comment"></textarea>
108	108	</div>
109	109	</div>
110	110	<div class="btn-group layout center justify-center gap10">
111	111	<button class="btn sm black" v-if="activeModalTool.title === '참여자'" @click="closeModal">닫기</button>
112		- <button class="btn sm purple" v-if="activeModalTool.title === '코멘트'">저장</button>
	112	+ <button class="btn sm purple" v-if="activeModalTool.title === '코멘트'" @click="saveComment">저장</button>
113	113	<button class="btn sm black" v-if="activeModalTool.title === '코멘트'" @click="closeModal">취소</button>
114	114	</div>
115	115	</div>
...	...	@@ -345,7 +345,15 @@
345	345	activeSubToolId: null,
346	346	openedToolId: null,
347	347	selectedColor: '#000000',
348		- activeModalTool : false
	348	+ activeModalTool : false,
	349	+ commentData: { // 주석 입력 데이터
	350	+ summary: '',
	351	+ comment: ''
	352	+ },
	353	+ localCommentData: { // 복사본
	354	+ summary: '',
	355	+ comment: ''
	356	+ }
349	357	};
350	358	},
351	359	methods: {
...	...	@@ -399,17 +407,30 @@
399	407	},
400	408	saveProject() {
401	409	console.log('프로젝트(자산) 저장');
402		- saveProjectProc({
403		- memberId: this.getMemId,
404		- imageFileName: null,
405		- imageFileUrl : null,
406		- summary: "요약",
407		- comment: "주석"})
	410	+
	411	+ const formData = new FormData();
	412	+ const fileInput = this.$refs.fileInput; // 업로드 파일 가져오기
	413	+ if (!fileInput \|\| !fileInput.files.length) {
	414	+ alert("파일을 선택해주세요.");
	415	+ return;
	416	+ }
	417	+
	418	+ formData.append("imageFile", fileInput.files[0]);
	419	+ formData.append("memberId", this.getMemId);
	420	+ formData.append("summary", this.commentData.summary);
	421	+ formData.append("comment", this.commentData.comment);
	422	+ saveProjectProc(formData)
408	423	.then(response => {
409	424	console.log('프로젝트(자산) 페이지로 이동');
410	425	this.$router.push('/asset.page');
411	426	})
412	427	.catch(error => {console.error('자산 생성 실패: ', error);})
	428	+ },
	429	+ saveComment() {
	430	+ this.commentData = {...this.localCommentData}; // 저장 시 반영
	431	+ console.log('요약: ', this.commentData.summary);
	432	+ console.log('주석: ', this.commentData.comment);
	433	+ this.closeModal();
413	434	}
414	435	},
415	436	watch: {},

Delete comment