Commit @cad2408eb8e8fede17a3a86535c36b306b0248a4

guntaek 2024-08-09

240809 김건택 내 사진첩 조회

@cad2408eb8e8fede17a3a86535c36b306b0248a4

e19ead5

cad2408

client/views/pages/main/PhotoBook.vue

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

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


        <div>
             <div class="title-box flex justify-end mb40">
                 <select name="" id="">
-                    <option value="">A반</option>
+                    <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId" @click="stdPhotoSelectList(classItem.sclsId)">
+                        {{ classItem.sclsNm }}
+                    </option>
                 </select>
             </div>
             <div class="btnGroup">

                     <img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
                     <p :class="{ 'custom-style': selectedTab === 'tab1' }">1</p>
                 </button>
+                <button @click="selectedTab = 'tab2'" type="button" title="글쓰기" class="tab-btn">
+                    <img v-if="selectedTab !== 'tab2'" src="../../../resources/img/btn49_15s_normal.png" alt="">
+                    <img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
+                    <p :class="{ 'custom-style': selectedTab === 'tab2' }">2</p>
+                </button>
             </div>
             <div v-if="selectedTab === 'tab1'" class="tab-box">
                 <div class="flex justify-between">
-                    <div class="photo" style="transform: rotate(2deg);" @click="buttonSearch">
-                        <div class="class ">
+                    <div v-for="(photo, index) in (photoList?.result || []).slice(0, 3)" :key="index" class="photo" :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
+                        <div class="class">
                             <div class="box">
                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">{{ photoList.result[0].likeData }}</span>
-                                <p class="title2">{{ photoList.result[0].unitName }}</p>
+                                <span class="member ml30">{{ photo.likeData }}</span>
+                                <p class="title2">{{ photo.unitName }}</p>
                             </div>
-                        </div>
-                    </div>
-                    <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
-                        <div class="class photo">
-                            <div class="box">
-                                <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
-                            </div>
-                            <div class="text flex justify-between mt20">
-                                <span class="member ml30">{{ photoList.result[1].likeData }}</span>
-                                <p class="title2">{{ photoList.result[1].unitName }}</p>
-                            </div>
-    
-                        </div>
-                    </div>
-                    <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
-                        <div class="class ">
-                            <div class="box">
-                                <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
-                            </div>
-                            <div class="text flex justify-between mt20">
-                                <span class="member ml30">{{ photoList.result[2].likeData }}</span>
-                                <p class="title2">{{ photoList.result[2].unitName }}</p>
-                            </div>
-    
                         </div>
                     </div>
                 </div>
                 <div class="flex justify-between mt50">
-                    <div class="photo" style="transform: rotate(-2deg);" @click="buttonSearch">
-                        <div class="class ">
+                    <div v-for="(photo, index) in (photoList?.result || []).slice(3, 6)" :key="index + 3" class="photo" :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
+                        <div class="class">
                             <div class="box">
                                 <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
                             </div>
                             <div class="text flex justify-between mt20">
-                                <span class="member ml30">{{ photoList.result[3].likeData }}</span>
-                                <p class="title2">{{ photoList.result[3].unitName }}</p>
-                            </div>
-    
-                        </div>
-                    </div>
-                    <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
-                        <div class="class ">
-                            <div class="box">
-                                <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
-                            </div>
-                            <div class="text flex justify-between mt20">
-                                <span class="member ml30">{{ photoList.result[4].likeData }}</span>
-                                <p class="title2">{{ photoList.result[4].unitName }}</p>
-                            </div>
-    
-                        </div>
-                    </div>
-                    <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
-                        <div class="class ">
-                            <div class="box">
-                                <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
-                            </div>
-                            <div class="text flex justify-between mt20">
-                                <span class="member ml30">{{ photoList.result[5].likeData }}</span>
-                                <p class="title2">{{ photoList.result[5].unitName }}</p>
+                                <span class="member ml30">{{ photo.likeData }}</span>
+                                <p class="title2">{{ photo.unitName }}</p>
                             </div>
                         </div>
                     </div>
                 </div>
-    
             </div>
             <div class="popup-wrap" v-show="searchOpen">
-                <div class="popup-box ">
-                    <div class="flex mb10  justify-between">
+                <div class="popup-box">
+                    <div class="flex mb10 justify-between">
                         <p class="popup-title">알림</p>
                         <button type="button" class="popup-close-btn" @click="closeBtn">
                             <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

                     <div class="box">
                         <div><img src="../../../resources/img/img184_91t.png" alt=""></div>
                     </div>
