Repository navigation
[#x] 협업툴 제안 구현 / 온보딩 관련 리다이렉트 문제 - #114
Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! 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은 협업툴 제안 및 승인/반려 기능을 도입하여 팀룸 내 협업 도구 관리를 강화하고, 사용자 온보딩 과정에서 발생하던 리다이렉트 문제를 해결하여 사용자 경험을 개선합니다. 또한, 알림 시스템을 백엔드 API와 완전히 연동하고 백그라운드 알림을 지원하며, Google Tag Manager를 통합하여 데이터 분석 기능을 추가합니다. 전반적으로 애플리케이션의 기능성과 안정성을 향상시키는 변경사항입니다. Highlights
Changelog
Ignored Files
Activity
Using Gemini Code AssistThe 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
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 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
|
There was a problem hiding this comment.
Pull request overview
팀룸 내 협업툴 제안 플로우(요청/승인·반려) 및 알림 API 연동(포그라운드/백그라운드 수신 + 뱃지/토스트) 을 추가하고, 온보딩/로그인 리다이렉트 이슈를 보완하며, GTM 주입을 도입한 변경입니다. 기존 setup 경로로 흩어져 있던 tool/rule 관련 위젯들의 위치/의존성을 teamroom 하위로 정리하는 작업도 포함됩니다.
Changes:
- 협업툴 제안 페이지/승인·반려 페이지 추가 및 대시보드에서 “요청하기” 진입 제공
- 알림 API 연결(목록/읽음 처리) + FCM 포그라운드/백그라운드 수신 처리 및 UI 연결
- 온보딩/로그인 리다이렉트 로직 보완 + GTM 설치 스크립트 주입
Reviewed changes
Copilot reviewed 48 out of 53 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/widgets/teamroom/tool/ui/vote-waiting/ui/VoteCountList.tsx | 득표 현황 리스트 UI 추가 |
| src/widgets/teamroom/tool/ui/vote-waiting/model/mapVoteCountToUi.ts | vote count DTO import 경로 변경 |
| src/widgets/teamroom/tool/ui/vote-waiting/index.tsx | 카테고리별 득표 현황 조회/탭 구성 업데이트 |
| src/widgets/teamroom/tool/ui/vote-tool/ui/ToolItems.tsx | 비활성(확정 툴) 처리 지원 |
| src/widgets/teamroom/tool/ui/vote-tool/index.tsx | 협업툴 투표 제출 훅 경로/시그니처 변경 반영 |
| src/widgets/teamroom/tool/proposal/index.tsx | 협업툴 “요청하기(제안)” 페이지 신규 |
| src/widgets/teamroom/tool/index.tsx | tool setup 진입점 훅 경로/파라미터 타입 변경 반영 |
| src/widgets/teamroom/rule/ui/voting-rule/index.tsx | rule hooks/컴포넌트 경로 정리 |
| src/widgets/teamroom/rule/ui/voting-rule/VotingRule.tsx | 규칙 투표 카드 UI 신규 |
| src/widgets/teamroom/rule/ui/voting-rule/RuleVotingNotice.tsx | 규칙 투표 시작 안내 화면 신규 |
| src/widgets/teamroom/rule/ui/vote-waitng/index.tsx | rule vote 참여자 DTO 필드명 변경 반영 |
| src/widgets/teamroom/rule/index.tsx | rule hooks 경로 변경 |
| src/widgets/teamroom/main/ui/TeamRoomBanner.tsx | 팀룸 상단에 알림 아이콘 연결 + alt 보완 |
| src/widgets/teamroom/main/ui/ContentsHeader.tsx | 우측 버튼(편집/요청하기) 지원하도록 props 재구성 |
| src/widgets/teamroom/main/dashboard/ui/Dashboard.tsx | tool/rule 훅 경로 변경 + ToolContents에 제안 진입 전달 |
| src/widgets/teamroom/main/dashboard/rule/RuleContents.tsx | ContentsHeader props 변경 반영 |
| src/widgets/teamroom/main/dashboard/Tool/ToolContents.tsx | “요청하기” 버튼으로 제안 페이지 라우팅 추가 |
| src/widgets/notification/ui/NotificationList.tsx | 알림 더미 제거, API 기반 목록/읽음 처리 연결 |
| src/widgets/notification/ui/NotificationItem.tsx | 알림 DTO 필드명/disabled 처리 반영 |
| src/widgets/mypage/index.tsx | 알림 설정 메뉴 임시 비활성 주석 처리 |
| src/widgets/home/HomeHeader.tsx | 홈 헤더에 알림 아이콘 연결 |
| src/vite-env.d.ts | window.dataLayer 타입 추가 |
| src/shared/ui/toast/toast-store.ts | toast 클릭 콜백(onClick) 지원 |
| src/shared/ui/toast/Toast.tsx | toast 클릭 시 onClick 실행 + 제거 |
| src/shared/ui/header/NotificationIcon.tsx | 알림 뱃지 아이콘 신규(카운트 store 연동) |
| src/shared/ui/button/BottomButton.tsx | 버튼 높이 스타일 조정(min-height) |
| src/shared/lib/gtm-install.ts | GTM 스크립트 설치 유틸 신규 |
| src/shared/api/auth/use-auth-bootstrap.ts | 온보딩 페이지 redirectAfterLogin 저장 제외 |
| src/shared/api/auth/refresh-token.ts | accessToken decode 후 온보딩 상태 이벤트 처리 |
| src/pages/teamroom/[id]/tool/proposal/index.tsx | proposal 페이지 라우트 엔트리 추가 |
| src/pages/teamroom/[id]/tool/proposal/[proposal-id]/index.tsx | proposal 승인/반려 페이지 라우트 엔트리 추가 |
| src/pages/teamroom/[id]/tool/index.tsx | ToolSetupPage export 경로 변경 |
| src/pages/teamroom/[id]/rule/index.tsx | RuleSetupPage export 경로 변경 |
| src/pages/home/index.tsx | /home redirectAfterLogin 예외 처리 |
| src/main.tsx | 앱 시작 시 GTM 설치 호출 |
| src/entities/tool/hooks/useTool.ts | tool 관련 훅들 경로/시그니처 정리 + proposal detail 훅 추가 |
| src/entities/tool/api/tool-keys.ts | tool queryKey를 number 기반으로 정리 + proposalDetail 추가 |
| src/entities/tool/api/tool-dto.ts | tool proposal 관련 DTO 추가 |
| src/entities/tool/api/tool-api.ts | tool proposal API(요청/상세/승인·반려) 추가 |
| src/entities/rule/hooks/useRule.ts | rule API import 경로 변경 |
| src/entities/rule/api/rule-keys.ts | rule queryKey 신규 추가 |
| src/entities/rule/api/rule-dto.ts | RuleVoteMember 필드명 변경(userName→name) |
| src/entities/rule/api/rule-api.ts | rule dto import 경로 변경 |
| src/entities/notification/model/notification-store.ts | 알림 카운트 zustand store 신규 |
| src/entities/notification/model/fcm-payload.ts | NotificationType를 API dto로 통합 |
| src/entities/notification/hooks/useNotification.ts | 알림 조회/읽음 처리 react-query 훅 신규 |
| src/entities/notification/api/notification-dto.ts | 알림 DTO/타입 신규 |
| src/entities/notification/api/notification-api.ts | 알림 API(get/read/read-all) 신규 |
| src/app/AuthGuard.tsx | 온보딩 상태 리다이렉트 보완 + FCM bg/fg 수신 처리/토스트 클릭 이동 |
| src/App.tsx | /notification 라우트 활성화 + tool proposal 라우트 추가 |
| public/firebase-messaging-sw.template.js | bg 메시지 수신 시 열린 탭에 postMessage 브로드캐스트 |
| Dockerfile | VITE_GTM_ID build arg/env 추가 |
| .github/workflows/deploy.yml | VITE_GTM_ID build-arg 전달 추가 |
Comments suppressed due to low confidence (5)
src/entities/tool/hooks/useTool.ts:33
- 여러 훅에서
enabled: !!teamRoomId/!!proposalId를 사용하고 있는데,NaN도 truthy라서Number(params)결과가NaN이어도 쿼리가 실행됩니다.Number.isFinite(teamRoomId)(필요 시> 0까지)처럼 숫자 유효성 기반으로enabled를 계산하고,queryKey/queryFn도 유효할 때만 숫자를 사용하도록 조정해 주세요.
src/widgets/teamroom/tool/ui/vote-waiting/index.tsx:24 useVoteCountByCategory(Number(id), ...)에서id가 없으면Number(id)가NaN이 되고, 현재 훅의enabled: !!teamRoomId로직상NaN도 truthy라 쿼리가 실행됩니다. 라우트 파라미터를 숫자로 파싱한 뒤Number.isFinite(teamRoomId)같은 조건으로 유효성 검증 후에만 쿼리를 켜 주세요.
src/widgets/teamroom/tool/index.tsx:25useToolVoteParticipation(Number(id), true)에서id가 없으면Number(id)가NaN이 되고, 훅의enabled: !!teamRoomId조건 때문에 쿼리가 실행될 수 있습니다.id를 먼저 숫자로 파싱/검증해서 유효할 때만 쿼리를 수행하도록 처리해 주세요.
src/entities/tool/api/tool-api.ts:64proposalTools의 응답 타입을ProposalToolsRequest로 지정하고 있는데, 이는 요청 body 타입이라 응답과 의미가 섞입니다. 실제 API 응답 스펙에 맞는 별도 response 타입(예: 빈 객체/생성된 proposalId 등)을 정의해서 generic에 사용해 주세요.
src/widgets/teamroom/tool/ui/vote-tool/index.tsx:22Number(id) ?? 0는id가undefined여도NaN을 반환하므로(널리시가 아님) fallback이 동작하지 않습니다. 이 값이 그대로 mutation에 전달되면/team-rooms/NaN/...요청이 나갈 수 있으니,id를 먼저 검증/파싱해서 유효한 숫자일 때만 훅을 호출하거나 안전한 기본값/리다이렉트를 적용해 주세요.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
There was a problem hiding this comment.
Code Review
전반적으로 협업툴 제안, 알림 기능 구현 및 온보딩 리다이렉트 문제 해결 등 많은 개선이 이루어진 좋은 PR입니다. 특히 react-query의 캐시 관리 및 optimistic update를 잘 활용하여 사용자 경험을 개선한 점이 인상적입니다. 코드 구조 개선을 위한 파일 위치 변경도 좋은 리팩토링입니다. 다만, 메모리 누수 가능성이 있는 부분과 사용자 경험을 저해할 수 있는 alert 사용 등 몇 가지 개선점을 발견하여 의견을 남깁니다.
📄 PR 내용 요약
✅ 작업 내용 상세
협업툴 제안 구현
tanstack query를 통해 알림을 다시 조회합니다. 이를 통해, 팀룸 페이지에서 해당 알림이 왔을 때 승인된 협업툴이 UI 상 바로 반영됩니다.온보딩 관련 리다이렉트 문제 해결
/home경로에 접속 -> 로그인 ->/home경로 접속 시 다른 페이지로 넘어가지 않는 문제가 있었습니다./home경로일 때 세션 스토리지에 저장된 URL로 리다이렉트되지 않도록 수정하였습니다.JWT에 온보딩 상태를 저장해두도록 구현하셔서 최소accessToken발급 시decode하여 온보딩이 안되어 있으면 온보딩 페이지로 리다이렉트 되도록 반영하였습니다.알림 API 연결 / 백그라운드 상태 알림 구현
tanstack query캐싱처리를 하였으며, 읽음과 관련하여 세세하게 캐싱처리가 되어있습니다.협업툴, 규칙 파일 위치 변경
setup폴더 안에 있었다면,timeselect에 맞춰 상위 폴더로 옮겼습니다.GTM 도입
main.tsx에서<script>를 올리는 방식이고, 관련 id를 환경변수 처리하기 위해 이와 같은 방식으로 구현하였습니다.📸 스크린샷 (선택사항)
💬 참고 사항
📝 체크리스트