쇼핑몰 프로젝트의 반응형 작업을 하다보니 CSS도 동적으로 변화해야 할 상황이 여러번 있었다.
querySelector와 addEventListener 로만 동적인 CSS작업을 하던 나에게 React가 주는 첫 CSS 도전과제였다.
이 과제의 해결법을 적어본다.
장바구니에 hover하면 색이 칠해진 장바구니를 보여준다.
export default function Cart() {
const [isHover, setIsHover] = useState(false);
const {
cartQuery: { data: productsInCart },
} = useCart();
return (
<Link
className="absolute right-5 md:static flex h-full pt-5 pb-3"
to="/carts"
onMouseEnter={() => setIsHover(true)}
onMouseLeave={() => setIsHover(false)}
>
{isHover ? (
<BsBagFill className="text-lg mr-1" />
) : (
<BsBag className="text-lg mr-1 " />
)}
<span className="hidden md:inline text-sm font-normal">
{productsInCart && (
<span>
${productsInCart.reduce((acc, cur) => acc + Number(cur.price), 0)}
</span>
)}
</span>
</Link>
);
}
isHover 라는 상태를 생성하여 마우스를 요소 위에 올렸을 때, 마우스가 요소를 벗어났을 때 변화를 줬다.
onMouseEnter={setIsHover(true)}, onMouseLeave={setIsHover(false)}
햄버거를 클릭하면 navbar가 왼쪽에서 오른쪽으로 나온다.
export default function SideNav({ user, isSideNavOpen }) {
const navItemList = ["Home", "Men", "Women", "Accessories", "Shoes", "Blog"];
return (
<nav
className={`absolute w-80 h-screen top-14 left-0 z-10 bg-white border border-gray-300 transition-all md:hidden
${!isSideNavOpen && "-translate-x-full"}`}
>
<SignAndUser_Side />
<div className={`flex flex-col`}>
{navItemList.map((navItem, i) => (
<NavItem navItem={navItem} key={i} />
))}
</div>
</nav>
);
}
isSideNavOpen 으로 열렸는지 확인하고, 열리지 않았다면 translate-x를 '-'로 조작하여 안보이게 하다가
isSideNavOpen이 ture가 되면 translate-x가 사라져서 navbar가 보이게된다.
뭐지? 뭘써야되지? 머릿속에 있는걸 전혀 못꺼내겠다...
개발 글을 보기만 하다가 막상 써보니 정말 어렵다...
난 이런 글들을 보면서 공부한거구나
개발 블로거들은 다들 대단하신 것 같다.
Notion에 공부한걸 적다가 여기다 적어보는건데 나만 보는게 아니라서 형식에 너무 신경쓰게된다.
Notion에서 공부한걸 적는것은 나쁘지 않았던거 같은데 적는곳이 달라서 그런지 잘 안써진다.
내일은 시간내서 Velog에 글을 어떻게 써야할지 알아봐야겠다.
최대 고민