Common Style 분리(Meju_Refac)

// @styles/Common.ts

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

export const FlexRow = styled.div`
  display: flex;
  flex-direction: row;
`;

export const FlexCol = styled.div`
  display: flex;
  flex-direction: column;
`;

export const FlexCenterRow = styled.div`
  ${FlexRow};
  justify-content: center;
  align-items: center;
`;

export const FlexCenterCol = styled.div`
  ${FlexCol};
  justify-content: center;
  align-items: center;
`;

export const fontSizeStyle = (size: number) => css`
  font-size: ${size}px;
`;

export const ScrollbarStyle = styled.ul`
  overflow-y: auto;
  &::-webkit-scrollbar {
    height: 8px;
  }
  &::-webkit-scrollbar-thumb {
    background: none;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: lightgray;
  }
`;

export const BorderBottomTitle = styled.div`
  border-bottom: 2px solid ${({ theme }) => theme.colors.borderColor};
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
`;

export const ButtonStyle = styled.div`
  background-color: ${({ theme }) => theme.colors.buttonColor};
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${({ theme }) => theme.colors.buttonHoverColor};
  }
`;

// @pages/saleItems/styles/QuantityStyle.ts

import styled from "styled-components";
import * as Common from "@styles/Common";

export const QuantityControlBox = styled.div`
  ${Common.FlexRow};
  width: 110px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #ddd;
  background: #fff;
  ${Common.fontSizeStyle(13)};  

  .quantity_btn {
    ${Common.fontSizeStyle(16)};  
    padding-bottom: 3px;
    flex: none;
    width: 30px;
    height: 30px;
    border: none;
    cursor: pointer;
    background: #fff;
  }

  .decrement {
    cursor: not-allowed;
    opacity: 0.25;
  }

  .input_box {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    flex: 1;
    line-height: 30px;
    text-align: center;
    width: 42px;
    ${Common.fontSizeStyle(13)};  

    > .quantity_input {
      padding: 0;
      line-height: 30px;
      height: 30px;
      width: 100%;
      border: 0;
      text-align: center;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }
`;

이런 식으로 Common으로 공통된 Flex 스타일 등을 분리해서
호출해서 사용하려 했는데, 스타일 호출이 되지 않아서 왜 그런지 계속 수정하다가 발견했다.

export const FlexCenterRow = styled.div`
  ${FlexRow};

이런 식으로 파라미터 형식으로 사용하게 되면 적용이 안되길래 여러 시도를 해보다가

export const FlexCenterRow = styled(FlexRow)`

스타일을 불러와서 덮어서 사용하니 해결이 됐다.
마찬가지로

export const QuantityControlBox = styled(Common.FlexRow)`
  width: 110px;

이렇게 사용하면 코드 분할도 되면서 재사용성도 높아지게 Common을 활용할 수 있다.

그리고

export const QuantityControlBox = styled(Common.FlexRow)`
  font-size: 12px;

이렇게 사용하던걸

Common에서

export const fontSize = (size: number) => css`
  font-size: ${size}px;
`;
export const FontSizeStyle = styled.div<{ size: number }>`
  ${({ size }) => fontSize(size)}
`;

이렇게 선언해주고

export const QuantityControlBox = styled(Common.FlexRow)`
  ${Common.fontSize(12)};

이렇게 해서 사용했다.
사실 별 차이는 없는데 그냥 폰트 사이즈의 경우는 눈에 잘 띄게 하고 싶어서 바꿨다.