Merge pull request #1 from JSH99/feat/header

공통 요소를 만든다
KDT1-FE · Sep 11, 2023 · 46fdb4f · 46fdb4f
2 parents d30c0e4 + f9871be
commit 46fdb4f
Show file tree

Hide file tree

Showing 13 changed files with 332 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-router-dom": "^6.15.0",
     "recoil": "^0.7.7",
     "styled-components": "^6.0.7"

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,42 @@
+import { Outlet } from 'react-router-dom';
+import styled from 'styled-components';
+import NavBar from './components/NavBar';
+import SideBar from './components/SideBar';
+import Header from './components/Header';
+
 function App() {
-  return <></>;
+  return (
+    <Container>
+      <SideBar />
+      <Wrapper>
+        <Header />
+        <MainWrapper>
+          <NavBar />
+          <Outlet />
+        </MainWrapper>
+      </Wrapper>
+    </Container>
+  );
 }
 
+const Container = styled.div`
+  display: flex;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+
+  @media screen and (width >= 1024px) {
+    padding-left: 330px;
+  }
+`;
+
+const MainWrapper = styled.main`
+  width: 90%;
+  margin: 0 auto;
+`;
+
 export default App;
diff --git a/src/common/FlexContainer.ts b/src/common/FlexContainer.ts
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const FlexContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/common/Spacer.ts b/src/common/Spacer.ts
@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Spacer = styled.div`
+  display: none;
+  height: 16px;
+
+  @media screen and (min-width: 1024px) {
+    display: block;
+  }
+`;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { AiFillEdit } from 'react-icons/ai';
+import { Link } from 'react-router-dom';
+
+const Header = () => {
+  return (
+    <Container>
+      <Navbar>
+        <input type="text" />
+      </Navbar>
+      <Navbar>
+        <Link to={'wiki'}>
+          <AiFillEdit size="24" />
+        </Link>
+      </Navbar>
+    </Container>
+  );
+};
+
+const Container = styled.header`
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+  height: 56px;
+  padding: 0 2rem;
+  background-color: ${({ theme }) => theme.colors.white};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+
+  z-index: 11;
+`;
+
+const Navbar = styled.nav`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: 100%;
+`;
+
+export default Header;
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import { FlexContainer } from '../common/FlexContainer';
+import { Link } from 'react-router-dom';
+
+const NavBar = () => {
+  return (
+    <Container>
+      <Categories>
+        <div className="category">
+          <Link to={'wiki'}>Wiki</Link>
+        </div>
+        <div className="category">
+          <Link to={'gallery'}>Gallery</Link>
+        </div>
+        <div className="category">
+          <Link to={'/'}>Contact</Link>
+        </div>
+      </Categories>
+    </Container>
+  );
+};
+
+const Container = styled.nav`
+  position: sticky;
+  display: flex;
+  justify-content: flex-start;
+  top: 0;
+
+  width: 100%;
+  height: 56px;
+  margin-bottom: 2rem;
+
+  z-index: 15;
+
+  background-color: ${(props) => props.theme.colors.white};
+`;
+
+const Categories = styled(FlexContainer)`
+  justify-content: flex-start;
+
+  height: 100%;
+  width: 100%;
+
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+
+  div.category {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 100%;
+
+    margin-right: 24px;
+
+    &:hover::before {
+      position: absolute;
+      content: '';
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background-color: ${({ theme }) => theme.colors.black};
+    }
+  }
+  a {
+    position: relative;
+    display: flex;
+
+    font-size: ${({ theme }) => theme.fontSize.text};
+  }
+`;
+
+export default NavBar;
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -0,0 +1,109 @@
+import styled from 'styled-components';
+import { Link, useLocation } from 'react-router-dom';
+
+const SideBar = () => {
+  const location = useLocation();
+
+  const renderCategories = () => {
+    switch (location.pathname) {
+      case '/wiki':
+        return (
+          <Menu>
+            <Item>
+              <SubTitle>회사 생활</SubTitle>
+              <Link to={'wiki'}>팀 소개</Link>
+            </Item>
+          </Menu>
+        );
+      case '/gallery':
+        return (
+          <Menu>
+            <Item>
+              <SubTitle>사진첩</SubTitle>
+              <Link to={'wiki'}>협력사</Link>
+            </Item>
+          </Menu>
+        );
+      default:
+        return (
+          <Menu>
+            <Item>
+              <SubTitle>사진첩</SubTitle>
+              <Link to={'wiki'}>협력사</Link>
+            </Item>
+            <Item>
+              <SubTitle>사진첩</SubTitle>
+              <Link to={'wiki'}>협력사</Link>
+            </Item>
+            <Item>
+              <SubTitle>사진첩</SubTitle>
+              <Link to={'wiki'}>협력사</Link>
+            </Item>
+          </Menu>
+        );
+    }
+  };
+
+  return (
+    <Container>
+      <div className="logo">
+        <Link to={'/'}>Home (App Logo)</Link>
+      </div>
+      <MenuList>{renderCategories()}</MenuList>
+    </Container>
+  );
+};
+
+const Container = styled.aside`
+  display: none;
+
+  @media screen and (min-width: 1024px) {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    min-width: 330px;
+    min-height: 100vh;
+
+    border-right: 1px solid ${(props) => props.theme.colors.border};
+
+    z-index: 10;
+  }
+
+  div.logo {
+    display: flex;
+    align-items: center;
+
+    padding-left: 2rem;
+    height: 56px;
+    border-bottom: 1px solid ${(props) => props.theme.colors.border};
+  }
+`;
+
+const MenuList = styled.nav`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const Menu = styled.ul`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+  max-height: calc(100vh - 56px);
+  overflow-y: auto;
+`;
+
+const SubTitle = styled.h3`
+  font-size: ${(props) => props.theme.fontSize.subTitle};
+  font-weight: 600;
+
+  padding: 10px 0;
+`;
+
+const Item = styled.li`
+  padding: 10px 0;
+  padding-left: 2rem;
+`;
+
+export default SideBar;
diff --git a/src/index.css b/src/index.css
@@ -3,3 +3,16 @@
   padding: 0;
   margin: 0;
 }
+
+body {
+  font-family: 'Noto Sans JP', 'Noto Sans KR', sans-serif;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-
 const Home = () => {
-  return <div>Home</div>;
+  return <div style={{ gridArea: 'main' }}>Home</div>;
 };
 
 export default Home;
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
@@ -1,11 +1,27 @@
 import { createBrowserRouter } from 'react-router-dom';
 import App from '../App';
+import Home from '../pages/Home';
+import Wiki from '../pages/Wiki';
+import Gallery from '../pages/Gallery';
 
 export const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
     // errorElement:
-    // children:
+    children: [
+      {
+        index: true,
+        element: <Home />,
+      },
+      {
+        path: 'wiki',
+        element: <Wiki />,
+      },
+      {
+        path: 'gallery',
+        element: <Gallery />,
+      },
+    ],
   },
 ]);