+
+
+
+
+
+ 홈
+
+
+
+
+
+
+
+ Shorts
+
+
+
+
+
+
+
+ 구독
+
+
+
+
+
+
+
+ Originals
+
+
+
+
+
+
+
+ YouTube Music
+
+
+
+
+
+
+
+
+
+ 보관함
+
+
+
+
+
+
+
+ 시청기록
+
+
+
+
+
+
+
+ 내 동영상
+
+
+
+
+
+
+
+ 나중에 볼 동영상
+
+
+
+
+
+
+
+
+
+ 설정
+
+
+
+
+
+
+
+ 신고기록
+
+
+
+
+
+
+
+ 고객센터
+
+
+
+
+
+
+
+ 의견 보내기
+
+
+
+
+
+ © 2023 Google LLC, Sundar Pichai, 1600 Amphitheatre Parkway, Mountain
+ View CA 94043, USA, 0807-882-594 (무료),
+ yt-support-solutions-kr@google.com, 호스팅: Google LLC, 사업자정보,
+ 불법촬영물 신고
+
+ 크리에이터들이 유튜브 상에 게시, 태그 또는 추천한 상품들은 판매자들의
+ 약관에 따라 판매됩니다. 유튜브는 이러한 제품들을 판매하지 않으며, 그에
+ 대한 책임을 지지 않습니다.
+
+
+ )
+}
+
+export default SideBar
diff --git a/src/components/SideBar/style.js b/src/components/SideBar/style.js
new file mode 100644
index 0000000..921ea36
--- /dev/null
+++ b/src/components/SideBar/style.js
@@ -0,0 +1,61 @@
+import styled from 'styled-components'
+
+export const MenuSection = styled.div`
+ position: fixed;
+ z-index: 99;
+ top: 56px;
+ left: 0;
+ width: 240px;
+ height: 100vh;
+ padding: 0 12px;
+ background-color: #fff;
+ .copyRight {
+ padding: 15px 0;
+ color: rgba(0, 0, 0, 0.5);
+ font-size: 0.8rem;
+ line-height: 1.3rem;
+ }
+ &.close {
+ display: none;
+ }
+`
+
+export const MenuListWrapper = styled.ul`
+ padding: 15px 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ a {
+ display: block;
+ border-radius: 10px;
+ svg {
+ width: 24px;
+ margin-right: 24px;
+ .activeIcon {
+ fill: none;
+ }
+ .inactiveIcon {
+ fill: #000;
+ }
+ }
+ &.active {
+ svg {
+ .activeIcon {
+ fill: #000;
+ }
+ .inactiveIcon {
+ fill: none;
+ }
+ }
+ }
+ &:hover {
+ font-weight: 700;
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+ }
+`
+
+export const MenuItemWrapper = styled.div`
+ display: flex;
+ align-items: center;
+ height: 40px;
+ padding: 0 10px;
+`
diff --git a/src/components/Video/ChannelInfoContainer.jsx b/src/components/Video/ChannelInfoContainer.jsx
new file mode 100644
index 0000000..38da54d
--- /dev/null
+++ b/src/components/Video/ChannelInfoContainer.jsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react'
+import styled from 'styled-components'
+import { getChannelData } from '../../api/axios'
+
+export default function ChannelInfoContainer({ videoItemData }) {
+ const [channelItemData, setChannelItemData] = useState()
+
+ useEffect(() => {
+ const fetchData = async () => {
+ if (videoItemData) {
+ const channelId = videoItemData?.snippet?.channelId
+ setChannelItemData(...(await getChannelData(channelId)))
+ }
+ }
+ fetchData()
+ }, [videoItemData])
+
+ return (
+