From 062ee1bda81fcf32ece17ef72cf63d608b5b4131 Mon Sep 17 00:00:00 2001 From: James Song Date: Thu, 25 Jan 2024 14:15:44 +0900 Subject: [PATCH] =?UTF-8?q?style:=20Design=20System=20globals.css=EC=97=90?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20Noto=20Sans=20=EA=B8=80?= =?UTF-8?q?=EA=BC=B4=20root=20Layout=EC=97=90=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(auth)/[username]/_components/.gitkeep | 0 src/app/(auth)/[username]/page.tsx | 3 + .../(auth)/[username]/status/[id]/.gitkeep | 0 src/app/layout.tsx | 1 + src/app/page.tsx | 1 + src/components/.gitkeep | 0 src/styles/globals.css | 68 +++++++++++-------- tailwind.config.ts | 56 +++++++-------- 8 files changed, 70 insertions(+), 59 deletions(-) create mode 100644 src/app/(auth)/[username]/_components/.gitkeep create mode 100644 src/app/(auth)/[username]/page.tsx create mode 100644 src/app/(auth)/[username]/status/[id]/.gitkeep create mode 100644 src/components/.gitkeep diff --git a/src/app/(auth)/[username]/_components/.gitkeep b/src/app/(auth)/[username]/_components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/app/(auth)/[username]/page.tsx b/src/app/(auth)/[username]/page.tsx new file mode 100644 index 0000000..f9cd726 --- /dev/null +++ b/src/app/(auth)/[username]/page.tsx @@ -0,0 +1,3 @@ +export default function Home() { + return
마이 페이지
; +} diff --git a/src/app/(auth)/[username]/status/[id]/.gitkeep b/src/app/(auth)/[username]/status/[id]/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b0cfe8b..caa7ea3 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,6 +3,7 @@ import { Noto_Sans_KR } from 'next/font/google'; import '../styles/globals.css'; import ReactQueryProviders from '@/utils/react-query-provider'; +// Noto sans 폰트 적용 const notoSansKr = Noto_Sans_KR({ preload: false, weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'], diff --git a/src/app/page.tsx b/src/app/page.tsx index 5f9150b..d3ff399 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,6 +3,7 @@ export default function Home() {
main

dev 브랜치 자동 배포 테스트용 텍스트입니다..!

+

