Commit @fd6a5325d569e0f90e524dc6058ad45194feea9a

박현정 08-01

250801 박현정 메인화면-프로젝트 목록 조회 & 프로젝트 검색 기능 추가

@fd6a5325d569e0f90e524dc6058ad45194feea9a

c6c7d6a

fd6a532

client/views/pages/main/Main.vue

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

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


                     <img src="../../../resources/img/content/ico_asset.svg" alt="">
                     <span>새로운 디지털 자산 생성</span>
                 </div>
-                <span><button class="btn-ico sm ico-plus"></button></span>
+                <span><button class="btn-ico sm ico-plus" @click="goToModelingCreate"></button></span>
             </div>
        </div>
        <div class="zone2-wrap" style="height: calc(100% - 115px);">

 import relativeTime from 'dayjs/plugin/relativeTime';
 import 'dayjs/locale/ko'; // 한국어 locale 불러오기
 import { findAllLogsProc } from '../../../resources/api/main';
+import { findAllProjectsProc } from '../../../resources/api/asset';
 
 export default {
     data() {
         return {
              assets: [
-                { 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') }
+                // { 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 },

                 // 프로젝트 생성 로그
             })
             .catch(error => {console.error('로그 목록 조회 실패: ', error);})
-        }
+        },
+        loadMainProjects() {
+          findAllProjectsProc({
+            memberId: this.getMemId,
+            isMain: 'Y' // 대표 프로젝트만 화면 목록에 뜨게 함.
+          })
+            .then(response => {
+              const projectList = response.data.result.projects;
+
+              this.assets = projectList.map(project => ({
+                id: project.projectId,
+                groupId: project.projectGroupId,
+                isMain: project.isMain,
+                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');
+        },
     },
     watch: {},
     computed: {

     mounted() {
         console.log("사용자 아이디: " + this.getMemId + " 사용자 이름: " + this.getMemNm + " 사용자 로그인 아이디: " + this.getMemLoginId);
         this.loadLogs();
+        this.loadMainProjects();
     },
     beforeUnmount() {},
 };

c6c7d6a

fd6a532

client/views/pages/subPage/Asset.vue

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

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


     <div class="top-zone mb30">
         <div class="search-zone" style="background-color: #dfe5f3;">
           <div style="position: relative;">
-            <input type="text" class="form-control sm" style="border: 0;" placeholder="제목을 입력해주세요">
-            <button class="btn-ico sm ico-after ico-sch"></button>
+            <input type="text" class="form-control sm" style="border: 0;" placeholder="제목을 입력해주세요" v-model="keyword">
+            <button class="btn-ico sm ico-after ico-sch" @click="searchProjects(keyword)"></button>
           </div>
         </div>
         <div class="layout center justify-end gap10">

       </div>
 
       <!-- v-for 카드 반복 -->
-      <div class="card" v-for="(project, index) in projects" :key="index" @click="goToModelingUpdate(project)">
-        <div class="thumbnail">
+      <div class="card" v-for="(project, index) in projects" :key="index">
+        <div class="thumbnail" @click="goToModelingUpdate(project)">
           <img :src="project.img" alt="" />
         </div>
         <div class="card-footer">
           <div class="w_100 layout center space-between">
-            <p class="title">{{ project.name }}</p>
+            <p class="title" @click="goToModelingUpdate(project)">{{ project.name }}</p>
             <div class="layout center">
               <button @click="toggleFavorite(index)">
                 <img

             openMenuIndex: null,
             dropdownDirection: 'right', // 또는 'left'
             // showPopup: false,
+            keyword: '', // 검색 키워드
 
         };
     },

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

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

Add a comment

Open 0
Closed 0

List

...	...	@@ -6,7 +6,7 @@
6	6	<img src="../../../resources/img/content/ico_asset.svg" alt="">
7	7	<span>새로운 디지털 자산 생성</span>
8	8	</div>
9		- <span><button class="btn-ico sm ico-plus"></button></span>
	9	+ <span><button class="btn-ico sm ico-plus" @click="goToModelingCreate"></button></span>
10	10	</div>
11	11	</div>
12	12	<div class="zone2-wrap" style="height: calc(100% - 115px);">
...	...	@@ -62,14 +62,15 @@
62	62	import relativeTime from 'dayjs/plugin/relativeTime';
63	63	import 'dayjs/locale/ko'; // 한국어 locale 불러오기
64	64	import { findAllLogsProc } from '../../../resources/api/main';
	65	+import { findAllProjectsProc } from '../../../resources/api/asset';
65	66
66	67	export default {
67	68	data() {
68	69	return {
69	70	assets: [
70		- { id: 1, name: '디지털 자산 A', date: '2024-06-01', img: require('../../../resources/img/content/sample1.png') },
71		- { id: 2, name: '디지털 자산 B', date: '2024-06-10', img: require('../../../resources/img/content/sample2.png') },
72		- { id: 3, name: '디지털 자산 C', date: '2024-06-15', img: require('../../../resources/img/content/sample3.png') }
	71	+ // { id: 1, name: '디지털 자산 A', date: '2024-06-01', img: require('../../../resources/img/content/sample1.png') },
	72	+ // { id: 2, name: '디지털 자산 B', date: '2024-06-10', img: require('../../../resources/img/content/sample2.png') },
	73	+ // { id: 3, name: '디지털 자산 C', date: '2024-06-15', img: require('../../../resources/img/content/sample3.png') }
73	74	],
74	75	alarms: [
75	76	{ id: 1, project: 'A', count: 2 },
...	...	@@ -106,7 +107,30 @@
106	107	// 프로젝트 생성 로그
107	108	})
108	109	.catch(error => {console.error('로그 목록 조회 실패: ', error);})
109		- }
	110	+ },
	111	+ loadMainProjects() {
	112	+ findAllProjectsProc({
	113	+ memberId: this.getMemId,
	114	+ isMain: 'Y' // 대표 프로젝트만 화면 목록에 뜨게 함.
	115	+ })
	116	+ .then(response => {
	117	+ const projectList = response.data.result.projects;
	118	+
	119	+ this.assets = projectList.map(project => ({
	120	+ id: project.projectId,
	121	+ groupId: project.projectGroupId,
	122	+ isMain: project.isMain,
	123	+ name: project.projectName,
	124	+ date: project.createdAt,
	125	+ img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
	126	+ isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
	127	+ }));
	128	+ })
	129	+ .catch(error => {console.error('자산 목록 조회 실패: ', error);})
	130	+ },
	131	+ goToModelingCreate() {
	132	+ this.$router.push('/modeling.page');
	133	+ },
110	134	},
111	135	watch: {},
112	136	computed: {
...	...	@@ -121,6 +145,7 @@
121	145	mounted() {
122	146	console.log("사용자 아이디: " + this.getMemId + " 사용자 이름: " + this.getMemNm + " 사용자 로그인 아이디: " + this.getMemLoginId);
123	147	this.loadLogs();
	148	+ this.loadMainProjects();
124	149	},
125	150	beforeUnmount() {},
126	151	};

...	...	@@ -3,8 +3,8 @@
3	3	<div class="top-zone mb30">
4	4	<div class="search-zone" style="background-color: #dfe5f3;">
5	5	<div style="position: relative;">
6		- <input type="text" class="form-control sm" style="border: 0;" placeholder="제목을 입력해주세요">
7		- <button class="btn-ico sm ico-after ico-sch"></button>
	6	+ <input type="text" class="form-control sm" style="border: 0;" placeholder="제목을 입력해주세요" v-model="keyword">
	7	+ <button class="btn-ico sm ico-after ico-sch" @click="searchProjects(keyword)"></button>
8	8	</div>
9	9	</div>
10	10	<div class="layout center justify-end gap10">
...	...	@@ -25,13 +25,13 @@
25	25	</div>
26	26
27	27	<!-- v-for 카드 반복 -->
28		- <div class="card" v-for="(project, index) in projects" :key="index" @click="goToModelingUpdate(project)">
29		- <div class="thumbnail">
	28	+ <div class="card" v-for="(project, index) in projects" :key="index">
	29	+ <div class="thumbnail" @click="goToModelingUpdate(project)">
30	30	<img :src="project.img" alt="" />
31	31	</div>
32	32	<div class="card-footer">
33	33	<div class="w_100 layout center space-between">
34		- <p class="title">{{ project.name }}</p>
	34	+ <p class="title" @click="goToModelingUpdate(project)">{{ project.name }}</p>
35	35	<div class="layout center">
36	36	<button @click="toggleFavorite(index)">
37	37	<img
...	...	@@ -100,6 +100,7 @@
100	100	openMenuIndex: null,
101	101	dropdownDirection: 'right', // 또는 'left'
102	102	// showPopup: false,
	103	+ keyword: '', // 검색 키워드
103	104
104	105	};
105	106	},
...	...	@@ -145,10 +146,31 @@
145	146	})
146	147	.catch(error => {console.error('자산 목록 조회 실패: ', error);})
147	148	},
	149	+ searchProjects(keyword) {
	150	+ findAllProjectsProc({
	151	+ memberId: this.getMemId,
	152	+ projectName: keyword,
	153	+ isMain: 'Y' // 대표 프로젝트만 화면 목록에 뜨게 함.
	154	+ })
	155	+ .then(response => {
	156	+ const projectList = response.data.result.projects;
	157	+
	158	+ this.projects = projectList.map(project => ({
	159	+ id: project.projectId,
	160	+ groupId: project.projectGroupId,
	161	+ isMain: project.isMain,
	162	+ name: project.projectName,
	163	+ date: project.createdAt,
	164	+ img: require('../../../resources/img/content/sample1.png'), // 백엔드 - 썸네일 기능 추가 후 수정
	165	+ isFavorite: false // 백엔드 - 즐겨찾기 기능 추가 후 수정
	166	+ }));
	167	+ })
	168	+ .catch(error => {console.error('프로젝트 검색 실패: ', error);})
	169	+ },
148	170	loadOldProjects() {
149	171	findAllProjectsProc({
150	172	memberId: this.getMemId,
151		- projectGroupId: '',
	173	+ projectGroupId: '', // 그룹 아이디 넣어야함
152	174	isMain: 'N' // 이전 프로젝트만 목록에 뜨게 함.
153	175	})
154	176	.then(response => {
...	...	@@ -164,11 +186,9 @@
164	186	.catch(error => {console.error('자산 목록 조회 실패: ', error);})
165	187	},
166	188	goToModelingCreate() {
167		- console.log('모델링 페이지로 이동-생성');
168	189	this.$router.push('/modeling.page');
169	190	},
170	191	goToModelingUpdate(project) {
171		- console.log('모델링 페이지로 이동-수정');
172	192	this.$router.push({ name: 'Modeling', query: {projectId: project.id}});
173	193	},
174	194	duplicateProject(projectId) {

Delete comment