From 244d9e89e9be42d1b460aea0df6c85bf0fb00191 Mon Sep 17 00:00:00 2001
From: klmhyeonwoo <gentlemonster77@likelion.org>
Date: Tue, 10 Sep 2024 19:31:31 +0900
Subject: [PATCH] feat: #330 Develop missing components

---
 .../write/modal/component/QuestionStatus.tsx  | 27 +++++++++++++++++++
 .../component/write/modal/component/index.ts  |  1 +
 2 files changed, 28 insertions(+)
 create mode 100644 apps/web/src/component/write/modal/component/QuestionStatus.tsx
 create mode 100644 apps/web/src/component/write/modal/component/index.ts

diff --git a/apps/web/src/component/write/modal/component/QuestionStatus.tsx b/apps/web/src/component/write/modal/component/QuestionStatus.tsx
new file mode 100644
index 00000000..8c947711
--- /dev/null
+++ b/apps/web/src/component/write/modal/component/QuestionStatus.tsx
@@ -0,0 +1,27 @@
+import { css } from "@emotion/react";
+
+import { Typography } from "@/component/common/typography";
+
+type QuestionStatusProps = {
+  currentPhase: number;
+  totalPhase: number;
+};
+
+export function QuestionStatus({ currentPhase, totalPhase }: QuestionStatusProps) {
+  return (
+    <div
+      css={css`
+        display: flex;
+        align-items: center;
+        column-gap: 0.4rem;
+      `}
+    >
+      <Typography variant={"subtitle16SemiBold"} color={"gray900"}>
+        질문 {currentPhase}
+      </Typography>
+      <Typography variant={"subtitle16SemiBold"} color={"gray500"}>
+        / {totalPhase}
+      </Typography>
+    </div>
+  );
+}
diff --git a/apps/web/src/component/write/modal/component/index.ts b/apps/web/src/component/write/modal/component/index.ts
new file mode 100644
index 00000000..a9c39ae1
--- /dev/null
+++ b/apps/web/src/component/write/modal/component/index.ts
@@ -0,0 +1 @@
+export { QuestionStatus } from "./QuestionStatus.tsx";