-                    <div class="text flex justify-between mt20">
-                        <span class=" title1">1단원을 마친 <em class="yellow">가나다</em>친구</span>
-                        <p class="title2 date">2024-08-06</p>
+                    <div class="text flex justify-between mt20" v-if="photoData.length > 0">
+                        <span class="title1">{{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em>친구</span>
+                        <p class="title2 date">{{ photoData[0].photoDate }}</p>
+                    </div>
+                    <div class="text flex justify-between mt20" v-else>
+                        <span class="title1">데이터를 불러올 수 없습니다.</span>
                     </div>
                 </div>
             </div>
+
        </div>
     </div>
 </template>

             classList: [],
             photoList: [],
 
-            page: 1,
+            photoData: [],
+
+            currentPage: 1,
             pageSize: 6,
-            totalpages: null,
+            totalPages: 2,
 
             mdiWindowClose: mdiWindowClose,
             selectedTab: 'tab1',

             })
             .then(function (response) {
                 console.log("classList - response : ", response.data);
-                vm.classList = response.data;
+                vm.classList = response.data.data;
+                vm.currentPage = 1;
             })
             .catch(function (error) {
                 console.log("classList - error : ", error);

             });
         },
 
-        stdPhotoSelectList: function () {
+        stdPhotoSelectList: function (sclsId) {
             const vm = this;
             axios({
                 url: "/photo/stdPhotoList.json",

                 },
                 data: {
                         "stdId":"1",
-                        "sclsId":"1",
-                        page: vm.page,
+                        "sclsId":"1", // 여기에 sclsId들어가야함
+                        page: vm.currentPage,
                         pageSize: vm.pageSize
                 }
             })
             .then(function (response) {
                 console.log("photoList - response : ", response.data);
                 vm.photoList = response.data;
+                vm.totalPages = Math.ceil(response.data.length / vm.pageSize);
             })
             .catch(function (error) {
                 console.log("photoList - error : ", error);

             });
         },
 
+        getRotation(index) {
+            const rotations = [2, -1, 1, -2, 1, -1];
+            return `rotate(${rotations[index]}deg)`;
+        },
+
+        changePage(pageNumber) {
+            this.currentPage = pageNumber;
+            this.stdPhotoSelectList(this.selectedClassId);
+        },
+
         closeModal() {
             this.showModal = false;
         },
