feat(address): 카카오 주소 검색을 추가한다
This commit is contained in:
Yu Sung
@@ -0,0 +1,165 @@
|
||||
import Foundation
|
||||
import SwiftUI
|
||||
import WebKit
|
||||
|
||||
struct KakaoPostcodeResult {
|
||||
let zonecode: String
|
||||
let address: String
|
||||
|
||||
init?(payload: Any) {
|
||||
guard let values = payload as? [String: Any],
|
||||
let zonecode = values["zonecode"] as? String,
|
||||
let address = values["address"] as? String,
|
||||
!zonecode.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty,
|
||||
!address.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty else { return nil }
|
||||
self.zonecode = zonecode
|
||||
self.address = address
|
||||
}
|
||||
}
|
||||
|
||||
struct KakaoPostcodeSearchView: View {
|
||||
let onSelect: (KakaoPostcodeResult) -> Void
|
||||
@Environment(\.dismiss) private var dismiss
|
||||
@State private var isLoading = true
|
||||
@State private var hasFailed = false
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 0) {
|
||||
HStack {
|
||||
Text("우편번호 검색").appFont(.body2)
|
||||
Spacer()
|
||||
Button("닫기") { dismiss() }
|
||||
.appFont(.body3)
|
||||
.frame(minHeight: 44)
|
||||
.accessibilityLabel("우편번호 검색 닫기")
|
||||
}
|
||||
.foregroundColor(.white)
|
||||
.padding(.horizontal, SodaSpacing.s14)
|
||||
ZStack {
|
||||
KakaoPostcodeWebView(onSelect: onSelect) { failed in
|
||||
hasFailed = failed
|
||||
isLoading = false
|
||||
}
|
||||
.opacity(hasFailed ? 0 : 1)
|
||||
.allowsHitTesting(!hasFailed)
|
||||
.accessibilityHidden(hasFailed)
|
||||
if hasFailed {
|
||||
Text("주소 검색을 불러오지 못했습니다. 닫은 후 다시 시도해 주세요.")
|
||||
.appFont(.body3)
|
||||
.foregroundColor(.white)
|
||||
.padding(SodaSpacing.s14)
|
||||
} else if isLoading {
|
||||
ProgressView("주소 검색을 불러오는 중")
|
||||
.tint(.white)
|
||||
.foregroundColor(.white)
|
||||
.padding(SodaSpacing.s14)
|
||||
.background(Color.gray900)
|
||||
.cornerRadius(SodaRadius.r14)
|
||||
}
|
||||
}
|
||||
}
|
||||
.background(Color.black)
|
||||
}
|
||||
}
|
||||
|
||||
private struct KakaoPostcodeWebView: UIViewRepresentable {
|
||||
let onSelect: (KakaoPostcodeResult) -> Void
|
||||
let onLoad: (Bool) -> Void
|
||||
private static let handlerName = "postcodeSelection"
|
||||
|
||||
func makeCoordinator() -> Coordinator {
|
||||
Coordinator(onSelect: onSelect, onLoad: onLoad)
|
||||
}
|
||||
|
||||
func makeUIView(context: Context) -> WKWebView {
|
||||
let configuration = WKWebViewConfiguration()
|
||||
configuration.userContentController.add(context.coordinator, name: Self.handlerName)
|
||||
let webView = WKWebView(frame: .zero, configuration: configuration)
|
||||
webView.navigationDelegate = context.coordinator
|
||||
webView.loadHTMLString(Self.html, baseURL: URL(string: "https://postcode.map.kakao.com/"))
|
||||
return webView
|
||||
}
|
||||
|
||||
func updateUIView(_ uiView: WKWebView, context: Context) {}
|
||||
|
||||
static func dismantleUIView(_ uiView: WKWebView, coordinator: Coordinator) {
|
||||
coordinator.isActive = false
|
||||
uiView.stopLoading()
|
||||
uiView.configuration.userContentController.removeScriptMessageHandler(forName: handlerName)
|
||||
uiView.navigationDelegate = nil
|
||||
uiView.uiDelegate = nil
|
||||
}
|
||||
|
||||
private static let html = """
|
||||
<!doctype html>
|
||||
<html><head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>html,body,#postcode{margin:0;width:100%;height:100%;}</style>
|
||||
<script src="https://t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"
|
||||
onerror="document.documentElement.dataset.postcodeError='true'"></script>
|
||||
</head><body><div id="postcode"></div>
|
||||
<script>
|
||||
try {
|
||||
new kakao.Postcode({
|
||||
width: '100%', height: '100%',
|
||||
oncomplete: function(data) {
|
||||
window.webkit.messageHandlers.postcodeSelection.postMessage({ zonecode: data.zonecode, address: data.address });
|
||||
}
|
||||
}).embed(document.getElementById('postcode'));
|
||||
} catch (error) {
|
||||
document.documentElement.dataset.postcodeError = 'true';
|
||||
}
|
||||
</script></body></html>
|
||||
"""
|
||||
|
||||
final class Coordinator: NSObject, WKScriptMessageHandler, WKNavigationDelegate {
|
||||
private let onSelect: (KakaoPostcodeResult) -> Void
|
||||
private let onLoad: (Bool) -> Void
|
||||
fileprivate var isActive = true
|
||||
private var hasFailed = false
|
||||
private var hasSelected = false
|
||||
|
||||
init(onSelect: @escaping (KakaoPostcodeResult) -> Void, onLoad: @escaping (Bool) -> Void) {
|
||||
self.onSelect = onSelect
|
||||
self.onLoad = onLoad
|
||||
}
|
||||
|
||||
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
|
||||
guard isActive, !hasFailed, !hasSelected,
|
||||
message.name == KakaoPostcodeWebView.handlerName,
|
||||
message.frameInfo.isMainFrame,
|
||||
let result = KakaoPostcodeResult(payload: message.body) else { return }
|
||||
hasSelected = true
|
||||
onSelect(result)
|
||||
}
|
||||
|
||||
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
|
||||
webView.evaluateJavaScript("document.documentElement.dataset.postcodeError === 'true'") { [weak self] value, error in
|
||||
guard let self, self.isActive, !self.hasFailed else { return }
|
||||
if error != nil || value as? Bool != false {
|
||||
self.fail()
|
||||
} else {
|
||||
self.onLoad(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
|
||||
fail()
|
||||
}
|
||||
|
||||
func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
|
||||
fail()
|
||||
}
|
||||
|
||||
func webViewWebContentProcessDidTerminate(_ webView: WKWebView) {
|
||||
fail()
|
||||
}
|
||||
|
||||
private func fail() {
|
||||
guard isActive else { return }
|
||||
hasFailed = true
|
||||
onLoad(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import SwiftUI
|
||||
|
||||
struct SodaAddressInputView: View {
|
||||
@Binding var zipCode: String
|
||||
@Binding var address: String
|
||||
@Binding var addressDetail: String
|
||||
@State private var isSearching = false
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: SodaSpacing.s4) {
|
||||
Text("우편번호")
|
||||
.appFont(.body5)
|
||||
.foregroundColor(.grayee)
|
||||
VStack(spacing: SodaSpacing.s8) {
|
||||
HStack(spacing: SodaSpacing.s8) {
|
||||
readonlyField(zipCode, placeholder: "우편번호를 입력해 주세요", label: "우편번호")
|
||||
Button {
|
||||
isSearching = true
|
||||
} label: {
|
||||
Text("주소 검색")
|
||||
.appFont(.body5)
|
||||
.foregroundColor(.white)
|
||||
.padding(.horizontal, SodaSpacing.s14)
|
||||
.frame(minHeight: 44)
|
||||
.overlay(Capsule().stroke(Color.gray500, lineWidth: 1))
|
||||
.fixedSize(horizontal: true, vertical: false)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.accessibilityLabel("주소 검색")
|
||||
}
|
||||
VStack(alignment: .leading, spacing: SodaSpacing.s4) {
|
||||
Text("주소")
|
||||
.appFont(.body5)
|
||||
.foregroundColor(.grayee)
|
||||
readonlyField(address, placeholder: "주소를 입력해 주세요", label: "기본 주소")
|
||||
}
|
||||
VStack(alignment: .leading, spacing: SodaSpacing.s4) {
|
||||
Text("상세주소")
|
||||
.appFont(.body5)
|
||||
.foregroundColor(.grayee)
|
||||
TextField("", text: $addressDetail, prompt: Text("상세 주소를 입력해 주세요").foregroundColor(.gray600))
|
||||
.appFont(.body3)
|
||||
.foregroundColor(.white)
|
||||
.textContentType(.streetAddressLine2)
|
||||
.autocorrectionDisabled()
|
||||
.padding(SodaSpacing.s14)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.background(Color.gray900)
|
||||
.cornerRadius(SodaRadius.r14)
|
||||
.accessibilityLabel("상세 주소")
|
||||
}
|
||||
}
|
||||
}
|
||||
.sheet(isPresented: $isSearching) {
|
||||
KakaoPostcodeSearchView { result in
|
||||
if zipCode != result.zonecode || address != result.address {
|
||||
addressDetail = ""
|
||||
}
|
||||
zipCode = result.zonecode
|
||||
address = result.address
|
||||
isSearching = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func readonlyField(_ value: String, placeholder: String, label: String) -> some View {
|
||||
Text(value.isEmpty ? placeholder : value)
|
||||
.appFont(.body3)
|
||||
.foregroundColor(value.isEmpty ? .gray600 : .white)
|
||||
.padding(SodaSpacing.s14)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.background(Color.gray900)
|
||||
.cornerRadius(SodaRadius.r14)
|
||||
.accessibilityLabel(label)
|
||||
.accessibilityValue(value)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user