From 16db1f8df4d0fe67958c61971022a6d620f0cf55 Mon Sep 17 00:00:00 2001
From: NaGyeong Park <ngp.july@gmail.com>
Date: Fri, 25 Nov 2022 17:51:34 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Main-TodoTitle=20layer=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/Text.tsx     | 4 ++--
 client/src/container/TodoTitle.tsx | 9 +++++++++
 client/src/page/Main.tsx           | 2 ++
 client/src/util/GlobalState.ts     | 2 +-
 4 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 client/src/container/TodoTitle.tsx

diff --git a/client/src/components/Text.tsx b/client/src/components/Text.tsx
index d76ce2b..6d9d70a 100644
--- a/client/src/components/Text.tsx
+++ b/client/src/components/Text.tsx
@@ -6,6 +6,7 @@ interface StyleProps {
   fontSize?: string;
   fontWeight?: string;
   fontFamily?: string;
+  margin?: string;
 }
 
 interface Props extends StyleProps {
@@ -17,11 +18,10 @@ const StyledText = styled.p<StyleProps>`
   font-family: ${({ fontFamily }) => fontFamily};
   font-size: ${({ fontSize }) => fontSize};
   font-weight: ${({ fontWeight }) => fontWeight};
+  margin: ${({ margin }) => margin};
 `;
 
 const Text: FC<Props> = ({ text, ...props }) => {
-  console.log(props);
-
   return <StyledText {...props}>{text}</StyledText>;
 };
 
diff --git a/client/src/container/TodoTitle.tsx b/client/src/container/TodoTitle.tsx
new file mode 100644
index 0000000..da443e1
--- /dev/null
+++ b/client/src/container/TodoTitle.tsx
@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import Text from '../components/Text';
+
+import { Todo } from '../core/todo/index';
+
+const TodoTitle = ({ activeTodo }: { activeTodo: Todo }): ReactElement => {
+  return <Text text={activeTodo.title} fontSize={'54px'} fontWeight={'700'} margin={'35px 0'} />;
+};
+export default TodoTitle;
diff --git a/client/src/page/Main.tsx b/client/src/page/Main.tsx
index d700a7a..d17a22c 100644
--- a/client/src/page/Main.tsx
+++ b/client/src/page/Main.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import TodoStatus from '../container/TodoStatus';
 import { mockTodosData } from '../util/GlobalState';
 import { ReactElement } from 'react';
+import TodoTitle from '../container/TodoTitle';
 
 const Wrapper = styled.div`
   height: 90vh;
@@ -18,6 +19,7 @@ const Main = (): ReactElement => {
   return (
     <Wrapper>
       <TodoStatus activeTodo={todosArray[0]} />
+      <TodoTitle activeTodo={todosArray[0]} />
     </Wrapper>
   );
 };
diff --git a/client/src/util/GlobalState.ts b/client/src/util/GlobalState.ts
index 9f8ce78..a6e7479 100644
--- a/client/src/util/GlobalState.ts
+++ b/client/src/util/GlobalState.ts
@@ -11,7 +11,7 @@ export const readWriteAtom = atom(
 export const mockTodosData = atom([
   {
     id: '0',
-    title: 'default title',
+    title: '다람쥐 헌 쳇바퀴에 올라타',
     content: 'default content',
     owner: 'default user',
     importance: 1,