[FE] FEAT: 일정 관리 모달에서 카테고리가 DUMMY인 경우 status를 DUMMY로 고정 #1691

innovationacademy-kr · Oct 29, 2024 · f871765 · f871765
1 parent 2bccca5
commit f871765
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/frontend/src/Cabinet/components/Common/Dropdown.tsx b/frontend/src/Cabinet/components/Common/Dropdown.tsx
@@ -20,6 +20,7 @@ export interface IDropdownProps {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   closeOtherDropdown?: () => void;
+  isDisabledOption: boolean;
 }
 
 const Dropdown = ({
@@ -30,6 +31,7 @@ const Dropdown = ({
   isOpen,
   setIsOpen,
   closeOtherDropdown,
+  isDisabledOption,
 }: IDropdownProps) => {
   const [currentName, setCurrentName] = useState(defaultValue);
   const idx: number = options.findIndex((op) => op.name === currentName);
@@ -41,14 +43,16 @@ const Dropdown = ({
   useEffect(() => {
     setCurrentName(defaultValue);
   }, [defaultValue]);
+
   return (
-    <DropdownContainerStyled>
+    <DropdownContainerStyled isDisabled={isDisabledOption}>
       <DropdownSelectionBoxStyled
         onClick={() => {
           if (options[selectedIdx].isDisabled) return;
           setIsOpen(!isOpen);
           closeOtherDropdown && closeOtherDropdown();
         }}
+        isDisabled={isDisabledOption}
       >
         {DefaultOptionIcon && (
           <OptionsImgStyled>
@@ -94,15 +98,15 @@ const Dropdown = ({
   );
 };
 
-const DropdownContainerStyled = styled.div`
+const DropdownContainerStyled = styled.div<{ isDisabled: boolean }>`
   display: flex;
   flex-direction: column;
   width: 100%;
   position: relative;
-  cursor: pointer;
+  cursor: ${({ isDisabled }) => (isDisabled ? "" : "pointer")};
 `;
 
-const DropdownSelectionBoxStyled = styled.div`
+const DropdownSelectionBoxStyled = styled.div<{ isDisabled: boolean }>`
   position: relative;
   display: flex;
   align-items: center;
@@ -113,7 +117,8 @@ const DropdownSelectionBoxStyled = styled.div`
   text-align: start;
   padding-left: 20px;
   font-size: 1.125rem;
-  color: var(--sys-main-color);
+  color: ${({ isDisabled }) =>
+    isDisabled ? "var(--capsule-btn-border-color)" : "var(--sys-main-color)"};
 `;
 
 const DropdownItemContainerStyled = styled.div<{ isVisible: boolean }>`

diff --git a/frontend/src/Presentation/components/Modals/EditStatusModal/EditStatusModal.tsx b/frontend/src/Presentation/components/Modals/EditStatusModal/EditStatusModal.tsx
@@ -78,11 +78,7 @@ const EditStatusModal = ({ list, closeModal }: EditStatusModalProps) => {
   const statusDropdownProps = {
     options: statusOptions.map((option) => ({
       ...option,
-      isDisabled:
-        currentPresentation?.category === "DUMMY" &&
-        option.value === PresentationStatusType.CANCEL
-          ? true
-          : false,
+      isDisabled: currentPresentation?.category === "DUMMY" ? true : false,
     })),
     defaultValue:
       statusOptions.find(
@@ -98,6 +94,7 @@ const EditStatusModal = ({ list, closeModal }: EditStatusModalProps) => {
       setIsDatesDropdownOpen(false);
       setIsLocationDropdownOpen(false);
     },
+    isDisabledOption: currentPresentation?.category === "DUMMY",
   };
 
   const datesDropdownProps = {
@@ -115,6 +112,7 @@ const EditStatusModal = ({ list, closeModal }: EditStatusModalProps) => {
       setIsStatusDropdownOpen(false);
       setIsLocationDropdownOpen(false);
     },
+    isDisabledOption: false,
   };
 
   const locationDropdownProps = {
@@ -133,6 +131,7 @@ const EditStatusModal = ({ list, closeModal }: EditStatusModalProps) => {
       setIsStatusDropdownOpen(false);
       setIsDatesDropdownOpen(false);
     },
+    isDisabledOption: false,
   };
 
   const tryEditPresentationStatus = async (e: React.MouseEvent) => {
@@ -188,6 +187,9 @@ const EditStatusModal = ({ list, closeModal }: EditStatusModalProps) => {
 
   useEffect(() => {
     getInvalidDates();
+    if (currentPresentation?.category === "DUMMY") {
+      setPresentationStatus(PresentationStatusType.DUMMY);
+    }
   }, []);
 
   useEffect(() => {

diff --git a/frontend/src/Presentation/types/enum/presentation.type.enum.ts b/frontend/src/Presentation/types/enum/presentation.type.enum.ts
@@ -2,6 +2,7 @@ export enum PresentationStatusType {
   EXPECTED = "EXPECTED",
   DONE = "DONE",
   CANCEL = "CANCEL",
+  DUMMY = "DUMMY",
 }
 
 export enum PresentationPeriodType {