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

[#7] 공통 컴포넌트(Header, Footer, ScrollFloatBtn) 구현, [#9] 랜딩페이지 구현 #12

Merged
merged 12 commits into from
Dec 22, 2022
Merged

[#7] 공통 컴포넌트(Header, Footer, ScrollFloatBtn) 구현, [#9] 랜딩페이지 구현 #12

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c56d105
:bento: Global Icon Assets 수정
youngminss Dec 21, 2022
c0e704c
:lipstick: Header - GNB 컴포넌트 UI 구현
youngminss Dec 21, 2022
7a0f1d6
:lipstick: UnorderList, LinkWrapper, BackgroundImageBox 스타일 컴포넌트 생성, …
youngminss Dec 21, 2022
8bc97a8
:art: 린트 룰(consistent-type-definitions, strict-boolean-expressions) 수정
youngminss Dec 21, 2022
6340b87
:bento: Pretendard Font Assets 추가
youngminss Dec 21, 2022
1da18b5
:bento: next13 localFont 설정 후 폰트 적용(in. theme.ts)
youngminss Dec 21, 2022
738876e
:lipstick: Typography 공통 컴포넌트 추가
youngminss Dec 21, 2022
482fcde
:adhesive_bandage: 공통 StyledLayout 컴포넌트 - BoxFlexColumnCenter 네이밍으로 변경
youngminss Dec 21, 2022
b0d5e3c
:lipstick: Footer 컴포넌트 UI 구현
youngminss Dec 21, 2022
2719e7b
:lipstick: 공통 StyledLayout - FlexBox, SubMaxContainer 추가, BoxFlexColu…
youngminss Dec 21, 2022
8ec9bee
:lipstick: 랜딩 페이지 1차 구현
youngminss Dec 21, 2022
92b92a7
:wrench: next.config.js - styled-components 설정을 complier 를 통해 설정, swc…
youngminss Dec 21, 2022
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
6 changes: 3 additions & 3 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { GlobalStyle, theme } from 'styles';
const RootLayout = ({ children }: { children: React.ReactNode }) => {
return (
<html>
<head />
<head lang="ko" />
<body>
<Provider>
<QueryProvider>
Expand All @@ -33,6 +33,6 @@ export default RootLayout;

const ChildrenContainer = styled.main`
position: relative;
min-height: calc(100vh - 160px);
font-size: 2rem;
min-height: calc(100vh - 258px);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이렇게 설정해둔 이유가 있나요 ~? 궁금

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음, 어디까지나 랜딩페이지 만 구현되었다는 전제하지만

현재 디자인 시안을 기준으로 랜딩페이지의 Header, Footer 를 제외한 Contents 영역의 컨텐츠가 많지가 않아서, 컨텐츠를 기준으로만 height 를 설정하면

Footer 의 경우, 현재 디자인 시안처럼 원페이지 형태로 딱 이쁘게 안떨어져서 나오더라구요 ~
Footer 가 원페이지에서 하단에 딱 걸치는 형태가 아니라, Contents 가 끝나는 시점 바로 밑에 배치된다는 !

이해가 가시나요 ~ ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음, 어디까지나 랜딩페이지 만 구현되었다는 전제하지만

현재 디자인 시안을 기준으로 랜딩페이지의 Header, Footer 를 제외한 Contents 영역의 컨텐츠가 많지가 않아서, 컨텐츠를 기준으로만 height 를 설정하면

Footer 의 경우, 현재 디자인 시안처럼 원페이지 형태로 딱 이쁘게 안떨어져서 나오더라구요 ~ Footer 가 원페이지에서 하단에 딱 걸치는 형태가 아니라, Contents 가 끝나는 시점 바로 밑에 배치된다는 !

이해가 가시나요 ~ ?

아하 아이갓잇..! 못난이 UI를 방지하기 위한 거였군뇨.. 신기하네욥~

margin-top: 78px;
`;
38 changes: 36 additions & 2 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,43 @@
'use client';

import { StyledLayout } from 'components/shared';
import styled from 'styled-components';
import { StyledLayout, Typography } from 'components/shared';

const Root = () => {
return <StyledLayout.BoxFlexCenter>Root Page 👋🏻</StyledLayout.BoxFlexCenter>;
return (
<Container display={'flex'} flexDirection={'column'} alignItems={'center'} justifyContent={'center'}>
<Typography variant="h2" aggressive="headline_001" align="center" lineHeight="64px" padding="0 0 24px 0">
리필스테이션,
<br />
OOO서비스에서 알리세요!
</Typography>
<Typography variant="p" aggressive="body_multiline_001" align="center" padding="0 0 36px 0">
빠르고 간편하게 가게 정보와 판매상품을 등록하고
<br />더 많은 사람에게 리필스테이션의 가치를 전해보세요.
</Typography>

<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '240px',
height: '50px',
borderRadius: '8px',
backgroundColor: '#0064FF',
color: '#FFFFFF',
fontSize: '16px',
fontWeight: 'medium',
}}
>
Comment on lines +19 to +32
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 알았어 준다고요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 진짜 정성이네..

입점 신청하기
</div>
</Container>
);
};

export default Root;

const Container = styled(StyledLayout.FlexBox)`
padding-top: 122px;
`;