Skip to content

기능 | QR 코드 스캐너

Jump to bottom
JB edited this page Oct 29, 2024 · 5 revisions

🛠 기본 설정

1) CodeScanner 패키지 추가

  1. File > Add Package Dependencies 선택
  2. URL 입력창에 다음 주소 입력: 
    https://github.com/twostraws/CodeScanner
  3. Version 설정: "Up to Next Major" 선택 (기본값)
  4. Add Package 클릭

2) 카메라 권한 설정

Info.plist에 카메라 사용 권한 설명을 추가합니다

<key>NSCameraUsageDescription</key>
<string>자전거 대여를 위해 QR 코드를 스캔하려면 카메라 접근 권한이 필요합니다.</string>

💻 코드 구현

1) 기본 구조

import SwiftUI
import CodeScanner  // CodeScanner 패키지 import

struct QRScannerView: View {
    @State private var isShowingScanner = false  // 스캐너 표시 여부
    
    var body: some View {
        Button("QR 코드 스캔") {
            isShowingScanner = true
        }
        .sheet(isPresented: $isShowingScanner) {
            CodeScannerView(
                codeTypes: [.qr],
                simulatedData: "테스트 데이터",
                completion: handleScan
            )
        }
    }
    
    func handleScan(result: Result<ScanResult, ScanError>) {
        isShowingScanner = false
        
        switch result {
        case .success(let result):
            // QR 코드 스캔 성공 시 처리
            print("스캔된 코드: \(result.string)")
        case .failure(let error):
            // 스캔 실패 시 처리
            print("스캔 실패: \(error.localizedDescription)")
        }
    }
}

2) 스캔 결과 처리 예시

// 스캔 결과를 저장할 모델
struct ScannedData: Identifiable {
    let id = UUID()
    let code: String
    let timestamp: Date
}

// QR 스캐너 뷰
struct QRScannerView: View {
    @State private var isShowingScanner = false
    @State private var scannedData: [ScannedData] = []
    @State private var showAlert = false
    @State private var alertMessage = ""
    
    var body: some View {
        VStack {
            Button("QR 코드 스캔") {
                isShowingScanner = true
            }
            
            List(scannedData) { data in
                VStack(alignment: .leading) {
                    Text(data.code)
                        .font(.headline)
                    Text(data.timestamp, style: .time)
                        .font(.caption)
                }
            }
        }
        .sheet(isPresented: $isShowingScanner) {
            CodeScannerView(
                codeTypes: [.qr],
                simulatedData: "BIKE-123\n2024-03-15",
                completion: handleScan
            )
        }
        .alert("스캔 결과", isPresented: $showAlert) {
            Button("확인") { }
        } message: {
            Text(alertMessage)
        }
    }
    
    func handleScan(result: Result<ScanResult, ScanError>) {
        isShowingScanner = false
        
        switch result {
        case .success(let result):
            let newScan = ScannedData(code: result.string, timestamp: Date())
            scannedData.append(newScan)
            alertMessage = "성공: \(result.string)"
            showAlert = true
            
        case .failure(let error):
            alertMessage = "실패: \(error.localizedDescription)"
            showAlert = true
        }
    }
}

🧐 주요 기능 설명

CodeScannerView 매개변수

  • codeTypes: 스캔할 코드 유형 배열 (예: [.qr])
  • simulatedData: 시뮬레이터 테스트용 가상 데이터
  • completion: 스캔 완료 시 호출될 핸들러

시뮬레이터 vs 실제 기기

  • 시뮬레이터: 카메라를 사용할 수 없어 simulatedData를 반환
  • 실제 기기: 실제 카메라를 통한 QR 코드 스캔

📋 활용 예시

1) 기본적인 사용

struct ContentView: View {
    @State private var isShowingScanner = false
    
    var body: some View {
        Button("스캔 시작") {
            isShowingScanner = true
        }
        .sheet(isPresented: $isShowingScanner) {
            CodeScannerView(
                codeTypes: [.qr],
                simulatedData: "테스트",
                completion: handleScan
            )
        }
    }
    
    func handleScan(result: Result<ScanResult, ScanError>) {
        isShowingScanner = false
        if case .success(let code) = result {
            print(code.string)
        }
    }
}

2) 커스텀 UI 추가

CodeScannerView(codeTypes: [.qr], simulatedData: "테스트", completion: handleScan)
    .overlay(
        Rectangle()
            .stroke(Color.green, lineWidth: 2)
            .frame(width: 200, height: 200)
    )

3) 캡쳐 예시

import SwiftUI
import CodeScanner

struct ContentView: View {
    @State private var isShowingScanner = false
    @State private var scannedCodes: [ScannedCode] = []
    @State private var showingAlert = false
    @State private var alertMessage = ""
    
    var body: some View {
        NavigationView {
            VStack {
                // 스캔된 코드 목록
                if scannedCodes.isEmpty {
                    ContentUnavailableView(
                        "스캔된 QR 코드가 없습니다",
                        systemImage: "qrcode",
                        description: Text("QR 코드를 스캔해보세요")
                    )
                } else {
                    List {
                        ForEach(scannedCodes) { code in
                            VStack(alignment: .leading, spacing: 8) {
                                Text(code.content)
                                    .font(.headline)
                                Text(code.timestamp, style: .time)
                                    .font(.caption)
                                    .foregroundColor(.secondary)
                            }
                            .padding(.vertical, 4)
                        }
                    }
                }
            }
            .navigationTitle("QR 스캐너")
            .toolbar {
                Button(action: {
                    isShowingScanner = true
                }) {
                    Image(systemName: "qrcode.viewfinder")
                    Text("스캔")
                }
            }
            .sheet(isPresented: $isShowingScanner) {
                CodeScannerView(
                    codeTypes: [.qr],
                    simulatedData: "테스트 QR 코드\nhttps://example.com",
                    completion: handleScan
                )
            }
            .alert("스캔 결과", isPresented: $showingAlert) {
                Button("확인", role: .cancel) { }
            } message: {
                Text(alertMessage)
            }
        }
    }
    
    func handleScan(result: Result<ScanResult, ScanError>) {
        isShowingScanner = false
        
        switch result {
        case .success(let result):
            // 스캔 성공 처리
            let newCode = ScannedCode(content: result.string)
            scannedCodes.insert(newCode, at: 0)  // 최신 스캔을 위에 추가
            alertMessage = "스캔 성공: \(result.string)"
        case .failure(let error):
            // 스캔 실패 처리
            alertMessage = "스캔 실패: \(error.localizedDescription)"
        }
        
        showingAlert = true
    }
}

// 스캔된 QR 코드를 저장할 모델
struct ScannedCode: Identifiable {
    let id = UUID()
    let content: String
    let timestamp = Date()
}

캡쳐

Clone this wiki locally