DaleStudy · hyoseong1994 · Jul 2, 2026 · Jun 28, 2026
@@ -3,7 +3,7 @@ import { Link } from "react-router";
 import { css } from "../../styled-system/css";
 
 interface UnderConstructionProps {
-  /** 페이지 이름 (예: "문서", "쇼케이스") */
+  /** 페이지 이름 (예: "문서", "모범사례") */
   title: string;
 }
 

@@ -1,6 +1,7 @@
 import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 import "daleui/styles.css";
 import "./index.css";
+import { Navigation } from "./sections/common/Navigation";
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
@@ -27,6 +28,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body>
+        <Navigation />
         {children}
         <ScrollRestoration />
         <Scripts />

@@ -7,7 +7,6 @@ import { findBlog, listBlog } from "../content/blog/loader";
 import { UserProfile } from "../components/UserProfile";
 import { Giscus } from "../components/Giscus";
 import DirectionalLink from "../components/DirectionalLink";
-import { Navigation } from "../sections/blog/Navigation";
 import { SITE_URL, blogOgImageUrl } from "../og/ogImage";
 import { SeoMeta } from "../components/SeoMeta";
 
@@ -53,15 +52,14 @@ export default function BlogSlug({ loaderData }: Route.ComponentProps) {
 
   return (
     <>
-      <Navigation />
+      <SeoMeta
+        title={`${frontmatter.title} | Dale UI`}
+        description={frontmatter.description ?? ""}
+        image={blogOgImageUrl(slug)}
+        type="article"
+        url={`${SITE_URL}/blog/${slug}`}
+      />
       <VStack as="main" className={css({ flex: 1 })}>
-        <SeoMeta
-          title={`${frontmatter.title} | Dale UI`}
-          description={frontmatter.description ?? ""}
-          image={blogOgImageUrl(slug)}
-          type="article"
-          url={`${SITE_URL}/blog/${slug}`}
-        />
         <Box
           as="article"
           ref={articleRef}

@@ -4,7 +4,6 @@ import type { Route } from "./+types/blog._index";
 import { css } from "../../styled-system/css";
 import { listBlog } from "../content/blog/loader";
 import { UserProfile } from "../components/UserProfile";
-import { Navigation } from "../sections/blog/Navigation";
 import { staticOgImageUrl } from "../og/ogImage";
 import { SeoMeta } from "../components/SeoMeta";
 
@@ -28,7 +27,6 @@ export default function BlogIndex({ loaderData }: Route.ComponentProps) {
   return (
     <>
       <SeoMeta title={title} description={description} image={image} />
-      <Navigation />
       <Box
         as="main"
         className={css({

@@ -5,7 +5,6 @@ import { Header } from "../sections/marketing/Header";
 import { How } from "../sections/marketing/How";
 import { Mission } from "../sections/marketing/Mission";
 import { Team } from "../sections/marketing/Team";
-import { Navigation } from "../sections/marketing/Navigation";
 import { Footer } from "../sections/marketing/Footer";
 import { staticOgImageUrl } from "../og/ogImage";
 import { SeoMeta } from "../components/SeoMeta";
@@ -59,7 +58,6 @@ export default function Home() {
   return (
     <>
       <SeoMeta title={title} description={description} image={image} />
-      <Navigation />
       <Header handleScrollToSection={setHashNavigation} />
       <Mission />
       <How />

@@ -3,9 +3,9 @@ import { UnderConstruction } from "../components/UnderConstruction";
 export default function ShowcaseIndex() {
   return (
     <>
-      <title>쇼케이스 | Dale UI</title>
-      <meta name="description" content="달레UI 쇼케이스 페이지입니다." />
-      <UnderConstruction title="쇼케이스" />
+      <title>모범사례 | Dale UI</title>
+      <meta name="description" content="달레UI 모범사례 페이지입니다." />
+      <UnderConstruction title="모범사례" />
     </>
   );
 }
@@ -1,42 +1,15 @@
-import { Icon, type IconProps, Link } from "daleui";
+import { Icon, Link } from "daleui";
 import { css } from "../../../../styled-system/css";
 import { useTheme } from "../../../hooks/useTheme";
-
-type IconName = IconProps["name"];
-
-const LINK_ITEMS: {
-  id: number;
-  label: string;
-  href: string;
-  icon: IconName;
-}[] = [
-  {
-    id: 1,
-    label: "깃허브",
-    href: "https://github.com/DaleStudy/daleui",
-    icon: "GitHub",
-  },
-  {
-    id: 2,
-    label: "스토리북",
-    href: "https://main--675790d317ba346348aa3490.chromatic.com/",
-    icon: "Storybook",
-  },
-  {
-    id: 3,
-    label: "피그마 디자인",
-    href: "https://www.figma.com/community/file/1559487636467651573",
-    icon: "Figma",
-  },
-];
+import { EXTERNAL_LINKS } from "./links";
 
 export function NavExternalLinks() {
   const { isDark, toggleTheme } = useTheme();
   return (
     <ul className={navExternalLinksStyle}>
-      {LINK_ITEMS.map((item) => (
+      {EXTERNAL_LINKS.map((item) => (
         <li
-          key={item.id}
+          key={item.href}
           className={css({ display: "flex", alignItems: "center" })}
         >
           <Link
@@ -72,10 +45,9 @@ export function NavExternalLinks() {
 
 const navExternalLinksStyle = css({
   display: "flex",
+  justifyContent: { base: "end", lg: "start" },
   gap: "24",
   alignItems: "center",
-  justifyContent: "end",
-  width: { base: "100%", lg: "auto" },
   px: { base: "16", lg: "0" },
   py: { base: "8", lg: "0" },
 });
@@ -1,30 +1,13 @@
 import { Link } from "react-router";
 import { css } from "../../../../styled-system/css";
-
-const LINK_ITEMS = [
-  {
-    id: 1,
-    label: "docs",
-    href: "/docs",
-  },
-  {
-    id: 2,
-    label: "showcase",
-    href: "/showcase",
-  },
-  {
-    id: 3,
-    label: "blog",
-    href: "/blog",
-  },
-];
+import { INTERNAL_LINKS } from "./links";
 
 export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
   return (
     <ul className={navLinksStyle}>
-      {LINK_ITEMS.map((item) => (
+      {INTERNAL_LINKS.map((item) => (
         <li
-          key={item.id}
+          key={item.href}
           className={css({ display: "flex", alignItems: "center" })}
         >
           <Link
@@ -50,10 +33,8 @@ export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
 
 const navLinksStyle = css({
   display: "flex",
+  flexShrink: 0,
   gap: "24",
   flexDirection: { base: "column", lg: "row" },
-  justifyContent: { base: "stretch", lg: "end" },
-  alignItems: { base: "stretch", lg: "center" },
-  width: "100%",
   px: { base: "16", lg: "24" },
 });
@@ -1,16 +1,24 @@
 import { Flex, Tag } from "daleui";
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
 import { css } from "../../../../styled-system/css";
 import { useTheme } from "../../../hooks/useTheme";
 
+function getSectionLabel(pathname: string): string | null {
+  if (pathname.startsWith("/docs")) return "문서";
+  if (pathname.startsWith("/showcase")) return "모범사례";
+  if (pathname.startsWith("/blog")) return "블로그";
+  return null;
+}
+
 export function NavLogo() {
   const { isDark } = useTheme();
+  const { pathname } = useLocation();
+  const sectionLabel = getSectionLabel(pathname);
 
   return (
     <Flex
       className={css({
-        px: "16",
-        py: "8",
+        p: "16",
       })}
       align="center"
       gap="8"
@@ -24,7 +32,7 @@ export function NavLogo() {
           })}
         />
       </Link>
-      <Tag tone="brand">Blog</Tag>
+      {sectionLabel ? <Tag tone="brand">{sectionLabel}</Tag> : null}
     </Flex>
   );
 }
@@ -0,0 +1,27 @@
+import { Box, Button, Icon, Link } from "daleui";
+import { css } from "../../../../styled-system/css";
+import { SPONSOR_URL } from "./links";
+
+export function SponsorsButton() {
+  return (
+    <Box
+      className={css({
+        display: { base: "none", lg: "flex" },
+      })}
+    >
+      <Link
+        href={SPONSOR_URL}
+        external
+        underline={false}
+        tone="neutral"
+        size="lg"
+        aria-label="후원하기"
+      >
+        <Button variant="outline">
+          <Icon name="handHeart" />
+          후원하기
+        </Button>
+      </Link>
+    </Box>
+  );
+}