From 597abd99298a34b4fafaa852aca821b3a9034e52 Mon Sep 17 00:00:00 2001
From: KaichiManabe <154493010+KaichiManabe@users.noreply.github.com>
Date: Sun, 19 Jan 2025 10:49:44 +0900
Subject: [PATCH 1/9] =?UTF-8?q?Header=E3=81=A8Bottom=E3=81=AE=E5=A4=A7?=
 =?UTF-8?q?=E3=81=8D=E3=81=95=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/components/BottomBar.tsx | 10 +++++-----
 web/components/Header.tsx    |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/components/BottomBar.tsx b/web/components/BottomBar.tsx
index 00e55bb1..ff571137 100644
--- a/web/components/BottomBar.tsx
+++ b/web/components/BottomBar.tsx
@@ -37,27 +37,27 @@ export default function BottomBar(props: Props) {
       <BottomBarCell
         href="/home"
         isActive={activeTab === "0_home"}
-        iconComponent={<MdHome className="text-2xl" />}
+        iconComponent={<MdHome className="text-3xl" />}
       />
       <BottomBarCell
         href="/friends"
         isActive={activeTab === "1_friends"}
-        iconComponent={<MdPeople className="text-2xl" />}
+        iconComponent={<MdPeople className="text-3xl" />}
       />
       <BottomBarCell
         href="/search"
         isActive={activeTab === "2_search"}
-        iconComponent={<MdSearch className="text-2xl" />}
+        iconComponent={<MdSearch className="text-3xl" />}
       />
       <BottomBarCell
         href="/chat"
         isActive={activeTab === "3_chat"}
-        iconComponent={<MdChat className="text-2xl" />}
+        iconComponent={<MdChat className="text-3xl" />}
       />
       <BottomBarCell
         href="/settings"
         isActive={activeTab === "4_settings"}
-        iconComponent={<MdSettings className="text-2xl" />}
+        iconComponent={<MdSettings className="text-3xl" />}
       />
     </div>
   );
