Skip to content

[feat] Toast 컴포넌트 구현 #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ghdtnals merged 5 commits into from
Apr 30, 2025
Merged

[feat] Toast 컴포넌트 구현 #44

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
91914cb
feat: Toast 컴폰넌트 구현
ghdtnals Apr 28, 2025
504aea1
feat: Toast 훅 추가
ghdtnals Apr 29, 2025
2f68450
chore: 사용하지 않는 파일 삭제
ghdtnals Apr 29, 2025
f141276
refactor: Toast 관련 컴포넌트 코드 개선
ghdtnals Apr 29, 2025
e48acab
Merge branch 'dev' of https://github.com/CodeitPart3/thejulge into CO…
ghdtnals Apr 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/components/Toast.tsx
View file
Open in desktop
Copy link
Collaborator

@cozy-ito cozy-ito Apr 28, 2025

Choose a reason for hiding this comment

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

Toast라고 하는 UI가 할 수 있어야 할 동작들이 있을 것 같아요! 🤔
사용자가 어떤 행동(ex: 버튼 클릭 등)을 했을 때,
해당 행동이 정상적으로 잘 이뤄졌는지 피드백을 하기 위해서
브라우저 어딘가에 작은 창으로 메시지를 안내하는 것처럼요!
그래서 UI뿐만 아니라 전역적으로 해당 메시지를 바로 나타나게 할 수 있는 훅 등도 같이 구현되면 좋을 것 같아요 😅

UI는 다르지만, 참고할 만한 링크도 같이 첨부해봅니다.
참고1
참고2

혹시 어려우신 부분이 있으시다면, 알려주시면 같이 구현해봐도 좋을 것 같습니다! 👍

Copy link
Collaborator Author

@ghdtnals ghdtnals Apr 28, 2025

Choose a reason for hiding this comment

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

아 넵 링크 참고해서 코드 다시 수정해보도록 하겠습니다!👍👍

Copy link
Collaborator

@cozy-ito cozy-ito Apr 29, 2025

Choose a reason for hiding this comment

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

연속적으로 토스트 메시지를 나타내면 메시지간의 간격이 너무 붙어 있는 것 같습니다 하핳
조금 간격을 띄우면 더 좋을 것 같아요! 👍

Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { cn } from "@/utils/cn";

interface ToastProps {
label: string;
className?: string;
}

export default function Toast({ label, className }: ToastProps) {
return (
<div
className={cn(
"inline-block rounded-md bg-red-30 px-4 py-[10px] text-white body1-regular",
className,
)}
>
{label}
</div>
);
}