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 ( +
+

이름 변경

+
+ + setUsername(e.target.value)} + required + /> +
+

이메일 변경

+
+ + setUseremail(e.target.value)} + required + /> +
+ +
+ ); +} 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';