🎯 왜 오프라인 기능이 중요할까?

🎨 오프라인 전략의 핵심 개념

💾 로컬 스토리지 선택하기

🔧 실전 구현 전략

@Entity(tableName = "posts")
data class Post(
    @PrimaryKey val id: String,
    val title: String,
    val content: String,
    val timestamp: Long,
    @ColumnInfo(name = "sync_status") 
    val syncStatus: SyncStatus = SyncStatus.SYNCED,
    @ColumnInfo(name = "is_deleted") 
    val isDeleted: Boolean = false
)

enum class SyncStatus {
    SYNCED,      // 서버와 동기화됨
    PENDING,     // 동기화 대기 중
    FAILED       // 동기화 실패
}

@Dao
interface PostDao {
    @Query("SELECT * FROM posts WHERE is_deleted = 0 ORDER BY timestamp DESC")
    fun getAllPosts(): Flow<List<Post>>
    
    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun insertPost(post: Post)
    
    @Query("SELECT * FROM posts WHERE sync_status != 'SYNCED'")
    suspend fun getUnsyncedPosts(): List<Post>
    
    @Update
    suspend fun updatePost(post: Post)
}

class PostRepository(
    private val postDao: PostDao,
    private val apiService: ApiService,
    private val workManager: WorkManager
) {
    // 로컬 데이터를 UI에 제공 (Offline-First!)
    fun getPosts(): Flow<List<Post>> = postDao.getAllPosts()
    
    // 새 포스트 생성
    suspend fun createPost(title: String, content: String) {
        val post = Post(
            id = UUID.randomUUID().toString(),
            title = title,
            content = content,
            timestamp = System.currentTimeMillis(),
            syncStatus = SyncStatus.PENDING
        )
        
        // 1. 먼저 로컬에 저장 (즉시 UI 반영)
        postDao.insertPost(post)
        
        // 2. 백그라운드 동기화 예약
        scheduleSyncWork()
    }
    
    // 백그라운드 동기화 작업 예약
    private fun scheduleSyncWork() {
        val constraints = Constraints.Builder()
            .setRequiredNetworkType(NetworkType.CONNECTED)
            .build()
            
        val syncRequest = OneTimeWorkRequestBuilder<SyncWorker>()
            .setConstraints(constraints)
            .setBackoffCriteria(
                BackoffPolicy.EXPONENTIAL,
                WorkRequest.MIN_BACKOFF_MILLIS,
                TimeUnit.MILLISECONDS
            )
            .build()
            
        workManager.enqueue(syncRequest)
    }
}

class SyncWorker(
    context: Context,
    params: WorkerParameters
) : CoroutineWorker(context, params) {
    
    override suspend fun doWork(): Result {
        return try {
            val unsyncedPosts = postDao.getUnsyncedPosts()
            
            unsyncedPosts.forEach { post ->
                try {
                    // 서버에 업로드
                    apiService.uploadPost(post)
                    
                    // 성공하면 상태 업데이트
                    postDao.updatePost(
                        post.copy(syncStatus = SyncStatus.SYNCED)
                    )
                } catch (e: Exception) {
                    // 실패하면 FAILED로 표시
                    postDao.updatePost(
                        post.copy(syncStatus = SyncStatus.FAILED)
                    )
                }
            }
            
            Result.success()
        } catch (e: Exception) {
            // 재시도
            Result.retry()
        }
    }
}

import CoreData
import CloudKit

class PersistenceController {
    static let shared = PersistenceController()
    
    let container: NSPersistentCloudKitContainer
    
    init() {
        container = NSPersistentCloudKitContainer(name: "MyApp")
        
        // CloudKit 동기화 설정
        guard let description = container.persistentStoreDescriptions.first else {
            fatalError("No store description found")
        }
        
        // 자동 동기화 활성화
        description.cloudKitContainerOptions = NSPersistentCloudKitContainerOptions(
            containerIdentifier: "iCloud.com.myapp.container"
        )
        
        // 네트워크 없을 때도 작동하도록 설정
        description.setOption(true as NSNumber, 
                            forKey: NSPersistentHistoryTrackingKey)
        
        container.loadPersistentStores { description, error in
            if let error = error {
                fatalError("Core Data store failed: \(error)")
            }
        }
        
        // 자동 병합 설정
        container.viewContext.automaticallyMergesChangesFromParent = true
        container.viewContext.mergePolicy = NSMergeByPropertyObjectTrumpMergePolicy
    }
}

// SwiftUI View에서 사용
struct PostListView: View {
    @FetchRequest(
        sortDescriptors: [NSSortDescriptor(keyPath: \Post.timestamp, ascending: false)],
        animation: .default
    )
    private var posts: FetchedResults<Post>
    
    @Environment(\.managedObjectContext) private var viewContext
    
    var body: some View {
        List {
            ForEach(posts) { post in
                PostRow(post: post)
            }
        }
        .toolbar {
            Button(action: addPost) {
                Label("Add", systemImage: "plus")
            }
        }
    }
    
    private func addPost() {
        let newPost = Post(context: viewContext)
        newPost.id = UUID()
        newPost.title = "New Post"
        newPost.timestamp = Date()
        
        // 저장 (자동으로 CloudKit 동기화 큐에 추가됨)
        try? viewContext.save()
    }
}

// main.js
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(registration => {
            console.log('Service Worker registered:', registration);
        })
        .catch(error => {
            console.error('Service Worker registration failed:', error);
        });
}

const CACHE_NAME = 'my-app-v1';
const OFFLINE_URL = '/offline.html';

// 설치 시 필수 리소스 캐싱
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles.css',
                '/app.js',
                OFFLINE_URL
            ]);
        })
    );
    self.skipWaiting();
});

// 네트워크 요청 가로채기
self.addEventListener('fetch', event => {
    // API 요청 처리
    if (event.request.url.includes('/api/')) {
        event.respondWith(
            networkFirstStrategy(event.request)
        );
    } 
    // 정적 리소스 처리
    else {
        event.respondWith(
            cacheFirstStrategy(event.request)
        );
    }
});

// Network First 전략 (API용)
async function networkFirstStrategy(request) {
    try {
        const networkResponse = await fetch(request);
        
        // 성공하면 캐시에 저장
        const cache = await caches.open(CACHE_NAME);
        cache.put(request, networkResponse.clone());
        
        return networkResponse;
    } catch (error) {
        // 네트워크 실패 시 캐시에서 가져오기
        const cachedResponse = await caches.match(request);
        if (cachedResponse) {
            return cachedResponse;
        }
        
        // 캐시도 없으면 오프라인 페이지
        return caches.match(OFFLINE_URL);
    }
}

