onButtonClicked!()} />}
{optionalString && {optionalString}}
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..f3b6001
--- /dev/null
+++ b/src/frameworks/web/components/molecules/LectureCard/LectureCard.tsx
@@ -0,0 +1,55 @@
+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;
+ transition: all 0.2s;
+ @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,
+ style,
+}: 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/frameworks/web/components/organisms/Header/Header.tsx b/src/frameworks/web/components/organisms/Header/Header.tsx
index 21b3748..6417811 100644
--- a/src/frameworks/web/components/organisms/Header/Header.tsx
+++ b/src/frameworks/web/components/organisms/Header/Header.tsx
@@ -78,7 +78,7 @@ export const PAGES = {
ROUTES.PROFILE_WITHDRAW,
ROUTES.STATUS,
],
- ALWAYS: [ROUTES.HOME],
+ ALWAYS: [ROUTES.HOME, ROUTES.LECTURE],
};
export default function Header(): React.ReactElement {
diff --git a/src/frameworks/web/components/organisms/Lecture/LectureList.tsx b/src/frameworks/web/components/organisms/Lecture/LectureList.tsx
new file mode 100644
index 0000000..b87f67e
--- /dev/null
+++ b/src/frameworks/web/components/organisms/Lecture/LectureList.tsx
@@ -0,0 +1,52 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { Row, Col } from 'react-grid-system';
+
+import { ILectureInfo } from 'interfaces/frameworks/web/components/organisms/Lecture/ILectureList';
+import LectureCard from '../../molecules/LectureCard/LectureCard';
+
+const LectureListContainer = styled.div`
+ width: 100%;
+ max-width: 1280px;
+ padding: 48px 85px 90px 85px;
+`;
+
+export default function LectureList(): React.ReactElement {
+ const lectureArray: ILectureInfo[] = [];
+
+ // TODO: 강연 정보를 불러와야 함
+ for (let i = 1; i <= 10; i += 1) {
+ lectureArray.push({ title: `제목 ${i}`, speaker: '테스트' });
+ }
+
+ const onLectureClicked = (idx: number) => {
+ // TODO: 렉쳐카드 클릭 시 모달이 나오는 함수를 구현해야 함
+ console.log(idx);
+ };
+
+ function LectureColContainer({ col }: any): React.ReactElement {
+ const listElement: ReactNode[] = [];
+ lectureArray.forEach((lecture, i) => {
+ if (i % 3 === col) {
+ listElement.push(
+ onLectureClicked(i)}
+ style={{ marginBottom: '30px' }}
+ />,
+ );
+ }
+ });
+ return {listElement};
+ }
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/frameworks/web/components/pages/Lecture/Lecture.tsx b/src/frameworks/web/components/pages/Lecture/Lecture.tsx
new file mode 100644
index 0000000..d111b8b
--- /dev/null
+++ b/src/frameworks/web/components/pages/Lecture/Lecture.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Row, Col } from 'react-grid-system';
+
+import theme from 'theme';
+import SomulLogo from 'assets/logo/logo-white.svg';
+import SearchButtonAsset from 'assets/icon/search.svg';
+import ListIllustAsset from 'assets/illust/list-illlustration.svg';
+import Label from 'frameworks/web/components/atoms/Label/Label';
+import TextField from 'frameworks/web/components/atoms/TextField/TextField';
+import LectureList from 'frameworks/web/components/organisms/Lecture/LectureList';
+
+const LectureHeader = styled.div`
+ margin-top: 80px;
+ padding: 23px 0;
+ display: flex;
+ justify-content: center;
+ background-color: ${theme.color.primary.Azure};
+`;
+
+const LectureHeaderContainer = styled(Row)`
+ width: 100%;
+ max-width: 1280px;
+ padding: 0 85px;
+`;
+
+const LectureHeaderTitle = styled.div`
+ display: flex;
+ margin-bottom: 38px;
+`;
+
+const ListIllust = styled.img`
+ width: 240px;
+ height: 174px;
+`;
+
+const LectureListContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ background-color: ${theme.color.secondary.Snow};
+`;
+
+export default function Lecture(): React.ReactElement {
+ const [searchText, setSearchText] = useState('');
+ const handleSearch = () => {
+ console.log(searchText);
+ // TODO : 검색 로직 구현
+ };
+ return (
+ <>
+
+
+
+
+ 
+
+
+ setSearchText(search)}
+ isButton
+ buttonSrc={SearchButtonAsset}
+ onButtonClicked={() => handleSearch()}
+ style={{ width: 'auto' }}
+ />
+
+
+
+
+
+
+
+
+
+
+ );
+}
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..04d1adf
--- /dev/null
+++ b/src/interfaces/frameworks/web/components/molecules/LectureCard/ILectureCard.ts
@@ -0,0 +1,6 @@
+export interface ILectureCard {
+ title: string;
+ speaker: string;
+ onCardClick: Function;
+ style?: object;
+}
diff --git a/src/interfaces/frameworks/web/components/organisms/Lecture/ILectureList.ts b/src/interfaces/frameworks/web/components/organisms/Lecture/ILectureList.ts
new file mode 100644
index 0000000..7f836ce
--- /dev/null
+++ b/src/interfaces/frameworks/web/components/organisms/Lecture/ILectureList.ts
@@ -0,0 +1,5 @@
+export interface ILectureInfo {
+ title: string;
+ speaker: string;
+ // 이후 모달 추가시 인터페이스에 내용 추가
+}
diff --git a/src/utils/routes.ts b/src/utils/routes.ts
index eabd7b6..c8d8f5d 100644
--- a/src/utils/routes.ts
+++ b/src/utils/routes.ts
@@ -18,3 +18,5 @@ export const STATUS = `/status`;
export const PROFILE = `/profile`;
export const PROFILE_WITHDRAW = `${PROFILE}/withdraw`;
+
+export const LECTURE = `/lecture`;