[FE] REFACTOR: 4층 DISABLED_FLOOR 환경변수로 처리 #1703

innovationacademy-kr · Nov 21, 2024 · 7103156 · 7103156
1 parent 4da08e4
commit 7103156
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 10 deletions.
diff --git a/frontend/src/Cabinet/components/CabinetList/CabinetList.container.tsx b/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";
@@ -51,11 +52,11 @@ const CabinetListContainer = ({
           />
         </div>
       )}
-      {currentFloorSectionNames.includes(currentSectionName) && (currentFloor !== 4) && (
+      {currentFloorSectionNames.includes(currentSectionName) && !(DISABLED_FLOOR.includes(currentFloor.toString())) && (
         <RealViewNotification colNum={colNum as number} />
       )}
-      {(!isAdmin && currentFloor === 4) ? (
-        <EmptySection message={"4층은 현재 이용 불가입니다!"} />
+      {(!isAdmin && DISABLED_FLOOR.includes(currentFloor.toString())) ? (
+        <EmptySection message={`${currentFloor}층은 현재 이용 불가입니다!`} />
       ) : (
         <>
           <CabinetList

diff --git a/frontend/src/Cabinet/components/LeftNav/LeftMainNav/LeftMainNav.tsx b/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;
@@ -58,7 +59,7 @@ const LeftMainNav = ({
               </TopBtnStyled>
               {floors &&
                 floors.map((floor, index) =>
-                  !(!isAdmin && floor === 4) ? (
+                  !(!isAdmin && DISABLED_FLOOR.includes(floor.toString())) ? (
                     <TopBtnStyled
                       className={
                         pathname.includes("main") && floor === currentFloor

diff --git a/frontend/src/Cabinet/components/LeftNav/LeftSectionNav/LeftSectionNav.tsx b/frontend/src/Cabinet/components/LeftNav/LeftSectionNav/LeftSectionNav.tsx
@@ -3,6 +3,7 @@ import { useRecoilValue } from "recoil";
 import { useRecoilState } from "recoil";
 import styled from "styled-components";
 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";
@@ -46,7 +47,7 @@ const LeftSectionNav = ({ closeLeftNav }: { closeLeftNav: () => void }) => {
             <IconWrapperStyled>
               {!isAdmin &&
                 !isClubSection &&
-                currentFloorNumber !== 4 &&
+                !DISABLED_FLOOR.includes(currentFloorNumber.toString()) &&
                 (section.alarmRegistered ? (
                   <FilledHeartIcon />
                 ) : (

diff --git a/frontend/src/Cabinet/components/MapInfo/MapFloorSelectOption/MapFloorSelectOption.tsx b/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,7 +8,7 @@ const MapFloorSelectOption: React.FC<{
   return (
     <OptionWrapperStyled id="mapFloorOptionBox">
       {floorInfo.map((info, idx) => (
-        (info !== 4) &&
+        !(DISABLED_FLOOR.includes(info.toString())) &&
         <OptionStyled
           className="cabiButton"
           onClick={() => selectFloor(info)}

diff --git a/frontend/src/Cabinet/components/MapInfo/MapInfo.tsx b/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 === 4 ? 2 : floor} setFloor={setFloor} floorInfo={floorInfo} />
-      <MapGrid floor={floor === 4 ? 2 : floor} />
+      <MapFloorSelect floor={validFloor} setFloor={setFloor} floorInfo={floorInfo} />
+      <MapGrid floor={validFloor} />
     </MapInfoContainerStyled>
   );
 };

diff --git a/frontend/src/Cabinet/pages/AvailablePage.tsx b/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 = () => {