// Cache First 전략 (정적 리소스용)
async function cacheFirstStrategy(request) {
    const cachedResponse = await caches.match(request);
    if (cachedResponse) {
        return cachedResponse;
    }
    
    try {
        const networkResponse = await fetch(request);
        const cache = await caches.open(CACHE_NAME);
        cache.put(request, networkResponse.clone());
        return networkResponse;
    } catch (error) {
        return caches.match(OFFLINE_URL);
    }
}

// db.js
class OfflineDB {
    constructor() {
        this.dbName = 'MyAppDB';
        this.version = 1;
        this.db = null;
    }
    
    async init() {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open(this.dbName, this.version);
            
            request.onerror = () => reject(request.error);
            request.onsuccess = () => {
                this.db = request.result;
                resolve(this.db);
            };
            
            request.onupgradeneeded = (event) => {
                const db = event.target.result;
                
                // Posts 스토어 생성
                if (!db.objectStoreNames.contains('posts')) {
                    const store = db.createObjectStore('posts', { keyPath: 'id' });
                    store.createIndex('syncStatus', 'syncStatus', { unique: false });
                    store.createIndex('timestamp', 'timestamp', { unique: false });
                }
            };
        });
    }
    
    async addPost(post) {
        const tx = this.db.transaction(['posts'], 'readwrite');
        const store = tx.objectStore('posts');
        
        const postWithMeta = {
            ...post,
            id: post.id || Date.now().toString(),
            syncStatus: 'pending',
            timestamp: Date.now()
        };
        
        await store.add(postWithMeta);
        
        // 백그라운드 동기화 트리거
        this.triggerSync();
        
        return postWithMeta;
    }
    
    async getAllPosts() {
        const tx = this.db.transaction(['posts'], 'readonly');
        const store = tx.objectStore('posts');
        const index = store.index('timestamp');
        
        return new Promise((resolve, reject) => {
            const request = index.getAll();
            request.onsuccess = () => resolve(request.result.reverse());
            request.onerror = () => reject(request.error);
        });
    }
    
    async getUnsyncedPosts() {
        const tx = this.db.transaction(['posts'], 'readonly');
        const store = tx.objectStore('posts');
        const index = store.index('syncStatus');
        
        return new Promise((resolve, reject) => {
            const request = index.getAll('pending');
            request.onsuccess = () => resolve(request.result);
            request.onerror = () => reject(request.error);
        });
    }
    
    async updateSyncStatus(id, status) {
        const tx = this.db.transaction(['posts'], 'readwrite');
        const store = tx.objectStore('posts');
        
        const post = await store.get(id);
        post.syncStatus = status;
        await store.put(post);
    }
    
    async triggerSync() {
        if ('sync' in self.registration) {
            // Background Sync API 사용
            await self.registration.sync.register('sync-posts');
        } else {
            // 폴백: 즉시 동기화 시도
            this.syncNow();
        }
    }
    
    async syncNow() {
        const unsyncedPosts = await this.getUnsyncedPosts();
        
        for (const post of unsyncedPosts) {
            try {
                await fetch('/api/posts', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(post)
                });
                
                await this.updateSyncStatus(post.id, 'synced');
            } catch (error) {
                console.error('Sync failed for post:', post.id, error);
                await this.updateSyncStatus(post.id, 'failed');
            }
        }
    }
}

// 사용 예시
const db = new OfflineDB();
await db.init();

// 새 포스트 추가 (오프라인에서도 작동)
await db.addPost({
    title: 'My Post',
    content: 'Hello World'
});

// 모든 포스트 가져오기
const posts = await db.getAllPosts();

⚡ 네트워크 상태 감지 및 처리

class NetworkMonitor(private val context: Context) {
    private val connectivityManager = context.getSystemService(Context.CONNECTIVITY_SERVICE) 
        as ConnectivityManager
    
    private val _networkStatus = MutableStateFlow(NetworkStatus.UNKNOWN)
    val networkStatus: StateFlow<NetworkStatus> = _networkStatus.asStateFlow()
    
    private val networkCallback = object : ConnectivityManager.NetworkCallback() {
        override fun onAvailable(network: Network) {
            _networkStatus.value = NetworkStatus.AVAILABLE
        }
        
        override fun onLost(network: Network) {
            _networkStatus.value = NetworkStatus.LOST
        }
        
        override fun onCapabilitiesChanged(
            network: Network,
            capabilities: NetworkCapabilities
        ) {
            val isWifi = capabilities.hasTransport(NetworkCapabilities.TRANSPORT_WIFI)
            val isCellular = capabilities.hasTransport(NetworkCapabilities.TRANSPORT_CELLULAR)
            val hasInternet = capabilities.hasCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET)
            
            _networkStatus.value = when {
                !hasInternet -> NetworkStatus.NO_INTERNET
                isWifi -> NetworkStatus.WIFI
                isCellular -> NetworkStatus.CELLULAR
                else -> NetworkStatus.AVAILABLE
            }
        }
    }
    
    fun startMonitoring() {
        val request = NetworkRequest.Builder()
            .addCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET)
            .build()
        
        connectivityManager.registerNetworkCallback(request, networkCallback)
    }
    
    fun stopMonitoring() {
        connectivityManager.unregisterNetworkCallback(networkCallback)
    }
}

enum class NetworkStatus {
    UNKNOWN,
    AVAILABLE,
    WIFI,
    CELLULAR,
    LOST,
    NO_INTERNET
}

// ViewModel에서 사용
class MainViewModel(
    private val networkMonitor: NetworkMonitor
) : ViewModel() {
    
    val networkStatus = networkMonitor.networkStatus
    
    init {
        networkMonitor.startMonitoring()
        
        viewModelScope.launch {
            networkStatus.collect { status ->
                when (status) {
                    NetworkStatus.AVAILABLE, NetworkStatus.WIFI -> {
                        // 동기화 트리거
                        syncRepository.syncNow()
                    }
                    NetworkStatus.CELLULAR -> {
                        // 사용자 설정에 따라 동기화 여부 결정
                        if (userPreferences.syncOnCellular) {
                            syncRepository.syncNow()
                        }
                    }
                    NetworkStatus.LOST, NetworkStatus.NO_INTERNET -> {
                        // 오프라인 모드 활성화
                        showOfflineIndicator()
                    }
                    else -> {}
                }
            }
        }
    }
}

