Redesign blog as desktop OS

2026-05-29 09:46:00 +09:00
parent ab585b5faa
commit 7f9bc1f83b
24 changed files with 1016 additions and 592 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,10 +1,11 @@
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
+import Script from 'next/script';
 import './globals.css';
 import Providers from './providers';
+import DesktopDock from '@/components/layout/DesktopDock';
+import DesktopMenuBar from '@/components/layout/DesktopMenuBar';
 import Sidebar from '@/components/layout/Sidebar';
-import TopHeader from '@/components/layout/TopHeader';
-import Script from 'next/script';
 import { THEME_INIT_SCRIPT } from '@/components/theme/theme';

 const pretendard = localFont({
@@ -29,12 +30,11 @@ export default function RootLayout({
      <head>
        <meta name="google-site-verification" content="cFJSK1ayy2Y4lqRKNv8wZ_vybg5De22zYCdbKSfvAJA" />
      </head>
-      <body className={`${pretendard.variable} ${pretendard.className} bg-[var(--color-page)] text-[var(--color-text)] antialiased`}>
+      <body className={`${pretendard.variable} ${pretendard.className} text-[var(--color-text)] antialiased`}>
        <Script id="theme-init" strategy="beforeInteractive">
          {THEME_INIT_SCRIPT}
        </Script>

-        {/* 🌟 Google Analytics 스크립트 */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-2GLCM9ZKMK"
          strategy="afterInteractive"
@@ -50,17 +50,13 @@ export default function RootLayout({
        </Script>

        <Providers>
-          <div className="min-h-screen flex">
-            {/* 사이드바 */}
+          <div className="min-h-screen">
            <Sidebar />
+            <DesktopMenuBar />
+            <DesktopDock />

-            {/* 메인 영역 */}
-            <main className="flex-1 transition-all duration-300 md:ml-72 w-full relative">
-              <TopHeader />
-
-              {/* 🛠️ 수정됨: max-w-4xl 제한을 제거하고 w-full로 변경 */}
-              {/* 이제 각 페이지(page.tsx)에서 원하는 너비를 설정할 수 있습니다. */}
-              <div className="w-full mx-auto p-4 md:p-8 pt-20">
+            <main className="relative w-full flex-1 transition-all duration-300 md:ml-72">
+              <div className="mx-auto w-full px-4 pb-28 pt-20 md:px-8 md:pb-32 md:pt-24">
                {children}
              </div>
            </main>