[FIX] 관객 어플리케이션 QA 반영 #87

seongminn · 2024-03-13T16:48:25Z

🌍 이슈 번호

closed [FIX] QA 반영 #85

✅ 작업 내용

응원톡 무한 스크롤 시 스크롤이 밀려 올라가는 버그 해결
응원톡 입력 후 스크롤이 하단으로 내려오지 않는 버그 해결
- 응원톡 입력 시 스크롤 위치를 9999로 고정해버렸습니다.
- 최고의 방법은 아닌 것 같지만 최선의 방법이라 생각해서 적용했습니다.
- ~~9999라는 매직 넘버를 상수로 관리할 필요가 있을지 고민했는데, 이 부분에 대해서 의견 남겨주시면 감사하겠습니다!~~
- scrollintoView 메서드로 스크롤을 조정합니다.
- 응원톡 전송 후, 소켓을 통해 데이터를 받아오는데까지 발생하는 시간이 존재합니다. 하지만 이를 무시한 채 JS는 실행되며, 그래서 새 응원톡이 list에 반영이 되지 않아도 스크롤을 내리는 경우가 발생합니다. 이 경우에 내가 작성한 응원톡 바로 위까지만 스크롤이 내려가고, 사용자의 입장에서는 응원톡이 작성되지 않았다고 판단할 수도 있을 것 같습니다. 이에 따라 useTimeout hook을 이용하여 100ms 이후 스크롤을 내리도록 수정합니다.
욕설 입력 시 피드백 alert 추가
- toast 컴포넌트에서 document API를 사용하고 있어서 build 시 에러가 터집니다.
- 따라서 현재는 alert를 사용한 상태고, 추후 수정하면 좋을 것 같습니다.
실시간 응원톡 클릭 시 응원톡 모달 오픈

📝 참고 자료

작업한 내용에 대한 부연 설명

♾️ 기타

추가로 필요한 작업 내용

netlify · 2024-03-13T16:48:39Z

✅ Deploy Preview for hufscheer ready!

Name	Link
🔨 Latest commit	`e679db1`
🔍 Latest deploy log	https://app.netlify.com/sites/hufscheer/deploys/65f30cc2ec71c40008b5eb4e
😎 Deploy Preview	https://deploy-preview-87--hufscheer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 82 Accessibility: 95 Best Practices: 92 SEO: 92 PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-03-13T16:50:04Z

✅ Deploy Preview for hufscheer-manager ready!

Name	Link
🔨 Latest commit	`e679db1`
🔍 Latest deploy log	https://app.netlify.com/sites/hufscheer-manager/deploys/65f30cc2425bd100083b8507
😎 Deploy Preview	https://deploy-preview-87--hufscheer-manager.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

ohprettyhak

고생하셨습니다. 테스트를 충분히 했다고 생각하는데도 버그가 있네요.. 잠깐 사용해보고 코멘트 남깁니다.

/game/25 페이지에서 톡이 너무 긴 경우 time이 두 줄로 보이는 문제가 있습니다. white-space: nowrap 옵션을 분명 넣었는데 어디로 갔는지 모르겠네요.

ohprettyhak · 2024-03-13T17:26:59Z

apps/spectator/app/game/[id]/_components/CheerTalk/OnAir/index.tsx

    );

-  return <CheerTalkItem {...cheerTalk} />;
+  return <CheerTalkItem {...(cheerTalk.at(-1) as GameCheerTalkWithTeamInfo)} />;


CheerTalkItem의 메뉴 버튼을 누르면 Modal과 MenuModal이 함께 나타나고 있습니다. OnAir 화면에서는 메뉴 아이콘이 보이지 않으면 좋을 거 같습니다.

아이템을 hover하는 경우에도 커서가 default 인데, pointer로 변경하는 것이 어떨까요?

props를 전달하여 false일 때, 그러니까 OnAir 컴포넌트에서 호출하는 경우에 MenuModal을 제거하자는 말씀이시죠? 좋은 것 같습니다! 마우스 커서도 반영하겠습니다ㅎㅎ

ohprettyhak · 2024-03-13T17:28:47Z

