Merge branch 'SP1/refactor' of github.com:MOONSHOT-Team/MOONSHOT-CLIE…

…NT into refactor/#259/refacComDynInput
MOONSHOT-Team · Apr 2, 2024 · eaae01c · eaae01c
2 parents 97485e4 + e871db1
commit eaae01c
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 60 deletions.
diff --git a/src/MainDashBoard/components/editOkrTree/EditKrNodes.tsx b/src/MainDashBoard/components/editOkrTree/EditKrNodes.tsx
@@ -22,8 +22,8 @@ interface IMainEditKrNodesProps {
   krId: number | undefined;
   handleAddTask: (krId: number | undefined) => void;
   objId: number;
-  state: string;
-  setState: Dispatch<SetStateAction<string>>;
+  viewMode: string;
+  setViewMode: Dispatch<SetStateAction<string>>;
 }
 
 export const EditKrNodes = ({
@@ -32,8 +32,8 @@ export const EditKrNodes = ({
   krId,
   handleAddTask,
   objId,
-  state,
-  setState,
+  viewMode,
+  setViewMode,
 }: IMainEditKrNodesProps) => {
   const navigate = useNavigate();
 
@@ -49,7 +49,7 @@ export const EditKrNodes = ({
     try {
       await deletOkrInstance(`/v1/key-result/${krId}`);
       mutate();
-      setState(state);
+      setViewMode(viewMode);
     } catch {
       navigate('/error');
     }
@@ -107,7 +107,7 @@ const StEditKrKrBoxWrapper = styled(StKrBoxWrapper)`
 `;
 
 const StyledIcDrag = styled(IcDrag)`
-  margin: 0 0.5rem 0 0.6rem;
+  margin: 0 0.5rem 0.6rem;
 `;
 
 const StEditKrBox = styled(StKrBox)`

diff --git a/src/MainDashBoard/components/editOkrTree/EditOKRTree.tsx b/src/MainDashBoard/components/editOkrTree/EditOKRTree.tsx
diff --git a/src/MainDashBoard/components/editOkrTree/EditObjectNode.tsx b/src/MainDashBoard/components/editOkrTree/EditObjectNode.tsx
@@ -12,17 +12,24 @@ import useSWR from 'swr';
 
 import { getDashBoardData } from '../../apis/fetcher';
 import { IcAdd } from '../../assets/icons';
+import { StMainDashObjP } from '../../styles/mainDashOKRTreeStyles';
 import AddKrModal from '../editModeModal/AddKrModal';
-import { IMainBoardObjNodeProps, StMainDashObjP } from '../mainDashBoardOkrTree/MainDashObjectNode';
+import { IMainBoardObjNodeProps } from '../mainDashBoardOkrTree/MainDashObjectNode';
 
 interface IEditObjectNode extends IMainBoardObjNodeProps {
   objInfo: { objId: number; objStartAt: string; objExpireAt: string; objTitle: string };
   krListLen: number;
-  state: string;
-  setState: Dispatch<SetStateAction<string>>;
+  viewMode: string;
+  setViewMode: Dispatch<SetStateAction<string>>;
 }
 
-const EditObjectNode = ({ objStroke, objInfo, krListLen, state, setState }: IEditObjectNode) => {
+const EditObjectNode = ({
+  objStroke,
+  objInfo,
+  krListLen,
+  viewMode,
+  setViewMode,
+}: IEditObjectNode) => {
   const { objTitle, objId } = objInfo;
 
   const url = objId ? `/v1/objective?objectiveId=${objId}` : '/v1/objective';
@@ -34,18 +41,11 @@ const EditObjectNode = ({ objStroke, objInfo, krListLen, state, setState }: IEdi
 
   const mutateFcn = () => {
     mutate();
-    setState(state);
+    setViewMode(viewMode);
   };
 
   useEffect(() => {
-    if (krListLen >= 3) {
-      setIsntFull(false);
-      return;
-    }
-    if (krListLen < 3) {
-      setIsntFull(true);
-      return;
-    }
+    krListLen < 3 ? setIsntFull(true) : setIsntFull(false);
   }, [krListLen]);
 
   return (

diff --git a/src/MainDashBoard/components/editOkrTree/EditTaskNodes.tsx b/src/MainDashBoard/components/editOkrTree/EditTaskNodes.tsx
@@ -31,8 +31,8 @@ interface IEditTaskProps {
   taskList: ITaskTypes[];
   editKrId: number | undefined;
   objId: number;
-  state: string;
-  setState: Dispatch<SetStateAction<string>>;
+  viewMode: string;
+  setViewMode: Dispatch<SetStateAction<string>>;
 }
 
 export const EditTaskNodes = ({
@@ -41,8 +41,8 @@ export const EditTaskNodes = ({
   taskList,
   editKrId,
   objId,
-  state,
-  setState,
+  viewMode,
+  setViewMode,
 }: IEditTaskProps) => {
   const navigate = useNavigate();
 
@@ -78,7 +78,7 @@ export const EditTaskNodes = ({
         taskIdx: taskIdx,
       });
       mutate();
-      setState(state);
+      setViewMode(viewMode);
     } catch {
       navigate('error');
     }
@@ -89,7 +89,7 @@ export const EditTaskNodes = ({
     try {
       await deletOkrInstance(`/v1/task/${task.taskId}`);
       mutate();
-      setState(state);
+      setViewMode(viewMode);
     } catch {
       navigate('/error');
     }

diff --git a/src/MainDashBoard/components/mainDashBoardOkrTree/EditBtn.tsx b/src/MainDashBoard/components/mainDashBoardOkrTree/EditBtn.tsx
@@ -1,17 +1,17 @@
 import styled from '@emotion/styled';
 import { ChangeEvent, Dispatch, SetStateAction } from 'react';
 
-import { OKRTREEVIEWS } from '../../constants/OKRTREEVIEWS';
+import { OKR_TREE_VIEWS } from '../../constants/OKRTREEVIEWS';
 
 const EditBtn = ({
-  state,
-  setState,
+  viewMode,
+  setViewMode,
 }: {
-  state: string;
-  setState: Dispatch<SetStateAction<string>>;
+  viewMode: string;
+  setViewMode: Dispatch<SetStateAction<string>>;
 }) => {
   const handleRadio = (e: ChangeEvent<HTMLInputElement>) => {
-    setState(e.target.value);
+    setViewMode(e.target.value);
   };
 
   return (
@@ -21,9 +21,9 @@ const EditBtn = ({
           id="view"
           type="radio"
           name="isEdit"
-          value={OKRTREEVIEWS[0]}
+          value={OKR_TREE_VIEWS['VIEWOKRTREE']}
           onChange={handleRadio}
-          checked={state == OKRTREEVIEWS[0]}
+          checked={viewMode == OKR_TREE_VIEWS['VIEWOKRTREE']}
         />
         <StRadioSpanLeft>View</StRadioSpanLeft>
       </StRadioLabel>
@@ -32,9 +32,9 @@ const EditBtn = ({
           id="edit"
           type="radio"
           name="isEdit"
-          value={OKRTREEVIEWS[1]}
+          value={OKR_TREE_VIEWS['EDITOKRTREE']}
           onChange={handleRadio}
-          checked={state == OKRTREEVIEWS[1]}
+          checked={viewMode == OKR_TREE_VIEWS['EDITOKRTREE']}
         />
         <StRadioSpanRight>Edit</StRadioSpanRight>
       </StRadioLabel>

diff --git a/src/MainDashBoard/components/mainDashBoardOkrTree/MainDashObjectNode.tsx b/src/MainDashBoard/components/mainDashBoardOkrTree/MainDashObjectNode.tsx
@@ -1,5 +1,6 @@
 import { CommonObjNode } from '@components/okrTree/nodes/CommonObjNode';
-import styled from '@emotion/styled';
+
+import { StMainDashObjP } from '../../styles/mainDashOKRTreeStyles';
 export interface IMainBoardObjNodeProps {
   objValue?: string;
   objStroke: string;
@@ -14,11 +15,3 @@ const MainDashObjectNode = ({ objValue, objStroke }: IMainBoardObjNodeProps) =>
 };
 
 export default MainDashObjectNode;
-
-export const StMainDashObjP = styled.p`
-  min-width: 21rem;
-  color: ${({ theme }) => theme.colors.gray_000};
-  ${({ theme }) => theme.fonts.body_13_medium};
-
-  word-break: break-all;
-`;
diff --git a/src/MainDashBoard/components/mainDashBoardOkrTree/MainDashboardOKRTree.tsx b/src/MainDashBoard/components/mainDashBoardOkrTree/MainDashboardOKRTree.tsx
@@ -7,7 +7,7 @@ import useSWR from 'swr';
 
 import { getDashBoardData } from '../../apis/fetcher';
 import { imgNoneOkr } from '../../assets/images';
-import { OKRTREEVIEWS } from '../../constants/OKRTREEVIEWS';
+import { OKR_TREE_VIEWS } from '../../constants/OKRTREEVIEWS';
 import { IMainData } from '../../type/mainDashboardDataType';
 import { EditKrNodes } from '../editOkrTree/EditKrNodes';
 import EditObjectNode from '../editOkrTree/EditObjectNode';
@@ -23,7 +23,7 @@ interface IMainDashboardOKRTreeProps {
 }
 
 const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboardOKRTreeProps) => {
-  const [state, setState] = useState(OKRTREEVIEWS[0]);
+  const [viewMode, setViewMode] = useState(OKR_TREE_VIEWS['VIEWOKRTREE']);
   const [editKrId, setEditKrId] = useState<number | undefined>();
   const [editKrList, setEditKrList] = useState<IKeyResultTypes[]>(currentOkrData?.krList);
   const url = currentOkrData?.objId
@@ -32,7 +32,7 @@ const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboar
   const { data } = useSWR(url, getDashBoardData);
 
   useEffect(() => {
-    setState(OKRTREEVIEWS[0]);
+    setViewMode(OKR_TREE_VIEWS['VIEWOKRTREE']);
     setEditKrList(currentOkrData?.krList);
   }, [currentOkrData]);
 
@@ -60,11 +60,11 @@ const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboar
   };
 
   const renderOKRTree = () => {
-    switch (state) {
-      case OKRTREEVIEWS[0]:
+    switch (viewMode) {
+      case OKR_TREE_VIEWS['VIEWOKRTREE']:
         return (
           <article css={okrTreeContainer}>
-            <EditBtn state={state} setState={setState} />
+            <EditBtn viewMode={viewMode} setViewMode={setViewMode} />
             <div css={okrTree}>
               <OkrTreeTemplate
                 ObjNode={() => (
@@ -90,10 +90,10 @@ const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboar
           </article>
         );
       //edit
-      case OKRTREEVIEWS[1]:
+      case OKR_TREE_VIEWS['EDITOKRTREE']:
         return (
           <article css={okrTreeContainer}>
-            <EditBtn state={state} setState={setState} />
+            <EditBtn viewMode={viewMode} setViewMode={setViewMode} />
             <div css={okrTree}>
               <OkrTreeTemplate
                 ObjNode={() => (
@@ -106,8 +106,8 @@ const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboar
                       objTitle: currentOkrData?.objTitle,
                     }}
                     krListLen={currentOkrData?.krList.length}
-                    state={state}
-                    setState={setState}
+                    viewMode={viewMode}
+                    setViewMode={setViewMode}
                   />
                 )}
                 keyResultList={editKrList}
@@ -118,8 +118,8 @@ const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboar
                     handleAddTask={handleAddTask}
                     krId={editKrList[krIdx].krId}
                     objId={currentOkrData?.objId}
-                    state={state}
-                    setState={setState}
+                    viewMode={viewMode}
+                    setViewMode={setViewMode}
                   />
                 )}
                 TaskNodes={(isFirstChild, krIdx, taskIdx) => (
@@ -129,8 +129,8 @@ const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboar
                     taskList={editKrList[krIdx]?.taskList}
                     editKrId={editKrId}
                     objId={currentOkrData?.objId}
-                    state={state}
-                    setState={setState}
+                    viewMode={viewMode}
+                    setViewMode={setViewMode}
                   />
                 )}
               />

diff --git a/src/MainDashBoard/constants/OKRTREEVIEWS.ts b/src/MainDashBoard/constants/OKRTREEVIEWS.ts
@@ -1 +1 @@
-export const OKRTREEVIEWS = ['viewOkrTree', 'editOkrTree'];
+export const OKR_TREE_VIEWS = { VIEWOKRTREE: 'view', EDITOKRTREE: 'edit' };
diff --git a/src/MainDashBoard/styles/mainDashOKRTreeStyles.ts b/src/MainDashBoard/styles/mainDashOKRTreeStyles.ts
@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const StMainDashObjP = styled.p`
+  min-width: 21rem;
+  color: ${({ theme }) => theme.colors.gray_000};
+  ${({ theme }) => theme.fonts.body_13_medium};
+
+  word-break: break-all;
+`;
diff --git a/src/common/components/input/DynamicInput.tsx b/src/common/components/input/DynamicInput.tsx
@@ -33,7 +33,6 @@ const DynamicInput = ({
         ref={inputRef}
         maxLength={maxLength}
         onKeyDown={(e) => {
-          e.stopPropagation();
           onKeyDown?.(e);
         }}
         size={1}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const OKRTREEVIEWS = ['viewOkrTree', 'editOkrTree'];
		export const OKR_TREE_VIEWS = { VIEWOKRTREE: 'view', EDITOKRTREE: 'edit' };