[FE] 4층 사물함 접근 제한 #1703

frontend/src/Cabinet/components/CabinetList/CabinetList.container.tsx

@@ -9,6 +9,7 @@ import {
   currentSectionCabinetState,
   currentSectionColNumState,
 } from "@/Cabinet/recoil/selectors";
+import { DISABLED_FLOOR } from "@/Cabinet/pages/AvailablePage";
 import CabinetList from "@/Cabinet/components/CabinetList/CabinetList";
 import EmptySection from "@/Cabinet/components/CabinetList/EmptySection/EmptySection";
 import RealViewNotification from "@/Cabinet/components/CabinetList/RealViewNotification/RealViewNotification";
@@ -19,10 +20,11 @@ import useMultiSelect from "@/Cabinet/hooks/useMultiSelect";
 
 interface ICabinetListContainer {
   isAdmin: boolean;
+  currentFloor: number;
 }
 
 const CabinetListContainer = ({
-  isAdmin,
+  isAdmin, currentFloor
 }: ICabinetListContainer): JSX.Element => {
   const colNum = useRecoilValue(currentSectionColNumState);
   const currentSectionCabinets = useRecoilValue<CabinetPreviewInfo[]>(
@@ -50,17 +52,23 @@ const CabinetListContainer = ({
           />
         </div>
       )}
-      {currentFloorSectionNames.includes(currentSectionName) && (
+      {currentFloorSectionNames.includes(currentSectionName) && !(DISABLED_FLOOR.includes(currentFloor.toString())) && (
         <RealViewNotification colNum={colNum as number} />
       )}
-      <CabinetList
-        colNum={colNum as number}
-        cabinetInfo={currentSectionCabinets}
-        isAdmin={isAdmin}
-      />
-      {(currentSectionName === SectionType.elevator ||
-        currentSectionName === SectionType.stairs) && (
-        <EmptySection message={"여기엔 사물함이 없어요!"} />
+      {(!isAdmin && DISABLED_FLOOR.includes(currentFloor.toString())) ? (
+        <EmptySection message={`${currentFloor}층은 현재 이용 불가입니다!`} />
+      ) : (
+        <>
+          <CabinetList
+            colNum={colNum as number}
+            cabinetInfo={currentSectionCabinets}
+            isAdmin={isAdmin}
+          />
+          {(currentSectionName === SectionType.elevator ||
+            currentSectionName === SectionType.stairs) && (
+              <EmptySection message={"여기엔 사물함이 없어요!"} />
+            )}
+        </>
       )}
     </React.Fragment>
   );

frontend/src/Cabinet/components/LeftNav/LeftMainNav/LeftMainNav.tsx

@@ -5,6 +5,7 @@ import { ReactComponent as ProfileImg } from "@/Cabinet/assets/images/profile-ci
 import { ReactComponent as SlackAlarmImg } from "@/Cabinet/assets/images/slack-alarm.svg";
 import { ReactComponent as SlackImg } from "@/Cabinet/assets/images/slack.svg";
 import { ReactComponent as StoreImg } from "@/Cabinet/assets/images/storeIconGray.svg";
+import { DISABLED_FLOOR } from "@/Cabinet/pages/AvailablePage";
 
 interface ILeftMainNav {
   pathname: string;
@@ -57,19 +58,21 @@ const LeftMainNav = ({
                 Home
               </TopBtnStyled>
               {floors &&
-                floors.map((floor, index) => (
-                  <TopBtnStyled
-                    className={
-                      pathname.includes("main") && floor === currentFloor
-                        ? "leftNavButtonActive cabiButton"
-                        : "cabiButton"
-                    }
-                    onClick={() => onClickFloorButton(floor)}
-                    key={index}
-                  >
-                    {floor + "층"}
-                  </TopBtnStyled>
-                ))}
+                floors.map((floor, index) =>
+                  !(!isAdmin && DISABLED_FLOOR.includes(floor.toString())) ? (
+                    <TopBtnStyled
+                      className={
+                        pathname.includes("main") && floor === currentFloor
+                          ? "leftNavButtonActive cabiButton"
+                          : "cabiButton"
+                      }
+                      onClick={() => onClickFloorButton(floor)}
+                      key={index}
+                    >
+                      {floor + "층"}
+                    </TopBtnStyled>
+                  ) : null
+                )}
               <TopBtnStyled
                 className={
                   pathname.includes("available")

frontend/src/Cabinet/components/LeftNav/LeftSectionNav/LeftSectionNav.tsx

@@ -2,7 +2,8 @@ import { useLocation } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { useRecoilState } from "recoil";
 import styled from "styled-components";
-import { currentSectionNameState } from "@/Cabinet/recoil/atoms";
+import { currentSectionNameState, currentFloorNumberState } from "@/Cabinet/recoil/atoms";
+import { DISABLED_FLOOR } from "@/Cabinet/pages/AvailablePage";
 import { currentFloorSectionState } from "@/Cabinet/recoil/selectors";
 import CabinetColorTable from "@/Cabinet/components/LeftNav/CabinetColorTable/CabinetColorTable";
 import { clubSectionsData } from "@/Cabinet/assets/data/mapPositionData";
@@ -17,6 +18,7 @@ const LeftSectionNav = ({ closeLeftNav }: { closeLeftNav: () => void }) => {
   const [currentFloorSection, setCurrentFloorSection] = useRecoilState<string>(
     currentSectionNameState
   );
+  const currentFloorNumber = useRecoilValue<number>(currentFloorNumberState);
   const { pathname } = useLocation();
   const isAdmin = pathname.includes("admin");
 
@@ -45,6 +47,7 @@ const LeftSectionNav = ({ closeLeftNav }: { closeLeftNav: () => void }) => {
             <IconWrapperStyled>
               {!isAdmin &&
                 !isClubSection &&
+                !DISABLED_FLOOR.includes(currentFloorNumber.toString()) &&
                 (section.alarmRegistered ? (
                   <FilledHeartIcon />
                 ) : (

frontend/src/Cabinet/components/MapInfo/MapFloorSelectOption/MapFloorSelectOption.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { DISABLED_FLOOR } from "@/Cabinet/pages/AvailablePage";
 
 const MapFloorSelectOption: React.FC<{
   selectFloor: Function;
@@ -7,6 +8,7 @@ const MapFloorSelectOption: React.FC<{
   return (
     <OptionWrapperStyled id="mapFloorOptionBox">
       {floorInfo.map((info, idx) => (
+        !(DISABLED_FLOOR.includes(info.toString())) &&
         <OptionStyled
           className="cabiButton"
           onClick={() => selectFloor(info)}

frontend/src/Cabinet/components/MapInfo/MapInfo.tsx

@@ -1,7 +1,9 @@
 import styled from "styled-components";
 import MapFloorSelect from "@/Cabinet/components/MapInfo/MapFloorSelect/MapFloorSelect";
 import MapGrid from "@/Cabinet/components/MapInfo/MapGrid/MapGrid";
+import { DISABLED_FLOOR } from "@/Cabinet/pages/AvailablePage";
 
+const DEFAULT_FLOOR = 2;
 const MapInfo = ({
   touchStart,
   touchEnd,
@@ -12,11 +14,16 @@ const MapInfo = ({
 }: {
   touchStart: React.TouchEventHandler;
   touchEnd: React.TouchEventHandler;
-  floor: number;
+  floor: number | undefined;
   setFloor: React.Dispatch<React.SetStateAction<number>>;
   floorInfo: number[];
   closeMap: React.MouseEventHandler;
 }) => {
+  const currentFloor = floor ?? DEFAULT_FLOOR;
+  const validFloor = DISABLED_FLOOR.includes(currentFloor.toString())
+    ? DEFAULT_FLOOR
+    : currentFloor;
+
   return (
     <MapInfoContainerStyled
       id="mapInfo"
@@ -33,8 +40,8 @@ const MapInfo = ({
           style={{ width: "24px", cursor: "pointer" }}
         />
       </HeaderStyled>
-      <MapFloorSelect floor={floor} setFloor={setFloor} floorInfo={floorInfo} />
-      <MapGrid floor={floor} />
+      <MapFloorSelect floor={validFloor} setFloor={setFloor} floorInfo={floorInfo} />
+      <MapGrid floor={validFloor} />
     </MapInfoContainerStyled>
   );
 };

frontend/src/Cabinet/pages/AvailablePage.tsx

@@ -29,7 +29,6 @@ const toggleList: toggleItem[] = [
   { name: "공유", key: AvailableCabinetsType.SHARE },
 ];
 
-/* TODO: DISABLED_FLOOR 을 환경변수로 넣기 */
 export const DISABLED_FLOOR = ["4"];
 
 const AvailablePage = () => {

frontend/src/Cabinet/pages/MainPage.tsx

@@ -152,9 +152,10 @@ const MainPage = () => {
       </AlertStyled>
       <SectionPaginationContainer />
       <CabinetListWrapperStyled>
-        <CabinetListContainer isAdmin={false} />
+        <CabinetListContainer isAdmin={false} currentFloor={currentFloor} />
         {currentSectionName !== SectionType.elevator &&
-          currentSectionName !== SectionType.stairs && (
+          currentSectionName !== SectionType.stairs &&
+          currentFloor !== 4 && (
             <RefreshButtonStyled
               className="cabiButton"
               title="새로고침"

frontend/src/Cabinet/pages/admin/AdminMainPage.tsx

@@ -118,7 +118,7 @@ const AdminMainPage = () => {
         />
       </MultiSelectButtonWrapperStyled>
       <CabinetListWrapperStyled>
-        <CabinetListContainer isAdmin={true} />
+        <CabinetListContainer isAdmin={true} currentFloor={currentFloorNumber} />
 
         <RefreshButtonStyled
           className="cabiButton"