📜 견적 요청 페이지

📝 과제 설명

• 프리온보딩 프론트엔드 코스 이번 과제는 견적 요청을 확인하는 페이지이다.

• 4명의 팀원에서 2명씩 짝을 나누었고 먼저 두 개의 팀을 이루어 1차 소통을 한 뒤에,
  다 같이 모여 2차 소통을 하면서 프로젝트를 진행했다.

• 초기 세팅부터 팀원들과 함께 TypeScript를 적용하여 개발했다.

• 제공해 준 Figma를 참고하면서 작업했고 너무나 잘 정리되어 있었기에 보다 수월한 시작을 할 수 있었다.

⚙️ 기술 스택

• React, React Hooks
• TypeScript, Styled-Component
• Figma, Git & GitHub, Build Tool (Create React App)

💻 기능 구현

• 상담중인 요청 카드만 식별하는 Toggle Switch 버튼 로직 구현

🕹 Toggle Switch 버튼

• 라이브러리를 사용하지 않고 직접 커스텀하여 스위치 버튼을 만들어 보았다.

    <ToggleBox> 
      <ToggleLabel>
        <ToggleInput type="checkbox" onClick={handleClick} />
        <ToggleBall />
      </ToggleLabel>
      <ToggleText>상담 중인 요청만 보기</ToggleText>
    </ToggleBox>

• input의 최초 모습을 지우고 ToggleBall을 활용해 새로운 토글 형태의 모습을 만들어 준 뒤에 input과 연결하여 checked 상황에서 transform과 같은 애니메이션 효과를 부여하여 만들었다.

interface EstimateProps {
  isChecked: boolean;
  setIsChecked: (value: boolean) => void;
}

export const Toggle = ({ isChecked, setIsChecked }: EstimateProps) => {
  const handleClick = () => {
    setIsChecked(!isChecked);
  };

• isChecked, setIsChecked를 받아와서 타입을 지정해 준 뒤에 true / false 값을 인식하도록 함수를 구현했다.

  &.대기중 {
    display: ${({ isChecked }) => (isChecked ? 'none' : 'block')};
  }

• 그 후에 요청 카드에서 컴포넌트에서 style 부분에 삼항 연산자를 부여하여 true / false에 맞게 카드를 보여주고 숨기는 효과를 부여하였다.

최초에 toggle 컴포넌트에 데이터를 담은 변수를 받아 해당 컴포넌트에서 checked 형태에 따라 filter를 통해 카드를 구현하는 방식으로 진행했으나,
filter로 인해 하나의 카드만 새로운 배열로 바뀐 뒤에 다시 되돌아오지 않아서 결국 style적인 부분으로 show : hide 하는 형태의 방법을 선택했다.
javascript 메소드를 활용하는 방법을 더욱 공부해야겠다는 것을 느꼈다.

🌅 최종 구현

시간이 한정적인 상황에서 맡은 부분을 구현하기 위해 다양한 방법으로 접근하는 생각을 해볼 수 있었고 이를 통해 또 발전할 수 있게 되어서 뿌듯했다. 매 순간 과제를 진행하면서 추가적으로 공부해야 하는 부분을 알게 되고 구현했던 과제물도 다시 코드를 리팩토링 및 복습하면서 끊임없이 성장하는 나를 만들어야겠다고 생각했다.🎇