画像アップロード2

src/app/Components/PostForm/PostForm.tsx

@@ -14,10 +14,14 @@ export default function PostForm() {
 
   const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
     // TODO: 画像の更新
+    const selectedFile = event.target.files?.[0];
+    setImage(selectedFile || null);
+    setError("");
   };
 
   const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
     // TODO: テキストの更新
+    setText(event.target.value);
   };
 
   const handleUpload = () => {
@@ -79,10 +83,21 @@ export default function PostForm() {
       {error && <Typography color="error">{error}</Typography>}
 
       {/* TODO: テキスト入力 */}
+      <input
+        type = "text"
+        value={text}
+        onChange={handleTextChange}
+        placeholder = "投稿内容を入力して下さい"
+      />
 
       {/* TODO: 画像選択 */}
+      <input
+        type="file"
+        onChange={handleImageChange}
+      />
 
       {/* TODO: アップロードボタン */}
+      <button onClick={handleUpload}>Upload</button>
 
       {progress !== 100 && <LinearProgressWithLabel value={progress} />}
 

src/app/Components/PostForm/PostFormPage.tsx

@@ -0,0 +1,11 @@
+import UserForm from './PostForm';
+import styles from './Posts.module.scss';
+
+export default function UserFormPage() {
+  return (
+    <div className={styles.container}>
+      <h1>ユーザー登録</h1>
+      <UserForm />
+    </div>
+  );
+}

src/app/Components/PostForm/Posts.module.scss

@@ -0,0 +1,3 @@
+.post {
+  display: flex;
+}