📣 이 시리즈는...

• 우아한 테크캠프 4기에서 마지막으로 진행한 프로젝트 전체를 복기해본 문서 시리즈입니다.
• 제가 작성하지 않은 코드도 포함해서 복기했기에, 오류가 있을 수도 있는 개인적인 학습 기록을 위한 문서입니다!

ET네 만물상 - GitHub Repository / 배포 링크

• 현재 배포 링크는 내부 문제로 API서버가 동작하지 않습니다.. 조만간 해결할 예정..

styled-components

• style은 styled-components를 사용했다.
• 큰 챌린지는 없었지만 반응형을 제대로 컨트롤 해 본 것도 처음이었다.

선택 이유

• 가장 친숙하기 때문이다.

• 이 프로젝트에서 우리 목표는 높은 완성도였기에 스타일에 대한 학습 시간을 절약하기로 했다.

• 또한 아직 styled-components를 완벽히 다룬다고 말 할 수도 없었기 때문에 시간 절약 / 숙련도 증가 정도의 이유라고 보면 되겠다.

global / theme

global

• globalStyle은 말 그대로 글로벌한 css값을 설정한다. class라던가, reset이라던가

theme

• 어플리케이션에 일관된 스타일을 적용하기 위해 사용한다.

• 폰트, 사이즈, 컬러, 간격, border-radius 등을 정해두고 사용함으로써 일관된 UI를 구현할 수 있다.

유틸

반응형을 위한 media

const customMediaQuery = (maxWidth: number): string =>
  `@media (max-width: ${maxWidth}px)`;

export const media = {
  custom: customMediaQuery,
  1440: customMediaQuery(1440),
  768: customMediaQuery(768),
  tablet: customMediaQuery(1100),
  mobile: customMediaQuery(500),
};

const sample = styled.div`
  ${media.tablet} {
    width: 10rem;
  }
  ${media.mobile} {
    width: 5rem;
  }
`;

• 반응형을 위한 유틸이다. styled 안에 위처럼 사용한다.

• 커스텀도 가능한 아주 유용한 유틸!

gap

const calculateMargin = (
  gap: string,
  direction: "row" | "column" | "column-reverse"
) => {
  if (direction === "row") return `margin-left: ${gap}`;
  if (direction === "column") return `margin-top: ${gap}`;
  if (direction === "column-reverse") return `margin-bottom: ${gap}`;
  return "";
};

export const gap = (
  gapLength: string,
  direction: "row" | "column" | "column-reverse" = "row"
) => {
  return css`
    & > * + * {
      ${calculateMargin(gapLength, direction)}
    }
  `;
};

• css의 gap 속성의 지원 범위 때문에 직접 구현한 유틸함수. 사파리에 gap이 없다..