기초 작업들 (추후 live api 연동 작업 필요), index.html 수정

dokdo2013 · Apr 20, 2022 · 2f73bce · 2f73bce
1 parent 15efd5d
commit 2f73bce
Show file tree

Hide file tree

Showing 7 changed files with 211 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^1.1.7",
     "@chakra-ui/react": "^1.8.8",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
@@ -13,6 +14,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-icons": "^3.11.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^0.2.4"
   },

diff --git a/public/index.html b/public/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/leaven.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/leaven.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>LEAVEN Multi Twitch</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/leaven.png b/public/leaven.png
diff --git a/src/App.js b/src/App.js
@@ -1,40 +1,28 @@
-import React from 'react';
-import {
-  ChakraProvider,
-  Box,
-  Text,
-  Link,
-  VStack,
-  Code,
-  Grid,
-  theme,
-} from '@chakra-ui/react';
-import { ColorModeSwitcher } from './ColorModeSwitcher';
-import { Logo } from './Logo';
+import React, { useState } from 'react';
+import { ChakraProvider, theme } from '@chakra-ui/react';
+import Nav from './Components/Nav';
+import Content from './Components/Content';
 
 function App() {
+  const [broadcastMember, setBroadcastMember] = useState(1);
+  const [broadcastMemberList, setBroadcastMemberList] = useState(['vnek1234']);
+  const [selectedUser, setSelectedUser] = useState([
+    'vnek1234',
+    'kimc6h12o6',
+    'gamjagabee',
+  ]);
+
   return (
     <ChakraProvider theme={theme}>
-      <Box textAlign="center" fontSize="xl">
-        <Grid minH="100vh" p={3}>
-          <ColorModeSwitcher justifySelf="flex-end" />
-          <VStack spacing={8}>
-            <Logo h="40vmin" pointerEvents="none" />
-            <Text>
-              Edit <Code fontSize="xl">src/App.js</Code> and save to reload.
-            </Text>
-            <Link
-              color="teal.500"
-              href="https://chakra-ui.com"
-              fontSize="2xl"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Learn Chakra
-            </Link>
-          </VStack>
-        </Grid>
-      </Box>
+      <Nav
+        data={{
+          selectedUser,
+          setSelectedUser,
+          broadcastMember,
+          broadcastMemberList,
+        }}
+      ></Nav>
+      <Content data={{ selectedUser, broadcastMember }}></Content>
     </ChakraProvider>
   );
 }

