아래에서 천천히 올라오는 Transition CSS

화살표 아이콘을 누르면 블랙 반투명 레이어가 밑에서 천천히 올라온다

화살표 아이콘을 다시 누르면 반대로 천천히 내려간다

const Container = styled.div`
    position: relative;
    display: flex;
    flex-direction: column;
`;

const TextContainer = styled.div`
    position: absolute;
    top: 66px;
    left: 31px; 
`;

const ArrowButton = styled.div`
    position: absolute;
    top: 178px;
    left: 29px; 
    cursor: pointer;
`;

const Layer = styled.div`
    position: absolute;
    bottom: 0px;
    background-color: black;
    opacity: 0.6;
    width: 100%;
    height: 0px;
    transition: all ease 1s 0s;
    
    &.visible {
        height: 208px;
        transition: all ease 1s 0s;
    }
`;


const InfoCard = () => {
    const [isClicked, setIsClicked] = useState<boolean>(false);

    return (
        <Container>
            <Image alt="infoCard1" width={413} height={430} src={'/images/about/infoCard1_4x.png'}/>
            <ArrowButton onClick={() => setIsClicked(!isClicked)}>
                {isClicked ? <SvgButtonArrowDown/> : <SvgButtonArrowRight/>}
            </ArrowButton>
            <Layer className={classNames({ visible : isClicked})}/>
        </Container>
    )
}

export default InfoCard;