Commit @22eceafff11fd1fb574b9b424b6bc5867e183f20

dajenog 08-14

240814 정다정 포토북 css 수정

@22eceafff11fd1fb574b9b424b6bc5867e183f20

0141fc5

22eceaf

client/views/pages/main/PhotoBook.vue

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

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


         <p class="title">내 사진첩</p>
     </div>
     <div class="myphoto mb30">
-       <div>
+        <div>
             <div class="title-box flex justify-end mb40">
                 <select name="" id="">
-                    <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId" @click="currentPage = 1; stdPhotoSelectList(classItem.sclsId)">
+                    <option
+                        v-for="classItem in classList"
+                        :key="classItem.sclsId"
+                        :value="classItem.sclsId"
+                        @click="
+                            currentPage = 1;
+                            stdPhotoSelectList(classItem.sclsId);
+                        "
+                    >
                         {{ classItem.sclsNm }}
                     </option>
                 </select>
             </div>
-            <div class="btnGroup" style="display: flex; flex-direction: column;">
-                <button v-for="n in totalPages" :key="n" @click="changePage(n)" type="button" title="페이지 버튼" class="tab-btn">
-                    <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="">
-                    <img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
+            <div class="btnGroup" style="display: flex; flex-direction: column">
+                <button
+                    v-for="n in totalPages"
+                    :key="n"
+                    @click="changePage(n)"
+                    type="button"
+                    title="페이지 버튼"
+                    class="tab-btn"
+                >
+                    <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="" />
+                    <img v-else src="../../../resources/img/btn49_15s_click.png" alt="" />
                     <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
                 </button>
             </div>
             <div v-if="selectedTab === 'tab1'" class="tab-box">
                 <div class="flex justify-between">
-                    <div v-for="(photo, index) in (photoList?.result || []).slice(0, 3)" :key="index" class="photo" :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
+                    <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><img src="../../../resources/img/img213_15s.png" alt="" /></div>
                             </div>
                             <div class="text flex justify-between mt20">
                                 <span class="member ml30">{{ photo.likeData }}</span>

                     </div>
                 </div>
                 <div class="flex justify-between mt50">
-                    <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
+                        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><img src="../../../resources/img/img213_15s.png" alt="" /></div>
                             </div>
                             <div class="text flex justify-between mt20">
                                 <span class="member ml30">{{ photo.likeData }}</span>

                         </button>
                     </div>
                     <div class="box">
-                        <div><img src="../../../resources/img/img184_91t.png" alt=""></div>
+                        <div><img src="../../../resources/img/img184_91t.png" alt="" /></div>
                     </div>
                     <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>
+                        <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>

                     </div>
                 </div>
             </div>
-
-       </div>
+        </div>
     </div>
 </template>
 

 import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
 import { mdilArrowRight } from '@mdi/light-js';
 import ProgressBar from '../../component/ProgressBar.vue';
