diff --git a/README.md b/README.md index d67c50c..44290f6 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,73 @@ -# web07-GBS (금쪽이들의 방송 플랫폼) +![image](https://github.com/boostcampwm2023/web07-GBS/assets/21211957/cc6c597b-09aa-4312-8ab0-30eec394dcfa) -## 프로젝트 개요 +

금쪽이들의 방송 플랫폼 만들기!

-"금쪽이들의 방송 플랫폼"은 트위치, 아프리카와 같은 실시간 방송 스트리밍 서비스입니다. 이 프로젝트는 스트리밍 기술의 내부 작동 방식을 탐구하고, 기술적 도전을 통해 팀원들의 성장을 목표로 합니다. +# 🔎 프로젝트 소개 -## 금쪽이들 팀 소개 +``` +GBS에서는 아프리카 TV, 트위치와 같이 실시간으로 인터넷 방송을 하거나 볼 수 있습니다. -| 👑J136 정명희 | J011 김경근 | J158 최상원 | J164 한원준 | -| :-----------: | :---------: | :---------: | :---------: | -| BE | BE | FE | FE | -| ![J136 정명희](https://avatars.githubusercontent.com/u/92200502?v=4) | ![J011 김경근](https://avatars.githubusercontent.com/u/97646802?v=4) | ![J158 최상원](https://avatars.githubusercontent.com/u/21211957?v=4) | ![J164 한원준](https://avatars.githubusercontent.com/u/119842443?v=4) | -| [jmhee28](https://github.com/jmhee28) | [kkg5](https://github.com/kkg5) | [ChoiSangwon](https://github.com/ChoiSangwon) | [top-chaser](https://github.com/top-chaser) | +스트리머는 OBS를 사용해서 GBS로 실시간 방송을 송출할 수 있습니다. -## 프로젝트 진행상황 +또한, 시청자는 방송을 보면서 채팅을 통해 다른 사람들과 실시간으로 소통할 수 있습니다. +``` -- [❤️ 그라운드 룰](그라운드-룰) -- [📜 깃 컨벤션](깃-컨벤션) -- [🎨 Figma](https://www.figma.com/file/16PQPx7fxsQy1hIq4L7bJd/%EA%B8%88%EC%AA%BD%EC%9D%B4%EB%93%A4?type=design&node-id=0%3A1&mode=dev) -- [📌 FigJam](https://www.figma.com/file/NarTnhNImVLZ7tNeBIt7uV/%EA%B8%88%EC%AA%BD%EC%9D%B4%EB%93%A4?type=whiteboard&node-id=0-1&t=jp40Lhigs4VzBHS2-0) -- [💡 Backlog](https://docs.google.com/spreadsheets/d/1W500mLy8KgB72Z6Jxu3mU7P4NrGy8EdgYLOWiS0iAfE/edit?usp=sharing) -- [📋 회의록](회의록) +# 📺 프로젝트 주소 +> https://gbs-live.site/ -## 기술 스택 및 도구 -- 프론트엔드: React, Vite, Recoil, Styled Components -- 백엔드: [백엔드 기술 스택 상세 설명] -- 데이터베이스: [데이터베이스 선택 및 설명] -- 개발 도구: Git, GitHub, Notion +# 👨‍👩‍👧‍👦 팀 소개 -## 프로젝트 상세 -### 백엔드 -- 백엔드는 스트리밍 서비스의 핵심 기능을 처리합니다. 아래는 서버 아키텍처 및 CI/CD 프로세스에 대한 설명입니다. +| 👑 J136 정명희 | J011 김경근 | J158 최상원 | J164 한원준 | +| :------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | +| BE | BE | FE | FE | +| | | | | +| [@jmhee28](https://github.com/jmhee28) | [@kkg5](https://github.com/kkg5) | [@ChoiSangwon](https://github.com/ChoiSangwon) | [@top-chaser](https://github.com/top-chaser) | +# ⚒️ 주요 기능 -- 서버 아키텍처 -스크린샷 2023-11-22 오전 9 26 28 +> 네이버 및 구글 아이디로 간편 로그인을 할 수 있어요! -- CI/CD -스크린샷 2023-11-22 오전 9 26 37 +![스크린샷 2023-12-11 165508](https://github.com/boostcampwm2023/web07-GBS/assets/119842443/214c3463-8f09-442b-9d38-0533b80acd23) +> 방송 비밀 키와 OBS를 연동해 GBS로 방송을 송출할 수 있어요! -### 프론트엔드 -프론트엔드는 사용자 인터페이스를 담당하며, 다음과 같은 기술을 사용합니다. +![스크린샷 2023-12-11 165719](https://github.com/boostcampwm2023/web07-GBS/assets/119842443/a772399b-40ae-46eb-aca8-4215fe23dd51) -- 패키지 매니저: Yarn -- 번들러: Vite -- 상태관리 라이브러리: Recoil -- 스타일링: Styled Components +> 방송을 보고 싶다면 메인 화면에서 현재 진행중인 방송을 볼 수 있어요! + +![스크린샷 2023-12-11 165455](https://github.com/boostcampwm2023/web07-GBS/assets/119842443/ca47c885-7136-4472-b56f-5b74d7e398db) + +> 원하는 방송에 들어가 채팅을 통해 다른 시청자들과 소통할 수 있어요! + +![스크린샷 2023-12-11 173110](https://github.com/boostcampwm2023/web07-GBS/assets/119842443/716297bf-934d-453b-a39b-33b22327b339) + +# ⚙️ 기술 스택 + +
+ + + + + + + +
+ + + + + + +
+ + + + + + +
+ +
+ +**더 자세한 내용을 보고 싶으시다면 [GBS의 wiki](https://github.com/boostcampwm2023/web07-GBS/wiki)나 [GBS의 notion](https://www.notion.so/GBS-b3e35f1c05c24973a722bd406218a6ae)를 참고해주세요!** diff --git a/client/src/components/Modal/SettingModal/SettingModal.tsx b/client/src/components/Modal/SettingModal/SettingModal.tsx index 458ce51..14d0636 100644 --- a/client/src/components/Modal/SettingModal/SettingModal.tsx +++ b/client/src/components/Modal/SettingModal/SettingModal.tsx @@ -17,8 +17,8 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => { const [id, setId] = useState(user.id) const [nickname, setNickname] = useState(user.nickname) const [changeUser, setChangeUser] = useState(false) - const [streamKey, setStreamKey] = useState('') const [streamLink, setStreamLink] = useState('') + const [streamKey, setStreamKey] = useState('') const isDarkMode = currentTheme === ThemeFlag.dark const onThemeToggle = () => { @@ -131,26 +131,26 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => { }) } - const onCopyButton = (copy: 'key' | 'link') => { - if (copy === 'key') { + const onCopyButton = (copy: 'link' | 'key') => { + if (copy === 'link') { navigator.clipboard - .writeText(streamKey) + .writeText(streamLink) .then(() => { - alert('방송 비밀 키가 클립보드에 복사되었습니다.') + alert('방송 송출 링크가 클립보드에 복사되었습니다.') }) .catch((err) => { console.error(err) - alert('방송 비밀키 복사에 실패 했습니다.') + alert('방송 송출 링크 복사에 실패 했습니다.') }) - } else if (copy === 'link') { + } else if (copy === 'key') { navigator.clipboard - .writeText(streamLink) + .writeText(streamKey) .then(() => { - alert('방송 송출 링크가 클립보드에 복사되었습니다.') + alert('방송 비밀 키가 클립보드에 복사되었습니다.') }) .catch((err) => { console.error(err) - alert('방송 송출 링크 복사에 실패 했습니다.') + alert('방송 비밀키 복사에 실패 했습니다.') }) } } @@ -216,17 +216,17 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => { 저장하기 - 방송 비밀 키 + 방송 송출 링크 - - onCopyButton('key')} currentTheme={currentTheme}> + + onCopyButton('link')} currentTheme={currentTheme}> 복사하기 - 방송 송출 링크 + 방송 비밀 키 - - onCopyButton('link')} currentTheme={currentTheme}> + + onCopyButton('key')} currentTheme={currentTheme}> 복사하기