Skip to content

[Fix] Toast 컴포넌트 info/success type 분리 #208

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
Chiman2937 merged 3 commits into from
Dec 18, 2025
Merged

[Fix] Toast 컴포넌트 info/success type 분리 #208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c6fe825
fix: Toast 컴포넌트 info/success type 분리
Chiman2937 Dec 18, 2025
a08bbf3
fix: toast test, storybook 코드 수정
Chiman2937 Dec 18, 2025
8ddffe5
Merge branch 'main' into chiyoung-fix/toast
claudia99503 Dec 18, 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
14 changes: 7 additions & 7 deletions src/components/ui/toast/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ type Story = StoryObj<typeof meta>;

export const Default: Story = {
args: {
type: 'info',
type: 'success',
children: '모임 신청 완료! Share the fun',
},
parameters: {
Expand All @@ -43,13 +43,13 @@ export const Default: Story = {
</thead>
<tbody>
<tr className='border-b'>
<td className='px-4 py-4'>info</td>
<td className='px-4 py-4'>success</td>
<td className='px-4 py-4'>
<Toast type='info'>모임 신청 완료! Share the fun</Toast>
<Toast type='success'>모임 신청 완료! Share the fun</Toast>
</td>
<td className='px-4 py-4'>
<code className='rounded bg-gray-100 px-2 py-1 text-sm'>
{`<Toast type="info">모임 신청 완료! Share the fun</Toast>`}
{`<Toast type="success">모임 신청 완료! Share the fun</Toast>`}
</code>
</td>
</tr>
Expand All @@ -62,7 +62,7 @@ export const Default: Story = {

export const Code_Snippet: Story = {
args: {
type: 'info',
type: 'success',
children: '모임 신청 완료! Share the fun',
},
parameters: {
Expand All @@ -79,7 +79,7 @@ export const Code_Snippet: Story = {
className='rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600'
onClick={() => {
console.log('Button clicked');
run(<Toast type='info'>모임 신청 완료! Share the fun</Toast>);
run(<Toast type='success'>모임 신청 완료! Share the fun</Toast>);
console.log('Toast run called');
}}
>
Expand All @@ -99,7 +99,7 @@ const HomePage = () => {
const { run } = useToast();
return (
<div>
<button onClick={() => run(<Toast type='info'>모임 신청 완료! Share the fun</Toast>)}>
<button onClick={() => run(<Toast type='success'>모임 신청 완료! Share the fun</Toast>)}>
토스트 실행
</button>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/ui/toast/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ describe('Toast', () => {
render(<Toast>모임 신청 완료!</Toast>);
const toast = screen.getByText('모임 신청 완료!');

expect(toast).toHaveClass('text-mono-white bg-[#0D2D3A]/50');
expect(toast).toHaveClass('text-mono-white bg-[#0D2D3A]/80');
});

test('option을 전달하지 않고 toast 실행 시 toast가 popup 되며 3초 후에 사라진다.', async () => {
const TestToast = () => {
return <Toast type='info'>모임 신청 완료! Share the fun</Toast>;
return <Toast type='success'>모임 신청 완료! Share the fun</Toast>;
};

renderToast({ content: <TestToast /> });
Expand All @@ -69,7 +69,7 @@ describe('Toast', () => {

test('duration을 5000으로 지정하면 toast가 popup 되며 5초 후에 사라진다.', async () => {
const TestToast = () => {
return <Toast type='info'>모임 신청 완료! Share the fun</Toast>;
return <Toast type='success'>모임 신청 완료! Share the fun</Toast>;
};

renderToast({ content: <TestToast />, options: { duration: 5000 } });
Expand All @@ -94,7 +94,7 @@ describe('Toast', () => {

test('toast run 을 연속으로 실행하면 toast가 여러개 popup 된다.', async () => {
const TestToast = () => {
return <Toast type='info'>모임 신청 완료! Share the fun</Toast>;
return <Toast type='success'>모임 신청 완료! Share the fun</Toast>;
};

renderToast({ content: <TestToast />, options: { duration: 5000 } });
Expand Down
10 changes: 5 additions & 5 deletions src/components/ui/toast/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ const toastVariants = cva(
{
variants: {
type: {
info: 'text-mono-white bg-[#0D2D3A]/50',
// success: 'text-mono-white bg-green-600',
info: 'text-mono-white bg-[#0D2D3A]/80',
success: 'text-mono-white bg-[#0D2D3A]/80',
// error: 'text-mono-white bg-red-600',
// warning: 'text-mono-white bg-yellow-600',
},
Expand All @@ -20,8 +20,8 @@ const toastVariants = cva(
);

const toastIcons = {
info: 'congratulate',
// success: 'check-circle',
info: '',
success: 'congratulate',
// error: 'alert-circle',
// warning: 'alert-triangle',
} as const;
Expand All @@ -34,7 +34,7 @@ interface Props {
export const Toast = ({ type = 'info', children }: Props) => {
return (
<div className={toastVariants({ type })}>
<Icon id={toastIcons[type]} className='size-6' />
{toastIcons[type] && <Icon id={toastIcons[type]} className='size-6' />}
{children}
</div>
);
Expand Down
Loading