[애플클론] styled-components로 navbar 구현

nosiba·2022년 5월 24일

애플클론

스타일 컴포넌트와 미디어쿼리를 이용하여 반응형 navbar 구현
미디어쿼리 Breakpoint 768px 사용

⭐️ 사용한 컴포넌트명 & 작동 구조

NavContainer : navbar 배경 컴포넌트, 배경색 지정, position fixed
Content : 실질적으로 내용을 담고있는 div, 패딩 설정으로 양쪽 여백을 주고, display flex로 아이템을 가로정렬 시켜줌
MenuToggle : 모바일 화면에서 Links 화면을 토글해주는 버튼, position absolute로 위치 설정, PC 사이즈에선 display none으로 숨김
Logo, CartIcon : 768px 이하에서 position absolute로 로고는 가운데, 카트아이콘은 우측으로 가도록 설정해줌
Links : display flex로 가로정렬, 768px 이하에선 flex-direction column으로 세로정렬, 토클버튼 클릭시 노출

🖥 PC 화면

📱 Mobile 화면 (768px 이하)

⭐️ 주요기능

메뉴 토글버튼

true, false값을 갖는 state만들기, 기본값 false
onClick이벤트로 클릭시 true > false, false > true가 되도록 값 변경
삼항연산자를 사용하여 true경우 x, false경우 =(bar icon) 보여줌

 const [clicked, setClicked] = useState(false);
 const onClick = () => setClicked(!clicked);


<MenuToggle onClick={onClick}>
   <FontAwesomeIcon icon={clicked ? faXmark : faBars} />
</MenuToggle>

미디어쿼리 & 조건문 animation효과

Links 컴포넌트

기본 스타일링, display : flex로 가로정렬
768px 이하 스타일링
- clicked가 true일 때, display : block으로 화면 노출
- clicked가 false일 때, display : none으로 화면 숨김
스타일컴포넌트에서 조건문 사용법, return + 벡틱안에 css코드 작성
${ props => { if ( props.작명 ){return` css코드`} else { return` css코드` } } }
스타일컴포넌트에 props전달
<Links 작명={ clicked } />

// clicked state 사용

const Links = styled.ul`
	display : flex;
	justify-content: space-between;

	// 768px 이하에서 세로정렬
	@media screen and (max-width : 768px){
		
		flex-direction: column;
		align-items : flex-start;
		
		//props.toggle = clicked
		${ props => {
        	if( props.toggle ){
            	return`          
					display: block;
				`
            } else {
            	return`
					display : none;
				`
            }
        }}
	
	}
`

//스타일컴포넌트 사용시 props전달

<Links toggle={clicked}/>

⚙️ 개선사항

~~- 화면 너비 줄어들때, navbar 로고 움직이지 않도록 수정하기~~ 06.17 수정완료

width가 줄어들 때, navbar 정렬이 반박자(?) 느린 문제점이 있었다. 이것 저것 시도해보았으나,, 결과는 같음 🥺 결론은 width의 문제였다!! 계속 보다보니,, nav바 배경의 움직임 자체가 반응이 느렸다. 반면 아래 headercontents( 밝은회색 배경 )은 화면의 움직임과 동일하게 움직이는 것을 보고 비교해보니 navbar width : 100vw / headercontents : 100%으로 되어있었다. navbar의 width를 100%로 수정해주니 깔끔하게 해결!
100% = 100vw 같은 개념으로 생각했는데, 나 자신 반성하며,, 단위 개념 다시 공부하기ㅠㅠ