Commit @186c1934c68a501064c5481c903be05f5504442a

guntaek 2024-08-12

240812 김건택 PhotoBook 수정

@186c1934c68a501064c5481c903be05f5504442a

1056ca4

186c193

client/resources/css/style.css

--- client/resources/css/style.css

+++ client/resources/css/style.css


   width: max-content; 
     position: absolute;
     right: 45px;
-    z-index: -1;
+    z-index: 10000;
 }
 .myphoto .class{border-radius: 0px; padding: 10px;}
 .myphoto .class .box {

1056ca4

186c193

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 v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId" @click="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">
-                <button @click="selectedTab = 'tab1'" type="button" title="글쓰기" class="tab-btn">
-                    <img v-if="selectedTab !== 'tab1'" src="../../../resources/img/btn49_15s_normal.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': 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>
+                    <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
                 </button>
             </div>
             <div v-if="selectedTab === 'tab1'" class="tab-box">

 
             currentPage: 1,
             pageSize: 6,
-            totalPages: 2,
+            totalPages: 1,
 
             mdiWindowClose: mdiWindowClose,
             selectedTab: 'tab1',

                     "Content-Type": "application/json; charset=UTF-8",
                 },
                 data: {
-                    userId:"2"
+                    userId:"1"
                 }
             })
             .then(function (response) {

             .then(function (response) {
                 console.log("photoList - response : ", response.data);
                 vm.photoList = response.data;
-                vm.totalPages = Math.ceil(response.data.length / vm.pageSize);
+                vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
             })
             .catch(function (error) {
                 console.log("photoList - error : ", error);

         this.stdPhotoSelectList();
     }
 }
-</script>
+</script>
+
+<style>
+.btnGroup button {
+    cursor: pointer;
+    z-index: 100000;
+}
+</style>

Add a comment

Open 0
Closed 0

List

...	...	@@ -336,7 +336,7 @@
336	336	width: max-content;
337	337	position: absolute;
338	338	right: 45px;
339		- z-index: -1;
	339	+ z-index: 10000;
340	340	}
341	341	.myphoto .class{border-radius: 0px; padding: 10px;}
342	342	.myphoto .class .box {

...	...	@@ -6,21 +6,16 @@
6	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="stdPhotoSelectList(classItem.sclsId)">
	9	+ <option v-for="classItem in classList" :key="classItem.sclsId" :value="classItem.sclsId" @click="currentPage = 1; stdPhotoSelectList(classItem.sclsId)">
10	10	{{ classItem.sclsNm }}
11	11	</option>
12	12	</select>
13	13	</div>
14		- <div class="btnGroup">
15		- <button @click="selectedTab = 'tab1'" type="button" title="글쓰기" class="tab-btn">
16		- <img v-if="selectedTab !== 'tab1'" src="../../../resources/img/btn49_15s_normal.png" alt="">
	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	17	<img v-else src="../../../resources/img/btn49_15s_click.png" alt="">
18		- <p :class="{ 'custom-style': selectedTab === 'tab1' }">1</p>
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>
	18	+ <p :class="{ 'custom-style': currentPage === n }">{{ n }}</p>
24	19	</button>
25	20	</div>
26	21	<div v-if="selectedTab === 'tab1'" class="tab-box">
...	...	@@ -94,7 +89,7 @@
94	89
95	90	currentPage: 1,
96	91	pageSize: 6,
97		- totalPages: 2,
	92	+ totalPages: 1,
98	93
99	94	mdiWindowClose: mdiWindowClose,
100	95	selectedTab: 'tab1',
...	...	@@ -117,7 +112,7 @@
117	112	"Content-Type": "application/json; charset=UTF-8",
118	113	},
119	114	data: {
120		- userId:"2"
	115	+ userId:"1"
121	116	}
122	117	})
123	118	.then(function (response) {
...	...	@@ -149,7 +144,7 @@
149	144	.then(function (response) {
150	145	console.log("photoList - response : ", response.data);
151	146	vm.photoList = response.data;
152		- vm.totalPages = Math.ceil(response.data.length / vm.pageSize);
	147	+ vm.totalPages = Math.ceil(response.data.photoCount / vm.pageSize);
153	148	})
154	149	.catch(function (error) {
155	150	console.log("photoList - error : ", error);
...	...	@@ -242,4 +237,11 @@
242	237	this.stdPhotoSelectList();
243	238	}
244	239	}
245		-</script> (No newline at end of file)
	240	+</script>
	241	+
	242	+<style>
	243	+.btnGroup button {
	244	+ cursor: pointer;
	245	+ z-index: 100000;
	246	+}
	247	+</style> (No newline at end of file)

Delete comment