[5/26 TIL] 팀 과제 리뷰

3번째 과제는 메드업 팀 과제였다. 리액트랑 타입스크립트가 아직 낯설고 어려워서 그동안 부수적인 역할을 많이 했어서, 이번에는 제일 어려울것 같은거를 맡았는데, 실수였던것 같다.
일단 팀으로 과제할 때는 내가 할 수 있는게 무엇인지 판단하는 메타인지(?)가 필요한것같다. 이번 과제에는 내 힘으로 감당할수 없는 영역이 많아서 내가 맡았던 많은 부분들을 팀원들이 대신 해주었다. 너무 미안하고 자괴감이 들었지만 중도하차를 하는 것보다는,나의 발전과 처음에 다졌던 의지를 생각하며 더 이상 민폐를 끼치지 않도록 더 열심히 공부하고 다른 잘하는 분들의 코드를 참고하면 좋을 거라고 생각한다. 그래서 이번 우리팀 메드업 과제를 보면서 어떤식으로 코드를 짰는지 살펴보려고한다.

DropDown box

메드업 과제에서 3종류의 버튼이 나왔다.

모두 드롭다운 버튼인데 오른쪽에 화살표가 있는것은 공통이지만 모양이 조금씩 다르고 텍스트도 다르다. 이런 드롭다운 버트는 하나의 컴포넌트로 만들어 놓고, props 를 다르게 주어 커스텀 하면 된다.
코드를 한번 살펴보자.

const Dropdown = ({ option, title, color, onClick }: IProps) => {

};

프롭스로는 4가지 가 있고,
컴포넌트에 프롭스를 내려주려면 위쪽에 타입정의를 해줘야한다.

interface IProps {
  option: Array<string>;
  title: string;
  color?: String;
  onClick: (value: string) => void;

처음 보여지는 타이틀이 모두 다르기 때문에 title 이라는 props 로 분기를 태운다.

  const asideTitle = useRecoilValue(asideState);
  const advertisingStatusTitle = useRecoilValue(advertisingStatusState);

  const asideDropDown = title === asideTitle ? `${styles.asideDropDown}` : '';
  const advertisingStatusDropDown = title === advertisingStatusTitle ? `${styles.advertisingStatusDropDown}` : '';

그리고 asideDropDown, advertisingStatusDropDown 에 할당된 값을

return (
   <div className={`${styles.dropdown} ${asideDropDown} ${advertisingStatusDropDown}`} ref={dropDownRef}>
     ...
   </div>
 );

return 안에다가 className 으로 박아준다.

그리고 scss 모듈에 와서 해당 클래스명에 스타일을 주면된다.

.dropdown {
  &.asideDropDown {
    width: 240px;
    height: 60px;
  }

  &.advertisingStatusDropDown {
    width: 80px;
    border: none;
  }
}

  const [asideTitle, setAsideTitle] = useRecoilState(asideState);
  <Dropdown title={asideTitle} onClick={setAsideTitle} />

저렇게 해서,


너비가 큰 버튼과 border 가 없는 버튼들을 구분해서 css 를 줄 수 있게 되었다.

나는 컴포넌트에서 props 로 내려서 className 으로 css 를 주는 방법을 몰라서 앞에 동그란 색깔 원이 있는 버튼을 만드는데 어렵게 구현한것같다.
SelectBox.tsx

    <div className={styles.selectBox}>
      <button type='button' data-color={color}>
  		...
  	  </button>
  		...
  	</div>

LineChart.tsx

 <Dropdown color='blue' />
 <Dropdown color='green' />

  button {
    width: 100%;
    height: 100%;
    padding: 0 30px 0 15px;
    text-align: left;

    &[data-color] {
      position: relative;
      padding-left: 40px;

      &::after {
        position: absolute;
        top: 50%;
        left: 20px;
        width: 10px;
        height: 10px;
        content: '';
        border-radius: 50%;
        transform: translateY(-50%);
      }

      &[data-color='blue']::after {
        background-color: colors.$MADUP_SKYBLUE;
      }

      &[data-color='green']::after {
        background-color: colors.$MADUP_LIGHTGREEN;
      }
    }
  }

근데 위의 방식을 title 바꾼것처럼 리팩토링 해보자.

Dropdown.tsx

  let styleColor;
  if (color === 'blue') {
    styleColor = `${styles.category} ${styles.colorBlue}`;
  } else if (color === 'green') {
    styleColor = `${styles.category} ${styles.colorGreen}`;
  }

	...
    
  return (
    <div className={`${styles.dropdown} ${styleColor}`}>
		...
    </div>
  );

LineChart.tsx

          <Dropdown color='blue'  />
          <Dropdown color='green' />

dropdown.module.scss

.dropdown {
  &.category {
      button {
        position: relative;
        padding-left: 40px;

        &::after {
          position: absolute;
          top: 50%;
          left: 20px;
          width: 10px;
          height: 10px;
          content: '';
          border-radius: 50%;
          transform: translateY(-50%);
        }
      }
    }

    &.colorBlue button::after {
      background-color: colors.$MADUP_SKYBLUE;
    }

    &.colorGreen button::after {
      background-color: colors.$MADUP_LIGHTGREEN;
    }
}

조건문으로 클래스 명을 박아 줄 수 있다는 것은 큰 깨닳음이다. 항상 props 내려주는게 어렵다. 내려줄 때마다 타입 정의하는 것도 어렵고.. 이 예제를 보면서 앞으로 많은 응용을 할 수 있을 것같다.

근데 항상 의문인것은.. 이게 최선인가??

궁금하다. 더 좋은 방법이 있을지.