Merge pull request #21 from Network-Leader/13-layout-component

13-layout-component

src/components/common/Text.tsx

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 interface TextProps {
   size: "h1" | "h2" | "h3" | "h4" | "xlarge" | "large" | "medium" | "small";
   weight?: "bold" | "medium" | "regular" | "light" | "thin";
-  color?: "black" | "white" | "warning" | "highlight" | "block";
+  color?: "black" | "white" | "warning" | "highlight" | "block" | "foot";
   lineheight?: string;
   children: React.ReactNode;
 }

src/components/layout/Footer.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { FooterBox, FooterContents, FooterIconBox } from "../../styles/layout/footer";
+import { ReactComponent as NLslogo } from '../../assets/NL_logo-white.svg'
+import { Text } from "../common";
+
+function Footer() {
+  return (
+    <FooterBox>
+      <FooterIconBox>
+        <NLslogo width="35px"/>
+      </FooterIconBox>
+      <FooterContents>
+        <Text size="small" color="foot" children="서울특별시 노원구 공릉로" lineheight="28px"/>
+        <Text size="small" color="foot" children="© 개인정보처리방침 NL. All RIGHT RESERVED" lineheight="28px"/>
+      </FooterContents>
+    </FooterBox>
+  )
+}
+
+export default Footer

src/components/layout/Header.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { HeaderBox, HeaderContents, HeaderMenuItem, LogoBox } from "../../styles/layout/header";
+import { ReactComponent as NLlogo } from '../../assets/NL_LOGO.svg'
+import { Nav } from "../common";
+import { Link } from "react-router-dom";
+
+type User = {name: string;}
+
+type Props =
+{
+  authenticated: boolean;
+  profile: User | null;
+}
+
+const menuList = [
+  '소개', '활동', '팀 블로그', '지원'
+]
+
+function Header(props: Props) {
+  return (
+    <HeaderBox>
+      <LogoBox>
+        <Link to="/">
+          <NLlogo style={{'width': '211px', 'height': '105px'}}/>
+        </Link>
+      </LogoBox>
+      <HeaderContents>
+        {menuList.map((item, index) => (
+          <HeaderMenuItem>
+            <Nav color="white" size="large" children={item} url={item}/>
+          </HeaderMenuItem>
+        ))
+        }
+      <div>
+      {props.authenticated ? props.profile?.name : <HeaderMenuItem><Nav color="white" size="large" children='로그인' url='/signin'/></HeaderMenuItem>}
+      </div>
+      </HeaderContents>
+    </HeaderBox>
+  )
+}
+
+export default Header

src/components/layout/index.tsx

@@ -1 +1,19 @@
 import React from "react";
+import { Outlet } from "react-router-dom";
+import { HeaderContents } from "../../styles/layout/header";
+import Footer from "./Footer";
+import Header from "./Header";
+
+const Layout = () => {
+  return (
+    <div style={{ backgroundColor: "blue" }}>
+      <Header authenticated={false} profile={null} />
+
+      <Outlet />
+
+      <Footer />
+    </div>
+  );
+};
+
+export default Layout;

src/pages/signin/index.tsx

@@ -0,0 +1 @@
+import React from "react";

src/router.tsx

@@ -1,14 +1,18 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import SignIn from "./components/member/signIn/index";
-import SignUp from "./components/member/signUp/index";
+import Layout from "./components/layout";
 import MainPage from "./pages";
+import SignIn from "./components/member/signIn";
+import SignUp from "./components/member/signUp";
 import Member from "./pages/member";
 
+
 function Router() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<MainPage />} />
+        <Route element={<Layout/>}>
+          <Route path="/" element={<MainPage />} />
+        </Route>
         <Route path="member" element={<Member />}>
           <Route path="signin" element={<SignIn />} />
           <Route path="signup" element={<SignUp />} />

src/styles/layout/footer.ts

@@ -0,0 +1,31 @@
+import styled from "@emotion/styled";
+
+const FooterBox = styled.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* width: 1441px; */
+  width: 100%;
+  height: 318px;
+  left: 0px;
+  top: 6057px;
+  background-color: black;
+`
+
+const FooterIconBox = styled.div`
+  display: flex;
+  min-height: 35px;
+  margin-top: 148px;
+  min-width: 942px;
+  border-bottom: 2px solid white;
+
+`
+
+const FooterContents = styled.div`
+  min-width: 942px;
+  color: white;
+  padding: 40px 0px;
+`
+
+export { FooterBox, FooterIconBox, FooterContents };

src/styles/layout/header.ts

@@ -0,0 +1,47 @@
+import styled from "@emotion/styled";
+
+const HeaderBox = styled.div`
+  display: flex;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  /* width: 1441px; */
+  width: 100%;
+  height: 105px;
+  z-index: 999;
+  /* background-color: black; */
+  background-image: linear-gradient(to right, black 200px, transparent 200px 411px, black 411px 100%)
+`
+
+const HeaderContents = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 400px;
+`
+
+const HeaderMenuItem = styled.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  min-width: 100px;
+  height: 100%;
+  cursor: pointer;
+`
+
+const LogoBox = styled.div`
+  left: 205px;
+  margin-left: 200px;
+  min-width: 211px;
+  min-height: 101px;
+  cursor: pointer;
+`
+
+export { 
+  HeaderBox,
+  HeaderContents,
+  HeaderMenuItem,
+  LogoBox 
+};

src/styles/layout/layout.ts

@@ -0,0 +1 @@
+import styled from "@emotion/styled";

src/theme/emotion.d.ts

@@ -27,6 +27,7 @@ declare module "@emotion/react" {
         warning: string;
         highlight: string;
         block: string;
+        foot: string;
       };
     };
     background: {

src/theme/theme.ts

@@ -26,6 +26,7 @@ const theme: Theme = {
       warning: "#FF3939",
       highlight: "#9989F7",
       block: "#868686",
+      foot: "#BEBEBE"
     },
   },
   background: {