[design] 환경 설정 모달창 디자인 변경 (#198)

* design : 환경 설정 모달창 디자인 변경 * docs : README.md 파일 수정 --------- Co-authored-by: top-chaser <[email protected]>
boostcampwm2023 · Dec 11, 2023 · 286b12c · 286b12c
1 parent a04fd6c
commit 286b12c
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 50 deletions.
diff --git 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)
 
-## 프로젝트 개요
+<h3 align="center">금쪽이들의 방송 플랫폼 만들기!</h3>
 
-"금쪽이들의 방송 플랫폼"은 트위치, 아프리카와 같은 실시간 방송 스트리밍 서비스입니다. 이 프로젝트는 스트리밍 기술의 내부 작동 방식을 탐구하고, 기술적 도전을 통해 팀원들의 성장을 목표로 합니다.
+# 🔎 프로젝트 소개
 
-## 금쪽이들 팀 소개
+```
+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                                      |
+| <img src="https://avatars.githubusercontent.com/u/92200502?v=4" width=150> | <img src="https://avatars.githubusercontent.com/u/97646802?v=4" width=150> | <img src="https://avatars.githubusercontent.com/u/21211957?v=4" width=150> | <img src="https://avatars.githubusercontent.com/u/119842443?v=4" width=150> |
+|                   [@jmhee28](https://github.com/jmhee28)                   |                      [@kkg5](https://github.com/kkg5)                      |               [@ChoiSangwon](https://github.com/ChoiSangwon)               |                [@top-chaser](https://github.com/top-chaser)                 |
 
+# ⚒️ 주요 기능
 
-- 서버 아키텍처
-<img width="684" alt="스크린샷 2023-11-22 오전 9 26 28" src="https://github.com/boostcampwm2023/web07-GBS/assets/21211957/45da0214-3d3f-4ad7-858c-32af2a993f7f">
+> 네이버 및 구글 아이디로 간편 로그인을 할 수 있어요!
 
-- CI/CD
-<img width="456" alt="스크린샷 2023-11-22 오전 9 26 37" src="https://github.com/boostcampwm2023/web07-GBS/assets/21211957/c08abf7c-90c1-4fe3-b1d0-4f6055861b58">
+![스크린샷 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)
+
+# ⚙️ 기술 스택
+
+<div align="center">
+
+<img src="https://img.shields.io/badge/Typescript-3178C6?style=for-the-badge&logo=typescript&logoColor=white"/>
+<img src="https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=Jest&logoColor=white"/>
+<img src="https://img.shields.io/badge/socketdotio-010101?style=for-the-badge&logo=socketdotio&logoColor=white"/>
+<img src="https://img.shields.io/badge/docker-2496ED?style=for-the-badge&logo=docker&logoColor=white"/>
+<img src="https://img.shields.io/badge/githubactions-2088FF?style=for-the-badge&logo=githubactions&logoColor=white"/>
+
+</br>
+
+<img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=white">
+<img src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white"/>
+<img src="https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white"/>
+<img src="https://img.shields.io/badge/styledcomponents-DB7093?style=for-the-badge&logo=styledcomponents&logoColor=white"/>
+
+</br>
+
+<img src="https://img.shields.io/badge/nestjs-E0234E?style=for-the-badge&logo=nestjs&logoColor=white">
+<img src="https://img.shields.io/badge/mysql-4479A1?style=for-the-badge&logo=mysql&logoColor=white"/>
+<img src="https://img.shields.io/badge/redis-DC382D?style=for-the-badge&logo=redis&logoColor=white"/>
+<img src="https://img.shields.io/badge/nginx-009639?style=for-the-badge&logo=nginx&logoColor=white"/>
+
+</div>
+
+</br>
+
+**더 자세한 내용을 보고 싶으시다면 [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
@@ -17,8 +17,8 @@ const SettingModal = ({ onConfirm }: SettingModalProps) => {
   const [id, setId] = useState<string>(user.id)
   const [nickname, setNickname] = useState<string>(user.nickname)
   const [changeUser, setChangeUser] = useState<boolean>(false)
-  const [streamKey, setStreamKey] = useState<string>('')
   const [streamLink, setStreamLink] = useState<string>('')
+  const [streamKey, setStreamKey] = useState<string>('')
   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) => {
                     저장하기
                   </styles.InputButton>
                 </styles.InputContainer>
-                <styles.BodyText>방송 비밀 키</styles.BodyText>
+                <styles.BodyText>방송 송출 링크</styles.BodyText>
                 <styles.InputContainer>
-                  <styles.Input value={streamKey} type="password" readOnly={true} currentTheme={currentTheme} />
-                  <styles.InputButton onClick={() => onCopyButton('key')} currentTheme={currentTheme}>
+                  <styles.Input value={streamLink} type="password" readOnly={true} currentTheme={currentTheme} />
+                  <styles.InputButton onClick={() => onCopyButton('link')} currentTheme={currentTheme}>
                     복사하기
                   </styles.InputButton>
                 </styles.InputContainer>
-                <styles.BodyText>방송 송출 링크</styles.BodyText>
+                <styles.BodyText>방송 비밀 키</styles.BodyText>
                 <styles.InputContainer>
-                  <styles.Input value={streamLink} type="password" readOnly={true} currentTheme={currentTheme} />
-                  <styles.InputButton onClick={() => onCopyButton('link')} currentTheme={currentTheme}>
+                  <styles.Input value={streamKey} type="password" readOnly={true} currentTheme={currentTheme} />
+                  <styles.InputButton onClick={() => onCopyButton('key')} currentTheme={currentTheme}>
                     복사하기
                   </styles.InputButton>
                 </styles.InputContainer>