feat: 문서 Spotlight로 회사 소식을 노출합니다

AGENTS.md

@@ -90,4 +90,5 @@ bin/skeleton/cli.py ../src/content/ko/path/to/file.mdx
 - 작업 완료로 간주하기 전에 관련 targeted check를 실행합니다.
 - 문서 또는 skill만 변경한 경우 `git diff --check`와 관련 경로 검색을 우선합니다.
 - 코드 변경은 변경된 동작에 직접 연결되는 테스트를 먼저 실행하고, 위험도에 따라 lint, typecheck, build를 추가합니다.
+- 웹 렌더링 또는 브라우저 테스트는 사용자가 visible browser를 명시적으로 요청하지 않는 한 headless mode로 수행합니다.
 - 사용자가 명시적으로 요청하지 않는 한 local dev server를 시작하지 않습니다.

src/app/[lang]/internal/internal-page.module.css

@@ -0,0 +1,12 @@
+.internalPreviewGrid {
+  display: grid;
+  align-items: start;
+  gap: 32px;
+  grid-template-columns: minmax(0, 1fr) minmax(240px, 288px);
+}
+
+@media (max-width: 1023px) {
+  .internalPreviewGrid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

src/app/[lang]/internal/page.test.tsx

@@ -8,7 +8,7 @@ describe('/[lang]/internal page', () => {
     expect(generateStaticParams()).toEqual([{ lang: 'en' }, { lang: 'ja' }, { lang: 'ko' }]);
   });
 
-  it('renders the Korean internal page title and description only', async () => {
+  it('renders the Korean internal page title, description, and spotlight preview', async () => {
     const container = document.createElement('div');
     const result = render(await InternalPage({ params: Promise.resolve({ lang: 'ko' }) }), {
       baseElement: container,
@@ -20,6 +20,18 @@ describe('/[lang]/internal page', () => {
       within(result.container).getByText('검토와 구현 참고를 위해 유지 중인 내부 컴포넌트 및 페이지 예시 목록입니다.'),
     ).toBeTruthy();
     expect(within(result.container).queryByRole('list')).not.toBeInTheDocument();
+    expect(within(result.container).getByTestId('docs-spotlight-card')).toBeTruthy();
+  });
+
+  it('exposes the localized spotlight preview on the internal page', async () => {
+    const container = document.createElement('div');
+    const result = render(await InternalPage({ params: Promise.resolve({ lang: 'ko' }) }), {
+      baseElement: container,
+      container,
+    });
+
+    expect(within(result.container).getByTestId('docs-spotlight-card')).toBeTruthy();
+    expect(within(result.container).getByText('AI Work OS: 새로운 지능이 기업 안에서 일하는 방식')).toBeTruthy();
   });
 
   it('uses the same copy for route metadata', async () => {

src/app/[lang]/internal/page.tsx

@@ -1,4 +1,6 @@
 import type { Metadata } from 'next';
+import { DocsSpotlightSidebar } from '@/components/docs-spotlight-sidebar';
+import styles from './internal-page.module.css';
 
 type InternalPageParams = {
   lang: string;
@@ -66,29 +68,34 @@ export default async function InternalPage({ params }: InternalPageProps) {
         padding: '64px 24px',
       }}
     >
-      <h1
-        style={{
-          color: '#111318',
-          fontSize: '36px',
-          fontWeight: 700,
-          letterSpacing: '0',
-          lineHeight: 1.2,
-          margin: '0 0 16px',
-        }}
-      >
-        {copy.title}
-      </h1>
-      <p
-        style={{
-          color: '#454a53',
-          fontSize: '17px',
-          letterSpacing: '0',
-          lineHeight: 1.7,
-          margin: 0,
-        }}
-      >
-        {copy.description}
-      </p>
+      <div className={styles.internalPreviewGrid}>
+        <div>
+          <h1
+            style={{
+              color: '#111318',
+              fontSize: '36px',
+              fontWeight: 700,
+              letterSpacing: '0',
+              lineHeight: 1.2,
+              margin: '0 0 16px',
+            }}
+          >
+            {copy.title}
+          </h1>
+          <p
+            style={{
+              color: '#454a53',
+              fontSize: '17px',
+              letterSpacing: '0',
+              lineHeight: 1.7,
+              margin: 0,
+            }}
+          >
+            {copy.description}
+          </p>
+        </div>
+        <DocsSpotlightSidebar locale={lang} />
+      </div>
     </section>
   );
 }

src/app/[lang]/layout.tsx

@@ -1,4 +1,3 @@
-/* eslint-env node */
 import { Footer, Layout, Navbar } from 'nextra-theme-docs';
 import { Head } from 'nextra/components';
 import { getPageMap } from 'nextra/page-map';
@@ -10,6 +9,8 @@ import { LastUpdated } from '@/components/last-updated';
 import LanguageSelector2 from "@/components/language-selector2";
 import ConfluenceSourceLink from "@/components/confluence-source-link";
 import { QueryPieLogo } from '@/components/querypie-logo';
+import { DocsSpotlightSidebar } from '@/components/docs-spotlight-sidebar';
+import { filterDynamicPageMapRoutes } from '@/lib/nextra-page-map';
 
 const defaultMetadata: Metadata = {
   title: {
@@ -53,7 +54,7 @@ export default async function RootLayout({ children, params }) {
     />
   );
 
-  const pageMap = await getPageMap(`/${lang || 'en'}`);
+  const pageMap = filterDynamicPageMapRoutes(await getPageMap(`/${lang || 'en'}`));
 
   return (
     <html lang={lang} dir="ltr" suppressHydrationWarning>
@@ -85,7 +86,12 @@ export default async function RootLayout({ children, params }) {
                 <p>On This Page</p>
               </>
             ),
-            extraContent: <ConfluenceSourceLink/>,
+            extraContent: (
+              <>
+                <DocsSpotlightSidebar locale={lang} />
+                <ConfluenceSourceLink/>
+              </>
+            ),
           }}
           lastUpdated={<LastUpdated locale={lang} />}
         >

src/components/docs-spotlight-card.module.css

@@ -0,0 +1,180 @@
+.spotlightCard {
+  margin-bottom: 16px;
+  width: min(100%, 288px);
+}
+
+.spotlightShell {
+  overflow: hidden;
+  border: 1px solid #d4d8e0;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
+  padding: 16px;
+}
+
+.spotlightHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.spotlightKicker {
+  overflow-wrap: anywhere;
+  color: #45464d;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 18px;
+}
+
+.iconButton {
+  display: inline-flex;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #d4d8e0;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #45464d;
+  cursor: pointer;
+  padding: 0;
+  transition:
+    border-color 140ms ease,
+    color 140ms ease;
+}
+
+.iconButton:hover {
+  border-color: #111318;
+  color: #111318;
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+}
+
+.spotlightContent {
+  display: grid;
+  gap: 12px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.spotlightImageFrame {
+  display: block;
+  height: 128px;
+  overflow: hidden;
+  border: 1px solid rgba(212, 216, 224, 0.7);
+  border-radius: 6px;
+  background: #f3f5f8;
+}
+
+.spotlightImage {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 220ms ease;
+}
+
+.spotlightContent:hover .spotlightImage {
+  transform: scale(1.02);
+}
+
+.spotlightCopy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.spotlightTitle {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #191c1e;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 21px;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.spotlightMeta {
+  color: #5b616b;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 17px;
+}
+
+.spotlightCta {
+  display: flex;
+  min-height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #111318;
+  border-radius: 6px;
+  color: #111318;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 18px;
+  transition:
+    background 140ms ease,
+    color 140ms ease;
+}
+
+.spotlightContent:hover .spotlightCta {
+  background: #111318;
+  color: #ffffff;
+}
+
+.spotlightFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 16px;
+  border-top: 1px solid rgba(212, 216, 224, 0.8);
+  padding-top: 12px;
+}
+
+.spotlightIndicators {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.spotlightIndicator {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #c6cbd4;
+}
+
+.activeSpotlightIndicator {
+  background: #111318;
+}
+
+.spotlightControls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.iconButton:focus-visible,
+.spotlightContent:focus-visible {
+  outline: 2px solid rgba(17, 19, 24, 0.28);
+  outline-offset: 4px;
+}
+
+@media (max-width: 1023px) {
+  .spotlightCard {
+    display: none;
+  }
+}