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) |
+# ⚒️ 주요 기능
-- 서버 아키텍처
-
+> 네이버 및 구글 아이디로 간편 로그인을 할 수 있어요!
-- CI/CD
-
+![스크린샷 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}>
복사하기