From 18e458c1898c1144a90349a897ee5d4dc4f505a7 Mon Sep 17 00:00:00 2001
From: Sungwoo Park <codest99@gmail.com>
Date: Sat, 30 May 2020 11:26:13 +0900
Subject: [PATCH 1/4] =?UTF-8?q?chore:=20youtube=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../YoutubeModal/YoutubeModal.stories.tsx     | 41 +++++++++++
 .../molecules/YoutubeModal/YoutubeModal.tsx   | 69 +++++++++++++++++++
 .../molecules/YoutubeModal/IYoutubeModal.ts   |  9 +++
 3 files changed, 119 insertions(+)
 create mode 100644 src/frameworks/web/components/molecules/YoutubeModal/YoutubeModal.stories.tsx
 create mode 100644 src/frameworks/web/components/molecules/YoutubeModal/YoutubeModal.tsx
 create mode 100644 src/interfaces/frameworks/web/components/molecules/YoutubeModal/IYoutubeModal.ts

diff --git a/src/frameworks/web/components/molecules/YoutubeModal/YoutubeModal.stories.tsx b/src/frameworks/web/components/molecules/YoutubeModal/YoutubeModal.stories.tsx
new file mode 100644
index 0000000..d27960c
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/frameworks/web/components/molecules/YoutubeModal/YoutubeModal.tsx b/src/frameworks/web/components/molecules/YoutubeModal/YoutubeModal.tsx
new file mode 100644
index 0000000..3b3cb9c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/interfaces/frameworks/web/components/molecules/YoutubeModal/IYoutubeModal.ts b/src/interfaces/frameworks/web/components/molecules/YoutubeModal/IYoutubeModal.ts
new file mode 100644
index 0000000..30ef996
--- /dev/null
+++ b/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;
+}

From df6c3191894ace48d92bc6d65d4f440f09c1d248 Mon Sep 17 00:00:00 2001
From: Sungwoo Park <codest99@gmail.com>
Date: Sat, 30 May 2020 11:40:55 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=EB=9E=9C=EB=94=A9=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=EC=9C=A0=ED=8A=9C=EB=B8=8C=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=9D=84=EC=9A=B0=EA=B8=B0,=20=EC=83=81?=
 =?UTF-8?q?=EB=8B=A8=20=EB=A9=94=EB=89=B4=20=EA=B0=95=EC=97=B0=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/organisms/Header/Header.tsx    | 50 ++++++++++---------
 .../organisms/Landing/LandingAbout.tsx        |  2 +-
 .../web/components/pages/Landing/Landing.tsx  | 12 +++++
 3 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/src/frameworks/web/components/organisms/Header/Header.tsx b/src/frameworks/web/components/organisms/Header/Header.tsx
index 6417811..c20adf9 100644
--- a/src/frameworks/web/components/organisms/Header/Header.tsx
+++ b/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>
+        */}
     </>
   );
 }
diff --git a/src/frameworks/web/components/organisms/Landing/LandingAbout.tsx b/src/frameworks/web/components/organisms/Landing/LandingAbout.tsx
index 3aa49e3..7ea4ba3 100644
--- a/src/frameworks/web/components/organisms/Landing/LandingAbout.tsx
+++ b/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>
diff --git a/src/frameworks/web/components/pages/Landing/Landing.tsx b/src/frameworks/web/components/pages/Landing/Landing.tsx
index 99f1e30..25fde3f 100644
--- a/src/frameworks/web/components/pages/Landing/Landing.tsx
+++ b/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>
   );
 }

From 24e57e70b72d3de40a1522d1061feb8a93285260 Mon Sep 17 00:00:00 2001
From: Sungwoo Park <codest99@gmail.com>
Date: Sat, 30 May 2020 13:23:10 +0900
Subject: [PATCH 3/4] =?UTF-8?q?chore:=20=EC=8B=A4=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=A7=81=ED=81=AC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frameworks/web/components/pages/Landing/Landing.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frameworks/web/components/pages/Landing/Landing.tsx b/src/frameworks/web/components/pages/Landing/Landing.tsx
index 25fde3f..be68788 100644
--- a/src/frameworks/web/components/pages/Landing/Landing.tsx
+++ b/src/frameworks/web/components/pages/Landing/Landing.tsx
@@ -91,7 +91,7 @@ export default function Landing(): React.ReactElement {
       <YoutubeModal
         isOpen={isYoutubeModalOpened}
         onClose={handleYoutubeModalClose}
-        youtubeLink="https://www.youtube.com/embed/6sKjutgEMzk"
+        youtubeLink="https://www.youtube.com/embed/xQ4teqTpWzI"
       />
     </div>
   );

From c9b8b09c4c414ed71426850701cd103cf736b563 Mon Sep 17 00:00:00 2001
From: Sungwoo Park <codest99@gmail.com>
Date: Mon, 1 Jun 2020 19:52:14 +0900
Subject: [PATCH 4/4] =?UTF-8?q?chore:=20landing=EC=97=90=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/components/pages/Landing/Landing.tsx         | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/frameworks/web/components/pages/Landing/Landing.tsx b/src/frameworks/web/components/pages/Landing/Landing.tsx
index be68788..99f1e30 100644
--- a/src/frameworks/web/components/pages/Landing/Landing.tsx
+++ b/src/frameworks/web/components/pages/Landing/Landing.tsx
@@ -7,7 +7,6 @@ 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';
@@ -21,8 +20,6 @@ export default function Landing(): React.ReactElement {
   const [modalTitle, setModalTitle] = useState('');
   const [modalDescription, setModalDescription] = useState('');
 
-  const [isYoutubeModalOpened, setYoutubeModalOpened] = useState(true);
-
   const handleModalClose = () => {
     setModalOpened(false);
 
@@ -34,10 +31,6 @@ 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 !== '') {
@@ -88,11 +81,6 @@ export default function Landing(): React.ReactElement {
           dangerouslySetInnerHTML={{ __html: modalDescription }}
         />
       </Modal>
-      <YoutubeModal
-        isOpen={isYoutubeModalOpened}
-        onClose={handleYoutubeModalClose}
-        youtubeLink="https://www.youtube.com/embed/xQ4teqTpWzI"
-      />
     </div>
   );
 }