배너 작성법

/frontend/src/configs/bannerList.tsx 를 통해 배너를 생성 및 수정할 수 있습니다.

예시 코드

/frontend/src/configs/bannerList.tsx

const bannerList: BannerType[] = [
    {
        backgroundColor: COLOR.WHITE,
        sideImageUrl: 'https://github.com/woowacourse/prolog/blob/main/frontend/src/assets/images/pencil_icon.svg',
        textContents: (
          <>
            <p>자기주도 학습 ∙ 현장중심 경험 ∙ 깊이있는 협업</p>
            <h2>우아한테크코스</h2>
          </>
        ),
        reverse: true,
        showMoreLink: 'https://woowacourse.github.io/',
        showMoreLinkText: '알아보러가기',
        sideImagePadding: 0,
  },
]

export type BannerType = {
  backgroundColor?: string;
  sideImageUrl?: string;
  textContents: JSX.Element;
  reverse?: boolean;
  showMoreLink?: string;
  showMoreLinkText?: string;
  backgroundImage?: string;
  sideImagePadding?: number; // 단위 (rem)
};

Props 설명

• backgroundColor optional
  • string, 배너 배경 색상입니다. #ffffff(HexCode) 형식으로 작성해주세요.
  • 배경색상에 따라 텍스트 색상은 흰색/검정색으로 자동 삽입 됩니다.
• sideImageUrl optional
  • string, 좌/우측에 들어가는 이미지 입니다.
  • 되도록 320px * 320px 로 설정해주시면 좋습니다. 작은이미지/큰 이미지를 넣게되면 자동으로 320px, 320px 크기에 맞춰집니다.
  • URL주소 및 파일경로를 모두 이용할 수 있습니다.
• textContents
  • JSX.Element, JSX 엘리먼트 형식으로 작성해주세요.
    • <p> : 일반 설명 내용을 작성할 때 사용합니다.
    • <strong> : 일반 설명 내용 중 강조하고 싶은 내용이 있을 때 사용합니다.
    • <h2> : 배너의 제목을 작성할 때 사용합니다.
    • 구성은 자유롭게 할 수 있으나, 제목 포함 최대 4줄을 넘어가지 않도록 조심해주세요.
  • 해당 부분으로 인해 현재는 jsx, tsx 형식에서만 bannerList를 작성할 수 있습니다. json 등으로 이용하기 위해 추후 template literal을 이용할 수 있도록 변경 예정입니다.
• reverse optional
  • boolean, 기본값은 false 입니다. true인 경우 이미지와 내용의 좌우 위치가 반전됩니다.
• showMoreLink optional
  • string, 더보기 또는 링크 이동이 필요할 때 사용합니다.
  • 앞에 https:// 없이 '/서니'와 같이 작성되는 경우 `https://prolog.techcourse.co.kr/서니`로 이동됩니다.
• showMoreLinkText optional
  • string, 더보기 링크의 표시 텍스트입니다. 기본값은 '더보기' 로 설정되어 있습니다. 필요한 경우에만 사용합니다.
• backgroundImage optional
  • string, 배경이미지 입니다. 필요하지 않으면 넣지 않아도 됩니다.
  • 되도록 1920px * 320px 이미지를 이용해주세요. 그 외 규격은 배경을 확장/축소하여 이미지가 잘릴 수 있습니다.
  • URL주소 및 파일경로를 모두 이용할 수 있습니다.
• sideImagePadding optional
  • number, 좌/우측에 들어가는 이미지 크기를 조정하고 싶을 때 사용합니다.
  • 단위는 rem으로 되어있으며, 현재 프로젝트에서 1rem === 1px 입니다.
  • 1으로 작성하는 경우 상, 하, 좌, 우 1rem(10px) 씩 이미지 크기가 줄어듭니다.

활용예시

1. 기본 활용 예

2. reverse=true 와 showMoreLink, showMoreLinkText 속성을 사용했을 때

3. sideImageUrl이 없는 경우

4. 기타 (하단 텍스트 작성 시) - 텍스트만 가운데 정렬 됩니다.