feat: complete release preparation, 10+ ad mediation, CI/CD, and docker deployment

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

@@ -1,17 +1,24 @@
 // src/renderer/components/shared/SearchInput.tsx
-// 공유: 모노 폰트 검색 입력 필드
+// Precision Glass Search Bar with Tactile Clear & Keycap Indicator
 
-import { TextField, InputAdornment } from '@mui/material'
-import { Search } from 'lucide-react'
-import { d3roPalette, d3roFontMono, d3roTypo } from '@d3ro/ui/theme'
+import React from 'react'
+import { TextField, InputAdornment, IconButton, Box } from '@mui/material'
+import { Search, X } from 'lucide-react'
+import { d3roPalette, d3roFontSans, d3roFontMono, d3roTypo, d3roRadius, d3roShadow } from '@d3ro/ui/theme'
 
-interface SearchInputProps {
+export interface SearchInputProps {
   value: string
   onChange: (value: string) => void
   placeholder: string
+  shortcut?: string
 }
 
-export function SearchInput({ value, onChange, placeholder }: SearchInputProps): React.ReactElement {
+export function SearchInput({
+  value,
+  onChange,
+  placeholder,
+  shortcut = '/',
+}: SearchInputProps): React.ReactElement {
   return (
     <TextField
       placeholder={placeholder}
@@ -19,20 +26,76 @@ export function SearchInput({ value, onChange, placeholder }: SearchInputProps):
       onChange={(e) => onChange(e.target.value)}
       fullWidth
       sx={{
-        mb: 3,
+        mb: 2.5,
+        '& .MuiOutlinedInput-root': {
+          bgcolor: d3roPalette.glass.raised,
+          backdropFilter: `blur(${d3roPalette.glass.blur})`,
+          borderRadius: d3roRadius.inner,
+          border: `1px solid ${d3roPalette.glass.hairline}`,
+          boxShadow: d3roShadow.inset,
+          transition: 'all 0.2s ease',
+          '& fieldset': { border: 'none' },
+          '&:hover': {
+            borderColor: d3roPalette.glass.hairlineStrong,
+            bgcolor: d3roPalette.bg.cardHover,
+          },
+          '&.Mui-focused': {
+            border: `1px solid ${d3roPalette.accent.main}`,
+            boxShadow: `${d3roShadow.inset}, 0 0 0 3px ${d3roPalette.accent.dim}`,
+          },
+        },
         '& .MuiInputBase-input': {
-          fontFamily: d3roFontMono,
-          fontSize: d3roTypo.small.size,
-          letterSpacing: d3roTypo.small.spacing,
+          fontFamily: d3roFontSans,
+          fontSize: d3roTypo.compact.size,
+          color: d3roPalette.text.primary,
+          py: 1.25,
+          '&::placeholder': {
+            color: d3roPalette.text.disabled,
+            opacity: 1,
+          },
         },
       }}
       slotProps={{
         input: {
           startAdornment: (
-            <InputAdornment position="start">
-              <Search size={18} style={{ color: d3roPalette.text.inactive }} />
+            <InputAdornment position="start" sx={{ pl: 0.5 }}>
+              <Search size={17} style={{ color: d3roPalette.text.secondary }} />
             </InputAdornment>
           ),
+          endAdornment: value ? (
+            <InputAdornment position="end">
+              <IconButton
+                size="small"
+                onClick={() => onChange('')}
+                sx={{
+                  color: d3roPalette.text.inactive,
+                  p: 0.5,
+                  '&:hover': { color: d3roPalette.text.primary },
+                }}
+              >
+                <X size={15} />
+              </IconButton>
+            </InputAdornment>
+          ) : shortcut ? (
+            <InputAdornment position="end" sx={{ pr: 0.5 }}>
+              <Box
+                sx={{
+                  px: 0.85,
+                  py: 0.2,
+                  borderRadius: d3roRadius.xs,
+                  bgcolor: d3roPalette.bg.inset,
+                  border: `1px solid ${d3roPalette.border.subtle}`,
+                  fontFamily: d3roFontMono,
+                  fontSize: '11px',
+                  color: d3roPalette.text.dimLabel,
+                  lineHeight: 1,
+                  userSelect: 'none',
+                }}
+              >
+                {shortcut}
+              </Box>
+            </InputAdornment>
+          ) : undefined,
         },
       }}
     />