Merge pull request #1244 from innovationacademy-kr/fe/dev/fix_lentLog…

…_responsive/#1229 [FE] : fix lentLog layout 화면 높이에 따른 깨짐 수정
innovationacademy-kr · Jul 21, 2023 · e73afc5 · e73afc5
2 parents fe5e55d + d03262e
commit e73afc5
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 29 deletions.
diff --git a/frontend/src/api/axios/axios.custom.ts b/frontend/src/api/axios/axios.custom.ts
@@ -338,7 +338,7 @@ export const axiosGetCabinetLentLog = async (
     const response = await instance.get(
       axiosGetCabinetLentLogURL + cabinetId.toString() + "/lent-histories",
       {
-        params: { page: page, size: 10 },
+        params: { page: page, size: 8 },
       }
     );
     return response;
@@ -357,7 +357,7 @@ export const axiosGetUserLentLog = async (
     const response = await instance.get(
       axiosGetUserLentLogURL + userId.toString() + "/lent-histories",
       {
-        params: { page: page, size: 10 },
+        params: { page: page, size: 8 },
       }
     );
     return response;

diff --git a/frontend/src/components/LentLog/AdminCabinetLentLog.tsx b/frontend/src/components/LentLog/AdminCabinetLentLog.tsx
@@ -19,30 +19,67 @@ const AdminCabinetLentLog = ({
           totalPage={totalPage}
           type="prev"
           onClick={onClickPrev}
+          className="logPageButton"
         >
-          이전
+          <ImgCenterStyled>
+            <ImageStyled>
+              <img src="/src/assets/images/LeftSectionButton.svg" alt="" />
+            </ImageStyled>
+          </ImgCenterStyled>
         </PageButtonStyled>
         <PageButtonStyled
           page={page}
           totalPage={totalPage}
           type="next"
           onClick={onClickNext}
+          className="logPageButton"
         >
-          다음
+          <ImgCenterStyled>
+            <ImageStyled>
+              <img src="/src/assets/images/LeftSectionButton.svg" alt="" />
+            </ImageStyled>
+          </ImgCenterStyled>
         </PageButtonStyled>
       </ButtonContainerStyled>
     </AdminLentLogStyled>
   );
 };
 
+const AdminLentLogStyled = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+const ButtonContainerStyled = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  overflow: hidden;
+  &:hover > .logPageButton {
+    opacity: 1;
+  }
+`;
+
 const PageButtonStyled = styled.div<{
   page: number;
   totalPage: number;
   type: string;
 }>`
   cursor: pointer;
-  color: var(--main-color);
+  width: 40px;
+  height: 100%;
+  border-radius: 10px;
   position: absolute;
+  opacity: 0.5;
+  transition: opacity 0.5s;
+  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.5));
   display: ${({ page, totalPage, type }) => {
     if (type == "prev" && page == 0) return "none";
     if (type == "next" && (totalPage == 0 || page == totalPage - 1))
@@ -56,22 +93,22 @@ const PageButtonStyled = styled.div<{
         `
       : css`
           right: 0;
+          transform: rotate(-180deg);
         `}
 `;
 
-const ButtonContainerStyled = styled.div`
-  position: relative;
-  width: 80%;
-  height: 50px;
+const ImgCenterStyled = styled.div`
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin: 0 auto;
-  margin-top: 25px;
+  justify-content: center;
+  height: 100%;
 `;
 
-const AdminLentLogStyled = styled.div`
-  width: 100%;
+const ImageStyled = styled.div`
+  width: 40px;
+  margin-right: 4px;
+  filter: brightness(0%);
+  border-radius: 50%;
 `;
 
 export default AdminCabinetLentLog;
diff --git a/frontend/src/components/LentLog/AdminLentLog.tsx b/frontend/src/components/LentLog/AdminLentLog.tsx
@@ -91,8 +91,8 @@ const AdminLentLogStyled = styled.div`
   top: 0;
   right: 0;
   min-width: 330px;
-  height: 100%;
-  padding: 40px 20px;
+  min-height: 100%;
+  padding: 40px 20px 10px 20px;
   z-index: 9;
   transform: translateX(120%);
   transition: transform 0.3s ease-in-out;

diff --git a/frontend/src/components/LentLog/AdminUserLentLog.tsx b/frontend/src/components/LentLog/AdminUserLentLog.tsx
@@ -19,30 +19,66 @@ const AdminUserLentLog = ({
           totalPage={totalPage}
           type="prev"
           onClick={onClickPrev}
+          className="logPageButton"
         >
-          이전
+          <ImgCenterStyled>
+            <ImageStyled>
+              <img src="/src/assets/images/LeftSectionButton.svg" alt="" />
+            </ImageStyled>
+          </ImgCenterStyled>
         </PageButtonStyled>
         <PageButtonStyled
           page={page}
           totalPage={totalPage}
           type="next"
           onClick={onClickNext}
+          className="logPageButton"
         >
-          다음
+          <ImgCenterStyled>
+            <ImageStyled>
+              <img src="/src/assets/images/LeftSectionButton.svg" alt="" />
+            </ImageStyled>
+          </ImgCenterStyled>
         </PageButtonStyled>
       </ButtonContainerStyled>
     </AdminLentLogStyled>
   );
 };
 
+const AdminLentLogStyled = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+const ButtonContainerStyled = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 auto;
+  &:hover > .logPageButton {
+    opacity: 1;
+  }
+`;
+
 const PageButtonStyled = styled.div<{
   page: number;
   totalPage: number;
   type: string;
 }>`
   cursor: pointer;
-  color: var(--main-color);
+  width: 40px;
+  height: 100%;
+  border-radius: 10px;
   position: absolute;
+  opacity: 0.5;
+  transition: opacity 0.5s;
+  background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.5));
   display: ${({ page, totalPage, type }) => {
     if (type == "prev" && page == 0) return "none";
     if (type == "next" && (totalPage == 0 || page == totalPage - 1))
@@ -56,22 +92,22 @@ const PageButtonStyled = styled.div<{
         `
       : css`
           right: 0;
+          transform: rotate(-180deg);
         `}
 `;
 
-const ButtonContainerStyled = styled.div`
-  position: relative;
-  width: 80%;
-  height: 50px;
+const ImgCenterStyled = styled.div`
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin: 0 auto;
-  margin-top: 25px;
+  justify-content: center;
+  height: 100%;
 `;
 
-const AdminLentLogStyled = styled.div`
-  width: 100%;
+const ImageStyled = styled.div`
+  width: 40px;
+  margin-right: 4px;
+  filter: brightness(0%);
+  border-radius: 50%;
 `;
 
 export default AdminUserLentLog;
diff --git a/frontend/src/components/LentLog/LogTable/AdminCabinetLogTable.tsx b/frontend/src/components/LentLog/LogTable/AdminCabinetLogTable.tsx
@@ -72,10 +72,17 @@ const TheadStyled = styled.thead`
   line-height: 50px;
   background-color: var(--main-color);
   color: var(--white);
+  & > tr > th:first-child {
+    padding-left: 20px;
+  }
+  & > tr > th:last-child {
+    padding-right: 20px;
+  }
 `;
 
 const TbodyStyled = styled.tbody`
   & > tr {
+    font-size: small;
     text-align: center;
     height: 50px;
   }
@@ -87,6 +94,12 @@ const TbodyStyled = styled.tbody`
   & > tr:nth-child(2n) {
     background: #f9f6ff;
   }
+  & > tr > td:first-child {
+    padding-left: 20px;
+  }
+  & > tr > td:last-child {
+    padding-right: 20px;
+  }
 `;
 
 const EmptyLogStyled = styled.div`

diff --git a/frontend/src/components/LentLog/LogTable/LogTable.tsx b/frontend/src/components/LentLog/LogTable/LogTable.tsx
@@ -71,10 +71,17 @@ const TheadStyled = styled.thead`
   line-height: 50px;
   background-color: var(--main-color);
   color: var(--white);
+  & > tr > th:first-child {
+    padding-left: 20px;
+  }
+  & > tr > th:last-child {
+    padding-right: 20px;
+  }
 `;
 
 const TbodyStyled = styled.tbody`
   & > tr {
+    font-size: small;
     text-align: center;
     height: 50px;
   }
@@ -86,6 +93,12 @@ const TbodyStyled = styled.tbody`
   & > tr:nth-child(2n) {
     background: #f9f6ff;
   }
+  & > tr > td:first-child {
+    padding-left: 20px;
+  }
+  & > tr > td:last-child {
+    padding-right: 20px;
+  }
 `;
 
 const EmptyLogStyled = styled.div`

diff --git a/frontend/src/hooks/useMenu.ts b/frontend/src/hooks/useMenu.ts
@@ -104,6 +104,7 @@ const useMenu = () => {
   };
 
   const closeCabinet = () => {
+    closeLent();
     if (
       document.getElementById("cabinetDetailArea")?.classList.contains("on") ==
       true

diff --git a/frontend/src/pages/admin/AdminLayout.tsx b/frontend/src/pages/admin/AdminLayout.tsx
@@ -98,7 +98,8 @@ const DetailInfoContainerStyled = styled.div<{ isFloat: boolean }>`
   position: relative;
   border-left: 1px solid var(--line-color);
   background-color: var(--white);
-  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
   ${(props) =>
     props.isFloat &&
     css`