feat(V2-1c): packages/ui 추출 — DS 컴포넌트 + theme + theme-vars 분리

packages/ui (@d3ro/ui) 신규:
- src/theme.ts (d3roPalette/d3roTypo/d3roShadow/d3roRadius SSOT)
- src/theme-vars.ts (팝업/main 프로세스용 CSS 변수 맵)
- src/components/ds/ (CrtDisplay, InstrumentPanel, Led, MetalCard,
  MetalDial, PhosphorText, PhysicalButton, ScreenPanel, ButtonGroup)
- src/index.ts barrel
- subpath exports: ./theme, ./theme-vars, ./components/ds
- React/MUI/Emotion은 peerDependencies로 선언
- @d3ro/core만 직접 의존성

apps/desktop/src/shared/ 디렉토리 완전 제거:
- theme-vars가 마지막 남은 파일이었음
- tsconfig include에서 src/shared/**/* 제거

일괄 치환 (renderer 전역):
- ../theme, ../../theme, ./theme → @d3ro/ui/theme
- ../components/ds, ../../components/ds, ./ds, ../ds → @d3ro/ui/components/ds
- ../ds/<Component>, ../../ds/<Component> → @d3ro/ui/components/ds
  (세부 파일 import는 barrel로 통합)
- @shared/theme-vars → @d3ro/ui/theme-vars (WindowManager)

