Skip to content

Commit

Permalink
feat: 공통 EventStatusBadge 컴포넌트를 구현하라 (#14)
Browse files Browse the repository at this point in the history
  • Loading branch information
saseungmin authored Jan 11, 2024
1 parent ae824bb commit e7a285f
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 1 deletion.
34 changes: 34 additions & 0 deletions src/components/atoms/EventStatusBadge/index.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
@import "/src/styles/main";

.eventStatusBadge {
display: inline-flex;
padding: 6px 12px;
font-size: 12px;
letter-spacing: -0.12px;
border-radius: 20px;
width: fit-content;

&.warn {
background-color: color('warning/dark');

@include text-color('warning');
}

&.success {
background-color: color('success/dark');

@include text-color('success');
}

&.info {
background-color: color('info/dark');

@include text-color('info');
}

&.error {
background-color: color('error/dark');

@include text-color('error');
}
}
21 changes: 21 additions & 0 deletions src/components/atoms/EventStatusBadge/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import clsx from 'clsx';

import styles from './index.module.scss';

type Props = {
type: 'warn' | 'error' | 'success' | 'info';
text: string;
};

function EventStatusBadge({ text, type }: Props) {
return (
<div className={clsx(styles.eventStatusBadge, {
[styles[type]]: type,
})}
>
{text}
</div>
);
}

export default EventStatusBadge;
6 changes: 5 additions & 1 deletion src/components/pages/HomePage/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Image from 'next/image';

import CounterCard from '@/components/atoms/CounterCard';
import EventStatusBadge from '@/components/atoms/EventStatusBadge';
import SectionTitle from '@/components/atoms/SectionTitle';

import styles from './index.module.scss';
Expand All @@ -11,7 +12,10 @@ function HomePage() {
<section className={styles.homeSection}>
<div className={styles.contentsWrapper}>
<div className={styles.description}>
<div>badge</div>
<EventStatusBadge text="DND는 잠시 휴식중" type="info" />
<EventStatusBadge text="DND는 잠시 휴식중" type="error" />
<EventStatusBadge text="DND는 잠시 휴식중" type="warn" />
<EventStatusBadge text="DND는 잠시 휴식중" type="success" />
<h1 className={styles.title}>
{`프로젝트에 즐거움을
모두에게 기회를`}
Expand Down
4 changes: 4 additions & 0 deletions src/styles/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,13 @@
--bgprimary: #EFF1F4;
--bgsecondary: #13161C;
--warning: #FFB23E;
--warning-dark: #2B261F;
--success: #67D330;
--success-dark: #1B291E;
--error: #FF7878;
--error-dark: #2B2025;
--info: #00D3F2;
--info-dark: #112931;
--white: #fff;

/* gray */
Expand Down

0 comments on commit e7a285f

Please sign in to comment.