Skip to content

[KOBG-10] 디자인 시스템 적용 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
minzee09 merged 6 commits into from
Aug 14, 2025
Merged

[KOBG-10] 디자인 시스템 적용 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0ceed65
📦 package: update tailwindcss [KOBG-10]
minzee09 Aug 6, 2025
8082adf
💄 UI: add fonts [KOBG-10]
minzee09 Aug 6, 2025
b0e2cea
💄 UI: add colors to global css file [KOBG-10]
minzee09 Aug 6, 2025
84b7ceb
💬 comment: modify design system wording [KOBG-10]
minzee09 Aug 6, 2025
ae123b9
💄 UI: add fonts to globals [KOBG-10]
minzee09 Aug 14, 2025
32b62e7
📝 docs: modify PR template [KOBG-5]
minzee09 Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 25 additions & 9 deletions .github/PULL_REQUEST_TEMPLATE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,34 @@
## JIRA 이슈 키
<!--[JIRA-이슈번호]-->
## 🔑 JIRA 이슈 키
<!-- [KOBB-123] 한국어 레슨 별 조회 API -->

---

## JIRA 이슈 키
## ✒ 진행한 작업
- [x] 진행한 작업
- [x] 진행한 작업
- [x] 진행한 작업

---

## 💡 생겼던 문제 및 해결법
1️⃣ 요약
문제:
해결:
- 문제:
- 해결:

---

## 📢 아쉬운 부분 및 개선점
- ...

## 스크린샷
---

## 📚 개발에 참고한 자료 및 포인트
- 참고한 부분 요약 및 포인트
- link

## 아쉬운 부분 및 개선점
---

## 📸 스크린샷
- ...

## 개발에 참고한 자료 및 포인트
<!--참고한 부분 요약 및 포인트(link)-->
---
167 changes: 160 additions & 7 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
33 changes: 19 additions & 14 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: 메타데이터 전체 수정
Expand All @@ -24,16 +32,13 @@ export const metadata: Metadata = {
},
};

export default function RootLayout({
children,
}: Readonly<{
children: ReactNode;
}>) {
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<html
lang="en"
className={`${gothic.variable} ${mplus.variable} ${noto.variable}`}
>
<body className="antialiased font-sans bg-background text-foreground">
{children}
</body>
</html>
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}