Overnap

Chat 컴포넌트를 프롭으로 크기 변경할 수 있도록 수정

...@@ -4,7 +4,12 @@ import { MessageType, RawMessage } from '../common/types'; ...@@ -4,7 +4,12 @@ import { MessageType, RawMessage } from '../common/types';
4 import { ChatLine } from './ChatLine'; 4 import { ChatLine } from './ChatLine';
5 import { ChatData } from './types'; 5 import { ChatData } from './types';
6 6
7 -export const Chat: React.FC = () => { 7 +interface ChatProps {
8 + w: string;
9 + h: string;
10 +}
11 +
12 +export const Chat: React.FC<ChatProps> = (props) => {
8 const socket = useContext(SocketContext); 13 const socket = useContext(SocketContext);
9 const [ input, setInput ] = useState(''); 14 const [ input, setInput ] = useState('');
10 const [ chatLines, setChatLines ] = useState<ChatData[]>([]); 15 const [ chatLines, setChatLines ] = useState<ChatData[]>([]);
...@@ -45,8 +50,8 @@ export const Chat: React.FC = () => { ...@@ -45,8 +50,8 @@ export const Chat: React.FC = () => {
45 }, [input]); 50 }, [input]);
46 51
47 return ( 52 return (
48 - <div className='w-4/12'> 53 + <div className={props.w}>
49 - <div className='w-full h-80 rounded shadow flex flex-col overflow-y-scroll'> 54 + <div className={`${props.h} w-full rounded shadow flex flex-col overflow-y-scroll`}>
50 {chatLines.map((line, i) => (<ChatLine key={16383+i} chatData={line}/>))} 55 {chatLines.map((line, i) => (<ChatLine key={16383+i} chatData={line}/>))}
51 <div ref={messageEndRef} /> 56 <div ref={messageEndRef} />
52 </div> 57 </div>
......