Today I learned

TIL. stepper line (feat. 코알라)

이번에는 stepper line에 대해서 작성하려고 한다.
이 부분은 내가 꽤 시행착오를 많이 겪은 부분이라서 꼭 기억해두고 싶어서 블로글에 글을 쓴다.

survey의 질문이 바뀔때마다 currentQ 라는 임의의 숫자가 1씩 증감하게끔 선언해주고 이를 Stepper component에 props로 내려줬다.

그리고 그 currentQ값이 변할때마다 stepper line이 바뀌게끔 설정했다.

📌 stepper Component

//currentQ를 인자로 받는다 ( 계속 변하는 숫자임 )
function Stepper({ currentQ }) {
  
  // 이부분은 밑에서 구체적으로 설명
  // 객체로 0,1,2,3 단계를 만들어주고 그에 따른 값이 자동적으로 들어갈 수 있게 객체로 mapping 해준다. 그럼 사용하기가 수월해지고 값이 안전하게 보관된다.
  const translateValueMapper = {
    0: { value: 0, width: '0%' },
    1: { value: 26, width: '30%' },
    2: { value: 56, width: '60%' },
    3: { value: 86, width: '90%' },
  };
  
  // 객체 안의 값을 사용해야하기때문에 더 간결하게 사용하기 위해서 다시 const로 더 깔끔하게 선언해준다.
  const transform = translateValueMapper[currentQ].value;
  const width = translateValueMapper[currentQ].width;

  return (
    <S.StepperBox>
      <S.Container>
        <S.ImgBox>
    // 	transform에는 위에 설정해둔 각 currentQ에 맞는 value가 들어간다. 
          <S.ImgList transform={transform}>
            <S.Persentage>{transform}%</S.Persentage>
            <S.Img alt="koala" src={Img} />
          </S.ImgList>
        </S.ImgBox>
        <S.StepperBg>
          <S.StepperBgLine></S.StepperBgLine>
        </S.StepperBg>
        <S.Stepper>
          <S.StepperLine width={width}></S.StepperLine>
        </S.Stepper>
      </S.Container>
    </S.StepperBox>
  );
}

export default Stepper;

📌 styled-component

import styled from 'styled-components';

export const ImgList = styled.li`
  ${({ theme }) => theme.flex('center', 'flex-start', 'column')}
  width: 100%;
  height: 40px;
  margin-bottom: 10px;

  // 위에서 전달해준 값에 따라 바뀌게끔 설정

  transform: ${({ transform }) => `translateX(${transform}%)`};
  transition: 0.9s ease-in;
`;

export const Persentage = styled.p`
  margin: 0 0 5px 12px;
  color: rebeccapurple;
  font-weight: bold;
`;

export const Img = styled.img`
  width: 10%;
`;

export const StepperBg = styled.ul`
  width: 100%;
  display: flex;
`;

export const StepperBgLine = styled.li`
  position: relative;
  width: 100%;

  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    top: 15px;
    background-color: #ddd;
  }
`;

export const Stepper = styled.ul`
  width: 100%;
  display: flex;
`;

export const StepperLine = styled.li`
  position: relative;

  // 위에서 전달해준 값에 따라 바뀌게끔 설정

  width: ${({ width }) => `${width}`};
  transition: width 0.8s ease-in;

  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    top: 15px;
    background-color: rebeccapurple;
  }
`;

뭔가 stepper line을 after과 before 만 이용해서 하시는 분들도 계신데 내게는 좀 어려웠고 시간도 없었다.
그래서 stepper line뒤에 회색 배경을 깔아주고 width 값이 바뀌는 div를 하나 더 만들어서 그 위에 씌우는 방식으로 만들었다.

📌 꼭 기억하고 싶은 코드

위에서 언급했던 내게 힘들었던 부분

코드 수정 전에는 currentQ 값에 따라서 stepper line 이 바뀔 수 있는 translateValue를 만들어줬는데 상당히 복잡하고 일을 두세번 더 하는 느낌이었다.

  const stpperChange = () => {
    if (currentQ === 0) {
      setTranslateValue(0);
    } else if (currentQ === 1) {
      setTranslateValue(26);
    } else if (currentQ === 2) {
      setTranslateValue(56);
    } else if (currentQ === 3) {
      setTranslateValue(86);
    }
  };

코드 리뷰를 받고 수정후
이 모든 값을 객체로 만들고 currentQ값만 받아와서 이 값들을 다 속성값으로 넘겨주면 styled-component에서 사용만해주면 되었다.
백마디 말보다 정말 이렇게 코드를 보니 이해가 빨리간다. 너무 깔끔하다

  const translateValueMapper = {
    0: { value: 0, width: '0%' },
    1: { value: 26, width: '30%' },
    2: { value: 56, width: '60%' },
    3: { value: 86, width: '90%' },
  };