[jaqwe2301]

📄 PR 내용 요약

• 팀룸 초대링크 카카오톡 공유하기 - 모바일 환경 링크 추가
• 모바일 환경에서 협업툴 투표 시 호버 색상이 남는 현상 해결
• 사다리 게임 - 레아아웃 높이 측정 방법 변경
• 사다리 게임 - 캐릭터 이동 경로 구하는 로직 바깥으로 분리 및 문서화
• 사다리 게임 - 캐릭터 이동 전에 모달이 뜨는 현상 임시 조치
• 서비스 바깥 배경색 변경 (재형님 요청)

✅ 작업 내용 상세

팀룸 초대링크 카카오톡 공유하기 - 모바일 환경 링크 추가

• 모바일 환경의 카카오톡 공유 시 일반 웹과 모바일 웹에 쓰일 링크를 각각 따로 담아 한 번의 요청을 보내야 해서 관련 코드 추가하였습니다.

모바일 환경에서 협업툴 투표 시 호버 색상이 남는 현상 해결

• 모바일 환경에서 협업툴 투표 후 취소할 때, 호버 색상이 남아 투표 취소가 되지 않아 보이는 문제가 있었습니다.
• 일반 웹 환경과 모바일 환경에서 클릭 동작의 차이가 있어서 생기는 문제로, 참고 사항에 남긴 링크 참고하시면 좋을 듯 합니다!

사다리 게임 - 레이아웃 높이 측정 방법 변경

• 이전에는 사다리 레이아웃 높이를 브라우저 높이의 비율에 따라 적용하도록 해두었습니다. 하지만, 모든 기기를 만족하는 높이로 설정되지 않았던 문제가 있었습니다.
• 그래서 CSS를 통해 사다리 레이아웃 외의 요소들이 자신의 영역을 차지한 후, 남은 영역을 사다리 레이아웃이 차지하도록 수정하였습니다.
• 그리고 사다리 레이아웃 높이를 useRef로 가져와 사다리 가로줄 간의 간격과 캐릭터 이동 거리를 일정하고 올바르게 측정하여 전체적으로 안정성을 더하였습니다.

사다리 게임 - 캐릭터 이동경로를 구하는 로직 바깥으로 분리 및 문서화

• 사다리 게임에서 캐릭터 이동경로를 구하는 getPath 함수를 바깥으로 분리하였고, 어떤 흐름으로 작동하는지 문서화 하였습니다.
• 문서는 조금 더 이해하기 쉽도록 수정할 예정이며, 다른 로직들도 문서화 하고 사다리 게임이 전체적으로 어떻게 흘러가는지 문서화할 예정입니다.

사다리 게임 - 캐릭터 이동 전에 모달이 뜨는 현상 임시 조치

• 사다리 게임에서 캐릭터가 모두 이동하기 전에 팀장 선정 모달이 뜨는 현상이 있었으며, 이동 로직에 추가적인 시간을 더하는 방식을 통해 임시 조치를 해두었습니다.
• 아직 정확한 원인 파익이 되지 않아 다른 기능 디벨롭 하면서 원인 파악을 해보겠습니다 ,, ,, ,,,

💬 참고 사항

• 모바일 환경에서 호버가 남는 문제 레퍼런스

📝 체크리스트

• 기능이 정상 동작하는지 확인
• 로컬 빌드/테스트 통과
• 불필요한 코드/주석 제거

[gemini-code-assist]

Summary of Changes

Hello @jaqwe2301, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 협업툴 및 사다리 게임 기능의 사용자 경험을 개선하고, 전반적인 서비스 안정성을 높이는 데 중점을 둡니다. 모바일 환경에서의 카카오톡 공유 기능과 협업툴 투표 시 발생하는 UI 문제를 해결하여 사용성을 향상시켰습니다. 또한, 사다리 게임의 레이아웃 측정 방식을 개선하고 핵심 로직을 분리 및 문서화하여 코드의 유지보수성을 높였으며, 게임 진행 중 발생하는 모달 표시 오류에 대한 임시 조치도 포함합니다. 마지막으로, 서비스의 시각적 통일성을 위해 배경색을 조정했습니다.

Highlights

