[docs] README.md 파일 수정 (#204)

* docs : README.md 파일 수정

* docs : README.md 파일 수정

* docs : README.md 파일 수정

* feat : storybook 적용

* fix : storybook 오류 수정

* docs : README.md 파일 수정

README.md

@@ -1,7 +1,5 @@
 ![image](https://github.com/boostcampwm2023/web07-GBS/assets/21211957/cc6c597b-09aa-4312-8ab0-30eec394dcfa)
 
-<h3 align="center">금쪽이들의 방송 플랫폼 만들기!</h3>
-
 # 🔎 프로젝트 소개
 
 ```
@@ -30,7 +28,7 @@ GBS에서는 아프리카 TV, 트위치와 같이 실시간으로 인터넷 방
 
 ![스크린샷 2023-12-11 165508](https://github.com/boostcampwm2023/web07-GBS/assets/119842443/214c3463-8f09-442b-9d38-0533b80acd23)
 
-> 방송 비밀 키와 OBS를 연동해 GBS로 방송을 송출할 수 있어요!
+> 방송을 하고 싶다면 방송 비밀 키와 OBS를 연동해 GBS로 방송을 송출할 수 있어요!
 
 ![스크린샷 2023-12-11 165719](https://github.com/boostcampwm2023/web07-GBS/assets/119842443/a772399b-40ae-46eb-aca8-4215fe23dd51)
 
@@ -42,6 +40,28 @@ GBS에서는 아프리카 TV, 트위치와 같이 실시간으로 인터넷 방
 
 ![스크린샷 2023-12-11 173110](https://github.com/boostcampwm2023/web07-GBS/assets/119842443/716297bf-934d-453b-a39b-33b22327b339)
 
+# 🔥 기술적 도전
+
+## 📚 Storybook 적용
+
+- 컴포넌트를 보다 잘 관리하기 위해서 Storybook을 적용했습니다.
+- Storybook을 사용하면서 의존성이 낮고 재사용성이 좋은 컴포넌트를 구현하기 위해 고민 할 수 있었습니다.
+
+## 🌚 다크모드 구현
+
+- 보다 나은 사용자 경험을 위해서 사이트 전체에 대해 다크모드를 적용했습니다.
+- 다크모드를 적용하기 위해 ThemeProvider 및 Recoil를 사용하며, 전역 상태 관리에 대해 알 수 있었습니다.
+
+## 🎥 스트리밍 서비스 구현
+
+- 스트리밍 서비스를 구현하며 RTMP, HLS 프로토콜에 대해 배울 수 있었습니다.
+
+## ✂️ 간편 로그인 구현
+
+- 사용자가 더 쉽고 빠르게 서비스에 접근할 수 있도록 OAuth를 이용한 간편 로그인을 적용했습니다.
+- 간편 로그인을 구현하는 과정에서 oAuth의 동작 방식에 대해 공부할 수 있었습니다.
+- 쿠키를 통한 로그인 검증을 구현하며, httpOnly나 sameSite와 같은 쿠키의 속성에 대해 배울 수 있었습니다.
+
 # ⚙️ 기술 스택
 
 <div align="center">
@@ -70,4 +90,4 @@ GBS에서는 아프리카 TV, 트위치와 같이 실시간으로 인터넷 방
 
 </br>
 
-**더 자세한 내용을 보고 싶으시다면 [GBS의 wiki](https://github.com/boostcampwm2023/web07-GBS/wiki)나 [GBS의 notion](https://www.notion.so/GBS-b3e35f1c05c24973a722bd406218a6ae)를 참고해주세요!**
+**더 자세한 내용을 보고 싶으시다면 [금쪽이들의 wiki](https://github.com/boostcampwm2023/web07-GBS/wiki)나 [금쪽이들의 notion](https://www.notion.so/GBS-b3e35f1c05c24973a722bd406218a6ae)를 참고해주세요!**

client/src/components/Access/Access.stories.tsx

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react'
+import Access from './Access'
+
+const meta = {
+  title: 'Access',
+  component: Access,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    leftButton: '왼쪽 버튼',
+    rightButton: '오른쪽 버튼',
+    onLeftButton: () => {},
+    onRightButton: () => {},
+  },
+}

client/src/components/Broadcast/Broadcast.stories.tsx

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react'
+import Broadcast from './Broadcast'
+
+const meta = {
+  title: 'Broadcast',
+  component: Broadcast,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    thumbnail: 'https://github.com/boostcampwm2023/web07-GBS/assets/119842443/fe492d6e-a180-49c4-82d6-b0a8b0c1295a',
+    title: 'JMH의 방송',
+    nickname: 'JMH',
+    viewer: 1,
+    index: 1,
+  },
+}

client/src/components/Chatting/Chatting.stories.tsx

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react'
+import Chatting from './Chatting'
+
+const meta = {
+  title: 'Chatting',
+  component: Chatting,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    nickname: 'JMH',
+    message: '테스트 입니다.',
+    onNickname: () => {},
+  },
+}

client/src/components/EmptyList/EmptyList.stories.tsx

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react'
+import EmptyList from './EmptyList'
+import { ThemeFlag } from '@/types/theme'
+
+const meta = {
+  title: 'EmptyList',
+  component: EmptyList,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    currentTheme: ThemeFlag.light,
+  },
+}

client/src/components/Modal/SettingModal/SettingModal.stories.tsx → client/src/components/HlsPlayer/HlsPlayer.stories.tsx

@@ -1,9 +1,9 @@
 import type { StoryObj } from '@storybook/react'
-import SettingModal from './SettingModal'
+import HlsPlayer from './HlsPlayer'
 
 const meta = {
-  title: 'Modal/Setting',
-  component: SettingModal,
+  title: 'HlsPlayer',
+  component: HlsPlayer,
   tags: ['autodocs'],
 }
 
@@ -13,6 +13,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    onConfirm: () => {},
+    id: 'JMH',
   },
 }

client/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react'
+import Logo from './Logo'
+import { ThemeFlag } from '@/types/theme'
+
+const meta = {
+  title: 'Logo',
+  component: Logo,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    logo: 'wide',
+    currentTheme: ThemeFlag.light,
+  },
+}

client/src/components/Modal/ConfirmModal/ConfirmModal.stories.tsx

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react'
+import ConfirmModal from './ConfirmModal'
+import { ThemeFlag } from '@/types/theme'
+
+const meta = {
+  title: 'Modal/Confirm',
+  component: ConfirmModal,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    text: '테스트 입니다.',
+    onConfrim: () => {},
+    currentTheme: ThemeFlag.light,
+  },
+}

client/src/components/Modal/ViewerModal/ViewerModal.stories.tsx

@@ -16,7 +16,7 @@ export const Default: Story = {
   args: {
     top: 0,
     left: 0,
-    nickname: 'test',
+    nickname: 'JMH',
     authority: 'viewer',
     target: 'viewer',
     onCancle: () => {},