Commit @d4e2d5934d1b15b7affb0ced405e33e09d526f72

박현정 5 days ago

250806 박현정 프로젝트 즐겨찾기 및 정렬 기능 추가

@d4e2d5934d1b15b7affb0ced405e33e09d526f72

d2efb69

d4e2d59

client/resources/api/asset.js

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

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

...	...	@@ -13,4 +13,9 @@
13	13	// 자산(프로젝트) 삭제 기능
14	14	export const deleteProjectProc = (projectGroupId, data) => {
15	15	return apiClient.post(`/project/${projectGroupId}/deleteProject.json`, data);
	16	+}
	17	+
	18	+// 자산(프로젝트) 즐겨찾기 설정 기능
	19	+export const updateProjectFavoriteProc = (projectGroupId, data) => {
	20	+ return apiClient.post(`/project/${projectGroupId}/updateProjectFavorite.json`, data);
16	21	} (파일 끝에 줄바꿈 문자 없음)

d2efb69

d4e2d59

client/views/pages/main/Main.vue

--- client/views/pages/main/Main.vue

+++ client/views/pages/main/Main.vue


 export default {
     data() {
         return {
+            // 프로젝트 목록
              projects: [
                 // { id: 1, name: '디지털 자산 A', date: '2024-06-01', img: require('../../../resources/img/content/sample1.png') },
                 // { id: 2, name: '디지털 자산 B', date: '2024-06-10', img: require('../../../resources/img/content/sample2.png') },
                 // { id: 3, name: '디지털 자산 C', date: '2024-06-15', img: require('../../../resources/img/content/sample3.png') }
             ],
+            // 미확인 피드백 알림 목록
             alarms: [
                 // { id: 1, project: 'A', count: 2 },
                 // { id: 2, project: 'B', count: 1 },

                 // { id: 4, project: 'D', count: 3 },
                 // { id: 5, project: 'F', count: 7 }
             ],
+            // 활동 로그(프로젝트 수정/공유) 목록
             activityLogs: [
                 // { id: 1, project: '프로젝트A', time: '어제 14:30' },
                 // { id: 2, project: '프로젝트B', time: '어제 18:10' },

         };
     },
     methods: {
+        // 활동 로그 가져오기
         loadLogs() {
             findAllLogsProc({
                 memberId: this.getMemId

                     time: dayjs(log.createdAt).fromNow()
                 }))
 
-                // 프로젝트 생성 로그
+                // 프로젝트 공유 로그
             })
             .catch(error => {console.error('로그 목록 조회 실패: ', error);})
         },
+        // 프로젝트 목록 가져오기(대표 프로젝트만 화면에서 조회)
         loadMainProjects() {
           findAllProjectsProc({
             memberId: this.getMemId,
-            isMain: 'Y' // 대표 프로젝트만 화면 목록에 뜨게 함.
+            isMain: 'Y' // 대표 프로젝트
           })
             .then(response => {
               const projectList = response.data.result.projects;

                 name: project.projectName,
                 date: project.createdAt,
                 img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
-                isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
               }));
             })
             .catch(error => {console.error('자산 목록 조회 실패: ', error);})
         },
+        // 모델링 페이지로 이동(생성)
         goToModelingCreate() {
           this.$router.push('/modeling.page');
         },
+        // 모델링 페이지로 이동(기존 프로젝트 수정 - 기존 정보 가져옴)
         goToModelingUpdate(project) {
           this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
         },
+        // 피드백 페이지로 이동
         goToFeedback() {
           this.$router.push('/feedback.page');
         },
