feat: Youtube Modal 추가, 행사 당일 페이지 수정

src/frameworks/web/components/molecules/YoutubeModal/YoutubeModal.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import { State, Store } from '@sambego/storybook-state';
+import Button from 'frameworks/web/components/atoms/Button/Button';
+import YoutubeModal from 'frameworks/web/components/molecules/YoutubeModal/YoutubeModal';
+
+export default {
+  title: 'YoutubeModal',
+  decorators: [withKnobs],
+};
+
+const store = new Store({
+  isModalOpen: false,
+});
+
+const handleButtonClick = () => {
+  store.set({ isModalOpen: !store.get('isModalOpen') });
+};
+
+const handleModalClose = () => {
+  store.set({ isModalOpen: false });
+};
+
+export const SimpleYoutubeModal = () => {
+  const youtubeLink = text('유튜브 링', 'https://www.youtube.com/embed/6sKjutgEMzk');
+
+  return (
+    <State store={store}>
+      {(state) => [
+        <div>
+          <Button type="default" label="LectureModal 열기" onClick={handleButtonClick} isPrimary />
+          <YoutubeModal
+            isOpen={state.isModalOpen}
+            onClose={handleModalClose}
+            youtubeLink={youtubeLink}
+          />
+        </div>,
+      ]}
+    </State>
+  );
+};

src/frameworks/web/components/molecules/YoutubeModal/YoutubeModal.tsx

@@ -0,0 +1,69 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import styled from 'styled-components';
+import React from 'react';
+
+import ContentsBox from 'frameworks/web/components/atoms/ContentsBox/ContentsBox';
+import Button from 'frameworks/web/components/atoms/Button/Button';
+import SomulLogo from 'assets/logo/logo.svg';
+import {
+  IYoutubeModal,
+  IYoutubeModalBackground,
+} from 'interfaces/frameworks/web/components/molecules/YoutubeModal/IYoutubeModal';
+
+const ModalBackground = styled.div`
+  display: ${(props: IYoutubeModalBackground) => (props.isOpen ? 'flex' : 'none')};
+  position: fixed;
+  z-index: 5;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0, 0, 0, 0.6);
+  align-items: center;
+  justify-content: center;
+`;
+
+const CardContainer = styled(ContentsBox)`
+  width: 730px;
+  padding: 64px 45px;
+  background-color: white;
+  margin: 0 auto;
+  text-align: center;
+`;
+
+export default function LectureModal({
+  isOpen = false,
+  onClose,
+  youtubeLink,
+}: IYoutubeModal): React.ReactElement {
+  // "https://www.youtube.com/embed/6sKjutgEMzk"
+  return (
+    <ModalBackground isOpen={isOpen}>
+      <CardContainer isDarkBackground>
+        <img
+          src={SomulLogo}
+          alt="소물 로고"
+          style={{ width: '112.5px', height: '20px', marginBottom: '24px' }}
+        />
+        <iframe
+          title="유튜브 라이브"
+          width="640"
+          height="360"
+          src={youtubeLink}
+          frameBorder="0"
+          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+        <Button
+          type="field"
+          label="닫기"
+          onClick={() => onClose()}
+          isPrimary
+          style={{ marginTop: '40px' }}
+        />
+      </CardContainer>
+    </ModalBackground>
+  );
+}

src/frameworks/web/components/organisms/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { Visible, Hidden, ScreenClassRender } from 'react-grid-system';
 import { NavLink, useHistory, useLocation } from 'react-router-dom';
@@ -14,8 +14,6 @@ import * as ROUTES from 'utils/routes';
 import SomulLogo from 'assets/logo/logo.svg';
 import HamburgerMenu from 'assets/icon/mobile-menu.svg';
 import useCurrentSession from 'frameworks/web/hooks/CurrentSessionHook';