import Network
import Combine

class NetworkMonitor: ObservableObject {
    private let monitor = NWPathMonitor()
    private let queue = DispatchQueue(label: "NetworkMonitor")
    
    @Published var isConnected = false
    @Published var connectionType: ConnectionType = .unknown
    
    enum ConnectionType {
        case wifi
        case cellular
        case ethernet
        case unknown
    }
    
    init() {
        monitor.pathUpdateHandler = { [weak self] path in
            DispatchQueue.main.async {
                self?.isConnected = path.status == .satisfied
                
                if path.usesInterfaceType(.wifi) {
                    self?.connectionType = .wifi
                } else if path.usesInterfaceType(.cellular) {
                    self?.connectionType = .cellular
                } else if path.usesInterfaceType(.wiredEthernet) {
                    self?.connectionType = .ethernet
                } else {
                    self?.connectionType = .unknown
                }
            }
        }
        
        monitor.start(queue: queue)
    }
    
    deinit {
        monitor.cancel()
    }
}

// SwiftUI View에서 사용
struct ContentView: View {
    @StateObject private var networkMonitor = NetworkMonitor()
    
    var body: some View {
        VStack {
            if !networkMonitor.isConnected {
                OfflineBanner()
            }
            
            PostListView()
        }
        .onChange(of: networkMonitor.isConnected) { isConnected in
            if isConnected {
                // 네트워크 복구 시 동기화
                SyncManager.shared.syncNow()
            }
        }
    }
}

struct OfflineBanner: View {
    var body: some View {
        HStack {
            Image(systemName: "wifi.slash")
            Text("오프라인 모드")
            Spacer()
            Text("변경사항은 자동으로 저장됩니다")
                .font(.caption)
        }
        .padding()
        .background(Color.yellow.opacity(0.2))
    }
}

class NetworkMonitor {
    constructor() {
        this.listeners = [];
        this.isOnline = navigator.onLine;
        
        window.addEventListener('online', () => this.handleOnline());
        window.addEventListener('offline', () => this.handleOffline());
        
        // 주기적으로 실제 연결 확인 (navigator.onLine은 부정확할 수 있음)
        this.startHealthCheck();
    }
    
    handleOnline() {
        this.isOnline = true;
        this.notifyListeners('online');
        this.triggerSync();
    }
    
    handleOffline() {
        this.isOnline = false;
        this.notifyListeners('offline');
    }
    
    async startHealthCheck() {
        setInterval(async () => {
            try {
                const response = await fetch('/api/health', {
                    method: 'HEAD',
                    cache: 'no-cache'
                });
                
                if (response.ok && !this.isOnline) {
                    this.handleOnline();
                }
            } catch (error) {
                if (this.isOnline) {
                    this.handleOffline();
                }
            }
        }, 30000); // 30초마다 체크
    }
    
    subscribe(callback) {
        this.listeners.push(callback);
        return () => {
            this.listeners = this.listeners.filter(cb => cb !== callback);
        };
    }
    
    notifyListeners(status) {
        this.listeners.forEach(callback => callback(status));
    }
    
    async triggerSync() {
        const db = new OfflineDB();
        await db.init();
        await db.syncNow();
    }
}

// 사용 예시
const networkMonitor = new NetworkMonitor();

// React 컴포넌트에서
function App() {
    const [isOnline, setIsOnline] = useState(navigator.onLine);
    
    useEffect(() => {
        const unsubscribe = networkMonitor.subscribe(status => {
            setIsOnline(status === 'online');
        });
        
        return unsubscribe;
    }, []);
    
    return (
        <div>
            {!isOnline && (
                <div className="offline-banner">
                    ⚠️ 오프라인 모드 - 변경사항은 연결 복구 시 자동 동기화됩니다
                </div>
            )}
            
            <PostList />
        </div>
    );
}

🔄 충돌 해결 전략

data class Post(
    val id: String,
    val content: String,
    val lastModified: Long,
    val version: Int
)

fun resolveConflict(local: Post, remote: Post): Post {
    return if (local.lastModified > remote.lastModified) {
        local
    } else {
        remote
    }
}

data class VersionVector(
    val versions: Map<String, Int> // deviceId -> version
) {
    fun isNewerThan(other: VersionVector): Boolean {
        return versions.all { (deviceId, version) ->
            version >= (other.versions[deviceId] ?: 0)
        } && versions != other.versions
    }
    
    fun hasConflict(other: VersionVector): Boolean {
        return !isNewerThan(other) && !other.isNewerThan(this)
    }
}

data class Post(
    val id: String,
    val content: String,
    val versionVector: VersionVector
)

fun resolveConflict(local: Post, remote: Post): ConflictResult {
    return when {
        local.versionVector.isNewerThan(remote.versionVector) -> {
            ConflictResult.UseLocal(local)
        }
        remote.versionVector.isNewerThan(local.versionVector) -> {
            ConflictResult.UseRemote(remote)
        }
        else -> {
            // 진짜 충돌 발생 - 사용자에게 선택하게 하거나 병합
            ConflictResult.Conflict(local, remote)
        }
    }
}

sealed class ConflictResult {
    data class UseLocal(val post: Post) : ConflictResult()
    data class UseRemote(val post: Post) : ConflictResult()
    data class Conflict(val local: Post, val remote: Post) : ConflictResult()
}

// 간단한 텍스트 OT 예시
sealed class Operation {
    data class Insert(val position: Int, val text: String) : Operation()
    data class Delete(val position: Int, val length: Int) : Operation()
}

fun transform(op1: Operation, op2: Operation): Pair<Operation, Operation> {
    return when {
        op1 is Operation.Insert && op2 is Operation.Insert -> {
            if (op1.position < op2.position) {
                op1 to Operation.Insert(op2.position + op1.text.length, op2.text)
            } else {
                Operation.Insert(op1.position + op2.text.length, op1.text) to op2
            }
        }
        op1 is Operation.Delete && op2 is Operation.Insert -> {
            if (op2.position <= op1.position) {
                Operation.Delete(op1.position + op2.text.length, op1.length) to op2
            } else if (op2.position >= op1.position + op1.length) {
                op1 to Operation.Insert(op2.position - op1.length, op2.text)
            } else {
                // 복잡한 경우...
                op1 to op2
            }
        }
        // 더 많은 경우들...
        else -> op1 to op2
    }
}

