TIL / 20210727

✍ 오늘 한 일

와이어프레임을 바탕으로 맥주리스트 페이지, 맥주 상세페이지 UI를 만드는 작업을 했다.

그리고 이번 프로젝트에서 사용하게될 Redux Toolkit을 공부하였다.

반복적으로 디자인 작업을 하며 css적인 감을 익혀가고 있는 것 같아 좋다..

✍ 공부 내용 기록

1.react-slick을 이용한 카테고리 처리
총 9개의 카테고리를 모바일 뷰에서 한번에 보여주기는 어렵다고 판단하여
slick-carousel를 이용해서 카테고리 목록을 슬라이더 처리해줬다.
그리고 목록 중 특정 카테고리를 클릭하면 해당 페이지로 이동하도록 작업하였다.

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const BeerType = ({ items, setIs_Search }) => {
    const settings = {
        infinite: false,
        speed: 200,
        slidesToShow: 5,
        slidesToScroll: 3,
        variableWidth: true,
        arrows: false,
    };

    return (
        <Container>
            <StyledSlider {...settings}>
                {true && items?.map((item, idx) => (
                    <div 
                        onClick={() => {
				 history.push(`/beer/list/${item._id}`)
                        }} key={idx}>
                        {item.name}
                    </div>
                ))}
            </StyledSlider>
        </Container>
    );
}

export default React.memo(BeerType);

2.클릭된 버튼인지를 판별하고 시각적인 디자인을 다르게 적용하기 위해서는
버튼 태그에 :focus를 적용해 적용할 수 있다.
네이버 웨일이나, 삼성 인터넷 등 브라우저와 호완은 불가능해 이 점은 추가 고려가 필요해 보인다.

const ButtonContainer = styled.div`
    button {
        :focus {
            border: none;
            border-bottom: 2px solid #eee;
        };
    }
`;

3.특정 버튼을 제외하고 적용하고 싶을 때는 :not을 이용하면 된다.
:not 경우 IE 호환도 어려워 사용하지 않았다.

button {
        :not(:first-child, :last-child):focus {
            background: #f56f98;
            border: 1px solid #f56f98;
            color: #fff;
    }