Skip to content
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

Jump to bottom

[송규경] Chore/Design: Design System 세팅 및 Nested CSS warning 해결 #15

Merged
merged 2 commits into from
Jan 25, 2024
Merged

[송규경] Chore/Design: Design System 세팅 및 Nested CSS warning 해결 #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f177a44
fix: CSS nesting warning 해결 with @tailwindcss/nesting
SsongQ-92 Jan 25, 2024
062ee1b
style: Design System globals.css에 적용 및 Noto Sans 글꼴 root Layout에 적용
SsongQ-92 Jan 25, 2024
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
36 changes: 31 additions & 5 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.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
"@tanstack/react-query": "^5.17.19",
"@tanstack/react-query-devtools": "^5.17.21",
"axios": "^1.6.5",
Expand Down
1 change: 1 addition & 0 deletions postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
module.exports = {
plugins: {
'tailwindcss/nesting': {},
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

warning 해결 포인트입니다

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오호 클래스명이 아니라 css 파일 내에서 nesting(중첩) 문법을 사용할 때 쓰일 때 필요한 요소로 보이는데 맞나요?!

테일윈드에서 nesting 문법으로 @apply을 보통 이용하지 않나요?!

tailwindcss: {},
autoprefixer: {},
},
Expand Down
Empty file added src/app/(auth)/[username]/_components/.gitkeep
View file
Open in desktop
Empty file.
3 changes: 3 additions & 0 deletions src/app/(auth)/[username]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function Home() {
return <main className="flex min-h-screen flex-col items-center justify-between p-24">마이 페이지</main>;
}
Empty file added src/app/(auth)/[username]/status/[id]/.gitkeep
View file
Open in desktop
Empty file.
10 changes: 7 additions & 3 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Noto_Sans_KR } from 'next/font/google';
import '../styles/globals.css';
import ReactQueryProviders from '@/utils/react-query-provider';

const inter = Inter({ subsets: ['latin'] });
// Noto sans 폰트 적용
const notoSansKr = Noto_Sans_KR({
preload: false,
weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});
Comment on lines +6 to +10
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

notoSansKr의 경우, preload false 값으로 불러옵니다.


export const metadata: Metadata = {
title: 'Team Six',
Expand All @@ -17,7 +21,7 @@ export default function RootLayout({
}>) {
return (
<html lang="ko">
<body className={inter.className}>
<body className={notoSansKr.className}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

혹시 레이아웃에 폰트에 관련한 클래스를 넣은 이유가 있을까요?!

글로벌 css에 넣으면 안 되는 건가 싶어서요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

google font를 import 해서 가장 최상단 root Layout에서 감싸주려고 했어요

<ReactQueryProviders>{children}</ReactQueryProviders>
</body>
</html>
Expand Down
1 change: 1 addition & 0 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export default function Home() {
<main className="flex min-h-screen flex-col items-center justify-between p-24">
main
<p>dev 브랜치 자동 배포 테스트용 텍스트입니다..!</p>
<p className="font-light">test</p>
</main>
);
}
Empty file added src/components/.gitkeep
View file
Open in desktop
Empty file.
Loading