+        // 미확인 피드백 알림 목록 가져오기
         loadFeedbackAlarms() {
             findUncheckedFeedbacks({
                 memberId: this.getMemId

d2efb69

d4e2d59

client/views/pages/subPage/Asset.vue

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

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


           </div>
         </div>
         <div class="layout center justify-end gap10">
-          <select name="" id="" class="form-select sm" style="border: 0; width: 200px;">
-            <option value="">최근 수정순</option>
+          <select v-model="selectedSort" name="" id="" class="form-select sm" style="border: 0; width: 200px;">
+            <option v-for="option in sortOptions" :key="option.value" :value="option.value">
+              {{ option.text }}
+            </option>
           </select>
           <button class="btn sm" style="background-color: #f4d01e;border: #f4d01e;"><img src="../../../resources/img/content/ico_folder.svg" alt="" style="vertical-align: middle;">폴더</button>
         </div>

 
 <script>
 import { mapGetters } from 'vuex';
-import { deleteProjectProc, findAllProjectsProc, duplicateProjectProc } from '../../../resources/api/asset';
+import { deleteProjectProc, findAllProjectsProc, duplicateProjectProc, updateProjectFavoriteProc } from '../../../resources/api/asset';
 
 export default {
     data() {

             dropdownDirection: 'right', // 또는 'left'
             // showPopup: false,
             keyword: '', // 검색 키워드
+            selectedSort: 'LATEST', // 프로젝트 목록 정렬 기준 선택 (기본은 '최근 수정순')
+            sortOptions: [ // 프로젝트 목록 정렬 기준
+              { value: 'LATEST', text: '최근 수정순' },
+              { value: 'OLDEST', text: '오래된 순' },
+              { value: 'NAME_ASC', text: '이름순' },
+            ]
 
         };
     },
     methods: {
+       // 즐겨찾기 버튼 클릭
         toggleFavorite(index) {
-            this.projects[index].isFavorite = !this.projects[index].isFavorite;
+            this.projects[index].isFavorite = !this.projects[index].isFavorite; // 즐겨찾기 설정/해제 변경
+            this.updateFavorite(this.projects[index].groupId, this.projects[index].isFavorite); // 즐겨찾기 설정 업데이트 -> 서버로 변경사항 보내기
         },
         toggleMenu(index) {
           if (this.openMenuIndex === index) {

             this.openMenuIndex = index;
           });
         },
+        // 프로젝트 목록 가져오기(대표 프로젝트만 화면에서 조회)
         loadMainProjects() {
           findAllProjectsProc({
             memberId: this.getMemId,
-            isMain: 'Y' // 대표 프로젝트만 화면 목록에 뜨게 함.
+            isMain: 'Y',
+            sortOption: this.selectedSort, // 정렬 기준
           })
             .then(response => {
               const projectList = response.data.result.projects;

                 name: project.projectName,
                 date: project.createdAt,
                 img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
-                isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
+                isFavorite: project.isFavorite === 'Y'
               }));
             })
             .catch(error => {console.error('자산 목록 조회 실패: ', error);})
         },
+        // 프로젝트 이름으로 검색
         searchProjects(keyword) {
           findAllProjectsProc({
             memberId: this.getMemId,
             projectName: keyword,
-            isMain: 'Y' // 대표 프로젝트만 화면 목록에 뜨게 함.
+            isMain: 'Y'
           })
             .then(response => {
               const projectList = response.data.result.projects;

                 name: project.projectName,
                 date: project.createdAt,
                 img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
-                isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
+                isFavorite: project.isFavorite,
               }));
             })
             .catch(error => {console.error('프로젝트 검색 실패: ', error);})
         },
-        loadOldProjects() {
+        // 이전 프로젝트 목록 가져오기
+        loadOldProjects(groupId) {
           findAllProjectsProc({
             memberId: this.getMemId,
-            projectGroupId: '', // 그룹 아이디 넣어야함
+            projectGroupId: groupId,
             isMain: 'N' // 이전 프로젝트만 목록에 뜨게 함.
           })
             .then(response => {

                 name: project.projectName,
                 date: project.createdAt,
                 img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
-                isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
               }));
             })
             .catch(error => {console.error('자산 목록 조회 실패: ', error);})
         },
+        // 모델링 페이지로 이동(생성)
         goToModelingCreate() {
           this.$router.push('/modeling.page');
         },
+        // 모델링 페이지로 이동(기존 프로젝트 수정 - 기존 정보 가져옴)
         goToModelingUpdate(project) {
           this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
         },