test

); } diff --git a/src/components/.gitkeep b/src/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/globals.css b/src/styles/globals.css index b78da73..39222d7 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -4,9 +4,16 @@ @layer base { :root { - --primary: 85 52 218; - --primary-light: 241 239 253; - --red: 214 23 58; + --primary-900: #c80011; + --primary-800: #d8001e; + --primary-700: #e40026; + --primary-600: #f6002b; + --primary-500: #ff002b; + --primary-400: #ff2049; + --primary-300: #f35c6e; + --primary-200: #f98d97; + --primary-100: #ffc7d2; + --primary-50: #ffe9ee; --green: 122 197 85; --green-light: 231 247 219; --purple: 118 13 222; @@ -16,24 +23,30 @@ --blue: 118 165 234; --blue-light: 29 155 240; --blue-hover-light: 26 140 216; - --pink: 232 118 234; - --pink-light: 247 219 240; --black: #040404; --white: #fff; - --gray-1: 250 250 250; - --gray-2: 238 238 238; - --gray-3: 217 217 217; - --gray-4: 159 166 178; - --gray-5: 120 116 134; - --gray-6: 75 75 75; - --gray-7: 51 50 54; - --WHITE: 255 255 255; + --gray-50: #f5f5f5; + --gray-100: #eaeaea; + --gray-200: #dbdbdb; + --gray-300: #c6c6c6; + --gray-400: #a0a0a0; + --gray-500: #7e7e7e; + --gray-600: #585858; + --gray-700: #454545; + --gray-800: #282828; } :root[data-theme='dark'] { - --primary: 85 52 218; - --primary-light: 241 239 253; - --red: 214 23 58; + --primary-900: #c80011; + --primary-800: #d8001e; + --primary-700: #e40026; + --primary-600: #f6002b; + --primary-500: #ff002b; + --primary-400: #ff2049; + --primary-300: #f35c6e; + --primary-200: #f98d97; + --primary-100: #ffc7d2; + --primary-50: #ffe9ee; --green: 122 197 85; --green-light: 241 207 255; --purple: 118 13 222; @@ -42,18 +55,17 @@ --orange-light: 249 238 227; --blue: 118 165 234; --blue-light: 219 230 247; - --pink: 232 118 234; - --pink-light: 247 219 240; - --black: 255 255 255; - --white: 23 23 23; - --gray-1: 51 50 54; - --gray-2: 75 75 75; - --gray-3: 120 116 134; - --gray-4: 159 166 178; - --gray-5: 217 217 217; - --gray-6: 238 238 238; - --gray-7: 250 250 250; - --WHITE: 255 255 255; + --black: #fff; + --white: #040404; + --gray-50: #282828; + --gray-100: #454545; + --gray-200: #585858; + --gray-300: #7e7e7e; + --gray-400: #a0a0a0; + --gray-500: #c6c6c6; + --gray-600: #dbdbdb; + --gray-700: #eaeaea; + --gray-800: #f5f5f5; } * { diff --git a/tailwind.config.ts b/tailwind.config.ts index 999b16f..e8e5bd5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,18 +13,6 @@ const PX_ENTRIES_10 = createPxEntries(10); const PX_ENTRIES_100 = createPxEntries(100); const PX_ENTRIES_1000 = createPxEntries(1000); -/* type AccType = Record; - -const range = (start: number, end: number): number[] => { - let array = []; - for (let i = start; i <= end; ++i) { - array.push(i); - } - return array; -}; - -const pxToRem = (px: number, base = 16) => `${px / base}rem`; */ - const config: Config = { content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', @@ -37,23 +25,31 @@ const config: Config = { // spacing values are inherited by the 'padding', 'margin', 'height', 'maxHeight', 'flex-basis', 'gap', 'inset', 'space', 'translate', 'scrollMargin', 'scrollPadding', and 'textIndent'. spacing: PX_ENTRIES_1000, fontWeight: { - light: '400', - normal: '500', + light: '300', + DEFAULT: '400', + medium: '500', bold: '700', }, borderRadius: { - sm: '0.25rem', - md: '0.375rem', - lg: '0.5rem', + sm: '0.5rem', // 추후 수정 가능 + md: '1.5rem', // 추후 수정 가능 + lg: '2rem', // 추후 수정 가능 full: '9999px', }, colors: { transparent: 'transparent', primary: { - DEFAULT: 'rgb(var(--primary) / )', - light: 'rgb(var(--primary-light) / )', + DEFAULT: 'var(--primary-400)', + 1: 'var(--primary-50)', + 2: 'var(--primary-100)', + 3: 'var(--primary-200)', + 4: 'var(--primary-300)', + 5: 'var(--primary-500)', + 6: 'var(--primary-600)', + 7: 'var(--primary-700)', + 8: 'var(--primary-800)', + 9: 'var(--primary-900)', }, - red: 'rgb(var(--red) / )', green: { DEFAULT: 'rgb(var(--green) / )', light: 'rgb(var(--green-light) / )', @@ -71,20 +67,18 @@ const config: Config = { light: 'rgb(var(--blue-light) / )', hoverLight: 'rgb(var(--blue-hover-light) / )', }, - pink: { - DEFAULT: 'rgb(var(--pink) / )', - light: 'rgb(var(--pink-light) / )', - }, black: 'var(--black)', white: 'var(--white)', gray: { - 1: 'rgb(var(--gray-1) / )', - 2: 'rgb(var(--gray-2) / )', - 3: 'rgb(var(--gray-3) / )', - 4: 'rgb(var(--gray-4) / )', - 5: 'rgb(var(--gray-5) / )', - 6: 'rgb(var(--gray-6) / )', - 7: 'rgb(var(--gray-7) / )', + 1: 'var(--gray-50)', + 2: 'var(--gray-100)', + 3: 'var(--gray-200)', + 4: 'var(--gray-300)', + 5: 'var(--gray-400)', + 6: 'var(--gray-500)', + 7: 'var(--gray-600)', + 8: 'var(--gray-700)', + 9: 'var(--gray-800)', }, }, screens: {