인프런 커뮤니티 질문&답변

안녕하세요.

우선 저는 맥북을 사용하고 있습니다.

import { VFC, useCallback, useEffect, useRef } from 'react';
import { Form, MentionsTextarea, SendButton, Toolbox } from './styles';
import React from 'react';
import autosize from 'autosize';

interface Props {
  chat: string;
  onSubmitForm: (e: any) => void;
  onChangeChat: (e: any) => void;
  placeholder?: string;
}

const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => {
  // const onSubmitForm = useCallback(() => {}, []);
  const textareaRef = useRef(null);
  useEffect(() => {
    if (textareaRef.current) {
      autosize(textareaRef.current);
    }
  }, []);
  const onKeydownChat = useCallback(
    (e) => {
      if (e.key === 'Enter') {
        if (!e.shiftKey) {
          e.preventDefault();
          onSubmitForm(e);
        }
      }
    },
    [onSubmitForm],
  );
  return (
    <Form onSubmit={onSubmitForm}>
      <MentionsTextarea
        id="editor-chat"
        value={chat}
        onChange={onChangeChat}
        onKeyDown={onKeydownChat}
        placeholder={placeholder}
        ref={textareaRef}
      />
      <Toolbox>
        <SendButton
          className={
            'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' +
            (chat?.trim() ? '' : ' c-texty_input__button--disabled')
          }
          data-qa="texty_send_button"
          aria-label="Send message"
          data-sk="tooltip_parent"
          type="submit"
          disabled={!chat?.trim()}
        >
          <i className="c-icon c-icon--paperplane-filled" aria-hidden="true"></i>
        </SendButton>
      </Toolbox>
    </Form>
  );
};

export default ChatBox;

이건 제가 작성한 ChatBox입니다.

import React, { useCallback } from 'react';
import { Container, Header } from './styles';
import useSWR, { useSWRInfinite } from 'swr';
import fetcher from '@utils/fetcher';
import { useParams } from 'react-router';
import gravatar from 'gravatar';
import ChatBox from '@components/ChatBox';
import ChatList from '@components/ChatList';
import useInput from '@hooks/useInput';
import axios from 'axios';
import { IDM } from '@typings/db';
const DirectMessage = () => {
  const { workspace, id } = useParams<{ workspace: string; id: string }>();
  const { data: userData } = useSWR(`/api/workspaces/${workspace}/users/${id}`, fetcher);
  const { data: myData } = useSWR('/api/users', fetcher);
  const [chat, onChangeChat, setChat] = useInput('');
  const {
    data: chatData,
    mutate: mutateChat,
    revalidate,
  } = useSWR<IDM[]>(`/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=1`, fetcher);

  const onSubmitForm = useCallback(
    (e) => {
      e.preventDefault();
      if (chat?.trim()) {
        axios
          .post(`/api/workspaces/${workspace}/dms/${id}/chats`, {
            content: chat,
          })
          .then(() => {
            revalidate();
            setChat('');
            console.log('submit');
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    [chat],
  );

  if (!userData || !myData) {
    return null;
  }

  return (
    <Container>
      <Header>
        <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname} />
        <span>{userData.nickname}</span>
      </Header>
      <ChatList chatData={chatData} />
      <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} />
    </Container>
  );
};

export default DirectMessage;

이건 DirectMessage 입니다.

e.preventDefault()로 기본 이벤트를 막아줬는데도 DM을 엔터로 전송하면 (한글로만 전송하면 2개씩 보내져요...!)어떨때는 2개가 보내지고 어떨때는 1개가 보내져요... 네트워크나 콘솔에도 2개씩 뜨고요.. 전송버튼을 눌렀을때는 1개만 보내집니다.