diff --git a/src/assets/NL_LOGO.svg b/src/assets/NL_LOGO.svg
new file mode 100644
index 0000000..bb9fc19
--- /dev/null
+++ b/src/assets/NL_LOGO.svg
@@ -0,0 +1,18 @@
+
diff --git a/src/assets/NL_logo-white-ori.png b/src/assets/NL_logo-white-ori.png
new file mode 100644
index 0000000..90f2784
Binary files /dev/null and b/src/assets/NL_logo-white-ori.png differ
diff --git a/src/assets/NL_logo-white-ori.svg b/src/assets/NL_logo-white-ori.svg
new file mode 100644
index 0000000..8b960af
--- /dev/null
+++ b/src/assets/NL_logo-white-ori.svg
@@ -0,0 +1,39 @@
+
diff --git a/src/assets/NL_logo-white.png b/src/assets/NL_logo-white.png
new file mode 100644
index 0000000..2737afb
Binary files /dev/null and b/src/assets/NL_logo-white.png differ
diff --git a/src/assets/NL_logo-white.svg b/src/assets/NL_logo-white.svg
new file mode 100644
index 0000000..8a6be60
--- /dev/null
+++ b/src/assets/NL_logo-white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/common/Text.tsx b/src/components/common/Text.tsx
index ba661b5..d86af8a 100644
--- a/src/components/common/Text.tsx
+++ b/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;
}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..81d62df
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 0000000..32da8e4
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+ {menuList.map((item, index) => (
+
+
+ ))
+ }
+
+ {props.authenticated ? props.profile?.name : }
+
+
+
+ )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index 6542df5..294418e 100644
--- a/src/components/layout/index.tsx
+++ b/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 (
+
+
+
+
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/src/pages/signin/index.tsx b/src/pages/signin/index.tsx
new file mode 100644
index 0000000..6542df5
--- /dev/null
+++ b/src/pages/signin/index.tsx
@@ -0,0 +1 @@
+import React from "react";
diff --git a/src/router.tsx b/src/router.tsx
index 8fbd73f..1a31314 100644
--- a/src/router.tsx
+++ b/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 (
- } />
+ }>
+ } />
+
}>
} />
} />
diff --git a/src/styles/layout/footer.ts b/src/styles/layout/footer.ts
new file mode 100644
index 0000000..7fb4725
--- /dev/null
+++ b/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 };
\ No newline at end of file
diff --git a/src/styles/layout/header.ts b/src/styles/layout/header.ts
new file mode 100644
index 0000000..af23de7
--- /dev/null
+++ b/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
+};
\ No newline at end of file
diff --git a/src/styles/layout/layout.ts b/src/styles/layout/layout.ts
new file mode 100644
index 0000000..9a60641
--- /dev/null
+++ b/src/styles/layout/layout.ts
@@ -0,0 +1 @@
+import styled from "@emotion/styled";
diff --git a/src/theme/emotion.d.ts b/src/theme/emotion.d.ts
index dcfe375..51c48af 100644
--- a/src/theme/emotion.d.ts
+++ b/src/theme/emotion.d.ts
@@ -27,6 +27,7 @@ declare module "@emotion/react" {
warning: string;
highlight: string;
block: string;
+ foot: string;
};
};
background: {
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index b93180a..a151784 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -26,6 +26,7 @@ const theme: Theme = {
warning: "#FF3939",
highlight: "#9989F7",
block: "#868686",
+ foot: "#BEBEBE"
},
},
background: {