Pull Request - Branch header: Add responsive feature to header

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
 					</LoginBtn>
 				</HeaderRight>
 			</HeaderContainer>
+			<HeaderResponsive />
 			{showModal &&
 				(loginSuccess ? (
 					<HeaderUserMenu show={showModal} setShowModal={setShowModal} onClose={onCloseMenu} />

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%;
 	}

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<boolean>(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<boolean>(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<HTMLDivElement> = useCallback(e => {
+		e.stopPropagation();
+		setShowModal(true);
+	}, []);
+
+	return (
+		<HeaderContainer openMenu={openMenu} useEmail={email}>
+			<LogoWrapper to="/landing">
+				<Logo src={ReciperLogo} />
+				Reciper
+			</LogoWrapper>
+			<article>
+				<MenuItem onClick={onGoToRecruit}>팀원모집</MenuItem>
+				<MenuItem onClick={onGoToWorkspace}>레시피 프로젝트</MenuItem>
+				{loginSuccess ? (
+					<>
+						<MenuItem onClick={onGoToProfile}>프로필</MenuItem>
+						<MenuItem onClick={onGoToRecruitCreate}>팀원 모집하기</MenuItem>
+						<MenuItem onClick={onGoToProjectCreate}>새 레시피 만들기</MenuItem>
+						<MenuItem onClick={onGoToProject}>레시피 바로가기</MenuItem>
+						<MenuItem onClick={onLogout}>로그아웃</MenuItem>
+					</>
+				) : (
+					<MenuItem onClick={onOpenMenu}>로그인/회원가입</MenuItem>
+				)}
+			</article>
+			<button onClick={() => setOpenMenu(!openMenu)}>
+				<HamburgerButton />
+			</button>
+			{showModal && (
+				<Modal setShowModal={setShowModal}>
+					<LoginModal />
+				</Modal>
+			)}
+		</HeaderContainer>
+	);
+};
+
+export default HeaderResponsive;

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)``;

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 =>
 						<MenuItem onClick={onGoToRecruitCreate}>팀원 모집하기</MenuItem>
 						<MenuItem onClick={onGoToProjectCreate}>새 레시피 만들기</MenuItem>
 						<MenuItem onClick={onGoToProject}>레시피 바로가기</MenuItem>
-						{/* <MenuItem>구매내역</MenuItem>
-						<MenuItem>고객센터</MenuItem> */}
 						<MenuItem onClick={onLogout}>로그아웃</MenuItem>
 					</MenuContainer>
 				</UserMenu>