feat: Bubble 컴포넌트 및 Warning, Error Bubble 구상화

client/src/components/diagram/ErrorBubble.tsx

@@ -0,0 +1,19 @@
+import Bubble from '@components/todos/Bubble';
+import { ReactElement } from 'react';
+import Text from '@components/Text';
+import Image from '@components/Image';
+import Error from '@images/Error.svg';
+import { PRIMARY_COLORS } from '@util/Constants';
+
+const { red } = PRIMARY_COLORS;
+
+const ErrorBubble = ({ text }: { text: string }): ReactElement => {
+  return (
+    <Bubble backgroundColor={red}>
+      <Image src={Error} />
+      <Text text={text} fontWeight={'500'} fontFamily={'Nanum Myeongjo'} fontSize={'14px'} />
+    </Bubble>
+  );
+};
+
+export default ErrorBubble;

client/src/components/diagram/WarningBubble.tsx

@@ -0,0 +1,19 @@
+import Bubble from '@components/todos/Bubble';
+import { ReactElement } from 'react';
+import Text from '@components/Text';
+import Image from '@components/Image';
+import Warning from '@images/Warning.svg';
+import { PRIMARY_COLORS } from '@util/Constants';
+
+const { yellow } = PRIMARY_COLORS;
+
+const WarningBubble = ({ text }: { text: string }): ReactElement => {
+  return (
+    <Bubble backgroundColor={yellow}>
+      <Image src={Warning} />
+      <Text text={text} fontWeight={'500'} fontFamily={'Nanum Myeongjo'} fontSize={'14px'} />
+    </Bubble>
+  );
+};
+
+export default WarningBubble;

client/src/components/todos/Bubble.tsx

@@ -0,0 +1,54 @@
+import { ReactElement, ReactNode } from 'react';
+import styled from 'styled-components';
+import { PRIMARY_COLORS } from '@util/Constants';
+
+const { white, gray } = PRIMARY_COLORS;
+
+const Wrapper = styled.div<{ color?: string; backgroundColor?: string }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  height: max-content;
+  border-radius: 8px;
+  padding-block: 12px;
+  padding-inline: 12px;
+  color: ${(props) => props.color ?? white};
+  background-color: ${(props) => props.backgroundColor ?? gray};
+  gap: 10px;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    right: 100%;
+    top: 50%;
+    transform: translate(0, -50%);
+    border-top: 7px solid transparent;
+    border-right: 8.5px solid ${(props) => props.backgroundColor ?? gray};
+    border-bottom: 7px solid transparent;
+    border-left: 0px solid transparent;
+    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  }
+`;
+
+const Bubble = ({
+  children,
+  color,
+  backgroundColor,
+}: {
+  children: ReactNode;
+  color?: string;
+  backgroundColor?: string;
+}): ReactElement => {
+  return (
+    <Wrapper color={color} backgroundColor={backgroundColor}>
+      {children}
+    </Wrapper>
+  );
+};
+
+export default Bubble;