설명

헤더와 성향테스트 목록이 있는 페이지 입니다.

헤더와 성향테스트는 반응형 쿼리가 적용 되어 있습니다.

getServerSideProps를 사용한 데이터 pre-fetching

시작 페이지는 SEO에 노출되어야 합니다. 따라서, getServerSideProps를 사용하여 시작 페이지에 표시될 성향 테스트 목록의 데이터를 pre-fetching하였습니다

성향테스트 목록은 4:3 비율 적용

참고

https://nuhends.tistory.com/69

<CardItem> {/* width: 25% */}
    <CardImageWrapper> {/* padding-top: 75% */}
      <Image />  {/* width: 100% height: 100% */}
    </CardImageWrapper>
</CardItem>;

부모 요소의 width에 % 값을 적용 → 화면 크기에 따라 가변

자식 요소에 padding-top: n%→ 부모 요소 width를 기준으로 자식 요소의 높이 설정 가능

ex)

padding-top: 200% 줄 경우 1:2 비율

padding-top: 75% 줄 경우 4:3 비율