Skip to content

Commit

Permalink
[fix] 새로고침 시 404 해결 & 메인 화면 방송 리스트 api 연결 (#136)
Browse files Browse the repository at this point in the history 
* feat : 메인 페이지, 방송 리스트 api 연결

* fix : 방송 정보 api에서 받아오게 변경
  • Loading branch information
@ChoiSangwon
ChoiSangwon authored Dec 5, 2023
1 parent 987f263 commit d392e56
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 89 deletions.
157 changes: 81 additions & 76 deletions client/src/pages/BroadcastPage/BroadcastPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useState, useRef } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Link, useParams } from 'react-router-dom'
import { useRecoilValue } from 'recoil'
import io from 'socket.io-client'
import * as styles from './BroadcastPage.styles'
Expand All @@ -12,13 +12,7 @@ import ConfirmModal from '@components/Modal/ConfirmModal/ConfirmModal'
import Chatting from '@components/Chatting/Chatting'
import { themeState } from '@/states/theme'
import { userState } from '@/states/user'

interface BroadcastProps {
id: string
title: string
nickname: string
viewer: string
}
import useApi from '@/hooks/useApi'

interface ViewerModalProps {
nickname: string
Expand All @@ -34,8 +28,10 @@ interface ChattingProps {
}

const BroadcastPage = () => {
const location = useLocation()
const { id, title, nickname, viewer }: BroadcastProps = location.state
const [response, fetchApi] = useApi()
const { id } = useParams()
const nickname = '222' // TODO : 닉네임 response에 추가되면 삭제

const [settingModal, setSettingModal] = useState<boolean>(false)
const [loginModal, setLoginModal] = useState<boolean>(false)
const [viewerModal, setViewerModal] = useState<boolean>(false)
Expand Down Expand Up @@ -120,6 +116,7 @@ const BroadcastPage = () => {
}

useEffect(() => {
fetchApi('GET', `/streams/${id}`)
socket.current = io('https://api.gbs-live.site', { withCredentials: true })

socket.current.emit('join', { room: id })
Expand All @@ -135,74 +132,82 @@ const BroadcastPage = () => {
}
}, [])

return (
<styles.Container>
<styles.Logo>
<Link to="/">
<Logo logo="wide" currentTheme={theme} />
</Link>
</styles.Logo>
<styles.Access>
{user.id === '' ? (
if (response.data)
return (
<styles.Container>
<styles.Logo>
<Link to="/">
<Logo logo="wide" currentTheme={theme} />
</Link>
</styles.Logo>
<styles.Access>
<Access leftButton="환경설정" rightButton="로그인" onLeftButton={onSetting} onRightButton={onLogin} />
) : (
<Access leftButton="환경설정" rightButton="로그아웃" onLeftButton={onSetting} onRightButton={onLogout} />
</styles.Access>
<styles.Broadcast></styles.Broadcast>
<styles.Chatting currentTheme={theme}>
<styles.ChattingList>
{chattingList.map((chatting, index) => (
<Chatting nickname={chatting.nickname} message={chatting.message} onNickname={onNickname} key={index} />
))}
</styles.ChattingList>
<styles.Input currentTheme={theme}>
<styles.Text
currentTheme={theme}
value={chatting}
onChange={(event) => {
if (user.id === '') {
setIsLoginCheckModal(true)
return
}
return setChatting(event.target.value)
}}
onKeyDown={onEnter}
></styles.Text>
<styles.Send currentTheme={theme} onClick={onSend}>
등록하기
</styles.Send>
</styles.Input>
</styles.Chatting>
<styles.Info currentTheme={theme}>
<styles.Title>{response.data.title}</styles.Title>
<styles.Nickname>{response.data.category}</styles.Nickname>
<styles.Viewer>시청자 {response.data.viewer}명</styles.Viewer>
</styles.Info>
{settingModal ? <SettingModal onConfirm={onSetting} /> : null}
{loginModal ? <LoginModal onCancle={onLogin} currentTheme={theme} /> : null}
{isLoginCheckModal && (
<ConfirmModal
currentTheme={theme}
text="채팅을 입력하시려면 로그인을 먼저 해주세요"
onConfrim={() => {
setIsLoginCheckModal(false)
}}
/>
)}
{isEmptyChat && (
<ConfirmModal
currentTheme={theme}
text="채팅을 입력해주세요"
onConfrim={() => {
setIsEmptyChat(false)
}}
/>
)}
</styles.Access>
<styles.Broadcast></styles.Broadcast>
<styles.Chatting currentTheme={theme}>
<styles.ChattingList>
{chattingList.map((chatting, index) => (
<Chatting nickname={chatting.nickname} message={chatting.message} onNickname={onNickname} key={index} />
))}
</styles.ChattingList>
<styles.Input currentTheme={theme}>
<styles.Text currentTheme={theme} value={chatting} onChange={(event) => setChatting(event.target.value)} onKeyDown={onEnter}></styles.Text>
<styles.Send currentTheme={theme} onClick={onSend}>
등록하기
</styles.Send>
</styles.Input>
</styles.Chatting>
<styles.Info currentTheme={theme}>
<styles.Title>{title}</styles.Title>
<styles.Nickname>{nickname}</styles.Nickname>
<styles.Viewer>시청자 {viewer}명</styles.Viewer>
</styles.Info>
{settingModal && <SettingModal onConfirm={onSetting} />}
{loginModal && <LoginModal onCancle={onLogin} currentTheme={theme} />}
{viewerModal && (
<ViewerModal
nickname={viewerModalInfo.nickname}
authority={viewerModalInfo.authority}
target={viewerModalInfo.target}
top={viewerModalInfo.top}
left={viewerModalInfo.left}
onCancle={onViewer}
onManager={onManager}
onKick={onViewer}
currentTheme={theme}
/>
)}
{loginCheckModal && (
<ConfirmModal
text="로그인을 해주세요"
onConfrim={() => {
setLoginCheckModal(false)
}}
currentTheme={theme}
/>
)}
{emptyChattingModal && (
<ConfirmModal
text="채팅을 입력해주세요"
onConfrim={() => {
setEmptyChattingModal(false)
}}
currentTheme={theme}
/>
)}
</styles.Container>
)
{viewerModal ? (
<ViewerModal
nickname={viewerModalInfo.nickname}
authority={viewerModalInfo.authority}
target={viewerModalInfo.target}
top={viewerModalInfo.top}
left={viewerModalInfo.left}
onCancle={onViewer}
onManager={onManager}
onKick={onViewer}
currentTheme={theme}
/>
) : null}
</styles.Container>
)
}

export default BroadcastPage
35 changes: 22 additions & 13 deletions client/src/pages/MainPage/MainPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,26 @@ import Broadcast from '@components/Broadcast/Broadcast'
import SettingModal from '@components/Modal/SettingModal/SettingModal'
import LoginModal from '@components/Modal/LoginModal/LoginModal'
import EmptyList from '@components/EmptyList/EmptyList'
import useApi from '@/hooks/useApi'
import { themeState } from '@/states/theme'
import { userState } from '@/states/user'

interface BroadcastProps {
id: string
userId: string
title: string
nickname: string
category: string
desc: string
streamKey: string
viewer: string
thumbnail: string
startedAt: string
resolution: string
frameRate: number
}

const MainPage = () => {
const [response, fetchApi] = useApi()

const [settingModal, setSettingModal] = useState<boolean>(false)
const [loginModal, setLoginModal] = useState<boolean>(false)
const [broadcastList, setBroadcastList] = useState<Array<BroadcastProps>>([])
Expand All @@ -39,10 +48,12 @@ const MainPage = () => {
}

useEffect(() => {
setBroadcastList([
{ id: 'qwer1234', title: 'JMH의 방송', nickname: 'BJ_JMH', viewer: '1,557' },
{ id: '11dnjfqhdks', title: '그냥 방송', nickname: 'BJ_그냥', viewer: '1,601' },
])
if (!response.data) return
setBroadcastList(response.data.data)
}, [response])

useEffect(() => {
fetchApi('GET', '/streams').then(() => {})
}, [])

return (
Expand All @@ -62,13 +73,11 @@ const MainPage = () => {
<styles.List currentTheme={theme} length={broadcastList.length}>
{broadcastList.length !== 0 ? (
broadcastList.map((broadcast, index) => (
<Link
to={`/${broadcast.id}`}
state={{ id: broadcast.id, title: broadcast.title, nickname: broadcast.nickname, viewer: broadcast.viewer }}
key={index}
>
<Broadcast title={broadcast.title} nickname={broadcast.nickname} viewer={broadcast.viewer} index={index} />
</Link>
<div>
<Link to={`/${broadcast.userId}`}>
<Broadcast title={broadcast.title} nickname={''} viewer={broadcast.viewer} index={index} key={index} />
</Link>
</div>
))
) : (
<EmptyList currentTheme={theme} />
Expand Down

0 comments on commit d392e56

Please sign in to comment.