[#36]Feat:마이

페이지 디자인
Sweet-red-beans · Mar 13, 2022 · f8f0cc6 · f8f0cc6
1 parent 09b501c
commit f8f0cc6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/frontend/sweet-red-beans/src/components/EventPage/Pagination.js b/frontend/sweet-red-beans/src/components/EventPage/Pagination.js
@@ -17,7 +17,7 @@ function Pagination({ total, limit, page, setPage }) {
             .fill()
             .map((_, i) => (
               <button
-                className={style.button}
+                className={style.pageButton}
                 key={i + 1}
                 onClick={() => setPage(i + 1)}
                 aria-current={page === i + 1 ? "page" : null}>

diff --git a/frontend/sweet-red-beans/src/components/InformationShares/Pagination.js b/frontend/sweet-red-beans/src/components/InformationShares/Pagination.js
@@ -17,7 +17,7 @@ function Pagination({ total, limit, page, setPage }) {
             .fill()
             .map((_, i) => (
               <button
-                className={style.button}
+                className={style.pageButton}
                 key={i + 1}
                 onClick={() => setPage(i + 1)}
                 aria-current={page === i + 1 ? "page" : null}>

diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/Pagination.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageDetail/Pagination.js
@@ -1,5 +1,6 @@
 import React from "react";
 import style from "../../../css/Pagination.module.css"
+// import styled from "styled-components";
 
 function Pagination({ total, limit, page, setPage }) {
     //페이지 수를 만들음, 12개면 2개, 25개면 3개
@@ -10,7 +11,7 @@ function Pagination({ total, limit, page, setPage }) {
         <nav className={style.nav}>
           {/*이전버튼(<), page가 1이면 안 보이게 함*/}
           <button onClick={() => setPage(page - 1)} disabled={page === 1} className={style.button}>
-
+            &lt;
           </button>
           {/*Array(numPages)하면 numPages길이의 빈 배열을 만듦 -> fill로 배열을 undefined로 채워줌*/}
           {Array(numPages)
@@ -26,7 +27,7 @@ function Pagination({ total, limit, page, setPage }) {
             ))}
           {/*다음버튼(>), page가 마지막 페이지이면 안 보이게 함*/}
           <button onClick={() => setPage(page + 1)} disabled={page === numPages} className={style.button}>
-
+            &gt;
           </button>
         </nav>
       </>

diff --git a/frontend/sweet-red-beans/src/css/Pagination.module.css b/frontend/sweet-red-beans/src/css/Pagination.module.css
@@ -4,6 +4,7 @@
   align-items: center;
   gap: 4px;
   margin: 16px;
+
 }
 
 .button {
@@ -12,20 +13,24 @@
   height: 20px;
   border: none;
   border-radius: 50px;
-  padding: 8px;
-  margin: 0;
   background: #F23333;
   color: white;
-  font-size: 1rem;
+  font-size: 12px;
   margin: 10px;
+  transition: transform 300ms ease;
+}
+
+.button:hover {
+  cursor: pointer;
+  transform: translateY(-4px);
 }
 
 .pageButton {
   border:none;
   color: #F23333;
   background-color: transparent;
   margin: 10px;
-  font-size: 14pt;
+  font-size: 16px;
   transition: transform 300ms ease;
 }
 
@@ -41,13 +46,18 @@
     transform: revert;
 }
 
-.button:aria-current {
-    background: deeppink;
+.pageButton[aria-current] {
+    background: white;
+    width: 40px;
+    height: 40px;
+    border-radius: 50px;
+    box-shadow: #c4c4c4 0px 4px 7px;
+    font-size: 24px;
     font-weight: bold;
     cursor: revert;
     transform: revert;
 }
 
 .pageButton:active {
-    background-color: gold;
+
 }