Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor/1270 헤어 콘텐츠 깨짐 현상 수정 및 모바일 버전 로고 변경 #1283

Merged
merged 6 commits into from
May 18, 2023
Merged

Refactor/1270 헤어 콘텐츠 깨짐 현상 수정 및 모바일 버전 로고 변경 #1283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fcaa0cf
refactor: 헤어 콘텐츠 깨짐 현상 수정 및 모바일 버전 로고 변경
GC-Park May 12, 2023
86a636d
refactor: 삼항 연산자를 이용해 코드 가독성 향상
GC-Park May 17, 2023
3665e9b
refactor: 탭 사이즈 변경
GC-Park May 17, 2023
cfd8fed
refactor: 새로운 네이밍과 상수 분리 적용
GC-Park May 17, 2023
039a69b
refactor: 가독성을 위해 useState 위치 변경
GC-Park May 17, 2023
89a3df7
refactor: 상수 파일 분리
GC-Park May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions frontend/src/components/NavBar/NavBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
/** @jsxImportSource @emotion/react */

import PropTypes from 'prop-types';
import { useContext, useState } from 'react';
import { useContext, useState, useEffect } from 'react';
import { useHistory, Link, NavLink } from 'react-router-dom';
import MobileLogo from '../../assets/images/woteco-logo.png';
import LogoImage from '../../assets/images/logo.svg';
import { PATH } from '../../constants';
import GithubLogin from '../GithubLogin/GithubLogin';
Expand All @@ -23,7 +24,8 @@ import {
loginButtonStyle,
} from './NavBar.styles';
import { UserContext } from '../../contexts/UserProvider';
import { APP_MODE, BASE_URL, isProd } from '../../configs/environment';
import { APP_MODE, isProd } from '../../configs/environment';
import MOBILE_MAX_SIZE from '../../constants/screenSize';

const navigationConfig = [
{
Expand All @@ -50,6 +52,9 @@ const NavBar = () => {

const [isDropdownToggled, setDropdownToggled] = useState(false);
const [isWritingDropdownToggled, setWritingDropdownToggled] = useState(false);
const [isMobile, setIsMobile] = useState(false);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useState끼리 모아두면 요 컴포넌트가 어떤 state를 포함하는지 좀 더 쉽게 알 수 있을 것 같네요 ㅎㅎ 참고만 해주세요~

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저희도 같은 생각입니다!!! 😊 수정하도록 하겠습니다 감사합니다!


const mobileScreen = window.matchMedia(`(max-width: ${MOBILE_MAX_SIZE})`);

const goMain = () => {
history.push(PATH.ROOT);
Expand Down Expand Up @@ -77,6 +82,16 @@ const NavBar = () => {
}
};

useEffect(() => {
const handleResize = () => {
setIsMobile(mobileScreen.matches);
};
mobileScreen.addEventListener('change', handleResize);
return () => {
mobileScreen.removeEventListener('change', handleResize);
};
}, [mobileScreen]);

return (
<Container
isDropdownToggled={isDropdownToggled || isWritingDropdownToggled}
Expand All @@ -87,13 +102,14 @@ const NavBar = () => {
>
<Wrapper>
<Logo onClick={goMain} role="link" aria-label="프롤로그 홈으로 이동하기">
<img src={LogoImage} alt="" />
<img src={isMobile ? MobileLogo : LogoImage} alt="" />
{!isProd && <span>{logoTag}</span>}
</Logo>
<Menu role="menu">
<Navigation>
{navigationConfig.map(({ path, title }) => (
<NavLink
style={{ whiteSpace: 'nowrap' }}
exact
key={path}
to={path}
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/constants/screenSize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const MOBILE_MAX_SIZE = '420px';

export default MOBILE_MAX_SIZE;