[FE] 팀 피드 일정 알림 컴포넌트 UI 구현

frontend/src/components/Notification/Notification.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Notification from '~/components/Notification/Notification';
+
+const meta = {
+  title: 'Feed/Notification',
+  component: Notification,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Notification>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: "'범죄심리학 발표자료..' 일정이 수정되었습니다.",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    content: "'범죄심리학 발표자료..' 일정이 수정되었습니다.",
+    size: 'sm',
+  },
+};

frontend/src/components/Notification/Notification.styled.ts

@@ -0,0 +1,16 @@
+import { styled } from 'styled-components';
+import type { NotificationProps } from '~/components/Notification/Notification';
+
+export const Wrapper = styled.div<Pick<NotificationProps, 'color' | 'size'>>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: ${({ size }) => (size === 'md' ? 50 : 42)}px;
+
+  background-color: ${({ color }) => color};
+  border-radius: 20px;
+
+  filter: brightness(1.7);
+`;

frontend/src/components/Notification/Notification.tsx

@@ -0,0 +1,24 @@
+import Text from '~/components/common/Text/Text';
+import * as S from './Notification.styled';
+import type { NotificationSize, TextSize } from '~/types/size';
+
+export interface NotificationProps {
+  color?: string;
+  size?: NotificationSize;
+  content: string;
+}
+
+const Notification = (props: NotificationProps) => {
+  const { color = '#516FFF', content, size = 'md' } = props;
+  const textSize: Extract<TextSize, 'md' | 'xl'> = size === 'md' ? 'xl' : 'md';
+
+  return (
+    <S.Wrapper color={color} size={size}>
+      <Text size={textSize} weight="bold">
+        {content}
+      </Text>
+    </S.Wrapper>
+  );
+};
+
+export default Notification;

frontend/src/types/size.ts

@@ -5,3 +5,5 @@ export type ButtonSize = Extract<Size, 'sm' | 'md' | 'lg'>;
 export type TextSize = Size;
 
 export type DateCellSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+
+export type NotificationSize = Extract<Size, 'sm' | 'md'>;