-        buttonSearch() {
+        buttonSearch(photo) {
+            if(!photo) return;
+
+            const vm = this;
             this.searchOpen = true;
+            axios({
+                url: "/photo/photoDetail.json",
+                method: "post",
+                headers:{
+                    "Content-Type": "application/json; charset=UTF-8",
+                },
+                data: {
+                        "photoId":photo.photoId
+                }
+            })
+            .then(function (response) {
+                console.log("photoData - response : ", response.data);
+                vm.photoData = response.data;
+            })
+            .catch(function (error) {
+                console.log("photoData - error : ", error);
+                alert("사진 조회에 오류가 발생했습니다.");
+            });
         },
+
         closeBtn() {
             this.searchOpen = false;
-
         },
         goToPage(page) {
             this.$router.push({ name: page });

 
     },
     computed: {
-
+        currentPhotos() {
+            // 현재 페이지에 해당하는 사진들만 반환
+            const start = (this.currentPage - 1) * this.pageSize;
+            const end = start + this.pageSize;
+            return this.photoList.result.slice(start, end);
+        }
     },
     components: {
         SvgIcon,

Add a comment

Open 0
Closed 0

List

...	...	@@ -6,7 +6,9 @@
6	6	<div>
7	7	<div class="title-box flex justify-end mb40">
8	8	<select name="" id="">
9		- <option value="">A반</option>
	9	+ <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId" @click="stdPhotoSelectList(classItem.sclsId)">
	10	+ {{ classItem.sclsNm }}
	11	+ </option>
10	12	</select>
11	13	</div>
12	14	<div class="btnGroup">
...	...	@@ -15,87 +17,43 @@
15	17	<img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
16	18	<p :class="{ 'custom-style': selectedTab === 'tab1' }">1</p>
17	19	</button>
	20	+ <button @click="selectedTab = 'tab2'" type="button" title="글쓰기" class="tab-btn">
	21	+ <img v-if="selectedTab !== 'tab2'" src="../../../resources/img/btn49_15s_normal.png" alt="">
	22	+ <img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
	23	+ <p :class="{ 'custom-style': selectedTab === 'tab2' }">2</p>
	24	+ </button>
18	25	</div>
19	26	<div v-if="selectedTab === 'tab1'" class="tab-box">
20	27	<div class="flex justify-between">
21		- <div class="photo" style="transform: rotate(2deg);" @click="buttonSearch">
22		- <div class="class ">
	28	+ <div v-for="(photo, index) in (photoList?.result \|\| []).slice(0, 3)" :key="index" class="photo" :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
	29	+ <div class="class">
23	30	<div class="box">
24	31	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
25	32	</div>
26	33	<div class="text flex justify-between mt20">
27		- <span class="member ml30">{{ photoList.result[0].likeData }}</span>
28		- <p class="title2">{{ photoList.result[0].unitName }}</p>
	34	+ <span class="member ml30">{{ photo.likeData }}</span>
	35	+ <p class="title2">{{ photo.unitName }}</p>
29	36	</div>
30		- </div>
31		- </div>
32		- <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
33		- <div class="class photo">
34		- <div class="box">
35		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
36		- </div>
37		- <div class="text flex justify-between mt20">
38		- <span class="member ml30">{{ photoList.result[1].likeData }}</span>
39		- <p class="title2">{{ photoList.result[1].unitName }}</p>
40		- </div>
41		-
42		- </div>
43		- </div>
44		- <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
45		- <div class="class ">
46		- <div class="box">
47		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
48		- </div>
49		- <div class="text flex justify-between mt20">
50		- <span class="member ml30">{{ photoList.result[2].likeData }}</span>
51		- <p class="title2">{{ photoList.result[2].unitName }}</p>
52		- </div>
53		-
54	37	</div>
55	38	</div>
56	39	</div>
57	40	<div class="flex justify-between mt50">
58		- <div class="photo" style="transform: rotate(-2deg);" @click="buttonSearch">
59		- <div class="class ">
	41	+ <div v-for="(photo, index) in (photoList?.result \|\| []).slice(3, 6)" :key="index + 3" class="photo" :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
	42	+ <div class="class">
60	43	<div class="box">
61	44	<div><img src="../../../resources/img/img213_15s.png" alt=""></div>
62	45	</div>
63	46	<div class="text flex justify-between mt20">
64		- <span class="member ml30">{{ photoList.result[3].likeData }}</span>
65		- <p class="title2">{{ photoList.result[3].unitName }}</p>
66		- </div>
67		-
68		- </div>
69		- </div>
70		- <div class="photo" style="transform: rotate(1deg);" @click="buttonSearch">
71		- <div class="class ">
72		- <div class="box">
73		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
74		- </div>
75		- <div class="text flex justify-between mt20">
76		- <span class="member ml30">{{ photoList.result[4].likeData }}</span>
77		- <p class="title2">{{ photoList.result[4].unitName }}</p>
78		- </div>
79		-
80		- </div>
81		- </div>
82		- <div class="photo" style="transform: rotate(-1deg);" @click="buttonSearch">
83		- <div class="class ">
84		- <div class="box">
85		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
86		- </div>
87		- <div class="text flex justify-between mt20">
88		- <span class="member ml30">{{ photoList.result[5].likeData }}</span>
89		- <p class="title2">{{ photoList.result[5].unitName }}</p>
	47	+ <span class="member ml30">{{ photo.likeData }}</span>
	48	+ <p class="title2">{{ photo.unitName }}</p>
90	49	</div>
91	50	</div>
92	51	</div>
93	52	</div>
94		-
95	53	</div>
96	54	<div class="popup-wrap" v-show="searchOpen">
97		- <div class="popup-box ">
98		- <div class="flex mb10 justify-between">
	55	+ <div class="popup-box">
	56	+ <div class="flex mb10 justify-between">
99	57	<p class="popup-title">알림</p>
100	58	<button type="button" class="popup-close-btn" @click="closeBtn">
101	59	<svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>
...	...	@@ -104,12 +62,16 @@
104	62	<div class="box">
105	63	<div><img src="../../../resources/img/img184_91t.png" alt=""></div>
106	64	</div>
107		- <div class="text flex justify-between mt20">
108		- <span class=" title1">1단원을 마친 <em class="yellow">가나다</em>친구</span>
109		- <p class="title2 date">2024-08-06</p>
	65	+ <div class="text flex justify-between mt20" v-if="photoData.length > 0">
	66	+ <span class="title1">{{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em>친구</span>
	67	+ <p class="title2 date">{{ photoData[0].photoDate }}</p>
	68	+ </div>
	69	+ <div class="text flex justify-between mt20" v-else>
	70	+ <span class="title1">데이터를 불러올 수 없습니다.</span>
110	71	</div>
111	72	</div>
112	73	</div>
	74	+
113	75	</div>
114	76	</div>
115	77	</template>
...	...	@@ -128,9 +90,11 @@
128	90	classList: [],
129	91	photoList: [],
130	92
131		- page: 1,
	93	+ photoData: [],
	94	+
	95	+ currentPage: 1,
132	96	pageSize: 6,
133		- totalpages: null,
	97	+ totalPages: 2,
134	98
135	99	mdiWindowClose: mdiWindowClose,
136	100	selectedTab: 'tab1',
...	...	@@ -158,7 +122,8 @@
158	122	})
159	123	.then(function (response) {
160	124	console.log("classList - response : ", response.data);
161		- vm.classList = response.data;
	125	+ vm.classList = response.data.data;
	126	+ vm.currentPage = 1;
162	127	})
163	128	.catch(function (error) {
164	129	console.log("classList - error : ", error);
...	...	@@ -166,7 +131,7 @@
166	131	});
167	132	},
168	133
169		- stdPhotoSelectList: function () {
	134	+ stdPhotoSelectList: function (sclsId) {
170	135	const vm = this;
171	136	axios({
172	137	url: "/photo/stdPhotoList.json",
...	...	@@ -176,14 +141,15 @@
176	141	},
177	142	data: {
178	143	"stdId":"1",
179		- "sclsId":"1",
180		- page: vm.page,
	144	+ "sclsId":"1", // 여기에 sclsId들어가야함
	145	+ page: vm.currentPage,
181	146	pageSize: vm.pageSize
182	147	}
183	148	})
184	149	.then(function (response) {
185	150	console.log("photoList - response : ", response.data);
186	151	vm.photoList = response.data;
	152	+ vm.totalPages = Math.ceil(response.data.length / vm.pageSize);
187	153	})
188	154	.catch(function (error) {
189	155	console.log("photoList - error : ", error);
...	...	@@ -191,15 +157,46 @@
191	157	});
192	158	},
193	159
	160	+ getRotation(index) {
	161	+ const rotations = [2, -1, 1, -2, 1, -1];
	162	+ return `rotate(${rotations[index]}deg)`;
	163	+ },
	164	+
	165	+ changePage(pageNumber) {
	166	+ this.currentPage = pageNumber;
	167	+ this.stdPhotoSelectList(this.selectedClassId);
	168	+ },
	169	+
194	170	closeModal() {
195	171	this.showModal = false;
196	172	},
197		- buttonSearch() {
	173	+ buttonSearch(photo) {
	174	+ if(!photo) return;
	175	+
	176	+ const vm = this;
198	177	this.searchOpen = true;
	178	+ axios({
	179	+ url: "/photo/photoDetail.json",
	180	+ method: "post",
	181	+ headers:{
	182	+ "Content-Type": "application/json; charset=UTF-8",
	183	+ },
	184	+ data: {
	185	+ "photoId":photo.photoId
	186	+ }
	187	+ })
	188	+ .then(function (response) {
	189	+ console.log("photoData - response : ", response.data);
	190	+ vm.photoData = response.data;
	191	+ })
	192	+ .catch(function (error) {
	193	+ console.log("photoData - error : ", error);
	194	+ alert("사진 조회에 오류가 발생했습니다.");
	195	+ });
199	196	},
	197	+
200	198	closeBtn() {
201	199	this.searchOpen = false;
202		-
203	200	},
204	201	goToPage(page) {
205	202	this.$router.push({ name: page });
...	...	@@ -228,7 +225,12 @@
228	225
229	226	},
230	227	computed: {
231		-
	228	+ currentPhotos() {
	229	+ // 현재 페이지에 해당하는 사진들만 반환
	230	+ const start = (this.currentPage - 1) * this.pageSize;
	231	+ const end = start + this.pageSize;
	232	+ return this.photoList.result.slice(start, end);
	233	+ }
232	234	},
233	235	components: {
234	236	SvgIcon,

Delete comment