From 594a96d853260c6e095c43d9543b31f23dc126a9 Mon Sep 17 00:00:00 2001
From: minwucho <mauercho@gmail.com>
Date: Tue, 16 Jul 2024 17:17:35 +0900
Subject: [PATCH] =?UTF-8?q?[Front-end]=20feat:=20=EB=82=B4=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EB=B3=80=EA=B2=BD=ED=8F=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/InfoEditForm/InfoEditForm.jsx  | 48 +++++++++++++++++
 .../InfoEditForm/InfoEditForm.module.css      | 54 +++++++++++++++++++
 frontend/src/components/InfoEditForm/index.js |  1 +
 3 files changed, 103 insertions(+)
 create mode 100644 frontend/src/components/InfoEditForm/InfoEditForm.jsx
 create mode 100644 frontend/src/components/InfoEditForm/InfoEditForm.module.css
 create mode 100644 frontend/src/components/InfoEditForm/index.js

diff --git a/frontend/src/components/InfoEditForm/InfoEditForm.jsx b/frontend/src/components/InfoEditForm/InfoEditForm.jsx
new file mode 100644
index 0000000..4938ea7
--- /dev/null
+++ b/frontend/src/components/InfoEditForm/InfoEditForm.jsx
@@ -0,0 +1,48 @@
+import styles from './InfoEditForm.module.css';
+import { useState } from 'react';
+
+export default function InfoEditForm() {
+  const [username, setUsername] = useState('');
+  const [useremail, setUseremail] = useState('');
+  return (
+    <form className={styles.infoEditForm}>
+      <p className={styles.textHeading}>이름 변경</p>
+      <div className={styles.inputBox}>
+        <label
+          htmlFor="username"
+          className={styles.textBody}
+        >
+          강의에서 사용할 이름을 입력하세요
+        </label>
+        <input
+          placeholder="이름"
+          type="text"
+          id="username"
+          className={`${styles.input} ${styles.textBody}`}
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          required
+        />
+      </div>
+      <p className={styles.textHeading}>이메일 변경</p>
+      <div className={styles.inputBox}>
+        <label
+          htmlFor="useremail"
+          className={styles.textBody}
+        >
+          이메일을 입력하세요.
+        </label>
+        <input
+          placeholder="이메일"
+          type="text"
+          id="useremail"
+          className={`${styles.input} ${styles.textBody}`}
+          value={useremail}
+          onChange={(e) => setUseremail(e.target.value)}
+          required
+        />
+      </div>
+      <button className={styles.buttonBox}>내 정보 수정</button>
+    </form>
+  );
+}
diff --git a/frontend/src/components/InfoEditForm/InfoEditForm.module.css b/frontend/src/components/InfoEditForm/InfoEditForm.module.css
new file mode 100644
index 0000000..1f66fe7
--- /dev/null
+++ b/frontend/src/components/InfoEditForm/InfoEditForm.module.css
@@ -0,0 +1,54 @@
+.textHeading {
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 0px;
+}
+
+.textBody {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+}
+
+.textBodyStrong {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+}
+
+.infoEditForm {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 900px;
+}
+
+.inputBox {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.input {
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  box-sizing: border-box;
+  padding: 12px 16px;
+}
+
+.buttonBox {
+  padding: 12px;
+  background-color: var(--primary-color);
+  border: 1px solid var(--border-color);
+  color: white;
+  box-sizing: border-box;
+  border-radius: 8px;
+  align-self: end;
+}
+
+.buttonCover {
+  display: flex;
+  justify-content: end;
+}
diff --git a/frontend/src/components/InfoEditForm/index.js b/frontend/src/components/InfoEditForm/index.js
new file mode 100644
index 0000000..c123520
--- /dev/null
+++ b/frontend/src/components/InfoEditForm/index.js
@@ -0,0 +1 @@
+export { default as InfoEditForm } from './InfoEditForm';