// G-Counter (Grow-only Counter) CRDT 예시
class GCounter(private val deviceId: String) {
    private val counts = mutableMapOf<String, Int>()
    
    fun increment() {
        counts[deviceId] = (counts[deviceId] ?: 0) + 1
    }
    
    fun value(): Int {
        return counts.values.sum()
    }
    
    fun merge(other: GCounter) {
        other.counts.forEach { (device, count) ->
            counts[device] = maxOf(counts[device] ?: 0, count)
        }
    }
}

// LWW-Element-Set (Last-Write-Wins Element Set) CRDT
class LWWSet<T> {
    private val addSet = mutableMapOf<T, Long>()
    private val removeSet = mutableMapOf<T, Long>()
    
    fun add(element: T, timestamp: Long = System.currentTimeMillis()) {
        addSet[element] = timestamp
    }
    
    fun remove(element: T, timestamp: Long = System.currentTimeMillis()) {
        removeSet[element] = timestamp
    }
    
    fun contains(element: T): Boolean {
        val addTime = addSet[element] ?: return false
        val removeTime = removeSet[element] ?: return true
        return addTime > removeTime
    }
    
    fun merge(other: LWWSet<T>) {
        other.addSet.forEach { (element, timestamp) ->
            addSet[element] = maxOf(addSet[element] ?: 0, timestamp)
        }
        other.removeSet.forEach { (element, timestamp) ->
            removeSet[element] = maxOf(removeSet[element] ?: 0, timestamp)
        }
    }
    
    fun elements(): Set<T> {
        return addSet.keys.filter { contains(it) }.toSet()
    }
}

// Android Compose UI 예시
@Composable
fun ConflictResolutionDialog(
    localPost: Post,
    remotePost: Post,
    onResolve: (Post) -> Unit,
    onDismiss: () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        title = { Text("충돌 발생") },
        text = {
            Column {
                Text("같은 게시물이 다른 기기에서 수정되었습니다.")
                Spacer(modifier = Modifier.height(16.dp))
                
                Text("내 버전:", fontWeight = FontWeight.Bold)
                Text(localPost.content, modifier = Modifier.padding(8.dp))
                Text("수정 시간: ${formatTime(localPost.lastModified)}", 
                     style = MaterialTheme.typography.caption)
                
                Spacer(modifier = Modifier.height(16.dp))
                
                Text("서버 버전:", fontWeight = FontWeight.Bold)
                Text(remotePost.content, modifier = Modifier.padding(8.dp))
                Text("수정 시간: ${formatTime(remotePost.lastModified)}", 
                     style = MaterialTheme.typography.caption)
            }
        },
        confirmButton = {
            TextButton(onClick = { onResolve(localPost) }) {
                Text("내 버전 사용")
            }
        },
        dismissButton = {
            TextButton(onClick = { onResolve(remotePost) }) {
                Text("서버 버전 사용")
            }
        }
    )
}

🎨 사용자 경험 최적화

// ViewModel 예시
class PostViewModel : ViewModel() {
    private val _posts = MutableStateFlow<List<Post>>(emptyList())
    val posts: StateFlow<List<Post>> = _posts.asStateFlow()
    
    fun createPost(title: String, content: String) {
        val tempPost = Post(
            id = "temp_${UUID.randomUUID()}",
            title = title,
            content = content,
            timestamp = System.currentTimeMillis(),
            syncStatus = SyncStatus.PENDING
        )
        
        // 1. 즉시 UI 업데이트 (낙관적)
        _posts.value = listOf(tempPost) + _posts.value
        
        // 2. 백그라운드에서 서버 전송
        viewModelScope.launch {
            try {
                val serverPost = repository.createPost(tempPost)
                
                // 3. 성공하면 임시 ID를 실제 ID로 교체
                _posts.value = _posts.value.map { post ->
                    if (post.id == tempPost.id) serverPost else post
                }
            } catch (e: Exception) {
                // 4. 실패하면 롤백하고 에러 표시
                _posts.value = _posts.value.filter { it.id != tempPost.id }
                showError("게시물 생성 실패. 나중에 다시 시도됩니다.")
            }
        }
    }
}

@Composable
fun PostItem(post: Post) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {
        Row(
            modifier = Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column(modifier = Modifier.weight(1f)) {
                Text(post.title, style = MaterialTheme.typography.h6)
                Text(post.content)
            }
            
            // 동기화 상태 아이콘
            when (post.syncStatus) {
                SyncStatus.SYNCED -> {
                    Icon(
                        Icons.Default.CloudDone,
                        contentDescription = "동기화됨",
                        tint = Color.Green
                    )
                }
                SyncStatus.PENDING -> {
                    CircularProgressIndicator(
                        modifier = Modifier.size(24.dp),
                        strokeWidth = 2.dp
                    )
                }
                SyncStatus.FAILED -> {
                    Icon(
                        Icons.Default.CloudOff,
                        contentDescription = "동기화 실패",
                        tint = Color.Red
                    )
                }
            }
        }
    }
}

@Composable
fun PostListSkeleton() {
    Column {
        repeat(5) {
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(8.dp)
            ) {
                Column(modifier = Modifier.padding(16.dp)) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth(0.7f)
                            .height(24.dp)
                            .background(
                                brush = Brush.horizontalGradient(
                                    colors = listOf(
                                        Color.LightGray.copy(alpha = 0.6f),
                                        Color.LightGray.copy(alpha = 0.2f),
                                        Color.LightGray.copy(alpha = 0.6f)
                                    )
                                ),
                                shape = RoundedCornerShape(4.dp)
                            )
                    )
                    
                    Spacer(modifier = Modifier.height(8.dp))
                    
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(16.dp)
                            .background(
                                brush = Brush.horizontalGradient(
                                    colors = listOf(
                                        Color.LightGray.copy(alpha = 0.6f),
                                        Color.LightGray.copy(alpha = 0.2f),
                                        Color.LightGray.copy(alpha = 0.6f)
                                    )
                                ),
                                shape = RoundedCornerShape(4.dp)
                            )
                    )
                }
            }
        }
    }
}

