feat: Main-TodoTitle layer 구현

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>;
 };
 

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;

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

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,