[Feat] 채팅 줄바꿈 및 전체보기 기능 구현 #257
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Report✨ E2E Test가 성공적으로 완료되었습니다. Test 요약 내용을 확인해주세요.
📊 Test Summary
📜 Test Details✅ Passed Tests (3)
|
🎨 Storybook Report✅ 변경 사항이 없습니다 모든 Story가 이전 빌드와 동일합니다.
|
📊 Coverage Report
📉 #257을 main에 병합하면 coverage가 Coverage 요약@@ Coverage Diff @@
## main #257 +/- ##
===========================================
- Coverage 37.76% 37.71% -0.05%
===========================================
Files 186 189 +3
Lines 7986 8087 +101
Branches 361 361 0
===========================================
+ Hits 3016 3050 +34
+ Misses 4970 5037 +67 영향받은 파일
|
🚀 PR Preview Report✨ Build가 성공적으로 완료되었습니다. Preview에서 변경사항을 확인하세요.
|
| const router = useRouter(); | ||
| return ( | ||
| <div className='bg-mono-white flex w-full items-center justify-between border-b border-gray-200 px-5 py-3'> | ||
| <div className='bg-mono-white sticky flex w-full items-center justify-between border-b border-gray-200 px-5 py-3'> |
There was a problem hiding this comment.
이거 top이랑 z-index 지정 안해줘도 잘 고정되나요??
저는 그 두 개 무조건 해야 하는 줄 알았어요.
There was a problem hiding this comment.
헛 제가 이것저것 테스트해보다가 못지웠네요.. 수정하겠습니다!🤓
| useLayoutEffect(() => { | ||
| if (!textRef.current) return; | ||
|
|
||
| const el = textRef.current; | ||
|
|
||
| const originalDisplay = el.style.display; | ||
| const originalClamp = el.style.webkitLineClamp; | ||
| const originalOverflow = el.style.overflow; | ||
|
|
||
| el.style.display = 'block'; | ||
| el.style.webkitLineClamp = 'unset'; | ||
| el.style.overflow = 'visible'; | ||
|
|
||
| const lineHeight = parseFloat(getComputedStyle(el).lineHeight); | ||
| const fullHeight = el.scrollHeight; | ||
|
|
||
| setIsLongText(fullHeight > lineHeight * maxLines); | ||
|
|
||
| el.style.display = originalDisplay; | ||
| el.style.webkitLineClamp = originalClamp; | ||
| el.style.overflow = originalOverflow; | ||
| }, [text, maxLines]); | ||
|
|
||
| return { textRef, isLongText }; | ||
| }; |
There was a problem hiding this comment.
측정을 위해 DOM style을 직접 건드는 방식은 깜빡임과 같은 형상이 있진 않나요?
없다면 괘찮지만 클론을 만들어서 오프스크린에서 측정하는 방식도 있어요.
useLayoutEffect가 paint 전에 실행되기는 하지만 렌더 타이밍이나 컨테이너 width 확정 타이밍 같은 요소 때문에 부작용이 있지 않을까 싶고 실제 엘리먼트 스타일을 바꿨다 복구하면서 측정하는게 위험해 보여서 말씀드려요!
const el = textRef.current;
if (!el) return;
...
const style = getComputedStyle(el);
...
const clone = el.cloneNode(true) as HTMLSpanElement;
clone.style.position = 'absolute';
clone.style.visibility = 'hidden';
clone.style.pointerEvents = 'none';
clone.style.height = 'auto';
...There was a problem hiding this comment.
좋은 지적 감사합니다!
말씀하신대로 DOM을 직접 조작하는건 위험한 것 같아요
오프스크린 적용해서 수정하도록 하겠습니다!!😀
📝 변경 사항
채팅이 20줄 이상 넘어갈 시, 전체 보기 버튼을 이용해 전체 채팅을 모달로 확인할 수 있습니다. (스크린샷 1)
input을 textarea로 수정해 줄바꿈을 허용하도록 했습니다.
추가로, 기존 로직에서 스크롤이 맨 아래에 고정되지 않고 살짝 위에 올라와 가장 최근의 채팅이 잘리는 현상을 수정했습니다.
모바일 환경에서 줄바꿈이 적용되지 않아 추가 예정입니다.
🔗 관련 이슈
Closes #
🧪 테스트 방법
📸 스크린샷 (선택)
📋 체크리스트
💬 추가 코멘트
CodeRabbit Review는 자동으로 실행되지 않습니다.
Review를 실행하려면 comment에 아래와 같이 작성해주세요