diff --git a/web/components/Header.tsx b/web/components/Header.tsx
index 43715ac8..94ee4a15 100644
--- a/web/components/Header.tsx
+++ b/web/components/Header.tsx
@@ -12,15 +12,15 @@ export default function Header(props: Props) {
     <header className="w-full bg-secondary shadow-md">
       <div className="flex items-center justify-between px-4 py-3">
         <Link href="/home" passHref>
-          <CourseMateIcon width="28px" height="28px" />
+          <CourseMateIcon width="30px" height="30px" />
         </Link>
 
-        <h1 className="flex-grow text-center font-semibold text-black text-lg">
+        <h1 className="flex-grow text-center font-semibold text-black text-xl">
           {title}
         </h1>
 
         <Link href="/faq" passHref>
-          <MdInfoOutline size={24} />
+          <MdInfoOutline size={28} />
         </Link>
       </div>
     </header>

From e46198a8b11a1a62128dd2a73fcac3d34415bff6 Mon Sep 17 00:00:00 2001
From: KaichiManabe <154493010+KaichiManabe@users.noreply.github.com>
Date: Sun, 19 Jan 2025 11:40:55 +0900
Subject: [PATCH 2/9] =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6?=
 =?UTF-8?q?=E3=83=88=E3=82=92=E5=BE=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/friends/page.tsx                | 6 ++----
 web/app/home/layout.tsx                 | 2 +-
 web/app/home/page.tsx                   | 2 +-
 web/components/match/matching.tsx       | 4 ++--
 web/components/match/myRequests.tsx     | 4 ++--
 web/components/match/othersRequests.tsx | 4 ++--
 6 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/web/app/friends/page.tsx b/web/app/friends/page.tsx
index 412fa5c4..9374e211 100644
--- a/web/app/friends/page.tsx
+++ b/web/app/friends/page.tsx
@@ -18,7 +18,7 @@ export default function Friends() {
       <div className="flex w-full border-gray-200 border-b">
         <button
           type="button"
-          className={`relative flex-1 py-2 text-center ${
+          className={`relative flex-1 py-3 text-center ${
             activeTab === "matching" ? "text-primary" : "text-gray-600"
           }`}
           onClick={() => setActiveTab("matching")}
@@ -28,7 +28,6 @@ export default function Friends() {
             <span className="absolute bottom-0 left-0 h-1 w-full bg-primary" />
           )}
         </button>
-
         <button
           type="button"
           className={`relative flex-1 py-2 text-center ${
@@ -43,8 +42,7 @@ export default function Friends() {
         </button>
       </div>
 
-      {/* コンテンツ部分 */}
-      <div className="mt-4 text-center text-gray-700 text-lg">
+      <div className="text-center text-gray-700 text-lg">
         {activeTab === "matching" ? <NoSSRMatchings /> : <NoSSRRequests />}
       </div>
     </div>
diff --git a/web/app/home/layout.tsx b/web/app/home/layout.tsx
index 792f2828..6b41946a 100644
--- a/web/app/home/layout.tsx
+++ b/web/app/home/layout.tsx
@@ -10,7 +10,7 @@ export default function HomePageLayout({
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="ホーム/Home" />
-      <div className="grow overflow-y-auto">{children}</div>
+      <div className="grow overflow-y-auto ">{children}</div>
       <BottomBar activeTab="0_home" />
     </NavigateByAuthState>
   );
diff --git a/web/app/home/page.tsx b/web/app/home/page.tsx
index b2d4a8eb..a8ca5867 100644
--- a/web/app/home/page.tsx
+++ b/web/app/home/page.tsx
@@ -88,7 +88,7 @@ export default function Home() {
 
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
-      <div className="flex h-full flex-col items-center justify-center">
+      <div className="flex h-full flex-col items-center justify-center p-4">
         {displayedUser && (
           <>
             <div className="flex h-full flex-col items-center justify-center">
diff --git a/web/components/match/matching.tsx b/web/components/match/matching.tsx
index c15962f3..63454f92 100644
--- a/web/components/match/matching.tsx
+++ b/web/components/match/matching.tsx
@@ -13,9 +13,9 @@ export default function Matchings() {
   const { openModal } = useModal();
 
   return (
-    <div className="p-4">
+    <div>
       {data && data.length === 0 && (
-        <p className="mr-10 ml-10 text-lg">
+        <p className="p-4 text-lg">
           誰ともマッチングしていません。 リクエストを送りましょう！
         </p>
       )}
diff --git a/web/components/match/myRequests.tsx b/web/components/match/myRequests.tsx
index cc4e72c9..739b3d8a 100644
--- a/web/components/match/myRequests.tsx
+++ b/web/components/match/myRequests.tsx
@@ -10,8 +10,8 @@ export default function MyReq() {
   const { openModal } = useModal();
 
   return (
-    <div className="p-4">
-      <p className="ml-10 text-lg">
+    <div>
+      <p className="p-4 text-lg">
         {state.data && state.data.length > 0
           ? "以下のリクエストを送信しました！"
           : "リクエストを送信しましょう！"}
diff --git a/web/components/match/othersRequests.tsx b/web/components/match/othersRequests.tsx
index a3c92563..a97bb040 100644
--- a/web/components/match/othersRequests.tsx
+++ b/web/components/match/othersRequests.tsx
@@ -14,8 +14,8 @@ export default function OthersReq() {
   const { openModal } = useModal();
 
   return (
-    <div className="p-4">
-      <p className="ml-10 text-lg">
+    <div>
+      <p className="p-4 text-lg">
         {data && data.length > 0
           ? "以下のリクエストを受け取りました！"
           : "リクエストは受け取っていません。"}

From 59987573a8c8d7934395c1f47d05faaa79b2eb0c Mon Sep 17 00:00:00 2001
From: KaichiManabe <154493010+KaichiManabe@users.noreply.github.com>
Date: Sun, 19 Jan 2025 11:59:06 +0900
Subject: [PATCH 3/9] =?UTF-8?q?humanlistItem=E3=82=92=E7=B7=A8=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/friends/page.tsx               |  2 +-
 web/components/chat/RoomWindow.tsx     | 13 +++----
 web/components/human/humanListItem.tsx | 50 ++++++++++++--------------
 3 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/web/app/friends/page.tsx b/web/app/friends/page.tsx
index 9374e211..35329816 100644
--- a/web/app/friends/page.tsx
+++ b/web/app/friends/page.tsx
@@ -23,7 +23,7 @@ export default function Friends() {
           }`}
           onClick={() => setActiveTab("matching")}
         >
-          <span>マッチ中</span>
+          <span>マッチ</span>
           {activeTab === "matching" && (
             <span className="absolute bottom-0 left-0 h-1 w-full bg-primary" />
           )}
diff --git a/web/components/chat/RoomWindow.tsx b/web/components/chat/RoomWindow.tsx
index 8a534d29..551badf5 100644
--- a/web/components/chat/RoomWindow.tsx
+++ b/web/components/chat/RoomWindow.tsx
@@ -205,10 +205,7 @@ export function RoomWindow(props: Props) {
                           保存
                         </button>
                         {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-                        <button
-                          className="btn btn-outline"
-                          onClick={cancelEdit}
-                        >
+                        <button className="btn " onClick={cancelEdit}>
                           キャンセル
                         </button>
                       </div>
@@ -293,18 +290,18 @@ const FloatingMessage = ({
         <p>{message}</p>
         {showButtons && (
           <div className="mt-4 space-x-4">
-            {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
             <button
-              className="btn btn-success btn-sm"
+              type="button"
+              className="btn btn-primary btn-sm"
               onClick={() => {
                 request.accept(friendId).then(() => router.push("/chat"));
               }}
             >
               承認
             </button>
-            {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
             <button
-              className="btn btn-error btn-sm"
+              type="button"
+              className="btn btn-sm"
               onClick={() => {
                 request.reject(friendId).then(() => router.push("/chat"));
               }}
diff --git a/web/components/human/humanListItem.tsx b/web/components/human/humanListItem.tsx
index cee4f022..b6d5a71f 100644
--- a/web/components/human/humanListItem.tsx
+++ b/web/components/human/humanListItem.tsx
@@ -49,37 +49,33 @@ export function HumanListItem(props: HumanListItemProps) {
 
   return (
     <div
-      className="flex items-center justify-between border-b p-4"
+      className="flex flex-row items-center border-b p-4"
       key={id.toString()}
     >
-      {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-      <button
-        className="flex w-full items-center text-left"
-        onClick={handleOpenClick}
-      >
-        <div className="ml-2">
+      <button type="button" onClick={handleOpenClick}>
+        <div className="ml-1">
           <UserAvatar pictureUrl={pictureUrl} width="50px" height="50px" />
         </div>
-        <div className="ml-4 flex flex-col justify-center">
-          <span className="truncate font-medium text-base">{name}</span>
-          {rollUpName && (
-            <span className="max-w-[60vw] truncate text-gray-500 text-sm">
-              {lastMessage}
-            </span>
-          )}
-          {statusMessage && (
-            <span className="text-blue-500 text-sm">{statusMessage}</span>
-          )}
-        </div>
       </button>
-      <div className="mr-3 flex items-center space-x-2">
+      <div className="ml-7 flex flex-col justify-center">
+        <span className="truncate font-medium text-base">{name}</span>
+        {rollUpName && (
+          <span className="max-w-[60vw] truncate text-gray-500 text-sm">
+            {lastMessage}
+          </span>
+        )}
+        {statusMessage && (
+          <span className="text-blue-500 text-sm">{statusMessage}</span>
+        )}
+      </div>
+      <div className="ml-auto">
         {unreadCount ? (
           <span className="badge badge-primary">{unreadCount}</span>
         ) : undefined}
         {onAccept && (
-          // biome-ignore lint/a11y/useButtonType: <explanation>
           <button
-            className="btn btn-success btn-sm"
+            type="button"
+            className="btn btn-primary btn-sm m-1"
             onClick={(e) => {
               e.stopPropagation();
               onAccept(id);
@@ -89,9 +85,9 @@ export function HumanListItem(props: HumanListItemProps) {
           </button>
         )}
         {onReject && (
-          // biome-ignore lint/a11y/useButtonType: <explanation>
           <button
-            className="btn btn-error btn-sm"
+            type="button"
+            className="btn btn-sm m-1"
             onClick={(e) => {
               e.stopPropagation();
               onReject(id);
@@ -101,18 +97,18 @@ export function HumanListItem(props: HumanListItemProps) {
           </button>
         )}
         {onCancel && (
-          // biome-ignore lint/a11y/useButtonType: <explanation>
           <button
-            className="btn btn-secondary btn-sm"
+            type="button"
+            className="btn btn-sm m-1"
             onClick={() => onCancel(id)}
           >
             キャンセル
           </button>
         )}
         {onRequest && (
-          // biome-ignore lint/a11y/useButtonType: <explanation>
           <button
-            className="btn btn-sm bg-primary text-white"
+            type="button"
+            className="btn btn-sm m-1 bg-primary text-white"
             onClick={() => onRequest(id)}
           >
             リクエスト

From f1e3058eab0e3d2c335fd00877ab04565574cb3d Mon Sep 17 00:00:00 2001
From: KaichiManabe <154493010+KaichiManabe@users.noreply.github.com>
Date: Sun, 19 Jan 2025 12:02:44 +0900
Subject: [PATCH 4/9] =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=A1?=
 =?UTF-8?q?=E3=83=83=E3=82=BB=E3=83=BC=E3=82=B8=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/chat/page.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/app/chat/page.tsx b/web/app/chat/page.tsx
index ac10655a..6a9e3cb2 100644
--- a/web/app/chat/page.tsx
+++ b/web/app/chat/page.tsx
@@ -18,7 +18,9 @@ function ChatListContent() {
   return state.current === "loading" ? (
     <FullScreenCircularProgress />
   ) : state.current === "error" ? (
-    <p className="decoration-red">Error: {state.error.message}</p>
+    <p className="p-4 decoration-red">
+      エラーが発生しました。リロードしてください。
+    </p>
   ) : (
     <RoomList roomsData={state.data} />
   );

From dc32fbdcbe2a180fe22c6a98811d04555c6ab2e7 Mon Sep 17 00:00:00 2001
From: KaichiManabe <154493010+KaichiManabe@users.noreply.github.com>
Date: Sun, 19 Jan 2025 13:59:38 +0900
Subject: [PATCH 5/9] =?UTF-8?q?Chat=E3=81=AECSS=E3=82=92=E5=A4=89=E6=9B=B4?=
 =?UTF-8?q?(=E8=A6=81=E4=BF=AE=E6=AD=A3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/chat/layout.tsx            |   2 +-
 web/components/BottomBar.tsx       |   2 +-
 web/components/chat/RoomWindow.tsx | 196 ++++++++++++++---------------
 3 files changed, 98 insertions(+), 102 deletions(-)

diff --git a/web/app/chat/layout.tsx b/web/app/chat/layout.tsx
index 96f0d8d7..8866a802 100644
--- a/web/app/chat/layout.tsx
+++ b/web/app/chat/layout.tsx
@@ -10,7 +10,7 @@ export default function ChatPageLayout({
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="チャット/Chat" />
-      <div className="grow overflow-y-auto">{children}</div>
+      <div className="grow ">{children}</div>
       <BottomBar activeTab="3_chat" />
     </NavigateByAuthState>
   );
diff --git a/web/components/BottomBar.tsx b/web/components/BottomBar.tsx
index ff571137..ba972f3a 100644
--- a/web/components/BottomBar.tsx
+++ b/web/components/BottomBar.tsx
@@ -33,7 +33,7 @@ function BottomBarCell({
 export default function BottomBar(props: Props) {
   const { activeTab } = props;
   return (
-    <div className="flex w-full flex-row items-center justify-around ">
+    <div className="flex w-full flex-row items-center justify-around">
       <BottomBarCell
         href="/home"
         isActive={activeTab === "0_home"}
diff --git a/web/components/chat/RoomWindow.tsx b/web/components/chat/RoomWindow.tsx
index 551badf5..6a6de342 100644
--- a/web/components/chat/RoomWindow.tsx
+++ b/web/components/chat/RoomWindow.tsx
@@ -24,7 +24,6 @@ export function RoomWindow(props: Props) {
     );
   }
 
-  console.log("rendering");
   useEffect(() => {
     (async () => {
       const lastM = room.messages.at(-1);
@@ -146,7 +145,7 @@ export function RoomWindow(props: Props) {
   );
 
   return (
-    <>
+    <div className="flex h-full flex-col">
       {room.matchingStatus !== "matched" && (
         <FloatingMessage
           message="この人とはマッチングしていません。"
@@ -154,110 +153,107 @@ export function RoomWindow(props: Props) {
           showButtons={room.matchingStatus === "otherRequest"}
         />
       )}
-
-      <div className="fixed top-14 z-50 w-full bg-white">
+      <div className="w-full bg-white">
         <RoomHeader room={room} />
       </div>
-      <div className="absolute top-14 right-0 left-0 flex flex-col overflow-y-auto">
-        {messages && messages.length > 0 ? (
-          <div className="flex-grow overflow-y-auto p-2" ref={scrollDiv}>
-            {messages.map((m) =>
-              m.isPicture ? (
-                <img
-                  height="300px"
-                  width="300px"
-                  style={{
-                    maxHeight: "300px",
-                    maxWidth: "300px",
-                    float: m.creator === myId ? "right" : "left",
-                  }}
-                  key={m.id}
-                  alt=""
-                  src={API_ENDPOINT + m.content}
-                />
-              ) : (
-                <div
-                  key={m.id}
-                  className={`mb-2 flex ${
-                    m.creator === myId ? "justify-end" : "justify-start"
-                  }`}
-                >
-                  {editingMessageId === m.id ? (
-                    <div className="flex w-3/5 flex-col">
-                      <textarea
-                        value={editedContent}
-                        onChange={(e) => setEditedContent(e.target.value)}
-                        onKeyDown={(e) => {
-                          if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-                            commitEdit(editingMessageId, editedContent);
-                          }
-                        }}
-                        className="textarea textarea-bordered h-24 w-full"
-                      />
-                      <div className="mt-2 flex justify-evenly gap-2">
-                        {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-                        <button
-                          className="btn btn-primary"
-                          onClick={() =>
-                            commitEdit(editingMessageId, editedContent)
-                          }
-                        >
-                          保存
-                        </button>
-                        {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
-                        <button className="btn " onClick={cancelEdit}>
-                          キャンセル
-                        </button>
-                      </div>
+      {messages && messages.length > 0 ? (
+        <div className="flex-1 overflow-hidden p-2" ref={scrollDiv}>
+          {messages.map((m) =>
+            m.isPicture ? (
+              <img
+                height="300px"
+                width="300px"
+                style={{
+                  maxHeight: "300px",
+                  maxWidth: "300px",
+                  float: m.creator === myId ? "right" : "left",
+                }}
+                key={m.id}
+                alt=""
+                src={API_ENDPOINT + m.content}
+              />
+            ) : (
+              <div
+                key={m.id}
+                className={`mb-2 flex ${
+                  m.creator === myId ? "justify-end" : "justify-start"
+                }`}
+              >
+                {editingMessageId === m.id ? (
+                  <div className="flex w-3/5 flex-col">
+                    <textarea
+                      value={editedContent}
+                      onChange={(e) => setEditedContent(e.target.value)}
+                      onKeyDown={(e) => {
+                        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                          commitEdit(editingMessageId, editedContent);
+                        }
+                      }}
+                      className="textarea textarea-bordered h-24 w-full"
+                    />
+                    <div className="mt-2 flex justify-evenly gap-2">
+                      {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
+                      <button
+                        className="btn btn-primary"
+                        onClick={() =>
+                          commitEdit(editingMessageId, editedContent)
+                        }
+                      >
+                        保存
+                      </button>
+                      {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
+                      <button className="btn " onClick={cancelEdit}>
+                        キャンセル
+                      </button>
                     </div>
-                  ) : (
-                    <div
-                      className={`rounded-xl p-2 shadow ${
-                        m.creator === myId ? "bg-secondary" : "bg-white"
-                      }`}
-                    >
-                      <p className="whitespace-pre-wrap break-words">
-                        {m.content}
-                      </p>
-                      {m.creator === myId && (
-                        <Dots
-                          actions={[
-                            {
-                              label: "編集",
-                              onClick: () => startEditing(m.id, m.content),
-                              alert: false,
-                            },
-                            {
-                              label: "削除",
-                              color: "red",
-                              onClick: () => deleteMessage(m.id, friendId),
-                              alert: true,
-                              messages: {
-                                buttonMessage: "削除",
-                                AlertMessage: "本当に削除しますか？",
-                                subAlertMessage: "この操作は取り消せません。",
-                                yesMessage: "削除",
-                              },
+                  </div>
+                ) : (
+                  <div
+                    className={`rounded-xl p-2 shadow ${
+                      m.creator === myId ? "bg-secondary" : "bg-white"
+                    }`}
+                  >
+                    <p className="whitespace-pre-wrap break-words">
+                      {m.content}
+                    </p>
+                    {m.creator === myId && (
+                      <Dots
+                        actions={[
+                          {
+                            label: "編集",
+                            onClick: () => startEditing(m.id, m.content),
+                            alert: false,
+                          },
+                          {
+                            label: "削除",
+                            color: "red",
+                            onClick: () => deleteMessage(m.id, friendId),
+                            alert: true,
+                            messages: {
+                              buttonMessage: "削除",
+                              AlertMessage: "本当に削除しますか？",
+                              subAlertMessage: "この操作は取り消せません。",
+                              yesMessage: "削除",
                             },
-                          ]}
-                        />
-                      )}
-                    </div>
-                  )}
-                </div>
-              ),
-            )}
-          </div>
-        ) : (
-          <div className="text-center text-gray-500">
-            最初のメッセージを送ってみましょう！
-          </div>
-        )}
-      </div>
-      <div className="fixed bottom-12 w-full bg-white p-0">
+                          },
+                        ]}
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            ),
+          )}
+        </div>
+      ) : (
+        <div className="flex-1 p-2 text-center text-gray-500">
+          最初のメッセージを送ってみましょう！
+        </div>
+      )}
+      <div className="w-full bg-white">
         <MessageInput reload={reload} send={sendDMMessage} room={room} />
       </div>
-    </>
+    </div>
   );
 }
 

From d1798b12868cfe00e04d578c79a8e1746d0f9d0f Mon Sep 17 00:00:00 2001
From: KaichiManabe <154493010+KaichiManabe@users.noreply.github.com>
Date: Sun, 19 Jan 2025 15:05:06 +0900
Subject: [PATCH 6/9] =?UTF-8?q?=E3=83=81=E3=83=A5=E3=83=BC=E3=83=88?=
 =?UTF-8?q?=E3=83=AA=E3=82=A2=E3=83=AB=E3=81=AE=E3=83=AC=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=82=A6=E3=83=88=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/tutorial/layout.tsx        | 21 ++++++++++++
 web/app/tutorial/page.tsx          | 54 ++++++++++++------------------
 web/components/chat/RoomWindow.tsx |  4 +--
 3 files changed, 44 insertions(+), 35 deletions(-)
 create mode 100644 web/app/tutorial/layout.tsx

diff --git a/web/app/tutorial/layout.tsx b/web/app/tutorial/layout.tsx
new file mode 100644
index 00000000..d252f74e
--- /dev/null
+++ b/web/app/tutorial/layout.tsx
@@ -0,0 +1,21 @@
+import Link from "next/link";
+import Header from "~/components/Header";
+import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
+
+export default function TutorialPageLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <NavigateByAuthState type="toLoginForUnauthenticated">
+      <Header title="チュートリアル/Tutorial" />
+      <div className="grow">{children}</div>
+      <div className="m-4 text-center">
+        <Link href="/home" className="btn btn-primary w-full">
+          ホーム画面へ
+        </Link>
+      </div>
+    </NavigateByAuthState>
+  );
+}
diff --git a/web/app/tutorial/page.tsx b/web/app/tutorial/page.tsx
index 7982323d..87ed8771 100644
--- a/web/app/tutorial/page.tsx
+++ b/web/app/tutorial/page.tsx
@@ -1,12 +1,10 @@
 "use client";
 
-import { Navigation, Pagination } from "swiper/modules";
+import { Navigation } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 import "swiper/css/navigation";
 import "swiper/css/pagination";
-import Link from "next/link";
-import Header from "~/components/Header";
 
 const tutorialSteps = [
   {
@@ -41,36 +39,26 @@ const tutorialSteps = [
 
 export default function Tutorial() {
   return (
-    <div className="absolute inset-0 flex flex-col overflow-y-auto px-5 pt-14">
-      <Header title="チュートリアル/Tutorial" />
-      <div className="text-left">
-        <Swiper
-          modules={[Navigation, Pagination]}
-          spaceBetween={50}
-          slidesPerView={1}
-          navigation
-          pagination={{ clickable: true }}
-          className="pb-16"
-        >
-          {tutorialSteps.map((step) => (
-            <SwiperSlide key={step.imgPath}>
-              <div className="mb-6 text-center">
-                <h1 className="mb-4 font-bold text-lg">{step.label}</h1>
-                <img
-                  src={step.imgPath}
-                  alt={step.label}
-                  className="mx-auto block h-auto w-[60vw] max-w-[400px]"
-                />
-              </div>
-            </SwiperSlide>
-          ))}
-        </Swiper>
-        <div className="text-center">
-          <Link href="/home" className="btn btn-primary w-full">
-            ホーム画面へ
-          </Link>
-        </div>
-      </div>
+    <div className="h-full ">
+      <Swiper
+        modules={[Navigation]}
+        spaceBetween={50}
+        slidesPerView={1}
+        navigation
+      >
+        {tutorialSteps.map((step) => (
+          <SwiperSlide key={step.imgPath}>
+            <div className="text-center ">
+              <h1 className="m-6 font-bold text-3xl">{step.label}</h1>
+              <img
+                src={step.imgPath}
+                alt={step.label}
+                className="mx-auto block h-auto w-[60vw] max-w-[400px] "
+              />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </div>
   );
 }
diff --git a/web/components/chat/RoomWindow.tsx b/web/components/chat/RoomWindow.tsx
index 6a6de342..128e60ed 100644
--- a/web/components/chat/RoomWindow.tsx
+++ b/web/components/chat/RoomWindow.tsx
@@ -145,7 +145,7 @@ export function RoomWindow(props: Props) {
   );
 
   return (
-    <div className="flex h-full flex-col">
+    <div className="flex flex-col">
       {room.matchingStatus !== "matched" && (
         <FloatingMessage
           message="この人とはマッチングしていません。"
@@ -157,7 +157,7 @@ export function RoomWindow(props: Props) {
         <RoomHeader room={room} />
       </div>
       {messages && messages.length > 0 ? (
-        <div className="flex-1 overflow-hidden p-2" ref={scrollDiv}>
+        <div className="h-full flex-1 overflow-hidden p-2" ref={scrollDiv}>
           {messages.map((m) =>
             m.isPicture ? (
               <img

From 690fac28de3569dba65974f93ee476eacec20373 Mon Sep 17 00:00:00 2001
From: KaichiManabe <154493010+KaichiManabe@users.noreply.github.com>
Date: Sun, 19 Jan 2025 16:51:24 +0900
Subject: [PATCH 7/9] =?UTF-8?q?=E5=88=9D=E6=9C=9F=E7=99=BB=E9=8C=B2?=
 =?UTF-8?q?=E3=81=A7=E3=80=81=E8=88=88=E5=91=B3=E5=88=86=E9=87=8E=E3=82=92?=
 =?UTF-8?q?=E7=99=BB=E9=8C=B2=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E3=81=AA=E3=81=A3=E3=81=9F=E3=80=82=20(#588)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# PRの概要

## 具体的な変更内容

## 影響範囲

## 動作要件

## 補足

## レビューリクエストを出す前にチェック！

- [ ] 改めてセルフレビューしたか
- [ ] 手動での動作検証を行ったか
- [ ] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [ ] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->
---
 web/app/signup/common.tsx                |   2 +-
 web/app/signup/page.tsx                  |   9 +-
 web/app/signup/steps/step1_profile.tsx   |   2 +-
 web/app/signup/steps/step4_course.tsx    |  12 +-
 web/app/signup/steps/step5_interests.tsx | 237 +++++++++++++++++++++++
 5 files changed, 253 insertions(+), 9 deletions(-)
 create mode 100644 web/app/signup/steps/step5_interests.tsx

diff --git a/web/app/signup/common.tsx b/web/app/signup/common.tsx
index c4cdbe32..6cd4a870 100644
--- a/web/app/signup/common.tsx
+++ b/web/app/signup/common.tsx
@@ -2,7 +2,7 @@ export type Caller = "registration" | "configMenu";
 export type StepProps<T> = {
   onSave: (t: T) => void;
   prev?: T;
-  caller: Caller;
+  caller?: Caller;
 };
 
 export type BackProp = {
diff --git a/web/app/signup/page.tsx b/web/app/signup/page.tsx
index 47d14a1a..155cb036 100644
--- a/web/app/signup/page.tsx
+++ b/web/app/signup/page.tsx
@@ -12,11 +12,12 @@ import Step1 from "./steps/step1_profile";
 import Step2, { type Step2Data } from "./steps/step2_img";
 import Confirmation from "./steps/step3_confirmation";
 import Step4 from "./steps/step4_course";
+import Step5 from "./steps/step5_interests";
 
 function Registration() {
   const { enqueueSnackbar } = useSnackbar();
   const router = useRouter();
-  const [step, setStep] = useState<1 | 2 | 3 | 4>(1);
+  const [step, setStep] = useState<1 | 2 | 3 | 4 | 5>(1);
 
   const [step1Data, setStep1Data] = useState<Step1User>();
   const [step2Data, setStep2Data] = useState<Step2Data>();
@@ -71,7 +72,9 @@ function Registration() {
         />
       );
     case 4:
-      return <Step4 />;
+      return <Step4 onSave={() => setStep(5)} />;
+    case 5:
+      return <Step5 back={() => setStep(4)} />;
   }
 }
 export default function RegistrationPage() {
@@ -79,7 +82,7 @@ export default function RegistrationPage() {
     <NavigateByAuthState type="toHomeForAuthenticated">
       <div className="flex h-screen flex-col">
         <Header title="登録/Register" />
-        <div className="mt-14 flex-1">
+        <div className="flex-1">
           <Registration />
         </div>
       </div>
diff --git a/web/app/signup/steps/step1_profile.tsx b/web/app/signup/steps/step1_profile.tsx
index 485bffde..4b84521e 100644
--- a/web/app/signup/steps/step1_profile.tsx
+++ b/web/app/signup/steps/step1_profile.tsx
@@ -43,7 +43,7 @@ export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
   }, [selectedFaculty, setValue, resetField]);
   return (
     <>
-      <div className="m-4 mb-8 flex flex-col gap-4">
+      <div className="m-4 flex h-full flex-col gap-4">
         <h1 className="text-xl">アカウント設定</h1>
         <div className="flex flex-col gap-2">
           <form onSubmit={handleSubmit(onSubmit)}>
diff --git a/web/app/signup/steps/step4_course.tsx b/web/app/signup/steps/step4_course.tsx
index 4498e917..1193426e 100644
--- a/web/app/signup/steps/step4_course.tsx
+++ b/web/app/signup/steps/step4_course.tsx
@@ -1,9 +1,9 @@
-import Link from "next/link";
 import { useMyID } from "~/api/user";
 import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
 import EditableCoursesTable from "~/components/course/EditableCoursesTable";
+import type { StepProps } from "../common";
 
-export default function Step4() {
+export default function Step4({ onSave }: StepProps<void>) {
   const { state } = useMyID();
   return (
     <div className="flex h-full flex-col">
@@ -23,9 +23,13 @@ export default function Step4() {
       </div>
       <div className="flex w-full justify-between p-6">
         <span />
-        <Link href="/tutorial" className="btn btn-primary">
+        <button
+          type="button"
+          onClick={() => onSave()}
+          className="btn btn-primary"
+        >
           次へ
-        </Link>
+        </button>
       </div>
     </div>
   );
diff --git a/web/app/signup/steps/step5_interests.tsx b/web/app/signup/steps/step5_interests.tsx
new file mode 100644
index 00000000..7b60ea04
--- /dev/null
+++ b/web/app/signup/steps/step5_interests.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import type { InterestSubject } from "common/types";
+import { useRouter } from "next/navigation";
+import { enqueueSnackbar } from "notistack";
+import { useEffect, useState } from "react";
+import { MdAdd, MdClose } from "react-icons/md";
+import FullScreenCircularProgress from "~/components/common/FullScreenCircularProgress";
+import { useAlert } from "~/components/common/alert/AlertProvider";
+import * as subject from "../../../api/subject";
+import type { BackProp } from "../common";
+
+export default function Step5({ back }: BackProp) {
+  const { state } = subject.useMyInterests();
+  const data = state.data;
+  const error = state.current === "error" ? state.error : null;
+  const loading = state.current === "loading";
+
+  const router = useRouter();
+  const { showAlert } = useAlert();
+
+  const [allSubjects, setAllSubjects] = useState<InterestSubject[]>([]);
+  const [filteredSubjects, setFilteredSubjects] = useState<InterestSubject[]>(
+    [],
+  );
+  const [draftSubjects, setDraftSubjects] = useState<InterestSubject[]>(
+    data ?? [],
+  );
+  const [isOpen, setIsOpen] = useState(false);
+  const [newSubjectName, setNewSubjectName] = useState("");
+
+  useEffect(() => {
+    getSubjects();
+  }, []);
+
+  useEffect(() => {
+    setDraftSubjects(data ?? []);
+  }, [data]);
+
+  async function getSubjects() {
+    const subjects = await subject.getAll();
+    setAllSubjects(subjects);
+    setFilteredSubjects(subjects);
+  }
+
+  async function updateInterests(data: {
+    interestSubjects: InterestSubject[];
+  }) {
+    const ids = data.interestSubjects.map((d) => d.id);
+    const result = await subject.update(ids);
+    if (!result.ok) {
+      enqueueSnackbar("興味分野の保存に失敗しました", { variant: "error" });
+    } else {
+      enqueueSnackbar("興味分野を保存しました", { variant: "success" });
+    }
+  }
+
+  async function createSubject(name: string) {
+    const result = await subject.create(name);
+    if (!result.ok) {
+      enqueueSnackbar("興味分野の作成に失敗しました", { variant: "error" });
+    } else {
+      enqueueSnackbar("興味分野を作成しました", { variant: "success" });
+    }
+  }
+
+  function handleBack() {
+    // TODO: 差分がないときは確認なしで戻る
+    showAlert({
+      AlertMessage: "変更がある場合は、破棄されます。",
+      subAlertMessage: "本当にページを移動しますか？",
+      yesMessage: "移動",
+      clickYes: () => {
+        back();
+      },
+    });
+  }
+
+  return loading ? (
+    <FullScreenCircularProgress />
+  ) : error ? (
+    <p>Error: {error.message}</p>
+  ) : !data ? (
+    <p>データがありません。</p>
+  ) : (
+    <>
+      <div className="h-full overflow-y-scroll">
+        <div className="mx-auto flex h-full max-w-lg flex-col px-4">
+          <div className="flex-1">
+            <div className="flex flex-wrap gap-2 p-2">
+              {draftSubjects.map((subject, index) => (
+                <span
+                  key={subject.id}
+                  className="rounded-md bg-[#F7FCFF] px-2 py-1 text-md text-primary"
+                >
+                  #{subject.name}
+                  <button
+                    type="button"
+                    className="btn btn-circle btn-xs ml-1"
+                    onClick={() =>
+                      setDraftSubjects((prev) => {
+                        const copy = [...prev];
+                        copy.splice(index, 1);
+                        return copy;
+                      })
+                    }
+                  >
+                    <MdClose className="text-xs" />
+                  </button>
+                </span>
+              ))}
+            </div>
+            <div className="mt-2 w-full">
+              <input
+                type="text"
+                onChange={(e) => {
+                  const newFilteredSubjects = allSubjects.filter((subject) =>
+                    subject.name.includes(e.target.value.trim()),
+                  );
+                  setFilteredSubjects(newFilteredSubjects);
+                }}
+                placeholder="興味分野タグを絞り込み"
+                className="input input-bordered w-full"
+              />
+            </div>
+            <ul className="mt-2">
+              {filteredSubjects.length !== 0 ? (
+                filteredSubjects
+                  .filter(
+                    (subject) =>
+                      !draftSubjects.some((draft) => draft.id === subject.id),
+                  )
+                  .map((subject) => (
+                    <li key={subject.id}>
+                      <button
+                        type="button"
+                        className="btn btn-ghost inline-flex h-full w-full justify-start p-2"
+                        onClick={() =>
+                          setDraftSubjects((prev) => [...prev, subject])
+                        }
+                      >
+                        <span className="font-normal text-lg">
+                          #{subject.name}
+                        </span>
+                      </button>
+                    </li>
+                  ))
+              ) : (
+                <li key="empty" className="p-2 text-gray-500">
+                  検索結果がありません
+                </li>
+              )}
+              <li className="flex w-full items-center justify-center py-2">
+                <button
+                  type="button"
+                  className="btn btn-secondary px-6 font-normal"
+                  onClick={() => setIsOpen(true)}
+                >
+                  <MdAdd />
+                  タグを新規作成
+                </button>
+              </li>
+            </ul>
+          </div>
+          <div className="my-2 flex justify-between">
+            <button type="button" className="btn " onClick={handleBack}>
+              前へ
+            </button>
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={() => {
+                updateInterests({ interestSubjects: draftSubjects });
+                router.push("/tutorial");
+              }}
+            >
+              次へ
+            </button>
+          </div>
+        </div>
+      </div>
+      {isOpen && (
+        <dialog
+          id="add-dialog"
+          className="modal modal-open"
+          onClose={() => setIsOpen(false)}
+        >
+          <div className="modal-box">
+            <h3 className="mb-4 font-bold text-lg">興味分野タグの作成</h3>
+            <input
+              type="text"
+              className="input input-bordered my-2 w-full"
+              value={newSubjectName}
+              onChange={(e) => setNewSubjectName(e.target.value)}
+              placeholder="タグ名を入力"
+            />
+            {newSubjectName && (
+              <p className="py-4">
+                興味分野タグ{" "}
+                <span className="text-primary">#{newSubjectName}</span>{" "}
+                を作成します
+              </p>
+            )}
+            <div className="modal-action">
+              <form method="dialog">
+                <div className="flex gap-3">
+                  <button
+                    type="button"
+                    className="btn"
+                    onClick={() => {
+                      setIsOpen(false);
+                      setNewSubjectName("");
+                    }}
+                  >
+                    キャンセル
+                  </button>
+                  <button
+                    type="button"
+                    className="btn btn-primary"
+                    onClick={async () => {
+                      await createSubject(newSubjectName);
+                      setIsOpen(false);
+                      getSubjects();
+                      setNewSubjectName("");
+                    }}
+                  >
+                    作成
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </dialog>
+      )}
+    </>
+  );
+}

From 18a4d0f2b5c11c5f8a7b417bc884ab621c6ecc23 Mon Sep 17 00:00:00 2001
From: naka-12 <104970808+naka-12@users.noreply.github.com>
Date: Sun, 19 Jan 2025 20:38:18 +0900
Subject: [PATCH 8/9] =?UTF-8?q?chat=20=E7=94=BB=E9=9D=A2=E3=81=AE=20overfl?=
 =?UTF-8?q?ow=20=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/chat/layout.tsx            | 2 +-
 web/components/chat/RoomWindow.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/app/chat/layout.tsx b/web/app/chat/layout.tsx
index 8866a802..ef128dd9 100644
--- a/web/app/chat/layout.tsx
+++ b/web/app/chat/layout.tsx
@@ -10,7 +10,7 @@ export default function ChatPageLayout({
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="チャット/Chat" />
-      <div className="grow ">{children}</div>
+      <div className="flex-1 overflow-hidden">{children}</div>
       <BottomBar activeTab="3_chat" />
     </NavigateByAuthState>
   );
diff --git a/web/components/chat/RoomWindow.tsx b/web/components/chat/RoomWindow.tsx
index 128e60ed..8748523f 100644
--- a/web/components/chat/RoomWindow.tsx
+++ b/web/components/chat/RoomWindow.tsx
@@ -145,7 +145,7 @@ export function RoomWindow(props: Props) {
   );
 
   return (
-    <div className="flex flex-col">
+    <div className="flex h-full flex-col">
       {room.matchingStatus !== "matched" && (
         <FloatingMessage
           message="この人とはマッチングしていません。"
@@ -157,7 +157,7 @@ export function RoomWindow(props: Props) {
         <RoomHeader room={room} />
       </div>
       {messages && messages.length > 0 ? (
-        <div className="h-full flex-1 overflow-hidden p-2" ref={scrollDiv}>
+        <div className="flex-1 overflow-auto p-2" ref={scrollDiv}>
           {messages.map((m) =>
             m.isPicture ? (
               <img

From 7ee677cb1df5bcac7faf6793b61a8bce2d51c081 Mon Sep 17 00:00:00 2001
From: KaichiManabe <154493010+KaichiManabe@users.noreply.github.com>
Date: Tue, 21 Jan 2025 20:10:50 +0900
Subject: [PATCH 9/9] fix message ui

---
 web/components/chat/RoomWindow.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/web/components/chat/RoomWindow.tsx b/web/components/chat/RoomWindow.tsx
index 8748523f..ecbfa406 100644
--- a/web/components/chat/RoomWindow.tsx
+++ b/web/components/chat/RoomWindow.tsx
@@ -209,13 +209,11 @@ export function RoomWindow(props: Props) {
                   </div>
                 ) : (
                   <div
-                    className={`rounded-xl p-2 shadow ${
+                    className={`flex max-w-[70vw] rounded-xl p-2 shadow ${
                       m.creator === myId ? "bg-secondary" : "bg-white"
                     }`}
                   >
-                    <p className="whitespace-pre-wrap break-words">
-                      {m.content}
-                    </p>
+                    <p className="whitespace-pre-wrap break-all">{m.content}</p>
                     {m.creator === myId && (
                       <Dots
                         actions={[