[4주차] 이현영 미션 제출합니다.

src/components/Header.tsx

@@ -1,7 +1,31 @@
 import styled from 'styled-components';
 
-const Header = () => {
- return;
+interface Props {
+ leftChild: string;
+ rightChild: string;
+}
+
+const Header = ({ leftChild, rightChild }: Props) => {
+ return (
+ <Wrapper>
+ <Title>{leftChild}</Title>
+ <div>{rightChild}</div>
+ </Wrapper>
+ );
 };
 
+const Wrapper = styled.div`
+ width: 100%;
+
+ display: flex;
+ justify-content: space-between;
+`;
+
+const Title = styled.div`
+ padding: 1.5rem;
+
+ font-size: 1.2rem;
+ font-weight: bold;
+`;
+
 export default Header;

src/components/Navigator.tsx

@@ -1,5 +1,16 @@
+import styled from 'styled-components';
+
 const Navigator = () => {
- return;
+ return <Nav></Nav>;
 };
 
+const Nav = styled.div`
+ width: 18%;
+ height: 100%;
+
+ border-top-left-radius: 20px;
+ border-bottom-left-radius: 20px;
+ background: rgb(230, 230, 230);
+`;
+
 export default Navigator;

src/pages/ChatList.tsx

@@ -1,7 +1,13 @@
 import styled from 'styled-components';
 
+import Navigator from '../components/Navigator';
+
 const ChatList = () => {
- return <Container></Container>;
+ return (
+ <Container>
+ <Navigator />
+ </Container>
+ );
 };
 
 const Container = styled.div`

src/pages/FriendList.tsx

@@ -1,16 +1,22 @@
 import styled from 'styled-components';
 
+import Navigator from '../components/Navigator';
+import Header from '../components/Header';
+
 const FriendList = () => {
- return <Container></Container>;
+ return (
+ <Container>
+ <Navigator />
+ <Header leftChild={'친구'} rightChild={''} />
+ </Container>
+ );
 };
 
 const Container = styled.div`
  width: 25rem;
  height: 40rem;
 
  display: flex;
- flex-direction: column;
- justify-content: center;
 
  border-radius: 20px;
  box-shadow: 1px 1px 10px lightgray;

src/pages/Setting.tsx

@@ -1,7 +1,13 @@
 import styled from 'styled-components';
 
+import Navigator from '../components/Navigator';
+
 const Setting = () => {
- return <Container></Container>;
+ return (
+ <Container>
+ <Navigator />
+ </Container>
+ );
 };
 
 const Container = styled.div`