Top

Top 컴포넌트는 다양한 레이아웃을 지원하는 페이지 상단 컴포넌트로, 여러 요소(텍스트, 버튼, 이미지 등)를 쉽게 배치할 수 있어요. 주로 페이지의 최상단에 사용되어 헤더나 타이틀 영역을 구성하는 데 활용돼요.

사용법

상하 여백 제어하기

upperGap와 lowerGap 속성을 사용해서 Top 컴포넌트의 상하 여백을 조정할 수 있어요.

<Top
  upperGap={0}
  lowerGap={0}
  title={<Top.TitleParagraph size={28}>동해물과 백두산이</Top.TitleParagraph>}
  right={<Top.RightButton>선택하기</Top.RightButton>}
/>

상단에 요소 추가하기

upper 속성을 사용해서 콘텐츠 영역 상단에 요소를 추가할 수 있어요. Top 컴포넌트의 여백 규칙을 지키려면 Asset 컴포넌트를 Top.UpperAssetContent 컴포넌트로 감싸서 사용해 주세요.

<Top
  upper={
    <Top.UpperAssetContent
      content={
        <Asset.Lottie
          frameShape={Asset.frameShape.SquareLarge}
          scale={1}
          src="https://static.toss.im/lotties-common/check-green-spot.json"
        />
      }
    />
  }
  title={<Top.TitleParagraph size={28}>동해물과 백두산이</Top.TitleParagraph>}
/>

하단에 요소 추가하기

lower 속성을 사용해서 콘텐츠 영역 하단에 요소를 추가할 수 있어요.

하단에 버튼 한 개 추가하기

Top.LowerButton 컴포넌트를 사용해서 하단에 작은 버튼을 추가할 수 있어요.

<Top
  title={<Top.TitleParagraph>동해물과 백두산이</Top.TitleParagraph>}
  lower={<Top.LowerButton>왜 사용할 수 없나요?</Top.LowerButton>}
/>

하단에 버튼 두 개 추가하기

Top.LowerCTA와 Top.LowerCTAButton 컴포넌트를 사용해서 하단에 꽉 찬 두 개의 버튼을 표현할 수 있어요. Top.LowerCTAButton의 display 속성에 block을 설정하면 돼요.

<Top
  title={<Top.TitleParagraph>동해물과 백두산이</Top.TitleParagraph>}
  lower={
    <Top.LowerCTA
      type="2-button"
      leftButton={
        <Top.LowerCTAButton color="dark" variant="weak" display="block">
          채우기
        </Top.LowerCTAButton>
      }
      rightButton={<Top.LowerCTAButton display="block">보내기</Top.LowerCTAButton>}
    />
  }
/>

우측에 요소 추가하기

right 속성을 사용해서 콘텐츠 영역 우측에 요소를 추가할 수 있어요.

우측에 에셋 추가하기

Asset 컴포넌트를 사용해서 우측에 원하는 에셋을 추가할 수 있어요. Top 컴포넌트의 여백 규칙을 지키려면 Asset 컴포넌트를 Top.RightAssetContent 컴포넌트로 감싸서 사용하면 돼요.

<Top
  title={<Top.TitleParagraph>동해물과 백두산이</Top.TitleParagraph>}
  right={
    <Top.RightAssetContent
      content={
        <Asset.Lottie
          frameShape={Asset.frameShape.CleanW60}
          src="https://static.toss.im/lotties-common/confetti-spot.json"
          loop={true}
          aria-hidden={true}
        />
      }
    />
  }
/>

우측에 버튼 추가하기

Top.RightButton 컴포넌트를 사용해서 우측에 버튼을 추가할 수 있어요.

<Top
  title={<Top.TitleParagraph>동해물과 백두산이</Top.TitleParagraph>}
  right={
    <Top.RightButton color="dark" variant="weak">
      송금
    </Top.RightButton>
  }
/>

콘텐츠 영역에 타이틀 추가하기

title 속성을 사용해 콘텐츠 영역에 타이틀을 추가할 수 있어요.

타이틀 영역에 단순한 정보를 보여주려면 Top.TitleParagraph 컴포넌트를 사용할 수 있어요. 이 컴포넌트는 상호작용이 없는 단순한 정보 전달용이에요.

<Top title={<Top.TitleParagraph>동해물과 백두산이</Top.TitleParagraph>} />

타이틀을 텍스트 버튼으로 추가하기

타이틀 영역에 링크와 같은 텍스트 버튼을 추가하려면 Top.TitleTextButton 컴포넌트를 사용할 수 있어요. Top.TitleTextButton는 타이틀 영역이 텍스트 버튼처럼 동작하며, 클릭할 때 기본적인 인터렉션이 나타나요.

<Top title={<Top.TitleTextButton>동해물과 백두산이</Top.TitleTextButton>} />

타이틀을 셀렉터 버튼으로 추가하기

타이틀 영역에 셀렉터 버튼을 추가할 때 Top.TitleSelector 컴포넌트를 사용할 수 있어요. Top.TitleSelector는 타이틀 영역이 화살표 아이콘을 갖는 텍스트 버튼처럼 동작하고, 클릭할 때 기본적인 인터렉션이 나타나요.

<Top title={<Top.TitleSelector>동해물과 백두산이</Top.TitleSelector>} />

콘텐츠 영역에 서브타이틀 추가하기

subtitleTop과 subtitleBottom 속성을 사용해 타이틀 상단 또는 하단에 서브타이틀을 추가할 수 있어요.

