웹소켓 url 수정 및 인증 기반 사용자 ID로 웹소켓 연결 구조 정리 - #21
Merged
Conversation
📝 WalkthroughWalkthrough배포 워크플로우의 API/WS 환경 변수 설정을 정규화하고, 인증 기반 사용자 ID 훅으로 전환한 뒤 채팅 페이지에 탭 UI를 추가하고 STOMP 연결을 인증 토큰으로 구성하도록 변경했습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User as "사용자(UI)"
participant ChatPage as "ChatPage (탭 선택)"
participant BootHook as "useGlobalChatBoot(userId)"
participant StompClient as "stomp-client"
participant Server as "웹소켓 서버"
User->>ChatPage: 채팅 페이지 진입 / user 인증 상태
ChatPage->>BootHook: useGlobalChatBoot(userId) 호출
BootHook->>StompClient: connect(accessToken?, wsUrl)
alt accessToken 존재
StompClient->>StompClient: set connectHeaders = Authorization: Bearer <token>
else 토큰 없음
StompClient->>StompClient: set connectHeaders = {}
end
StompClient->>Server: STOMP CONNECT (wsUrl, headers)
Server-->>StompClient: CONNECTED
StompClient-->>BootHook: 연결 성공
BootHook-->>ChatPage: 상태(연결 됨)
ChatPage-->>User: 채팅 활성화 UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/shared/api/stomp-client.ts (1)
4-5: WS URL 조합 시 후행 슬래시 정규화를 추가하면 안전합니다.
VITE_API_BASE_URL값이/로 끝나면//ws형태가 될 수 있어, 초기화 시 정규화를 한 번 해두는 편이 좋습니다.리팩터링 예시
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL -const WS_URL = import.meta.env.VITE_WS_URL || (API_BASE_URL ? `${API_BASE_URL}/ws` : '/ws') +const API_BASE_URL = import.meta.env.VITE_API_BASE_URL?.replace(/\/+$/, '') +const EXPLICIT_WS_URL = import.meta.env.VITE_WS_URL?.replace(/\/+$/, '') +const WS_URL = EXPLICIT_WS_URL || (API_BASE_URL ? `${API_BASE_URL}/ws` : '/ws')🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/shared/api/stomp-client.ts` around lines 4 - 5, The WS URL concatenation can produce a double slash if VITE_API_BASE_URL ends with a slash; update the initialization of WS_URL to normalize API_BASE_URL by trimming any trailing slash before concatenation (i.e., ensure API_BASE_URL has no trailing "/" when used to build `${API_BASE_URL}/ws`), and keep the fallback '/ws' behavior when API_BASE_URL is falsy; adjust the logic referring to the API_BASE_URL and WS_URL constants accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.github/workflows/frontend-deploy.yml:
- Around line 30-39: The workflow currently writes VITE_API_BASE_URL and
VITE_WS_URL even if the selected secret (secrets.PROD_API_URL or
secrets.DEV_API_URL) is empty, producing a bad .env.production; add a guard
after determining API_URL (the shell variable set based on GITHUB_REF_NAME) that
checks for emptiness (test API_URL, e.g., using -z) and fails the job
immediately with a clear error message to stderr and a non-zero exit (so the run
stops) before continuing to strip the trailing slash and echo to
.env.production; reference the variables GITHUB_REF_NAME, API_URL,
secrets.PROD_API_URL, secrets.DEV_API_URL, and the target file .env.production
when implementing the check.
---
Nitpick comments:
In `@src/shared/api/stomp-client.ts`:
- Around line 4-5: The WS URL concatenation can produce a double slash if
VITE_API_BASE_URL ends with a slash; update the initialization of WS_URL to
normalize API_BASE_URL by trimming any trailing slash before concatenation
(i.e., ensure API_BASE_URL has no trailing "/" when used to build
`${API_BASE_URL}/ws`), and keep the fallback '/ws' behavior when API_BASE_URL is
falsy; adjust the logic referring to the API_BASE_URL and WS_URL constants
accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 41a612d5-d2a0-408f-8ae5-978416c3b6ca
📒 Files selected for processing (9)
.github/workflows/frontend-deploy.ymlsrc/features/ai-chat/lib/wefini-chat-utils.tssrc/features/ai-chat/ui/wefini-chat-widget.tsxsrc/features/auth/model/use-auth-user-id.tssrc/features/chat/ui/global-chat-room.tsxsrc/features/chat/ui/group-chat-room.tsxsrc/pages/chat/ui/chat-page.tsxsrc/shared/api/stomp-client.tssrc/widgets/app-layout/ui/app-layout.tsx
💤 Files with no reviewable changes (1)
- src/features/chat/ui/global-chat-room.tsx
minseokim0113
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 PR 설명
로그인 기능 적용 이후에도 남아 있던 데모용 사용자 ID 흐름을 제거하고, 인증 토큰 기반으로 웹소켓 연결이 동작하도록 구조를 정리했습니다.
전역 채팅 부트스트랩은
AppLayout에서 인증 사용자 ID를 기반으로 시작되도록 바꿨고, AI 채팅 위젯도 동일한 사용자 식별 방식을 사용하도록 맞췄습니다.추가로 배포 환경에서 웹소켓 주소를 안정적으로 계산할 수 있도록
stomp-client정리와 배포 env 설정도 함께 반영했습니다.✅ 완료한 기능 명세
AppLayout에서 인증 사용자 기준으로 전역 채팅 부트스트랩 연결stomp-client의 불필요한 임시 사용자 ID 제거💭 고민과 해결과정
기존에는
use-demo-user-id라는 이름의 훅이 실제로는 로그인 토큰에서 사용자 ID를 읽고 있었는데, 이름과 역할이 맞지 않아 흐름을 이해하기 어렵고 유지보수 시 혼동을 만들 수 있었습니다.그래서 인증 사용자 ID를 읽는 책임을 별도 훅으로 분리하고, 전역 채팅 연결 시작 지점도
connectStomp()직접 호출 방식이 아니라useGlobalChatBoot(userId)를 통해 일관되게 관리하도록 정리했습니다.또한 dev 환경에서 웹소켓이 프론트 도메인으로 잘못 붙는 문제가 있었기 때문에,
VITE_API_BASE_URL과VITE_WS_URL을 기준으로 웹소켓 주소를 계산하도록 구조를 맞췄습니다.이 과정에서
stomp-client.ts에 남아 있던 충돌 흔적과TEMP_USER_ID도 함께 제거해 인증 기반 연결 흐름으로 통일했습니다.Summary by CodeRabbit
새로운 기능
개선 사항