diff --git a/src/Components/Content.js b/src/Components/Content.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Box, Grid, GridItem, useColorModeValue } from '@chakra-ui/react';
+
+export default function Content({ data }) {
+  console.log(data);
+  let currCnt = 0;
+  const templateRows =
+    'repeat(' + (data.selectedUser.length > 1 ? '2' : '1') + ', 1fr)';
+  const templateColumns =
+    'repeat(' + (parseInt(data.selectedUser.length / 2) + 1) + ', 1fr)';
+  return (
+    <Box
+      minH="calc(100vh - 64px)"
+      bg={useColorModeValue('gray.100', 'gray.900')}
+      style={{ display: 'flex', justifyContent: 'space-between' }}
+    >
+      {data.broadcastMember ? (
+        <>
+          <Box
+            style={{
+              width: 'calc(100vw - 310px)',
+              height: 'calc(100vh - 64px)',
+            }}
+          >
+            <Grid
+              templateRows={templateRows}
+              templateColumns={templateColumns}
+              style={{ height: '100%' }}
+            >
+              {data.selectedUser.map(user => {
+                console.log(currCnt);
+                return (
+                  <GridItem
+                    w="100%"
+                    h="100%"
+                    colSpan={data.selectedUser.length === ++currCnt ? 2 : 1}
+                  >
+                    <iframe
+                      title="embed"
+                      id={'embed_' + user}
+                      src={
+                        'https://player.twitch.tv/?muted=true&channel=' +
+                        user +
+                        '&parent=localhost&parent=multi.leaven.team'
+                      }
+                      class="stream"
+                      allowFullScreen="true"
+                      style={{ width: '100%', height: '100%' }}
+                    ></iframe>
+                  </GridItem>
+                );
+              })}
+            </Grid>
+          </Box>
+          <Box style={{ height: 'calc(100vh - 64px)', width: '340px' }}>
+            <iframe
+              title="chat"
+              scrolling="no"
+              id={'chat-' + data.selectedUser[0] + '-embed'}
+              src={
+                'https://twitch.tv/embed/' +
+                data.selectedUser[0] +
+                '/chat?parent=localhost&parent=multi.leaven.team'
+              }
+              height="100%"
+              width="100%"
+            ></iframe>
+          </Box>
+        </>
+      ) : (
+        <Box
+          style={{
+            width: 'calc(100vw - 310px)',
+            height: 'calc(100vh - 64px)',
+          }}
+        >
+          현재 방송 중인 멤버가 아무도 없어요 ㅠㅠ
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/src/Components/Nav.js b/src/Components/Nav.js
@@ -0,0 +1,53 @@
+import { Box, Flex, Avatar, useColorModeValue } from '@chakra-ui/react';
+
+export default function Nav() {
+  return (
+    <>
+      <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
+        {/* <Box bg="gray.100" px={4}> */}
+        <Flex justifyContent={'center'} style={{ overflow: 'auto' }}>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/e2d1d515-0704-46f4-a093-875e822dfda5-profile_image-50x50.png"
+          ></Avatar>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/318b3b82-96a3-40a9-853f-58306fa245c7-profile_image-50x50.png"
+          ></Avatar>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/e659d2d7-1c77-4406-b48e-922b5898aa21-profile_image-50x50.png"
+          ></Avatar>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/f60572b4-4913-44e4-aea6-365dff4ed1fa-profile_image-50x50.png"
+          ></Avatar>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/1f051c10-1e8c-4a88-9b85-29397be02f2a-profile_image-50x50.png"
+          ></Avatar>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/fe5c0004-5f37-485e-b010-09b1cf489209-profile_image-50x50.png"
+          ></Avatar>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/22c0a1f3-c10e-4efb-8bad-ee3b584dadb4-profile_image-50x50.png"
+          ></Avatar>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/aa34673e-9665-420e-8aa3-17e77afe5336-profile_image-50x50.png"
+          ></Avatar>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/6b972ad9-33f1-4c79-9007-d831c843f311-profile_image-50x50.png"
+          ></Avatar>
+          <Avatar
+            m={2}
+            src="https://static-cdn.jtvnw.net/jtv_user_pictures/b7e08a27-a844-442d-941c-e2e59213c339-profile_image-50x50.png"
+          ></Avatar>
+        </Flex>
+      </Box>
+    </>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1017,7 +1017,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
   integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
@@ -1224,6 +1224,14 @@
   dependencies:
     "@chakra-ui/utils" "1.10.4"
 
+"@chakra-ui/icons@^1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.1.7.tgz#f8c0c44a969c8654b90026b7d375b550c4bfbc49"
+  integrity sha512-YIHxey/B4M2PyFASlHXtAWFyW+tsAtGAChOJ8dsM2kpu1MbVUqm/6nMI1KIFd7Te5IWuNYA75rAHBdLI0Yu61A==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@types/react" "^17.0.15"
+
 "@chakra-ui/[email protected]":
   version "1.1.10"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.1.10.tgz#65bae4086559937d25c728660ae743bce9360cb2"
@@ -2542,6 +2550,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.0.tgz#efcbd41937f9ae7434c714ab698604822d890759"
   integrity sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==
 
+"@types/prop-types@*":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
+
 "@types/q@^1.5.1":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
@@ -2557,6 +2570,15 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
+"@types/react@^17.0.15":
+  version "17.0.44"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
+  integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/[email protected]":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -2569,6 +2591,11 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.1.tgz#d8f1c0d0dc23afad6dc16a9e993a0865774b4065"
   integrity sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -5259,6 +5286,13 @@ hey-listen@^1.0.8:
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
 
+history@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+  integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -7858,6 +7892,21 @@ [email protected]:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
+react-router-dom@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
+  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.3.0"
+
+[email protected]:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
+  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+  dependencies:
+    history "^5.2.0"
+
 [email protected]:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003"