fix: 스코어보드 UI/UX 개선#559
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the game page by introducing a GamePageClient component and redesigning the banner layout, including moving the time display into the ScoreBoard. Additionally, the CheerTalkList was updated to use window-based scrolling and a ResizeObserver for better layout management. Feedback focused on optimizing data fetching in the ScoreBoard component by passing the startTime prop from the parent Banner to avoid redundant API calls.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request refactors the game detail page by extracting client-side tab logic into a new GamePageClient component, reorganizing the game banner to display the match date and time directly within the score board, and improving the CheerTalkList to dynamically adjust for visual viewport changes (such as the virtual keyboard). Review feedback suggests adding date validation to prevent potential crashes from invalid start times, initializing the visual viewport height state on mount, and using React's declarative onScroll prop instead of manually adding scroll event listeners.
| const _startTime = new Date(startTime); | ||
|
|
||
| const matchDate = _startTime.toLocaleDateString('ko-KR', { | ||
| month: '2-digit', | ||
| day: '2-digit', | ||
| weekday: 'short', | ||
| timeZone: 'Asia/Seoul', | ||
| }); | ||
|
|
||
| const matchTime = _startTime.toLocaleTimeString('ko-KR', { | ||
| hour: '2-digit', | ||
| minute: '2-digit', | ||
| hourCycle: 'h23', | ||
| timeZone: 'Asia/Seoul', | ||
| }); |
There was a problem hiding this comment.
API로부터 전달받은 startTime 값이 유효하지 않거나 비어있을 경우, new Date(startTime)가 Invalid Date를 반환하여 toLocaleDateString 및 toLocaleTimeString 호출 시 RangeError가 발생하고 전체 페이지가 크래시될 수 있습니다. 안전한 렌더링을 위해 날짜 유효성 검사 및 폴백 처리를 추가하는 것을 권장합니다.
const _startTime = new Date(startTime);
const isValidDate = !isNaN(_startTime.getTime());
const matchDate = isValidDate
? _startTime.toLocaleDateString('ko-KR', {
month: '2-digit',
day: '2-digit',
weekday: 'short',
timeZone: 'Asia/Seoul',
})
: '';
const matchTime = isValidDate
? _startTime.toLocaleTimeString('ko-KR', {
hour: '2-digit',
minute: '2-digit',
hourCycle: 'h23',
timeZone: 'Asia/Seoul',
})
: '';
There was a problem hiding this comment.
startTime이 비어있을 수 없음 .. 그래도 fallback 처리를 해야하나
2026-05-28.10.50.46.mov성원님 영상처럼 중첩 스크롤이 되도록 의도하신 거 맞죠?? 이렇게 했을 때 사용자가 전체 페이지를 올리거나 내리려는 경우, 영상처럼 스크롤 가능한 영역이 탭 부분 정도로 아주 축소되었어요. 그래서 정확한 지점에서 스크롤(모바일에서는 터치 + 드래그)하지 않으면 의도한대로 페이지를 오르내릴 수 없고, 심지어 위로 올리려는 경우에는 무한스크롤 패턴으로 인해 사용자 경험에 치명적인 영향을 줄 수 있다는 점이 우려됩니다..! 여러가지 대안이 있을 것 같은데, 여기 페이지에서 개발자 도구를 열고 모바일 디바이스를 적용해보면 더보기 버튼을 누르는 순간 그냥 채팅이 전체 페이지에 쌓이는 것을 볼 수가 있어요. 이런 방식을 적용해봐도 좋을 것 같고, 또 상황에 따라서는 이렇게 스크롤이 점점 길어지는 게 유저 경험을 저하시킨다고 판단할 수도 있을 것 같아요. 이런 경우에는 굳이 무한 스크롤을 사용하기보다 페이지네이션을 사용하는 방법을 선택하는 것도 좋은 대안이라고 생각합니다. 이것들보다 훨씬 더 좋은 방법이 있을 수도 있구요! 그래서 지금 작업해주신 것처럼 채팅을 보여주기에 다소 좁은 영역을, 높이를 고정하여 충분히 확보하는 방향은 저도 좋은 것 같습니다! 다만 그것을 구현할 때 사용자들이 가장 만족할 UI 패턴이 무엇인지를 기획자분과 한 번 이야기해봐도 좋을 것 같아요!! |
|
우선 중첩 스크롤을 의도한 것 맞아요! 기획 의도가 전체 스크롤이 될때 탭위로 스코어보드가 축소되는 형태인데, 아직 디자인적으로 고민이라고 하셔서 우선 탭만 보이게 고정되는 형태로 개발했습니다. 우선은 이렇게라도 반영되기를 원하시더라고요. |
There was a problem hiding this comment.
Time 컴포넌트가 단순히 UI만 처리하고 있고, Time을 어떻게 표현할 건지 등의 로직은 모두 Time을 호출하는 컨테이너에 있네요! 방법 자체가 잘못된 건 아니지만, Time과 관련한 로직과 UI를 한 곳에서 처리하거나, 혹은 관련 유틸리티 함수나 hooks를 이용해서 관심사를 분리하고 코드 가독성을 개선해볼 수 있을 것 같은데, 어떻게 생각하시나요??
There was a problem hiding this comment.
이게 더 깔끔할 것 같아요. 우선 Time을 사용하는게 배너만 있는것 같아서 UI에 로직만 추가했어요. 추가로 생긴하면 말씀해주신 유틸리티 함수나 hooks로 빼도 좋을 것 같아요!
| } | ||
|
|
||
| const ScoreArea = ({ homeTeam, awayTeam, gameState, quarter }: ScoreAreaProps) => { | ||
| const CenterArea = ({ quarter, gameState, matchDate, matchTime }: CenterAreaProps) => { |
There was a problem hiding this comment.
좀 더 의미를 이해하기 쉽도록 StatusArea 정도는 어떨까요??
2 participants
🌍 이슈 번호
✅ 작업 내용
📝 참고 자료
interactive-widgetMDNwindow.visualViewportMDN