• resolves [FE] 리뷰 없을 때 보여주는 돋보기 컴포넌트를 만든다. #1023

🚀 어떤 기능을 구현했나요 ?

• 받은 리뷰, 작성한 리뷰가 없을 때 보여주는 돋보기 컴포넌트를 생성했습니다.

🔥 어떻게 해결했나요 ?

• 다양한 곳에서 다양한 사이즈와 메세지를 사용할 것을 예상됩니다. 그래서 스타일의 경우 optional로 props를 받고, 두 줄 이상의 메세지도 보여줄 수 있도록 메세지를 children으로 받게 해주었습니다. (현재는 메세지가 한 줄이지만, 과거 프로젝트 경험 상 메세지 줄이 늘어났을 때 대처가 어려웠어서 처음 부터 메세지 자체를 children 으로 받아서 사용 시 원하는 스타일로 커스텀도 가능하게 했습니다.)

돋보기 아이콘 사이즈

돋보기 아이콘의 경우, 피그마의 사진 비율인 39/25을 최대한 사용하도록 했습니다.
height,width를 props로 받을 수 있지만 둘 중 하나만 있는 경우 props로 내려준 값을 기준으로 39/25 비율로 나머지 값도 자동으로 맞추어지도록 설계했습니다.
만약 height.width 둘 다 있는 경우는 둘 다 적용되며, 둘 다 없는 경우는 기본값이 적용됩니다. (수치 기본값은 아래를 참고해주세요)

수치 기본값

• 돋보기 height : 19.7rem
• 돋보기 width : 19.7rem에 39/25비율 적용된 값
• iconMessageGap (돋보기와 메세지 사이의 gap) : 3.2rem
• messageFontSize(메세지의 폰트 사이즈) : theme.fontSize.medium

다양한 사이즈, 메세지의 컴포넌트 사용 예시

• 사진
  

• 코드

         <div>
            <EmptyContent>
              <p>아직 작성한 리뷰가 없어요...</p>
            </EmptyContent>
            <EmptyContent iconHeight="10rem" iconMessageGap="2rem" messageFontSize="1.6rem">
              <p>아직 받은 리뷰가 없어요...</p>
              <p>리뷰를 기다려주세요.</p>
            </EmptyContent>
          </div>

📝 어떤 부분에 집중해서 리뷰해야 할까요?

• 컴포넌트를 만들면서 예시로 만들었지만 다른 팀원들이 실제 사용시, 재사용성이 저의 의도대로 구현이 될 지 봐야할 것 같아요.

📚 참고 자료, 할 말