2022.05.06

classnames 라이브러리 추가

import classNames from 'classnames.bind'

const cx = classNames.bind(styles)

  classNames={cx(styles.title, styles.bold)}
  classNames={cx(styles.title, styles.bold, {[styles.show]: isShow})}

react js -> scss에 변수값 넘겨주기

	<div className={styles.range} style={{'--persent':`${backgroundGradientText}%`, '--color':categoryColor}} />

	.range {
    position: absolute;
    width: var(--persent);
    height: 2px;
    background: var(--color);
    border-radius: 2px;
    box-shadow: rgba(165, 203, 247, 0.3) 0px 0px 0px 1.5px;
    transition: 1s cubic-bezier(0.93, -0.26, 1, 1);

    &::after {
      position: absolute;
      left: 100%;
      width: 5px;
      height: 2px;
      background-color: var(--color);
      transform: translate(-50%, -50%) rotate(90deg);
      transform-origin: center;
      content: '';
    }
  }

js 파일에서 --persent 값을 style 에 지정해주고
scss 파일에서 var(--persent)로 넘겨주면 변수 값을 서로 공유 할 수 있다.

github
깃은 정말 중요한거 같다. 팀원들과 각자 branch를 merge하는 과정에서 엄청 많은 충돌을 만날 수 있었다. 다시 한번더 git 공부의 필요성을 느꼇다.