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 (
-
);
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;