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:43:39 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
58c087ba9475f77ab78807be46b86d25df28de70
58c087ba
1 parent
76f9a06d
채팅 오토스크롤링 추가
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
9 additions
and
1 deletions
web/src/components/room/Chat.tsx
web/src/components/room/Chat.tsx
View file @
58c087b
import React, { useCallback, useContext, useEffect, useState } from 'react';
import React, { useCallback, useContext, useEffect, use
Ref, use
State } from 'react';
import SocketContext from '../../contexts/SocketContext';
import { MessageType, RawMessage } from '../common/types';
import { ChatLine } from './ChatLine';
...
...
@@ -8,6 +8,7 @@ export const Chat: React.FC = () => {
const socket = useContext(SocketContext);
const [ input, setInput ] = useState('');
const [ chatLines, setChatLines ] = useState<ChatData[]>([]);
const messageEndRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
socket.on(MessageType.ROOM_CHAT, (data: ChatData) => {
...
...
@@ -19,6 +20,12 @@ export const Chat: React.FC = () => {
}
}, []);
const handleAutoScroll = useCallback(() => {
messageEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, []);
useEffect(handleAutoScroll, [chatLines])
const handleEnter = useCallback((e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
setChatLines([...chatLines, { sender: 'me', message: input }]);
...
...
@@ -37,6 +44,7 @@ export const Chat: React.FC = () => {
<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 ref={messageEndRef} />
</div>
<input className='w-full px-3 py-2 bg-white
placeholder-gray-400 text-gray-700 text-sm
...
...
Please
register
or
login
to post a comment