Skip to content

Feat/global component #14

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

Closed
dasosann wants to merge 2 commits into from
Closed

Feat/global component #14

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
ebf03d3
feat: 토큰 생성 스크립트 개선 및 CSS 변수 정리
dasosann Jan 27, 2026
1f1bd31
feat: Blur 컴포넌트 추가 및 배경색 추가
dasosann Jan 27, 2026
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
6 changes: 4 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import Blur from "@/components/common/Blur";

const pretendard = localFont({
src: "./fonts/PretendardVariable.woff2",
Expand Down Expand Up @@ -38,9 +39,10 @@ export default function RootLayout({
return (
<html lang="ko" className={pretendard.variable}>
<body
className={`${pretendard.className} flex justify-center bg-white antialiased md:bg-gray-100`}
className={`${pretendard.className} antialiase flex justify-center bg-white`}
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Jan 27, 2026

Choose a reason for hiding this comment

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

medium

There's a typo in the style class. antialiase should be corrected to antialiased. Tailwind CSS's anti-aliasing utility is antialiased. This typo can cause the font rendering to look different from what was intended.

Additionally, according to the repository style guide (line 55), consider using a utility like clsx or cn when combining multiple classes. For example, you can use it like this: cn(pretendard.className, 'antialiased', ...).

Suggested change
className={`${pretendard.className} antialiase flex justify-center bg-white`}
className={`${pretendard.className} antialiased flex justify-center bg-white`}
References
  1. When using conditional styling, it is recommended to use clsx or tailwind-merge (or the cn utility). Although this is a simple string concatenation, consider using a utility for consistency. (link)

>
<div className="min-h-dvh w-full overflow-x-hidden bg-white px-4 text-black md:max-w-[430px] md:shadow-lg">
<div className="bg-background-app-base relative min-h-dvh w-full overflow-x-hidden px-4 text-black md:max-w-[430px] md:shadow-lg">
<Blur />
{children}
</div>
</body>
Expand Down
64 changes: 5 additions & 59 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,9 @@
import Blur from "@/components/common/Blur";

export default function Home() {
return (
<div className="bg-surface-base flex min-h-screen items-center justify-center font-sans">
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center gap-8 px-8 py-12">
{/* 토큰 테스트 섹션 */}
<div className="w-full space-y-8 rounded-lg border border-gray-200 bg-white p-8 shadow-sm">
<h1 className="text-24-700 text-brand-black border-b pb-4">
🎨 Design Token Test
</h1>

{/* 1. Typography */}
<section className="space-y-4">
<h2 className="text-20-600">1. Typography</h2>
<div className="space-y-2 rounded bg-gray-50 p-4">
<p className="text-24-700">Display 24px (Bold 700)</p>
<p className="text-20-600">Title 20px (SemiBold 600)</p>
<p className="text-18-500">Body 18px (Medium 500)</p>
<p className="text-16-400">Body 16px (Regular 400)</p>
<p className="text-14-400 text-disabled">
Caption 14px (Disabled Color)
</p>
</div>
</section>

{/* 2. Colors & Backgrounds */}
<section className="space-y-4">
<h2 className="text-20-600">2. Colors & Backgrounds</h2>
<div className="grid grid-cols-2 gap-4">
<div className="bg-brand-secondary-pink flex h-20 items-center justify-center rounded-lg text-white">
Pink Secondary
</div>
<div className="bg-brand-primary-orange flex h-20 items-center justify-center rounded-lg text-white">
Orange Primary
</div>
<div className="bg-surface-base border-light flex h-20 items-center justify-center rounded-lg border">
Surface Base
</div>
<div className="bg-disabled text-disabled flex h-20 items-center justify-center rounded-lg">
Disabled Area
</div>
</div>
</section>

{/* 3. Buttons */}
<section className="space-y-4">
<h2 className="text-20-600">3. Buttons</h2>
<div className="flex flex-wrap gap-4">
<button className="bg-button-primary text-white text-16-600 rounded-2xl px-8 py-3 transition-opacity hover:opacity-90">
Primary Button
</button>
<button className="bg-button-slate text-brand-black border-light text-16-600 rounded-2xl border px-8 py-3">
Secondary Button
</button>
<button className="bg-button-disabled text-disabled text-16-400 cursor-not-allowed rounded-2xl px-8 py-3">
Disabled Button
</button>
</div>
</section>
</div>
</main>
</div>
<main>
<Blur />
</main>
Comment on lines +5 to +7
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Jan 27, 2026

Choose a reason for hiding this comment

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

medium

The <Blur /> component is being rendered redundantly. This component is already applied to the top-level div in app/layout.tsx, providing a background effect across all pages. There's no need to call it again in page.tsx, and it's best to remove it as it causes unnecessary rendering.

Suggested change
<main>
<Blur />
</main>
<main>
{/* Add the content of this page here. The Blur effect is provided globally from the layout. */}
</main>

);
}
Loading
Loading