diff --git a/.babelrc.json b/.babelrc.json
deleted file mode 100644
index 65dcd6f..0000000
--- a/.babelrc.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "presets": ["next/babel"],
- "plugins": [
- [
- "styled-components",
- {
- "ssr": true,
- "displayName": true,
- "preprocess": true
- }
- ]
- ]
-}
diff --git a/.eslintrc.json b/.eslintrc.json
index 9d5836e..3e38344 100644
--- 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
index 90c43d9..9d06be6 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -10,7 +10,7 @@ import { GlobalStyle, theme } from 'styles';
const RootLayout = ({ children }: { children: React.ReactNode }) => {
return (
-
@@ -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
index 2d7a25b..6904cf1 100644
--- 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 Root Page ๐๐ป;
+ return (
+
+
+ ๋ฆฌํ์คํ
์ด์
,
+
+ OOO์๋น์ค์์ ์๋ฆฌ์ธ์!
+
+
+ ๋น ๋ฅด๊ณ ๊ฐํธํ๊ฒ ๊ฐ๊ฒ ์ ๋ณด์ ํ๋งค์ํ์ ๋ฑ๋กํ๊ณ
+
๋ ๋ง์ ์ฌ๋์๊ฒ ๋ฆฌํ์คํ
์ด์
์ ๊ฐ์น๋ฅผ ์ ํด๋ณด์ธ์.
+
+
+
+ ์
์ ์ ์ฒญํ๊ธฐ
+
+
+ );
};
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
index 32ef242..f42fb67 100644
--- 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 (
- Footer
+
+
+
+ ์๋น์ค ์ด์ฉ์ฝ๊ด
+
+ ๊ฐ์ธ์ ๋ณด ์ฒ๋ฆฌ๋ฐฉ์นจ
+
+
+ ์ฐ๋ฆฌ๋จ์ฒด ์ด๋ฆ์๋ฆฌ
+ ์์ธํ๋ณด๊ธฐ
+
+
+
);
};
diff --git a/components/shared/Footer/styled.ts b/components/shared/Footer/styled.ts
index 8485687..dec382a 100644
--- 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``;
+
+type DividerProps = {
+ direction: 'vertical' | 'horizontal';
+ width: string;
+ border: string;
+ margin: string;
+ backgroundColor: string;
+};
+
+export const Divider = styled.span`
+ 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
index 3ce6d6b..2cfbcf1 100644
--- 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 (
-
- {navigations.map((navigation) => {
- return (
-
- {navigation.renderText}
-
- );
- })}
-
+
+
+
+ Pump ์ฌ์ดํธ ๋ก๊ณ ์ด๋ฏธ์ง
+
+
+
+
+ {userNavigationItems.map((useNavigationItem) => {
+ return {useNavigationItem.renderText};
+ })}
+
+
+
);
};
diff --git a/components/shared/Header/styled.ts b/components/shared/Header/styled.ts
index fea4f03..2160d17 100644
--- 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
new file mode 100644
index 0000000..ad13a0f
--- /dev/null
+++ 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 (
+
+ {children}
+
+ );
+};
+
+export default Typography;
diff --git a/components/shared/Typography/styled.ts b/components/shared/Typography/styled.ts
new file mode 100644
index 0000000..8ba7d88
--- /dev/null
+++ 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`
+ 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
index c87115b..af96482 100644
--- 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
index 7d6323f..84e0594 100644
--- 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`
+ 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`
+ width: ${({ width }) => width};
+ height: ${({ height }) => height};
+ background: ${({ backgroundImageSrc, theme }) => (backgroundImageSrc ? `url(${backgroundImageSrc})` : theme.colors.gray_001)};
+ background-repeat: no-repeat;
+`;
diff --git a/next.config.js b/next.config.js
index 156ad73..b0e9eb4 100644
--- a/next.config.js
+++ b/next.config.js
@@ -4,6 +4,10 @@ const nextConfig = {
experimental: {
appDir: true,
},
+ compiler: {
+ styledComponents: true,
+ },
+ swcMinify: true,
reactStrictMode: true,
webpack: (config) => {
config.module.rules.push({
diff --git a/package.json b/package.json
index d2079c0..4ed4e06 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
"axios": "^1.2.0",
"eslint-config-next": "13.0.6",
"jotai": "^1.11.0",
- "next": "13.0.6",
+ "next": "^13.0.7",
"react": "^18.2.0",
"react-dom": "18.2.0",
"styled-components": "^5.3.6",
diff --git a/public/static/fonts/Pretendard-Bold.woff2 b/public/static/fonts/Pretendard-Bold.woff2
new file mode 100644
index 0000000..d99618c
Binary files /dev/null and b/public/static/fonts/Pretendard-Bold.woff2 differ
diff --git a/public/static/fonts/Pretendard-Medium.woff2 b/public/static/fonts/Pretendard-Medium.woff2
new file mode 100644
index 0000000..a96e69b
Binary files /dev/null and b/public/static/fonts/Pretendard-Medium.woff2 differ
diff --git a/public/static/fonts/Pretendard-Regular.woff2 b/public/static/fonts/Pretendard-Regular.woff2
new file mode 100644
index 0000000..a5d5aea
Binary files /dev/null and b/public/static/fonts/Pretendard-Regular.woff2 differ
diff --git a/public/static/fonts/index.ts b/public/static/fonts/index.ts
deleted file mode 100644
index cb0ff5c..0000000
--- a/public/static/fonts/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {};
diff --git a/public/static/icons/add.svg b/public/static/icons/add.svg
index 5ba35a9..70e6e35 100644
--- a/public/static/icons/add.svg
+++ b/public/static/icons/add.svg
@@ -1,3 +1,3 @@
-