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;
+}