-import theme from 'theme';
-import Modal from 'frameworks/web/components/molecules/Modal/Modal';
 
 const HeaderContainer = styled.div`
   position: fixed;
@@ -83,7 +81,7 @@ export const PAGES = {
 
 export default function Header(): React.ReactElement {
   const [isLoaded, currentSession] = useCurrentSession();
-  const [isPreparingModalOpened, setPreparingModalOpened] = useState(false);
+  // const [isPreparingModalOpened, setPreparingModalOpened] = useState(false);
   const history = useHistory();
   const { pathname } = useLocation();
 
@@ -106,9 +104,11 @@ export default function Header(): React.ReactElement {
     }
   }, [isLoaded, pathname, currentSession, history]);
 
+  /*
   const handleClickInfo = () => {
     setPreparingModalOpened(true);
   };
+   */
 
   const handleClickSideMenu = () => {
     //    TODO
@@ -144,9 +144,9 @@ export default function Header(): React.ReactElement {
                     <a href="/?goto=landingAbout" style={{ textDecoration: 'none' }}>
                       <Label type="H5">소물이란?</Label>
                     </a>
-                    <Label type="H5" onClick={handleClickInfo}>
-                      강연정보
-                    </Label>
+                    <NavLink to={ROUTES.LECTURE} style={{ textDecoration: 'none' }}>
+                      <Label type="H5">강연정보</Label>
+                    </NavLink>
                     <NavLink to={ROUTES.APPLY_SPEAKER} style={{ textDecoration: 'none' }}>
                       <Label type="H5">참가신청</Label>
                     </NavLink>
@@ -203,23 +203,25 @@ export default function Header(): React.ReactElement {
           )}
         />
       </HeaderContainer>
-      <Modal
-        type="empty"
-        isOpen={isPreparingModalOpened}
-        onClose={() => setPreparingModalOpened(false)}
-      >
-        <img src={SomulLogo} alt="소물 로고" style={{ width: '112.5px', height: '20px' }} />
-        <Label type="H4" color={theme.color.primary.Azure} style={{ padding: '48px 0 16px 0' }}>
-          곧 공개됩니다!
-        </Label>
-        <Label
-          type="P1"
-          style={{ paddingBottom: '48px' }}
-          dangerouslySetInnerHTML={{
-            __html: '어떤 강연이 준비되고 있을까요?<br>강연은 5월 29일 금요일날 공개됩니다!',
-          }}
-        />
-      </Modal>
+      {/*
+        <Modal
+          type="empty"
+          isOpen={isPreparingModalOpened}
+          onClose={() => setPreparingModalOpened(false)}
+        >
+          <img src={SomulLogo} alt="소물 로고" style={{ width: '112.5px', height: '20px' }} />
+          <Label type="H4" color={theme.color.primary.Azure} style={{ padding: '48px 0 16px 0' }}>
+            곧 공개됩니다!
+          </Label>
+          <Label
+            type="P1"
+            style={{ paddingBottom: '48px' }}
+            dangerouslySetInnerHTML={{
+              __html: '어떤 강연이 준비되고 있을까요?<br>강연은 5월 29일 금요일날 공개됩니다!',
+            }}
+          />
+        </Modal>
+        */}
     </>
   );
 }

src/frameworks/web/components/organisms/Landing/LandingAbout.tsx

@@ -72,7 +72,7 @@ export default function LandingAbout(): React.ReactElement {
                 >
                   올해는 COVID-19 바이러스(이하 코로나)로 인하여 온라인으로 진행합니다.
                   {sClass === 'md' ? '\n' : ' '}
-                  5월 29일 오후 2시에 공개될 강연 리스트(유튜브 링크)로 여러분들을 찾아뵙겠습니다.
+                  5월 30일 오후 2시에 공개될 강연 리스트(유튜브 링크)로 여러분들을 찾아뵙겠습니다.
                 </Label>
               </Col>
             </Row>

src/frameworks/web/components/pages/Landing/Landing.tsx

@@ -7,6 +7,7 @@ import LandingSponsor from 'frameworks/web/components/organisms/Landing/LandingS
 import Label from 'frameworks/web/components/atoms/Label/Label';
 import theme from 'theme';
 import Modal from 'frameworks/web/components/molecules/Modal/Modal';
+import YoutubeModal from 'frameworks/web/components/molecules/YoutubeModal/YoutubeModal';
 
 import SomulLogo from 'assets/logo/logo.svg';
 import { useLocation, useHistory } from 'react-router';
@@ -20,6 +21,8 @@ export default function Landing(): React.ReactElement {
   const [modalTitle, setModalTitle] = useState('');
   const [modalDescription, setModalDescription] = useState('');
 
+  const [isYoutubeModalOpened, setYoutubeModalOpened] = useState(true);
+
   const handleModalClose = () => {
     setModalOpened(false);
 
@@ -31,6 +34,10 @@ export default function Landing(): React.ReactElement {
     window.localStorage.clear();
   };
 
+  const handleYoutubeModalClose = () => {
+    setYoutubeModalOpened(false);
+  };
+
   useEffect(() => {
     const gotoFromQueryString = new URLSearchParams(window.location.search).get('goto');
     if (gotoFromQueryString && gotoFromQueryString !== '') {
@@ -81,6 +88,11 @@ export default function Landing(): React.ReactElement {
           dangerouslySetInnerHTML={{ __html: modalDescription }}
         />
       </Modal>
+      <YoutubeModal
+        isOpen={isYoutubeModalOpened}
+        onClose={handleYoutubeModalClose}
+        youtubeLink="https://www.youtube.com/embed/6sKjutgEMzk"
+      />
     </div>
   );
 }

src/interfaces/frameworks/web/components/molecules/YoutubeModal/IYoutubeModal.ts

@@ -0,0 +1,9 @@
+export interface IYoutubeModal {
+  youtubeLink: string;
+  isOpen: boolean;
+  onClose: Function;
+}
+
+export interface IYoutubeModalBackground {
+  isOpen: boolean;
+}