Commit @e50c60b738bffa304771d50ab003c163ac352ba4

박현정 07-25

250725 박현정 프로젝트 상세조회 및 수정 기능 추가

@e50c60b738bffa304771d50ab003c163ac352ba4

a6b994d

e50c60b

client/resources/api/asset.js

--- client/resources/api/asset.js

+++ client/resources/api/asset.js


 import apiClient from "./index";
-import axios from 'axios';
 
 // 자산(프로젝트) 목록 조회 기능
 export const findAllProjectsProc = (data) => {
     return apiClient.post('/project/findAllProjects.json', data);
-}
-
-// 자산(프로젝트) 생성 기능
-// export const saveProjectProc = (formData) => {
-//   return apiClient.post('/project/saveProject.file', formData);
-// }
-export const saveProjectProc = (formData) => {
-  return axios.post('/api/project/saveProject.file', formData, {
-    headers: {
-      'Content-Type': 'multipart/form-data'
-    }
-  });
 }
 
 // 자산(프로젝트) 복제 기능

e50c60b

client/resources/api/modeling.js (added)

+++ client/resources/api/modeling.js

...	...	@@ -0,0 +1,29 @@
	1	+import axios from 'axios';
	2	+import apiClient from "./index";
	3	+
	4	+
	5	+// 자산(프로젝트) 생성 기능
	6	+// export const saveProjectProc = (formData) => {
	7	+// return apiClient.post('/project/saveProject.file', formData);
	8	+// }
	9	+export const saveProjectProc = (formData) => {
	10	+ return axios.post('/api/project/saveProject.file', formData, {
	11	+ headers: {
	12	+ 'Content-Type': 'multipart/form-data'
	13	+ }
	14	+ });
	15	+}
	16	+
	17	+// 자산(프로젝트) 기존 정보 조회 기능
	18	+export const findProjectProc = (projectId, data) => {
	19	+ return apiClient.post(`/project/${projectId}/findProject.json`, data);
	20	+}
	21	+
	22	+// 자산(프로젝트) 수정 기능
	23	+export const updateProjectProc = (projectId, formData) => {
	24	+ return axios.post(`/api/project/${projectId}/updateProject.file`, formData, {
	25	+ headers: {
	26	+ 'Content-Type': 'multipart/form-data'
	27	+ }
	28	+ });
	29	+}

a6b994d

e50c60b

client/views/pages/subPage/Asset.vue

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

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


     </div>
     <div class="bottom-zone">
       <!-- 새 카드 -->
-      <div class="card new-card" @click="goToModeling()">
+      <div class="card new-card" @click="goToModelingCreate()">
         <div class="new-symbol">
           <img src="../../../resources/img/content/ico_digital_asset.svg" alt="">
         </div>

       </div>
 
       <!-- v-for 카드 반복 -->
-      <div class="card" v-for="(project, index) in projects" :key="index">
+      <div class="card" v-for="(project, index) in projects" :key="index" @click="goToModelingUpdate(project)">
         <div class="thumbnail">
           <img :src="project.img" alt="" />
         </div>

                 // { name: '프로젝트D', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: true },
                 // { name: '프로젝트E', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: false },
             ],
+            members: [],
             openMenuIndex: null,
             dropdownDirection: 'right', // 또는 'left'
             // showPopup: false,

               const projectList = response.data.result.projects;
 
               this.projects = projectList.map(project => ({
-                projectId: project.projectId,
-                projectGroupId: project.projectGroupId,
+                id: project.projectId,
+                groupId: project.projectGroupId,
                 isMain: project.isMain,
                 name: project.projectName,
                 date: project.createdAt,

             })
             .catch(error => {console.error('자산 목록 조회 실패: ', error);})
         },
