feat: 에러 메시지 컴포넌트 추가

Co-authored-by: JASUN LEE <[email protected]>

REQUIREMENTS.md

@@ -5,6 +5,7 @@
 - [x] Input 컴포넌트 구현
 - [x] 로그인 페이지 컴포넌트 구현
 - [x] Icon 컴포넌트 구현
+- [x] ErrorMessage 컴포넌트 구현
 - [ ] 회원가입 페이지 컴포넌트 구현
 
 ## API

src/components/@common/ErrorMessage/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { 아이콘_코드 } from 'constants/';
+import { COLORS } from 'styles/theme';
+import Icon from '../Icon/styles';
+
+const childrenStyle = {
+  margin: '0 0 0 0.5rem',
+};
+
+const ErrorMessage = ({ children }) => (
+  <div>
+    <Icon icon={아이콘_코드.ALERT} color={COLORS.RED_100}>
+      <span style={childrenStyle}>{children}</span>
+    </Icon>
+  </div>
+);
+
+export default ErrorMessage;
+
+ErrorMessage.defaultProps = {
+  children: '예시 에러 메시지 입니다.',
+};

src/constants/index.js

@@ -3,6 +3,7 @@ export const 아이콘_코드 = {
   CART: 'f07a',
   USER: 'f007',
   DELETE: 'f2ed',
+  ALERT: 'f06a',
 };
 
 export const 비동기_요청 = {

src/stories/ErrorMessage.stories.js

@@ -0,0 +1,17 @@
+import ErrorMessage from 'components/@common/ErrorMessage/index';
+
+export default {
+  title: 'Common/ErrorMessage',
+  component: ErrorMessage,
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const Template = (args) => <ErrorMessage {...args} />;
+
+export const DefaultTemplate = Template.bind({});

src/styles/theme.js

@@ -14,6 +14,7 @@ const COLORS = {
   MINT_200: '#2AC1BC',
   BROWN_100: '#84786D',
   BROWN_200: '#73675C',
+  RED_100: '#FF7676',
 };
 
 const GRADIENT = {