@Composable
fun OfflineBanner(isVisible: Boolean) {
    AnimatedVisibility(
        visible = isVisible,
        enter = slideInVertically() + fadeIn(),
        exit = slideOutVertically() + fadeOut()
    ) {
        Surface(
            color = Color(0xFFFFF9C4),
            modifier = Modifier.fillMaxWidth()
        ) {
            Row(
                modifier = Modifier.padding(12.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Icon(
                    Icons.Default.CloudOff,
                    contentDescription = null,
                    tint = Color(0xFFF57C00)
                )
                
                Spacer(modifier = Modifier.width(8.dp))
                
                Column(modifier = Modifier.weight(1f)) {
                    Text(
                        "오프라인 모드",
                        fontWeight = FontWeight.Bold,
                        color = Color(0xFFF57C00)
                    )
                    Text(
                        "변경사항은 자동으로 저장됩니다",
                        style = MaterialTheme.typography.caption
                    )
                }
            }
        }
    }
}

⚙️ 고급 최적화 기법

data class SyncDelta(
    val added: List<Post>,
    val modified: List<Post>,
    val deleted: List<String>, // ID만
    val lastSyncTimestamp: Long
)

class DeltaSyncManager(
    private val localDb: PostDao,
    private val apiService: ApiService
) {
    private var lastSyncTimestamp: Long = 0
    
    suspend fun performDeltaSync() {
        // 1. 마지막 동기화 이후 로컬 변경사항 수집
        val localDelta = collectLocalChanges()
        
        // 2. 서버에 로컬 변경사항 전송하고 서버 변경사항 받기
        val serverDelta = apiService.sync(localDelta, lastSyncTimestamp)
        
        // 3. 서버 변경사항을 로컬에 적용
        applyServerChanges(serverDelta)
        
        // 4. 타임스탬프 업데이트
        lastSyncTimestamp = System.currentTimeMillis()
    }
    
    private suspend fun collectLocalChanges(): SyncDelta {
        val added = localDb.getPostsAddedAfter(lastSyncTimestamp)
        val modified = localDb.getPostsModifiedAfter(lastSyncTimestamp)
        val deleted = localDb.getDeletedPostIds(lastSyncTimestamp)
        
        return SyncDelta(added, modified, deleted, lastSyncTimestamp)
    }
    
    private suspend fun applyServerChanges(delta: SyncDelta) {
        // 추가된 항목
        delta.added.forEach { post ->
            localDb.insertPost(post.copy(syncStatus = SyncStatus.SYNCED))
        }
        
        // 수정된 항목
        delta.modified.forEach { post ->
            val localPost = localDb.getPostById(post.id)
            if (localPost != null) {
                // 충돌 해결
                val resolved = resolveConflict(localPost, post)
                localDb.updatePost(resolved)
            } else {
                localDb.insertPost(post)
            }
        }
        
        // 삭제된 항목
        delta.deleted.forEach { id ->
            localDb.deletePost(id)
        }
    }
}

class BatchSyncManager(
    private val syncManager: DeltaSyncManager
) {
    private val pendingChanges = mutableListOf<Change>()
    private var syncJob: Job? = null
    
    fun queueChange(change: Change) {
        pendingChanges.add(change)
        scheduleBatchSync()
    }
    
    private fun scheduleBatchSync() {
        // 기존 작업 취소
        syncJob?.cancel()
        
        // 새 작업 예약 (5초 후 또는 100개 모이면)
        syncJob = CoroutineScope(Dispatchers.IO).launch {
            delay(5000) // 5초 대기
            
            if (pendingChanges.size >= 100) {
                // 즉시 동기화
                performBatchSync()
            } else {
                // 5초 후 동기화
                performBatchSync()
            }
        }
    }
    
    private suspend fun performBatchSync() {
        if (pendingChanges.isEmpty()) return
        
        val batch = pendingChanges.toList()
        pendingChanges.clear()
        
        try {
            syncManager.syncBatch(batch)
        } catch (e: Exception) {
            // 실패한 항목 다시 큐에 추가
            pendingChanges.addAll(batch)
        }
    }
}

class CompressionHelper {
    fun compress(data: String): ByteArray {
        val output = ByteArrayOutputStream()
        GZIPOutputStream(output).use { gzip ->
            gzip.write(data.toByteArray(Charsets.UTF_8))
        }
        return output.toByteArray()
    }
    
    fun decompress(compressed: ByteArray): String {
        val input = ByteArrayInputStream(compressed)
        val output = ByteArrayOutputStream()
        
        GZIPInputStream(input).use { gzip ->
            gzip.copyTo(output)
        }
        
        return output.toString(Charsets.UTF_8.name())
    }
}

// API 호출 시 사용
class ApiService {
    suspend fun syncWithCompression(delta: SyncDelta): SyncDelta {
        val json = Json.encodeToString(delta)
        val compressed = CompressionHelper().compress(json)
        
        val response = httpClient.post("/api/sync") {
            header("Content-Encoding", "gzip")
            setBody(compressed)
        }
        
        val responseData = response.body<ByteArray>()
        val decompressed = CompressionHelper().decompress(responseData)
        
        return Json.decodeFromString(decompressed)
    }
}

class IncrementalBackupManager(
    private val context: Context
) {
    private val backupDir = File(context.filesDir, "backups")
    
    suspend fun createIncrementalBackup() {
        val timestamp = System.currentTimeMillis()
        val backupFile = File(backupDir, "backup_$timestamp.json")
        
        // 마지막 백업 이후 변경된 데이터만 추출
        val changes = getChangesSinceLastBackup()
        
        // JSON으로 직렬화
        val json = Json.encodeToString(changes)
        
        // 압축해서 저장
        val compressed = CompressionHelper().compress(json)
        backupFile.writeBytes(compressed)
        
        // 오래된 백업 정리
        cleanupOldBackups()
    }
    
    suspend fun restoreFromBackups() {
        val backupFiles = backupDir.listFiles()
            ?.sortedBy { it.name }
            ?: return
        
        // 모든 증분 백업을 순서대로 적용
        backupFiles.forEach { file ->
            val compressed = file.readBytes()
            val json = CompressionHelper().decompress(compressed)
            val changes = Json.decodeFromString<BackupData>(json)
            
            applyBackup(changes)
        }
    }
    
    private fun cleanupOldBackups() {
        val files = backupDir.listFiles()?.sortedByDescending { it.name }
        
        // 최근 10개만 유지
        files?.drop(10)?.forEach { it.delete() }
    }
}

🔐 보안 고려사항

// EncryptedSharedPreferences 사용
val masterKey = MasterKey.Builder(context)
    .setKeyScheme(MasterKey.KeyScheme.AES256_GCM)
    .build()

val encryptedPrefs = EncryptedSharedPreferences.create(
    context,
    "secure_prefs",
    masterKey,
    EncryptedSharedPreferences.PrefKeyEncryptionScheme.AES256_SIV,
    EncryptedSharedPreferences.PrefValueEncryptionScheme.AES256_GCM
)

// 토큰 저장
encryptedPrefs.edit()
    .putString("auth_token", token)
    .apply()

// SQLCipher로 데이터베이스 암호화
@Database(entities = [Post::class], version = 1)
abstract class AppDatabase : RoomDatabase() {
    abstract fun postDao(): PostDao
    
    companion object {
        fun create(context: Context, passphrase: CharArray): AppDatabase {
            val factory = SupportFactory(passphrase)
            
            return Room.databaseBuilder(
                context,
                AppDatabase::class.java,
                "app_database"
            )
            .openHelperFactory(factory)
            .build()
        }
    }
}

import Security

class KeychainHelper {
    static func save(key: String, data: Data) -> Bool {
        let query: [String: Any] = [
            kSecClass as String: kSecClassGenericPassword,
            kSecAttrAccount as String: key,
            kSecValueData as String: data,
            kSecAttrAccessible as String: kSecAttrAccessibleWhenUnlockedThisDeviceOnly
        ]
        
        SecItemDelete(query as CFDictionary)
        let status = SecItemAdd(query as CFDictionary, nil)
        
        return status == errSecSuccess
    }
    
    static func load(key: String) -> Data? {
        let query: [String: Any] = [
            kSecClass as String: kSecClassGenericPassword,
            kSecAttrAccount as String: key,
            kSecReturnData as String: true
        ]
        
        var result: AnyObject?
        let status = SecItemCopyMatching(query as CFDictionary, &result)
        
        return status == errSecSuccess ? result as? Data : nil
    }
}

// Core Data 암호화
let description = NSPersistentStoreDescription()
description.setOption(
    FileProtectionType.complete as NSObject,
    forKey: NSPersistentStoreFileProtectionKey
)

class SecureTokenManager(private val context: Context) {
    private val encryptedPrefs = createEncryptedPrefs()
    
    fun saveToken(token: String, expiresAt: Long) {
        encryptedPrefs.edit()
            .putString("access_token", token)
            .putLong("expires_at", expiresAt)
            .apply()
    }
    
    fun getToken(): String? {
        val token = encryptedPrefs.getString("access_token", null)
        val expiresAt = encryptedPrefs.getLong("expires_at", 0)
        
        // 만료 확인
        if (System.currentTimeMillis() > expiresAt) {
            clearToken()
            return null
        }
        
        return token
    }
    
    fun clearToken() {
        encryptedPrefs.edit().clear().apply()
    }
    
    private fun createEncryptedPrefs(): SharedPreferences {
        val masterKey = MasterKey.Builder(context)
            .setKeyScheme(MasterKey.KeyScheme.AES256_GCM)
            .build()
        
        return EncryptedSharedPreferences.create(
            context,
            "auth_prefs",
            masterKey,
            EncryptedSharedPreferences.PrefKeyEncryptionScheme.AES256_SIV,
            EncryptedSharedPreferences.PrefValueEncryptionScheme.AES256_GCM
        )
    }
}

import java.security.MessageDigest

class DataIntegrityChecker {
    fun calculateHash(data: String): String {
        val digest = MessageDigest.getInstance("SHA-256")
        val hash = digest.digest(data.toByteArray())
        return hash.joinToString("") { "%02x".format(it) }
    }
    
    fun verifyIntegrity(data: String, expectedHash: String): Boolean {
        val actualHash = calculateHash(data)
        return actualHash == expectedHash
    }
}

data class SecurePost(
    val id: String,
    val content: String,
    val hash: String // 내용의 해시값
) {
    fun verify(): Boolean {
        val checker = DataIntegrityChecker()
        return checker.verifyIntegrity(content, hash)
    }
    
    companion object {
        fun create(id: String, content: String): SecurePost {
            val checker = DataIntegrityChecker()
            val hash = checker.calculateHash(content)
            return SecurePost(id, content, hash)
        }
    }
}

🧪 테스트 전략

@Test
fun `동기화 충돌 해결 테스트`() = runTest {
    // Given
    val localPost = Post(
        id = "1",
        content = "Local content",
        lastModified = 1000L,
        version = 1
    )
    
    val remotePost = Post(
        id = "1",
        content = "Remote content",
        lastModified = 2000L,
        version = 2
    )
    
    // When
    val resolved = conflictResolver.resolve(localPost, remotePost)
    
    // Then
    assertEquals(remotePost, resolved) // 더 최신 버전 선택
}

@Test
fun `오프라인 상태에서 데이터 저장 테스트`() = runTest {
    // Given
    val repository = PostRepository(mockDao, mockApi, mockWorkManager)
    coEvery { mockApi.createPost(any()) } throws IOException("No network")
    
    // When
    repository.createPost("Title", "Content")
    
    // Then
    coVerify { mockDao.insertPost(any()) } // 로컬에는 저장됨
    coVerify { mockWorkManager.enqueue(any()) } // 동기화 작업 예약됨
}

@Test
fun `델타 동기화 테스트`() = runTest {
    // Given
    val localChanges = SyncDelta(
        added = listOf(post1, post2),
        modified = listOf(post3),
        deleted = listOf("4"),
        lastSyncTimestamp = 1000L
    )
    
    coEvery { mockApi.sync(any(), any()) } returns SyncDelta(
        added = listOf(post5),
        modified = emptyList(),
        deleted = emptyList(),
        lastSyncTimestamp = 2000L
    )
    
    // When
    syncManager.performDeltaSync()
    
    // Then
    coVerify { mockDao.insertPost(post5) }
    assertEquals(2000L, syncManager.lastSyncTimestamp)
}

@RunWith(AndroidJUnit4::class)
class OfflineSyncIntegrationTest {
    
    @get:Rule
    val instantTaskExecutorRule = InstantTaskExecutorRule()
    
    private lateinit var database: AppDatabase
    private lateinit var repository: PostRepository
    
    @Before
    fun setup() {
        val context = ApplicationProvider.getApplicationContext<Context>()
        database = Room.inMemoryDatabaseBuilder(context, AppDatabase::class.java)
            .allowMainThreadQueries()
            .build()
        
        repository = PostRepository(
            database.postDao(),
            FakeApiService(),
            FakeWorkManager()
        )
    }
    
    @After
    fun tearDown() {
        database.close()
    }
    
    @Test
    fun `오프라인에서 온라인으로 전환 시 자동 동기화`() = runTest {
        // Given: 오프라인 상태에서 포스트 생성
        val networkMonitor = FakeNetworkMonitor(isOnline = false)
        repository.createPost("Test", "Content")
        
        // When: 온라인 전환
        networkMonitor.setOnline(true)
        delay(1000) // 동기화 대기
        
        // Then: 서버에 동기화됨
        val syncedPosts = repository.getSyncedPosts()
        assertEquals(1, syncedPosts.size)
        assertEquals(SyncStatus.SYNCED, syncedPosts[0].syncStatus)
    }
    
    @Test
    fun `여러 기기에서 동시 수정 시 충돌 해결`() = runTest {
        // Given: 같은 포스트를 두 기기에서 수정
        val device1Post = Post("1", "Device 1 content", 1000L, 1)
        val device2Post = Post("1", "Device 2 content", 2000L, 1)
        
        // When: 동기화
        repository.syncPost(device1Post)
        repository.syncPost(device2Post)
        
        // Then: 최신 버전이 선택됨
        val finalPost = repository.getPost("1")
        assertEquals("Device 2 content", finalPost.content)
    }
}

@RunWith(AndroidJUnit4::class)
class OfflineUITest {
    
    @get:Rule
    val activityRule = ActivityScenarioRule(MainActivity::class.java)
    
    @Test
    fun `오프라인 배너 표시 테스트`() {
        // Given: 네트워크 끊기
        setNetworkState(false)
        
        // Then: 오프라인 배너 표시됨
        onView(withId(R.id.offline_banner))
            .check(matches(isDisplayed()))
        
        onView(withText("오프라인 모드"))
            .check(matches(isDisplayed()))
    }
    
    @Test
    fun `오프라인에서 포스트 작성 및 동기화 표시`() {
        // Given: 오프라인 상태
        setNetworkState(false)
        
        // When: 포스트 작성
        onView(withId(R.id.fab_add)).perform(click())
        onView(withId(R.id.edit_title)).perform(typeText("Test Post"))
        onView(withId(R.id.edit_content)).perform(typeText("Test Content"))
        onView(withId(R.id.btn_save)).perform(click())
        
        // Then: 포스트가 표시되고 동기화 대기 아이콘 표시
        onView(withText("Test Post")).check(matches(isDisplayed()))
        onView(withId(R.id.sync_status_icon))
            .check(matches(withTagValue(equalTo("pending"))))
        
        // When: 온라인 전환
        setNetworkState(true)
        Thread.sleep(2000) // 동기화 대기
        
        // Then: 동기화 완료 아이콘으로 변경
        onView(withId(R.id.sync_status_icon))
            .check(matches(withTagValue(equalTo("synced"))))
    }
    
    private fun setNetworkState(isOnline: Boolean) {
        val instrumentation = InstrumentationRegistry.getInstrumentation()
        val uiAutomation = instrumentation.uiAutomation
        
        if (isOnline) {
            uiAutomation.executeShellCommand("svc wifi enable")
            uiAutomation.executeShellCommand("svc data enable")
        } else {
            uiAutomation.executeShellCommand("svc wifi disable")
            uiAutomation.executeShellCommand("svc data disable")
        }
        
        Thread.sleep(1000) // 상태 변경 대기
    }
}

📊 모니터링 및 분석

class SyncLogger {
    private val analytics = FirebaseAnalytics.getInstance(context)
    
    fun logSyncStart(itemCount: Int) {
        val bundle = Bundle().apply {
            putInt("item_count", itemCount)
            putLong("timestamp", System.currentTimeMillis())
        }
        analytics.logEvent("sync_started", bundle)
    }
    
    fun logSyncSuccess(duration: Long, itemsSynced: Int) {
        val bundle = Bundle().apply {
            putLong("duration_ms", duration)
            putInt("items_synced", itemsSynced)
            putString("network_type", getNetworkType())
        }
        analytics.logEvent("sync_success", bundle)
    }
    
    fun logSyncFailure(error: String, itemCount: Int) {
        val bundle = Bundle().apply {
            putString("error_type", error)
            putInt("items_pending", itemCount)
            putString("network_type", getNetworkType())
        }
        analytics.logEvent("sync_failure", bundle)
    }
    
    fun logConflict(postId: String, resolutionMethod: String) {
        val bundle = Bundle().apply {
            putString("post_id", postId)
            putString("resolution_method", resolutionMethod)
        }
        analytics.logEvent("sync_conflict", bundle)
    }
    
    fun logOfflineUsage(duration: Long, actionsPerformed: Int) {
        val bundle = Bundle().apply {
            putLong("offline_duration_ms", duration)
            putInt("actions_performed", actionsPerformed)
        }
        analytics.logEvent("offline_usage", bundle)
    }
    
    private fun getNetworkType(): String {
        val cm = context.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager
        val network = cm.activeNetwork ?: return "none"
        val capabilities = cm.getNetworkCapabilities(network) ?: return "unknown"
        
        return when {
            capabilities.hasTransport(NetworkCapabilities.TRANSPORT_WIFI) -> "wifi"
            capabilities.hasTransport(NetworkCapabilities.TRANSPORT_CELLULAR) -> "cellular"
            capabilities.hasTransport(NetworkCapabilities.TRANSPORT_ETHERNET) -> "ethernet"
            else -> "other"
        }
    }
}

class PerformanceMonitor {
    private val performanceMonitoring = FirebasePerformance.getInstance()
    
    fun trackSync(block: suspend () -> Unit) {
        val trace = performanceMonitoring.newTrace("sync_operation")
        trace.start()
        
        val startTime = System.currentTimeMillis()
        var success = false
        
        try {
            block()
            success = true
        } catch (e: Exception) {
            trace.putAttribute("error", e.message ?: "unknown")
            throw e
        } finally {
            val duration = System.currentTimeMillis() - startTime
            trace.putMetric("duration_ms", duration)
            trace.putAttribute("success", success.toString())
            trace.stop()
        }
    }
    
    fun trackDatabaseOperation(operation: String, block: () -> Unit) {
        val trace = performanceMonitoring.newTrace("db_$operation")
        trace.start()
        
        try {
            block()
        } finally {
            trace.stop()
        }
    }
}

🚀 실전 프로젝트 예시

// 1. 데이터 모델
@Entity(tableName = "notes")
data class Note(
    @PrimaryKey val id: String = UUID.randomUUID().toString(),
    val title: String,
    val content: String,
    val imageUrl: String? = null,
    val createdAt: Long = System.currentTimeMillis(),
    val updatedAt: Long = System.currentTimeMillis(),
    val syncStatus: SyncStatus = SyncStatus.PENDING,
    val isDeleted: Boolean = false,
    val version: Int = 1
)

// 2. DAO
@Dao
interface NoteDao {
    @Query("SELECT * FROM notes WHERE isDeleted = 0 ORDER BY updatedAt DESC")
    fun getAllNotes(): Flow<List<Note>>
    
    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun insertNote(note: Note)
    
    @Update
    suspend fun updateNote(note: Note)
    
    @Query("UPDATE notes SET isDeleted = 1, syncStatus = 'PENDING' WHERE id = :id")
    suspend fun softDeleteNote(id: String)
    
    @Query("SELECT * FROM notes WHERE syncStatus != 'SYNCED'")
    suspend fun getUnsyncedNotes(): List<Note>
}

// 3. Repository
class NoteRepository(
    private val noteDao: NoteDao,
    private val apiService: ApiService,
    private val imageCache: ImageCache,
    private val syncManager: SyncManager
) {
    // 노트 목록 (로컬 데이터)
    fun getNotes(): Flow<List<Note>> = noteDao.getAllNotes()
    
    // 노트 생성
    suspend fun createNote(title: String, content: String, imageUri: Uri?) {
        val note = Note(
            title = title,
            content = content,
            imageUrl = imageUri?.toString()
        )
        
        // 로컬에 저장
        noteDao.insertNote(note)
        
        // 이미지가 있으면 캐싱
        imageUri?.let { uri ->
            imageCache.cacheImage(note.id, uri)
        }
        
        // 동기화 예약
        syncManager.scheduleSyncWork()
    }
    
    // 노트 수정
    suspend fun updateNote(note: Note) {
        val updatedNote = note.copy(
            updatedAt = System.currentTimeMillis(),
            syncStatus = SyncStatus.PENDING,
            version = note.version + 1
        )
        
        noteDao.updateNote(updatedNote)
        syncManager.scheduleSyncWork()
    }
    
    // 노트 삭제 (Soft Delete)
    suspend fun deleteNote(id: String) {
        noteDao.softDeleteNote(id)
        syncManager.scheduleSyncWork()
    }
    
    // 동기화
    suspend fun sync() {
        val unsyncedNotes = noteDao.getUnsyncedNotes()
        
        unsyncedNotes.forEach { note ->
            try {
                when {
                    note.isDeleted -> {
                        apiService.deleteNote(note.id)
                    }
                    note.version == 1 -> {
                        apiService.createNote(note)
                    }
                    else -> {
                        val serverNote = apiService.getNote(note.id)
                        val resolved = resolveConflict(note, serverNote)
                        apiService.updateNote(resolved)
                    }
                }
                
                noteDao.updateNote(note.copy(syncStatus = SyncStatus.SYNCED))
            } catch (e: Exception) {
                noteDao.updateNote(note.copy(syncStatus = SyncStatus.FAILED))
            }
        }
    }
    
    private fun resolveConflict(local: Note, remote: Note): Note {
        return if (local.updatedAt > remote.updatedAt) local else remote
    }
}

// 4. ViewModel
class NoteListViewModel(
    private val repository: NoteRepository,
    private val networkMonitor: NetworkMonitor
) : ViewModel() {
    
    val notes = repository.getNotes()
        .stateIn(viewModelScope, SharingStarted.Lazily, emptyList())
    
    val isOnline = networkMonitor.networkStatus
        .map { it == NetworkStatus.AVAILABLE }
        .stateIn(viewModelScope, SharingStarted.Lazily, false)
    
    fun createNote(title: String, content: String, imageUri: Uri?) {
        viewModelScope.launch {
            repository.createNote(title, content, imageUri)
        }
    }
    
    fun updateNote(note: Note) {
        viewModelScope.launch {
            repository.updateNote(note)
        }
    }
    
    fun deleteNote(id: String) {
        viewModelScope.launch {
            repository.deleteNote(id)
        }
    }
    
    fun syncNow() {
        viewModelScope.launch {
            repository.sync()
        }
    }
}

// 5. Compose UI
@Composable
fun NoteListScreen(viewModel: NoteListViewModel) {
    val notes by viewModel.notes.collectAsState()
    val isOnline by viewModel.isOnline.collectAsState()
    
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("내 노트") },
                actions = {
                    if (!isOnline) {
                        Icon(
                            Icons.Default.CloudOff,
                            contentDescription = "오프라인",
                            tint = Color.Gray
                        )
                    }
                }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = { /* 새 노트 */ }) {
                Icon(Icons.Default.Add, contentDescription = "추가")
            }
        }
    ) { padding ->
        LazyColumn(
            modifier = Modifier.padding(padding)
        ) {
            if (!isOnline) {
                item {
                    OfflineBanner()
                }
            }
            
            items(notes, key = { it.id }) { note ->
                NoteItem(
                    note = note,
                    onEdit = { viewModel.updateNote(it) },
                    onDelete = { viewModel.deleteNote(it.id) }
                )
            }
        }
    }
}

