Skip to content

Feat/global component #15

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
dasosann merged 3 commits into from
Jan 27, 2026
Merged

Feat/global component #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ebf03d3
feat: 토큰 생성 스크립트 개선 및 CSS 변수 정리
dasosann Jan 27, 2026
1f1bd31
feat: Blur 컴포넌트 추가 및 배경색 추가
dasosann Jan 27, 2026
51bc1d8
fix: 코드리뷰 반영
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} flex justify-center bg-white antialiased`}
>
<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 />
Comment on lines +5 to +6
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

전역 레이아웃(app/layout.tsx)에 Blur 컴포넌트가 이미 추가되어 있습니다. page.tsx에 Blur 컴포넌트를 다시 추가하면 중복 렌더링이 발생하여 의도치 않은 결과를 초래할 수 있습니다. 전역 배경 효과라면 layout.tsx에서만 렌더링하는 것이 올바른 접근입니다.

Suggested change
<main>
<Blur />
<main>
{/* <Blur /> */}
</main>

</main>
);
}
Loading
Loading