-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix: 팔로우 모달, 다이렉트 메세지 모달 타이핑 시 스켈레톤 자연스럽게 유지 (#97)
* Refactor: UserCard 글자 색상 수정 및 주석 삭제 * Fix: UserCard 클릭 시 가끔 씹히던 현상 해결 * Feat: 본인 헤더에도 스켈레톤 적용 * Refactor: isClickedUserCard 전역 상태로 관리 * Refactor: 메세지 관련 react-query 커스텀 훅 refetchInterval 설정 및 리팩토링 * Refactor: 코드 정리 및 배포 전 QA 수정사항 반영 - isFetchedAfterMount 옵션 이용하여 처음에만 스켈레톤 길게 적용, 이후 짧게 적용 - 실시간 대화가 가능하도록 refetchInterval 적용 - 채팅방이 켜져있고 message가 refetch되어 변경되는 경우 알림을 읽도록 적용 - 글쓰기 버튼 hover시 배경 생기는 현상 삭제 - isClickedUserCard 전역 스토어로 분리 - 그 외 자식에게 넘겨준 Props들 전역 스토어에서 바로 사용하는 방식으로 변경 * Feat: useIsTyping 커스텀 훅 분리 * Refactor: 기존에 타자치던 도중에 끊기던 스켈레톤을 자연스럽게 변경, 메세지 모달에서 유저 검색 시 Admin 안나오도록 필터 추가 * Feat: 로그아웃 시 MessageReceiver 관련 스토어 전부 날리기
- Loading branch information
1 parent
c79eed8
commit 08ab188
Showing
7 changed files
with
65 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
/* eslint-disable consistent-return */ | ||
import { useEffect, useRef, useState } from 'react'; | ||
|
||
const useIsTyping = () => { | ||
const inputRef = useRef<HTMLInputElement | null>(null); | ||
const [isTyping, setIsTyping] = useState<boolean>(false); | ||
|
||
useEffect(() => { | ||
const element = inputRef.current as HTMLInputElement | null; | ||
if (!element) return; | ||
|
||
let typingTimer: NodeJS.Timeout; | ||
|
||
const handleTyping = () => { | ||
clearTimeout(typingTimer); | ||
setIsTyping(true); | ||
|
||
typingTimer = setTimeout(() => { | ||
setIsTyping(false); | ||
}, 1000); // 타자 입력이 멈추고 1초 후에 setIsTyping(false) 호출 | ||
}; | ||
|
||
element.addEventListener('input', handleTyping); | ||
|
||
// 컴포넌트 언마운트 시 이벤트 핸들러 제거 | ||
return () => { | ||
element.removeEventListener('input', handleTyping); | ||
clearTimeout(typingTimer); | ||
}; | ||
}, []); | ||
|
||
return { inputRef, isTyping, setIsTyping }; | ||
}; | ||
|
||
export default useIsTyping; |