-import axios from "axios";
-
+import axios from 'axios';
 
 export default {
     data() {

             selectedTab: 'tab1',
             mdiMagnify: mdiMagnify,
             mdilArrowRight: mdilArrowRight,
-            timer: "00:00",
+            timer: '00:00',
             progress: 20,
             showModal: false,
             searchOpen: false,
             searchOpen2: false,
-        }
+        };
     },
     methods: {
         stdClassesSelectList: function () {
             const vm = this;
             axios({
-                url: "/classes/selectClass.json",
-                method: "post",
-                headers:{
-                    "Content-Type": "application/json; charset=UTF-8",
+                url: '/classes/selectClass.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
                 },
                 data: {
-                    userId:"1"
-                }
+                    userId: '1',
+                },
             })
-            .then(function (response) {
-                console.log("classList - response : ", response.data);
-                vm.classList = response.data.data;
-                vm.currentPage = 1;
-            })
-            .catch(function (error) {
-                console.log("classList - error : ", error);
-                alert("학생 반 조회에 오류가 발생했습니다.");
-            });
+                .then(function (response) {
+                    console.log('classList - response : ', response.data);
+                    vm.classList = response.data.data;
+                    vm.currentPage = 1;
+                })
+                .catch(function (error) {
+                    console.log('classList - error : ', error);
+                    alert('학생 반 조회에 오류가 발생했습니다.');
+                });
         },
 
         stdPhotoSelectList: function (sclsId) {
             const vm = this;
             axios({
-                url: "/photo/stdPhotoList.json",
-                method: "post",
-                headers:{
-                    "Content-Type": "application/json; charset=UTF-8",
+                url: '/photo/stdPhotoList.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
                 },
                 data: {
-                        "stdId":"1",
-                        "sclsId":"1", // 여기에 sclsId들어가야함
-                        page: vm.currentPage,
-                        pageSize: vm.pageSize
-                }
+                    stdId: '1',
+                    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.photoCount / vm.pageSize);
-            })
-            .catch(function (error) {
-                console.log("photoList - error : ", error);
-                alert("반별 내 사진 조회에 오류가 발생했습니다.");
-            });
+                .then(function (response) {
+                    console.log('photoList - response : ', response.data);
+                    vm.photoList = response.data;
+                    vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
+                })
+                .catch(function (error) {
+                    console.log('photoList - error : ', error);
+                    alert('반별 내 사진 조회에 오류가 발생했습니다.');
+                });
         },
 
         getRotation(index) {

             this.showModal = false;
         },
         buttonSearch(photo) {
-            if(!photo) return;
+            if (!photo) return;
 
             const vm = this;
             this.searchOpen = true;
             axios({
-                url: "/photo/photoDetail.json",
-                method: "post",
-                headers:{
-                    "Content-Type": "application/json; charset=UTF-8",
+                url: '/photo/photoDetail.json',
+                method: 'post',
+                headers: {
+                    'Content-Type': 'application/json; charset=UTF-8',
                 },
                 data: {
-                        "photoId":photo.photoId
-                }
+                    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("사진 조회에 오류가 발생했습니다.");
-            });
+                .then(function (response) {
+                    console.log('photoData - response : ', response.data);
+                    vm.photoData = response.data;
+                })
+                .catch(function (error) {
+                    console.log('photoData - error : ', error);
+                    alert('사진 조회에 오류가 발생했습니다.');
+                });
         },
 
         closeBtn() {

             }
         },
     },
-    watch: {
-
-    },
+    watch: {},
     computed: {
         currentPhotos() {
             // 현재 페이지에 해당하는 사진들만 반환
             const start = (this.currentPage - 1) * this.pageSize;
             const end = start + this.pageSize;
             return this.photoList.result.slice(start, end);
-        }
+        },
     },
     components: {
         SvgIcon,
-        ProgressBar
+        ProgressBar,
     },
     mounted() {
         console.log('Main2 mounted');
         this.stdClassesSelectList();
         this.stdPhotoSelectList();
-    }
-}
+    },
+};
 </script>
 
 <style>

     cursor: pointer;
     z-index: 100000;
 }
-</style>
+.popup-wrap {
+    z-index: 10000000;
+}
+.popup-box {
+    top: 500px;
+}
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -3,27 +3,48 @@
3	3	<p class="title">내 사진첩</p>
4	4	</div>
5	5	<div class="myphoto mb30">
6		- <div>
	6	+ <div>
7	7	<div class="title-box flex justify-end mb40">
8	8	<select name="" id="">
9		- <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId" @click="currentPage = 1; stdPhotoSelectList(classItem.sclsId)">
	9	+ <option
	10	+ v-for="classItem in classList"
	11	+ :key="classItem.sclsId"
	12	+ :value="classItem.sclsId"
	13	+ @click="
	14	+ currentPage = 1;
	15	+ stdPhotoSelectList(classItem.sclsId);
	16	+ "
	17	+ >
10	18	{{ classItem.sclsNm }}
11	19	</option>
12	20	</select>
13	21	</div>
14		- <div class="btnGroup" style="display: flex; flex-direction: column;">
15		- <button v-for="n in totalPages" :key="n" @click="changePage(n)" type="button" title="페이지 버튼" class="tab-btn">
16		- <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="">
17		- <img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
	22	+ <div class="btnGroup" style="display: flex; flex-direction: column">
	23	+ <button
	24	+ v-for="n in totalPages"
	25	+ :key="n"
	26	+ @click="changePage(n)"
	27	+ type="button"
	28	+ title="페이지 버튼"
	29	+ class="tab-btn"
	30	+ >
	31	+ <img v-if="currentPage !== n" src="../../../resources/img/btn49_15s_normal.png" alt="" />
	32	+ <img v-else src="../../../resources/img/btn49_15s_click.png" alt="" />
18	33	<p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
19	34	</button>
20	35	</div>
21	36	<div v-if="selectedTab === 'tab1'" class="tab-box">
22	37	<div class="flex justify-between">
23		- <div v-for="(photo, index) in (photoList?.result \|\| []).slice(0, 3)" :key="index" class="photo" :style="{ transform: getRotation(index) }" @click="buttonSearch(photo)">
	38	+ <div
	39	+ v-for="(photo, index) in (photoList?.result \|\| []).slice(0, 3)"
	40	+ :key="index"
	41	+ class="photo"
	42	+ :style="{ transform: getRotation(index) }"
	43	+ @click="buttonSearch(photo)"
	44	+ >
