[design] 로그인 이후 화면 레이아웃(헤더 포함) 구현

src/components/Header.tsx

@@ -0,0 +1,140 @@
+import { NavLink } from 'react-router-dom';
+
+import styled from 'styled-components';
+
+import profileIcon from '../assets/image/icon/profile-icon.png';
+import profileListIcon from '../assets/image/icon/profile-list-icon.png';
+import chatListIcon from '../assets/image/icon/chat-list-icon.png';
+import accountIcon from '../assets/image/icon/account-icon.png';
+import logoutIcon from '../assets/image/icon/logout-icon.png';
+
+export default function Header() {
+  return (
+    <Container>
+      <h2>CHATCHAT</h2>
+      <div className="navWrap">
+        <nav>
+          <NavLink to="/profile">
+            <img src={profileIcon} alt="" />
+            <span>내 프로필</span>
+          </NavLink>
+          <NavLink to="/companies">
+            <img src={profileListIcon} alt="" />
+            <span>오픈 프로필 목록</span>
+          </NavLink>
+          <NavLink to="/chatrooms">
+            <img src={chatListIcon} alt="" />
+            <span>채팅 목록</span>
+          </NavLink>
+        </nav>
+
+        <nav>
+          <NavLink to="/account">
+            <img src={accountIcon} alt="" />
+            <span>계정 관리</span>
+          </NavLink>
+          <NavLink to="/">
+            <img src={logoutIcon} alt="" />
+            <span>로그아웃</span>
+          </NavLink>
+        </nav>
+      </div>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  width: 24rem;
+  height: 100vh;
+  padding: 12px;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.16);
+  background-color: ${(props) => props.theme.colors.white.default};
+
+  h2 {
+    padding-block: 3.6rem;
+    text-align: center;
+    font-family: 'Gmarket Sans';
+    ${(props) => props.theme.texts.bold.header}
+  }
+
+  .navWrap {
+    flex-grow: 1;
+    ${(props) => props.theme.alignCenter.vertical}
+    justify-content: space-between;
+  }
+
+  a {
+    padding: 1.2rem;
+    display: flex;
+    border-radius: 1rem;
+
+    img{
+      height: 2.4rem;
+      margin-right: 1.6rem;
+    }
+
+    span{
+      ${(props) => props.theme.texts.bold.boldText}
+      line-height: 2.4rem;
+    }
+  }
+
+  a.active{
+    background-color: ${(props) => props.theme.colors.gray2.default};
+  }
+
+  @media screen and (${(props) => props.theme.breakPoint.mobile}){
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 6rem;
+    background-color: ${((props) => props.theme.colors.gray2.default)};
+    box-shadow: none;
+    display: flex;
+    justify-content: space-around;
+
+    h2 {
+      display: none;
+    }
+
+    .navWrap {
+      flex-direction: row;
+      justify-content: center;
+    }
+
+    nav:nth-child(1) { flex-grow : 3 };
+    nav:nth-child(2) { flex-grow : 2 };
+
+    nav{
+      display: flex;
+      justify-content: space-around;
+
+      a {
+        padding: 0.8rem;
+        justify-content: center;
+        align-content: center;
+
+        img{
+          margin: 0;
+        }
+
+        span{
+          display: none;
+        }
+      }
+    }
+
+    a.active{
+      background-color: ${(props) => props.theme.colors.black.default};
+
+      img{
+        filter: brightness(100);
+      }
+    }
+}
+
+`;

src/components/PostLoginLayout.tsx

@@ -0,0 +1,46 @@
+import { Outlet } from 'react-router-dom';
+import styled from 'styled-components';
+import Header from './Header';
+
+export default function PostLoginLayout() {
+  return (
+    <Container>
+      <Header />
+      <div className="body">
+        <div className="contents">
+          <Outlet />
+        </div>
+      </div>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  height: 100vh;
+
+  .body {
+    ${(props) => props.theme.alignCenter.horizontal}
+    flex-grow: 1;
+    height: 100%;
+
+    .contents{
+      width: 64rem;
+      height: 100%;
+      background-color: ${(props) => props.theme.colors.white.default};
+      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.16);
+    }
+  }
+
+  @media screen and (${(props) => props.theme.breakPoint.mobile}){
+    .body {
+      .contents{
+        max-width: 64rem;
+        width: 100%;
+        box-shadow: none;
+        padding-bottom: 6rem;
+      }
+    }    
+  }
+`;

src/types/images.d.ts

@@ -0,0 +1 @@
+declare module '*.png';