diff --git a/src/components/Common/Header/index.tsx b/src/components/Common/Header/index.tsx
index 665bc17..a43a368 100644
--- a/src/components/Common/Header/index.tsx
+++ b/src/components/Common/Header/index.tsx
@@ -1,6 +1,7 @@
import React, { MouseEventHandler, useCallback, useState } from 'react';
import { useSelector } from 'react-redux';
import { Link, useLocation } from 'react-router-dom';
+import { getProfileInfoSelector } from '../../../reducer/profile';
import ProfileImage from '../ProfileImage';
import LoginModal from '../LoginModal';
@@ -9,9 +10,8 @@ import Modal from '../Modal';
import ReciperLogo from '../../../images/Logo.png';
-import { getProfileInfoSelector } from '../../../reducer/profile';
-
import { HeaderContainer, HeaderRight, LoginBtn, LogoWrapper, Nav, Logo } from './styles';
+import HeaderResponsive from '../HeaderResponsive';
interface Props {
isScrollBackground: boolean;
@@ -58,6 +58,7 @@ const Header = ({ isScrollBackground, isScrollShadow, isScrollTransition, isLine
+
{showModal &&
(loginSuccess ? (
diff --git a/src/components/Common/Header/styles.ts b/src/components/Common/Header/styles.ts
index 13628b0..f816e19 100644
--- a/src/components/Common/Header/styles.ts
+++ b/src/components/Common/Header/styles.ts
@@ -10,12 +10,16 @@ export const HeaderContainer = styled.div<{
justify-content: space-between;
position: fixed;
z-index: 10;
- transition: ${({ isScrollTransition }) => (isScrollTransition ? 'all 0.5s ease-in-out' : 'none')};
+ transition: ${({ isScrollTransition }) => (isScrollTransition ? 'all 0.2s ease-in' : 'none')};
width: 100%;
height: 72px;
padding: 0 32px;
background-color: ${({ isScrollBackground }) => (isScrollBackground ? '#fff' : 'none')};
box-shadow: ${({ isScrollShadow }) => (isScrollShadow ? '0px 2px 10px rgba(0, 0, 0, 0.1)' : 'none')};
+
+ @media screen and (max-width: 768px) {
+ display: none;
+ }
`;
export const LogoWrapper = styled(Link)`
@@ -30,7 +34,7 @@ export const Logo = styled.img`
`;
export const HeaderRight = styled.div`
- ${({ theme }) => theme.align.flexCenter}
+ ${({ theme }) => theme.align.flexCenter};
`;
export const initialFont = styled.div`
@@ -60,7 +64,7 @@ export const Nav = styled(initialFont)<{ isLineColor: boolean }>`
& > a::after {
width: 0;
- height: 0.2vw;
+ height: 3px;
background: ${({ theme }) => theme.color.pointColor};
left: 50%;
}
diff --git a/src/components/Common/HeaderResponsive/index.tsx b/src/components/Common/HeaderResponsive/index.tsx
new file mode 100644
index 0000000..3b81625
--- /dev/null
+++ b/src/components/Common/HeaderResponsive/index.tsx
@@ -0,0 +1,93 @@
+import React, { useCallback, useState } from 'react';
+import { getProfileInfoSelector, resetProfileState } from '../../../reducer/profile';
+
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import { HeaderContainer, HamburgerButton, MenuItem } from './styled';
+import { LogoWrapper, Logo } from '../Header/styles';
+
+import ReciperLogo from '../../../images/Logo.png';
+import Modal from '../Modal';
+import LoginModal from '../LoginModal';
+
+const HeaderResponsive = (): JSX.Element => {
+ const { state } = useLocation<{ isLogged: boolean }>();
+ const [showModal, setShowModal] = useState(state ? state.isLogged : false);
+ const loginSuccess = window.localStorage.getItem('loginSuccess');
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const { id, email } = useSelector(getProfileInfoSelector);
+
+ const [openMenu, setOpenMenu] = useState(false);
+
+ const onGoToRecruit = (): void => {
+ history.push('/recruit');
+ };
+
+ const onGoToWorkspace = (): void => {
+ history.push('/project');
+ };
+
+ const onGoToProfile = (): void => {
+ history.push(`/profile/${id}`);
+ };
+
+ const onGoToRecruitCreate = (): void => {
+ history.push('/recruitcreate');
+ };
+
+ const onGoToProjectCreate = (): void => {
+ history.push(`/projectcreate`);
+ };
+
+ const onGoToProject = (): void => {
+ history.push(`/project`);
+ };
+
+ const onLogout = (): void => {
+ alert('정상적으로 로그아웃 되었습니다.');
+ window.localStorage.clear();
+ dispatch(resetProfileState());
+ setShowModal(false);
+ history.push(`/recruit`);
+ };
+
+ const onOpenMenu: React.MouseEventHandler = useCallback(e => {
+ e.stopPropagation();
+ setShowModal(true);
+ }, []);
+
+ return (
+
+
+
+ Reciper
+
+
+
+
+ {loginSuccess ? (
+ <>
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+
+ {showModal && (
+
+
+
+ )}
+
+ );
+};
+
+export default HeaderResponsive;
diff --git a/src/components/Common/HeaderResponsive/styled.ts b/src/components/Common/HeaderResponsive/styled.ts
new file mode 100644
index 0000000..2f80d98
--- /dev/null
+++ b/src/components/Common/HeaderResponsive/styled.ts
@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+
+import { GiHamburgerMenu } from 'react-icons/gi';
+
+export const HeaderContainer = styled.header<{ openMenu: boolean; useEmail: string }>`
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: fixed;
+ z-index: 10;
+ width: 100%;
+ height: ${({ openMenu, useEmail }) => (openMenu ? (useEmail === '' ? '200px' : '340px') : '72px')};
+ padding: 17px 32px;
+ font-family: 'NanumSquareR';
+ font-size: 18px;
+ color: #000;
+ background-color: #fff;
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+
+ & > article {
+ cursor: pointer;
+ display: ${({ openMenu }) => (openMenu ? 'flex' : 'none')};
+ flex-direction: column;
+ width: 100%;
+ margin-top: 16px;
+ text-align: center;
+
+ & > section:hover {
+ color: ${({ theme }) => theme.color.pointColor};
+ }
+ }
+
+ & > button {
+ position: absolute;
+ top: 24px;
+ right: 32px;
+ font-size: 24px;
+ }
+
+ @media screen and (min-width: 768px) {
+ display: none;
+ }
+`;
+
+export const MenuItem = styled.section`
+ transition: all 0.2s linear;
+ padding: 8px 8px;
+`;
+
+export const HamburgerButton = styled(GiHamburgerMenu)``;
diff --git a/src/components/Common/HeaderUserMenu/index.tsx b/src/components/Common/HeaderUserMenu/index.tsx
index 404977a..5c9fc87 100644
--- a/src/components/Common/HeaderUserMenu/index.tsx
+++ b/src/components/Common/HeaderUserMenu/index.tsx
@@ -39,6 +39,7 @@ const HeaderUserMenu = ({ show, setShowModal, onClose }: Props): JSX.Element =>
};
const onLogout = (): void => {
+ alert('정상적으로 로그아웃 되었습니다.');
window.localStorage.clear();
dispatch(resetProfileState());
history.push(`/recruit`);
@@ -53,8 +54,6 @@ const HeaderUserMenu = ({ show, setShowModal, onClose }: Props): JSX.Element =>
- {/*
- */}