Initial import

src/app/main/pages/ApisPage.tsx

@@ -0,0 +1,33 @@
+import { Card, Typography } from 'antd';
+import { ComponentSamplesLayout } from '../../../features/layout/component-sample-gallery';
+import { SampleWidgetsLayout } from '../../../features/layout/widget-sample-gallery';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+
+const { Paragraph } = Typography;
+const HIDDEN_COMPONENT_IDS = ['search-command-modal', 'window-ui'];
+
+export function ApisPage() {
+  const { selectedApiMenu, componentSampleEntries, widgetSampleEntries } = useMainLayoutContext();
+
+  return (
+    <div className="app-main-panel">
+      <Card
+        title={selectedApiMenu === 'components' ? 'APIs / Components' : 'APIs / Widgets'}
+        className="app-main-card"
+        bordered={false}
+      >
+        <Paragraph className="app-main-copy">
+          {selectedApiMenu === 'components'
+            ? '공통 UI 컴포넌트 샘플과 확장 샘플을 확인합니다.'
+            : '공통 위젯 샘플을 확인합니다.'}
+        </Paragraph>
+
+        {selectedApiMenu === 'components' ? (
+          <ComponentSamplesLayout entries={componentSampleEntries} excludeComponentIds={HIDDEN_COMPONENT_IDS} />
+        ) : (
+          <SampleWidgetsLayout entries={widgetSampleEntries} />
+        )}
+      </Card>
+    </div>
+  );
+}

src/app/main/pages/ChatPage.tsx

@@ -0,0 +1,20 @@
+import { ChatTypeManagementPage } from '../ChatTypeManagementPage';
+import { MainChatPanel } from '../MainChatPanel';
+import { ChatSourceChangesPage } from '../ChatSourceChangesPage';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+
+export function ChatPage() {
+  const { selectedChatMenu } = useMainLayoutContext();
+
+  return (
+    <div className="app-main-panel">
+      {selectedChatMenu === 'manage' ? (
+        <ChatTypeManagementPage />
+      ) : selectedChatMenu === 'changes' ? (
+        <ChatSourceChangesPage />
+      ) : (
+        <MainChatPanel initialView={selectedChatMenu} lockOuterScrollOnMobile />
+      )}
+    </div>
+  );
+}

src/app/main/pages/DocsPage.tsx

@@ -0,0 +1,29 @@
+import { Card, Space, Typography } from 'antd';
+import { MarkdownPreviewCard } from '../../../components/markdownPreview';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+import { getDocsSectionLabel } from '../routes';
+
+const { Text } = Typography;
+
+export function DocsPage() {
+  const { selectedDocsMenu, selectedDocs } = useMainLayoutContext();
+
+  return (
+    <div className="app-main-panel">
+      <Card
+        title={`Docs / ${getDocsSectionLabel(selectedDocsMenu)}`}
+        extra={<Text code>{selectedDocs.length} docs</Text>}
+        className="app-main-card"
+        bordered={false}
+      >
+        <Space direction="vertical" size={16} className="app-main-stack">
+          {selectedDocs.map((document) => (
+            <div key={document.id} id={`document-preview-${document.id}`} data-focus-id={`doc:${document.id}`}>
+              <MarkdownPreviewCard document={document} />
+            </div>
+          ))}
+        </Space>
+      </Card>
+    </div>
+  );
+}

src/app/main/pages/PlansPage.tsx

@@ -0,0 +1,75 @@
+import { BoardPage } from '../../../features/board';
+import { HistoryPage } from '../../../features/history';
+import { PlanBoardChartsPage, PlanBoardPage, PlanSchedulePage, ReleaseReviewPage } from '../../../features/planBoard';
+import { ServerCommandPage } from '../../../features/serverCommand';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+
+export function PlansPage() {
+  const {
+    selectedPlanMenu,
+    activePlanQuickFilter,
+    planQuickFilterRequestKey,
+    initialSelectedPlanId,
+    initialSelectedWorkId,
+  } = useMainLayoutContext();
+
+  if (selectedPlanMenu === 'board') {
+    return (
+      <div className="app-main-panel">
+        <BoardPage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'charts') {
+    return (
+      <div className="app-main-panel">
+        <PlanBoardChartsPage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'schedule') {
+    return (
+      <div className="app-main-panel">
+        <PlanSchedulePage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'release-review') {
+    return (
+      <div className="app-main-panel">
+        <ReleaseReviewPage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'history') {
+    return (
+      <div className="app-main-panel">
+        <HistoryPage />
+      </div>
+    );
+  }
+
+  if (selectedPlanMenu === 'server-command') {
+    return (
+      <div className="app-main-panel">
+        <ServerCommandPage />
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-main-panel">
+      <PlanBoardPage
+        statusFilter={selectedPlanMenu === 'release' ? 'done' : selectedPlanMenu}
+        quickFilter={activePlanQuickFilter}
+        quickFilterRequestKey={planQuickFilterRequestKey}
+        initialSelectedPlanId={initialSelectedPlanId}
+        initialSelectedWorkId={initialSelectedWorkId}
+      />
+    </div>
+  );
+}

src/app/main/pages/PlayPage.tsx

@@ -0,0 +1,17 @@
+import { LayoutPlaygroundView } from '../../../views/play/LayoutPlaygroundView';
+import { useMainLayoutContext } from '../layout/MainLayoutContext';
+import { resolveSavedLayoutIdFromMenuKey } from '../routes';
+
+export function PlayPage() {
+  const { selectedPlayMenu, setSavedLayouts } = useMainLayoutContext();
+  const selectedSavedLayoutId = resolveSavedLayoutIdFromMenuKey(selectedPlayMenu);
+
+  return (
+    <div className="app-main-panel app-main-panel--play">
+      {selectedPlayMenu === 'layout' ? <LayoutPlaygroundView onSavedLayoutsChange={setSavedLayouts} /> : null}
+      {selectedSavedLayoutId ? (
+        <LayoutPlaygroundView savedLayoutViewId={selectedSavedLayoutId} onSavedLayoutsChange={setSavedLayouts} />
+      ) : null}
+    </div>
+  );
+}