-        goToModeling() {
-          console.log('모델링 페이지로 이동');
+        goToModelingCreate() {
+          console.log('모델링 페이지로 이동-생성');
           this.$router.push('/modeling.page');
         },
+        goToModelingUpdate(project) {
+          console.log('모델링 페이지로 이동-수정');
+          this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
+        },
         duplicateProject(projectId) {
           const data = {
             memberId : this.getMemId

a6b994d

e50c60b

client/views/pages/subPage/Modeling.vue

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

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


                 </div>
             </div>
             <div class="btn-zone gap10 mb30">
-                <button class="btn md ico-before ico-reset">초기화</button>
+                <button class="btn md ico-before ico-reset" @click="resetImage">초기화</button>
                 <button class="btn md ico-before ico-3d">3D 변환</button>
             </div>
             <div class="direction-zone mb30">

                         >
                             <button
                                 :title="tool.title" 
-                                @click=" tool.title === '저장' ? saveProject() : toggleTool(tool)">
+                                @click=" tool.title === '저장' ? submit() : toggleTool(tool)">
                                 <img :src="tool.icon" :alt="tool.title + ' 아이콘'" style="vertical-align: middle;"/>
                             </button>
                         </li>

                                     <p class="modeling-title">{{ activeModalTool.title }}</p>
                                     <div class="modeling-content">
                                         <ul v-if="activeModalTool.title === '참여자'" class="mb10">
-                                            <li>참여자1</li>
-                                            <li>참여자1</li>
-                                            <li>참여자1</li>
-                                            <li>참여자1</li>
+                                            <li v-for="(member, index) in members" :key="member.id">
+                                                {{ member.name }} <span v-if="member.isOwner === 'Y'">(대표)</span>
+                                            </li>
                                         </ul>
                                         <div v-else-if="activeModalTool.title === '코멘트'" class="mb10">
                                             <div class="input-group mb10">

 </template>
 
 <script>
-import { saveProjectProc } from '../../../resources/api/asset';
 import { mapGetters } from 'vuex';
+import { saveProjectProc, findProjectProc, updateProjectProc } from '../../../resources/api/modeling';
 
 export default {
     data() {

             localCommentData: { // 복사본
                 summary: '',
                 comment: ''
-            }
+            },
+            projectId: null, // 프로젝트 수정 시 사용
+            isReset: null, // 이미지 초기화 시 사용
         };
     },
     methods: {

         closeModal() {
             this.activeModalTool = null;
         },
-        saveProject() {
+        submit(){
+            console.log('저장');
+            if(this.projectId) {
+                console.log('수정');
+                this.updateProject(this.projectId); // 수정
+            } else {
+                console.log('생성');
+                this.createProject(); // 생성
+            }
+        },
+        createProject() {
             console.log('프로젝트(자산) 저장');
 
             const formData = new FormData();
             const fileInput = this.$refs.fileInput; // 업로드 파일 가져오기
-            if (!fileInput || !fileInput.files.length) {
+            if (!fileInput && this.isReset == true) {
                 alert("파일을 선택해주세요.");
                 return;
             }

             })
             .catch(error => {console.error('자산 생성 실패: ', error);})
         },
+        updateProject(projectId) {
+            console.log('프로젝트(자산) 수정');
+
+            const formData = new FormData();
+            const fileInput = this.$refs.fileInput; // 업로드 파일 가져오기(없으면 기존 이미지 유지: fileInput==null)
+            if (!fileInput && this.isReset == true) {
+                alert("파일을 선택해주세요.");
+                return;
+            }
+            if (fileInput && fileInput.files && fileInput.files.length > 0) {
+                formData.append("imageFile", fileInput.files[0]);
+            }
+
+            formData.append("memberId", this.getMemId);
+            formData.append("summary", this.commentData.summary);
+            formData.append("comment", this.commentData.comment);
+            updateProjectProc(projectId, 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();
-        }
-    },
+        },
+        loadProjectData(projectId) {
+            console.log('기존 프로젝트 정보 불러오기 : ' + projectId);
+            const data = {
+                memberId : this.getMemId
+            };
+            findProjectProc(projectId, data)
+                .then(response => {
+                    const projectInfo = response.data.result;
+                    this.projectId = projectId;
+                    this.localCommentData.summary =  projectInfo.projectComment.summary;
+                    this.localCommentData.comment =  projectInfo.projectComment.comment;
+                    this.saveComment();
+
+                    const memberList = projectInfo.projectMember; 
+                    this.members = memberList.map(member => ({
+                        id: member.memberId,
+                        name: member.memberName,
+                        isOwner: member.isOwner
+                    }));
+                })
+        },
+        resetImage(){
+            this.isReset = true;
+        },
+    }, 
     watch: {},
     computed: {
         getToolIcon() {

     },
     components: {},
     created() {},
-    mounted() {},
+    mounted() {
+        const projectId = this.$route.query.projectId;
+        if(projectId) {
+            this.loadProjectData(projectId);
+        }
+    },
     beforeUnmount() {},
 };
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -26,7 +26,7 @@
26	26	</div>
27	27	</div>
28	28	<div class="btn-zone gap10 mb30">
29		- <button class="btn md ico-before ico-reset">초기화</button>
	29	+ <button class="btn md ico-before ico-reset" @click="resetImage">초기화</button>
30	30	<button class="btn md ico-before ico-3d">3D 변환</button>
31	31	</div>
32	32	<div class="direction-zone mb30">
...	...	@@ -67,7 +67,7 @@
67	67	>
68	68	<button
69	69	:title="tool.title"
70		- @click=" tool.title === '저장' ? saveProject() : toggleTool(tool)">
	70	+ @click=" tool.title === '저장' ? submit() : toggleTool(tool)">
71	71	<img :src="tool.icon" :alt="tool.title + ' 아이콘'" style="vertical-align: middle;"/>
72	72	</button>
73	73	</li>
...	...	@@ -88,10 +88,9 @@
88	88	<p class="modeling-title">{{ activeModalTool.title }}</p>
89	89	<div class="modeling-content">
90	90	<ul v-if="activeModalTool.title === '참여자'" class="mb10">
91		- <li>참여자1</li>
92		- <li>참여자1</li>
93		- <li>참여자1</li>
94		- <li>참여자1</li>
	91	+ <li v-for="(member, index) in members" :key="member.id">
	92	+ {{ member.name }} <span v-if="member.isOwner === 'Y'">(대표)</span>
	93	+ </li>
95	94	</ul>
96	95	<div v-else-if="activeModalTool.title === '코멘트'" class="mb10">
97	96	<div class="input-group mb10">
...	...	@@ -168,8 +167,8 @@
168	167	</template>
169	168
170	169	<script>
171		-import { saveProjectProc } from '../../../resources/api/asset';
172	170	import { mapGetters } from 'vuex';
	171	+import { saveProjectProc, findProjectProc, updateProjectProc } from '../../../resources/api/modeling';
173	172
174	173	export default {
175	174	data() {
...	...	@@ -353,7 +352,9 @@
353	352	localCommentData: { // 복사본
354	353	summary: '',
355	354	comment: ''
356		- }
	355	+ },
	356	+ projectId: null, // 프로젝트 수정 시 사용
	357	+ isReset: null, // 이미지 초기화 시 사용
357	358	};
358	359	},
359	360	methods: {
...	...	@@ -405,12 +406,22 @@
405	406	closeModal() {
406	407	this.activeModalTool = null;
407	408	},
408		- saveProject() {
	409	+ submit(){
	410	+ console.log('저장');
	411	+ if(this.projectId) {
	412	+ console.log('수정');
	413	+ this.updateProject(this.projectId); // 수정
	414	+ } else {
	415	+ console.log('생성');
	416	+ this.createProject(); // 생성
	417	+ }
	418	+ },
	419	+ createProject() {
409	420	console.log('프로젝트(자산) 저장');
410	421
411	422	const formData = new FormData();
412	423	const fileInput = this.$refs.fileInput; // 업로드 파일 가져오기
413		- if (!fileInput \|\| !fileInput.files.length) {
	424	+ if (!fileInput && this.isReset == true) {
414	425	alert("파일을 선택해주세요.");
415	426	return;
416	427	}
...	...	@@ -426,13 +437,60 @@
426	437	})
427	438	.catch(error => {console.error('자산 생성 실패: ', error);})
428	439	},
	440	+ updateProject(projectId) {
	441	+ console.log('프로젝트(자산) 수정');
	442	+
	443	+ const formData = new FormData();
	444	+ const fileInput = this.$refs.fileInput; // 업로드 파일 가져오기(없으면 기존 이미지 유지: fileInput==null)
	445	+ if (!fileInput && this.isReset == true) {
	446	+ alert("파일을 선택해주세요.");
	447	+ return;
	448	+ }
	449	+ if (fileInput && fileInput.files && fileInput.files.length > 0) {
	450	+ formData.append("imageFile", fileInput.files[0]);
	451	+ }
	452	+
	453	+ formData.append("memberId", this.getMemId);
	454	+ formData.append("summary", this.commentData.summary);
	455	+ formData.append("comment", this.commentData.comment);
	456	+ updateProjectProc(projectId, formData)
	457	+ .then(response => {
	458	+ console.log('프로젝트(자산) 페이지로 이동');
	459	+ this.$router.push('/asset.page');
	460	+ })
	461	+ .catch(error => {console.error('자산 수정 실패: ', error);})
	462	+ },
429	463	saveComment() {
430	464	this.commentData = {...this.localCommentData}; // 저장 시 반영
431	465	console.log('요약: ', this.commentData.summary);
432	466	console.log('주석: ', this.commentData.comment);
433	467	this.closeModal();
434		- }
435		- },
	468	+ },
	469	+ loadProjectData(projectId) {
	470	+ console.log('기존 프로젝트 정보 불러오기 : ' + projectId);
	471	+ const data = {
	472	+ memberId : this.getMemId
	473	+ };
	474	+ findProjectProc(projectId, data)
	475	+ .then(response => {
	476	+ const projectInfo = response.data.result;
	477	+ this.projectId = projectId;
	478	+ this.localCommentData.summary = projectInfo.projectComment.summary;
	479	+ this.localCommentData.comment = projectInfo.projectComment.comment;
	480	+ this.saveComment();
	481	+
	482	+ const memberList = projectInfo.projectMember;
	483	+ this.members = memberList.map(member => ({
	484	+ id: member.memberId,
	485	+ name: member.memberName,
	486	+ isOwner: member.isOwner
	487	+ }));
	488	+ })
	489	+ },
	490	+ resetImage(){
	491	+ this.isReset = true;
	492	+ },
	493	+ },
