From 18e458c1898c1144a90349a897ee5d4dc4f505a7 Mon Sep 17 00:00:00 2001 From: Sungwoo Park 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) => [ +
+
, + ]} +
+ ); +}; 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 ( + + + 소물 로고 +