[FE] FIX: 새로고침 시 나타나는 스크롤바 제거하기 위한 로직 수정

innovationacademy-kr · Oct 8, 2024 · 1b07448 · 1b07448
1 parent bcf8c54
commit 1b07448
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 97 deletions.
diff --git a/frontend/src/Cabinet/pages/MainPage.tsx b/frontend/src/Cabinet/pages/MainPage.tsx
@@ -123,66 +123,65 @@ const MainPage = () => {
     setIsCurrentSectionRender(false);
   };
 
-  return (
-    <>
-      {isLoading && <LoadingAnimation />}
-      <WrapperStyled
-        ref={mainWrapperRef}
-        onTouchStart={(e: React.TouchEvent) => {
-          touchStartPosX.current = e.changedTouches[0].screenX;
-          touchStartPosY.current = e.changedTouches[0].screenY;
-        }}
-        onTouchEnd={(e: React.TouchEvent) => {
-          swipeSection(
-            e.changedTouches[0].screenX,
-            e.changedTouches[0].screenY
-          );
-        }}
-      >
-        <AlertStyled>
-          {currentFloorSectionNames.includes(currentSectionName) &&
-            !isClubSection && (
-              <IconWrapperStyled
-                onClick={handleAlertIconBtn}
-                disabled={
-                  sectionList[currentSectionIndex]?.alarmRegistered
-                    ? true
-                    : false
-                }
-              >
-                {sectionList[currentSectionIndex]?.alarmRegistered === true ? (
-                  <FilledHeartIcon />
-                ) : (
-                  <LineHeartIcon />
-                )}
-              </IconWrapperStyled>
-            )}
-        </AlertStyled>
-        <SectionPaginationContainer />
-        <CabinetListWrapperStyled>
-          <CabinetListContainer isAdmin={false} />
-          {currentSectionName !== SectionType.elevator &&
-            currentSectionName !== SectionType.stairs && (
-              <RefreshButtonStyled
-                className="cabiButton"
-                title="새로고침"
-                id="refreshButton"
-                onClick={refreshCabinetList}
-              >
-                새로고침
-              </RefreshButtonStyled>
-            )}
-        </CabinetListWrapperStyled>
-        {showSectionAlertModal && (
-          <SectionAlertModal
-            currentSectionName={currentSectionName}
-            setShowSectionAlertModal={setShowSectionAlertModal}
-            currentBuilding={currentBuilding}
-            currentFloor={currentFloor}
-          />
-        )}
-      </WrapperStyled>
-    </>
+  return isLoading ? (
+    <LoadingAnimation />
+  ) : (
+    <WrapperStyled
+      ref={mainWrapperRef}
+      onTouchStart={(e: React.TouchEvent) => {
+        touchStartPosX.current = e.changedTouches[0].screenX;
+        touchStartPosY.current = e.changedTouches[0].screenY;
+      }}
+      onTouchEnd={(e: React.TouchEvent) => {
+        swipeSection(
+          e.changedTouches[0].screenX,
+          e.changedTouches[0].screenY
+        );
+      }}
+    >
+      <AlertStyled>
+        {currentFloorSectionNames.includes(currentSectionName) &&
+          !isClubSection && (
+            <IconWrapperStyled
+              onClick={handleAlertIconBtn}
+              disabled={
+                sectionList[currentSectionIndex]?.alarmRegistered
+                  ? true
+                  : false
+              }
+            >
+              {sectionList[currentSectionIndex]?.alarmRegistered === true ? (
+                <FilledHeartIcon />
+              ) : (
+                <LineHeartIcon />
+              )}
+            </IconWrapperStyled>
+          )}
+      </AlertStyled>
+      <SectionPaginationContainer />
+      <CabinetListWrapperStyled>
+        <CabinetListContainer isAdmin={false} />
+        {currentSectionName !== SectionType.elevator &&
+          currentSectionName !== SectionType.stairs && (
+            <RefreshButtonStyled
+              className="cabiButton"
+              title="새로고침"
+              id="refreshButton"
+              onClick={refreshCabinetList}
+            >
+              새로고침
+            </RefreshButtonStyled>
+          )}
+      </CabinetListWrapperStyled>
+      {showSectionAlertModal && (
+        <SectionAlertModal
+          currentSectionName={currentSectionName}
+          setShowSectionAlertModal={setShowSectionAlertModal}
+          currentBuilding={currentBuilding}
+          currentFloor={currentFloor}
+        />
+      )}
+    </WrapperStyled>
   );
 };
 

diff --git a/frontend/src/Cabinet/pages/admin/AdminMainPage.tsx b/frontend/src/Cabinet/pages/admin/AdminMainPage.tsx
@@ -93,44 +93,43 @@ const AdminMainPage = () => {
     else moveToRightSection();
   };
 
-  return (
-    <>
-      {isLoading && <LoadingAnimation />}
-      <WrapperStyled
-        ref={mainWrapperRef}
-        onTouchStart={(e: React.TouchEvent) => {
-          touchStartPosX.current = e.changedTouches[0].screenX;
-          touchStartPosY.current = e.changedTouches[0].screenY;
-        }}
-        onTouchEnd={(e: React.TouchEvent) => {
-          swipeSection(
-            e.changedTouches[0].screenX,
-            e.changedTouches[0].screenY
-          );
-        }}
-      >
-        <SectionPaginationContainer />
-        <MultiSelectButtonWrapperStyled isMultiSelect={isMultiSelect}>
-          <MultiSelectButton
-            theme={isMultiSelect ? "fill" : "line"}
-            text="다중 선택 모드"
-            onClick={toggleMultiSelectMode}
-          />
-        </MultiSelectButtonWrapperStyled>
-        <CabinetListWrapperStyled>
-          <CabinetListContainer isAdmin={true} />
+  return isLoading ? (
+    <LoadingAnimation />
+  ) : (
+    <WrapperStyled
+      ref={mainWrapperRef}
+      onTouchStart={(e: React.TouchEvent) => {
+        touchStartPosX.current = e.changedTouches[0].screenX;
+        touchStartPosY.current = e.changedTouches[0].screenY;
+      }}
+      onTouchEnd={(e: React.TouchEvent) => {
+        swipeSection(
+          e.changedTouches[0].screenX,
+          e.changedTouches[0].screenY
+        );
+      }}
+    >
+      <SectionPaginationContainer />
+      <MultiSelectButtonWrapperStyled isMultiSelect={isMultiSelect}>
+        <MultiSelectButton
+          theme={isMultiSelect ? "fill" : "line"}
+          text="다중 선택 모드"
+          onClick={toggleMultiSelectMode}
+        />
+      </MultiSelectButtonWrapperStyled>
+      <CabinetListWrapperStyled>
+        <CabinetListContainer isAdmin={true} />
 
-          <RefreshButtonStyled
-            className="cabiButton"
-            title="새로고침"
-            id="refreshButton"
-            onClick={refreshCabinetList}
-          >
-            새로고침
-          </RefreshButtonStyled>
-        </CabinetListWrapperStyled>
-      </WrapperStyled>
-    </>
+        <RefreshButtonStyled
+          className="cabiButton"
+          title="새로고침"
+          id="refreshButton"
+          onClick={refreshCabinetList}
+        >
+          새로고침
+        </RefreshButtonStyled>
+      </CabinetListWrapperStyled>
+    </WrapperStyled>
   );
 };