apps/spectator/app/game/[id]/_components/CheerTalk/List/index.tsx

+    if (!scrollRef.current) return;
+
+    const scrollTop = scrollRef.current.scrollHeight - scrollHeight;
+    scrollRef.current.scrollTop = scrollTop;


scrollTop 변수를 61번 줄에서만 사용하고 있기 때문에 inline으로 작성해도 괜찮을 거 같습니다.

가로로 너무 길어지는 것 같아 따로 변수에 담아 봤는데, 인라인으로 작성해도 상관없을 것 같습니다! 반영하겠습니다👍 white-space 속성도 반영해두겠습니다ㅎㅎ

요거 혹시 괜찮으시면 로직 설명 한번만 부탁드려도 될까요? 제가 아는 방식은 window.scrollY를 조작하는 방식인데, 이 코드에서는 그런게 보이지 않아 질문드립니다.
scrollTop에 값을 저장하면 해당 값에 해당하는 높이로 스크롤이 이동하는건가요? 그리고 아래 exhaustive-deps 경고를 꺼둔 이유도 알고 싶습니다!

scrollY는 브라우저의 스크롤 높이를 조작하지만, scrollTop은 특정 요소의 스크롤 높이를 조작한다는 것이 차이입니다. 그래서 두 값은 서로 사용하는 경우가 다른 것 같아요!

eslint-disable 라인을 추가한 이유는, useEffect 내에서 scrollHeight라는 외부 상태를 사용하고 있습니다. 만약 scrollHeight를 의존성 배열에 추가하면 다음과 같은 버그가 생깁니다.

처음 컴포넌트가 mount 될 때 한 번 변경

scrollHeight가 변경되었으니 useEffect의 콜백을 실행

useEffect의 콜백에서는 scrollHeight를 변경

다시 useEffect의 콜백 실행

위와 같은 버그가 발생하기 때문에 scrollHeight를 제거하고 eslint 경고를 무시해주었습니다. 그리고 애초에 scroll 높이는 scrollHeight 상태가 변경될 때마다 새롭게 계산해주어야 하는 값은 아니라서 상관없다고 판단했습니다!

HiimKwak

고생하셨습니다! 저도 추가로 코멘트 등록 이후 테스트를 더 진행해봤는데 netlify preview에선 CORS에러 때문에 응원톡이 등록되지 않는게 맞나요? 처음에 욕설을 적지 않았는데 공격적인 단어가 포함돼있다고 alert이 뜨길래 확인해봤더니 CORS에러 때문에 POST 요청이 반려됐다는건 확인했는데, 그럼에도 불구하고 통신 에러와 일치하지 않는 문구의 alert이 뜨는건 개선해야할 사항으로 보입니다!

HiimKwak · 2024-03-14T12:23:54Z

apps/spectator/app/game/[id]/_components/CheerTalk/Form/index.tsx

