Alert

[noahluftyang]

컴포넌트 기능 정의

• 사용자에게 주요한 메시지를 전달할 때 사용하는 컴포넌트입니다.
  • 이 요소는 한 눈에 들어오는 내용(예외적인 상황/특수한 상황)을 표현하기 위해 사용합니다.
• 요소 좌측에 아이콘을 삽입할 수 있습니다.

디자인 요구사항

• 12px 둥근 모서리 형태의 박스로 구성합니다.
• 배경색은 #1a202c 입니다.
• 테두리는 1px 두께, #2d3748 색상입니다.
• 좌측에 아이콘을 넣을 수 있습니다.
• 내부 요소 간 간격은 20px입니다.
• 패딩은 20px입니다.
• 텍스트는 14px, #ffffff, bold입니다.
• 얼럿 하위 요소들은 중앙 정렬로 처리한다.

컴포넌트 스펙

• Alert.Root: 얼럿 컨테이너 요소입니다. children을 입력받을 수 있습니다.
• Alert.Text: 얼럿 텍스트 요소입니다.
  • 기본 값은 color="#ffffff", size={14}, weight="bold"입니다.
  • Typography의 props를 그대로 제공합니다.
• Alert.Icon: 얼럿 아이콘 요소입니다.

<Alert.Root>
  <Alert.Icon src="https://foo.com/image.png" />
  <Alert.Text>격주 토요일 오후 2시 ~ 6시에 진행되는 정규 활동에 성실하게 참여할 수 있는</Alert.Text>
</Alert.Root>

기술적 고려사항

참고 자료

추가 논의사항

• Icon의 경우 React 컴포넌트로 사용하고 싶을 수도 있고, svg나 png 등등을 사용하고 싶은데 이건 어떻게 처리하면 좋을까요?