From 9fc0827f4a6a754a51b30a84eaa8398d79904769 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Fri, 19 Jul 2024 12:49:32 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20InputBox=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/AuthForm/InputBox.jsx | 26 +++++++++++++++++++
 .../components/AuthForm/InputBox.module.css   | 13 ++++++++++
 frontend/src/components/AuthForm/index.js     |  1 +
 3 files changed, 40 insertions(+)
 create mode 100644 frontend/src/components/AuthForm/InputBox.jsx
 create mode 100644 frontend/src/components/AuthForm/InputBox.module.css

diff --git a/frontend/src/components/AuthForm/InputBox.jsx b/frontend/src/components/AuthForm/InputBox.jsx
new file mode 100644
index 0000000..49797ba
--- /dev/null
+++ b/frontend/src/components/AuthForm/InputBox.jsx
@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+import styles from './InputBox.module.css';
+
+const InputBox = forwardRef(({ title, id = null, type, children }, ref) => {
+  return (
+    <div className={styles.inputBox}>
+      <label
+        htmlFor={id}
+        className={styles.textBody}
+      >
+        {title}
+      </label>
+      <input
+        type={type}
+        id={id}
+        className={`${styles.input} ${styles.textSubheading}`}
+        ref={ref}
+        required
+      />
+      {children}
+    </div>
+  );
+});
+InputBox.displayName = 'InputBox';
+
+export default InputBox;
diff --git a/frontend/src/components/AuthForm/InputBox.module.css b/frontend/src/components/AuthForm/InputBox.module.css
new file mode 100644
index 0000000..1e4d11e
--- /dev/null
+++ b/frontend/src/components/AuthForm/InputBox.module.css
@@ -0,0 +1,13 @@
+.inputBox {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.input {
+  border-radius: 8px;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  box-sizing: border-box;
+  padding: 16px;
+}
diff --git a/frontend/src/components/AuthForm/index.js b/frontend/src/components/AuthForm/index.js
index ff37185..a429f94 100644
--- a/frontend/src/components/AuthForm/index.js
+++ b/frontend/src/components/AuthForm/index.js
@@ -1 +1,2 @@
 export { default as AuthForm } from './AuthForm';
+export { default as InputBox } from './InputBox';
\ No newline at end of file