YAPP-Github · say-young516 · Dec 22, 2022 · Dec 21, 2022 · Dec 21, 2022 · Dec 21, 2022
diff --git a/.babelrc.json b/.babelrc.json
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -20,6 +20,8 @@
 	"rules": {
 		"@typescript-eslint/explicit-function-return-type": "off",
 		"@typescript-eslint/triple-slash-reference": "off",
+		"@typescript-eslint/consistent-type-definitions": "off",
+		"@typescript-eslint/strict-boolean-expressions": "off",
 		"react/react-in-jsx-scope": "off",
 		"no-var": "error",
 		"no-unused-vars": ["error", { "args": "none" }],

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,7 +10,7 @@ import { GlobalStyle, theme } from 'styles';
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<html>
-			<head />
+			<head lang="ko" />
 			<body>
 				<Provider>
 					<QueryProvider>
@@ -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);
+	margin-top: 78px;
 `;
diff --git a/app/page.tsx b/app/page.tsx
@@ -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',
+				}}
+			>
+				입점 신청하기
+			</div>
+		</Container>
+	);
 };
 
 export default Root;
+
+const Container = styled(StyledLayout.FlexBox)`
+	padding-top: 122px;
+`;
diff --git a/components/shared/Footer/index.tsx b/components/shared/Footer/index.tsx
@@ -1,10 +1,23 @@
 import React from 'react';
+import { StyledLayout } from 'components/shared';
 import * as S from './styled';
 
 const Footer = () => {
 	return (
 		<S.Container>
-			<S.InnerContainer>Footer</S.InnerContainer>
+			<StyledLayout.SubMaxContainer>
+				<S.InnerWrapper display={'flex'} alignItems={'center'} justifyContent={'space-between'}>
+					<S.LegalDescWrapper>
+						<S.Anchor>서비스 이용약관</S.Anchor>
+						<S.Divider direction="vertical" width="18px" border="0.5px solid #D9D9D9" margin="10px" backgroundColor="#000000" />
+						<S.Anchor>개인정보 처리방침</S.Anchor>
+					</S.LegalDescWrapper>
+					<S.ChannelDescWrapper>
+						<S.Anchor>우리단체 이름자리</S.Anchor>
+						<S.Anchor>자세히보기</S.Anchor>
+					</S.ChannelDescWrapper>
+				</S.InnerWrapper>
+			</StyledLayout.SubMaxContainer>
 		</S.Container>
 	);
 };

diff --git a/components/shared/Footer/styled.ts b/components/shared/Footer/styled.ts
@@ -1,14 +1,42 @@
 import styled from 'styled-components';
+import { FlexBox } from 'components/shared/styled/layout';
 
 export const Container = styled.footer`
 	display: flex;
-	background-color: #d9d9d9;
+	min-height: 180px;
+	border-top: 1px solid ${({ theme }) => theme.colors.gray_002};
+	background-color: ${({ theme }) => theme.colors.gray_000};
 `;
 
-export const InnerContainer = styled.div`
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	min-height: 80px;
+export const InnerWrapper = styled(FlexBox)`
+	padding-top: 24px;
+`;
+
+export const LegalDescWrapper = styled.div`
+	height: 100%;
+`;
+
+type AnchorProps = {};
+
+export const Anchor = styled.a<AnchorProps>``;
+
+type DividerProps = {
+	direction: 'vertical' | 'horizontal';
+	width: string;
+	border: string;
+	margin: string;
+	backgroundColor: string;
+};
+
+export const Divider = styled.span<DividerProps>`
+	width: ${({ width }) => width};
+	border: ${({ border }) => border};
+	margin: ${({ margin }) => margin};
+	background-color: ${({ backgroundColor }) => backgroundColor};
+	transform: ${({ direction }) => (direction === 'horizontal' ? `rotate(0)` : `rotate(90deg)`)};
+`;
+
+export const ChannelDescWrapper = styled(FlexBox)`
+	gap: 22px;
+	height: 100%;
 `;
diff --git a/components/shared/Header/index.tsx b/components/shared/Header/index.tsx
@@ -1,46 +1,31 @@
-import { usePathname } from 'next/navigation';
-import React, { useCallback } from 'react';
+import React from 'react';
+import { StyledLayout } from 'components/shared';
 import * as S from './styled';
 
