diff --git a/client/src/container/main/TodoStatus.tsx b/client/src/container/main/TodoStatus.tsx index 1120d5b..3e44f7f 100644 --- a/client/src/container/main/TodoStatus.tsx +++ b/client/src/container/main/TodoStatus.tsx @@ -5,7 +5,7 @@ import Image from '@components/Image'; import { isOnProgress, asyncActiveTodo } from '@util/GlobalState'; import { useAtom } from 'jotai'; -import Working from '@images/Working.svg'; +import Working from '@images/Working'; import Relaxing from '@images/Relaxing'; import styled from 'styled-components'; @@ -14,6 +14,7 @@ import { todoStatusText } from '@util/Common'; const Wrapper = styled.div` width: 850px; + height: 280px; padding: 0 6px; display: flex; flex-direction: row; @@ -47,7 +48,7 @@ const TodoStatus = (): ReactElement => { fontSize={'18px'} fontWeight={'700'} /> - {userState === 'working' ? : } + {userState === 'working' ? : }
diff --git a/client/src/container/todos/TodosHeader.tsx b/client/src/container/todos/TodosHeader.tsx index 114d0b8..ed42437 100644 --- a/client/src/container/todos/TodosHeader.tsx +++ b/client/src/container/todos/TodosHeader.tsx @@ -1,8 +1,7 @@ import { ReactElement, memo } from 'react'; -import Waiting from '@images/Waiting.svg'; -import Image from '@components/Image'; import Text from '@components/Text'; import styled from 'styled-components'; +import Waiting from '@images/Waiting'; const Wrapper = styled.div` width: 100%; @@ -13,7 +12,7 @@ const TodosHeader = (): ReactElement => { return ( - + ); }; diff --git a/client/src/images/Relaxing.tsx b/client/src/images/Relaxing.tsx index eff67e8..387ccad 100644 --- a/client/src/images/Relaxing.tsx +++ b/client/src/images/Relaxing.tsx @@ -35,140 +35,166 @@ const Wrapper = styled.div` const Relaxing = ({ transform }: PropsType): ReactElement => { return ( - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + { strokeLinecap="round" strokeLinejoin="round" /> - - + + + + + { strokeLinecap="round" strokeLinejoin="round" /> - ); diff --git a/client/src/images/Waiting.svg b/client/src/images/Waiting.svg index a8a2cb2..fc2cfd7 100644 --- a/client/src/images/Waiting.svg +++ b/client/src/images/Waiting.svg @@ -1,77 +1,78 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/images/Waiting.tsx b/client/src/images/Waiting.tsx new file mode 100644 index 0000000..97b6de1 --- /dev/null +++ b/client/src/images/Waiting.tsx @@ -0,0 +1,641 @@ +import { ReactElement } from 'react'; + +const Relaxing = (): ReactElement => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +export default Relaxing; diff --git a/client/src/images/Working.svg b/client/src/images/Working.svg index a08fb42..e3ef50a 100644 --- a/client/src/images/Working.svg +++ b/client/src/images/Working.svg @@ -18,6 +18,8 @@ + + diff --git a/client/src/images/Working.tsx b/client/src/images/Working.tsx new file mode 100644 index 0000000..dc7debf --- /dev/null +++ b/client/src/images/Working.tsx @@ -0,0 +1,382 @@ +import { ReactElement } from 'react'; +import styled from 'styled-components'; + +interface PropsType { + transform?: string; +} + +const Wrapper = styled.div` + transform: ${(props) => props.transform}; +`; +const Working = ({ transform }: PropsType): ReactElement => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +export default Working;