Toggle navigation
Toggle navigation
This project
Loading...
Sign in
강동현
/
nodejs-game
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
Overnap
2021-06-07 05:31:07 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
ad013a592b64ab1f2e204e4b40c228d0ba18502d
ad013a59
1 parent
1a94852a
Chat 컴포넌트에 input 핸들링 추가 및 ChatLine 컴포넌트 적용
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
25 additions
and
5 deletions
web/src/components/room/Chat.tsx
web/src/components/room/Chat.tsx
View file @
ad013a5
import React, { useContext, useEffect, useState } from 'react';
import React, { useC
allback, useC
ontext, useEffect, useState } from 'react';
import SocketContext from '../../contexts/SocketContext';
import { MessageType, RawMessage } from '../common/types';
import { ChatLine } from './ChatLine';
import { ChatData } from './types';
export const Chat: React.FC = () => {
...
...
@@ -18,13 +19,32 @@ export const Chat: React.FC = () => {
}
}, []);
const handleEnter = useCallback((e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
setChatLines([...chatLines, { sender: 'me', message: input }]);
const rawMessage: RawMessage = {
type: MessageType.ROOM_CHAT,
message: { message: input }
}
socket.emit('msg', rawMessage, () => {});
setInput('');
}
}, [input]);
return (
<div className='w-2/12 h-60 rounded shadow'>
{chatLines.map((line) => (<div/>))}
<input className='w-5/6 px-3 py-2 bg-white
<div className='w-5/12'>
<div className='w-full h-80 rounded shadow flex flex-col items-center end'>
{chatLines.map((line, i) => (<ChatLine key={16383+i} chatData={line}/>))}
</div>
<input className='w-full px-3 py-2 bg-white
placeholder-gray-400 text-gray-700 text-sm
rounded shadow outline-none focus:outline-none'
onChange={e => setInput(e.target.value)}></input>
placeholder='Enter the answer'
onChange={e => setInput(e.target.value)}
value={input}
onKeyPress={handleEnter}></input>
</div>
);
}
\ No newline at end of file
...
...
Please
register
or
login
to post a comment