• 팀룸 초대링크 카카오톡 공유 개선: 모바일 환경에서 카카오톡 공유 시 웹과 모바일 웹 링크를 각각 설정하도록 수정되었습니다.
• 모바일 협업툴 투표 호버 문제 해결: 모바일 환경에서 협업툴 투표 시 호버 색상이 남아 투표 취소가 안 되는 현상이 수정되었습니다.
• 사다리 게임 레이아웃 높이 측정 변경: 사다리 레이아웃 높이를 브라우저 비율 대신 CSS를 통해 남은 영역을 차지하도록 변경하고, useRef를 사용하여 간격 및 이동 거리를 안정적으로 측정합니다.
• 사다리 게임 경로 로직 분리 및 문서화: 사다리 게임 캐릭터 이동 경로를 계산하는 getPath 함수가 외부로 분리되고, 동작 원리에 대한 문서가 추가되었습니다.
• 사다리 게임 모달 표시 문제 임시 조치: 캐릭터 이동 완료 전에 팀장 선정 모달이 뜨는 현상을 이동 로직에 추가 시간을 더하여 임시적으로 해결했습니다.
• 서비스 배경색 변경: 서비스 전체 배경색이 변경되었습니다.

Changelog

• src/entities/teamroom/setup/tool/model/tool-contents.ts
  • 사용되지 않는 타입 정의가 제거되었습니다.
• src/features/leader-game/ladder-game/model/get-path.md
  • 사다리 게임의 getPath 함수 동작 원리에 대한 상세 문서가 추가되었습니다.
• src/features/leader-game/ladder-game/model/get-path.ts
  • 사다리 게임 캐릭터의 이동 경로를 계산하는 getPath 함수가 추가되었습니다.
• src/features/leader-game/ladder-game/model/useLadderGame.ts
  • 사다리 게임의 레이아웃, 캐릭터 이동 애니메이션, 모달 타이밍 등 핵심 로직을 캡슐화하는 useLadderGame 커스텀 훅이 추가되었습니다.
• src/features/leader-game/ladder-game/ui/LadderBoard.tsx
  • LadderBoard 컴포넌트가 useLadderGame 훅을 사용하여 리팩토링되었으며, 중복 로직이 제거되고 레이아웃 계산 방식이 업데이트되었습니다.
• src/features/leader-game/ladder-game/ui/LadderGame.tsx
  • LadderGame 컴포넌트의 높이가 h-screen으로 설정되고 overflow-x-hidden 속성이 제거되었습니다.
• src/features/leader-game/ladder-game/ui/ResultButton.tsx
  • ResultButton 컴포넌트의 최소 너비와 높이가 조정되었습니다.
• src/shared/hooks/useViewportHeightPx.ts
  • 뷰포트 높이를 측정하던 useViewportHeightPx 훅이 제거되었습니다.
• src/shared/styles/globals.css
  • 전역 CSS에 body 태그의 배경색이 #131415로 추가되었습니다.
• src/vite-env.d.ts
  • 카카오톡 공유 링크 타입 정의에 mobileWebUrl 속성이 추가되었습니다.
• src/widgets/teamroom/main/ui/AddMemberBottomSheet.tsx
  • 팀룸 초대링크 카카오톡 공유 시 mobileWebUrl이 inviteUrl로 설정되도록 업데이트되었습니다.
• src/widgets/teamroom/main/ui/GameStartButton.tsx
  • GameStartButton 컴포넌트의 최소 너비와 높이가 조정되었습니다.
• src/widgets/teamroom/setup/tool/ui/vote-tool/index.tsx
  • ToolItems 컴포넌트의 import 경로가 절대 경로로 변경되었고, 필터링 변수 이름이 x에서 t로 변경되었습니다.
• src/widgets/teamroom/setup/tool/ui/vote-tool/ui/ToolItems.tsx
  • 모바일 환경에서 호버 효과를 제어하기 위한 blockMobileHover 유틸리티 클래스가 적용되었습니다.
• tailwind.config.ts
  • Tailwind CSS 설정에 blockMobileHover라는 새 스크린 유틸리티가 추가되었습니다.

Activity

• 이 PR에는 현재까지 특별한 리뷰 활동이나 코멘트가 기록되지 않았습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

전반적으로 사다리 게임 로직을 useLadderGame 커스텀 훅으로 분리하여 LadderBoard 컴포넌트의 복잡도를 낮춘 점이 인상적입니다. 또한, getPath 함수를 별도 파일로 분리하고 get-path.md 문서를 추가하여 코드의 이해와 재사용성을 높인 점도 좋습니다. QA 및 요구사항을 꼼꼼하게 반영하신 점이 돋보입니다. 몇 가지 개선 가능한 부분에 대해 리뷰 남겼으니 확인 부탁드립니다.

[junye0l]

고생하셨습니다 민혁님 🔥

개선사항 및 참고링크 잘 읽었습니다 !

코멘트 확인 후 답변 남겨주세요 🙇🏻