@Composable
fun NoteItem(
    note: Note,
    onEdit: (Note) -> Unit,
    onDelete: (Note) -> Unit
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .clickable { onEdit(note) }
    ) {
        Row(
            modifier = Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column(modifier = Modifier.weight(1f)) {
                Text(
                    note.title,
                    style = MaterialTheme.typography.h6
                )
                Text(
                    note.content,
                    maxLines = 2,
                    overflow = TextOverflow.Ellipsis
                )
                Text(
                    formatDate(note.updatedAt),
                    style = MaterialTheme.typography.caption,
                    color = Color.Gray
                )
            }
            
            // 동기화 상태
            when (note.syncStatus) {
                SyncStatus.SYNCED -> {
                    Icon(
                        Icons.Default.CloudDone,
                        contentDescription = "동기화됨",
                        tint = Color.Green,
                        modifier = Modifier.size(20.dp)
                    )
                }
                SyncStatus.PENDING -> {
                    CircularProgressIndicator(
                        modifier = Modifier.size(20.dp),
                        strokeWidth = 2.dp
                    )
                }
                SyncStatus.FAILED -> {
                    Icon(
                        Icons.Default.Error,
                        contentDescription = "실패",
                        tint = Color.Red,
                        modifier = Modifier.size(20.dp)
                    )
                }
            }
        }
    }
}

💡 베스트 프랙티스 & 팁

🎓 학습 리소스 및 다음 단계