-const navigations = [
+const userNavigationItems = [
 	{
 		id: 1,
-		path: '/',
-		renderText: 'Home',
-	},
-	{
-		id: 2,
-		path: '/registration',
-		renderText: 'registration',
-	},
-	{
-		id: 3,
-		path: '/mypage',
-		renderText: 'mypage',
+		renderText: '로그인',
 	},
 ] as const;
 
 const Header = () => {
-	const browserPathname = usePathname() as string;
-
-	const isActivedPage = useCallback(
-		(pathname: string) => {
-			return browserPathname === pathname;
-		},
-		[browserPathname],
-	);
-
 	return (
 		<S.Container>
-			<S.GlobalNavigation>
-				{navigations.map((navigation) => {
-					return (
-						<S.NavigationItem key={navigation.id} href={navigation.path} selected={isActivedPage(navigation.path)}>
-							{navigation.renderText}
-						</S.NavigationItem>
-					);
-				})}
-			</S.GlobalNavigation>
+			<StyledLayout.MaxContainer>
+				<S.GlobalNavigation>
+					<S.LogoWrapper href={'/'} hrefLang={'ko'}>
+						<span className="visually-hidden">Pump 사이트 로고 이미지</span>
+						<StyledLayout.ImageBox width="160px" height="58px" backgroundImageSrc="" />
+					</S.LogoWrapper>
+
+					<StyledLayout.UnorderList>
+						{userNavigationItems.map((useNavigationItem) => {
+							return <S.NavigationItem key={useNavigationItem.id}>{useNavigationItem.renderText}</S.NavigationItem>;
+						})}
+					</StyledLayout.UnorderList>
+				</S.GlobalNavigation>
+			</StyledLayout.MaxContainer>
 		</S.Container>
 	);
 };

diff --git a/components/shared/Header/styled.ts b/components/shared/Header/styled.ts
@@ -1,22 +1,32 @@
-import Link from 'next/link';
 import styled from 'styled-components';
+import { LinkWrapper } from 'components/shared/styled/layout';
 
 export const Container = styled.header`
+	position: fixed;
+	top: 0;
+	left: 0;
 	display: flex;
-	background-color: #d9d9d9;
+	width: 100%;
+	background-color: ${({ theme }) => theme.colors.white};
+	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
+	z-index: 100;
 `;
 
 export const GlobalNavigation = styled.nav`
 	display: flex;
-	justify-content: center;
+	justify-content: space-between;
 	width: 100%;
-	min-height: 80px;
+	min-height: 78px;
+`;
+
+export const LogoWrapper = styled(LinkWrapper)`
+	display: flex;
+	align-items: center;
 `;
 
-export const NavigationItem = styled(Link)<{ selected: boolean }>`
+export const NavigationItem = styled.li`
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-weight: ${({ selected }) => selected && '700'};
-	color: ${({ selected, theme }) => (selected ? 'tomato' : theme.colors.black)};
+	cursor: pointer;
 `;
diff --git a/components/shared/Typography/index.tsx b/components/shared/Typography/index.tsx
@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+import * as S from './styled';
+
+type Props = {
+	variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'caption' | 'span' | 'div';
+	aggressive:
+		| 'headline_001'
+		| 'headline_002'
+		| 'headline_003'
+		| 'headline_004'
+		| 'body_oneline_001'
+		| 'body_oneline_002'
+		| 'body_oneline_003'
+		| 'body_multiline_001'
+		| 'body_multiline_002'
+		| 'body_multiline_003';
+	margin?: string;
+	padding?: string;
+	color?: string;
+	lineHeight?: string;
+	align?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+	whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap';
+} & PropsWithChildren;
+
+const Typography = ({ children, variant, aggressive, ...props }: Props) => {
+	return (
+		<S.Component as={variant} aggressive={aggressive} {...props}>
+			{children}
+		</S.Component>
+	);
+};
+
+export default Typography;
diff --git a/components/shared/Typography/styled.ts b/components/shared/Typography/styled.ts
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+type ComponentProps = {
+	aggressive:
+		| 'headline_001'
+		| 'headline_002'
+		| 'headline_003'
+		| 'headline_004'
+		| 'body_oneline_001'
+		| 'body_oneline_002'
+		| 'body_oneline_003'
+		| 'body_multiline_001'
+		| 'body_multiline_002'
+		| 'body_multiline_003';
+	margin?: string;
+	padding?: string;
+	color?: string;
+	lineHeight?: string;
+	align?: 'center' | 'inherit' | 'justify' | 'left' | 'right';
+	whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap';
+};
+
+export const Component = styled.div<ComponentProps>`
+	margin: ${({ margin }) => margin && margin};
+	padding: ${({ padding }) => padding && padding};
+	${({ aggressive, theme }) => theme.fonts[aggressive]}
+	line-height: ${({ lineHeight }) => lineHeight && lineHeight};
+	text-align: ${({ align }) => align && align};
+	white-space: ${({ whiteSpace }) => whiteSpace && whiteSpace};
+`;
diff --git a/components/shared/index.ts b/components/shared/index.ts
@@ -1,6 +1,7 @@
 // Shared Components
 export { default as Header } from 'components/shared/Header';
 export { default as Footer } from 'components/shared/Footer';
+export { default as Typography } from 'components/shared/Typography';
 
 // Only Styled Components
 export * as StyledLayout from 'components/shared/styled/layout';
diff --git a/components/shared/styled/layout.ts b/components/shared/styled/layout.ts
@@ -1,14 +1,47 @@
-import styled from 'styled-components';
+import Link from 'next/link';
+import styled, { CSSProperties } from 'styled-components';
 
-export const BoxFlexCenter = styled.div`
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+export const FlexBox = styled.div<CSSProperties>`
+	display: ${({ display }) => display ?? 'flex'};
+	flex-direction: ${({ flexDirection }) => flexDirection ?? 'row'};
+	align-items: ${({ alignItems }) => alignItems ?? 'stretch'};
+	justify-content: ${({ justifyContent }) => justifyContent ?? 'flex-start'};
+	flex-wrap: ${({ flexWrap }) => flexWrap ?? 'nowrap'};
 `;
 
 export const MaxContainer = styled.div`
 	position: relative;
+	width: 100%;
 	max-width: 1200px;
 	margin: 0 auto;
 `;
+
+export const SubMaxContainer = styled.div`
+	position: relative;
+	width: 100%;
+	max-width: 996px;
+	margin: 0 auto;
+`;
+
+export const UnorderList = styled.ul`
+	display: flex;
+	align-items: center;
+`;
+
+export const LinkWrapper = styled(Link)`
+	text-decoration: none;
+	cursor: pointer;
+`;
+
+type ImageBoxProps = {
+	width: string;
+	height: string;
+	backgroundImageSrc: string;
+};
+
+export const ImageBox = styled.div<ImageBoxProps>`
+	width: ${({ width }) => width};
+	height: ${({ height }) => height};
+	background: ${({ backgroundImageSrc, theme }) => (backgroundImageSrc ? `url(${backgroundImageSrc})` : theme.colors.gray_001)};
+	background-repeat: no-repeat;
+`;