[TIL] 엘리스 SW 엔지니어 트랙 Day 066

📖 오늘 배운 내용 - 2022.01.22

• styled-components
• 페이지네이션 - offset 방식

 

📝 재사용한 스타일을 커스텀하기

import styled, { css } from "styled-components";

export const Container = styled.div`
  background-color: white;
  border: 1px solid #f0f1f3;
  border-radius: 8px;
  width: 296px;
  height: 407px;
  box-sizing: border-box;
  padding: 28px 24px 20px;
  position: relative;
  display: flex;
  flex-direction: column;

  ${props => props.large && css`
    width: 398px;
    height: 409px;
    padding-top: 32px;
  `}
`;

<Card.Container large>

• props를 넘겨주고 css를 사용해서 스타일 적용
• font-size: ${props=> props.large ? 20 : 18}px; 이렇게도 적용 가능

 

📝 이미지 뒤에 배경 넣기

export const TrackCardIcon = styled.img`
  width: 28px;
  height: 28px;
  padding: 10px;
  background-color: #524FA0;
  border-radius: 18px;
`

<Card.TrackCardIcon src={iconUrl} alt={iconUrl} />

 

📝 애니메이션 추가

export function Corner() {
  return (
    <OuterCorner>
      <div />
    </OuterCorner>
  )
}

const OuterCorner = styled.div`
  width: 80px;
  height: 80px;
  box-shadow: inset 10px -10px 20px rgba(95, 95, 95, 0.1);
  border-radius: 0px 8px 0px 32px;
  position: absolute;
  right: 0;
  top: 0;

  :hover > div {
    background-color: #524FA0;
    width: 52px;
    height: 52px;
  }

  > div {
    // 안쪽 코너 스타일링
    transition: all 200ms ease-in-out 0ms;
    width: 36px;
    height: 36px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #F4F4F4;
    box-shadow: inset 10px -10px 20px rgba(95, 95, 95, 0.07);
    border-radius: 0px 8px 0px 32px;  
  }
`

 

📝 grid

const TracksContainer = styled.div`
  // 이곳에 트랙카드 컨테이너의 스타일링을 추가하세요
  display: grid;
  grid-template-columns: repeat(3, 398px); // 세로로 몇개를 두고 한개당 각각 컬럼의 width를 어떻게 설정할 것인가
  grid-column-gap: 19px; 
  grid-row-gap: 32px;
`;

 

📝 컴포넌트 map으로 뿌려주기

<TracksContainer>
  {Array(6).fill("").map((el, idx) => {
    return  <TrackCard key={`trackcard-${idx}`} />
  })}
</TracksContainer>

• Array(6)는 길이가 6개인 빈 배열을 만들고 .fill("") 거기를 빈 문자열로 채워준다. 그리고 idx의 값을 이용해 key값을 넣어준다.

 

📝 페이지네이션 :: offset 방식

[React] 리액트 페이지네이션 :: offset 방식

 

📝 검색창과 API 호출 연동하기

const filterConditons = searchValue ? `filter_conditions=${JSON.stringify({title: searchValue})}&` : ""

const trackUrl = `${API_END_POINT}track/list/?${filterConditons}offset=${offset}&count=6`;

• searchValue에 값이 있다면 위와 같이 api 주소에 맞춰 작성해준다.
• http://api-xxxxxxx/list/?filter_conditions={ title: test }&offset=0&count=8 이렇게 검색된다.

 

📝 Debounce와 Throttle이란?

[React] Debounce와 Throttle이란?

 

💡 오늘 깨달은 것

• 다른 사람이 만든 css를 보다 보면 아이디어가 좋다는 생각이 많이 든다. 내가 한다면 div로 한번 더 감싸서 스타일링했을 거 같은데, 코드를 보면 하나의 div로 모든 작업을 끝내고 있다.
• 페이지네이션과 Debounce는 이번 프로젝트에 사용할 수 있으면 사용해보자!