Merge pull request #185 from Codeit-FE18-Part3-Team4/feature/#55

[#55] 사이드바 수정

Author: YOOJEYEONG

src/components/dashboard-layout/index.tsx

@@ -1,7 +1,7 @@
 import DashboardSideBar from "@/components/dashboard-side-bar/dashboard-side-bar";
 import { useSsrResponsive } from "@/hooks/use-ssr-responsive";
 import { useRouter } from "next/router";
-import { ReactNode, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import CreateDashboardSheet from "../dashboard-create/create-dashboard-sheet";
 import NavigationBar from "../navigationBar/navigation-bar";
 import AccountSettingModal from "../profile-setting-modal";
@@ -32,6 +32,18 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
     setIsMobileSidebarOpen(false);
   };
 
+  useEffect(() => {
+    if (isMobileSidebarOpen) {
+      document.body.style.position = "fixed";
+      document.body.style.width = "100%";
+    } else {
+      document.body.style.position = "";
+    }
+    return () => {
+      document.body.style.position = "";
+    };
+  }, [isMobileSidebarOpen]);
+
   return (
     <div className={styles.dashboardLayout}>
       {!isMobile && <DashboardSideBar />}

src/components/dashboard-side-bar/dashboard-side-bar.module.css

@@ -23,11 +23,14 @@
 }
 .main {
   padding: 0 24px;
-  min-height: 720px;
+  /* min-height: 720px; */
   flex: 1;
   display: flex;
   flex-direction: column;
 }
+.main > .mainDashboard {
+  flex: 1;
+}
 .dashboardAdd {
   width: 100%;
   display: flex;
@@ -114,6 +117,8 @@
   align-items: center;
   justify-content: space-between;
   height: 44px;
+  position: sticky;
+  bottom: 62px;
 }
 .dashboardPagenation > button {
   display: flex;
@@ -122,7 +127,7 @@
   width: 77px;
   height: 40px;
 }
-.dashboardPagenation > button.disabled {
+/* .dashboardPagenation > button.disabled {
   cursor: not-allowed;
 }
 .dashboardPagenation > button.disabled > span {
@@ -131,6 +136,12 @@
 .dashboardPagenation > button.disabled > img {
   filter: invert(48%) sepia(9%) saturate(563%) hue-rotate(213deg)
     brightness(94%) contrast(89%);
+} */
+.dashboardPagenation > button.visible {
+  visibility: visible;
+}
+.dashboardPagenation > button.visibleHidden {
+  visibility: hidden;
 }
 .dashboardPagenation > button > span {
   color: var(--color-gray100);

src/components/dashboard-side-bar/sidebar-page-control.tsx

@@ -12,42 +12,39 @@ export default function SidebarPageControl({
   totalPages,
 }: SidebarPageControlProps) {
   const isLastPage = totalPages;
-  const prevDisabled = currentPage === 1 ? styles.disabled : "";
-  const nextDisabled = currentPage === isLastPage ? styles.disabled : "";
+  const prevDisabled =
+    currentPage === 1 ? styles.visibleHidden : styles.visible;
+  const nextDisabled =
+    currentPage === isLastPage ? styles.visibleHidden : styles.visible;
 
   return (
     <div className={styles.dashboardPagenation}>
-      {!prevDisabled && (
-        <button
-          onClick={onPrev}
-          disabled={currentPage === 0}
-          className={`${styles.button} ${prevDisabled}`}
-        >
-          <Image
-            src={ArrowLeftIcon}
-            width={20}
-            height={20}
-            alt="이전 버튼 아이콘"
-          />
-          <span className={Typography.lgMedium}>이전</span>
-        </button>
-      )}
-      <div></div>
-      {!nextDisabled && (
-        <button
-          onClick={onNext}
-          disabled={currentPage === isLastPage}
-          className={`${styles.button} ${nextDisabled}`}
-        >
-          <span className={Typography.lgMedium}>다음</span>
-          <Image
-            src={ArrowRightIcon}
-            width={20}
-            height={20}
-            alt="다음 버튼 아이콘"
-          />
-        </button>
-      )}
+      <button
+        onClick={onPrev}
+        disabled={currentPage === 0}
+        className={`${styles.button} ${prevDisabled}`}
+      >
+        <Image
+          src={ArrowLeftIcon}
+          width={20}
+          height={20}
+          alt="이전 버튼 아이콘"
+        />
+        <span className={Typography.lgMedium}>이전</span>
+      </button>
+      <button
+        onClick={onNext}
+        disabled={currentPage === isLastPage}
+        className={`${styles.button} ${nextDisabled}`}
+      >
+        <span className={Typography.lgMedium}>다음</span>
+        <Image
+          src={ArrowRightIcon}
+          width={20}
+          height={20}
+          alt="다음 버튼 아이콘"
+        />
+      </button>
     </div>
   );
 }