Update Header Menu

@@ -4,6 +4,7 @@ import './App.css';
 import LoginPage from './pages/LoginPage';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
 import RegisterPage from './pages/RegisterPage';
 import HomePage from './pages/HomePage';
 import HomePage from './pages/HomePage';
+import SettingPage from './pages/SettingPage';
 
 
 function App() {
 function App() {
   return (
   return (
@@ -11,6 +12,7 @@ function App() {
       <Route component={HomePage} path={['/@:username', '/']} exact />
       <Route component={HomePage} path={['/@:username', '/']} exact />
       <Route component={LoginPage} path="/login" />
       <Route component={LoginPage} path="/login" />
       <Route component={RegisterPage} path="/register" />
       <Route component={RegisterPage} path="/register" />
+      <Route component={SettingPage} path="/setting" />
     </>
     </>
   );
   );
 }
 }

+import React from 'react';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+
+const categories = [
+  {
+    name: 'home',
+    text: '홈',
+  },
+  {
+    name: 'setting',
+    text: '설정',
+  },
+];
+
+const CategoriesBlock = styled.div`
+  display: flex;
+  padding: 1rem;
+  margin: 0 auto;
+  @media screen and (max-width: 768px) {
+    width: 100%;
+    overflow-x: auto;
+  }
+`;
+
+const Category = styled(NavLink)`
+  font-size: 1.2rem;
+  cursor: pointer;
+  white-space: pre;
+  text-decoration: none;
+  color: inherit;
+  padding-bottom: 0.25rem;
+  &:hover {
+    color: #495057;
+  }
+  & + & {
+    margin-left: 2rem;
+  }
+  &.active {
+    font-weight: 600;
+    border-bottom: 2px solid #22b8cf;
+    color: #22b8cf;
+    &:hover {
+      color: #3bc9db;
+    }
+  }
+`;
+
+const Categories = () => {
+  return (
+    <CategoriesBlock>
+      {categories.map((c) => (
+        <Category
+          activeClassName="active"
+          key={c.name}
+          exact={c.name === 'home'}
+          to={c.name === 'home' ? '/' : `/${c.name}`}
+        >
+          {c.text}
+        </Category>
+      ))}
+    </CategoriesBlock>
+  );
+};
+
+export default Categories;

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import Responsive from './Responsive';
 import Responsive from './Responsive';
 import Button from './Button';
 import Button from './Button';
 import { Link } from 'react-router-dom';
 import { Link } from 'react-router-dom';
+import Categories from './Categories';
 
 
 const HeaderBlock = styled.div`
 const HeaderBlock = styled.div`
   position: fixed;
   position: fixed;
@@ -35,7 +36,7 @@ const UserInfo = styled.div`
   margin-right: 1rem;
   margin-right: 1rem;
 `;
 `;
 
 
-const Header = ({ user, onLogout }) => {
+const Header = ({ user, onLogout, category, onSelect }) => {
   return (
   return (
     <>
     <>
       <HeaderBlock>
       <HeaderBlock>
@@ -43,6 +44,11 @@ const Header = ({ user, onLogout }) => {
           <Link to="/" className="logo">
           <Link to="/" className="logo">
             작심삼일
             작심삼일
           </Link>
           </Link>
+          <Categories
+            category={category}
+            onSelect={onSelect}
+            className="right"
+          />
           {user ? (
           {user ? (
             <div className="right">
             <div className="right">
               <UserInfo>{user.username}</UserInfo>
               <UserInfo>{user.username}</UserInfo>

@@ -4,6 +4,7 @@ import Header from '../../components/common/Header';
 import { logout } from '../../modules/user';
 import { logout } from '../../modules/user';
 const HeaderContainer = () => {
 const HeaderContainer = () => {
   const { user } = useSelector(({ user }) => ({ user: user.user }));
   const { user } = useSelector(({ user }) => ({ user: user.user }));
+
   const dispatch = useDispatch();
   const dispatch = useDispatch();
   const onLogout = () => {
   const onLogout = () => {
     dispatch(logout());
     dispatch(logout());

-import axios from './axios';
+import axios from 'axios';
 const client = axios.create();
 const client = axios.create();
 export default client;
 export default client;

@@ -6,7 +6,7 @@ const HomePage = () => {
   return (
   return (
     <div>
     <div>
       <HeaderContainer />
       <HeaderContainer />
-      <Button>test</Button>
+      <Button>home</Button>
     </div>
     </div>
   );
   );
 };
 };

+import React from 'react';
+import HeaderContainer from '../containers/common/HeaderContainer';
+import Button from '../components/common/Button';
+
+const SettingPage = () => {
+  return (
+    <div>
+      <HeaderContainer />
+      <Button>setting</Button>
+    </div>
+  );
+};
+
+export default SettingPage;