Skip to content

[UI/38]: ToastBar atom구현 - #39

Open
minkyeongJ wants to merge 1 commit into
devfrom
ui/38
Open

[UI/38]: ToastBar atom구현#39
minkyeongJ wants to merge 1 commit into
devfrom
ui/38

Conversation

@minkyeongJ

@minkyeongJ minkyeongJ commented Nov 26, 2023

Copy link
Copy Markdown
Collaborator

✨ 구현기능

  • 알림에 사용할 Toast UI를 만들었습니다.
  • 사용법
export default function Home() {
  return (
    <>
      <ThemeButton />
      <br />
      <ToastBar type="OK" message={'OK'} isShow />
      <ToastBar type="INFO" message={'INFO'} isShow />
      <ToastBar type="ALERT" message={'ALERT'} isShow />
      <ToastBar type="WARNING" message={'WARNING'} isShow />
    </>
  );
}

👀 구현한 기능에 대한 gif

image

image


🙏 To Reviewers 🙏

  • 기본적으로 사용되는 4가지 종류에 대한 컬러를 만들었습니다. 필요한 요소가 있으면 요청부탁드립니다.

close #38

@minkyeongJ minkyeongJ added the 🎨 UI 마크업 & 스타일링 label Nov 26, 2023
@minkyeongJ minkyeongJ self-assigned this Nov 26, 2023
@minkyeongJ minkyeongJ changed the title UI: ToastBar atom구현 [UI/38]: ToastBar atom구현 Nov 26, 2023
className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
onClick={() => setShowAlert(false)}
>
<span>×</span>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

폰트어썸 아이콘 사용해서 수정해주세요~

@SeoHee3478

Copy link
Copy Markdown
Contributor

alert 메세지 가장 왼쪽에 상황에 맞는 아이콘도 추가부탁드려요~

@5647kr

5647kr commented Nov 27, 2023

Copy link
Copy Markdown
Contributor

새벽까지 수고하셨습니다

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🎨 UI 마크업 & 스타일링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants