먼저 피드백부터 수정 후 UI 간단 정렬하기 미션을 진행한다.

• 코드리뷰 수정

<aside> 💡

Mission

UI 구현 조건

• display: flex 사용
• gap 사용: 8px
• columns (열)의 너비는 33.3333% 입니다 (100%의 3등분)

img 구현 조건

• object-fit을 사용하여 이미지가 찌그러지지 않게 해주세요
• aspect-ratio 비율을 이용하여 1:1 비율을 적용해주세요

코드리뷰 요청시 위의 css가 어떤 역할을 하는지 각 한 줄씩 적어주세요

</aside>

스타일링을 위해 SearchPage.jsx 내부에 직접 스타일을 작성하지 않고, 별도의 SearchPageStyled.js 파일을 생성하여 import하는 방식을 선택했다. 이는 코드의 간결성과 역할 구분을 위한 결정이었다.

스타일링 정리

import styled from "styled-components";

export const SearchWrapper = styled.div`
  padding: 20px;
`;

export const ResultsContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
`;

**export const ImageItem = styled.div`
  width: calc(33.3333% - 5.333px);
`;**

export const Image = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
`;

export const LoadingText = styled.div`
  text-align: center;
  margin-top: 20px;
`;

export const ErrorText = styled.div`
  color: red;
  text-align: center;
  margin-top: 20px;
`;

export const ScrollArea = styled.div`
  text-align: center;
  margin-top: 20px;
`;

코드 리뷰 및 설명

각 스타일 컴포넌트의 역할과 CSS 속성에 대한 설명:

1. SearchWrapper: 전체 검색 결과를 감싸는 컨테이너로, 내부 요소들에 20px의 패딩을 적용합니다.
2. ResultsContainer:
   • display: flex;: Flexbox 레이아웃을 사용하여 자식 요소들을 유연하게 배치합니다.
   • flex-wrap: wrap;: 자식 요소들이 한 줄에 모두 들어가지 않을 때 다음 줄로 넘어가게 합니다.
   • gap: 8px;: 자식 요소들 사이에 8px의 간격을 만듭니다.
3. ImageItem:
   • width: calc(33.3333% - 5.333px);: 각 이미지 아이템의 너비를 설정합니다. 33.3333%는 3등분을 의미하며, 5.333px를 빼는 이유는 gap으로 인한 여백을 고려한 것입니다.
4. Image:
   • width: 100%; height: 100%;: 이미지가 부모 컨테이너를 가득 채우도록 합니다.
   • object-fit: cover;: 이미지의 비율을 유지하면서 컨테이너를 꽉 채웁니다.
   • aspect-ratio: 1 / 1;: 이미지의 가로 세로 비율을 1:1로 유지합니다.
5. LoadingText, ErrorText, ScrollArea: 로딩, 에러, 스크롤 영역에 대한 스타일링으로, 텍스트 정렬과 여백을 조정합니다.

width 계산에 대한 설명:

원래 calc(33.3333% - 8px)에서 calc(33.3333% - 5.333px)로 변경된 이유는 다음과 같습니다:

1. 3개의 열이 있고, 각 열 사이에 8px의 gap이 있으므로 총 여백은 16px (8px * 2) 입니다.
2. 이 16px의 여백을 3개의 열에 균등하게 분배하려면, 각 열에서 5.333px (16px / 3)을 빼야 합니다.