apps/desktop 설정:
- package.json: @d3ro/ui: '*' dep 추가
- tsconfig.node/web.json: @shared/* paths 완전 제거, @d3ro/ui,
  @d3ro/ui/* paths 추가
- electron.vite.config.ts: @shared alias 제거, @d3ro/ui alias 추가,
  externalize exclude에 @d3ro/ui 추가
- vitest.config.ts: alias 교체

DS 컴포넌트 내부의 '../../theme' 상대 경로는 packages/ui 구조에서
동일하게 해결되어 그대로 유효.

검증: typecheck + build + dev 런타임 모두 통과.

apps/desktop/electron.vite.config.ts

@@ -3,19 +3,23 @@ import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 import react from '@vitejs/plugin-react'
 
 const sharedAlias = {
-  '@shared': resolve(__dirname, 'src/shared'),
-  '@d3ro/core': resolve(__dirname, '../../packages/core/src')
+  '@d3ro/core': resolve(__dirname, '../../packages/core/src'),
+  '@d3ro/ui': resolve(__dirname, '../../packages/ui/src')
 }
 
+const workspaceExclude = ['@d3ro/core', '@d3ro/ui']
+
 export default defineConfig({
   main: {
     plugins: [
-      externalizeDepsPlugin({ exclude: ['nanoid', 'electron-store', '@d3ro/core'] })
+      externalizeDepsPlugin({
+        exclude: ['nanoid', 'electron-store', ...workspaceExclude]
+      })
     ],
     resolve: { alias: sharedAlias }
   },
   preload: {
-    plugins: [externalizeDepsPlugin({ exclude: ['@d3ro/core'] })],
+    plugins: [externalizeDepsPlugin({ exclude: workspaceExclude })],
     build: {
       rollupOptions: {
         input: {

apps/desktop/package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@d3ro/core": "*",
+    "@d3ro/ui": "*",
     "@electron-toolkit/preload": "^3.0.2",
     "@electron-toolkit/utils": "^4.0.0",
     "@emotion/react": "^11.14.0",

apps/desktop/src/main/windows/WindowManager.ts

@@ -8,7 +8,7 @@ import { WINDOW_SIZE } from '@d3ro/core/constants'
 import { getLogger } from '../services/LoggerService'
 import { getIsQuitting } from '../lifecycle'
 import { configGet } from '../services/ConfigService'
-import { buildPopupThemeCss } from '@shared/theme-vars'
+import { buildPopupThemeCss } from '@d3ro/ui/theme-vars'
 
 const logger = getLogger('WindowManager')
 

apps/desktop/src/renderer/App.tsx

@@ -4,7 +4,7 @@
 
 import { useState, useEffect, useMemo, useRef } from 'react'
 import { ThemeProvider, CssBaseline, useMediaQuery } from '@mui/material'
-import { getTheme } from './theme'
+import { getTheme } from '@d3ro/ui/theme'
 import { I18nProvider } from './i18n'
 import { AppLayout } from './components/AppLayout'
 import { UpgradePromptModal } from './components/UpgradePromptModal'

apps/desktop/src/renderer/components/AppLayout.tsx

@@ -11,7 +11,7 @@ import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver'
 import AutoStoriesIcon from '@mui/icons-material/AutoStories'
 import GroupsIcon from '@mui/icons-material/Groups'
 import SettingsIcon from '@mui/icons-material/Settings'
-import { Led } from './ds'
+import { Led } from '@d3ro/ui/components/ds'
 import { DashboardPage } from '../pages/DashboardPage'
 import { HistoryPage } from '../pages/HistoryPage'
 import { DictionaryPage } from '../pages/DictionaryPage'
@@ -23,7 +23,7 @@ import { SettingsModal } from './SettingsModal'
 import { LicenseModal } from './LicenseModal'
 import { OnboardingModal } from './OnboardingModal'
 import { StatusBar } from './StatusBar'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow, d3roRadius } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow, d3roRadius } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type { TranslationKey } from '../i18n'
 import type { LicenseTier } from '@d3ro/core/types'

apps/desktop/src/renderer/components/FileDropZone.tsx

@@ -6,8 +6,8 @@ import { Box, LinearProgress, IconButton, Tooltip } from '@mui/material'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import CloseIcon from '@mui/icons-material/Close'
 import UploadFileIcon from '@mui/icons-material/UploadFile'
-import { MetalCard, PhosphorText, Led } from './ds'
-import { d3roPalette, d3roTypo } from '../theme'
+import { MetalCard, PhosphorText, Led } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roTypo } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type {
   FileTranscriptionProgress,

apps/desktop/src/renderer/components/HotkeyRecordModal.tsx

@@ -15,7 +15,7 @@ import {
   Stack,
   Typography,
 } from '@mui/material'
-import { d3roPalette } from '../theme'
+import { d3roPalette } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type { HotkeyBinding } from '@d3ro/core/types'
 

apps/desktop/src/renderer/components/LicenseModal.tsx

@@ -21,8 +21,8 @@ import {
 import CloseIcon from '@mui/icons-material/Close'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import CancelIcon from '@mui/icons-material/Cancel'
-import { MetalCard, PhosphorText, Led, ScreenPanel, PhysicalButton } from './ds'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius, d3roShadow } from '../theme'
+import { MetalCard, PhosphorText, Led, ScreenPanel, PhysicalButton } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type { LicenseInfo, LicenseTier, TierComparison, UsageQuota } from '@d3ro/core/types'
 

apps/desktop/src/renderer/components/LicenseTab.tsx

@@ -12,7 +12,7 @@ import {
 } from '@mui/material'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import CancelIcon from '@mui/icons-material/Cancel'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type {
   LicenseInfo,

apps/desktop/src/renderer/components/OllamaGuideModal.tsx

@@ -15,8 +15,8 @@ import {
 import CloseIcon from '@mui/icons-material/Close'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
-import { d3roPalette, d3roFontMono, d3roShadow } from '../theme'
-import { Led } from './ds'
+import { d3roPalette, d3roFontMono, d3roShadow } from '@d3ro/ui/theme'
+import { Led } from '@d3ro/ui/components/ds'
 import { useI18n } from '../i18n'
 
 interface OllamaGuideModalProps {

apps/desktop/src/renderer/components/OnboardingModal.tsx

@@ -15,8 +15,8 @@ import MicIcon from '@mui/icons-material/Mic'
 import KeyboardIcon from '@mui/icons-material/Keyboard'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-import { d3roPalette, d3roFontMono, d3roShadow } from '../theme'
-import { Led } from './ds'
+import { d3roPalette, d3roFontMono, d3roShadow } from '@d3ro/ui/theme'
+import { Led } from '@d3ro/ui/components/ds'
 import { HotkeyRecordModal } from './HotkeyRecordModal'
 import { useI18n } from '../i18n'
 import type { HotkeyBinding, AudioDevice } from '@d3ro/core/types'

apps/desktop/src/renderer/components/ProBadge.tsx

@@ -4,7 +4,7 @@
 
 import { Box, Typography } from '@mui/material'
 import LockIcon from '@mui/icons-material/Lock'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
 import { useProFeature } from '../hooks/useProFeature'
 import { useI18n } from '../i18n'
 import type { Feature } from '@d3ro/core/types'

apps/desktop/src/renderer/components/SettingsModal.tsx

@@ -31,7 +31,7 @@ import MicIcon from '@mui/icons-material/Mic'
 import LockIcon from '@mui/icons-material/Lock'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import CancelIcon from '@mui/icons-material/Cancel'
-import { d3roPalette, d3roFontMono, d3roShadow } from '../theme'
+import { d3roPalette, d3roFontMono, d3roShadow } from '@d3ro/ui/theme'
 import { HotkeyRecordModal } from './HotkeyRecordModal'
 import { LicenseTab } from './LicenseTab'
 import { useI18n, LOCALE_META } from '../i18n'

apps/desktop/src/renderer/components/StatusBar.tsx

@@ -5,8 +5,8 @@
 import { useState, useEffect } from 'react'
 import { Box, Typography, Fade, IconButton } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
-import { Led } from './ds'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow, d3roRadius } from '../theme'
+import { Led } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow, d3roRadius } from '@d3ro/ui/theme'
 import { OllamaGuideModal } from './OllamaGuideModal'
 import { useI18n } from '../i18n'
 import type { LLMStatus } from '@d3ro/core/types'

apps/desktop/src/renderer/components/TemplateSection.tsx

@@ -7,9 +7,9 @@ import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
 import EditIcon from '@mui/icons-material/Edit'
 import PlayArrowIcon from '@mui/icons-material/PlayArrow'
-import { MetalCard, PhosphorText, Led, PhysicalButton } from './ds'
+import { MetalCard, PhosphorText, Led, PhysicalButton } from '@d3ro/ui/components/ds'
 import { PageHeader, EmptyStateCard } from './shared'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type { DictationTemplate, TemplateField, TemplateSessionInfo } from '@d3ro/core/types'
 

apps/desktop/src/renderer/components/UpgradePromptModal.tsx

@@ -14,7 +14,7 @@ import {
 } from '@mui/material'
 import LockIcon from '@mui/icons-material/Lock'
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius, d3roShadow } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type { UpgradePromptEvent, UsageQuota } from '@d3ro/core/types'
 

apps/desktop/src/renderer/components/meeting/AddDocumentDialog.tsx

@@ -11,10 +11,10 @@ import {
   TextField,
   LinearProgress,
 } from '@mui/material'
-import { MetalCard } from '../ds/MetalCard'
-import { PhosphorText } from '../ds/PhosphorText'
-import { PhysicalButton } from '../ds/PhysicalButton'
-import { d3roPalette, d3roTypo, d3roRadius, d3roShadow } from '../../theme'
+import { MetalCard } from '@d3ro/ui/components/ds'
+import { PhosphorText } from '@d3ro/ui/components/ds'
+import { PhysicalButton } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
 import { useI18n } from '../../i18n'
 
 interface TemplateItem {

apps/desktop/src/renderer/components/meeting/DocumentTab.tsx

@@ -6,8 +6,8 @@ import { Box } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { MarkdownEditor } from './MarkdownEditor'
 import { ExportMenu } from './ExportMenu'
-import { PhysicalButton } from '../ds/PhysicalButton'
-import { d3roPalette, d3roTypo } from '../../theme'
+import { PhysicalButton } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roTypo } from '@d3ro/ui/theme'
 import { useI18n } from '../../i18n'
 import type { MeetingExportFormat } from '@d3ro/core/types'
 

apps/desktop/src/renderer/components/meeting/EditableSegment.tsx

@@ -3,7 +3,7 @@
 
 import { useState, useRef, useCallback } from 'react'
 import { Box, TextField, Tooltip, Chip } from '@mui/material'
-import { d3roPalette, d3roFontMono } from '../../theme'
+import { d3roPalette, d3roFontMono } from '@d3ro/ui/theme'
 import { useI18n } from '../../i18n'
 
 // Phase 15.5: 화자별 색상 매핑 (d3roPalette SSOT)

apps/desktop/src/renderer/components/meeting/ExportMenu.tsx

@@ -4,8 +4,8 @@
 import { useState, useCallback } from 'react'
 import { Menu, MenuItem } from '@mui/material'
 import FileDownloadIcon from '@mui/icons-material/FileDownload'
-import { PhysicalButton } from '../ds/PhysicalButton'
-import { d3roPalette, d3roTypo, d3roFontMono, d3roRadius, d3roShadow } from '../../theme'
+import { PhysicalButton } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roTypo, d3roFontMono, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
 import { useI18n } from '../../i18n'
 import type { MeetingExportFormat } from '@d3ro/core/types'
 

apps/desktop/src/renderer/components/meeting/MarkdownEditor.tsx

@@ -4,8 +4,8 @@
 import { useState } from 'react'
 import { Box } from '@mui/material'
 import { MarkdownRenderer } from './MarkdownRenderer'
-import { PhysicalButton } from '../ds/PhysicalButton'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow, d3roRadius } from '../../theme'
+import { PhysicalButton } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow, d3roRadius } from '@d3ro/ui/theme'
 import { useI18n } from '../../i18n'
 
 interface MarkdownEditorProps {

apps/desktop/src/renderer/components/meeting/MarkdownRenderer.tsx

@@ -4,7 +4,7 @@
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Box } from '@mui/material'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '../../theme'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
 import type { Components } from 'react-markdown'
 
 interface MarkdownRendererProps {

apps/desktop/src/renderer/components/meeting/MeetingChatPanel.tsx

@@ -7,9 +7,9 @@ import SendIcon from '@mui/icons-material/Send'
 import DeleteSweepIcon from '@mui/icons-material/DeleteSweep'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { PhosphorText } from '../ds/PhosphorText'
-import { PhysicalButton } from '../ds/PhysicalButton'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow } from '../../theme'
+import { PhosphorText } from '@d3ro/ui/components/ds'
+import { PhysicalButton } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roShadow } from '@d3ro/ui/theme'
 import { useI18n } from '../../i18n'
 import type { MeetingChatMessage } from '@d3ro/core/types'
 

apps/desktop/src/renderer/components/meeting/MeetingDetailTabs.tsx

@@ -18,8 +18,8 @@ import { TranscriptTab } from './TranscriptTab'
 import { DocumentTab } from './DocumentTab'
 import { AddDocumentDialog } from './AddDocumentDialog'
 import { MeetingChatPanel } from './MeetingChatPanel'
-import { PhosphorText } from '../ds/PhosphorText'
-import { d3roPalette, d3roFontMono, d3roTypo } from '../../theme'
+import { PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roFontMono, d3roTypo } from '@d3ro/ui/theme'
 import { useI18n } from '../../i18n'
 import type {
   MeetingSessionDetail,

apps/desktop/src/renderer/components/meeting/TranscriptTab.tsx

@@ -4,9 +4,9 @@
 import { useState, useCallback } from 'react'
 import { Box, Switch, FormControlLabel, LinearProgress, Snackbar, Alert } from '@mui/material'
 import { EditableSegment } from './EditableSegment'
-import { PhysicalButton } from '../ds/PhysicalButton'
-import { PhosphorText } from '../ds/PhosphorText'
-import { d3roPalette, d3roFontMono, d3roTypo } from '../../theme'
+import { PhysicalButton } from '@d3ro/ui/components/ds'
+import { PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roFontMono, d3roTypo } from '@d3ro/ui/theme'
 import { useI18n } from '../../i18n'
 import FileDownloadIcon from '@mui/icons-material/FileDownload'
 import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'

apps/desktop/src/renderer/components/shared/EmptyStateCard.tsx

@@ -2,7 +2,7 @@
 // 공유: 데이터 없음 상태 카드
 
 import { Box } from '@mui/material'
-import { MetalCard, PhosphorText } from '../ds'
+import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
 
 interface EmptyStateCardProps {
   message: string

apps/desktop/src/renderer/components/shared/HistoryEntryCard.tsx

@@ -10,8 +10,8 @@ import LocalOfferIcon from '@mui/icons-material/LocalOffer'
 import CloseIcon from '@mui/icons-material/Close'
 import SummarizeIcon from '@mui/icons-material/Summarize'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { MetalCard, Led } from '../ds'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '../../theme'
+import { MetalCard, Led } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
 import { useI18n } from '../../i18n'
 import { formatDuration } from '../../utils/formatters'
 import type { HistoryEntry, MemoTag, MeetingSummaryResult } from '@d3ro/core/types'

apps/desktop/src/renderer/components/shared/PageHeader.tsx

@@ -2,8 +2,8 @@
 // 공유: 각인 스타일 페이지 헤더 (타이틀 + 카운트 + 옵션 액션)
 
 import { Box } from '@mui/material'
-import { PhosphorText } from '../ds'
-import { d3roPalette } from '../../theme'
+import { PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette } from '@d3ro/ui/theme'
 
 interface PageHeaderProps {
   title: string

apps/desktop/src/renderer/components/shared/SearchInput.tsx

@@ -3,7 +3,7 @@
 
 import { TextField, InputAdornment } from '@mui/material'
 import SearchIcon from '@mui/icons-material/Search'
-import { d3roPalette, d3roFontMono, d3roTypo } from '../../theme'
+import { d3roPalette, d3roFontMono, d3roTypo } from '@d3ro/ui/theme'
 
 interface SearchInputProps {
   value: string

apps/desktop/src/renderer/pages/CommandsPage.tsx

@@ -10,9 +10,9 @@ import EditIcon from '@mui/icons-material/Edit'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import PlayArrowIcon from '@mui/icons-material/PlayArrow'
 import LinkIcon from '@mui/icons-material/Link'
-import { MetalCard, PhosphorText, Led, ScreenPanel } from '../components/ds'
+import { MetalCard, PhosphorText, Led, ScreenPanel } from '@d3ro/ui/components/ds'
 import { PageHeader, EmptyStateCard } from '../components/shared'
-import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import { TemplateSection } from '../components/TemplateSection'
 import type { VoiceCommandRule, VoiceCommandKeyword, KeywordMatchMode, LLMChain, ChainStep } from '@d3ro/core/types'

apps/desktop/src/renderer/pages/DashboardPage.tsx

@@ -4,9 +4,9 @@
 
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { Box } from '@mui/material'
-import { CrtDisplay, InstrumentPanel, Led, MetalCard, PhosphorText, ScreenPanel, ButtonGroup, PhysicalButton } from '../components/ds'
+import { CrtDisplay, InstrumentPanel, Led, MetalCard, PhosphorText, ScreenPanel, ButtonGroup, PhysicalButton } from '@d3ro/ui/components/ds'
 import { EmptyStateCard, HistoryEntryCard } from '../components/shared'
-import { d3roPalette, d3roTypo } from '../theme'
+import { d3roPalette, d3roTypo } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import { formatRecordingTime, formatRecordingTimeUnit, formatNumber, getDateKey } from '../utils/formatters'
 import { FileDropZone } from '../components/FileDropZone'

apps/desktop/src/renderer/pages/DictionaryPage.tsx

@@ -6,9 +6,9 @@ import { Box, TextField, Button, IconButton, Dialog, DialogTitle, DialogContent,
 import AddIcon from '@mui/icons-material/Add'
 import DeleteIcon from '@mui/icons-material/Delete'
 import EditIcon from '@mui/icons-material/Edit'
-import { MetalCard, PhosphorText } from '../components/ds'
+import { MetalCard, PhosphorText } from '@d3ro/ui/components/ds'
 import { PageHeader, SearchInput, EmptyStateCard } from '../components/shared'
-import { d3roPalette, d3roFontMono, d3roTypo } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type { DictionaryEntry, DictionaryPage as DictPageData } from '@d3ro/core/types'
 

apps/desktop/src/renderer/pages/HistoryPage.tsx

@@ -5,8 +5,8 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { Box, Chip, IconButton, Tooltip } from '@mui/material'
 import FileDownloadIcon from '@mui/icons-material/FileDownload'
-import { PhosphorText } from '../components/ds'
-import { d3roPalette, d3roTypo, d3roFontMono, d3roRadius } from '../theme'
+import { PhosphorText } from '@d3ro/ui/components/ds'
+import { d3roPalette, d3roTypo, d3roFontMono, d3roRadius } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import { getDateKey } from '../utils/formatters'
 import { EmptyStateCard, SearchInput, PageHeader, HistoryEntryCard } from '../components/shared'

apps/desktop/src/renderer/pages/KnowledgeBasePage.tsx

@@ -10,9 +10,9 @@ import RefreshIcon from '@mui/icons-material/Refresh'
 import SearchIcon from '@mui/icons-material/Search'
 import SendIcon from '@mui/icons-material/Send'
 import DescriptionIcon from '@mui/icons-material/Description'
-import { MetalCard, PhosphorText, Led, PhysicalButton, ScreenPanel } from '../components/ds'
+import { MetalCard, PhosphorText, Led, PhysicalButton, ScreenPanel } from '@d3ro/ui/components/ds'
 import { PageHeader, EmptyStateCard } from '../components/shared'
-import { d3roPalette, d3roFontMono, d3roTypo } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type { RAGDocument, RAGQueryResult, RAGIndexProgress } from '@d3ro/core/types'
 

apps/desktop/src/renderer/pages/MeetingModePage.tsx

@@ -12,11 +12,11 @@ import {
 import AddIcon from '@mui/icons-material/Add'
 import StopIcon from '@mui/icons-material/Stop'
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
-import { MetalCard, PhosphorText, Led, PhysicalButton, ScreenPanel } from '../components/ds'
+import { MetalCard, PhosphorText, Led, PhysicalButton, ScreenPanel } from '@d3ro/ui/components/ds'
 import { MeetingDetailTabs } from '../components/meeting/MeetingDetailTabs'
 import { EditableSegment } from '../components/meeting/EditableSegment'
 import { PageHeader, EmptyStateCard } from '../components/shared'
-import { d3roPalette, d3roFontMono, d3roTypo } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type {
   MeetingSessionSummary,

apps/desktop/src/renderer/pages/VoiceConversationPage.tsx

@@ -9,9 +9,9 @@ import StopIcon from '@mui/icons-material/Stop'
 import SendIcon from '@mui/icons-material/Send'
 import DeleteSweepIcon from '@mui/icons-material/DeleteSweep'
 import CancelIcon from '@mui/icons-material/Cancel'
-import { MetalCard, PhosphorText, Led, PhysicalButton, ScreenPanel, InstrumentPanel } from '../components/ds'
+import { MetalCard, PhosphorText, Led, PhysicalButton, ScreenPanel, InstrumentPanel } from '@d3ro/ui/components/ds'
 import { PageHeader } from '../components/shared'
-import { d3roPalette, d3roFontMono, d3roTypo } from '../theme'
+import { d3roPalette, d3roFontMono, d3roTypo } from '@d3ro/ui/theme'
 import { useI18n } from '../i18n'
 import type {
   ConversationState,

apps/desktop/tsconfig.node.json

@@ -5,9 +5,10 @@
     "outDir": "./out",
     "baseUrl": ".",
     "paths": {
-      "@shared/*": ["src/shared/*"],
       "@d3ro/core": ["../../packages/core/src/index.ts"],
-      "@d3ro/core/*": ["../../packages/core/src/*"]
+      "@d3ro/core/*": ["../../packages/core/src/*"],
+      "@d3ro/ui": ["../../packages/ui/src/index.ts"],
+      "@d3ro/ui/*": ["../../packages/ui/src/*"]
     },
     "strict": true,
     "noImplicitAny": true,
@@ -21,7 +22,6 @@
   "include": [
     "src/main/**/*",
     "src/preload/**/*",
