Merge pull request #176 from dnd-side-project/refactor/#175/chat-context

[refactor] 채팅 소켓 context 구조로 리팩토링

Author: maylh

src/app/providers/ChatProvider.tsx

@@ -0,0 +1,22 @@
+import { createContext, useContext, type ReactNode } from 'react'
+
+import { useChatSocket } from '@/features/chat/model/sendMessage'
+
+interface ChatProviderProps {
+  roomId: string
+  children: ReactNode
+}
+
+export const ChatContext = createContext<ReturnType<typeof useChatSocket> | null>(null)
+
+export const ChatProvider = ({ roomId, children }: ChatProviderProps) => {
+  const chat = useChatSocket(roomId)
+
+  return <ChatContext.Provider value={chat}>{children}</ChatContext.Provider>
+}
+
+export const useChat = () => {
+  const ctx = useContext(ChatContext)
+  if (!ctx) throw new Error('useChat 사용 오류: ChatProvider 내부에서 호출하세요')
+  return ctx
+}

src/app/providers/index.ts

@@ -1,6 +1,8 @@
+import { ChatProvider } from '@/app/providers/ChatProvider'
+
 import { default as PlayerProvider } from './PlayerProvider'
 import QueryProvider from './QueryProvider'
 import ThemeProvider from './ThemeProvider'
 import { ToastProvider, useToast } from './ToastProvider'
 
-export { QueryProvider, ThemeProvider, PlayerProvider, ToastProvider, useToast }
+export { QueryProvider, ThemeProvider, PlayerProvider, ToastProvider, useToast, ChatProvider }

src/features/chat/api/chat.ts

@@ -2,6 +2,7 @@ import type {
   ChatCountResponse,
   ChatHistoryParams,
   ChatHistoryResponse,
+  ListenerNumResponse,
 } from '@/features/chat/types/chat'
 import { api } from '@/shared/api/httpClient'
 
