feat: 답변 Bubble 컴포넌트 구현

src/components/common/AnswerBubble/index.tsx

@@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+
+import { theme } from '~/styles/Theme';
+
+import Text from '../Text';
+
+type QuestionType = 'normal' | 'tail';
+
+export interface AIBubbleProps {
+  questionType: QuestionType;
+  question: string;
+  answer?: string;
+}
+
+export const AIBubble = ({ questionType, question, answer }: AIBubbleProps) => {
+  return (
+    <>
+      {answer ? (
+        <BubbleWrapper>
+          <BubbleContainer>
+            {questionType === 'normal' && (
+              <Text variant="b2" color="gray400">
+                일반 질문
+              </Text>
+            )}
+            {questionType === 'tail' && (
+              <Text variant="b2" color="primary_default">
+                꼬리 질문
+              </Text>
+            )}
+            <Text variant="b1" color="gray800">
+              {question}
+            </Text>
+            <Divider />
+            <Text variant="b2" color="gray400">
+              AI답변
+            </Text>
+            <Text variant="b1" color="gray800">
+              {answer}
+            </Text>
+          </BubbleContainer>
+          <Arrow />
+        </BubbleWrapper>
+      ) : (
+        <BubbleWrapper>
+          <BubbleContainer>
+            {questionType === 'normal' && (
+              <Text variant="b2" color="gray400">
+                일반 질문
+              </Text>
+            )}
+            {questionType === 'tail' && (
+              <Text variant="b2" color="primary_default">
+                꼬리 질문
+              </Text>
+            )}
+            <Text variant="b1" color="gray800">
+              {question}
+            </Text>
+          </BubbleContainer>
+          <Arrow />
+        </BubbleWrapper>
+      )}
+    </>
+  );
+};
+
+const BubbleWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+
+const BubbleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  width: 100%;
+  background: ${theme.color.gray000};
+  word-break: break-all;
+  border-radius: 8px 8px 8px 0px;
+`;
+const Arrow = styled.div`
+  position: absolute;
+  bottom: -12px;
+  width: 0;
+  height: 0;
+  border-bottom: 6px solid transparent;
+  border-top: 6px solid ${theme.color.gray000};
+  border-left: 6px solid ${theme.color.gray000};
+  border-right: 6px solid transparent;
+`;
+
+const Divider = styled.div`
+  height: 1px;
+  background: ${theme.color.gray100};
+`;

src/pages/index.tsx

@@ -22,7 +22,9 @@ export default function Home() {
       <Spacing size={24} />
       {/* 메인 화면 이미지 */}
       <Spacing size={24} />
-      <Button onClick={onClick}>시작하기</Button>
+      <Button variant="largePrimary" onClick={onClick}>
+        시작하기
+      </Button>
     </Flex.Center>
   );
 }

src/pages/signup/index.tsx

@@ -37,10 +37,10 @@ export default function SignUp() {
         errorMessage={errors.email?.message}
         suffix={
           <Button
+            variant="smallButton"
             onClick={(e: React.SyntheticEvent) => sendCode(e)}
             width={20}
             height={3}
-            backgroundColor={'gray000'}
             color={'gray800'}
           >
             인증코드 전송
@@ -56,7 +56,9 @@ export default function SignUp() {
         })}
       />
       <Spacing size={40} />
-      <Button disabled={isDisabled}>다음</Button>
+      <Button variant="largePrimary" disabled={isDisabled}>
+        다음
+      </Button>
     </form>
   );
 }

src/pages/signup/password/[email]/index.tsx

@@ -59,7 +59,7 @@ export default function Password({ email }: { email: string }) {
         })}
       />
       <Spacing size={40} />
-      <Button>가입 완료</Button>
+      <Button variant="largePrimary">가입 완료</Button>
     </form>
   );
 }