+        // 프로젝트 복제
         duplicateProject(projectId) {
           const data = {
             memberId : this.getMemId

 
           duplicateProjectProc(projectId, data)
             .then((response) => {
-              console.log('복제 성공');
-              this.loadMainProjects();
-              this.openMenuIndex = null;
+              this.loadMainProjects(); // 복제 후 목록 조회 새로고침
+              this.openMenuIndex = null; // 메뉴 토글 닫기
             })
             .catch((error) => {
               console.error('복제 실패: ', error);

         //   console.log("팝업창 열기");
         //   this.showPopup = true;
         // },
+        // 프로젝트 삭제
         deleteProject(projectGroupId) {
           const data = {
             memberId : this.getMemId
           };
           deleteProjectProc(projectGroupId, data)
             .then((response) => {
-              console.log('삭제 성공');
-              this.loadMainProjects();
-              this.openMenuIndex = null;
+              this.loadMainProjects(); // 삭제 후 목록 조회 새로고침
+              this.openMenuIndex = null; // 메뉴 토글 닫기
             })
             .catch((error) => {
               console.error('삭제 실패: ', error);
             })
-        }
+        },
+        // 즐겨찾기 설정
+        updateFavorite(projectGroupId, isFavorite) {
+          const data = {
+            memberId : this.getMemId,
+            isFavorite : isFavorite ? 'Y' : 'N' // 'Y' : 즐겨찾기 설정, 'N' : 즐겨찾기 해제
+          }
+          updateProjectFavoriteProc(projectGroupId, data)
+            .then((response) => {
+              this.loadMainProjects(); // 즐겨찾기 설정 후 목록 새로고침
+            })
+            .catch((error) => {
+              console.error('즐겨찾기 설정 실패: ', error);
+            })
+        },
         
     },
-    watch: {},
+    watch: {
+      // 정렬 기준 변경 감지하여 프로젝트 목록 새로고침
+      selectedSort() {
+        this.loadMainProjects();
+      }
+    },
     computed: {
     ...mapGetters([
       'getMemId',

d2efb69

d4e2d59

client/views/pages/subPage/FeedBack.vue

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

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


 export default {
     data() {
         return {
+            // 피드백 목록
             feedbackList: [
                 // {
                 //     id: 1,

                 //     status: 'confirmed'
                 // }
             ],
+            // 피드백 요약
             feedbackSummary: {
                 // total: 3,
                 // unread: 2,

             },
             selectedFeedback: null,     // 회신용
             replyingFeedbackId: null,   // 회신 폼 표시용
+            // 피드백 채팅 내용
             feedbackChatList: [
                 // {
                 //     id: 1,

                 //     status: '확인'
                 // }
                 ],
-
+            // 보낼 메시지
             replyText: '',
+            // 소켓 연결용
             socket: null,
             stompClient: null,
+            // 채팅방 아이디(피드백과 연결됨)
             connectedRoomId: null,
 
         };

         //     console.error('확인 처리 실패:', err);
         //     }
         // },
+
+        // 메시지 전송(피드백 채팅방)
         async submitReply() {
             // if (!this.replyText.trim()) return;
             // try {

             });
             this.replyText = '';
         },
-
+        
+        // 피드백 채팅방 선택
         replyTo(feedback) {
             this.selectedFeedback = feedback;
             this.replyingFeedbackId = feedback.id;
         },
+        // 피드백 목록 가져오기
         loadFeedbacks() {
             findAllFeedbacksProc({
                 memberId: this.getMemId

                 })
                 .catch(error => {console.error('피드백 목록 조회 실패: ', error);})
         },
+        // 피드백 확인
         markAsRead(feedbackId) {
             const data = {
                 memberId : this.getMemId

                     console.error('피드백 확인 실패: ', error);
                 })
         },
+        // 피드백 채팅 내용 가져오기
         loadFeedbackChatList(chatRoomId, feedback) {
             const data = {
                 memberId : this.getMemId

                     console.error('채팅 조회 실패: ', error);
                 })
         },
+        // 피드백 채팅방 연결(소켓)
         connectToChatRoom(roomId) {
             if (this.stompClient && this.connectedRoomId === roomId) return;
 

 
             client.activate();
         },
+        // 피드백 요약 가져오기
         loadFeedbackSummary(){
             findFeedbackSummary({
                 memberId: this.getMemId

d2efb69

d4e2d59

client/views/pages/subPage/Modeling.vue

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

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


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

         closeModal() {
             this.activeModalTool = null;
         },
+        // 프로젝트 모델링 저장
         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 && this.isReset == true) {

             formData.append("comment", this.commentData.comment);
             saveProjectProc(formData)
             .then(response => {
-                console.log('프로젝트(자산) 페이지로 이동');
-                this.$router.push('/asset.page');
+                this.$router.push('/asset.page'); // 저장 후 자산 페이지로 이동
             })
             .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) {

             formData.append("comment", this.commentData.comment);
             updateProjectProc(projectId, formData)
             .then(response => {
-                console.log('프로젝트(자산) 페이지로 이동');
-                this.$router.push('/asset.page');
+                this.$router.push('/asset.page'); // 저장 후 자산 페이지로 이동
             })
             .catch(error => {console.error('자산 수정 실패: ', error);})
         },
+        // 주석 저장
         saveComment() {
-            this.commentData = {...this.localCommentData}; // 저장 시 반영
+            this.commentData = {...this.localCommentData}; // 복사본 데이터를 옮겨놓고, 프로젝트 저장 시 서버로 보냄
             this.closeModal();
         },
+        // 기존 프로젝트 정보 가져오기(기존 프로젝트 수정 시)
         loadProjectData(projectId) {
-            console.log('기존 프로젝트 정보 불러오기 : ' + projectId);
             const data = {
                 memberId : this.getMemId
             };

                     
                 })
         },
+        // 이미지 초기화
         resetImage(){
             this.isReset = true;
         },
+        // 피드백 저장
         saveFeedback() {
-            if(this.projectGroupId == null) {
+            if(this.projectGroupId == null) { // 생성된 프로젝트에 한하여 피드백 저장 가능
                 console.error('신규 프로젝트에는 피드백을 남길 수 없습니다.');
                 return;
             }

     components: {},
     created() {},
     mounted() {
+        // 프로젝트 아이디가 쿼리로 들어올 경우 -> 기존 데이터 불러오기
         const projectId = this.$route.query.projectId;
         if(projectId) {
-            console.log("모델링 페이지 - 프로젝트 아이디: " + projectId);
             this.loadProjectData(projectId);
         }
     },

Add a comment

Open 0
Closed 0

List

...	...	@@ -68,11 +68,13 @@
68	68	export default {
69	69	data() {
70	70	return {
	71	+ // 프로젝트 목록
71	72	projects: [
72	73	// { id: 1, name: '디지털 자산 A', date: '2024-06-01', img: require('../../../resources/img/content/sample1.png') },
73	74	// { id: 2, name: '디지털 자산 B', date: '2024-06-10', img: require('../../../resources/img/content/sample2.png') },
74	75	// { id: 3, name: '디지털 자산 C', date: '2024-06-15', img: require('../../../resources/img/content/sample3.png') }
75	76	],
	77	+ // 미확인 피드백 알림 목록
76	78	alarms: [
77	79	// { id: 1, project: 'A', count: 2 },
78	80	// { id: 2, project: 'B', count: 1 },
...	...	@@ -80,6 +82,7 @@
80	82	// { id: 4, project: 'D', count: 3 },
81	83	// { id: 5, project: 'F', count: 7 }
82	84	],
	85	+ // 활동 로그(프로젝트 수정/공유) 목록
83	86	activityLogs: [
84	87	// { id: 1, project: '프로젝트A', time: '어제 14:30' },
85	88	// { id: 2, project: '프로젝트B', time: '어제 18:10' },
...	...	@@ -90,6 +93,7 @@
90	93	};
91	94	},
92	95	methods: {
	96	+ // 활동 로그 가져오기
93	97	loadLogs() {
94	98	findAllLogsProc({
95	99	memberId: this.getMemId
...	...	@@ -105,14 +109,15 @@
105	109	time: dayjs(log.createdAt).fromNow()
106	110	}))
107	111
108		- // 프로젝트 생성 로그
	112	+ // 프로젝트 공유 로그
109	113	})
110	114	.catch(error => {console.error('로그 목록 조회 실패: ', error);})
111	115	},
	116	+ // 프로젝트 목록 가져오기(대표 프로젝트만 화면에서 조회)
112	117	loadMainProjects() {
113	118	findAllProjectsProc({
114	119	memberId: this.getMemId,
115		- isMain: 'Y' // 대표 프로젝트만 화면 목록에 뜨게 함.
	120	+ isMain: 'Y' // 대표 프로젝트
116	121	})
117	122	.then(response => {
118	123	const projectList = response.data.result.projects;
...	...	@@ -124,20 +129,23 @@
124	129	name: project.projectName,
125	130	date: project.createdAt,
126	131	img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
127		- isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
128	132	}));
129	133	})
130	134	.catch(error => {console.error('자산 목록 조회 실패: ', error);})
131	135	},
	136	+ // 모델링 페이지로 이동(생성)
132	137	goToModelingCreate() {
133	138	this.$router.push('/modeling.page');
134	139	},
	140	+ // 모델링 페이지로 이동(기존 프로젝트 수정 - 기존 정보 가져옴)
135	141	goToModelingUpdate(project) {
136	142	this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
137	143	},
	144	+ // 피드백 페이지로 이동
138	145	goToFeedback() {
139	146	this.$router.push('/feedback.page');
140	147	},
	148	+ // 미확인 피드백 알림 목록 가져오기
141	149	loadFeedbackAlarms() {
142	150	findUncheckedFeedbacks({
143	151	memberId: this.getMemId

...	...	@@ -8,8 +8,10 @@
8	8	</div>
9	9	</div>
10	10	<div class="layout center justify-end gap10">
11		- <select name="" id="" class="form-select sm" style="border: 0; width: 200px;">
12		- <option value="">최근 수정순</option>
	11	+ <select v-model="selectedSort" name="" id="" class="form-select sm" style="border: 0; width: 200px;">
	12	+ <option v-for="option in sortOptions" :key="option.value" :value="option.value">
	13	+ {{ option.text }}
	14	+ </option>
13	15	</select>
14	16	<button class="btn sm" style="background-color: #f4d01e;border: #f4d01e;"><img src="../../../resources/img/content/ico_folder.svg" alt="" style="vertical-align: middle;">폴더</button>
15	17	</div>
...	...	@@ -84,7 +86,7 @@
84	86
85	87	<script>
86	88	import { mapGetters } from 'vuex';
87		-import { deleteProjectProc, findAllProjectsProc, duplicateProjectProc } from '../../../resources/api/asset';
	89	+import { deleteProjectProc, findAllProjectsProc, duplicateProjectProc, updateProjectFavoriteProc } from '../../../resources/api/asset';
88	90
89	91	export default {
90	92	data() {
...	...	@@ -101,12 +103,20 @@
101	103	dropdownDirection: 'right', // 또는 'left'
102	104	// showPopup: false,
103	105	keyword: '', // 검색 키워드
	106	+ selectedSort: 'LATEST', // 프로젝트 목록 정렬 기준 선택 (기본은 '최근 수정순')
	107	+ sortOptions: [ // 프로젝트 목록 정렬 기준
	108	+ { value: 'LATEST', text: '최근 수정순' },
	109	+ { value: 'OLDEST', text: '오래된 순' },
	110	+ { value: 'NAME_ASC', text: '이름순' },
	111	+ ]
104	112
105	113	};
106	114	},
107	115	methods: {
	116	+ // 즐겨찾기 버튼 클릭
108	117	toggleFavorite(index) {
109		- this.projects[index].isFavorite = !this.projects[index].isFavorite;
	118	+ this.projects[index].isFavorite = !this.projects[index].isFavorite; // 즐겨찾기 설정/해제 변경
	119	+ this.updateFavorite(this.projects[index].groupId, this.projects[index].isFavorite); // 즐겨찾기 설정 업데이트 -> 서버로 변경사항 보내기
110	120	},
111	121	toggleMenu(index) {
112	122	if (this.openMenuIndex === index) {
...	...	@@ -126,10 +136,12 @@
126	136	this.openMenuIndex = index;
127	137	});
128	138	},
	139	+ // 프로젝트 목록 가져오기(대표 프로젝트만 화면에서 조회)
129	140	loadMainProjects() {
130	141	findAllProjectsProc({
131	142	memberId: this.getMemId,
132		- isMain: 'Y' // 대표 프로젝트만 화면 목록에 뜨게 함.
	143	+ isMain: 'Y',
	144	+ sortOption: this.selectedSort, // 정렬 기준
133	145	})
134	146	.then(response => {
135	147	const projectList = response.data.result.projects;
...	...	@@ -141,16 +153,17 @@
141	153	name: project.projectName,
142	154	date: project.createdAt,
143	155	img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
144		- isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
	156	+ isFavorite: project.isFavorite === 'Y'
145	157	}));
146	158	})
147	159	.catch(error => {console.error('자산 목록 조회 실패: ', error);})
148	160	},
	161	+ // 프로젝트 이름으로 검색
149	162	searchProjects(keyword) {
150	163	findAllProjectsProc({
151	164	memberId: this.getMemId,
152	165	projectName: keyword,
153		- isMain: 'Y' // 대표 프로젝트만 화면 목록에 뜨게 함.
	166	+ isMain: 'Y'
154	167	})
155	168	.then(response => {
156	169	const projectList = response.data.result.projects;
...	...	@@ -162,15 +175,16 @@
162	175	name: project.projectName,
163	176	date: project.createdAt,
164	177	img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
165		- isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
	178	+ isFavorite: project.isFavorite,
166	179	}));
167	180	})
168	181	.catch(error => {console.error('프로젝트 검색 실패: ', error);})
169	182	},
170		- loadOldProjects() {
	183	+ // 이전 프로젝트 목록 가져오기
	184	+ loadOldProjects(groupId) {
171	185	findAllProjectsProc({
172	186	memberId: this.getMemId,
173		- projectGroupId: '', // 그룹 아이디 넣어야함
	187	+ projectGroupId: groupId,
174	188	isMain: 'N' // 이전 프로젝트만 목록에 뜨게 함.
175	189	})
176	190	.then(response => {
...	...	@@ -180,17 +194,19 @@
180	194	name: project.projectName,
181	195	date: project.createdAt,
182	196	img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
183		- isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
184	197	}));
185	198	})
186	199	.catch(error => {console.error('자산 목록 조회 실패: ', error);})
187	200	},
	201	+ // 모델링 페이지로 이동(생성)
