comb19 · keito0tada · May 21, 2025 · May 20, 2025 · May 20, 2025 · May 20, 2025
diff --git a/src/app/channels/[guildID]/[channelID]/page.tsx b/src/app/channels/[guildID]/[channelID]/page.tsx
@@ -4,7 +4,7 @@ import MessageItem from '@/components/message';
 import GetAChannel from '@/lib/get_a_channel';
 import GetMessages from '@/lib/get_messages';
 import { useAuth } from '@clerk/nextjs';
-import { FormEventHandler, use, useEffect, useRef, useState } from 'react';
+import { use, useEffect, useRef, useState } from 'react';
 
 export default function Page({
   params,
@@ -18,19 +18,26 @@ export default function Page({
     undefined,
   );
   const [messages, setMessages] = useState<Message[]>([]);
+  const [message, setMessage] = useState<string>('');
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
-    console.log('handleSubmit');
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    console.log(socketRef.current);
+  const handleEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.code == 'Enter' && (e.ctrlKey || e.metaKey)) {
+      handleSend();
+    }
+  };
+
+  const handleSend = () => {
+    if (message.length == 0) {
+      return;
+    }
     socketRef.current?.send(
       JSON.stringify({
         action: 'send',
         channel_id: channelID,
-        content: formData.get('message'),
+        content: message,
       }),
     );
+    setMessage('');
   };
 
   useEffect(() => {
@@ -117,23 +124,26 @@ export default function Page({
   }, [channelID, getToken]);
 
   return (
-    <div className="flex-grow flex flex-col">
+    <div className="flex-grow" >>
       <div className="w-full border-b border-b-border h-18 p-1">
         <h1 className="text-3xl"># {channel?.name}</h1>
         <p>{channel?.description}</p>
       </div>
-      <div className="flex-1 flex flex-col h-full pb-4 px-1">
-        <ul className="flex-1 h-full">
+      <div className="pb-4 px-1">
+        <ul className="h-[calc(100vh-var(--spacing)*38)] overflow-y-scroll">
           {messages.map((message: Message) => MessageItem(message))}
         </ul>
-        <form  className="flex w-full h-8 bottom-0">
+        <div className="flex w-full h-10 py-1">
           <textarea
-            name="message"
             placeholder="Type your message here"
+            value={message}
+             => setMessage(e.target.value)}
             className="flex-grow border border-border resize-none mr-1 px-1"
           ></textarea>
-          <input type="submit" value=">" className="w-8 bg-accent" />
-        </form>
+          <button  className="w-8 bg-accent">
+            {'>'}
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/src/app/channels/layout.tsx b/src/app/channels/layout.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { CreateNewGuildInvitation } from '@/components/guild_invitation';
-import GuilList from '@/components/guild_list';
+import GuildList from '@/components/guild_list';
 import {
   SignedIn,
   SignedOut,
@@ -19,7 +19,7 @@ export default function Layout({
   const params = useParams();
   const [isOpen, setIsOpen] = useState<boolean>(false);
   return (
-    <div className=" h-screen flex flex-col overflow-y-hidden">
+    <div className="overflow-y-hidden h-screen flex flex-col">
       <header className="flex justify-end items-center p-4 gap-4 h-10 border-b-2 border-b-border">
         {typeof params.guildID == 'string' && (
           <button  => setIsOpen(true)}>招待</button>
@@ -33,7 +33,7 @@ export default function Layout({
         </SignedIn>
       </header>
       <div className="flex-1 flex divide-x-1 divide-border w-screen h-full">
-        <GuilList />
+        <GuildList />
         {children}
       </div>
       {typeof params.guildID == 'string' && isOpen && (

diff --git a/src/components/guild_list.tsx b/src/components/guild_list.tsx
@@ -6,7 +6,7 @@ import GetGuilds from '@/lib/get_guilds';
 import { AddGuildBox, GuildBox } from './guild_box';
 import { redirect, useParams } from 'next/navigation';
 
-export default function GuilList() {
+export default function GuildList() {
   const { getToken } = useAuth();
   const [guilds, setGuilds] = useState<ResponseGuild[] | undefined>(undefined);
   const params = useParams();