Day15
Banner
걱정이 많은 배너 파트를 작업해야한다. 캐러셀을 만지는 게 아직 어려운데 잘 됐으면 좋겠다.
스타일을 커스텀 해줘야하는 라이브러리라서 개발자도구를 켜서 하나하나 뜯어보았다.
클래스명을 찾아서 스타일을 지정해주었더니 잘 작동한다.
그런데 prev 버튼만 작동하지 않아서 찾아보았더니 z-index를 조정해주면 된다고 해서 적용해주었더니 잘 된다!
이 버튼은 커스텀을 해야해서 일단 빼놓고 나중에 디테일 수정 할 시간 있으면 수정해보도록 하겠다.
무사히 캐러셀 작업을 마치고 각 페이지별 배너도 완성했다.
Aside
사이드바 작업을 하면 공통 레이아웃 컴포넌트는 끝난다!!
사이드바는 바디 부분에 영향을 주지 않게 존재해야해서 조금 생각해야한다.
바디 부분이 1200px이고 사이드바 부분에 관계없이 중앙에 있으면 좋겠다고 생각했는데 사이드바 위치만 잡으면 자꾸 움직이고 위치잡기가 힘들다.
그리고 사이드바가 있는 페이지는 1200px보다 바디가 길어지기때문에 그냥 바디+사이드바 해서 1200px로 변경했다.
그리고 메뉴 클릭 시 현재 url에 따라 색이 변하게 하는 효과를 구현하는데에서 시간을 많이 썼다ㅠㅠ
구현하고 나니 간단하다고 느꼈지만 여기까지 오는데가 많이 힘들었다..
일단 현재 url을 가져와서 이동한 url과 비교해서 일치하면 색이 들어오게 해야겠다고 생각은 했는데, Nextjs에서는 next/router의 aspath를 사용했는데 react에서 그걸 구현하려면 어떻게 해야할지 😭
검색해서 알아낸 결과, 주소는 uselocation()의 result 값 안에 있는pathname을 사용했다.
콘솔로 찍어서 현재의 주소값을 잘 가져오는 걸 확인하고, className을 지정해서 스타일을 준다.
const Aside01 = () => {
const location = useLocation();
const path = location.pathname;
const category = [
{name: "카페", page: "/explore/cafe"},
{name: "오락", page: "/explore/entertainment"},
{name: "문화", page: "/explore/culture"},
]
return (
<div className="aside01">
<ul className="aside01__list">
{category.map((menu) => (
<li key={menu.page} className="aside01__menu" >
<Link to={menu.page} className={path === menu.page ? "aside01__item--active" : "aside01__item"}>
{menu.name}
</Link>
</li>
))}
</ul>
</div>
);
};
성공😭