188	202	goToModelingCreate() {
189	203	this.$router.push('/modeling.page');
190	204	},
	205	+ // 모델링 페이지로 이동(기존 프로젝트 수정 - 기존 정보 가져옴)
191	206	goToModelingUpdate(project) {
192	207	this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
193	208	},
	209	+ // 프로젝트 복제
194	210	duplicateProject(projectId) {
195	211	const data = {
196	212	memberId : this.getMemId
...	...	@@ -198,9 +214,8 @@
198	214
199	215	duplicateProjectProc(projectId, data)
200	216	.then((response) => {
201		- console.log('복제 성공');
202		- this.loadMainProjects();
203		- this.openMenuIndex = null;
	217	+ this.loadMainProjects(); // 복제 후 목록 조회 새로고침
	218	+ this.openMenuIndex = null; // 메뉴 토글 닫기
204	219	})
205	220	.catch((error) => {
206	221	console.error('복제 실패: ', error);
...	...	@@ -210,23 +225,42 @@
210	225	// console.log("팝업창 열기");
211	226	// this.showPopup = true;
212	227	// },
	228	+ // 프로젝트 삭제
213	229	deleteProject(projectGroupId) {
214	230	const data = {
215	231	memberId : this.getMemId
216	232	};
217	233	deleteProjectProc(projectGroupId, data)
218	234	.then((response) => {
219		- console.log('삭제 성공');
220		- this.loadMainProjects();
221		- this.openMenuIndex = null;
	235	+ this.loadMainProjects(); // 삭제 후 목록 조회 새로고침
	236	+ this.openMenuIndex = null; // 메뉴 토글 닫기
222	237	})
223	238	.catch((error) => {
224	239	console.error('삭제 실패: ', error);
225	240	})
226		- }
	241	+ },
	242	+ // 즐겨찾기 설정
	243	+ updateFavorite(projectGroupId, isFavorite) {
	244	+ const data = {
	245	+ memberId : this.getMemId,
	246	+ isFavorite : isFavorite ? 'Y' : 'N' // 'Y' : 즐겨찾기 설정, 'N' : 즐겨찾기 해제
	247	+ }
	248	+ updateProjectFavoriteProc(projectGroupId, data)
	249	+ .then((response) => {
	250	+ this.loadMainProjects(); // 즐겨찾기 설정 후 목록 새로고침
	251	+ })
	252	+ .catch((error) => {
	253	+ console.error('즐겨찾기 설정 실패: ', error);
	254	+ })
	255	+ },
227	256
228	257	},
229		- watch: {},
	258	+ watch: {
	259	+ // 정렬 기준 변경 감지하여 프로젝트 목록 새로고침
	260	+ selectedSort() {
	261	+ this.loadMainProjects();
	262	+ }
	263	+ },
230	264	computed: {
231	265	...mapGetters([
232	266	'getMemId',

...	...	@@ -88,6 +88,7 @@
88	88	export default {
89	89	data() {
90	90	return {
	91	+ // 피드백 목록
91	92	feedbackList: [
92	93	// {
93	94	// id: 1,
...	...	@@ -114,6 +115,7 @@
114	115	// status: 'confirmed'
115	116	// }
116	117	],
	118	+ // 피드백 요약
117	119	feedbackSummary: {
118	120	// total: 3,
119	121	// unread: 2,
...	...	@@ -121,6 +123,7 @@
121	123	},
122	124	selectedFeedback: null, // 회신용
123	125	replyingFeedbackId: null, // 회신 폼 표시용
	126	+ // 피드백 채팅 내용
124	127	feedbackChatList: [
125	128	// {
126	129	// id: 1,
...	...	@@ -163,10 +166,12 @@
163	166	// status: '확인'
164	167	// }
165	168	],
166		-
	169	+ // 보낼 메시지
167	170	replyText: '',
	171	+ // 소켓 연결용
168	172	socket: null,
169	173	stompClient: null,
	174	+ // 채팅방 아이디(피드백과 연결됨)
170	175	connectedRoomId: null,
171	176
172	177	};
...	...	@@ -182,6 +187,8 @@
182	187	// console.error('확인 처리 실패:', err);
183	188	// }
184	189	// },
	190	+
	191	+ // 메시지 전송(피드백 채팅방)
185	192	async submitReply() {
186	193	// if (!this.replyText.trim()) return;
187	194	// try {
...	...	@@ -209,11 +216,13 @@
209	216	});
210	217	this.replyText = '';
211	218	},
212		-
	219	+
	220	+ // 피드백 채팅방 선택
213	221	replyTo(feedback) {
214	222	this.selectedFeedback = feedback;
215	223	this.replyingFeedbackId = feedback.id;
216	224	},
	225	+ // 피드백 목록 가져오기
217	226	loadFeedbacks() {
218	227	findAllFeedbacksProc({
219	228	memberId: this.getMemId
...	...	@@ -234,6 +243,7 @@
234	243	})
235	244	.catch(error => {console.error('피드백 목록 조회 실패: ', error);})
236	245	},
	246	+ // 피드백 확인
237	247	markAsRead(feedbackId) {
238	248	const data = {
239	249	memberId : this.getMemId
...	...	@@ -247,6 +257,7 @@
247	257	console.error('피드백 확인 실패: ', error);
248	258	})
249	259	},
	260	+ // 피드백 채팅 내용 가져오기
250	261	loadFeedbackChatList(chatRoomId, feedback) {
251	262	const data = {
252	263	memberId : this.getMemId
...	...	@@ -270,6 +281,7 @@
270	281	console.error('채팅 조회 실패: ', error);
271	282	})
272	283	},
	284	+ // 피드백 채팅방 연결(소켓)
273	285	connectToChatRoom(roomId) {
274	286	if (this.stompClient && this.connectedRoomId === roomId) return;
275	287
...	...	@@ -296,6 +308,7 @@
296	308
297	309	client.activate();
298	310	},
	311	+ // 피드백 요약 가져오기
299	312	loadFeedbackSummary(){
300	313	findFeedbackSummary({
301	314	memberId: this.getMemId

...	...	@@ -363,11 +363,13 @@
363	363	openedToolId: null,
364	364	selectedColor: '#000000',
365	365	activeModalTool : false,
366		- commentData: { // 주석 입력 데이터
	366	+ // 주석 입력 데이터
	367	+ commentData: {
367	368	summary: '',
368	369	comment: ''
369	370	},
370		- localCommentData: { // 주석 입력 데이터 복사본
	371	+ // 주석 입력 데이터 복사본
	372	+ localCommentData: {
371	373	summary: '',
372	374	comment: ''
373	375	},
...	...	@@ -426,19 +428,16 @@
426	428	closeModal() {
427	429	this.activeModalTool = null;
428	430	},
	431	+ // 프로젝트 모델링 저장
429	432	submit(){
430		- console.log('저장');
431	433	if(this.projectId) {
432		- console.log('수정');
433	434	this.updateProject(this.projectId); // 수정
434	435	} else {
435		- console.log('생성');
436	436	this.createProject(); // 생성
437	437	}
438	438	},
	439	+ // 새로운 프로젝트 저장
439	440	createProject() {
440		- console.log('프로젝트(자산) 저장');
441		-
442	441	const formData = new FormData();
443	442	const fileInput = this.$refs.fileInput; // 업로드 파일 가져오기
444	443	if (!fileInput && this.isReset == true) {
...	...	@@ -452,14 +451,12 @@
452	451	formData.append("comment", this.commentData.comment);
453	452	saveProjectProc(formData)
454	453	.then(response => {
455		- console.log('프로젝트(자산) 페이지로 이동');
456		- this.$router.push('/asset.page');
	454	+ this.$router.push('/asset.page'); // 저장 후 자산 페이지로 이동
457	455	})
458	456	.catch(error => {console.error('자산 생성 실패: ', error);})
459	457	},
	458	+ // 기존 프로젝트 수정 후 저장
460	459	updateProject(projectId) {
461		- console.log('프로젝트(자산) 수정');
462		-
463	460	const formData = new FormData();
464	461	const fileInput = this.$refs.fileInput; // 업로드 파일 가져오기(없으면 기존 이미지 유지: fileInput==null)
465	462	if (!fileInput && this.isReset == true) {
...	...	@@ -475,17 +472,17 @@
475	472	formData.append("comment", this.commentData.comment);
476	473	updateProjectProc(projectId, formData)
477	474	.then(response => {
478		- console.log('프로젝트(자산) 페이지로 이동');
479		- this.$router.push('/asset.page');
	475	+ this.$router.push('/asset.page'); // 저장 후 자산 페이지로 이동
480	476	})
481	477	.catch(error => {console.error('자산 수정 실패: ', error);})
482	478	},
	479	+ // 주석 저장
483	480	saveComment() {
484		- this.commentData = {...this.localCommentData}; // 저장 시 반영
	481	+ this.commentData = {...this.localCommentData}; // 복사본 데이터를 옮겨놓고, 프로젝트 저장 시 서버로 보냄
485	482	this.closeModal();
486	483	},
	484	+ // 기존 프로젝트 정보 가져오기(기존 프로젝트 수정 시)
487	485	loadProjectData(projectId) {
488		- console.log('기존 프로젝트 정보 불러오기 : ' + projectId);
489	486	const data = {
490	487	memberId : this.getMemId
491	488	};
...	...	@@ -507,11 +504,13 @@
507	504
508	505	})
509	506	},
	507	+ // 이미지 초기화
510	508	resetImage(){
511	509	this.isReset = true;
512	510	},
	511	+ // 피드백 저장
513	512	saveFeedback() {
514		- if(this.projectGroupId == null) {
	513	+ if(this.projectGroupId == null) { // 생성된 프로젝트에 한하여 피드백 저장 가능
515	514	console.error('신규 프로젝트에는 피드백을 남길 수 없습니다.');
516	515	return;
517	516	}
...	...	@@ -548,9 +547,9 @@
548	547	components: {},
549	548	created() {},
550	549	mounted() {
	550	+ // 프로젝트 아이디가 쿼리로 들어올 경우 -> 기존 데이터 불러오기
551	551	const projectId = this.$route.query.projectId;
552	552	if(projectId) {
553		- console.log("모델링 페이지 - 프로젝트 아이디: " + projectId);
554	553	this.loadProjectData(projectId);
555	554	}
556	555	},

Delete comment