@@ -18,3 +19,7 @@ export const deleteChatMessage = async (roomId: string, messageId: string) => {
 export const getChatCount = (roomId: string) => {
   return api.get<ChatCountResponse>(`/chat/rooms/${roomId}/count/chat`)
 }
+
+export const getListenerCount = (roomId: string) => {
+  return api.get<ListenerNumResponse>(`/chat/rooms/${roomId}/count/member`)
+}

src/features/chat/model/sendMessage.ts

@@ -4,17 +4,7 @@ import { Client, type Message } from '@stomp/stompjs'
 import SockJS from 'sockjs-client/dist/sockjs'
 
 import { useAuthStore } from '@/features/auth/store/authStore'
-
-export interface ChatMessage {
-  senderId: string
-  messageId: string
-  username: string | null
-  content: string
-  sentAt: string
-  profileImage: string | null
-  systemMessage?: boolean
-  roomId: string
-}
+import { getListenerCount, type ChatMessage } from '@/features/chat'
 
 export const useChatSocket = (roomId: string) => {
   const clientRef = useRef<Client | null>(null)
@@ -26,6 +16,18 @@ export const useChatSocket = (roomId: string) => {
 
   const authToken = accessToken || anonymousToken
 
+  const fetchInitialCount = useCallback(async () => {
+    if (!roomId) return
+
+    try {
+      const res = await getListenerCount(roomId)
+
+      setParticipantCount(res.count)
+    } catch (e) {
+      console.error('초기 인원 조회 실패 : ', e)
+    }
+  }, [roomId])
+
   useEffect(() => {
     if (!roomId || !authToken) return
     if (clientRef.current?.active) return // 이미 활성화된 연결 방지
@@ -39,7 +41,7 @@ export const useChatSocket = (roomId: string) => {
       debug: (str) => console.log('[STOMP]', str),
     })
 
-    client.onConnect = () => {
+    client.onConnect = async () => {
       setConnected(true)
 
       // 메시지 구독
@@ -51,8 +53,11 @@ export const useChatSocket = (roomId: string) => {
       // 참여자 수
       client.subscribe(`/chat/topic/rooms/${roomId}/count`, (message: Message) => {
         const { count } = JSON.parse(message.body)
+
         setParticipantCount(count)
       })
+
+      await fetchInitialCount()
     }
 
     client.activate()
@@ -61,7 +66,7 @@ export const useChatSocket = (roomId: string) => {
     return () => {
       client.deactivate()
     }
-  }, [roomId, authToken])
+  }, [roomId, authToken, fetchInitialCount])
 
   const sendMessage = useCallback(
     (content: string) => {

src/features/chat/types/chat.ts

@@ -3,22 +3,27 @@ export interface ChatHistoryParams {
   limit?: number
 }
 
-export interface ChatHistoryMessage {
-  roomId: string
-  messageId: string
+export interface ChatMessage {
   senderId: string
+  messageId: string
   username: string | null
   content: string
   sentAt: string
-  systemMessage?: boolean
   profileImage: string | null
+  systemMessage?: boolean
+  roomId: string
 }
 
 export interface ChatHistoryResponse {
-  messages: ChatHistoryMessage[]
+  messages: ChatMessage[]
   nextCursor?: string
 }
 
 export interface ChatCountResponse {
   totalCount: number
 }
+
+export interface ListenerNumResponse {
+  roomId: string
+  count: number
+}

src/pages/discover/index.tsx

@@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'
 
 import styled from 'styled-components'
 
+import { ChatProvider } from '@/app/providers/ChatProvider'
 import { usePlaylist } from '@/app/providers/PlayerProvider'
 import {
   usePlaylistConfirmMutation,
@@ -105,35 +106,34 @@ const DiscoverPage = () => {
 
   return (
     <Page>
-      <SwipeCarousel
-        data={playlistsData}
-        onSelectIndexChange={handleSelectPlaylist}
-        axis="y"
-        basePath="/discover"
-      >
-        {playlistsData.map((data) => {
-          const isCurrentActive = currentPlaylist?.playlistId === data.playlistId
-
-          return (
-            <Slide key={data.playlistId}>
-              <PlaylistLayout
-                isActive={isCurrentActive}
-                currentPlaylist={currentPlaylist}
-                currentTrackIndex={currentTrackIndex}
-                currentTime={currentTime}
-                isPlaying={isPlaying}
-                onPlayPause={() => (isPlaying ? pause() : play())}
-                onNext={nextTrack}
-                onPrev={prevTrack}
-                onSelectTrack={(trackIndex, time) => {
-                  if (currentPlaylist) setPlaylist(currentPlaylist, trackIndex, time)
-                }}
-                playerRef={playerRef}
-              />
-            </Slide>
-          )
-        })}
-      </SwipeCarousel>
+      <ChatProvider roomId={currentPlaylist ? String(currentPlaylist.playlistId) : ''}>
+        <SwipeCarousel
+          data={playlistsData}
+          onSelectIndexChange={handleSelectPlaylist}
+          axis="y"
+          basePath="/discover"
+        >
+          {playlistsData.map((data) => {
+            return (
+              <Slide key={data.playlistId}>
+                <PlaylistLayout
+                  currentPlaylist={currentPlaylist}
+                  currentTrackIndex={currentTrackIndex}
+                  currentTime={currentTime}
+                  isPlaying={isPlaying}
+                  onPlayPause={() => (isPlaying ? pause() : play())}
+                  onNext={nextTrack}
+                  onPrev={prevTrack}
+                  onSelectTrack={(trackIndex, time) => {
+                    if (currentPlaylist) setPlaylist(currentPlaylist, trackIndex, time)
+                  }}
+                  playerRef={playerRef}
+                />
+              </Slide>
+            )
+          })}
+        </SwipeCarousel>
+      </ChatProvider>
     </Page>
   )
 }

src/pages/mycd/index.tsx

@@ -3,13 +3,13 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import styled from 'styled-components'
 
+import { ChatProvider } from '@/app/providers/ChatProvider'
 import { usePlaylist } from '@/app/providers/PlayerProvider'
 import { NoLike } from '@/assets/icons'
 import { MemberCharacter } from '@/assets/images'
 import { usePlaylistDetail } from '@/entities/playlist'
 import { useMyCdActions, useMyCdList, useMyLikedCdList } from '@/entities/playlist/model/useMyCd'
 import { useAuthStore } from '@/features/auth/store/authStore'
-import { useChatSocket } from '@/features/chat/model/sendMessage'
 import { HeaderTab, PlaylistCarousel } from '@/pages/mycd/ui'
 import type { MyCdTab } from '@/pages/mycd/ui/HeaderTab'
 import { useDevice } from '@/shared/lib/useDevice'
@@ -136,11 +136,6 @@ const MyCdPage = () => {
     }
   }, [playlistDetail, userInfo, setPlaylist, currentPlaylist])
 
-  const isActive = currentPlaylist?.playlistId === playlistDetail?.playlistId
-  const { participantCount: listenersNum } = useChatSocket(
-    isActive && centerItem.playlistId ? String(centerItem.playlistId) : ''
-  )
-
   const handleProgressClick = useCallback(
     (trackIndex: number, seconds: number) => {
       if (!currentPlaylist) return
@@ -190,73 +185,75 @@ const MyCdPage = () => {
   }
 
   return (
-    <div>
-      {currentPlaylist && (
-        <>
-          <HeaderTab selectedTab={selectedTab} onSelect={handleTabSelect} />
-          <Container>
-            <LiveInfo isOnAir={listenersNum > 0} listenerCount={listenersNum} />
-            {selectedTab === 'MY' && (
-              <Button
-                size="S"
-                state="primary"
-                onClick={() =>
-                  navigate(`/mypage/customize`, {
-                    state: { cdId: currentPlaylist?.playlistId },
-                  })
-                }
-              >
-                편집
-              </Button>
-            )}
-          </Container>
-          <CenterWrapper>
-            <PlaylistCarousel
-              data={playlistData ?? []}
-              onCenterChange={handleCenterChange}
-              currentPlaylistId={currentPlaylist?.playlistId}
-              isPlaying={isPlaying}
-            />
-            <ActionBar
-              playlistId={centerItem.playlistId ?? 0}
-              creatorId={currentPlaylist.creatorId}
-              stickers={playlistDetail?.cdResponse?.cdItems || []}
-              type="MY"
-              selectedTab={selectedTab}
-            />
-            <Title $isMobile={isMobile}> {centerItem.playlistName}</Title>
-            {selectedTab === 'LIKE' && playlistDetail?.creatorNickname && (
-              <Creator>{playlistDetail.creatorNickname}</Creator>
-            )}
-
-            <BottomWrapper>
-              <ProgressBar
-                trackLengths={currentPlaylist.songs.map((t) => t.youtubeLength) || []}
-                currentIndex={currentTrackIndex}
-                onClick={handleProgressClick}
-              />
-
-              <ControlBar
-                isPlaying={isPlaying}
-                onTogglePlay={() => {
-                  if (isMobile && !isPlaying) {
-                    unmuteOnce()
+    <ChatProvider roomId={currentPlaylist ? String(currentPlaylist.playlistId) : ''}>
+      <div>
+        {currentPlaylist && (
+          <>
+            <HeaderTab selectedTab={selectedTab} onSelect={handleTabSelect} />
+            <Container>
+              <LiveInfo />
+              {selectedTab === 'MY' && (
+                <Button
+                  size="S"
+                  state="primary"
+                  onClick={() =>
+                    navigate(`/mypage/customize`, {
+                      state: { cdId: currentPlaylist?.playlistId },
+                    })
                   }
-
-                  if (isPlaying) {
-                    pause()
-                  } else {
-                    play()
-                  }
-                }}
-                onNext={nextTrack}
-                onPrev={prevTrack}
+                >
+                  편집
+                </Button>
+              )}
+            </Container>
+            <CenterWrapper>
+              <PlaylistCarousel
+                data={playlistData ?? []}
+                onCenterChange={handleCenterChange}
+                currentPlaylistId={currentPlaylist?.playlistId}
+                isPlaying={isPlaying}
+              />
+              <ActionBar
+                playlistId={centerItem.playlistId ?? 0}
+                creatorId={currentPlaylist.creatorId}
+                stickers={playlistDetail?.cdResponse?.cdItems || []}
+                type="MY"
+                selectedTab={selectedTab}
               />
-            </BottomWrapper>
-          </CenterWrapper>
-        </>
-      )}
-    </div>
+              <Title $isMobile={isMobile}> {centerItem.playlistName}</Title>
+              {selectedTab === 'LIKE' && playlistDetail?.creatorNickname && (
+                <Creator>{playlistDetail.creatorNickname}</Creator>
+              )}
+
+              <BottomWrapper>
+                <ProgressBar
+                  trackLengths={currentPlaylist.songs.map((t) => t.youtubeLength) || []}
+                  currentIndex={currentTrackIndex}
+                  onClick={handleProgressClick}
+                />
+
+                <ControlBar
+                  isPlaying={isPlaying}
+                  onTogglePlay={() => {
+                    if (isMobile && !isPlaying) {
+                      unmuteOnce()
+                    }
+
+                    if (isPlaying) {
+                      pause()
+                    } else {
+                      play()
+                    }
+                  }}
+                  onNext={nextTrack}
+                  onPrev={prevTrack}
+                />
+              </BottomWrapper>
+            </CenterWrapper>
+          </>
+        )}
+      </div>
+    </ChatProvider>
   )
 }