Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply new layout to main page #164

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
+80 −39
Draft

Apply new layout to main page #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 26 additions & 8 deletions src/components/pages/HomePage/HomePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,34 @@ import React from "react";
import Header from "components/templates/Header";
import ZaboList from "components/templates/ZaboList";

import HomePageWrapper from "./HomePage.styled";
import HomePageWrapper, { Container, TopBannerW, TagListW } from "./HomePage.styled";

const HomePage = () => (
<HomePageWrapper className="animated fadeIn">
<Header type="upload" />
<div className="container">
import SearchBar from "components/templates/SearchBar/SearchBar";
import TagList from "components/atoms/TagList/TagList";

const HomePage = () => {
const onTagClick = () => {
return;
};

return (
<HomePageWrapper className="animated fadeIn">
<TopBannerW>
<Container>
<h1>이제 포스터 확인은 자보에서.</h1>
<h3>카이스트의 소식을 바로 알아보세요</h3>
</Container>
</TopBannerW>

<Header type="upload" />
<SearchBar type="upload" scrollHeader expand={false} />
<TagListW>
<TagList type="search" onTagClick={onTagClick} clickedTags={[]} />
</TagListW>
<ZaboList type="main" />
</div>
</HomePageWrapper>
);
</HomePageWrapper>
);
};

HomePage.propTypes = {};

Expand Down
85 changes: 54 additions & 31 deletions src/components/pages/HomePage/HomePage.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,26 @@
import styled from "styled-components";
import styled, { css } from "styled-components";
import { media } from "lib/utils/style";

import ContainerAtom from "components/atoms/Container";

/* ============ Wrapper ============ */
const HomePageWrapper = styled.div`
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;

transition: 0.4s;
animation-duration: 0.3s;

/*
* Poster Layout
* poster = 240px, column space = 10px
* .container padding = 0px 20px
* num of posters: total width
* 1: 240px
* 2: 490px => 530 ~
* 3: 760px => 800 ~
* 4: 1020px => 1060 ~
*/

/* @media (min-width: 0px) and (max-width: 530px) {
!* .container width auto with padding *!
}
@media (min-width: 530px) and (max-width: 800px) {
.container {
width: 530px;
}
}
@media (min-width: 800px) and (max-width: 1060px) {
.container {
width: 800px;
}
}
@media (min-width: 1060px) {
.container {
width: 1060px;
}
}*/
`;

export default HomePageWrapper;

export const Container = styled(ContainerAtom)`
max-width: 1084px;
`;

/* ============ Header ============ */
export const Header = styled.div`
display: flex;
Expand Down Expand Up @@ -69,3 +52,43 @@ Header.AddButton = styled.button`
height: 40px;
background-color: rgb(27, 50, 65);
`;

export const TopBannerW = styled.div`
width: 100%;
margin-top: -40px;

display: flex;
flex-direction: column;
${Container} {
flex-direction: column;
}

h1,
h3 {
font-size: 20px;
color: #143441;
}
h1 {
margin: 105px 0 12px;
font-weight: 800;
}
h3 {
margin: 12px 0 24px;
font-weight: 300;
}
${media.tablet(css`
h1 {
margin: 105px 0 12px;
font-size: 32px;
}
h3 {
margin: 12px 0 24px;
font-size: 32px;
}
`)};
`;

export const TagListW = styled.div`
display: flex;
flex-wrap: wrap;
`;