feat: 랜딩페이지에 유튜브 모달 띄우기, 상단 메뉴 강연 목록 활성화

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