24	45	<div class="class">
25	46	<div class="box">
26		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
	47	+ <div><img src="../../../resources/img/img213_15s.png" alt="" /></div>
27	48	</div>
28	49	<div class="text flex justify-between mt20">
29	50	<span class="member ml30">{{ photo.likeData }}</span>
...	...	@@ -33,10 +54,16 @@
33	54	</div>
34	55	</div>
35	56	<div class="flex justify-between mt50">
36		- <div v-for="(photo, index) in (photoList?.result \|\| []).slice(3, 6)" :key="index + 3" class="photo" :style="{ transform: getRotation(index + 3) }" @click="buttonSearch(photo)">
	57	+ <div
	58	+ v-for="(photo, index) in (photoList?.result \|\| []).slice(3, 6)"
	59	+ :key="index + 3"
	60	+ class="photo"
	61	+ :style="{ transform: getRotation(index + 3) }"
	62	+ @click="buttonSearch(photo)"
	63	+ >
37	64	<div class="class">
38	65	<div class="box">
39		- <div><img src="../../../resources/img/img213_15s.png" alt=""></div>
	66	+ <div><img src="../../../resources/img/img213_15s.png" alt="" /></div>
40	67	</div>
41	68	<div class="text flex justify-between mt20">
42	69	<span class="member ml30">{{ photo.likeData }}</span>
...	...	@@ -55,10 +82,13 @@
55	82	</button>
56	83	</div>
57	84	<div class="box">
58		- <div><img src="../../../resources/img/img184_91t.png" alt=""></div>
	85	+ <div><img src="../../../resources/img/img184_91t.png" alt="" /></div>
