diff --git a/src/MainDashBoard/components/editOkrTree/EditKrNodes.tsx b/src/MainDashBoard/components/editOkrTree/EditKrNodes.tsx index ab4cc550..f21be77d 100644 --- 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>; + viewMode: string; + setViewMode: Dispatch>; } 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 deleted file mode 100644 index e69de29b..00000000 diff --git a/src/MainDashBoard/components/editOkrTree/EditObjectNode.tsx b/src/MainDashBoard/components/editOkrTree/EditObjectNode.tsx index 4af95361..0901bcbe 100644 --- 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>; + viewMode: string; + setViewMode: Dispatch>; } -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 index 19916d35..8eaad251 100644 --- 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>; + viewMode: string; + setViewMode: Dispatch>; } 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 index c4486d34..a6895e23 100644 --- 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>; + viewMode: string; + setViewMode: Dispatch>; }) => { const handleRadio = (e: ChangeEvent) => { - 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']} /> View @@ -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']} /> Edit diff --git a/src/MainDashBoard/components/mainDashBoardOkrTree/MainDashObjectNode.tsx b/src/MainDashBoard/components/mainDashBoardOkrTree/MainDashObjectNode.tsx index 9e5a34c6..ea9d1315 100644 --- 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 index b2c9d965..d35ee5a3 100644 --- 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(); const [editKrList, setEditKrList] = useState(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 (
- +
( @@ -90,10 +90,10 @@ const MainDashboardOKRTree = ({ onShowSideSheet, currentOkrData }: IMainDashboar
); //edit - case OKRTREEVIEWS[1]: + case OKR_TREE_VIEWS['EDITOKRTREE']: return (
- +
( @@ -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 index f14decda..1e36837d 100644 --- 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 new file mode 100644 index 00000000..093b1958 --- /dev/null +++ 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 index 9a4141a0..41d5fa3b 100644 --- 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}