-
+ {searchTodoList.map((todo) => {
+ return (
+
- {
+ if (el !== null) {
+ liRef.current[todo.id] = el;
+ }
+ }}
+ style={{ backgroundColor: focusedId === todo.id ? lightGray : '' }}
+ onClick={() => listOnClick(todo)}
+ >
+
+
+ );
+ })}
+ {searchTodoList.length === 0 && inputValue !== '' && isKeywordNotRegExcep && (
+
{todo.title}
+
+ {type === 'WARNING' ?
+ )}
+ Todo가 없습니다!
+Todo를 추가해보는 건 어떨까요?
+
+
+ {type === 'text' && (
+
+ )}
+ {type === 'textarea' && }
+ {type === 'search-prev' && (
+
+
+ {relatedTodoList.map((relatedTodo: PlainTodo) => {
+ if (relatedTodo === undefined) throw new Error('RelatedTodo가 없습니다');
+ return (
+
+
+ }
+ onClick={() => deleteRelatedToto(relatedTodo.id)}
+ />
+
+ );
+ })}
+
+
+ );
+};
+
+export default RelatedTodoInput;
diff --git a/client/src/components/todos/SortBox.tsx b/client/src/components/todos/SortBox.tsx
new file mode 100644
index 0000000..32d5c52
--- /dev/null
+++ b/client/src/components/todos/SortBox.tsx
@@ -0,0 +1,104 @@
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+
+import Text from '../Text';
+import Button from '../Button';
+
+import { PRIMARY_COLORS } from '@util/Constants';
+
+const { lightGray, blue, gray } = PRIMARY_COLORS;
+
+const StyledSortBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ background-color: ${lightGray};
+ line-height: 25px;
+ letter-spacing: 0em;
+ align-items: flex-start;
+ justify-content: center;
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ border-radius: 10px;
+ width: max-content;
+ padding: 20px;
+ gap: 20px;
+ position: absolute;
+ left: 50%;
+ z-index: 5;
+ transform: translateX(-50%);
+`;
+
+const Overlay = styled.div`
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 3;
+ background-color: transparent;
+`;
+
+interface SortProps {
+ sort: Map{todo.content}
- - )} - {prevTodoList.length > 0 && ( - <> -{IMPORTANCE_ALPHABET[todo.importance]}
-
+
+ }
+ onClick={getCheckTodoStateHandler(todo, todoListAtom, setTodoListAtom)}
+ />
+ {tableRowHeaderElemList.map((headerElem) => {
+ return (
+
);
};
-export default TableRowHeader;
+export default memo(TableRowHeader);
diff --git a/client/src/components/todos/TodoTitleList.tsx b/client/src/components/todos/TodoTitleList.tsx
index 30be7d3..2d231fa 100644
--- a/client/src/components/todos/TodoTitleList.tsx
+++ b/client/src/components/todos/TodoTitleList.tsx
@@ -1,11 +1,15 @@
import { ReactElement } from 'react';
import { PlainTodo } from '@todo/todo.type';
-const TodoTitleList = ({ list, prevId }: { list: PlainTodo[]; prevId: string }): ReactElement => {
+const TodoTitleList = ({ list }: { list: PlainTodo[] }): ReactElement => {
return (
+ {slides.map((slide, i) => (
+
+ );
+};
diff --git a/client/src/components/tutorial/Icons.tsx b/client/src/components/tutorial/Icons.tsx
new file mode 100644
index 0000000..f1e065d
--- /dev/null
+++ b/client/src/components/tutorial/Icons.tsx
@@ -0,0 +1,54 @@
+import { ComponentProps, ReactElement } from 'react';
+import styled from 'styled-components';
+import { PRIMARY_COLORS } from '@util/Constants';
+
+const Svg = styled.svg`
+ display: inline-block;
+`;
+
+export const PrevIcon = ({
+ icon,
+ fill = PRIMARY_COLORS.darkGray,
+ ...props
+}: ComponentProps): ReactElement => {
+ return (
+
+ );
+};
+
+export const NextIcon = ({ icon, fill = '#3F3F3F', ...props }: ComponentProps): ReactElement => {
+ return (
+
+ );
+};
+
+export const CancelIcon = ({ icon, fill = '#3F3F3F', ...props }: ComponentProps): ReactElement => {
+ return (
+
+ );
+};
diff --git a/client/src/components/tutorial/ToggleButton.tsx b/client/src/components/tutorial/ToggleButton.tsx
new file mode 100644
index 0000000..15f0fe1
--- /dev/null
+++ b/client/src/components/tutorial/ToggleButton.tsx
@@ -0,0 +1,57 @@
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+import { PRIMARY_COLORS } from '@util/Constants';
+
+interface ButtonStylingProps {
+ isActive: boolean;
+}
+
+const StyledButton = styled.button`
+ position: absolute;
+ inset: 0px;
+ transition: all 200ms ease 0s;
+ border-radius: 22px;
+ cursor: pointer;
+ border: 2px solid ${PRIMARY_COLORS.gray};
+ background: transparent;
+
+ &::before {
+ width: 14px;
+ height: 14px;
+ left: 3px;
+ bottom: 2px;
+ background-color: ${PRIMARY_COLORS.gray};
+ position: absolute;
+ content: '';
+ transition: all 200ms ease 0s;
+ border-radius: 50%;
+ }
+
+ ${({ isActive }) =>
+ isActive &&
+ `
+ background-color: ${PRIMARY_COLORS.blue};
+ &::before {
+ transform: translateX(16px);
+ }
+ `}
+`;
+const Wrapper = styled.div`
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 22px;
+`;
+
+interface ToggleButtonProps {
+ isActive: boolean;
+ toggleActive: () => void;
+}
+
+export const ToggleButton = ({ isActive, toggleActive, ...props }: ToggleButtonProps): ReactElement => {
+ return (
+
+
+ );
+};
diff --git a/client/src/components/tutorial/TutorialImage.tsx b/client/src/components/tutorial/TutorialImage.tsx
new file mode 100644
index 0000000..be41588
--- /dev/null
+++ b/client/src/components/tutorial/TutorialImage.tsx
@@ -0,0 +1,95 @@
+import { ReactElement, useEffect, useState, useRef } from 'react';
+import styled from 'styled-components';
+import { Dots } from './Dots';
+
+import { PrevIcon, NextIcon, CancelIcon } from './Icons';
+import { PRIMARY_COLORS } from '@util/Constants';
+import Button from '@components/Button';
+
+import Tutorial1 from '@images/tutorial/tutorial-page-1.svg';
+import Tutorial2 from '@images/tutorial/tutorial-page-2.svg';
+import Tutorial3 from '@images/tutorial/tutorial-page-3.svg';
+import Tutorial5 from '@images/tutorial/tutorial-page-5.svg';
+
+const StyledOverlay = styled.div`
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: ${PRIMARY_COLORS.black};
+ width: 100vw;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 10;
+
+ & > img {
+ width: 80%;
+ height: 80%;
+ }
+`;
+
+const imgSrcArray: string[] = [Tutorial1, Tutorial2, Tutorial3, Tutorial5];
+
+const StyledButton = styled(Button)`
+ background-color: transparent;
+`;
+
+const StyledCancelButton = styled(Button)`
+ position: absolute;
+ background-color: transparent;
+ top: 0px;
+ right: 0px;
+`;
+
+export const TutorialImage = ({
+ isTutorial,
+ setIsOver,
+}: {
+ isTutorial: boolean;
+ setIsOver: React.Dispatch>;
+}): ReactElement => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+
+ const autoPlayRef = useRef<() => void>();
+
+ useEffect(() => {
+ autoPlayRef.current = nextSlide;
+ });
+
+ useEffect(() => {
+ const play = (): void => {
+ if (autoPlayRef.current !== undefined) autoPlayRef.current();
+ };
+
+ const interval = setInterval(play, 10 * 1000);
+
+ return () => {
+ clearInterval(interval);
+ };
+ }, [currentIndex]);
+
+ const prevSlide = (): void => {
+ setCurrentIndex(currentIndex === 0 ? imgSrcArray.length - 1 : currentIndex - 1);
+ };
+
+ const nextSlide = (): void => {
+ setCurrentIndex(currentIndex === imgSrcArray.length - 1 ? 0 : currentIndex + 1);
+ };
+
+ const exit = (): void => {
+ setIsOver(true);
+ };
+ return (
+
+ 
+
+ );
+};
diff --git a/client/src/container/CreateModal.tsx b/client/src/container/CreateModal.tsx
new file mode 100644
index 0000000..8ed2d2d
--- /dev/null
+++ b/client/src/container/CreateModal.tsx
@@ -0,0 +1,43 @@
+import { memo, ReactElement, Dispatch, SetStateAction } from 'react';
+
+import { MODAL_INPUT_LIST, MODAL_LABEL_ID } from '@util/Constants';
+import LabeledInput from '@components/todos/LabeledInput';
+
+import Modal from '@components/Modal';
+import styled from 'styled-components';
+import useModalComplete from '@hooks/useModalComplete';
+
+const InputWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+`;
+
+const MODAL_CREATE = 'create';
+
+const CreateModal = ({ setHasCreateModal }: { setHasCreateModal: Dispatch> }): ReactElement => {
+ const [setComplete] = useModalComplete(MODAL_CREATE);
+
+ return (
+
+
+ {MODAL_INPUT_LIST.map((item) => {
+ const { type, label, maxLength, placeHolder } = item;
+ return (
+
+
+ );
+};
+
+export default memo(CreateModal);
diff --git a/client/src/container/EditModal.tsx b/client/src/container/EditModal.tsx
new file mode 100644
index 0000000..e5a9378
--- /dev/null
+++ b/client/src/container/EditModal.tsx
@@ -0,0 +1,90 @@
+import { memo, ReactElement, useRef, Dispatch, SetStateAction, useCallback, useEffect } from 'react';
+import { useAtom } from 'jotai';
+
+import { MODAL_INPUT_LIST, MODAL_LABEL_ID } from '@util/Constants';
+import { todoList } from '@util/GlobalState';
+import { getDateTimeInputFormatString, getModalValues } from '@util/Common';
+
+import LabeledInput from '@components/todos/LabeledInput';
+
+import Modal from '@components/Modal';
+import styled from 'styled-components';
+import useModalComplete from '@hooks/useModalComplete';
+
+interface WrapperProps {
+ ref: any;
+}
+
+const InputWrapper = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+`;
+
+const MODAL_EDIT = 'update';
+
+const EditModal = ({
+ setHasEditModal,
+ editingTodoId,
+}: {
+ setHasEditModal: Dispatch>;
+ editingTodoId: string;
+}): ReactElement => {
+ const [todoListAtom] = useAtom(todoList);
+ const editModalWrapper = useRef();
+ const [setComplete] = useModalComplete(MODAL_EDIT);
+
+ const setInitData = useCallback((): void => {
+ todoListAtom
+ .getTodoById(editingTodoId)
+ .then((target) => {
+ if (editModalWrapper.current === undefined || target === undefined) {
+ return;
+ }
+ getModalValues(editModalWrapper.current).forEach((elem) => {
+ if (elem.id === 'until') {
+ return (elem.value = getDateTimeInputFormatString(new Date(target.until)));
+ }
+ if (elem.dataset.label === 'search-input') return;
+
+ elem.value = target[elem.id as keyof typeof target];
+ });
+ })
+ .catch((err) => {
+ throw new Error(err);
+ });
+ }, [editingTodoId]);
+
+ useEffect(() => {
+ setInitData();
+ }, []);
+
+ return (
+
+
+ {MODAL_INPUT_LIST.map((item) => {
+ const { type, label, maxLength, placeHolder } = item;
+ return (
+
+
+ );
+};
+
+export default memo(EditModal);
diff --git a/client/src/container/Header.tsx b/client/src/container/Header.tsx
index 883b16c..60f370a 100644
--- a/client/src/container/Header.tsx
+++ b/client/src/container/Header.tsx
@@ -5,7 +5,12 @@ import LongLogo from '@images/LongLogo.svg';
import { Link } from 'react-router-dom';
import Image from '@components/Image';
-import LoginButton from '@components/LoginButton';
+import Button from '@components/Button';
+import Text from '@components/Text';
+import { PRIMARY_COLORS } from '@util/Constants';
+
+import { isTutorialAtom, changeIndexedDBtoMemoryAtom, changeMemorytoIndexedDBAtom } from '@util/GlobalState';
+import { useAtom } from 'jotai';
const Wrapper = styled.div`
display: flex;
@@ -15,16 +20,54 @@ const Wrapper = styled.div`
height: 10vh;
padding: 25px;
font-family: 'Roboto';
- z-index: -10;
`;
const Header = (): ReactElement => {
+ const [isTutorial, setIsTutorial] = useAtom(isTutorialAtom);
+ const [, changeIndexedDBtoMemory] = useAtom(changeIndexedDBtoMemoryAtom);
+ const [, changeMemorytoIndexedDB] = useAtom(changeMemorytoIndexedDBAtom);
+ const startTutorial = (): void => {
+ setIsTutorial(true);
+ changeIndexedDBtoMemory();
+ };
+ const endTutorial = (): void => {
+ setIsTutorial(false);
+ changeMemorytoIndexedDB();
+ };
return (
);
};
diff --git a/client/src/container/Menubar.tsx b/client/src/container/Menubar.tsx
index 795b618..db39d97 100644
--- a/client/src/container/Menubar.tsx
+++ b/client/src/container/Menubar.tsx
@@ -1,12 +1,20 @@
-import { ReactElement } from 'react';
+import { ReactElement, memo } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import Home from '@images/Home.svg';
import Table from '@images/Table.svg';
+
import Image from '@components/Image';
+import Diagram from '@images/Diagram.svg';
+import { isTutorialAtom } from '@util/GlobalState';
+import { useAtomValue } from 'jotai';
const Wrapper = styled.div`
+ position: relative;
+ width: max-content;
+ display: flex;
+ flex-direction: column;
height: 100vh;
background: #fcfcfc;
box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.25);
@@ -14,16 +22,21 @@ const Wrapper = styled.div`
`;
const Menubar = (): ReactElement => {
+ const isTutorial = useAtomValue(isTutorialAtom);
+ const prefix: string = isTutorial ? '/tutorials' : '';
return (
-
-
);
};
-export default Menubar;
+export default memo(Menubar);
diff --git a/client/src/container/TodoController.tsx b/client/src/container/TodoController.tsx
new file mode 100644
index 0000000..ba58fa6
--- /dev/null
+++ b/client/src/container/TodoController.tsx
@@ -0,0 +1,101 @@
+import { ReactElement, useEffect } from 'react';
+import styled from 'styled-components';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useLocation } from 'react-router-dom';
+
+import Text from '@components/Text';
+import ElapsedTimeText from '@components/ElapsedTimeText';
+import TodoInteractionButton from '@components/main/TodoInteractionButton';
+
+import { asyncActiveTodo, isMainPageAtom, needTodoControllerAtom, postponeClicked } from '@util/GlobalState';
+import { getTodoUntilText } from '@util/Common';
+import { PRIMARY_COLORS } from '@util/Constants';
+import PostponeBox from '@components/main/PostponeBox';
+
+const { white, darkGray, offWhite } = PRIMARY_COLORS;
+
+interface PropsType {
+ active: boolean;
+}
+const Wrapper = styled.div`
+ display: flex;
+ height: max-content;
+ width: calc(100vw);
+ padding-inline: 15px;
+ padding-block: 0px;
+ border-radius: 10px 10px 0 0;
+ align-items: center;
+ color: ${white};
+ background-color: ${darkGray};
+ justify-content: space-between;
+ position: fixed;
+ bottom: 0;
+ transform: ${(props) => (props.active ? '0vh' : 'translateY(100%)')};
+ transition-property: transform;
+ transition-duration: 1s;
+
+ & > p {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ min-width: 10px;
+ }
+`;
+
+const ButtonWrapper = styled.div`
+ display: flex;
+ gap: 5px;
+`;
+
+const TextWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ white-space: nowrap;
+ width: max-content;
+`;
+
+const imageButtonStyle = {
+ fill: offWhite,
+ stroke: offWhite,
+ width: '45px',
+};
+
+const TodoController = (): ReactElement => {
+ const location = useLocation();
+ const activeTodo = useAtomValue(asyncActiveTodo);
+ const [needTodoController, setNeedTodoController] = useAtom(needTodoControllerAtom);
+ const setIsMainPage = useSetAtom(isMainPageAtom);
+ const isPostpone = useAtomValue(postponeClicked);
+
+ useEffect(() => {
+ setIsMainPage();
+ setNeedTodoController();
+ }, [location]);
+
+ useEffect(() => {
+ setNeedTodoController();
+ }, [activeTodo]);
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default TodoController;
diff --git a/client/src/container/diagram/Diagram.tsx b/client/src/container/diagram/Diagram.tsx
new file mode 100644
index 0000000..cb19f86
--- /dev/null
+++ b/client/src/container/diagram/Diagram.tsx
@@ -0,0 +1,302 @@
+import { ReactElement, useEffect, useState, useRef, useCallback, memo, useMemo } from 'react';
+import { useAtom } from 'jotai';
+import { todoList } from '@util/GlobalState';
+import styled from 'styled-components';
+import { PRIMARY_COLORS } from '@util/Constants';
+import TodoBlock from '@components/diagram/TodoBlock';
+import TodoVertex from '@components/diagram/TodoVertex';
+import TodoBlockPopUp from '@components/diagram/TodoBlockPopUp';
+import TodoVertexPopUp from '@components/diagram/TodoVertexPopUp';
+import NewTodoVertex from '@components/diagram/NewTodoVertex';
+import { toast } from 'react-toastify';
+import { useDiagramAnimation } from '@hooks/useDiagramAnimation';
+import EditModal from '@container/EditModal';
+import CreateModal from '@container/CreateModal';
+import Button from '@components/Button';
+import Image from '@components/Image';
+import Create from '@images/Create.svg';
+
+const { offWhite, green } = PRIMARY_COLORS;
+
+const Wrapper = styled.div`
+ position: relative;
+ width: 0;
+ height: 0;
+ background-color: ${offWhite};
+ transform: translate(var(--offsetX), var(--offsetY));
+`;
+
+const Detector = memo(styled.div`
+ position: absolute;
+ background-color: ${offWhite};
+ width: 100%;
+ height: 100%;
+ background-color: transparent;
+`);
+
+const HorizontalBaseLine = memo(styled.div`
+ position: absolute;
+ height: 0;
+ width: 100%;
+ top: 40px;
+ transform: translateY(var(--offsetY));
+ border-top: 4px dashed ${green};
+ opacity: 0.5;
+`);
+
+const VerticalBaseLine = memo(styled.div`
+ position: absolute;
+ height: 100%;
+ width: 0;
+ left: 110px;
+ transform: translateX(var(--offsetX));
+ border-left: 4px dashed ${green};
+ opacity: 0.5;
+`);
+
+const StyledButton = styled.div`
+ position: fixed;
+ bottom: 10vh;
+ right: 5%;
+ width: 80px;
+ height: 80px;
+`;
+
+interface ClickData {
+ type: 'Todo' | 'Vertex' | 'None';
+ x: number;
+ y: number;
+ id: string;
+ targetPos: { x: number; y: number };
+}
+
+const defaultClickData: ClickData = {
+ type: 'None',
+ x: 0,
+ y: 0,
+ id: '',
+ targetPos: { x: 0, y: 0 },
+};
+
+export interface NewVertexData {
+ from: string;
+ x1: number;
+ y1: number;
+ x2: number;
+ y2: number;
+}
+
+const defaultNewVertexData: NewVertexData = {
+ from: '',
+ x1: NaN,
+ y1: NaN,
+ x2: NaN,
+ y2: NaN,
+};
+
+const TodoBlockWrapper = styled.div<{ aniState: string }>`
+ opacity: ${(props) => (props.aniState === 'idle' ? 1 : 0)};
+ transition: opacity 0.5s;
+`;
+
+const MemoTodoBlockWrapper = memo(TodoBlockWrapper);
+
+const Diagram = ({ showDone }: { showDone: boolean }): ReactElement => {
+ const [todoListAtom, setTodoListAtom] = useAtom(todoList);
+ const { todoBlockData, vertexData } = useDiagramAnimation(todoListAtom, showDone);
+ const [offset, setOffset] = useState<{ x: number; y: number }>({ x: 100, y: 100 });
+ const [clickData, setClickData] = useState(defaultClickData);
+ const [newVertexData, setNewVertexData] = useState(defaultNewVertexData);
+ const [isWheelDown, setIsWheelDown] = useState(false);
+ const [editTargetId, setEditTargetId] = useState('');
+ const [hasEditModal, setHasEditModal] = useState(false);
+ const [hasCreateModal, setHasCreateModal] = useState(false);
+ const domRef = useRef(null);
+
+ useEffect(() => {
+ if (clickData.type === 'Todo' && newVertexData.from !== '') {
+ const from = newVertexData.from;
+ const to = clickData.id;
+ let fromTitle = '';
+ let toTitle = '';
+ todoListAtom
+ .getTodoById(from)
+ .then(async (prevTodo) => {
+ if (prevTodo === undefined) throw new Error('ERROR: 선후관계 제거 중 찾는 Todo가 존재하지 않습니다.');
+ const next = new Set(prevTodo.next);
+ if (next.has(to)) throw new Error('ERROR: 이미 동일한 선후관계가 존재합니다.');
+ next.add(to);
+ fromTitle = prevTodo.title;
+ toTitle = (await todoListAtom.getTodoById(to))?.title as string;
+ return await todoListAtom.edit(from, { next: [...next] });
+ })
+ .then((newTodoList) => {
+ setTodoListAtom(newTodoList);
+ toast.success(`Todo 선후관계가 추가되었습니다. ${fromTitle} → ${toTitle}`);
+ })
+ .then(() => {
+ setNewVertexData(defaultNewVertexData);
+ setClickData(defaultClickData);
+ })
+ .catch((err) => {
+ toast.error(err.message);
+ setNewVertexData(defaultNewVertexData);
+ setClickData(defaultClickData);
+ });
+ }
+ }, [clickData]);
+
+ const diagramStyle = useMemo(
+ () => ({
+ '--offsetX': `${offset.x}px`,
+ '--offsetY': `${offset.y}px`,
+ }),
+ [offset],
+ );
+
+ const horizontalLineStyle = useMemo(
+ () => ({
+ '--offsetY': `${offset.y}px`,
+ }),
+ [offset],
+ );
+
+ const verticalLineStyle = useMemo(
+ () => ({
+ '--offsetX': `${offset.x}px`,
+ }),
+ [offset],
+ );
+
+ const onWheelDown = (event: React.MouseEvent): void => {
+ if (event.button === 1) {
+ setIsWheelDown(true);
+ }
+ };
+
+ const onWheelUp = (event: React.MouseEvent): void => {
+ setIsWheelDown(false);
+ };
+
+ const onWheelLeave = (event: React.MouseEvent): void => {
+ setIsWheelDown(false);
+ };
+
+ const onMouseGrabMove = (event: React.MouseEvent): void => {
+ if (isWheelDown) {
+ setOffset((prev) => ({ x: prev.x + event.movementX, y: prev.y + event.movementY }));
+ }
+ };
+
+ const onMouseNewVertexMove = (event: React.MouseEvent): void => {
+ if (newVertexData.from !== undefined) {
+ setNewVertexData((prev) => ({
+ ...prev,
+ x2: event.clientX - (domRef.current?.getBoundingClientRect().left as number),
+ y2: event.clientY - (domRef.current?.getBoundingClientRect().top as number),
+ }));
+ }
+ };
+
+ const onMouseMove = (event: React.MouseEvent): void => {
+ onMouseGrabMove(event);
+ onMouseNewVertexMove(event);
+ };
+
+ const getOnClick = useCallback(
+ (type: 'Todo' | 'Vertex' | 'None', id: string, targetPos: { x: number; y: number }) => {
+ return (event: React.MouseEvent): void => {
+ setClickData({
+ type,
+ id,
+ x: event.clientX - (domRef.current?.getBoundingClientRect().left as number),
+ y: event.clientY - (domRef.current?.getBoundingClientRect().top as number),
+ targetPos,
+ });
+ event.stopPropagation();
+ };
+ },
+ [],
+ );
+
+ const getOnNewVertexClick = useCallback(({ from, x1, y1 }: NewVertexData) => {
+ return (event: React.MouseEvent): void => {
+ setNewVertexData({
+ from,
+ x1,
+ y1,
+ x2: event.clientX - (domRef.current?.getBoundingClientRect().left as number),
+ y2: event.clientY - (domRef.current?.getBoundingClientRect().top as number),
+ });
+ getOnClick('None', '', { x: NaN, y: NaN })(event);
+ event.stopPropagation();
+ };
+ }, []);
+
+ const onClick = (event: React.MouseEvent): void => {
+ getOnClick('None', '', { x: NaN, y: NaN })(event);
+ getOnNewVertexClick(defaultNewVertexData)(event);
+ };
+
+ const onWheel = (event: React.WheelEvent): void => {
+ setOffset((prev) => ({ x: prev.x - event.deltaX, y: prev.y - event.deltaY }));
+ };
+
+ return (
+ <>
+
+ }
+ onClick={() => setHasCreateModal(true)}
+ />
+
+ {hasEditModal &&
+
+
+
+
+ );
+};
+
+export default DiagramFrame;
diff --git a/client/src/container/diagram/DiagramHeader.tsx b/client/src/container/diagram/DiagramHeader.tsx
new file mode 100644
index 0000000..ecd054b
--- /dev/null
+++ b/client/src/container/diagram/DiagramHeader.tsx
@@ -0,0 +1,37 @@
+import { ReactElement } from 'react';
+import styled from 'styled-components';
+import Image from '@components/Image';
+import Text from '@components/Text';
+import Planning from '@images/Planning.svg';
+
+const Wrapper = styled.div`
+ position: relative;
+ width: 100%;
+ height: 65px;
+ z-index: 1;
+`;
+
+const ImageWrapper = styled.div`
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+const HeroImage = styled(Image)`
+ position: absolute;
+ transform: translateY(29px);
+`;
+
+const DiagramHeader = (): ReactElement => {
+ return (
+
+
+
+
+ );
+};
+
+export default DiagramHeader;
diff --git a/client/src/container/main/TodoContents.tsx b/client/src/container/main/TodoContents.tsx
index 769b525..a6763b3 100644
--- a/client/src/container/main/TodoContents.tsx
+++ b/client/src/container/main/TodoContents.tsx
@@ -1,9 +1,10 @@
-import { ReactElement, useState } from 'react';
+import { ReactElement, useState, memo } from 'react';
import styled from 'styled-components';
import Image from '@components/Image';
import DropDown from '@images/DropDown.svg';
-import { PlainTodo } from '@todo/todo.type';
+import { useAtom } from 'jotai';
+import { asyncActiveTodo } from '@util/GlobalState';
const ContentWrapper = styled.div`
width: 850px;
@@ -37,8 +38,10 @@ const ToggleWrapper = styled.div`
}
`;
-const TodoContents = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement => {
+const TodoContents = (): ReactElement => {
const [isTodoContentToggled, setIsTodoContentToggled] = useState(true);
+ const [activeTodo] = useAtom(asyncActiveTodo);
+
const checkHandler = (): void => {
setIsTodoContentToggled(!isTodoContentToggled);
};
@@ -48,7 +51,7 @@ const TodoContents = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement =
@@ -56,4 +59,4 @@ const TodoContents = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement =
);
};
-export default TodoContents;
+export default memo(TodoContents);
diff --git a/client/src/container/main/TodoStatus.tsx b/client/src/container/main/TodoStatus.tsx
index 9ac4a0e..1120d5b 100644
--- a/client/src/container/main/TodoStatus.tsx
+++ b/client/src/container/main/TodoStatus.tsx
@@ -1,13 +1,13 @@
-import { ReactElement } from 'react';
+import { ReactElement, memo } from 'react';
import Text from '@components/Text';
import Image from '@components/Image';
-import { PlainTodo } from '@todo/todo.type';
-import { isOnProgress } from '@util/GlobalState';
+import { isOnProgress, asyncActiveTodo } from '@util/GlobalState';
import { useAtom } from 'jotai';
import Working from '@images/Working.svg';
-import Relaxing from '@images/Relaxing.svg';
+import Relaxing from '@images/Relaxing';
+
import styled from 'styled-components';
import { todoStatusText } from '@util/Common';
@@ -32,18 +32,22 @@ const BlankBox = styled.div`
height: 21px;
`;
-const TodoStatus = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement => {
+const transform = 'translateY(54px)';
+
+const TodoStatus = (): ReactElement => {
const [userState] = useAtom(isOnProgress);
+ const [activeTodo] = useAtom(asyncActiveTodo);
+
return (
<>
@@ -51,4 +55,4 @@ const TodoStatus = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement => ); }; -export default TodoStatus; +export default memo(TodoStatus); diff --git a/client/src/container/main/TodoTimeInteraction.tsx b/client/src/container/main/TodoTimeInteraction.tsx index 4a0e396..4e4b504 100644 --- a/client/src/container/main/TodoTimeInteraction.tsx +++ b/client/src/container/main/TodoTimeInteraction.tsx @@ -6,13 +6,7 @@ import PostponeBox from '@components/main/PostponeBox'; import TodoInteractionButton from '@components/main/TodoInteractionButton'; import TodoTimeText from '@components/main/TodoTimeText'; -import { PlainTodo } from '@todo/todo.type'; - -import { isOnProgress, postponeClicked } from '@util/GlobalState'; - -import useTodoList from '../../hooks/useTodoList'; -import useElapsedTime from '../../hooks/useElapsedTime'; -import useButtonConfig from '../../hooks/useButtonConfig'; +import { postponeClicked } from '@util/GlobalState'; const Wrapper = styled.div` width: 850px; @@ -22,26 +16,20 @@ const Wrapper = styled.div` position: relative; `; -const TodoTimeInteraction = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement => { +const ButtonWrapper = styled.div` + display: flex; +`; + +const TodoTimeInteraction = (): ReactElement => { const [isPostpone] = useAtom(postponeClicked); - const [userState] = useAtom(isOnProgress); - const [setPostpone, , postponeOptions] = useTodoList(); - const [, , , time, setTime] = useElapsedTime(); - const [buttonConfig, handleOnToggle] = useButtonConfig(userState); return (
-
+
+ {isPostpone &&
);
};
diff --git a/client/src/container/main/TodoTitle.tsx b/client/src/container/main/TodoTitle.tsx
index 804595f..20945ea 100644
--- a/client/src/container/main/TodoTitle.tsx
+++ b/client/src/container/main/TodoTitle.tsx
@@ -1,20 +1,23 @@
-import { ReactElement } from 'react';
+import { ReactElement, memo } from 'react';
import styled from 'styled-components';
+import { useAtom } from 'jotai';
import Text from '@components/Text';
-import { PlainTodo } from '@todo/todo.type';
+import { asyncActiveTodo } from '@util/GlobalState';
const Wrapper = styled.div`
width: 850px;
text-align: center;
`;
-const TodoTitle = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement => {
+const TodoTitle = (): ReactElement => {
+ const [activeTodo] = useAtom(asyncActiveTodo);
+
return (
-
);
};
-export default TodoTitle;
+export default memo(TodoTitle);
diff --git a/client/src/container/todos/Table.tsx b/client/src/container/todos/Table.tsx
index d3ff034..d5a2cb8 100644
--- a/client/src/container/todos/Table.tsx
+++ b/client/src/container/todos/Table.tsx
@@ -1,81 +1,58 @@
-import { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState, memo } from 'react';
import styled from 'styled-components';
-import TableHeader from '@components/todos/TableHeader';
-import TableRow from '@components/todos/TableRow';
import { useAtom } from 'jotai';
-import { PlainTodo } from '@todo/todo.type';
-import { todoList, displayDetailAtom } from '@util/GlobalState.js';
import { toast } from 'react-toastify';
-const Wrapper = styled.div`
- width: 85%;
-`;
+import { PlainTodo } from '@todo/todo.type';
+import { todoList } from '@util/GlobalState.js';
+import { Todo } from '@todo/todo';
-const BlankTableWrapper = styled.div`
- text-align: center;
- margin: 10%;
-`;
+import TableHeader from '@components/todos/TableHeader';
+import TableRow from '@components/todos/TableRow';
+import BlankTableInform from '@components/todos/BlankTableInform';
+import { FilterType } from '@util/todos.util';
-const GridWrapper = styled.div`
- display: grid;
- align-items: center;
- grid-template-columns: 1fr 3.5fr 1fr 2fr 1fr 2fr 2fr 1fr;
- border-bottom: 2px solid #e2e2e2;
- text-align: center;
- p {
- margin: 10px 0;
- }
+const Wrapper = styled.div`
+ width: 85%;
+ height: 90%;
+ overflow-y: auto;
+ position: relative;
`;
-const GridRowWrapper = styled(GridWrapper)`
- div:nth-child(10) {
- grid-column: 2/9;
- }
-`;
-const RowWrapper = styled.div`
- ${GridWrapper}:hover {
- background-color: #e2e2e2;
- }
-`;
+const getFilterCallback = (filterSet: Set): ((todo: Todo) => boolean) => {
+ const filterArr = [...filterSet];
+ return (todo: Todo): boolean => filterArr.some((el) => todo.state === el);
+};
const Table = (): ReactElement => {
const [todoListAtom] = useAtom(todoList);
const [todos, setTodos] = useState([]);
- const [displayDetail, setDisplayDetail] = useAtom(displayDetailAtom);
+ const [filter, setFilter] = useState>(new Set(['READY']));
+ const [sort, setSort] = useState>(new Map());
useEffect(() => {
todoListAtom
- .getSortedRTL()
+ .getSortedListWithFilter(
+ getFilterCallback(filter),
+ [...sort]
+ .map((el) => ({ type: el[0], direction: el[1] }))
+ .filter((el) => el.direction !== 'NONE')
+ .reverse(),
+ )
.then((sortedTodoList: PlainTodo[]) => {
setTodos(() => {
return [...sortedTodoList];
});
})
.catch((err) => toast.error(err));
- }, [todoListAtom]);
+ }, [todoListAtom, filter, sort]);
- return todos.length > 0 ? (
+ return (
-
-
-
- {todos.map((todo: PlainTodo) => (
- (displayDetail === todo.id ? setDisplayDetail('') : setDisplayDetail(todo.id))}
- key={todo.id}
- >
-
- ))}
-
+
- ) : (
-
-
);
};
-export default Table;
+export default memo(Table);
diff --git a/client/src/container/todos/TableModal.tsx b/client/src/container/todos/TableModal.tsx
deleted file mode 100644
index 22d43ba..0000000
--- a/client/src/container/todos/TableModal.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import { memo, ReactElement, useEffect, useRef, useState, useCallback } from 'react';
-import styled from 'styled-components';
-import { useAtom } from 'jotai';
-
-import { TABLE_MODALS, PRIMARY_COLORS, MODAL_INPUT_LIST, MODAL_LABEL_ID } from '@util/Constants';
-import { modalTypeAtom, todoList, editingTodoIdAtom } from '@util/GlobalState';
-import { getModalValues } from '@util/Common';
-
-import LabeledInput from '@components/todos/LabeledInput';
-import Button from '@components/Button';
-import Text from '@components/Text';
-import { toast } from 'react-toastify';
-import { TodoList } from '@core/todo/todoList';
-import { InputTodo } from '@todo/todo.type';
-
-const { create, update, none } = TABLE_MODALS;
-const { offWhite, red, blue, darkGray, lightGray } = PRIMARY_COLORS;
-
-interface WrapperProps {
- ref: any;
-}
-
-const Wrapper = styled.div`
- width: 50vw;
- left: 21vw;
- position: absolute;
- background-color: ${offWhite};
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- border-radius: 20px;
- z-index: 100;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding: 30px;
- gap: 10px;
-
- input {
- width: 100%;
- color: ${darkGray};
- front-family: 'SanSerif'
- font-size: 15px;
- padding: 5px;
- border: 1px solid ${lightGray};
- border-radius: 5px;
- outline: none;
- }
-`;
-
-const ButtonWrapper = styled.div`
- width: 100%;
- display: flex;
- gap: 15px;
- padding-top: 15px;
- text-align: right;
- justify-content: flex-end;
-`;
-
-const MODAL_COMPLETE_ACTIONS = {
- create: async (todoList: TodoList, newData: InputTodo) => {
- return await todoList.add(newData);
- },
- update: async (todoList: TodoList, newData: InputTodo, id: string) => {
- return await todoList.edit(id, newData);
- },
-};
-
-const complete = (setComplete: Function): void => {
- setComplete()
- .then(() => {})
- .catch(() => {});
-};
-
-const TableModal = (): ReactElement => {
- const [modalType, setModalType] = useAtom(modalTypeAtom);
- const [todoListAtom, setTodoListAtom] = useAtom(todoList);
- const [modalHeader, setModalHeader] = useState('');
- const [editingTodoId] = useAtom(editingTodoIdAtom);
-
- const modalWrapper = useRef();
-
- const setInitData = useCallback((): void => {
- todoListAtom
- .getTodoById(editingTodoId)
- .then((target) => {
- if (modalWrapper.current === undefined || target === undefined) {
- return;
- }
-
- getModalValues(modalWrapper.current).forEach((elem) => {
- if (elem.id === 'until') {
- return (elem.value = new Date(target.until).toJSON().split('T')[0]);
- }
- elem.value = target[elem.id as keyof typeof target];
- });
- })
- .catch((err) => {
- throw new Error(err);
- });
- }, [editingTodoId]);
-
- useEffect(() => {
- if (modalType === create) {
- return setModalHeader('할 일 추가하기');
- }
- if (modalType === update) {
- setInitData();
- return setModalHeader('할 일 수정하기');
- }
- setModalHeader(none);
- }, [modalType]);
-
- const setComplete = async (): Promise => {
- if (modalWrapper.current === undefined) {
- return;
- }
- try {
- let newData = {};
-
- getModalValues(modalWrapper.current).forEach((item) => {
- const { id, value } = item;
- if (id === 'title' && value === '') {
- throw new Error('제목은 필수값입니다!');
- }
- if (id === 'prev' || id === 'next') {
- return (newData = {
- ...newData,
- [id]: value
- .trim()
- .split(',')
- .filter((x: string) => x !== ''),
- });
- }
- newData = { ...newData, [id]: value };
- });
-
- const data = await MODAL_COMPLETE_ACTIONS[modalType as keyof typeof MODAL_COMPLETE_ACTIONS](
- todoListAtom,
- newData,
- editingTodoId,
- );
- setTodoListAtom(data);
- setModalType(none);
- toast.success('완료되었습니다! ☘️');
- } catch (err: any) {
- toast.error(err.message);
- }
- };
-
- const setCancel = (): void => {
- setModalType(none);
- };
-
- return (
-
-
- } onClick={setCancel} />
- }
- onClick={() => complete(setComplete)}
- />
-
-
- );
-};
-
-export default memo(TableModal);
diff --git a/client/src/container/todos/TodosHeader.tsx b/client/src/container/todos/TodosHeader.tsx
index 6313677..114d0b8 100644
--- a/client/src/container/todos/TodosHeader.tsx
+++ b/client/src/container/todos/TodosHeader.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, memo } from 'react';
import Waiting from '@images/Waiting.svg';
import Image from '@components/Image';
import Text from '@components/Text';
@@ -17,4 +17,4 @@ const TodosHeader = (): ReactElement => {
);
};
-export default TodosHeader;
+export default memo(TodosHeader);
diff --git a/client/src/core/todo/todoList.ts b/client/src/core/todo/todoList.ts
index dfa934e..3c367f6 100644
--- a/client/src/core/todo/todoList.ts
+++ b/client/src/core/todo/todoList.ts
@@ -1,10 +1,11 @@
import { PlainTodo, InputTodo } from '@todo/todo.type';
import { Todo } from '@todo/todo';
import { isEqualDate, DAY } from '@todo/todo.util';
-import { compareFunctions } from '@todo/todoList.util';
+import { generateCompare, defaultCompare, getDefaultCompareForSpecificDate } from '@todo/todoList.util';
import { ITodoListDataBase } from '@repository/repository.interface';
import { MemoryDB } from '@repository/repository.memoryDB';
import { IndexedDBFactory } from '@repository/repository.indexedDB';
+import { SortCommand } from '@todo/todoList.type';
export const createTodoList = async (dbType: 'MemoryDB' | 'IndexedDB', todos?: InputTodo[]): Promise => {
if (dbType === 'MemoryDB') {
@@ -35,7 +36,7 @@ export class TodoList {
}
private getActiveTodoAsInstance(): Todo {
- return this.todoList.filter((el) => el.state === 'READY').sort(Todo.compare())[0];
+ return this.todoList.filter((el) => el.state === 'READY').sort(defaultCompare)[0];
}
private getActiveTodoId(): string {
@@ -47,10 +48,7 @@ export class TodoList {
}
async getSortedRTL(today?: Date): Promise {
- return this.todoList
- .filter((el) => el.state === 'READY')
- .sort(Todo.compare(today))
- .map((el) => el.toPlain());
+ return await this.getSortedList('READY', [], today);
}
async postponeTemporally(): Promise {
@@ -163,6 +161,7 @@ export class TodoList {
async add(todo: InputTodo): Promise {
const newTodo = new Todo(todo);
const changedTodoSet = new Set();
+ this.checkCircularReference(newTodo.toPlain());
[this.getPrev(newTodo), this.getNext(newTodo)].flat().forEach((el) => changedTodoSet.add(el));
@@ -179,7 +178,8 @@ export class TodoList {
async edit(id: string, todo: InputTodo): Promise {
const oldTodo = this.todoList.find((el) => el.id === id);
if (oldTodo === undefined) throw new Error('ERROR: 수정하려는 ID의 Todo가 존재하지 않습니다.');
- const newTodo = new Todo({ ...todo, id: oldTodo.id });
+ const newTodo = new Todo({ ...oldTodo.toPlain(), ...todo, id: oldTodo.id });
+ this.checkCircularReference(newTodo.toPlain());
const changedTodoSet = new Set();
[this.getPrev(oldTodo), this.getPrev(newTodo), this.getNext(oldTodo), this.getNext(newTodo), newTodo]
@@ -215,22 +215,78 @@ export class TodoList {
return new TodoList(this.db, newTodoList);
}
- async getSortedList(type: 'READY' | 'WAIT' | 'DONE', compareArr: string[]): Promise {
- const generateCompare = (compareArr: string[]) => {
- return (a: Todo, b: Todo): number => {
- let result = 0;
- for (let i = 0; i < compareArr.length; i++) {
- result = compareFunctions[compareArr[i] as keyof typeof compareFunctions](a, b);
- if (result !== 0) break;
- }
- return result;
- };
- };
- const newTodoList = this.todoList.filter((el) => el.state === type).sort(generateCompare(compareArr));
+ async getSortedListWithFilter(
+ filter: (todo: Todo) => boolean,
+ compareArr: SortCommand[],
+ today?: Date,
+ ): Promise {
+ const filteredCompareArr = compareArr.filter((el) => el.direction !== 'NONE');
+ const combinedCompare =
+ filteredCompareArr.length === 0
+ ? today === undefined
+ ? defaultCompare
+ : getDefaultCompareForSpecificDate(today)
+ : generateCompare(filteredCompareArr, today);
+
+ const newTodoList = this.todoList.filter((el) => filter(el)).sort(combinedCompare);
return newTodoList.map((el) => el.toPlain());
}
+ async getSortedList(type: 'READY' | 'WAIT' | 'DONE', compareArr: SortCommand[], today?: Date): Promise {
+ return await this.getSortedListWithFilter((todo) => type === todo.state, compareArr, today);
+ }
+
async getTodoById(id: string): Promise {
return this.todoList.find((el) => el.id === id)?.toPlain();
}
+
+ async getTodoBySearchKeyword(keyword: string): Promise {
+ const regExp = new RegExp(`${keyword}`, 'g');
+
+ const searchTodoList = this.todoList.filter((el) => el.title.match(regExp));
+ return searchTodoList.map((el) => el.toPlain());
+ }
+
+ async getTodoByIdList(idList: string[]): Promise {
+ const newTodoList = idList.reduce((acc, id) => {
+ const todo = this.todoList.find((el) => el.id === id)?.toPlain();
+ if (todo !== undefined) acc.push(todo);
+ return acc;
+ }, []);
+ return newTodoList;
+ }
+
+ clone(): TodoList {
+ return new TodoList(
+ this.db,
+ this.todoList.map((el) => el.toPlain()),
+ );
+ }
+
+ private checkCircularReference(todo: PlainTodo): boolean {
+ const { prev, next, id } = todo;
+ const dfsForward = (targetId: string): boolean => {
+ if (targetId === id || prev.includes(targetId)) return false;
+ const target = this.todoList.find((el) => el.id === targetId);
+ if (target === undefined) throw new Error('순환 참조 판별 중, id로 확인할 수 없는 Todo가 있습니다.');
+ return [...target.next].every(dfsForward);
+ };
+ const dfsBackward = (targetId: string): boolean => {
+ if (targetId === id || next.includes(targetId)) return false;
+ const target = this.todoList.find((el) => el.id === targetId);
+ if (target === undefined) throw new Error('순환 참조 판별 중, id로 확인할 수 없는 Todo가 있습니다.');
+ return [...target.prev].every(dfsBackward);
+ };
+ const result = next
+ .map((el) => ({ id: el, check: dfsForward(el) }))
+ .concat(prev.map((el) => ({ id: el, check: dfsBackward(el) })));
+ const errorArr = [
+ ...new Set(
+ result.filter((el) => !el.check).map((el) => this.todoList.find((target) => target.id === el.id)?.title),
+ ),
+ ];
+ if (errorArr.length !== 0)
+ throw new Error(`순환 참조를 유발하는 선후 관계가 있습니다. 원인: [${errorArr.join(', ')}]`);
+ return errorArr.length === 0;
+ }
}
diff --git a/client/src/core/todo/todoList.type.ts b/client/src/core/todo/todoList.type.ts
new file mode 100644
index 0000000..c57d453
--- /dev/null
+++ b/client/src/core/todo/todoList.type.ts
@@ -0,0 +1,12 @@
+import { Todo } from '@todo/todo';
+
+export interface SortCommand {
+ type: string;
+ direction: 'ASCEND' | 'DESCEND' | 'NONE';
+}
+
+export type CompareFunc = (a: Todo, b: Todo, today?: Date) => number;
+
+export interface CompareFuncObj {
+ [id: string]: CompareFunc;
+}
diff --git a/client/src/core/todo/todoList.util.ts b/client/src/core/todo/todoList.util.ts
index ea00635..85ff4d5 100644
--- a/client/src/core/todo/todoList.util.ts
+++ b/client/src/core/todo/todoList.util.ts
@@ -1,29 +1,51 @@
import { Todo } from '@todo/todo';
-import { isEqualDate } from '@todo/todo.util';
+import { onlyDate } from '@todo/todo.util';
+import { CompareFunc, CompareFuncObj, SortCommand } from '@todo/todoList.type';
-export const compareFunctions = {
- ascendImminence: (a: Todo, b: Todo): number => {
- const newToday = new Date();
- return -Number(isEqualDate(newToday, a.until)) + Number(isEqualDate(newToday, b.until));
+const compareFunctions: CompareFuncObj = {
+ imminence: (a: Todo, b: Todo, today?: Date): number => {
+ const newToday = today ?? onlyDate(new Date());
+ return (
+ -Math.sign(newToday.getTime() - onlyDate(a.until).getTime()) +
+ Math.sign(newToday.getTime() - onlyDate(b.until).getTime())
+ );
},
- descendImminence: (a: Todo, b: Todo): number => {
- const newToday = new Date();
- return Number(isEqualDate(newToday, a.until)) - Number(isEqualDate(newToday, b.until));
- },
- ascendDeadline: (a: Todo, b: Todo): number => a.until.getTime() - b.until.getTime(),
- descendDeadline: (a: Todo, b: Todo): number => -a.until.getTime() + b.until.getTime(),
- ascendImportance: (a: Todo, b: Todo): number => -b.importance + a.importance,
- descendImportance: (a: Todo, b: Todo): number => b.importance - a.importance,
- ascendLastPostponed: (a: Todo, b: Todo): number => a.lastPostponed.getTime() - b.lastPostponed.getTime(),
- descendLastPostponed: (a: Todo, b: Todo): number => -a.lastPostponed.getTime() + b.lastPostponed.getTime(),
- ascendTitle: (a: Todo, b: Todo): number => {
+ until: (a: Todo, b: Todo): number => a.until.getTime() - b.until.getTime(),
+ importance: (a: Todo, b: Todo): number => a.importance - b.importance,
+ lastPostponed: (a: Todo, b: Todo): number => a.lastPostponed.getTime() - b.lastPostponed.getTime(),
+ title: (a: Todo, b: Todo): number => {
if (a.title === b.title) return 0;
if (a.title < b.title) return -1;
return 1;
},
- descendTitle: (a: Todo, b: Todo): number => {
- if (a.title === b.title) return 0;
- if (a.title < b.title) return 1;
- return -1;
- },
+};
+
+const getCompareFunction = ({ type, direction }: SortCommand, today?: Date): CompareFunc => {
+ const multiplier = direction === 'ASCEND' ? 1 : direction === 'DESCEND' ? -1 : 0;
+ return (a: Todo, b: Todo) => {
+ return multiplier * compareFunctions[type](a, b, today);
+ };
+};
+
+const defaultCompareFunctions: SortCommand[] = [
+ { type: 'imminence', direction: 'ASCEND' },
+ { type: 'importance', direction: 'DESCEND' },
+ { type: 'until', direction: 'ASCEND' },
+ { type: 'lastPostponed', direction: 'ASCEND' },
+];
+
+export const generateCompare = (compareArr: SortCommand[], today?: Date) => {
+ return (a: Todo, b: Todo): number => {
+ const compareFunctionArr = compareArr.map((el) => getCompareFunction(el, today));
+ for (const comp of compareFunctionArr) {
+ const result = comp(a, b);
+ if (result !== 0) return result;
+ }
+ return 0;
+ };
+};
+
+export const defaultCompare = generateCompare(defaultCompareFunctions);
+export const getDefaultCompareForSpecificDate = (today: Date): ((a: Todo, b: Todo) => number) => {
+ return generateCompare(defaultCompareFunctions, today);
};
diff --git a/client/src/hooks/useButtonConfig.tsx b/client/src/hooks/useButtonConfig.tsx
deleted file mode 100644
index 9ea2ed5..0000000
--- a/client/src/hooks/useButtonConfig.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useState } from 'react';
-import { useAtom } from 'jotai';
-
-import Start from '../images/Start.svg';
-import Pause from '../images/Pause.svg';
-
-import { isOnProgress } from '../util/GlobalState';
-import useElapsedTime from './useElapsedTime';
-
-interface ButtonConfig {
- src: string;
- onClick: () => void;
-}
-
-interface StartPause {
- working: ButtonConfig;
- relaxing: ButtonConfig;
-}
-
-const START_PAUSE: StartPause = {
- working: {
- src: Pause,
- onClick: () => {
- console.log('working111');
- },
- },
- relaxing: {
- src: Start,
- onClick: () => {
- console.log('relaxing');
- },
- },
-};
-
-const useButtonConfig = (userState: String): any[] => {
- const [buttonConfig, setButtonConfig] = useState(START_PAUSE[userState as keyof StartPause]);
- const [, setIsOnProgress] = useAtom(isOnProgress);
- const [, startTimer, stopTimer] = useElapsedTime();
-
- const handleOnToggle = (): void => {
- if (buttonConfig.src === Start) {
- setIsOnProgress('working');
- startTimer();
- return setButtonConfig(START_PAUSE.working);
- }
- setIsOnProgress('relaxing');
- stopTimer();
- setButtonConfig(START_PAUSE.relaxing);
- };
-
- return [buttonConfig, handleOnToggle];
-};
-
-export default useButtonConfig;
diff --git a/client/src/hooks/useDiagramAnimation.ts b/client/src/hooks/useDiagramAnimation.ts
new file mode 100644
index 0000000..3a93d08
--- /dev/null
+++ b/client/src/hooks/useDiagramAnimation.ts
@@ -0,0 +1,133 @@
+import { TodoList } from '@todo/todoList';
+import { useEffect, useState } from 'react';
+import {
+ getDiagramData,
+ getTodoBlockProps,
+ getVerticeProps,
+ TodoBlockProps,
+ VertexProps,
+ DiagramTodo,
+ getVertexFromPosition,
+ getVertexToPosition,
+} from '@util/diagram.util';
+
+interface AniData {
+ aniState: string;
+ props: T;
+ timeout?: ReturnType;
+}
+
+type TodoBlockAniData = AniData;
+type VertexAniData = AniData;
+
+const getUpdatedAniStates = (
+ prev: Map,
+ next: Map,
+ prevTodoBlockData: Map,
+ prevVertexData: Map,
+ setTodoBlockData: React.Dispatch>>,
+ setVertexData: React.Dispatch>>,
+): void => {
+ const mountTodo = [...getTodoBlockProps(next)].filter(([key]) => !prev.has(key));
+ const idleTodo = [...getTodoBlockProps(next)].filter(([key]) => prev.has(key));
+ const unmountTodo = [...getTodoBlockProps(prev)].filter(([key]) => !next.has(key));
+ const resultTodoBlockData = new Map([...prevTodoBlockData]);
+ idleTodo.forEach(([key, value]) => {
+ const target = resultTodoBlockData.get(key);
+ if (target === undefined) return;
+ resultTodoBlockData.set(key, { ...target, props: value });
+ });
+ mountTodo.forEach(([key, value]) => {
+ const target = resultTodoBlockData.get(key);
+ if (target !== undefined) clearTimeout(target.timeout);
+ const timeout = setTimeout(() => {
+ setTodoBlockData((prev) => {
+ const newState = new Map([...prev]);
+ newState.set(key, { aniState: 'idle', props: value });
+ return newState;
+ });
+ }, 50);
+ resultTodoBlockData.set(key, { aniState: 'mount', props: value, timeout });
+ });
+ unmountTodo.forEach(([key, value]) => {
+ const target = resultTodoBlockData.get(key);
+ if (target !== undefined) clearTimeout(target.timeout);
+ const timeout = setTimeout(() => {
+ setTodoBlockData((prev) => {
+ const newState = new Map([...prev]);
+ newState.delete(key);
+ return newState;
+ });
+ }, 500);
+ resultTodoBlockData.set(key, { aniState: 'unmount', props: value, timeout });
+ });
+
+ const prevVertexMap = getVerticeProps(prev);
+ const nextVertexMap = getVerticeProps(next);
+ const mountVertex = [...nextVertexMap].filter(([key]) => !prevVertexMap.has(key));
+ const idleVertex = [...nextVertexMap].filter(([key]) => prevVertexMap.has(key));
+ const unmountVertex = [...prevVertexMap].filter(([key]) => !nextVertexMap.has(key));
+ const resultVertexData = new Map([...prevVertexData]);
+ idleVertex.forEach(([key, value]) => {
+ const target = resultVertexData.get(key);
+ if (target === undefined) return;
+ resultVertexData.set(key, { ...target, props: value });
+ });
+ mountVertex.forEach(([key, value]) => {
+ const target = resultVertexData.get(key);
+ if (target !== undefined) clearTimeout(target.timeout);
+ const timeout = setTimeout(() => {
+ setVertexData((prev) => {
+ const newState = new Map([...prev]);
+ newState.set(key, { aniState: 'idle', props: value });
+ return newState;
+ });
+ }, 50);
+ let props = { ...value };
+ const [from, to] = key.split('+');
+ if (prev.has(from)) props = { ...props, ...getVertexFromPosition(prev, from) };
+ if (prev.has(to)) props = { ...props, ...getVertexToPosition(prev, to) };
+ resultVertexData.set(key, { aniState: 'mount', props, timeout });
+ // console.log(resultVertexData.get(key));
+ });
+ unmountVertex.forEach(([key, value]) => {
+ const target = resultVertexData.get(key);
+ if (target !== undefined) clearTimeout(target.timeout);
+ const timeout = setTimeout(() => {
+ setVertexData((prev) => {
+ const newState = new Map([...prev]);
+ newState.delete(key);
+ return newState;
+ });
+ }, 500);
+ let props = { ...value };
+ const [from, to] = key.split('+');
+ if (next.has(from)) props = { ...props, ...getVertexFromPosition(next, from) };
+ if (next.has(to)) props = { ...props, ...getVertexToPosition(next, to) };
+ resultVertexData.set(key, { aniState: 'unmount', props, timeout });
+ });
+ setTodoBlockData(() => resultTodoBlockData);
+ setVertexData(() => resultVertexData);
+};
+
+export const useDiagramAnimation = (
+ todoList: TodoList,
+ showDone: boolean,
+): { todoBlockData: Map; vertexData: Map } => {
+ const [, setDiagramData] = useState>(new Map());
+ const [todoBlockData, setTodoBlockData] = useState>(new Map());
+ const [vertexData, setVertexData] = useState>(new Map());
+ useEffect(() => {
+ getDiagramData(todoList, showDone)
+ .then((newData) => {
+ setDiagramData((prev) => {
+ getUpdatedAniStates(prev, newData, todoBlockData, vertexData, setTodoBlockData, setVertexData);
+ return newData;
+ });
+ })
+ .catch((err) => {
+ throw err;
+ });
+ }, [todoList, showDone]);
+ return { todoBlockData, vertexData };
+};
diff --git a/client/src/hooks/useDone.ts b/client/src/hooks/useDone.ts
new file mode 100644
index 0000000..9051df8
--- /dev/null
+++ b/client/src/hooks/useDone.ts
@@ -0,0 +1,35 @@
+import { useSetAtom, useAtom } from 'jotai';
+import { toast } from 'react-toastify';
+
+import { stopTimerAtom, todoList, elapsedTimeAtom, postponeClicked } from '@util/GlobalState.js';
+
+const useDone = (): any[] => {
+ const [todoListAtom, setTodoListAtom] = useAtom(todoList);
+ const [elapsedTime, setElapsedTime] = useAtom(elapsedTimeAtom);
+ const setPostponeClicked = useSetAtom(postponeClicked);
+ const stopTimer = useSetAtom(stopTimerAtom);
+
+ const setDone = (): void => {
+ stopTimer();
+ todoListAtom
+ .updateElapsedTime(elapsedTime)
+ .then(async (updatedTodoList) => {
+ return await updatedTodoList.setDone();
+ })
+ .then(async (newTodoList) => {
+ setTodoListAtom(newTodoList);
+ return await newTodoList.getActiveTodo();
+ })
+ .then((newActiveTodo) => {
+ setPostponeClicked(false);
+ setElapsedTime(newActiveTodo !== undefined ? newActiveTodo.elapsedTime : 0);
+ toast.success('완료되었습니다! 👏🏻👏🏻👏🏻');
+ })
+ .catch((err) => {
+ toast.error(err);
+ });
+ };
+
+ return [setDone];
+};
+export default useDone;
diff --git a/client/src/hooks/useDone.tsx b/client/src/hooks/useDone.tsx
deleted file mode 100644
index 0ff8922..0000000
--- a/client/src/hooks/useDone.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useAtom } from 'jotai';
-import { toast } from 'react-toastify';
-
-import { todoList } from '@util/GlobalState.js';
-
-const useDone = (): any[] => {
- const [todoListAtom, setTodoListAtom] = useAtom(todoList);
-
- const setDone = (elasedTime: number): void => {
- todoListAtom
- .updateElapsedTime(elasedTime)
- .then(async (data) => {
- return await data.setDone();
- })
- .then((newTodoList) => {
- toast.success('완료 👏🏻👏🏻'); // toast
- setTodoListAtom(newTodoList);
- })
- .catch((err) => {
- throw new Error(err);
- });
- };
-
- return [setDone];
-};
-
-export default useDone;
diff --git a/client/src/hooks/useElapsedTime.tsx b/client/src/hooks/useElapsedTime.tsx
deleted file mode 100644
index 801cd62..0000000
--- a/client/src/hooks/useElapsedTime.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useAtom } from 'jotai';
-import { useState, useEffect, useRef } from 'react';
-
-import * as globalState from '../util/GlobalState.js';
-
-const useElapsedTime = (): any[] => {
- const [time, setTime] = useAtom(globalState.elasedTimeAtom); // time: 초 단위
- const [displayTime, setDisplayTime] = useState('');
- const intervalRef = useRef(0);
-
- useEffect(() => {
- const hour = Math.floor(time / 60 / 60);
- const minute = Math.floor((time % 3600) / 60);
- const second = time % 60;
-
- setDisplayTime(`소요시간: ${hour}h ${minute}m ${second}s`);
- }, [time]);
-
- const startTimer = (): void => {
- intervalRef.current = window.setInterval(() => {
- setTime((prevTime) => prevTime + 1);
- }, 1000);
- };
-
- const stopTimer = (): void => {
- clearInterval(intervalRef.current);
- };
-
- return [displayTime, startTimer, stopTimer, time, setTime];
-};
-
-export default useElapsedTime;
diff --git a/client/src/hooks/useModalComplete.ts b/client/src/hooks/useModalComplete.ts
new file mode 100644
index 0000000..820bfe3
--- /dev/null
+++ b/client/src/hooks/useModalComplete.ts
@@ -0,0 +1,59 @@
+import { useAtom, useAtomValue } from 'jotai';
+import { Dispatch, SetStateAction } from 'react';
+import { toast } from 'react-toastify';
+
+import { InputTodo } from '@todo/todo.type';
+import { TodoList } from '@todo/todoList';
+
+import { elapsedTimeAtom, todoList } from '@util/GlobalState';
+import { getCheckedInputData } from '@util/modal.util';
+
+import 'react-toastify/dist/ReactToastify.css';
+
+const MODAL_COMPLETE_ACTIONS = {
+ create: async (todoList: TodoList, newData: InputTodo) => {
+ return await todoList.add(newData);
+ },
+ update: async (todoList: TodoList, newData: InputTodo, id: string) => {
+ return await todoList.edit(id, newData);
+ },
+};
+
+const COMPLETE_MESSAGE = {
+ create: '새로운 Todo가 추가되었습니다. 😎',
+ update: 'Todo가 수정되었습니다. ☘️',
+};
+
+const useModalComplete = (type: string): any[] => {
+ const [todoListAtom, setTodoListAtom] = useAtom(todoList);
+ const elapsedTime = useAtomValue(elapsedTimeAtom);
+
+ const setComplete = async (
+ inputData: any[],
+ setHasModal: Dispatch>,
+ editingTodoId: string,
+ ): Promise => {
+ todoListAtom
+ .updateElapsedTime(elapsedTime)
+ .then((newTodoList) => {
+ return newTodoList;
+ })
+ .then(async (newTodoList) => {
+ return await MODAL_COMPLETE_ACTIONS[type as keyof typeof MODAL_COMPLETE_ACTIONS](
+ newTodoList,
+ getCheckedInputData(type, inputData),
+ editingTodoId,
+ );
+ })
+ .then((data) => {
+ setTodoListAtom(data);
+ setHasModal(false);
+ toast.success(COMPLETE_MESSAGE[type as keyof typeof COMPLETE_MESSAGE]);
+ })
+ .catch((err: any) => {
+ toast.error(err.message);
+ });
+ };
+ return [setComplete];
+};
+export default useModalComplete;
diff --git a/client/src/hooks/usePostpone.ts b/client/src/hooks/usePostpone.ts
new file mode 100644
index 0000000..4487e62
--- /dev/null
+++ b/client/src/hooks/usePostpone.ts
@@ -0,0 +1,37 @@
+import { useAtom, useSetAtom } from 'jotai';
+import { toast } from 'react-toastify';
+
+import { POSTPONE_METHODS } from '@util/Constants.js';
+import { todoList, elapsedTimeAtom, stopTimerAtom, postponeClicked } from '@util/GlobalState.js';
+
+const usePostpone = (): any[] => {
+ const [todoListAtom, setTodoListAtom] = useAtom(todoList);
+ const [elapsedTime, setElapsedTime] = useAtom(elapsedTimeAtom);
+ const stopTimer = useSetAtom(stopTimerAtom);
+ const setPostponeClicked = useSetAtom(postponeClicked);
+
+ const setPostpone = (type: string): void => {
+ stopTimer();
+ todoListAtom
+ .updateElapsedTime(elapsedTime)
+ .then(async (updatedTodoList) => {
+ return await POSTPONE_METHODS[type as keyof typeof POSTPONE_METHODS](updatedTodoList);
+ })
+ .then(async (newTodoList) => {
+ setTodoListAtom(newTodoList);
+ return await newTodoList.getActiveTodo();
+ })
+ .then((newActiveTodo) => {
+ setPostponeClicked(false);
+ setElapsedTime(newActiveTodo !== undefined ? newActiveTodo.elapsedTime : 0);
+ toast.error('오늘도 할 일을 미룬 당신! 혹시 말로만 하는 사람은 아니겠죠? 🤔');
+ })
+ .catch((err) => {
+ toast.error(err);
+ });
+ };
+
+ return [setPostpone];
+};
+
+export default usePostpone;
diff --git a/client/src/hooks/useTodoList.tsx b/client/src/hooks/useTodoList.tsx
deleted file mode 100644
index 67a77b4..0000000
--- a/client/src/hooks/useTodoList.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useAtom } from 'jotai';
-import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-
-import { TodoList } from '@core/todo/todoList.js';
-import { isEqualDate } from '@todo/todo.util';
-
-import { POSTPONE_METHODS, POSTPONE_TEXTS, POSTPONE_OPTIONS, INITIAL_TODO } from '@util/Constants';
-import { isFinishedAtom, todoList } from '@util/GlobalState.js';
-
-const useTodoList = (): any[] => {
- const [todoListAtom, setTodoListAtom] = useAtom(todoList);
- const [activeTodo, setActiveTodo] = useState(INITIAL_TODO);
- const [postponeOptions, setPostponeOptions] = useState(POSTPONE_TEXTS);
- const [, setIsFinished] = useAtom(isFinishedAtom);
-
- useEffect(() => {
- todoListAtom
- .getActiveTodo()
- .then((top: any) => {
- setActiveTodo(top);
- })
- .catch((err) => {
- throw new Error(err);
- });
- }, [todoListAtom]);
-
- useEffect(() => {
- if (activeTodo === undefined) {
- return;
- }
- setPostponeOptions(() => {
- return POSTPONE_TEXTS.filter((x) => {
- if (activeTodo.importance <= 1 && x === POSTPONE_OPTIONS['우선순위 낮추기']) {
- return false;
- }
- if (isEqualDate(new Date(), activeTodo.until) && x === POSTPONE_OPTIONS['하루 미루기']) {
- return false;
- }
- if (!isEqualDate(new Date(), activeTodo.until) && x === POSTPONE_OPTIONS['데드라인 미루기']) {
- return false;
- }
- return true;
- });
- });
- }, [activeTodo]);
-
- const setPostpone = (elapsedTime: number, text: string): void => {
- todoListAtom
- .updateElapsedTime(elapsedTime)
- .then(async () => {
- return await POSTPONE_METHODS[text as keyof typeof POSTPONE_METHODS](todoListAtom);
- })
- .then(async (data: TodoList) => {
- const top = await data.getActiveTodo();
- return { top, data };
- })
- .then(({ data, top }) => {
- setTodoListAtom(data);
- setActiveTodo(INITIAL_TODO);
- setIsFinished(top === undefined);
- toast.error('오늘도 미루는 나, 혹시 아가리로만 하고 계시진 않으신가요? 🤔'); // toast
- })
- .catch((err) => {
- throw new Error(err);
- });
- };
- return [setPostpone, activeTodo, postponeOptions];
-};
-
-export default useTodoList;
diff --git a/client/src/images/Cancel.svg b/client/src/images/Cancel.svg
new file mode 100644
index 0000000..1fa54d0
--- /dev/null
+++ b/client/src/images/Cancel.svg
@@ -0,0 +1,3 @@
+
diff --git a/client/src/images/Celebrate.svg b/client/src/images/Celebrate.svg
new file mode 100644
index 0000000..ecef6c5
--- /dev/null
+++ b/client/src/images/Celebrate.svg
@@ -0,0 +1,57 @@
+
diff --git a/client/src/images/ColoredDone.svg b/client/src/images/ColoredDone.svg
new file mode 100644
index 0000000..e29cd42
--- /dev/null
+++ b/client/src/images/ColoredDone.svg
@@ -0,0 +1,4 @@
+
diff --git a/client/src/images/ColoredPostponed.svg b/client/src/images/ColoredPostponed.svg
new file mode 100644
index 0000000..fa54f20
--- /dev/null
+++ b/client/src/images/ColoredPostponed.svg
@@ -0,0 +1,4 @@
+
diff --git a/client/src/images/ColoredReady.svg b/client/src/images/ColoredReady.svg
new file mode 100644
index 0000000..be703ee
--- /dev/null
+++ b/client/src/images/ColoredReady.svg
@@ -0,0 +1,3 @@
+
diff --git a/client/src/images/ColoredWait.svg b/client/src/images/ColoredWait.svg
new file mode 100644
index 0000000..1e9fe78
--- /dev/null
+++ b/client/src/images/ColoredWait.svg
@@ -0,0 +1,11 @@
+
diff --git a/client/src/images/Copy.svg b/client/src/images/Copy.svg
new file mode 100644
index 0000000..a6ba473
--- /dev/null
+++ b/client/src/images/Copy.svg
@@ -0,0 +1,4 @@
+
diff --git a/client/src/images/Delete.svg b/client/src/images/Delete.svg
index 388d293..189e89a 100644
--- a/client/src/images/Delete.svg
+++ b/client/src/images/Delete.svg
@@ -1,9 +1,9 @@
-
}>
+
+ {headerElem.value}
+
+ );
+ })}
+ {
+ e.stopPropagation();
+ }}
+ >
}
- onClick={(e) => {
- setEditingTodoId(todo.id);
- setModalType(TABLE_MODALS.update);
+ context={
}
+ onClick={() => {
+ setHasEditModal(true);
}}
/>
}
- onClick={(e) => {
+ context={
}
+ onClick={() => {
handleOnDelete(todo.id);
}}
/>
+ }
+ onClick={() => {
+ copyToClipboard(todo.title);
+ }}
+ />
-
+ -
{list.map((todo: PlainTodo) => {
- return
- {todo.title} ; + return ( +
- + {todo.title} + + ); })}
+
+ {[...vertexData].map((el) => {
+ return (
+
+
+ );
+ })}
+ {[...todoBlockData].map((el) => {
+ return (
+
+
+ );
+ })}
+ {newVertexData.from === '' &&
+ (clickData.type === 'Todo' ? (
+
+
+ @@ -51,4 +55,4 @@ const TodoStatus = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement => ); }; -export default TodoStatus; +export default memo(TodoStatus); diff --git a/client/src/container/main/TodoTimeInteraction.tsx b/client/src/container/main/TodoTimeInteraction.tsx index 4a0e396..4e4b504 100644 --- a/client/src/container/main/TodoTimeInteraction.tsx +++ b/client/src/container/main/TodoTimeInteraction.tsx @@ -6,13 +6,7 @@ import PostponeBox from '@components/main/PostponeBox'; import TodoInteractionButton from '@components/main/TodoInteractionButton'; import TodoTimeText from '@components/main/TodoTimeText'; -import { PlainTodo } from '@todo/todo.type'; - -import { isOnProgress, postponeClicked } from '@util/GlobalState'; - -import useTodoList from '../../hooks/useTodoList'; -import useElapsedTime from '../../hooks/useElapsedTime'; -import useButtonConfig from '../../hooks/useButtonConfig'; +import { postponeClicked } from '@util/GlobalState'; const Wrapper = styled.div` width: 850px; @@ -22,26 +16,20 @@ const Wrapper = styled.div` position: relative; `; -const TodoTimeInteraction = ({ activeTodo }: { activeTodo: PlainTodo }): ReactElement => { +const ButtonWrapper = styled.div` + display: flex; +`; + +const TodoTimeInteraction = (): ReactElement => { const [isPostpone] = useAtom(postponeClicked); - const [userState] = useAtom(isOnProgress); - const [setPostpone, , postponeOptions] = useTodoList(); - const [, , , time, setTime] = useElapsedTime(); - const [buttonConfig, handleOnToggle] = useButtonConfig(userState); return (
Todo가 없습니다!
-Todo를 추가해보는 건 어떨까요?
-
+
+ 여기
+
+
+