From 4cb480a4beaed24839fd85149f4ce2486a0c6e5b Mon Sep 17 00:00:00 2001
From: Amo Taiki <c1101081@planet.kanazawa-it.ac.jp>
Date: Wed, 10 Jan 2024 18:51:32 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AC=E3=82=B9=E3=83=9D=E3=83=B3=E3=82=B7?=
 =?UTF-8?q?=E3=83=96=E5=AF=BE=E5=BF=9C=E3=81=A8=E5=90=8D=E5=89=8D=E5=85=A5?=
 =?UTF-8?q?=E5=8A=9B=E6=AC=84=E3=81=AE=E8=BF=BD=E5=8A=A0=E3=80=81=E6=8A=95?=
 =?UTF-8?q?=E7=A8=BF=E3=81=94=E3=81=A8=E3=81=AE=E5=8C=BA=E5=88=87=E3=82=8A?=
 =?UTF-8?q?=E7=B7=9A=E3=81=AE=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.module.scss | 36 +++++++++++++++++++++++++++++++++++-
 src/app/page.tsx         | 23 +++++++++++++++++++----
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/src/app/page.module.scss b/src/app/page.module.scss
index 1c7448f..3754053 100644
--- a/src/app/page.module.scss
+++ b/src/app/page.module.scss
@@ -3,7 +3,7 @@
   gap: 1em;
   padding: 1em;
 
-  .text_area {
+  .text_content_area {
     flex: 1;
   }
   .post_button {
@@ -15,8 +15,42 @@
   max-width: 90%;
   margin: auto;
   
+  
   .content_list {
     display: inline-block;
     width: 25%;
   }
+
+  .content  {
+    border-bottom: 1px solid #ccc;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .post_form{
+    .text_content_area {
+      position: fixed;
+      bottom: 0;
+      left: 40%;
+      width: 40%;
+      padding: 15px;
+      background-color: #fff;
+    }
+    .text_name_area {
+      position: fixed;
+      bottom: 10px;
+      left: 0;
+      width: 40%;
+      padding: 15px;
+      background-color: #fff;
+    } 
+
+    .post_button {
+      position: fixed;
+      bottom: 25px;
+      right: 0;
+      width: 20%;
+      background-color: #fff;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 16d088c..0880332 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Textarea } from '@mantine/core';
+import { Button, TextInput, Textarea } from '@mantine/core';
 import React, { useState } from 'react';
 import styles from './page.module.scss';
 
@@ -29,38 +29,53 @@ export default function HomePage() {
     { id: 2, postedBy: '田中次郎', postedAt: '2024/01/01 16:00:01', content: '無事です' },
     { id: 3, postedBy: '田中三郎', postedAt: '2024/01/01 16:00:02', content: '無事です' },
   ]);
+  const [postName,setPostName] = useState<string>('');
+  
   const handlePostContentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     setPostContent(event.target.value);
   };
+
+  const handlePostNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPostName(event.target.value);
+  }
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setPosts([
       ...posts,
       {
         id: posts[posts.length - 1].id + 1,
-        postedBy: '田中四郎',
+        postedBy: postName,
         postedAt: getFormattedDate(new Date()),
         content: postContent,
       },
     ]);
+    setPostName('');
     setPostContent('');
   };
   return (
     <main>
       <form className={styles.post_form} onSubmit={handleSubmit}>
+        <TextInput
+          className={styles.text_name_area}
+          value={postName}
+          onChange={handlePostNameChange}
+          placeholder="名前を入力"
+        />
         <Textarea
-          className={styles.text_area}
+          className={styles.text_content_area}
           value={postContent}
           onChange={handlePostContentChange}
           placeholder="投稿内容を入力"
         />
+      
         <Button type="submit" className={styles.post_button} variant="outline" disabled={!postContent}>
           投稿
         </Button>
       </form>
       <div className={styles.content_list__wrapper}>
         {posts.map((post) => (
-          <div key={post.id}>
+          <div key={post.id} className={styles.content}>
             <span className={styles.content_list}>{post.id}</span>
             <span className={styles.content_list}>{post.postedBy}</span>
             <span className={styles.content_list}>{post.postedAt}</span>