Flutter 노트 앱 디자인 리뉴얼 — Bear 스타일 에디터와 Glassmorphism 알림 적용기

// 기존 코드 — 전형적인 초기 Material3 스타일
body: SingleChildScrollView(
  padding: const EdgeInsets.all(16),
  child: Column(
    children: [
      TextField(
        style: theme.textTheme.headlineSmall?.copyWith(
          fontWeight: FontWeight.bold,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
        ),
      ),
      const Divider(),  // 굵은 구분선
      TextField(
        style: theme.textTheme.bodyLarge,  // 시스템 기본 본문 스타일
        minLines: 20,
      ),
    ],
  ),
),

Widget _buildMetaInfoRow(ThemeData theme, ColorScheme colorScheme) {
  final date = _currentPaper?.updatedAt ?? DateTime.now();
  final text = _contentController.text.trim();
  final wordCount = text.isEmpty ? 0 : text.split(RegExp(r'\s+')).length;
  final charCount = _contentController.text.length;
  final dateStr = '${date.year}년 ${date.month}월 ${date.day}일';

  final metaStyle = theme.textTheme.bodySmall?.copyWith(
    color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
    fontSize: 12,
  );
  final divider = Padding(
    padding: const EdgeInsets.symmetric(horizontal: 8),
    child: Container(width: 1, height: 10, color: colorScheme.outlineVariant),
  );

  return Row(
    children: [
      Text(dateStr, style: metaStyle),
      divider,
      Text('$wordCount 단어', style: metaStyle),
      divider,
      Text('$charCount 자', style: metaStyle),
    ],
  );
}

void _onTextChanged() {
  setState(() {
    _hasUnsavedChanges = true;
  });
  // Debounce auto-save는 그대로 유지
  _autoSaveTimer?.cancel();
  _autoSaveTimer = Timer(const Duration(milliseconds: 500), () {
    if (_hasUnsavedChanges && mounted) _savePaper();
  });
}

// 극도로 얇은 구분선
Container(
  height: 0.5,
  color: colorScheme.outlineVariant.withValues(alpha: 0.4),
),

// Bear 스타일 본문
TextField(
  controller: _contentController,
  style: TextStyle(
    fontSize: 16,
    height: 1.72,        // Bear의 여유로운 line-height
    letterSpacing: 0.1,  // 미세한 자간
    color: colorScheme.onSurface,
  ),
  decoration: InputDecoration(
    border: InputBorder.none,
    contentPadding: EdgeInsets.zero,
  ),
  maxLines: null,
  minLines: 20,
),

Widget _buildFormattingBar(BuildContext context, ThemeData theme,
    ColorScheme colorScheme, PaperState state) {
  return Container(
    decoration: BoxDecoration(
      color: colorScheme.surface,
      border: Border(
        top: BorderSide(
          color: colorScheme.outlineVariant.withValues(alpha: 0.4),
          width: 0.5,
        ),
      ),
    ),
    child: SafeArea(
      top: false,
      child: SizedBox(
        height: 44,
        child: Row(
          children: [
            _fmtBtn('H', () => _insertFormat('## ', ''), colorScheme),
            _fmtBtn('B', () => _insertFormat('**', '**'), colorScheme,
                bold: true),
            _fmtBtn('I', () => _insertFormat('*', '*'), colorScheme,
                italic: true),
            _fmtBtn('S', () => _insertFormat('~~', '~~'), colorScheme,
                strikethrough: true),
            Container(width: 0.5, height: 22,
                color: colorScheme.outlineVariant),
            _fmtBtn('•', () => _insertFormat('- ', ''), colorScheme),
            _fmtBtn('☐', () => _insertFormat('- [ ] ', ''), colorScheme),
            const Spacer(),
            IconButton(
              icon: Icon(Icons.auto_awesome, size: 18,
                  color: colorScheme.primary),
              onPressed: () => _showAiToolSheet(context, state),
            ),
          ],
        ),
      ),
    ),
  );
}

void _insertFormat(String prefix, String suffix) {
  final controller = _contentFocusNode.hasFocus
      ? _contentController : _titleController;
  final text = controller.text;
  final sel = controller.selection;

  if (!sel.isValid || sel.start == sel.end) {
    // 커서 위치에 삽입
    final pos = sel.isValid ? sel.start : text.length;
    final newText = text.replaceRange(pos, pos, '$prefix$suffix');
    controller.value = controller.value.copyWith(
      text: newText,
      selection: TextSelection.collapsed(offset: pos + prefix.length),
    );
  } else {
    // 선택 텍스트 래핑
    final selected = sel.textInside(text);
    final newText = text.replaceRange(
        sel.start, sel.end, '$prefix$selected$suffix');
    controller.value = controller.value.copyWith(
      text: newText,
      selection: TextSelection.collapsed(
        offset: sel.start + prefix.length + selected.length + suffix.length,
      ),
    );
  }
}

// 기존: 왼쪽 4px 색 border만 있는 민밋한 리스트
child: Container(
  decoration: BoxDecoration(
    border: Border(
      left: BorderSide(
        color: notification.isRead
            ? Colors.grey.shade300    // 하드코딩
            : AppColors.primary,
        width: 4,
      ),
    ),
  ),
  child: // 텍스트만 나열...
),

child: ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      decoration: BoxDecoration(
        // 읽음/안읽음 상태에 따라 배경색 차별화
        color: notification.isRead
            ? cs.surface.withValues(alpha: 0.7)
            : cs.primaryContainer.withValues(alpha: 0.15),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: notification.isRead
              ? cs.outlineVariant.withValues(alpha: 0.3)
              : cs.primary.withValues(alpha: 0.3),
          width: 0.5,
        ),
      ),
      child: // 아이콘 + 텍스트 Row
    ),
  ),
),

// 알림 타입에 따른 아이콘 + 컬러 원형 배경
Container(
  width: 40,
  height: 40,
  decoration: BoxDecoration(
    color: iconColor.withValues(alpha: 0.15),
    shape: BoxShape.circle,
  ),
  child: Icon(iconData, size: 20, color: iconColor),
),

// 저사양 기기에서 blur 없이 반투명 배경만 사용
final useBlur = !Platform.isAndroid || isHighEndDevice;

if (useBlur) {
  return ClipRRect(
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: glassContainer,
    ),
  );
} else {
  return glassContainer; // blur 없이 반투명만
}

decoration: InputDecoration(
  border: InputBorder.none,
  filled: true,
  fillColor: cs.surfaceContainerHighest.withValues(alpha: 0.4),
  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide.none,
  ),
  focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(color: cs.primary, width: 1),
  ),
),