diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 9349998..d7fbadb 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,18 +1,34 @@ -## JIRA 이슈 키 - +## 🔑 JIRA 이슈 키 + +--- -## JIRA 이슈 키 +## ✒ 진행한 작업 +- [x] 진행한 작업 +- [x] 진행한 작업 +- [x] 진행한 작업 + +--- + +## 💡 생겼던 문제 및 해결법 1️⃣ 요약 -문제: -해결: +- 문제: +- 해결: + +--- +## 📢 아쉬운 부분 및 개선점 +- ... -## 스크린샷 +--- +## 📚 개발에 참고한 자료 및 포인트 +- 참고한 부분 요약 및 포인트 + - link -## 아쉬운 부분 및 개선점 +--- +## 📸 스크린샷 +- ... -## 개발에 참고한 자료 및 포인트 - \ No newline at end of file +--- \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index a2dc41e..99f7f51 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,179 @@ @import "tailwindcss"; :root { + --font-gothic-a1: 'Gothic A1', sans-serif; + --font-mplus-2: 'M PLUS 2', sans-serif; + --font-noto-sc: 'Noto Sans SC',sans-serif; + --font-sans: var(--font-gothic-a1), var(--font-mplus-2), var(--font-noto-sc), system-ui, sans-serif; + --background: #ffffff; --foreground: #171717; } +@media (prefers-color-scheme: dark) { + :root { + --background: #0a0a0a; + --foreground: #ededed; + } +} + @theme inline { + /* 폰트 */ + --font-sans: var(--font-sans); + --font-gothic: var(--font-gothic-a1); + --font-mplus: var(--font-mplus-2); + --font-noto: var(--font-noto-sc); + + /* 컬러 */ --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + + --color-primary: #F7DD4A; + --color-primary-900: #FEF9DD; + --color-primary-800: #FBEFAC; + --color-primary-dimensional: #F6B831; + + --color-secondary: #BFE2F3; + --color-secondary-400: #248EC1; + --color-secondary-300: #1C6E96; + + --color-bg-solid: #E6F4FA; + + --color-error: #F74A4A; + --color-error-dimensional: #D51111; + + --color-black: #1B1B1B; + --color-black-70: rgba(27, 27, 27, 0.7); + + --color-gray-300: #4F4F4F; + --color-gray-500: #828282; + --color-gray-700: #B5B5B5; + --color-gray-900: #E8E8E8; + --color-gray-950: #F2F2F2; + + --color-white: #FEFEFE; + --color-white-70: rgba(254, 254, 254, 0.7); + + /* H1 Bold */ + --text-h1-bold: 24px; + --text-h1-bold--line-height: 160%; + --text-h1-bold--font-weight: 700; + --text-h1-bold--font-family: var(--font-gothic-a1); + + /* H1 Regular */ + --text-h1-regular: 24px; + --text-h1-regular--line-height: 160%; + --text-h1-regular--font-weight: 400; + --text-h1-regular--font-family: var(--font-gothic-a1); + + /* H2 Bold */ + --text-h2-bold: 20px; + --text-h2-bold--line-height: 160%; + --text-h2-bold--font-weight: 700; + --text-h2-bold--font-family: var(--font-gothic-a1); + + /* H2 Regular */ + --text-h2-regular: 20px; + --text-h2-regular--line-height: 160%; + --text-h2-regular--font-weight: 400; + --text-h2-regular--font-family: var(--font-gothic-a1); + + /* H3 Bold */ + --text-h3-bold: 18px; + --text-h3-bold--line-height: 160%; + --text-h3-bold--font-weight: 700; + --text-h3-bold--font-family: var(--font-gothic-a1); + + /* H3 Regular */ + --text-h3-regular: 18px; + --text-h3-regular--line-height: 160%; + --text-h3-regular--font-weight: 400; + --text-h3-regular--font-family: var(--font-gothic-a1); + + /* Body1 Bold */ + --text-bd1-bold: 16px; + --text-bd1-bold--line-height: 160%; + --text-bd1-bold--font-weight: 700; + --text-bd1-bold--font-family: var(--font-gothic-a1); + + /* Body1 Regular */ + --text-bd1-regular: 16px; + --text-bd1-regular--line-height: 160%; + --text-bd1-regular--font-weight: 400; + --text-bd1-regular--font-family: var(--font-gothic-a1); + + /* Body2 Bold */ + --text-bd2-bold: 14px; + --text-bd2-bold--line-height: 160%; + --text-bd2-bold--font-weight: 700; + --text-bd2-bold--font-family: var(--font-gothic-a1); + + /* Body2 Regular */ + --text-bd2-regular: 14px; + --text-bd2-regular--line-height: 160%; + --text-bd2-regular--font-weight: 400; + --text-bd2-regular--font-family: var(--font-gothic-a1); + + /* Caption1 Bold */ + --text-cp1-bold: 12px; + --text-cp1-bold--line-height: 160%; + --text-cp1-bold--font-weight: 700; + --text-cp1-bold--font-family: var(--font-gothic-a1); + + /* Caption1 Regular */ + --text-cp1-regular: 12px; + --text-cp1-regular--line-height: 160%; + --text-cp1-regular--font-weight: 400; + --text-cp1-regular--font-family: var(--font-gothic-a1); + + /* Caption2 Bold */ + --text-cp2-bold: 10px; + --text-cp2-bold--line-height: 160%; + --text-cp2-bold--font-weight: 700; + --text-cp2-bold--font-family: var(--font-gothic-a1); + + /* Caption2 Regular */ + --text-cp2-regular: 10px; + --text-cp2-regular--line-height: 160%; + --text-cp2-regular--font-weight: 400; + --text-cp2-regular--font-family: var(--font-gothic-a1); + + /* Translate Caption1 Regular */ + --text-trans-cp1-regular: 14px; + --text-cp1-regular--line-height: 160%; + --text-cp1-regular--font-weight: 400; + --text-cp1-regular--font-family: var(--font-mplus-2); + + /* Translate Caption1 Regular */ + --text-trans-cp1-regular: 14px; + --text-trans-cp1-regular--line-height: 160%; + --text-trans-cp1-regular--font-weight: 400; + --text-trans-cp1-regular--font-family: var(--font-mplus-2); + + /* Translate Caption2 Regular */ + --text-trans-cp2-regular: 12px; + --text-trans-cp2-regular--line-height: 120%; + --text-trans-cp2-regular--font-weight: 400; + --text-trans-cp2-regular--font-family: var(--font-mplus-2); + + /* Translate Caption3 Regular */ + --text-trans-cp3-regular: 10px; + --text-trans-cp3-regular--line-height: 120%; + --text-trans-cp3-regular--font-weight: 400; + --text-trans-cp3-regular--font-family: var(--font-mplus-2); } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; +@layer utilities { + /* 그라디언트 */ + .bg-gradient { + background-image: linear-gradient(to bottom, #FEFEFE, #E6F4FA); + } + .bg-gradient-reverse { + background-image: linear-gradient(to bottom, #E6F4FA, #FEFEFE); } } body { background: var(--background); color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; } diff --git a/app/layout.tsx b/app/layout.tsx index 1e8468c..df4091c 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,16 +1,24 @@ import type { Metadata } from 'next'; -import { Geist, Geist_Mono } from 'next/font/google'; +import { Gothic_A1, M_PLUS_2, Noto_Sans_SC } from 'next/font/google'; import './globals.css'; import { ReactNode } from 'react'; -const geistSans = Geist({ - variable: '--font-geist-sans', +const gothic = Gothic_A1({ + weight: ['400', '700'], subsets: ['latin'], + variable: '--font-gothic-a1', }); -const geistMono = Geist_Mono({ - variable: '--font-geist-mono', +const mplus = M_PLUS_2({ + weight: ['400'], + subsets: ['latin', 'vietnamese', 'latin-ext'], + variable: '--font-mplus-2', +}); + +const noto = Noto_Sans_SC({ + weight: ['400'], subsets: ['latin'], + variable: '--font-noto-sc', }); // TODO: 메타데이터 전체 수정 @@ -24,16 +32,13 @@ export const metadata: Metadata = { }, }; -export default function RootLayout({ - children, -}: Readonly<{ - children: ReactNode; -}>) { +export default function RootLayout({ children }: { children: ReactNode }) { return ( - - + + {children} diff --git a/package-lock.json b/package-lock.json index 5110274..9b2011c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,13 +19,13 @@ }, "devDependencies": { "@eslint/eslintrc": "^3", - "@tailwindcss/postcss": "^4", + "@tailwindcss/postcss": "^4.1.11", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "15.3.5", - "tailwindcss": "^4", + "tailwindcss": "^4.1.11", "typescript": "^5" } }, diff --git a/package.json b/package.json index 8ea7064..757dc95 100644 --- a/package.json +++ b/package.json @@ -21,13 +21,13 @@ }, "devDependencies": { "@eslint/eslintrc": "^3", - "@tailwindcss/postcss": "^4", + "@tailwindcss/postcss": "^4.1.11", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "15.3.5", - "tailwindcss": "^4", + "tailwindcss": "^4.1.11", "typescript": "^5" } }