🚀 Start

이제 chatbox를 만들었으니 실제로 메시지가 출력되는 창을 만들어보자.

👍 사용되는 기능들

• chatList : 메시지들이 화면에 출력되는 기능을 담은 컴포넌트
• custom scrollbar : 채팅창 내부에서 동작하는 스크롤바
• dayjs : 메시지 생성 날짜를 원하는 형태로 출력해주는 기능
• image drag & drop : 이미지를 드래그하여 채팅창에 드랍하여 간편하게 업로드해주는 기능
• 날짜별 그룹: 날짜별로 메시지 그룹화시켜 표시

⭐️ client
|
└── 🗂 pages
|	  ├── 🗂 Channel
|     └── 🗂 DirectMessage
|
└── 🗂 components
	 ├── 🗂 ChatList
     └── 🗂 Chat

💻 ChatList

✅ Channel / Direct Message 컴포넌트

  <ChatList ... chatData={chatData} // 입력한 메시지 데이터  ... />

✅ ChatList 컴포넌트

const ChatList: FC<Props> = ({chatData}) => {
  
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  	...
  return (
    <ChatZone>
    	{chatData.map(chat => (
         		// 유저 아이콘, 이름, 메시지를 출력해주는 컴포넌트
                <Chat key={chat.id} data={chat} /> 
              ))}
    </ChatZone>
  );
};

🖱 custom scrollbar

브라우저 자체에서 생성되는 스크롤바가 아닌 채팅창에서 생성되는 스크롤바로, 동작하지 않을 때는 보이지 않게 하는 등의 커스텀이 가능한 스크롤바이다.(참고)

✅ Channel / Direct Message 컴포넌트

  <ChatList
        scrollbarRef={scrollbarRef}
        isReachingEnd={isReachingEnd}
   />

✅ ChatList 컴포넌트

import { positionValues, Scrollbars } from 'react-custom-scrollbars-2';

const ChatList: FC<Props> = ({scrollbarRef, isReachingEnd}) => {


return <Scrollbars autoHide ref={scrollbarRef} onScrollFrame={onScroll}
  			...
       </Scrollbars>
}

⌚️ dayjs

✅ Chat 컴포넌트

👎 2022.02-07T14:57:47.000Z

👍 2:57 PM

const Chat: FC<Props> = memo(({ data }) => {
	...
  return <span>{dayjs(data.createdAt).format('h:mm A')}</span>
      

🏞 image drag & drop

HTML5에서 제공하는 onDragOver, onDrop을 통해서 요소를 드래그하여 떨굴 수 있다.

✅ onDragOver : 요소가 드롭존 위에 있을 때 반응 즉, drop이 왼료될 때까지 계속해서 이벤트가 발생된다.

• 드롭 전까지 계속해서 실행되는 모습
  

✅ onDrop :요소가 드롭존에 놓일 때 반응 즉, drop이 실행되었을 때 실행되는 이벤트이다.

• 드롭이 되면 일반적으로 이미지를 업로드하는 과정을 실행하게 된다.

💡 해당 문서에 접속하면 드롭이벤트로 실행되는 이미지 업로드 과정을 갖는 코드를 가져올 수 있다.
👉 ondrop Event - W3Schools

const onDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    console.log(e);
    setDragOver(true);
  }, []);

const onDrop = useCallback(
    (e: any) => {
      e.preventDefault();
      console.log(e);
      const formData = new FormData();
      // dataTransfer :  드래그 앤 드롭 작업 중에 드래그되는 데이터를 보유하는 데 사용
      if (e.dataTransfer.items) {
        // DataTransferItemList 인터페이스를 사용하여 파일에 액세스
        for (let i = 0; i < e.dataTransfer.items.length; i++) {
          // 떨어뜨린 항목이 파일이 아닌 경우 거부
          if (e.dataTransfer.items[i].kind === 'file') {
            const file = e.dataTransfer.items[i].getAsFile();
            console.log('... file[' + i + '].name = ' + file.name);
            formData.append('image', file);
          }
        }
      } else {
        // DataTransfer 인터페이스를 사용하여 파일에 액세스
        for (let i = 0; i < e.dataTransfer.files.length; i++) {
          console.log(
            '... file[' + i + '].name = ' + e.dataTransfer.files[i].name
          );
          formData.append('image', e.dataTransfer.files[i]);
        }
      }
      axios // 서버에 이미지 업로드 및 저장
        .post(`/api/workspaces/${workspace}/dms/${id}/images`, formData)
        .then(() => {
          setDragOver(false);
          localStorage.setItem( // 메시지 수신 표시를 위한 로컬스토리지 사용
            `${workspace}-${id}`,
            new Date().getTime().toString()
          );
          mutateChat();
        });
    },
    [workspace, id, mutateChat]
  );

return (
  	<Container onDrop={onDrop} onDragOver={onDragOver}>
    	... 	
   	 {dragOver && <DragOver>업로드!</DragOver>}
    </Container>
      )