-    "src/shared/**/*",
     "electron.vite.config.ts"
   ]
 }

apps/desktop/tsconfig.web.json

@@ -5,9 +5,10 @@
     "outDir": "./out",
     "baseUrl": ".",
     "paths": {
-      "@shared/*": ["src/shared/*"],
       "@d3ro/core": ["../../packages/core/src/index.ts"],
-      "@d3ro/core/*": ["../../packages/core/src/*"]
+      "@d3ro/core/*": ["../../packages/core/src/*"],
+      "@d3ro/ui": ["../../packages/ui/src/index.ts"],
+      "@d3ro/ui/*": ["../../packages/ui/src/*"]
     },
     "jsx": "react-jsx",
     "strict": true,
@@ -20,7 +21,6 @@
     "skipLibCheck": true
   },
   "include": [
-    "src/renderer/**/*",
-    "src/shared/**/*"
+    "src/renderer/**/*"
   ]
 }

apps/desktop/vitest.config.ts

@@ -17,8 +17,8 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      '@shared': resolve(__dirname, 'src/shared'),
-      '@d3ro/core': resolve(__dirname, '../../packages/core/src')
+      '@d3ro/core': resolve(__dirname, '../../packages/core/src'),
+      '@d3ro/ui': resolve(__dirname, '../../packages/ui/src')
     }
   }
 })