436	494	watch: {},
437	495	computed: {
438	496	getToolIcon() {
...	...	@@ -453,7 +511,12 @@
453	511	},
454	512	components: {},
455	513	created() {},
456		- mounted() {},
	514	+ mounted() {
	515	+ const projectId = this.$route.query.projectId;
	516	+ if(projectId) {
	517	+ this.loadProjectData(projectId);
	518	+ }
	519	+ },
457	520	beforeUnmount() {},
458	521	};
459	522

...	...	@@ -1,21 +1,8 @@
1	1	import apiClient from "./index";
2		-import axios from 'axios';
3	2
4	3	// 자산(프로젝트) 목록 조회 기능
5	4	export const findAllProjectsProc = (data) => {
6	5	return apiClient.post('/project/findAllProjects.json', data);
7		-}
8		-
9		-// 자산(프로젝트) 생성 기능
10		-// export const saveProjectProc = (formData) => {
11		-// return apiClient.post('/project/saveProject.file', formData);
12		-// }
13		-export const saveProjectProc = (formData) => {
14		- return axios.post('/api/project/saveProject.file', formData, {
15		- headers: {
16		- 'Content-Type': 'multipart/form-data'
17		- }
18		- });
19	6	}
20	7
21	8	// 자산(프로젝트) 복제 기능

