diff --git a/public/fonts/Pretendard-Bold.woff2 b/public/fonts/Pretendard-Bold.woff2 new file mode 100644 index 00000000..8975b802 Binary files /dev/null and b/public/fonts/Pretendard-Bold.woff2 differ diff --git a/public/fonts/Pretendard-Medium.woff2 b/public/fonts/Pretendard-Medium.woff2 new file mode 100644 index 00000000..153fd556 Binary files /dev/null and b/public/fonts/Pretendard-Medium.woff2 differ diff --git a/public/fonts/Pretendard-Regular.woff2 b/public/fonts/Pretendard-Regular.woff2 new file mode 100644 index 00000000..ca8008ff Binary files /dev/null and b/public/fonts/Pretendard-Regular.woff2 differ diff --git a/public/fonts/test.woff2 b/public/fonts/test.woff2 new file mode 100644 index 00000000..c232f8f7 Binary files /dev/null and b/public/fonts/test.woff2 differ diff --git a/src/app/feed/page.tsx b/src/app/feed/page.tsx new file mode 100644 index 00000000..25489121 --- /dev/null +++ b/src/app/feed/page.tsx @@ -0,0 +1,3 @@ +export default function Feed() { + return <>포즈피드; +} diff --git a/src/app/globals.css b/src/app/globals.css index 83909e96..1d4d676f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -6,7 +6,7 @@ box-sizing: border-box; -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ scrollbar-width: none; /* Hide scrollbar for Firefox */ - font-family: Noto Sans KR, serif; + font-family: Pretendard; white-space: pre-wrap; } @@ -14,10 +14,6 @@ display: none; } -html { - font-size: 4vw; -} - @media (min-width: 420px) { html { font-size: 16px; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 559be7c3..01c655c2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,14 +1,17 @@ +import { Header } from '@/components/header'; import './globals.css'; +import '../../styles/font.css'; +import '../../styles/typography.css'; import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'PosePicker', - description: '', + description: 'PosePicker FE by @guesung, @seondal', openGraph: { title: 'PosePicker', - description: '', - url: '', // 웹사이트 URL + description: 'PosePicker FE by @guesung, @seondal', + url: 'https://pose-picker.vercel.app/', // 웹사이트 URL siteName: 'PosePicker', images: [ { @@ -43,9 +46,10 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - -
- {children} + +
+
+
{children}
diff --git a/src/app/page.tsx b/src/app/page.tsx index ada0e063..d6b9af5c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,3 +1,3 @@ export default function Home() { - return
ssss
; + return
ssss
; } diff --git a/src/app/pick/page.tsx b/src/app/pick/page.tsx new file mode 100644 index 00000000..d4b66437 --- /dev/null +++ b/src/app/pick/page.tsx @@ -0,0 +1,3 @@ +export default function Pick() { + return <>포즈픽; +} diff --git a/src/app/talk/page.tsx b/src/app/talk/page.tsx new file mode 100644 index 00000000..3d5a53ed --- /dev/null +++ b/src/app/talk/page.tsx @@ -0,0 +1,3 @@ +export default function Talk() { + return <>포즈톡; +} diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx new file mode 100644 index 00000000..46dec89b --- /dev/null +++ b/src/components/header/Header.tsx @@ -0,0 +1,11 @@ +import MainHeader from './MainHeader'; +import Tab from './Tab'; + +export default function Header() { + return ( +
+ + +
+ ); +} diff --git a/src/components/header/MainHeader.tsx b/src/components/header/MainHeader.tsx new file mode 100644 index 00000000..00f262b0 --- /dev/null +++ b/src/components/header/MainHeader.tsx @@ -0,0 +1,8 @@ +export default function MainHeader() { + return ( +
+

PosePicker

+
햄버거아이콘
+
+ ); +} diff --git a/src/components/header/Tab.tsx b/src/components/header/Tab.tsx new file mode 100644 index 00000000..f79a4efe --- /dev/null +++ b/src/components/header/Tab.tsx @@ -0,0 +1,35 @@ +'use client'; + +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; + +const tabData = [ + { path: '/pick', title: '포즈픽' }, + { path: '/talk', title: '포즈톡' }, + { path: '/feed', title: '포즈피드' }, +]; + +export default function Tab() { + const path = usePathname(); + + return ( + + ); +} diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx new file mode 100644 index 00000000..5653319d --- /dev/null +++ b/src/components/header/index.tsx @@ -0,0 +1 @@ +export { default as Header } from './Header'; diff --git a/src/constants/color.ts b/src/constants/color.ts new file mode 100644 index 00000000..69659298 --- /dev/null +++ b/src/constants/color.ts @@ -0,0 +1,31 @@ +export const COLOR = { + white: '#FFFFFF', + gray: { + 30 : '#F9F9FB', + 50 : '#F7F7FA', + 100 :'#F0F0F5', + 200 : '#E8E8EE', + 300 :'#E1E1E8', + 400 :'#CDCED6', + 500 :'#A9ABB8', + 600 :'#858899', + 700 :'#525463', + 800 :'#3E404C', + 900 :'#2B2D36', + 950 :'#252730', + }, + black: '#141218', + violet: { + 50 :'#141218', + 100 :'#E2D9FC', + 200 :'#C8B8FA', + 300 :'#B29BF8', + 400 :'#9C7FF5', + 500 :'#8662F3', + 600 :'#744CEB', + 700 :'#5B2EE0', + 800 :'#4B25C1', + 900 :'#412499', + 950 :'#21005D', + } +} as const; diff --git a/styles/font.css b/styles/font.css new file mode 100644 index 00000000..10d1c558 --- /dev/null +++ b/styles/font.css @@ -0,0 +1,17 @@ +@font-face { + font-family: "Pretendard"; + font-weight: 700; + src: url('/fonts/Pretendard-Bold.woff2') format("woff2"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 500; + src: url("/fonts/Pretendard-Medium.woff2") format("woff2"); +} + +@font-face { + font-family: "Pretendard"; + font-weight: 400; + src: url("/fonts/Pretendard-Regular.woff2") format("woff2"); +} \ No newline at end of file diff --git a/styles/theme/colors.ts b/styles/theme/colors.ts index 983e773f..340a999f 100644 --- a/styles/theme/colors.ts +++ b/styles/theme/colors.ts @@ -1,7 +1,32 @@ +import { COLOR } from "../../src/constants/color"; + export const colors = { - white: '#FFFFFF', - gray: { - '030': '#F9F9FB', - '050': '#F7F7FA', - }, -} as const; + // bg + "white": COLOR.white, + "sub-white": COLOR.gray[50], + "divider": COLOR.gray[100], + + // border + "default": COLOR.gray[300], + "active": COLOR.gray[900], + "disabled": COLOR.gray[100], + + // brand colors + "main-violet-light": COLOR.violet[300], + "main-violet": COLOR.violet[500], + "main-violet-dark": COLOR.violet[700], + + // text + "cto": COLOR.black, + "brand": COLOR.violet[500], + "primary":COLOR.gray[900], + "secondary": COLOR.gray[700], + "tertiary": COLOR.gray[500], + "caption": COLOR.gray[400], + + // icon + "icon-default": COLOR.gray[800], + "icon-hover": COLOR.gray[600], + "icon-disabled": COLOR.gray[500], + +} as const \ No newline at end of file diff --git a/styles/typography.css b/styles/typography.css new file mode 100644 index 00000000..0363635b --- /dev/null +++ b/styles/typography.css @@ -0,0 +1,49 @@ +h1 { + font-weight: 700; + font-size: 3rem; + line-height: 3.75rem; + letter-spacing: -0.4px; +} +h2 { + font-weight: 700; + font-size: 2rem; + line-height: 3rem; + letter-spacing: -0.4px; +} +h3 { + font-weight: 700; + font-size: 1.5rem; + line-height: 2.25rem; + letter-spacing: -0.3px; +} +h4 { + font-weight: 700; + font-size: 1.25rem; + line-height: 1.875rem; + letter-spacing: -0.2px; +} + +/* +subtitle-1 에 해당하는 타이포입니다. +hifi에서 subtitle-2, subtitle-3은 아직 쓰이지 않는 것 같아서 임의로 h5로 사용했어요 +*/ +h5 { + font-weight: 500; + font-size: 1rem; + line-height: 1.5rem; + letter-spacing: -0.2px; +} + +p { + font-weight: 400; + font-size: 1rem; + line-height: 1.5rem; + letter-spacing: -0.1px; +} + +caption { + font-weight: 500; + font-size: 0.75rem; + line-height: 1.125rem; + letter-spacing: 0.4px; +} \ No newline at end of file