From 4592b1b9456839613de816a730382b0c3d80b3a4 Mon Sep 17 00:00:00 2001 From: Sungwoo Park Date: Wed, 27 May 2020 22:37:31 +0900 Subject: [PATCH 1/3] =?UTF-8?q?chore:=20LectureCard=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=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 --- .../LectureCard/LectureCard.stories.tsx | 27 ++++++++++ .../molecules/LectureCard/LectureCard.tsx | 53 +++++++++++++++++++ .../molecules/LectureCard/ILectureCard.ts | 5 ++ 3 files changed, 85 insertions(+) create mode 100644 src/frameworks/web/components/molecules/LectureCard/LectureCard.stories.tsx create mode 100644 src/frameworks/web/components/molecules/LectureCard/LectureCard.tsx create mode 100644 src/interfaces/frameworks/web/components/molecules/LectureCard/ILectureCard.ts diff --git a/src/frameworks/web/components/molecules/LectureCard/LectureCard.stories.tsx b/src/frameworks/web/components/molecules/LectureCard/LectureCard.stories.tsx new file mode 100644 index 0000000..8d3c439 --- /dev/null +++ b/src/frameworks/web/components/molecules/LectureCard/LectureCard.stories.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { withKnobs, text } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; +import theme from 'theme'; +import LectureCard from 'frameworks/web/components/molecules/LectureCard/LectureCard'; + +export default { + title: 'Lecture Card', + decorators: [withKnobs], +}; + +export const SimpleLectureCard = () => { + const title = text('Card Title', '프로그래머, 인공지능 시대의 꽤 괜찮은 직업이지 아니한가?'); + const speaker = text('Card Speaker', '박성우'); + + return ( +
+ +
+ ); +}; + +SimpleLectureCard.story = { + parameters: { + backgrounds: [{ name: 'Snow', value: theme.color.secondary.Snow, default: true }], + }, +}; diff --git a/src/frameworks/web/components/molecules/LectureCard/LectureCard.tsx b/src/frameworks/web/components/molecules/LectureCard/LectureCard.tsx new file mode 100644 index 0000000..7d918f1 --- /dev/null +++ b/src/frameworks/web/components/molecules/LectureCard/LectureCard.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import styled from 'styled-components'; +import theme from 'theme'; + +import ContentsBox from 'frameworks/web/components/atoms/ContentsBox/ContentsBox'; +import Label from 'frameworks/web/components/atoms/Label/Label'; +import { ILectureCard } from 'interfaces/frameworks/web/components/molecules/LectureCard/ILectureCard'; + +const CardContainer = styled(ContentsBox)` + width: auto; + height: auto; + padding: 40px 48px; + background-color: white; + text-align: center; + cursor: pointer; + @media (hover: hover) { + &:hover { + box-shadow: 0 5px 30px 0 rgba(155, 155, 155, 0.4); + } + } +`; + +const SpeakerContainer = styled.div` + display: flex; + margin-top: 24px; + width: 100%; + justify-content: center; +`; + +export default function LectureCard({ + title, + speaker, + onCardClick, +}: ILectureCard): React.ReactElement { + return ( + // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions +
onCardClick()}> + + + + + + + +
+ ); +} diff --git a/src/interfaces/frameworks/web/components/molecules/LectureCard/ILectureCard.ts b/src/interfaces/frameworks/web/components/molecules/LectureCard/ILectureCard.ts new file mode 100644 index 0000000..d1012a1 --- /dev/null +++ b/src/interfaces/frameworks/web/components/molecules/LectureCard/ILectureCard.ts @@ -0,0 +1,5 @@ +export interface ILectureCard { + title: string; + speaker: string; + onCardClick: Function; +} From c38ee1af4529bd3235aeed1c930cd68a85031d38 Mon Sep 17 00:00:00 2001 From: Sungwoo Park Date: Thu, 28 May 2020 00:56:57 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EA=B0=95=EC=97=B0=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 4 + src/assets/icon/search.svg | 4 + src/assets/illust/list-illlustration.svg | 138 ++++++++++++++++++ src/assets/logo/logo-white.svg | 28 ++++ .../molecules/LectureCard/LectureCard.tsx | 4 +- .../components/organisms/Header/Header.tsx | 2 +- .../organisms/Lecture/LectureList.tsx | 52 +++++++ .../web/components/pages/Lecture/Lecture.tsx | 83 +++++++++++ .../molecules/LectureCard/ILectureCard.ts | 1 + .../organisms/Lecture/ILectureList.ts | 5 + src/utils/routes.ts | 2 + 11 files changed, 321 insertions(+), 2 deletions(-) create mode 100644 src/assets/icon/search.svg create mode 100644 src/assets/illust/list-illlustration.svg create mode 100644 src/assets/logo/logo-white.svg create mode 100644 src/frameworks/web/components/organisms/Lecture/LectureList.tsx create mode 100644 src/frameworks/web/components/pages/Lecture/Lecture.tsx create mode 100644 src/interfaces/frameworks/web/components/organisms/Lecture/ILectureList.ts diff --git a/src/App.tsx b/src/App.tsx index 01641da..0c159ec 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,6 +14,7 @@ import LandingPage from 'frameworks/web/components/pages/Landing/Landing'; import SignInPage from 'frameworks/web/components/pages/SignIn/SignIn'; import SignUpPage from 'frameworks/web/components/pages/SignUp/SignUp'; import StatusPage from 'frameworks/web/components/pages/StatusPage/StatusPage'; +import Lecture from 'frameworks/web/components/pages/Lecture/Lecture'; import apolloClient, { initStorage } from 'frameworks/web/apollo'; import * as ROUTES from 'utils/routes'; @@ -52,6 +53,9 @@ function App() { + + +