[개인 포트폴리오] [트위터 클론 SNS Deli] 분석 Part. 4 'media-query-file.ts' & 'global-style.ts'

media-query-file.ts

// 화면 크기별 사이즈 정의
const sizes = {
  mobile: 380,   // 모바일 크기
  tablet: 768,   // 태블릿 크기
  desktop: 1200  // 데스크탑 크기
};

// `media` 객체를 생성하여 각 사이즈에 대한 미디어 쿼리를 간편하게 적용할 수 있도록 합니다.
// sizes 객체의 키들을 배열로 반환합니다. 이 경우 ['mobile', 'tablet', 'desktop']가 됩니다.
// as Array<keyof typeof sizes> : TypeScript에게 sizes 객체의 키들이 특정 타입임을 명시합니다. 이는 TypeScript의 타입 추론을 돕기 위해 사용됩니다.
// reduce 메서드는 sizes 객체의 키 배열을 순회하며 media 객체를 생성합니다. 초기값은 빈 객체입니다.
export const media = (Object.keys(sizes) as Array<keyof typeof sizes>).reduce(
// reduce 메서드의 콜백 함수에서 acc는 누산기(반복적인 함수, 누적 계산)로, media 객체를 의미합니다.
// label은 sizes 객체의 각 키(예: 'mobile', 'tablet')입니다.
// acc[label]에 미디어 쿼리 함수를 추가합니다. 이 함수는 스타일을 받아 css 함수로 처리된 미디어 쿼리를 반환합니다.
  (acc, label) => {
    // 각 레이블에 대해 미디어 쿼리 함수를 추가
    acc[label] = (style: string) =>
      // 해당 레이블의 최대 너비에 대한 미디어 쿼리 문자열을 반환
      `@media (max-width: ${sizes[label] / 16}em) { ${style} }`;
    return acc;
  },
  // 초기값을 빈 객체로 설정
  {} as { [index: string]: (style: string) => string }
);

1. sizes 객체:
   • 모바일, 태블릿, 데스크탑의 최대 너비를 정의합니다.
   • 각 속성은 해당 장치의 최대 너비를 픽셀 단위로 지정합니다.
2. media 객체:
   • reduce 메서드를 사용하여 sizes 객체의 각 속성에 대한 미디어 쿼리 함수를 생성합니다.
   • acc는 누적된 객체를 의미하며, 각 사이즈별 미디어 쿼리 함수를 추가합니다.
   • 각 레이블에 대해 미디어 쿼리 문자열을 생성하고, 이를 템플릿 리터럴을 사용하여 반환합니다.
   • 최종적으로 media 객체에는 모바일, 태블릿, 데스크탑 각 사이즈에 대한 미디어 쿼리 함수가 포함됩니다.

이 코드는 스타일링 시 화면 크기에 따라 다른 스타일을 적용할 수 있도록 도와줍니다. 예를 들어, 특정 요소를 모바일 화면에서는 다르게 스타일링하고 싶을 때 유용하게 사용할 수 있습니다.

global-style.ts

import { createGlobalStyle } from 'styled-components';
import { media } from '../media-query-file';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Pretendard-Regular';
    src: url('<https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff>') format('woff');
    font-weight: 400;
    font-style: normal;
  }

  html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Pretendard-Regular', sans-serif;
  }

  input::placeholder {
    font-size: 1.2rem; /* 기본 설정 */
  }

  ${media.desktop(`
    body {
      padding: 0 50px !important;
    }
    input::placeholder {
      font-size: 1.2rem; /* 일반적인 설정 */
    }
  `)}

  ${media.tablet(`
    body {
      padding: 0 30px !important;
    }
    input::placeholder {
      font-size: 1rem; /* 태블릿 설정 */
    }
  `)}

  ${media.mobile(`
    body {
      padding: 0 10px !important;
    }
    input::placeholder {
      font-size: 0.9rem; /* 모바일 설정 */
    }
  `)}
`;

export default GlobalStyle;

이 코드는 styled-components의 createGlobalStyle을 사용하여 글로벌 스타일을 설정합니다. Pretendard-Regular 폰트를 불러오고, html과 body 태그에 기본 스타일을 적용하며, input 요소의 placeholder 스타일을 디바이스 종류에 따라 다르게 설정합니다.

• @font-face:
  • Pretendard-Regular 폰트를 외부 URL에서 불러와 사용합니다.
• html, body:
  • 기본적인 마진과 패딩을 제거하고, 박스 모델을 보더 박스(box-sizing: border-box)로 설정합니다.
  • 페이지의 너비를 100%로 설정하고, 가로 스크롤을 방지합니다.
  • Pretendard-Regular 폰트를 기본 폰트로 설정합니다.
• input::placeholder:
  • input 요소의 placeholder 텍스트 크기를 설정합니다.
• 미디어 쿼리:
  • media 객체를 사용하여 디바이스 크기에 따라 다른 스타일을 적용합니다.
  • 데스크탑, 태블릿, 모바일 각각의 환경에서 body의 패딩과 input::placeholder의 폰트 크기를 다르게 설정합니다.