+        },
+        {
+          onError: () => {
+            alert('공격적인 단어가 포함되어 있습니다.');


요거 문구는 디자인팀에 이슈 올려서 확정지으면 좋을 것 같아요. 제 생각에는 응원톡 달 때 욕설이 필터돼 등록이 막힌 경우니, 공격적인 단어가 포함돼있다는 문구보다 좀 더 저지당하는 느낌이 들도록 문구를 정해야할 것 같아요 like '훕치치는 차별, 비방 등 유해한 언어를 일체 금지하고 있습니다. 순화된 언어로 이용해주세요' 이런 느낌?

이 부분은 일단 빠르게 작업하느라 임시로 작성해뒀습니다. 나중에 정식 QA 기간 때 피드백 받고 수정하면 좋을 것 같아요!

HiimKwak · 2024-03-14T12:27:21Z

apps/spectator/app/game/[id]/_components/CheerTalk/index.tsx

+  const cheerTalks = useMemo(
+    () => (cheerTalkList ? cheerTalkList.pages.flatMap(talk => talk) : []),
+    [cheerTalkList],
+  );


useMemo로 최적화한 것 매우 좋네요!

HiimKwak · 2024-03-14T12:38:08Z

apps/spectator/app/game/[id]/_components/CheerTalk/List/index.tsx

+    if (!scrollRef.current) return;
+
+    const scrollTop = scrollRef.current.scrollHeight - scrollHeight;
+    scrollRef.current.scrollTop = scrollTop;


요거 혹시 괜찮으시면 로직 설명 한번만 부탁드려도 될까요? 제가 아는 방식은 window.scrollY를 조작하는 방식인데, 이 코드에서는 그런게 보이지 않아 질문드립니다.
scrollTop에 값을 저장하면 해당 값에 해당하는 높이로 스크롤이 이동하는건가요? 그리고 아래 exhaustive-deps 경고를 꺼둔 이유도 알고 싶습니다!

HiimKwak · 2024-03-14T12:40:42Z

apps/spectator/app/_components/GameList/index.tsx

+        {groupedGameList.map(gameList => (
+          <Fragment key={gameList.startTime}>
+            <div className={styles.dateRow}>{gameList.startTime}</div>
+            <ul key={gameList.startTime} className={styles.listRoot}>


제가 ul 위치를 변경할 때 key 위치를 바꾼다는걸 깜빡했네요 대신 해주셔서 감사합니다! Fragment에 key값이 생긴만큼 ul에는 key 프로퍼티가 필요하지 않을 것 같아 지워도 되지 않을까 싶습니다!

엇 ul에 있었군요ㅎㅎ 저도 이건 못봤네요. 반영하겠습니다!

HiimKwak · 2024-03-14T12:43:19Z

apps/spectator/app/page.tsx

+      {GAMES.map(game => (
+        <AsyncBoundary
+          key={game.key}
+          errorFallback={() => game.errorFallback()}
+          loadingFallback={game.loadingFallback}
+        >
+          <GameList state={game.key} />
+        </AsyncBoundary>
+      ))}
    </section>
  );
 }
+
+type Games = {
+  key: GameState;
+  errorFallback: () => JSX.Element;
+  loadingFallback: JSX.Element;
+};
+
+const GAMES: Games[] = [
+  {
+    key: 'playing',
+    errorFallback: GameList.PlayingErrorFallback,
+    loadingFallback: <Loader />,
+  },
+  {
+    key: 'scheduled',
+    errorFallback: GameList.ScheduledErrorFallback,
+    loadingFallback: <Loader />,
+  },
+  {
+    key: 'finished',
+    errorFallback: GameList.FinishedErrorFallback,
+    loadingFallback: <Loader />,
+  },
+];


추상화해 유지보수하기 쉽게 바꾼 점 매우 좋습니다!👍

seongminn · 2024-03-14T13:12:11Z

에러 문구를 출력하는 조건은 말씀하신 것처럼 욕설로 인해 전송에 실패했다는 조건이 있어야 해요. 하지만 현재는 문자열로 해당 정보를 내려주고 있는데, 길이가 조금 있는 문자열이라서 비교 성능이 떨어진다고 판단하여 일단은 에러 발생으로 트리거 되도록 해두었습니다. 이건 백엔드 팀원들에게 지금 이야기해서 반영하겠습니다!

HiimKwak · 2024-03-14T13:17:29Z

이 QA PR이 반영되지 않은 main 최신 코드를 테스트하는건 의미가 없겠죠? 로컬에서 테스트해봤을 땐 앱 최초 사용 시 실시간 응원톡이 기존 응원톡 데이터가 있음에도 불구하고 모두 디폴트 값이 렌더링된다는 점, 응원톡 등록은 성공하는데 새 응원톡이 안보이다가 특정 시간 이후 한꺼번에 업데이트되고 그 이후로는 정상 동작하는 버그(발동 조건을 모르겠습니다) 등을 발견헀는데, netlify preview에서는 발견되지 않는 버그들이네요..?

seongminn · 2024-03-14T13:24:41Z

실시간 응원톡에 기본 컴포넌트가 노출되는 문제는 해당 PR에서 수정했습니다.
응원톡 등록에 성공했음에도 반영되지 않는 버그는 아마 스크롤 문제일 듯 한데, 응원톡을 등록하고 스크롤을 한 번 내려보시면 추가된 걸 확인할 수 있을겁니다. 이 문제와 관련한 자세한 내용은 본문의 응원톡 입력 후 스크롤이 하단으로 내려오지 않는 버그 해결에 작성해두었습니다!
스크롤을 내려도 등록에 성공한 응원톡이 보이지 않는 경우 -> 응원톡은 소켓으로 관리하기 때문에 가끔 데이터가 누락되는 경우가 발생할 수도 있다고 합니다. 이 부분에 대해서 현재로서는 어쩔 수 없이 http 통신으로 재호출하는 방법 밖에는 없을 것 같습니다.

HiimKwak · 2024-03-14T13:29:27Z

소켓의 문제일 수 있겠군요... 제가 하단 스크롤을 할 수 있었는데 그 부분을 놓쳐서 착각한건진 모르겠지만 그 버그가 발생했을 때 모달을 껐다 키고 다른 경기의 응원톡 모달을 켰을 때도 동일한 새 응원톡 씹힘 버그를 목격했던 것 같은데, 3번의 문제라면 소켓 데이터가 씹혔는지 여부를 확인해야 재호출을 할지말지 결정할탠데 그걸 아는것도 쉽지 않겠네요. 우선은 엣지케이스인만큼 이슈가 있다 인지하고 넘어가도록 합시다! 고생하셨습니다🙇‍♂️

seongminn added 7 commits March 14, 2024 00:12

fix: 실시간 응원톡 클릭 시 open modal

fce3d85

feat: 욕설에 대한 alert 피드백

019b019

fix: 응원톡 입력 시 스크롤 버그 해결

477331e

chore: Loader 컴포넌트 내 문구 제거

4444ba6

fix: 무한 스크롤 후 스크롤 유지

f8394c2

fix: 응원톡 입력 시 스크롤 최하단으로 고정

82481e9

refactor: useTimeout hooks로 scroll 타이밍 조정

6f159db

seongminn added the fix Bug fixes label Mar 13, 2024

seongminn requested review from HiimKwak and ohprettyhak March 13, 2024 16:48

seongminn self-assigned this Mar 13, 2024

fix: 사용하지 않는 파일 제거

9757299

ohprettyhak reviewed Mar 13, 2024

View reviewed changes

seongminn added 8 commits March 14, 2024 17:58

style: GameList 간격 스타일 수정

e675057

fix: list key 추가

6912dbe

fix: cheerTalk timestamp wrapping 제거

e7afbd3

chore: 빈 div 태그 제거

e0b53db

style: onAir cheerTalk 스타일 수정

37526ea

refactor: game config로 리스트 관리

fecfd13

fix: 불필요한 useEffect 의존성 제거

8d1faae

refactor: getGameInfo hook 생성

c71c555

HiimKwak approved these changes Mar 14, 2024

View reviewed changes

seongminn added 2 commits March 14, 2024 22:37

chore: 불필요한 컴포넌트 key 제거

890627e

refactor: status에 맞게 에러 문구 출력

e679db1

seongminn merged commit 0915f0a into main Mar 14, 2024

seongminn deleted the fix/qa-cheertalk branch March 14, 2024 14:49

[FIX] 관객 어플리케이션 QA 반영 #87

[FIX] 관객 어플리케이션 QA 반영 #87

Uh oh!

Conversation

seongminn commented Mar 13, 2024

🌍 이슈 번호

✅ 작업 내용

📝 참고 자료

♾️ 기타

Uh oh!

netlify bot commented Mar 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hufscheer ready!

Uh oh!

netlify bot commented Mar 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for hufscheer-manager ready!

Uh oh!

ohprettyhak left a comment

Choose a reason for hiding this comment

Uh oh!

ohprettyhak Mar 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HiimKwak left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

seongminn commented Mar 14, 2024

Uh oh!

HiimKwak commented Mar 14, 2024

Uh oh!

seongminn commented Mar 14, 2024

Uh oh!

HiimKwak commented Mar 14, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Mar 13, 2024 •

edited

Loading

netlify bot commented Mar 13, 2024 •

edited

Loading

ohprettyhak Mar 13, 2024 •

edited

Loading

HiimKwak left a comment •

edited

Loading