서브타이틀 영역에 단순한 정보를 보여줄 때는 Top.SubtitleParagraph 컴포넌트를 사용할 수 있어요. 이 컴포넌트는 상호작용 없이 정보만 전달해요.

<Top
  title={<Top.TitleParagraph>동해물과 백두산이</Top.TitleParagraph>}
  subtitleTop={<Top.SubtitleParagraph>텍스트를 적어주세요.</Top.SubtitleParagraph>}
/>

서브타이틀을 텍스트 버튼으로 추가하기

서브타이틀 영역에 링크와 같은 텍스트 버튼을 추가하려면 Top.SubtitleTextButton 컴포넌트를 사용할 수 있어요. Top.SubtitleTextButton는 서브타이틀 영역이 텍스트 버튼처럼 동작하며, 클릭할 때 기본적인 인터렉션이 나타나요.

<Top
  title={<Top.TitleParagraph>동해물과 백두산이</Top.TitleParagraph>}
  subtitleTop={<Top.SubtitleTextButton>텍스트를 적어주세요.</Top.SubtitleTextButton>}
/>

서브타이틀을 셀렉터 버튼으로 추가하기

서브타이틀 영역에 셀렉터 버튼을 추가하려면 Top.SubtitleSelector 컴포넌트를 사용할 수 있어요. 이 컴포넌트는 화살표 아이콘이 포함된 버튼으로, 클릭할 때 인터렉션이 나타나요.

<Top
  title={<Top.TitleParagraph>동해물과 백두산이</Top.TitleParagraph>}
  subtitleTop={<Top.SubtitleSelector type="arrow">텍스트를 적어주세요.</Top.SubtitleSelector>}
/>

서브타이틀을 뱃지로 추가하기

서브타이틀 영역에는 Top.SubtitleBadges 컴포넌트를 사용할 수 있어요. badges 속성에 원하는 뱃지 정보를 넣으면 돼요.

<Top
  title={<Top.TitleParagraph>동해물과 백두산이</Top.TitleParagraph>}
  subtitleTop={
    <Top.SubtitleBadges
      badges={[
        { text: `뱃지`, color: `red`, variant: `fill` },
        { text: `뱃지`, color: `green`, variant: `weak` },
      ]}
    />
  }
/>

접근성

Top 컴포넌트는 기본적으로 접근성을 지원하는 여러 속성을 포함하고 있어요. 이 속성들은 스크린 리더 사용자들이 컴포넌트를 명확하게 이해하고 상호작용할 수 있도록 도와줘요.

적용 예시

1. Top.TitleParagraph
   • role="heading" 속성과 aria-level="1" 속성을 적용하여 해당 텍스트가 주요 제목임을 명확하게 전달해요.

   <Top.TitleParagraph role="heading" aria-level="1">
     주요 제목
   </Top.TitleParagraph>
2. Top.SubtitleParagraph
   • role="heading"과 aria-level="2" 속성을 추가하여 부제목임을 알리고, 텍스트 계층 구조를 명확히 해줘요.

   <Top.SubtitleParagraph role="heading" aria-level="2">
     부제목
   </Top.SubtitleParagraph>
3. Top.TitleSelector 및 Top.SubtitleSelector
   • aria-haspopup="listbox" 속성이 자동으로 추가되어, 사용자는 버튼을 누르면 기존 값을 다른 값으로 변경하는 팝업이 열린다는 것을 예측할 수 있어요.

   <Top.TitleSelector aria-haspopup="listbox">
     제목 선택
   </Top.TitleSelector>
   <Top.SubtitleSelector aria-haspopup="listbox">
     부제목 선택
   </Top.SubtitleSelector>

추가로 지원해야 하는 접근성

Top 컴포넌트는 기본적인 접근성을 제공하지만, 추가적인 속성을 활용해서 사용자 경험을 더욱 개선할 수 있어요. 예를 들어, aria-label을 사용해 제목이나 선택 항목의 의미가 명확하지 않을 때 적절한 설명을 추가하면 사용자가 더 쉽게 이해할 수 있어요.

인터페이스

TopProps

TopLowerButtonProps

Button 컴포넌트를 확장하여 제작했어요. Button 컴포넌트의 모든 속성을 사용할 수 있어요.

TopLowerCTAProps

TopLowerCTAButtonProps

Button 컴포넌트를 확장하여 제작했어요. Button 컴포넌트의 모든 속성을 사용할 수 있어요.

TopRightArrowProps

Icon 컴포넌트를 확장하여 제작했어요. Icon 컴포넌트의 모든 속성을 사용할 수 있어요.

TopRightAssetContentProps

TopRightButtonProps

Button 컴포넌트를 확장하여 제작했어요. Button 컴포넌트의 모든 속성을 사용할 수 있어요.

TopSubtitleBadgesProps

TopSubtitleParagraphProps

Paragraph 컴포넌트를 확장하여 제작했어요. Paragraph 컴포넌트의 모든 속성을 사용할 수 있어요.

TopSubtitleSelectorProps

TopSubtitleTextButtonProps

TextButton 컴포넌트를 확장하여 제작했어요. TextButton 컴포넌트의 모든 속성을 사용할 수 있어요.

TopTitleParagraphProps

Paragraph 컴포넌트를 확장하여 제작했어요. Paragraph 컴포넌트의 모든 속성을 사용할 수 있어요.

TopTitleSelectorProps

TopTitleTextButtonProps

TextButton 컴포넌트를 확장하여 제작했어요. TextButton 컴포넌트의 모든 속성을 사용할 수 있어요.

TopUpperAssetContentProps