59	86	</div>
60	87	<div class="text flex justify-between mt20" v-if="photoData.length > 0">
61		- <span class="title1">{{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em>친구</span>
	88	+ <span class="title1"
	89	+ >{{ photoData[0].unitName }}을 마친 <em class="yellow">{{ photoData[0].stdName }}</em
	90	+ >친구</span
	91	+ >
62	92	<p class="title2 date">{{ photoData[0].photoDate }}</p>
63	93	</div>
64	94	<div class="text flex justify-between mt20" v-else>
...	...	@@ -66,8 +96,7 @@
66	96	</div>
67	97	</div>
68	98	</div>
69		-
70		- </div>
	99	+ </div>
71	100	</div>
72	101	</template>
73	102
...	...	@@ -76,8 +105,7 @@
76	105	import { mdiMagnify, mdiHeart, mdiWindowClose } from '@mdi/js';
77	106	import { mdilArrowRight } from '@mdi/light-js';
78	107	import ProgressBar from '../../component/ProgressBar.vue';
79		-import axios from "axios";
80		-
	108	+import axios from 'axios';
81	109
82	110	export default {
83	111	data() {
...	...	@@ -95,61 +123,61 @@
95	123	selectedTab: 'tab1',
96	124	mdiMagnify: mdiMagnify,
97	125	mdilArrowRight: mdilArrowRight,
98		- timer: "00:00",
	126	+ timer: '00:00',
99	127	progress: 20,
100	128	showModal: false,
101	129	searchOpen: false,
102	130	searchOpen2: false,
103		- }
	131	+ };
104	132	},
105	133	methods: {
106	134	stdClassesSelectList: function () {
107	135	const vm = this;
108	136	axios({
109		- url: "/classes/selectClass.json",
110		- method: "post",
111		- headers:{
112		- "Content-Type": "application/json; charset=UTF-8",
	137	+ url: '/classes/selectClass.json',
	138	+ method: 'post',
	139	+ headers: {
	140	+ 'Content-Type': 'application/json; charset=UTF-8',
113	141	},
114	142	data: {
115		- userId:"1"
116		- }
	143	+ userId: '1',
	144	+ },
117	145	})
118		- .then(function (response) {
119		- console.log("classList - response : ", response.data);
120		- vm.classList = response.data.data;
121		- vm.currentPage = 1;
122		- })
123		- .catch(function (error) {
124		- console.log("classList - error : ", error);
125		- alert("학생 반 조회에 오류가 발생했습니다.");
126		- });
	146	+ .then(function (response) {
	147	+ console.log('classList - response : ', response.data);
	148	+ vm.classList = response.data.data;
	149	+ vm.currentPage = 1;
	150	+ })
	151	+ .catch(function (error) {
	152	+ console.log('classList - error : ', error);
	153	+ alert('학생 반 조회에 오류가 발생했습니다.');
	154	+ });
127	155	},
128	156
129	157	stdPhotoSelectList: function (sclsId) {
130	158	const vm = this;
131	159	axios({
132		- url: "/photo/stdPhotoList.json",
133		- method: "post",
134		- headers:{
135		- "Content-Type": "application/json; charset=UTF-8",
	160	+ url: '/photo/stdPhotoList.json',
	161	+ method: 'post',
	162	+ headers: {
	163	+ 'Content-Type': 'application/json; charset=UTF-8',
136	164	},
137	165	data: {
138		- "stdId":"1",
139		- "sclsId":"1", // 여기에 sclsId들어가야함
140		- page: vm.currentPage,
141		- pageSize: vm.pageSize
142		- }
	166	+ stdId: '1',
	167	+ sclsId: '1', // 여기에 sclsId들어가야함
	168	+ page: vm.currentPage,
	169	+ pageSize: vm.pageSize,
	170	+ },
143	171	})
144		- .then(function (response) {
145		- console.log("photoList - response : ", response.data);
146		- vm.photoList = response.data;
147		- vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
148		- })
149		- .catch(function (error) {
150		- console.log("photoList - error : ", error);
151		- alert("반별 내 사진 조회에 오류가 발생했습니다.");
152		- });
	172	+ .then(function (response) {
	173	+ console.log('photoList - response : ', response.data);
	174	+ vm.photoList = response.data;
	175	+ vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
	176	+ })
	177	+ .catch(function (error) {
	178	+ console.log('photoList - error : ', error);
	179	+ alert('반별 내 사진 조회에 오류가 발생했습니다.');
	180	+ });
153	181	},
154	182
155	183	getRotation(index) {
...	...	@@ -166,28 +194,28 @@
166	194	this.showModal = false;
167	195	},
168	196	buttonSearch(photo) {
169		- if(!photo) return;
	197	+ if (!photo) return;
170	198
171	199	const vm = this;
172	200	this.searchOpen = true;
173	201	axios({
174		- url: "/photo/photoDetail.json",
175		- method: "post",
176		- headers:{
177		- "Content-Type": "application/json; charset=UTF-8",
	202	+ url: '/photo/photoDetail.json',
	203	+ method: 'post',
	204	+ headers: {
	205	+ 'Content-Type': 'application/json; charset=UTF-8',
178	206	},
179	207	data: {
180		- "photoId":photo.photoId
181		- }
	208	+ photoId: photo.photoId,
	209	+ },
182	210	})
183		- .then(function (response) {
184		- console.log("photoData - response : ", response.data);
185		- vm.photoData = response.data;
186		- })
187		- .catch(function (error) {
188		- console.log("photoData - error : ", error);
189		- alert("사진 조회에 오류가 발생했습니다.");
190		- });
	211	+ .then(function (response) {
	212	+ console.log('photoData - response : ', response.data);
	213	+ vm.photoData = response.data;
	214	+ })
	215	+ .catch(function (error) {
	216	+ console.log('photoData - error : ', error);
	217	+ alert('사진 조회에 오류가 발생했습니다.');
	218	+ });
191	219	},
192	220
193	221	closeBtn() {
...	...	@@ -216,27 +244,25 @@
216	244	}
217	245	},
218	246	},
219		- watch: {
220		-
221		- },
	247	+ watch: {},
222	248	computed: {
223	249	currentPhotos() {
224	250	// 현재 페이지에 해당하는 사진들만 반환
225	251	const start = (this.currentPage - 1) * this.pageSize;
226	252	const end = start + this.pageSize;
227	253	return this.photoList.result.slice(start, end);
228		- }
	254	+ },
229	255	},
230	256	components: {
231	257	SvgIcon,
232		- ProgressBar
	258	+ ProgressBar,
233	259	},
234	260	mounted() {
235	261	console.log('Main2 mounted');
236	262	this.stdClassesSelectList();
237	263	this.stdPhotoSelectList();
238		- }
239		-}
	264	+ },
	265	+};
240	266	</script>
241	267
242	268	<style>
...	...	@@ -244,4 +270,10 @@
244	270	cursor: pointer;
245	271	z-index: 100000;
246	272	}
247		-</style> (파일 끝에 줄바꿈 문자 없음)
	273	+.popup-wrap {
	274	+ z-index: 10000000;
	275	+}
	276	+.popup-box {
	277	+ top: 500px;
	278	+}
	279	+</style>

Delete comment