memory/project_status.md

@@ -8,7 +8,8 @@
 **V1 (Electron) 완료** → **V2 (Monorepo) 진행 중**
 - Phase V2-1a ✅ 완료 (Monorepo 구조 이동)
 - Phase V2-1b ✅ 완료 (packages/core 추출)
-- 다음: Phase V2-1c (packages/ui 추출) — 별도 세션
+- Phase V2-1c ✅ 완료 (packages/ui 추출)
+- 다음: Phase V2-1d (packages/i18n 추출)
 
 ## V1 완료 페이즈
 
@@ -38,9 +39,34 @@
 |---|---|---|
 | V2-1a | npm workspaces + apps/desktop으로 V1 이동 | ✅ 완료 |
 | V2-1b | packages/core 추출 (types, errors, ipc-channels, constants, utils) | ✅ 완료 |
-| V2-1c | packages/ui 추출 (DS 컴포넌트 + theme + theme-vars) | ⏸️ 대기 |
+| V2-1c | packages/ui 추출 (DS 컴포넌트 + theme + theme-vars) | ✅ 완료 |
 | V2-1d | packages/i18n 추출 (locale JSON + 훅) | ⏸️ 대기 |
 
+**V2-1c 완료 내역**
+- `packages/ui/` (@d3ro/ui) 신규 생성:
+  - `src/theme.ts` (d3roPalette/d3roTypo/d3roShadow SSOT 전체)
+  - `src/theme-vars.ts` (팝업/main 프로세스용 CSS 변수 맵)
+  - `src/components/ds/{CrtDisplay, InstrumentPanel, Led, MetalCard, MetalDial, PhosphorText, PhysicalButton, ScreenPanel, ButtonGroup, index}.tsx`
+  - `src/index.ts` barrel
+- `packages/ui/package.json`: React/MUI/Emotion은 **peerDependencies**, `@d3ro/core`만 직접 dep
+- `apps/desktop/src/shared/` 디렉토리 완전 제거 (theme-vars가 마지막이었음)
+- subpath exports: `./theme`, `./theme-vars`, `./components/ds`
+- DS 컴포넌트 내부 `../../theme` 상대 경로는 그대로 유효 (packages/ui 내부에서 해결)
+- **일괄 치환**:
+  - `../theme`, `../../theme`, `./theme` → `@d3ro/ui/theme`
+  - `../components/ds`, `../../components/ds`, `./ds`, `../ds` → `@d3ro/ui/components/ds`
+  - `../ds/<Component>`, `../../ds/<Component>` → `@d3ro/ui/components/ds` (세부 파일 import는 barrel로 통합)
+  - `@shared/theme-vars` → `@d3ro/ui/theme-vars` (WindowManager 1건)
+- `apps/desktop/tsconfig.node/web.json`: `@shared/*` paths 완전 제거, `@d3ro/ui`, `@d3ro/ui/*` paths 추가, `include`에서 `src/shared/**/*` 제거
+- `electron.vite.config.ts`: `@shared` alias 제거, `@d3ro/ui` alias 추가, externalize exclude에 `@d3ro/ui` 추가
+- `vitest.config.ts`: alias 교체
+
+**V2-1c 검증**
+- `typecheck` ✅
+- `build` ✅
+- `dev` 런타임 ✅ (DB/핫키/Ollama/Main window 정상)
+- `apps/desktop/src/shared/` 디렉토리 자체가 사라져 `@shared/*`는 이제 프로젝트에 존재하지 않음
+
 **V2-1b 완료 내역**
 - `packages/core/` 패키지 신규: `@d3ro/core`, subpath exports (types/errors/ipc-channels/constants/utils/*), docx dep 포함
 - 6개 파일 `git mv`로 `packages/core/src/`로 이동:

package-lock.json

@@ -27,6 +27,7 @@
       "license": "MIT",
       "dependencies": {
         "@d3ro/core": "*",
+        "@d3ro/ui": "*",
         "@electron-toolkit/preload": "^3.0.2",
         "@electron-toolkit/utils": "^4.0.0",
         "@emotion/react": "^11.14.0",
@@ -399,6 +400,10 @@
       "resolved": "apps/desktop",
       "link": true
     },
+    "node_modules/@d3ro/ui": {
+      "resolved": "packages/ui",
+      "link": true
+    },
     "node_modules/@develar/schema-utils": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/@develar/schema-utils/-/schema-utils-2.6.5.tgz",
@@ -12814,6 +12819,26 @@
       "devDependencies": {
         "@types/node": "^22.13.0"
       }
+    },
+    "packages/ui": {
+      "name": "@d3ro/ui",
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@d3ro/core": "*"
+      },
+      "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^7.0.0",
+        "@mui/material": "^7.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
     }
   }
 }

packages/ui/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@d3ro/ui",
+  "version": "1.0.0",
+  "private": true,
+  "description": "D3RO Voice 공유 UI — 디자인 시스템 컴포넌트 + 테마 토큰 + CSS 변수 맵",
+  "license": "MIT",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./theme": {
+      "types": "./src/theme.ts",
+      "default": "./src/theme.ts"
+    },
+    "./theme-vars": {
+      "types": "./src/theme-vars.ts",
+      "default": "./src/theme-vars.ts"
+    },
+    "./components/ds": {
+      "types": "./src/components/ds/index.ts",
+      "default": "./src/components/ds/index.ts"
+    }
+  },
+  "dependencies": {
+    "@d3ro/core": "*"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
+  }
+}

packages/ui/src/index.ts

@@ -0,0 +1,8 @@
+// packages/ui — barrel export
+// 개별 sub-path import 권장:
+//   '@d3ro/ui/theme'          — d3roPalette, d3roTypo, d3roShadow, d3roRadius 등 토큰
+//   '@d3ro/ui/theme-vars'     — 팝업/main 프로세스용 CSS 변수 맵
+//   '@d3ro/ui/components/ds'  — CrtDisplay, MetalCard, PhosphorText 등 DS 컴포넌트
+
+export * from './theme'
+export * from './components/ds'

packages/ui/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"]
+  },
+  "include": ["src/**/*"]
+}