dnd-side-project · guesung · Aug 4, 2023 · Aug 2, 2023 · Aug 2, 2023 · Aug 2, 2023
diff --git a/public/fonts/Pretendard-Bold.woff2 b/public/fonts/Pretendard-Bold.woff2
diff --git a/public/fonts/Pretendard-Medium.woff2 b/public/fonts/Pretendard-Medium.woff2
diff --git a/public/fonts/Pretendard-Regular.woff2 b/public/fonts/Pretendard-Regular.woff2
diff --git a/public/fonts/test.woff2 b/public/fonts/test.woff2
diff --git a/src/app/feed/page.tsx 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
@@ -6,18 +6,14 @@
   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;
 }
 
 ::-webkit-scrollbar {
   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
@@ -1,4 +1,7 @@
+import Header from '@/components/header';
 import './globals.css';
+import '../../styles/font.css';
+import '../../styles/typography.css';
 
 import type { Metadata } from 'next';
 
@@ -43,9 +46,10 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="ko">
-      <body className="flex h-[100dvh] w-screen justify-center bg-black bg-slate-50">
-        <div className="relative h-full w-full max-w-450 overflow-y-scroll bg-white text-black">
-          {children}
+      <body className="flex h-[100dvh] w-screen touch-none justify-center bg-slate-100 py-px">
+        <div className="max-w-440 h-full w-full bg-white py-2 text-black drop-shadow-2xl">
+          <Header />
+          <div className="px-5 py-4">{children}</div>
         </div>
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,3 +1,3 @@
 export default function Home() {
-  return <main className="">ssss</main>;
+  return <div>ssss</div>;
 }
diff --git a/src/app/pick/page.tsx 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
@@ -0,0 +1,3 @@
+export default function Talk() {
+  return <>포즈톡</>;
+}
diff --git a/src/components/header/MainHeader.tsx b/src/components/header/MainHeader.tsx
@@ -0,0 +1,8 @@
+export default function MainHeader() {
+  return (
+    <div className="flex h-12 items-center justify-between">
+      <h4>PosePicker</h4>
+      <div>햄버거아이콘</div>
+    </div>
+  );
+}
diff --git a/src/components/header/Tab.tsx b/src/components/header/Tab.tsx
@@ -0,0 +1,33 @@
+'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 (
+    <nav className="flex items-center gap-4">
+      {tabData.map((item) =>
+        item.path === path ? (
+          <div key={item.path}>
+            <div className="py-3">
+              <h5 className="text-brand">{item.title}</h5>
+            </div>
+            <div className="border-b-main-violet relative top-0.5 border-b-2" />
+          </div>
+        ) : (
+          <Link href={item.path} className="py-3" key={item.path}>
+            <h5 className="text-secondary">{item.title}</h5>
+          </Link>
+        )
+      )}
+    </nav>
+  );
+}
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -0,0 +1,11 @@
+import MainHeader from './MainHeader';
+import Tab from './Tab';
+
+export default function Header() {
+  return (
+    <div className="border-b-divider border-b-2 px-5">
+      <MainHeader />
+      <Tab />
+    </div>
+  );
+}
diff --git a/src/constants/color.ts 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
@@ -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");
+}
diff --git 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
diff --git a/styles/typography.css 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;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,11 +1,10 @@
-const { colors, pxToRemTailwind, animations } = require('./styles/theme');
+const { colors, animations } = require('./styles/theme');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {
-      ...pxToRemTailwind,
       colors,
       keyframes: animations,
       animation: {