...	...	@@ -16,7 +16,7 @@
16	16	</div>
17	17	<div class="bottom-zone">
18	18	<!-- 새 카드 -->
19		- <div class="card new-card" @click="goToModeling()">
	19	+ <div class="card new-card" @click="goToModelingCreate()">
20	20	<div class="new-symbol">
21	21	<img src="../../../resources/img/content/ico_digital_asset.svg" alt="">
22	22	</div>
...	...	@@ -25,7 +25,7 @@
25	25	</div>
26	26
27	27	<!-- v-for 카드 반복 -->
28		- <div class="card" v-for="(project, index) in projects" :key="index">
	28	+ <div class="card" v-for="(project, index) in projects" :key="index" @click="goToModelingUpdate(project)">
29	29	<div class="thumbnail">
30	30	<img :src="project.img" alt="" />
31	31	</div>
...	...	@@ -96,6 +96,7 @@
96	96	// { name: '프로젝트D', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: true },
97	97	// { name: '프로젝트E', date: '2025.05.12', img: require('../../../resources/img/content/sample1.png'),isFavorite: false },
98	98	],
	99	+ members: [],
99	100	openMenuIndex: null,
100	101	dropdownDirection: 'right', // 또는 'left'
101	102	// showPopup: false,
...	...	@@ -133,8 +134,8 @@
133	134	const projectList = response.data.result.projects;
134	135
135	136	this.projects = projectList.map(project => ({
136		- projectId: project.projectId,
137		- projectGroupId: project.projectGroupId,
	137	+ id: project.projectId,
	138	+ groupId: project.projectGroupId,
138	139	isMain: project.isMain,
139	140	name: project.projectName,
140	141	date: project.createdAt,
...	...	@@ -162,10 +163,14 @@
162	163	})
163	164	.catch(error => {console.error('자산 목록 조회 실패: ', error);})
164	165	},
165		- goToModeling() {
166		- console.log('모델링 페이지로 이동');
	166	+ goToModelingCreate() {
	167	+ console.log('모델링 페이지로 이동-생성');
167	168	this.$router.push('/modeling.page');
168	169	},
	170	+ goToModelingUpdate(project) {
	171	+ console.log('모델링 페이지로 이동-수정');
	172	+ this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
	173	+ },
169	174	duplicateProject(projectId) {
170	175	const data = {
171	176	memberId : this.getMemId

Delete comment