diff --git a/StockMate/.DS_Store b/StockMate/.DS_Store
index 8b131bc..9b2b289 100644
Binary files a/StockMate/.DS_Store and b/StockMate/.DS_Store differ
diff --git a/StockMate/StockMate/app/feature/cart/ui/DeliveryStatusView.swift b/StockMate/StockMate/app/feature/cart/ui/DeliveryStatusView.swift
new file mode 100644
index 0000000..2825687
--- /dev/null
+++ b/StockMate/StockMate/app/feature/cart/ui/DeliveryStatusView.swift
@@ -0,0 +1,106 @@
+//
+//  DeliveryStatusView.swift
+//  StockMate
+//
+//  Created by Admin on 10/30/25.
+//
+
+import SwiftUI
+
+struct DeliveryStep {
+    let title: String
+    let iconName: String // Asset 이름
+}
+
+
+struct DeliveryStatusView: View {
+    let steps: [DeliveryStep] = [
+        DeliveryStep(title: "결제완료", iconName: "check"),
+        DeliveryStep(title: "승인대기중", iconName: "hourglass"),
+        DeliveryStep(title: "상품준비중", iconName: "uploadprogress"),
+        DeliveryStep(title: "배송중", iconName: "rocket"),
+        DeliveryStep(title: "배송완료", iconName: "pindrop")
+    ]
+
+    let currentStep: Int
+
+    var body: some View {
+        GeometryReader { geo in
+            HStack(alignment: .center, spacing: 0) {
+                ForEach(0..<steps.count, id: \.self) { index in
+                    let step = steps[index]
+                    let isAllGray = currentStep == 6
+                    let isCompleted = !isAllGray && index <= currentStep
+
+                    ZStack {
+                        VStack(spacing: 8) {
+                            Spacer(minLength: 0) // 위쪽 여백 확보
+                            ZStack {
+                                RoundedRectangle(cornerRadius: 8)
+                                    .strokeBorder(isCompleted ? .clear : Color.gray.opacity(0.4), lineWidth: 1.5)
+                                    .background(
+                                        RoundedRectangle(cornerRadius: 8)
+                                            .fill(isCompleted ? Color.Primary : .white)
+                                    )
+                                    .frame(width: 40, height: 40)
+                                
+                                Image(step.iconName)
+                                    .renderingMode(.template)
+                                    .resizable()
+                                    .scaledToFit()
+                                    .frame(width: 20, height: 20)
+                                    .foregroundColor(isCompleted ? .white : (isAllGray ? .gray : .gray))
+                            }
+                            Text(step.title)
+                                .font(.system(size: 11))
+                                .foregroundColor(isAllGray ? .gray : (isCompleted ? .black : .gray))
+                            Spacer(minLength: 0) // 아래쪽 여백 확보
+                        }
+
+                        // 선 연결
+                        if index < steps.count - 1 {
+                            HStack(spacing: 0) {
+                                Spacer()
+                                if isAllGray {
+                                    Image("dottedline")
+                                        .renderingMode(.template)
+                                        .foregroundColor(.gray)
+                                        .frame(width: 42, height: 4)
+                                        .offset(x: 21)
+                                } else if index < currentStep {
+                                    Rectangle()
+                                        .fill(Color.Primary)
+                                        .frame(width: 42, height: 4)
+                                        .offset(x: 22)
+                                } else if index == currentStep {
+                                    Image("dottedline")
+                                        .renderingMode(.template)
+                                        .foregroundColor(Color.Primary)
+                                        .frame(width: 42, height: 4)
+                                        .offset(x: 21)
+                                } else {
+                                    Image("dottedline")
+                                        .renderingMode(.template)
+                                        .foregroundColor(.gray)
+                                        .frame(width: 42, height: 4)
+                                        .offset(x: 21)
+                                }
+                            }
+                            .offset(y: -10) // 선이 정확히 중앙에 오도록 조정
+                        }
+                    }
+                    .frame(maxWidth: .infinity)
+                }
+            }
+        }
+        .frame(height: 90)
+        .background(Color.white)
+        .clipShape(RoundedRectangle(cornerRadius: 16)) // 박스 모서리 잘림 방지
+        .shadow(color: .black.opacity(0.05), radius: 3, y: 2)
+    }
+}
+
+
+#Preview {
+    DeliveryStatusView(currentStep: deliveryStep(for: "REFUND_REJECTED"))
+}
diff --git a/StockMate/StockMate/app/feature/orders/ui/OrderDetailView.swift b/StockMate/StockMate/app/feature/orders/ui/OrderDetailView.swift
index 1d8054e..a963578 100644
--- a/StockMate/StockMate/app/feature/orders/ui/OrderDetailView.swift
+++ b/StockMate/StockMate/app/feature/orders/ui/OrderDetailView.swift
@@ -19,32 +19,49 @@ struct OrderDetailView: View {
                     .frame(maxWidth: .infinity, maxHeight: .infinity)
             } else if let order = viewModel.order {
                 VStack(spacing: 16) {
-                    
-                    // ✅ 주문 정보
-                    VStack(alignment: .leading, spacing: 8) {
+                    VStack {
+                        DeliveryStatusView(currentStep: deliveryStep(for: order.orderStatus))
+                            .frame(maxWidth: .infinity, alignment: .center)
+                    }
+                    .frame(maxWidth: .infinity, alignment: .center)
+
+                   
+                    VStack(alignment: .leading, spacing: 6) {
                         Text(formatDate(order.createdAt))
                             .font(.system(size: 15, weight: .semibold))
-                        Text("주문번호: \(order.orderNumber)")
-                            .font(.system(size: 14))
-                            .foregroundColor(.gray)
-                        HStack {
-                            Text("상태:")
-                                .font(.system(size: 14, weight: .semibold))
-                            Text(statusText(order.orderStatus))
-                                .font(.system(size: 13, weight: .semibold))
-                                .padding(.horizontal, 10)
-                                .padding(.vertical, 6)
-                                .background(statusBdColor(order.orderStatus))
-                                .foregroundColor(statusColor(order.orderStatus))
-                                .cornerRadius(12)
+                            .padding(.bottom, 4)
+                        
+                        // ✅ 주문 정보
+                        HStack(alignment: .top, spacing: 6){
+                            VStack(alignment: .leading){
+                                Text("주문번호")
+                                    .font(.system(size: 14))
+                                    .padding(.bottom, 4)
+                                
+                                Text("상태")
+                                    .font(.system(size: 14))
+                            }
+                            
+                            VStack(alignment: .leading){
+                                Text(order.orderNumber)
+                                    .font(.system(size: 14))
+                                
+                                Text(statusText(order.orderStatus))
+                                    .font(.system(size: 13, weight: .semibold))
+                                    .padding(.horizontal, 10)
+                                    .padding(.vertical, 6)
+                                    .background(statusBdColor(order.orderStatus))
+                                    .foregroundColor(statusColor(order.orderStatus))
+                                    .cornerRadius(12)
+                            }.padding(.leading)
                         }
+                        
                     }
                     .frame(maxWidth: .infinity, alignment: .leading) // ✅ 이거 추가
                     .padding(.all, 20)
                     .background(Color.white)
                     .cornerRadius(16)
                     .shadow(color: .black.opacity(0.05), radius: 3, y: 2)
-//                    .padding(.horizontal, 20)
 
 
                     // ✅ 배송 정보
@@ -52,22 +69,29 @@ struct OrderDetailView: View {
                         Text("배송정보")
                             .font(.system(size: 15, weight: .semibold))
                             .padding(.bottom, 4)
-                        Text(order.userInfo?.owner ?? "-")
-                        Text(order.userInfo?.address ?? "-")
-                        if !(order.etc ?? "").isEmpty {
-                            Text(order.etc ?? "")
-                        }
-                        if let email = order.userInfo?.email {
-                            Text(email)
-                                .foregroundColor(.gray)
-                        }
+                        
+                        infoRow("주문자명", order.userInfo?.owner ?? "-")
+                        infoRow("주소", order.userInfo?.address ?? "-")
+                        // ✅ 운송장정보 안전 처리
+                        let trackingText: String = {
+                            if let carrier = order.carrier,
+                               let trackingNo = order.trackingNumber,
+                               !carrier.isEmpty,
+                               !trackingNo.isEmpty {
+                                return "\(carrier): \(trackingNo)"
+                            }
+                            return "-"
+                        }()
+                        infoRow("운송장번호", trackingText)
+                        
+                        infoRow("요청사항", order.etc ?? "")
                     }
                     .frame(maxWidth: .infinity, alignment: .leading) // ✅ 여기도 추가
                     .padding(.all, 20)
                     .background(Color.white)
                     .cornerRadius(16)
                     .shadow(color: .black.opacity(0.05), radius: 3, y: 2)
-//                    .padding(.horizontal, 20)
+
                     
                     // ✅ 주문 상품
                     OrderSectionCard {
@@ -138,7 +162,7 @@ struct OrderDetailView: View {
                     // ✅ 하단 버튼
                     HStack(spacing: 12) {
                         // 왼쪽: 영수증 확인
-                        Button(action: {}) {
+                        NavigationLink(destination: ReceiptView(orderId: order.id)) {
                             Text("영수증 확인")
                                 .font(.system(size: 15, weight: .semibold))
                                 .foregroundColor(Color.Primary)
@@ -152,24 +176,58 @@ struct OrderDetailView: View {
                                 .cornerRadius(10)
                         }
 
-                        // 오른쪽: 주문 취소
-                        Button(action: {
-                            // 주문취소 처리
-                            Task {
-                                await orderViewModel.cancelOrder(orderId: orderId)
+
+                        // 오른쪽 버튼: 주문 상태에 따라 변경
+                        if order.orderStatus == "ORDER_COMPLETED" ||
+                           order.orderStatus == "PAY_COMPLETED" ||
+                           order.orderStatus == "PENDING_APPROVAL" {
+                            // "주문취소" → 주문완료/결제완료/승인대기
+                            Button(action: {
+                                Task {
+                                    await orderViewModel.cancelOrder(orderId: orderId)
+                                }
+                            }) {
+                                Text("주문 취소")
+                                    .font(.system(size: 15, weight: .semibold))
+                                    .frame(maxWidth: .infinity)
+                                    .frame(height: 48)
+                                    .background(Color(hex: "#1D4ED8"))
+                                    .foregroundColor(.white)
+                                    .cornerRadius(10)
                             }
-                            
-                        }) {
-                            Text("주문 취소")
-                                .font(.system(size: 15, weight: .semibold))
-                                .frame(maxWidth: .infinity)
-                                .frame(height: 48)
-                                .background(Color(hex: "#1D4ED8"))
-                                .foregroundColor(.white)
-                                .cornerRadius(10)
+                           
+                        } else if order.orderStatus == "PENDING_RECEIVING" ||
+                                    order.orderStatus == "DELIVERED"  {
+                            // "입고 하기" → 입고대기/배송완료
+                            Button(action: {
+                                // TODO: 입고 처리 버튼
+                            }) {
+                                Text("입고 처리")
+                                    .font(.system(size: 15, weight: .semibold))
+                                    .frame(maxWidth: .infinity)
+                                    .frame(height: 48)
+                                    .background(Color(hex: "#1D4ED8"))
+                                    .foregroundColor(.white)
+                                    .cornerRadius(10)
+                            }
+                           
+                        } else {
+                            // 👉 나머지 상태 → "재주문하기" 버튼
+                            Button(action: {
+                                // TODO: 평가 액션 처리
+                            }) {
+                                Text("재주문하기")
+                                    .font(.system(size: 15, weight: .semibold))
+                                    .frame(maxWidth: .infinity)
+                                    .frame(height: 48)
+                                    .background(Color(hex: "#1D4ED8"))
+                                    .foregroundColor(.white)
+                                    .cornerRadius(10)
+                            }
+
                         }
                     }
-                    .padding(.top, 10)
+                    .padding(.top, 5)
 
                 }
                 .padding(.horizontal, 20) // ✅ 전체 섹션 동일 여백
@@ -199,50 +257,7 @@ struct OrderDetailView: View {
         .font(.system(size: 14))
     }
 
-    func formatDate(_ isoDate: String) -> String {
-        let comps = isoDate.split(separator: "T").first?.split(separator: "-") ?? []
-        guard comps.count == 3 else { return isoDate }
-        return "\(comps[0])년 \(comps[1])월 \(comps[2])일"
-    }
-
-    func statusText(_ status: String) -> String {
-        switch status {
-        case "ORDER_COMPLETED": return "주문 완료"
-        case "PENDING_SHIPPING": return "출고 대기"
-        case "REJECTED": return "출고 반려"
-        case "SHIPPING": return "배송 중"
-        case "DELIVERED": return "배송 완료"
-        case "RECEIVED": return "입고 완료"
-        case "CANCELLED": return "주문 취소"
-        default: return "알 수 없음"
-        }
-    }
-
-    func statusColor(_ status: String) -> Color {
-        switch status {
-        case "ORDER_COMPLETED": return .StatusGreen
-        case "PENDING_SHIPPING": return .InvUse
-        case "REJECTED": return .Danger
-        case "SHIPPING": return .Transfer
-        case "DELIVERED": return .Secondary
-        case "RECEIVED": return .StatusPurple
-        case "CANCELLED": return .gray
-        default: return .gray.opacity(0.6)
-        }
-    }
-
-    func statusBdColor(_ status: String) -> Color {
-        switch status {
-        case "ORDER_COMPLETED": return .StatusGreenBg
-        case "PENDING_SHIPPING": return .InvUseBg
-        case "REJECTED": return .DangerBg
-        case "SHIPPING": return .TransferBg
-        case "DELIVERED": return .LightBlue04
-        case "RECEIVED": return .StatusPurpleBg
-        case "CANCELLED": return Color(hex: "#EEEEEF")
-        default: return .gray.opacity(0.6)
-        }
-    }
+ 
 }
 
 // ✅ 카드 레이아웃 통일용
@@ -278,3 +293,87 @@ func formatDateOrDash(_ isoDate: String?) -> String {
     guard comps.count == 3 else { return "-" }
     return "\(comps[0])년 \(comps[1])월 \(comps[2])일"
 }
+
+func deliveryStep(for status: String) -> Int {
+    //6 -> 전체 회색
+    //4 -> 전체 파란색
+    switch status {
+    case "ORDER_COMPLETED": return 0    // 주문 완료
+    case "PAY_COMPLETED": return 0      // 결제 완료
+    case "PENDING_APPROVAL": return 1   // 승인 대기
+    case "FAILED": return 6             // 결제 실패
+    case "PENDING_SHIPPING": return 2   // 출고 대기
+    case "SHIPPING": return 3           // 배송중
+    case "PENDING_RECEIVING": return 4  // 입고 대기
+    case "REJECTED": return 6           // 승인 반려
+    case "DELIVERED": return 4          // 배송 완료
+    case "RECEIVED": return 4           // 입고 완료
+    case "REFUNDED": return 6           // 환불 완료
+    case "REFUND_REJECTED": return 6    // 환불 반려
+    case "CANCELLED": return 6          // 주문 취소
+    default: return 6
+    }
+}
+
+func formatDate(_ isoDate: String) -> String {
+    let comps = isoDate.split(separator: "T").first?.split(separator: "-") ?? []
+    guard comps.count == 3 else { return isoDate }
+    return "\(comps[0])년 \(comps[1])월 \(comps[2])일"
+}
+
+func statusText(_ status: String) -> String {
+    switch status {
+    case "ORDER_COMPLETED": return "주문 완료"      // 주문 완료
+    case "PAY_COMPLETED": return "결제 완료"        // 결제 완료
+    case "PENDING_APPROVAL": return "승인 대기"     // 승인대기
+    case "FAILED": return "결제 실패"               // 결제 실패
+    case "PENDING_SHIPPING": return "출고 대기"     // 출고 대기
+    case "SHIPPING": return "배송중"               // 배송중
+    case "PENDING_RECEIVING": return "배송 완료"    // 입고대기
+    case "REJECTED": return "승인 반려"             // 이론상 출고 반려
+    case "DELIVERED": return "배송 완료"            // 배송 완료
+    case "RECEIVED": return "입고 완료"             // 입고 완료
+    case "REFUNDED": return "환불 완료"             // 환불 완료
+    case "REFUND_REJECTED": return "환불 반려"      // 환불 반려
+    case "CANCELLED": return "주문 취소"            // 주문 취소
+    default: return "알 수 없음"
+    }
+}
+
+func statusColor(_ status: String) -> Color {
+    switch status {
+    case "ORDER_COMPLETED": return .StatusGreen
+    case "PAY_COMPLETED": return .StatusGreen
+    case "PENDING_APPROVAL": return .Warning
+    case "FAILED": return .Danger
+    case "PENDING_SHIPPING": return .InvUse
+    case "SHIPPING": return .Transfer
+    case "PENDING_RECEIVING": return .Secondary
+    case "REJECTED": return .Danger
+    case "DELIVERED": return .Secondary
+    case "RECEIVED": return .StatusPurple
+    case "REFUNDED": return .Gray
+    case "REFUND_REJECTED": return .Gray
+    case "CANCELLED": return .Gray
+    default: return .gray.opacity(0.6)
+    }
+}
+
+func statusBdColor(_ status: String) -> Color {
+    switch status {
+    case "ORDER_COMPLETED": return .StatusGreenBg
+    case "PAY_COMPLETED": return .StatusGreenBg
+    case "PENDING_APPROVAL": return .WarningBg
+    case "FAILED": return .DangerBg
+    case "PENDING_SHIPPING": return .InvUseBg
+    case "SHIPPING": return .TransferBg
+    case "PENDING_RECEIVING": return .LightBlue04
+    case "REJECTED": return .DangerBg
+    case "DELIVERED": return .LightBlue04
+    case "RECEIVED": return .StatusPurpleBg
+    case "REFUNDED": return Color(hex: "#EEEEEF")
+    case "REFUND_REJECTED": return Color(hex: "#EEEEEF")
+    case "CANCELLED": return Color(hex: "#EEEEEF")
+    default: return .gray.opacity(0.6)
+    }
+}
diff --git a/StockMate/StockMate/app/feature/orders/ui/OrderInfoView.swift b/StockMate/StockMate/app/feature/orders/ui/OrderInfoView.swift
index b167671..f32ac74 100644
--- a/StockMate/StockMate/app/feature/orders/ui/OrderInfoView.swift
+++ b/StockMate/StockMate/app/feature/orders/ui/OrderInfoView.swift
@@ -20,6 +20,7 @@ enum ShippingDateOption {
 struct OrderInfoView: View {
     @ObservedObject var cartViewModel: CartViewModel
     @StateObject var orderViewModel = OrderViewModel()
+    @StateObject private var depositViewModel = DepositViewModel()
     
     @State private var paymentType: PaymentType = .deposit
     @State private var shippingDateOption: ShippingDateOption = .today
@@ -74,7 +75,10 @@ struct OrderInfoView: View {
         .background(Color.Light)
         .navigationTitle("주문/결제")
         .navigationBarTitleDisplayMode(.inline)
-        .task { await cartViewModel.fetchCart() }
+        .task {
+            await cartViewModel.fetchCart()
+            await depositViewModel.fetchDepositAmount()
+        }
         .edgesIgnoringSafeArea(.bottom)
         .onChange(of: orderViewModel.isOrderSuccess) { success in
             if success {
@@ -84,7 +88,16 @@ struct OrderInfoView: View {
                 }
             }
         }
+        // ✅ 충전 bottom sheet 연결
+       .sheet(isPresented: $depositViewModel.showChargeSheet) {
+           DepositChargeView(viewModel: depositViewModel)
+               .presentationDetents([.fraction(0.80)]) // 시트 높이 85%
+//               .presentationDragIndicator(.visible)
+       }
+
     }
+        
+
 }
 
 // MARK: - UI 구성 View
@@ -164,35 +177,67 @@ extension OrderInfoView {
             .cornerRadius(16)
         }
     }
-    
     private var paymentSection: some View {
-        VStack(alignment: .leading) {
-            Text("결제 수단")
-                .font(.headline)
-                .padding(.leading, 5)
+        ZStack {
+            // 배경 이미지 적용
+            Image("deposit_background") // ← 에셋에 넣은 이미지 이름
+                .resizable()
+                .scaledToFill()
+                .frame(height: 185)
+                .clipped()
+                .cornerRadius(16.39)
             
-            VStack(alignment: .leading, spacing: 5) {
-                HStack{
-                    RadioButtonRow(title: "예치금 (잔액 ₩1,200,000)", selected: paymentType == .deposit) {
-                        paymentType = .deposit
+            VStack(alignment: .leading, spacing: 12) {
+                VStack (alignment: .leading, spacing: 13){
+                    HStack {
+                        Text("사용 가능 예치금")
+                            .font(.system(size: 17, weight: .bold))
+                            .padding(.leading, 5)
+                            .padding(.top, 25)
+                            .foregroundColor(Color.white)
                     }
-                    Spacer()
-                }
-                .frame(height: 35)
-                HStack{
-                    RadioButtonRow(title: "직접 결제", selected: paymentType == .card) {
-                        paymentType = .card
+                    
+                    HStack {
+                        // 예치금 금액 표시
+                        if depositViewModel.isLoading {
+                            ProgressView()
+                                .tint(.white)
+                        } else {
+                            Text("₩\(formatPrice(depositViewModel.balance))")
+                                .font(.system(size: 26, weight: .bold))
+                                .foregroundColor(Color.white)
+                        }
+
+                        // Text("₩\(cartViewModel.depositBalance?.formatted() ?? "0")")
+                        // .font(.system(size: 22, weight: .bold))
                     }
+                }
+
+                Spacer()
+                
+                HStack {
                     Spacer()
+                    Button {
+                        depositViewModel.showChargeSheet = true   // <-- $ 없이 할당
+                    } label: {
+                        Text("충전")
+                            .foregroundColor(Color.Primary)
+                            .font(.system(size: 14, weight: .bold))
+                            .padding(.vertical, 6)
+                            .padding(.horizontal, 14)
+                            .background(Color.white)
+                            .cornerRadius(20)
+                    }
+                    .padding(.trailing, 5)
                 }
-                .frame(height: 35)
+                .padding(.bottom, 25)
             }
-            .padding()
-            .frame(maxWidth: .infinity)
-            .background(Color.white)
-            .cornerRadius(16)
+            .frame(height: 185)
+            .padding(20)
         }
+        .frame(maxWidth: .infinity)
     }
+
     
     private var shippingDateSection: some View {
         VStack(alignment: .leading) {
diff --git a/StockMate/StockMate/app/feature/orders/ui/OrderListView.swift b/StockMate/StockMate/app/feature/orders/ui/OrderListView.swift
index 0dc04a5..a6e9aa5 100644
--- a/StockMate/StockMate/app/feature/orders/ui/OrderListView.swift
+++ b/StockMate/StockMate/app/feature/orders/ui/OrderListView.swift
@@ -155,43 +155,4 @@ struct OrderListCardView: View {
         .shadow(color: .black.opacity(0.05), radius: 4, x: 0, y: 2)
         .padding(.horizontal)
     }
-
-    func statusText(_ status: String) -> String {
-        switch status {
-        case "ORDER_COMPLETED": return "주문 완료"
-        case "PENDING_SHIPPING": return "출고 대기"
-        case "REJECTED": return "출고 반려"
-        case "SHIPPING": return "배송 중"
-        case "DELIVERED": return "배송 완료"
-        case "RECEIVED": return "입고 완료"
-        case "CANCELLED": return "주문 취소"
-        default: return "알 수 없음"
-        }
-    }
-
-    func statusColor(_ status: String) -> Color {
-        switch status {
-        case "ORDER_COMPLETED": return .StatusGreen
-        case "PENDING_SHIPPING": return .InvUse
-        case "REJECTED": return .Danger
-        case "SHIPPING": return .Transfer
-        case "DELIVERED": return .Secondary
-        case "RECEIVED": return .StatusPurple
-        case "CANCELLED": return .gray
-        default: return .gray.opacity(0.6)
-        }
-    }
-    
-    func statusBdColor(_ status: String) -> Color {
-        switch status {
-        case "ORDER_COMPLETED": return .StatusGreenBg
-        case "PENDING_SHIPPING": return .InvUseBg
-        case "REJECTED": return .DangerBg
-        case "SHIPPING": return .TransferBg
-        case "DELIVERED": return .LightBlue04
-        case "RECEIVED": return .StatusPurpleBg
-        case "CANCELLED": return Color(hex: "#EEEEEF")
-        default: return .gray.opacity(0.6)
-        }
-    }
 }
diff --git a/StockMate/StockMate/app/feature/orders/ui/ReceiptView.swift b/StockMate/StockMate/app/feature/orders/ui/ReceiptView.swift
index 59aec01..9e690f1 100644
--- a/StockMate/StockMate/app/feature/orders/ui/ReceiptView.swift
+++ b/StockMate/StockMate/app/feature/orders/ui/ReceiptView.swift
@@ -7,70 +7,106 @@
 
 import SwiftUI
 import PDFKit
+import UIKit
 
 enum PDFType {
     case a4
     case receipt80mm
 }
-// TODO: API 연결 후 주문 상세 페이지와 연결
+
 struct ReceiptView: View {
+    let orderId: Int
     
+    @StateObject private var detailViewModel = OrderDetailViewModel()
     
-    @State var paymentType = "예치금"
-    @State var approvalNumber = "202510300743"
-    @State var date = "2025/10/30 07:43:54"
-    @State var orderNumber = "SMO-2"
-    @State var itemName = "배터리-트랜스미터"
-    @State var quantity = 1
-    @State var price = 5273
-    @State var sellerName = "박시영"
-    @State var businessNumber = "888777776666"
-    @State var phone = "010-2596-2352"
-    @State var address = "서울특별시 성동구 동일로 259 3층"
-
-    var vat: Int { Int(Double(price) * 0.1) }
-    var total: Int { price + vat }
+    @State var sellerName = "홍길동"
+    @State var businessNumber = "215-87-12345"  // 형식만 맞춘 랜덤번호
+    @State var phone = "02-567-8901"
+    @State var address = "서울특별시 금천구 가산동 459-9"
 
+    
     var body: some View {
         ScrollView {
-            VStack(alignment: .leading) {
-                receiptContent
-                
-                HStack {
-                    pdfButton(type: .a4, title: "A4 PDF")
-                    pdfButton(type: .receipt80mm, title: "영수증 PDF")
+            if detailViewModel.isLoading {
+                ProgressView()
+                    .frame(maxWidth: .infinity, maxHeight: .infinity)
+            } else if let order = detailViewModel.order {
+                VStack(alignment: .leading) {
+                    receiptContent(order: order)
+                    
+                    Button {
+                        generatePDF(type: .receipt80mm, order: order)
+                    } label: {
+                        Text("영수증 PDF 저장")
+                            .frame(maxWidth: .infinity)
+                            .padding()
+                            .background(Color.blue)
+                            .foregroundColor(.white)
+                            .cornerRadius(8)
+                    }
+                    .padding(.horizontal)
+                    .padding(.bottom)
+
                 }
-                .padding(.horizontal)
-                .padding(.bottom)
+                .background(Color.white)
+                .cornerRadius(12)
+                .padding()
             }
-            .background(Color.white)
-            .cornerRadius(12)
-            .padding()
         }
         .background(Color.Light)
         .navigationTitle("영수증")
         .navigationBarTitleDisplayMode(.inline)
+        .task {
+            await detailViewModel.fetchOrderDetail(orderId: orderId)
+        }
 
     }
-
-    private var receiptContent: some View {
-        VStack(alignment: .leading, spacing: 16) {
+    
+    private func receiptContent(order: OrderResponseItem) -> some View {
+        let total = order.totalPrice
+        let vat = Int(Double(total) * 10 / 110) // 부가세액
+        let supplyPrice = total - vat           // 공급가액
+        
+        return VStack(alignment: .leading, spacing: 16) {
             section("결제 정보") {
                 Divider()
-                row("거래종류", paymentType)
-                row("승인번호", approvalNumber)
-                row("거래일시", date)
+                if order.paymentType == "DEPOSIT" {
+                    row("거래종류", "예치금")
+                } else {
+                    row("결제수단", "신용카드")
+                }
+                row("승인번호", formattedApprovalNumber(order.createdAt))
+                row("거래일시", formattedDate(order.createdAt))
+
             }
             .padding(4)
             .padding(.top,5)
 
             section("구매정보") {
                 Divider()
-                row("주문번호", orderNumber)
-                row("상품명", "\(itemName), \(quantity)개")
-                row("공급가액", "\(price)원")
-                row("부가세액", "\(vat)원")
-                row("합계금액", "\(total)원", highlight: true)
+                VStack(spacing: 8){
+                    row("주문번호", order.orderNumber)
+                    VStack{
+                        // 상품명 라벨과 첫 번째 상품 같은 라인
+                        if let first = order.orderItems.first {
+                            HStack {
+                                Text("상품명")
+                                Spacer()
+                                Text("\(first.partDetail.korName) \(first.amount)개")
+                            }
+                        }
+                        // 나머지는 label 없이 아래에
+                        ForEach(order.orderItems.dropFirst(), id: \.partId) { item in
+                            HStack {
+                                Spacer() // label 영역만큼 들여쓰기 효과
+                                Text("\(item.partDetail.korName) \(item.amount)개")
+                            }
+                        }
+                    }
+                    row("공급가액", "\(formatPrice(supplyPrice))원")
+                    row("부가세액", "\(formatPrice(vat))원")
+                    row("합계금액", "\(formatPrice(total))원", highlight: true)
+                }
             }
             .padding(4)
             .padding(.top)
@@ -104,7 +140,7 @@ struct ReceiptView: View {
             .multilineTextAlignment(.leading)
             .frame(maxWidth: .infinity, alignment: .leading)
             .lineSpacing(4)
-            .padding(.leading, 2) // ✅ 총알 뒤 문장 들여쓰기 추가
+            .padding(.leading, 2) // 문장 들여쓰기 추가
 
         }
         .padding()
@@ -129,54 +165,82 @@ struct ReceiptView: View {
         }
     }
 
-    private func pdfButton(type: PDFType, title: String) -> some View {
-        Button(action: {
-            generatePDF(type: type)
-        }) {
-            Text(title)
-                .frame(maxWidth: .infinity)
-                .padding()
-                .background(Color.blue)
-                .foregroundColor(.white)
-                .cornerRadius(8)
-        }
-    }
-
-    private func generatePDF(type: PDFType) {
-        let content = receiptContent
-        let renderer = ImageRenderer(content: content)
+    private func generatePDF(type: PDFType, order: OrderResponseItem) {
+        let view = receiptContent(order: order) // ✅ 실제 View 생성
+        let renderer = ImageRenderer(content: view)
 
         let width: CGFloat
-        let height: CGFloat = 2000
-
         switch type {
             case .a4: width = 595.2  // A4 width in pt
             case .receipt80mm: width = 226.77 // 80mm in pt
         }
 
         renderer.scale = UIScreen.main.scale
+        
+        // ✅ cgImage 기반 안전 처리
+         if let cgImage = renderer.cgImage {
+             let uiImage = UIImage(cgImage: cgImage)
+             let pdfDoc = PDFDocument()
+             if let pdfPage = PDFPage(image: uiImage) {
+                 pdfDoc.insert(pdfPage, at: 0)
+             }
+
+             // ✅ 주문번호 기반 파일명
+             let fileName = "receipt_\(order.orderNumber).pdf"
+             let tempURL = FileManager.default.temporaryDirectory.appendingPathComponent(fileName)
+
+             if pdfDoc.write(to: tempURL) {
+                 let av = UIActivityViewController(activityItems: [tempURL], applicationActivities: nil)
+
+                 if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
+                    let rootVC = windowScene.windows.first?.rootViewController {
+                     av.popoverPresentationController?.sourceView = rootVC.view
+                     rootVC.present(av, animated: true)
+                 }
+             }
+         }
+        
+    }
+}
 
-        if let image = renderer.uiImage {
-            let pdfDoc = PDFDocument()
-            let pdfPage = PDFPage(image: image)
-            pdfDoc.insert(pdfPage!, at: 0)
-
-            let tempURL = FileManager.default.temporaryDirectory.appendingPathComponent("receipt.pdf")
-            if pdfDoc.write(to: tempURL) {
-                let av = UIActivityViewController(activityItems: [tempURL], applicationActivities: nil)
-                if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
-                   let rootVC = windowScene.windows.first?.rootViewController {
-                    rootVC.present(av, animated: true)
-                }
-//                let av = UIActivityViewController(activityItems: [tempURL], applicationActivities: nil)
-//                UIApplication.shared.windows.first?.rootViewController?.present(av, animated: true)
-            }
-        }
+//struct ReceiptView_Previews: PreviewProvider {
+//    static var previews: some View {
+//        ReceiptView()
+//    }
+//}
+
+func formattedDate(_ timestamp: String) -> String {
+    let inputFormatter = DateFormatter()
+    inputFormatter.locale = Locale(identifier: "ko_KR")
+    inputFormatter.timeZone = TimeZone(abbreviation: "UTC")
+    inputFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSSSS"
+
+    guard let date = inputFormatter.date(from: timestamp) else {
+        return timestamp
     }
+
+    let outputFormatter = DateFormatter()
+    outputFormatter.locale = Locale(identifier: "ko_KR")
+    outputFormatter.timeZone = TimeZone.current
+    outputFormatter.dateFormat = "yyyy/MM/dd HH:mm:ss"
+
+    return outputFormatter.string(from: date)
 }
 
-struct ReceiptView_Previews: PreviewProvider {
-    static var previews: some View {
-        ReceiptView()
+func formattedApprovalNumber(_ timestamp: String) -> String {
+    let inputFormatter = DateFormatter()
+    inputFormatter.locale = Locale(identifier: "ko_KR")
+    inputFormatter.timeZone = TimeZone(abbreviation: "UTC")
+    inputFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSSSS"
+
+    guard let date = inputFormatter.date(from: timestamp) else {
+        return timestamp
     }
+
+    let outputFormatter = DateFormatter()
+    outputFormatter.locale = Locale(identifier: "ko_KR")
+    outputFormatter.timeZone = TimeZone.current
+    outputFormatter.dateFormat = "yyyyMMddHHmm" // ✅ 승인번호 포맷
+
+    return outputFormatter.string(from: date)
 }
diff --git a/StockMate/StockMate/app/feature/payment/data/PaymentApi.swift b/StockMate/StockMate/app/feature/payment/data/PaymentApi.swift
new file mode 100644
index 0000000..53346c3
--- /dev/null
+++ b/StockMate/StockMate/app/feature/payment/data/PaymentApi.swift
@@ -0,0 +1,40 @@
+//
+//  PaymentApi.swift
+//  StockMate
+//
+//  Created by Admin on 10/29/25.
+//
+
+
+import Foundation
+import Alamofire
+
+
+struct PaymentAmount: Decodable {
+    let id: Int
+    let balance: Int
+    let userId: Int
+}
+
+
+enum PaymentApi {
+    // 예치금 조회
+    static func getPaymentAmount() -> DataRequest {
+        let url = ApiClient.baseURL + "api/v1/payment/amount"
+        return ApiClient.shared.request(url, method: .get)
+    }
+    
+    // 예치금 충전
+    static func chargeDeposit(amount: Int) -> DataRequest {
+        let url = ApiClient.baseURL + "api/v1/payment/charge"
+        let params: [String: Any] = [
+            "amount": amount
+        ]
+        return ApiClient.shared.request(
+            url,
+            method: .post,
+            parameters: params,
+            encoding: URLEncoding.queryString
+        )
+    }
+}
diff --git a/StockMate/StockMate/app/feature/payment/data/PaymentRepositoryImpl.swift b/StockMate/StockMate/app/feature/payment/data/PaymentRepositoryImpl.swift
new file mode 100644
index 0000000..625b887
--- /dev/null
+++ b/StockMate/StockMate/app/feature/payment/data/PaymentRepositoryImpl.swift
@@ -0,0 +1,48 @@
+//
+//  PaymentRepositoryImpl.swift
+//  StockMate
+//
+//  Created by Admin on 10/29/25.
+//
+
+
+import Foundation
+import Alamofire
+
+
+final class PaymentRepositoryImpl: PaymentRepositoryProtocol {
+    
+    func fetchDepositAmount() async -> AppResult<PaymentAmount> {
+        let request = PaymentApi.getPaymentAmount()
+        let result = await safeApi(request, decodeTo: ApiResponse<PaymentAmount>.self)
+
+        switch result {
+        case .success(let response):
+            if let data = response.data {
+                return .success(data)
+            } else {
+                return .failure(.init(
+                    code: response.status,
+                    message: response.message,
+                    underlying: nil
+                ))
+            }
+
+        case .failure(let error):
+            return .failure(error)
+        }
+    }
+    
+    func chargeDeposit(amount: Int) async -> AppResult<String> {
+        let request = PaymentApi.chargeDeposit(amount: amount)
+        let result = await safeApi(request, decodeTo: ApiResponse<String>.self)
+
+        switch result {
+        case .success(let response):
+            return .success(response.data ?? response.message)
+
+        case .failure(let error):
+            return .failure(error)
+        }
+    }
+}
diff --git a/StockMate/StockMate/app/feature/payment/domain/PaymentRepositoryProtocol.swift b/StockMate/StockMate/app/feature/payment/domain/PaymentRepositoryProtocol.swift
new file mode 100644
index 0000000..150ab26
--- /dev/null
+++ b/StockMate/StockMate/app/feature/payment/domain/PaymentRepositoryProtocol.swift
@@ -0,0 +1,14 @@
+//
+//  PaymentRepositoryProtocol.swift
+//  StockMate
+//
+//  Created by Admin on 10/29/25.
+//
+
+import Foundation
+import Alamofire
+
+protocol PaymentRepositoryProtocol {
+    func fetchDepositAmount() async -> AppResult<PaymentAmount>
+    func chargeDeposit(amount: Int) async -> AppResult<String>
+}
diff --git a/StockMate/StockMate/app/feature/payment/ui/DepositChargeView.swift b/StockMate/StockMate/app/feature/payment/ui/DepositChargeView.swift
new file mode 100644
index 0000000..538412f
--- /dev/null
+++ b/StockMate/StockMate/app/feature/payment/ui/DepositChargeView.swift
@@ -0,0 +1,117 @@
+import SwiftUI
+
+struct DepositChargeView: View {
+    @Environment(\.dismiss) private var dismiss
+    @ObservedObject var viewModel: DepositViewModel
+    @State private var amountText: String = ""
+    @State private var isCharging: Bool = false
+    
+    let keypad: [[String]] = [
+        ["1","2","3"],
+        ["4","5","6"],
+        ["7","8","9"],
+        ["00","0","⌫"]
+    ]
+    
+    private var formattedNumberString: String {
+        if let value = Int(amountText) {
+            return value.formatted(.number)
+        }
+        return "0"
+    }
+    
+    private var formattedAmount: String {
+        return formattedNumberString + "원"
+    }
+
+    func buttonAction(_ val: String) {
+        if val == "⌫" {
+            if !amountText.isEmpty { amountText.removeLast() }
+        } else {
+            amountText.append(val)
+        }
+    }
+    
+    var body: some View {
+        VStack(spacing: 20) {
+            
+            // Title
+            Text("예치금 충전")
+                .font(.system(size: 20, weight: .semibold))
+                .padding(.top, 35)
+            
+            // 금액
+            Text(formattedAmount)
+                .font(.system(size: 38, weight: .bold))
+                .padding(.top, 35)
+            
+            // 아래 작은 라벨
+//            Text("\(formattedNumberString)원")
+//                .font(.system(size: 15))
+//                .foregroundColor(.textGray1)
+//                .padding(.horizontal, 10)
+//                .padding(.vertical, 4)
+//                .background(Color.white.opacity(0.9))
+//                .cornerRadius(12)
+            
+            Spacer().frame(height: 80)
+            
+            // 키패드
+            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0), count: 3),
+                      spacing: 1) {
+                ForEach(keypad.flatMap { $0 }, id: \.self) { key in
+                    Button {
+                        buttonAction(key)
+                    } label: {
+                        Text(key)
+                            .font(.system(size: 20))
+                            .frame(width: 50, height: 45)
+                            .foregroundColor(Color.black)
+//                            .background(Color.red.opacity(0.5))
+                            .padding(.horizontal, 4)
+                            .background(Color.white)
+                    }
+                }
+            }
+            .padding(.horizontal,16)
+            .padding(.top, 28)
+            
+            
+            // 충전 버튼
+            Button {
+                guard !isCharging else { return }
+                Task {
+                    guard let amount = Int(amountText), amount > 0 else { return }
+                    isCharging = true
+                    let success = await viewModel.chargeDeposit(amount: amount)
+                    isCharging = false
+                    if success {
+                        viewModel.showChargeSheet = false
+                        dismiss()
+                    }
+                }
+            } label: {
+                if isCharging {
+                    ProgressView()
+                        .tint(.white)
+                        .frame(height: 56)
+                        .frame(maxWidth: .infinity)
+                } else {
+                    Text("충전")
+                        .font(.system(size: 18, weight: .bold))
+                        .foregroundColor(.white)
+                        .frame(height: 59)
+                        .frame(maxWidth: .infinity)
+                }
+            }
+            .background(Color.Primary)
+            .cornerRadius(28)
+            .padding(.top, 28)
+            .padding(.horizontal, 10)
+            .disabled(isCharging)
+        }
+        .padding(.horizontal, 20)
+//        .padding(.top, 20)
+        .background(Color.white)
+    }
+}
diff --git a/StockMate/StockMate/app/feature/payment/viewmodel/DepositViewModel.swift b/StockMate/StockMate/app/feature/payment/viewmodel/DepositViewModel.swift
new file mode 100644
index 0000000..27d6009
--- /dev/null
+++ b/StockMate/StockMate/app/feature/payment/viewmodel/DepositViewModel.swift
@@ -0,0 +1,46 @@
+//
+//  PaymentViewModel.swift
+//  StockMate
+//
+//  Created by Admin on 10/29/25.
+//
+
+import Foundation
+
+@MainActor
+final class DepositViewModel: ObservableObject {
+    private let repository: PaymentRepositoryProtocol = PaymentRepositoryImpl()
+    
+    @Published var balance: Int = 0
+    @Published var isLoading: Bool = false
+    @Published var showChargeSheet: Bool = false
+    
+    /// ✅ 예치금 조회
+    func fetchDepositAmount() async {
+        isLoading = true
+        
+        let result = await repository.fetchDepositAmount()
+        
+        isLoading = false
+        
+        switch result {
+        case .success(let data):
+            self.balance = data.balance
+        case .failure(let error):
+            print("❌ 예치금 조회 실패:", error.message)
+        }
+    }
+    
+    /// ✅ 예치금 충전
+    func chargeDeposit(amount: Int) async -> Bool {
+         let result = await repository.chargeDeposit(amount: amount)
+         switch result {
+         case .success(_):
+             await fetchDepositAmount()
+             return true
+         case .failure(let error):
+             print("❌ 충전 실패:", error.message)
+             return false
+         }
+     }
+}
diff --git a/StockMate/StockMate/resources/Assets.xcassets/chair.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/chair.imageset/Contents.json
index ad1d744..052b5da 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/chair.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/chair.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "chair.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/check.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/check.imageset/Contents.json
new file mode 100644
index 0000000..b09981a
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/check.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "check.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/StockMate/StockMate/resources/Assets.xcassets/check.imageset/check.svg b/StockMate/StockMate/resources/Assets.xcassets/check.imageset/check.svg
new file mode 100644
index 0000000..8bdc85f
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/check.imageset/check.svg
@@ -0,0 +1,8 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_10722_4904" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17">
+<rect width="17" height="17" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_10722_4904)">
+<path d="M5.82481 14.875L0 8.85798L1.16726 7.65193L5.82481 12.4632L15.8327 2.125L17 3.33105L5.82481 14.875Z" fill="#1C1B1F"/>
+</g>
+</svg>
diff --git a/StockMate/StockMate/resources/Assets.xcassets/cog.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/cog.imageset/Contents.json
index 7124035..bd8698d 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/cog.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/cog.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "cog.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/Contents.json
new file mode 100644
index 0000000..7c4374c
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/Contents.json
@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "deposit_background@1x.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "deposit_background@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "deposit_background@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/deposit_background@1x.png b/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/deposit_background@1x.png
new file mode 100644
index 0000000..b988925
Binary files /dev/null and b/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/deposit_background@1x.png differ
diff --git a/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/deposit_background@2x.png b/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/deposit_background@2x.png
new file mode 100644
index 0000000..e94ecc4
Binary files /dev/null and b/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/deposit_background@2x.png differ
diff --git a/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/deposit_background@3x.png b/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/deposit_background@3x.png
new file mode 100644
index 0000000..84218d3
Binary files /dev/null and b/StockMate/StockMate/resources/Assets.xcassets/deposit_background.imageset/deposit_background@3x.png differ
diff --git a/StockMate/StockMate/resources/Assets.xcassets/dottedline.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/dottedline.imageset/Contents.json
new file mode 100644
index 0000000..3551fde
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/dottedline.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "dottedline.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/StockMate/StockMate/resources/Assets.xcassets/dottedline.imageset/dottedline.svg b/StockMate/StockMate/resources/Assets.xcassets/dottedline.imageset/dottedline.svg
new file mode 100644
index 0000000..5f4b4b2
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/dottedline.imageset/dottedline.svg
@@ -0,0 +1,6 @@
+<svg width="28" height="4" viewBox="0 0 28 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="4" height="4" rx="1" fill="#DDDDDD"/>
+<rect x="8" width="4" height="4" rx="1" fill="#DDDDDD"/>
+<rect x="24" width="4" height="4" rx="1" fill="#DDDDDD"/>
+<rect x="16" width="4" height="4" rx="1" fill="#DDDDDD"/>
+</svg>
diff --git a/StockMate/StockMate/resources/Assets.xcassets/hourglass.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/hourglass.imageset/Contents.json
new file mode 100644
index 0000000..900b128
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/hourglass.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "hourglass.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/StockMate/StockMate/resources/Assets.xcassets/hourglass.imageset/hourglass.svg b/StockMate/StockMate/resources/Assets.xcassets/hourglass.imageset/hourglass.svg
new file mode 100644
index 0000000..f229793
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/hourglass.imageset/hourglass.svg
@@ -0,0 +1,8 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_10721_4727" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17">
+<rect width="17" height="17" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_10721_4727)">
+<path d="M4.17683 15.6579H11.8232V12.9737C11.8232 11.955 11.4516 11.0838 10.7085 10.3599C9.96544 9.63609 9.0626 9.27417 8 9.27417C6.9374 9.27417 6.03456 9.63609 5.29147 10.3599C4.54838 11.0838 4.17683 11.955 4.17683 12.9737V15.6579ZM8 7.72583C9.0626 7.72583 9.96544 7.36391 10.7085 6.64007C11.4516 5.91622 11.8232 5.04497 11.8232 4.02632V1.34211H4.17683V4.02632C4.17683 5.04497 4.54838 5.91622 5.29147 6.64007C6.03456 7.36391 6.9374 7.72583 8 7.72583ZM1 17V15.6579H2.77707V12.9737C2.77707 11.9665 3.06453 11.0497 3.63947 10.2233C4.2144 9.39668 4.97631 8.82225 5.9252 8.5C4.97631 8.17193 4.2144 7.59609 3.63947 6.77249C3.06453 5.94888 2.77707 5.03349 2.77707 4.02632V1.34211H1V0H15V1.34211H13.2229V4.02632C13.2229 5.03349 12.9355 5.94888 12.3605 6.77249C11.7856 7.59609 11.0237 8.17193 10.0748 8.5C11.0237 8.82225 11.7856 9.39668 12.3605 10.2233C12.9355 11.0497 13.2229 11.9665 13.2229 12.9737V15.6579H15V17H1Z" fill="#1C1B1F"/>
+</g>
+</svg>
diff --git a/StockMate/StockMate/resources/Assets.xcassets/lightbulb.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/lightbulb.imageset/Contents.json
index beab311..e82017e 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/lightbulb.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/lightbulb.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "lightbulb.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/location.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/location.imageset/Contents.json
index 306ca5c..be50dad 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/location.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/location.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "location.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/notification.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/notification.imageset/Contents.json
index acfc443..5dabea1 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/notification.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/notification.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "notification.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/package.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/package.imageset/Contents.json
index e7f4c71..f289ed5 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/package.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/package.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "package.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/pindrop.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/pindrop.imageset/Contents.json
new file mode 100644
index 0000000..01ce80a
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/pindrop.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "pindrop.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/StockMate/StockMate/resources/Assets.xcassets/pindrop.imageset/pindrop.svg b/StockMate/StockMate/resources/Assets.xcassets/pindrop.imageset/pindrop.svg
new file mode 100644
index 0000000..f9cfacb
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/pindrop.imageset/pindrop.svg
@@ -0,0 +1,9 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_10721_4880" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17">
+<rect width="17" height="17" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_10721_4880)">
+<path d="M8.4999 12.7276C9.78955 11.4887 10.7658 10.2917 11.4287 9.13661C12.0915 7.9815 12.423 6.89924 12.423 5.88983C12.423 4.55921 12.0568 3.4686 11.3245 2.618C10.5922 1.7674 9.65067 1.34211 8.4999 1.34211C7.34913 1.34211 6.40759 1.7674 5.67529 2.618C4.94298 3.4686 4.57683 4.55921 4.57683 5.88983C4.57683 6.89924 4.90826 7.9815 5.57113 9.13661C6.234 10.2917 7.21026 11.4887 8.4999 12.7276ZM8.4999 14.4276C6.80186 12.9283 5.52739 11.4638 4.67647 10.034C3.82543 8.60409 3.3999 7.22269 3.3999 5.88983C3.3999 4.1691 3.87473 2.75728 4.82437 1.65437C5.77389 0.551456 6.99906 0 8.4999 0C10.0007 0 11.2259 0.551456 12.1754 1.65437C13.1251 2.75728 13.5999 4.1691 13.5999 5.88983C13.5999 7.22269 13.1744 8.6026 12.3233 10.0296C11.4724 11.4567 10.1979 12.9227 8.4999 14.4276ZM3.3999 17V15.6579H13.5999V17H3.3999Z" fill="#1C1B1F"/>
+<circle cx="8.4998" cy="5.10039" r="1.7" fill="black"/>
+</g>
+</svg>
diff --git a/StockMate/StockMate/resources/Assets.xcassets/rocket.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/rocket.imageset/Contents.json
new file mode 100644
index 0000000..a61a5d8
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/rocket.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "rocket.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/StockMate/StockMate/resources/Assets.xcassets/rocket.imageset/rocket.svg b/StockMate/StockMate/resources/Assets.xcassets/rocket.imageset/rocket.svg
new file mode 100644
index 0000000..b63f40e
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/rocket.imageset/rocket.svg
@@ -0,0 +1,8 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_10721_4787" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17">
+<rect width="17" height="17" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_10721_4787)">
+<path d="M0.104414 7.31686L3.76734 3.65189C3.9679 3.45138 4.20147 3.30872 4.46804 3.22393C4.73446 3.13929 5.00876 3.12515 5.29095 3.18153L6.56241 3.44833C5.79156 4.37562 5.17475 5.21531 4.71199 5.96738C4.24922 6.7193 3.7945 7.63106 3.34781 8.70264L0.104414 7.31686ZM4.4355 9.14208C4.81851 8.10782 5.30624 7.12556 5.8987 6.1953C6.49117 5.26489 7.18843 4.3985 7.9905 3.59614C9.26189 2.32404 10.6819 1.37231 12.2504 0.74095C13.819 0.109743 15.383 -0.118175 16.9425 0.0571947C17.1178 1.61757 16.8923 3.18247 16.2662 4.75189C15.6401 6.32132 14.6914 7.74209 13.42 9.01418C12.6277 9.80702 11.7617 10.5032 10.8223 11.1027C9.88276 11.702 8.89613 12.1933 7.86244 12.5766L4.4355 9.14208ZM10.5547 6.43938C10.8717 6.75655 11.2586 6.91513 11.7155 6.91513C12.1723 6.91513 12.5592 6.75655 12.8762 6.43938C13.193 6.12222 13.3515 5.73665 13.3515 5.28269C13.3515 4.82857 13.193 4.44293 12.8762 4.12576C12.5592 3.8086 12.1723 3.65002 11.7155 3.65002C11.2586 3.65002 10.8717 3.8086 10.5547 4.12576C10.2379 4.44293 10.0795 4.82857 10.0795 5.28269C10.0795 5.73665 10.2379 6.12222 10.5547 6.43938ZM9.68314 16.9047L8.28384 13.6595C9.35483 13.2125 10.2685 12.7561 11.0248 12.2901C11.7812 11.8239 12.6228 11.2053 13.5497 10.4342L13.8016 11.7061C13.8581 11.9884 13.8456 12.2654 13.764 12.537C13.6823 12.8084 13.5412 13.0444 13.3407 13.2451L9.68314 16.9047ZM1.53063 12.1584C1.98699 11.702 2.54083 11.4729 3.19213 11.4712C3.84343 11.4693 4.39718 11.6966 4.85339 12.153C5.3096 12.6095 5.5377 13.1636 5.5377 13.8152C5.5377 14.4669 5.3096 15.021 4.85339 15.4774C4.4991 15.8319 3.91795 16.1361 3.10995 16.39C2.30211 16.6441 1.26546 16.8474 0 17C0.152485 15.734 0.357178 14.6992 0.614078 13.8956C0.870977 13.092 1.17649 12.5129 1.53063 12.1584Z" fill="#1C1B1F"/>
+</g>
+</svg>
diff --git a/StockMate/StockMate/resources/Assets.xcassets/spanner.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/spanner.imageset/Contents.json
index 36cb254..7fcd63e 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/spanner.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/spanner.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "spanner.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/tabHome.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/tabHome.imageset/Contents.json
index e847277..a1b0717 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/tabHome.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/tabHome.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "tabHome.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/tabInventory.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/tabInventory.imageset/Contents.json
index 3421138..53286b8 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/tabInventory.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/tabInventory.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "tabInventory.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/tabPackage.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/tabPackage.imageset/Contents.json
index c6df33b..d90fcd3 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/tabPackage.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/tabPackage.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "tabPackage.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/tabProfile.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/tabProfile.imageset/Contents.json
index 9bea2a3..25e0b53 100644
--- a/StockMate/StockMate/resources/Assets.xcassets/tabProfile.imageset/Contents.json
+++ b/StockMate/StockMate/resources/Assets.xcassets/tabProfile.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "tabProfile.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {
diff --git a/StockMate/StockMate/resources/Assets.xcassets/uploadprogress.imageset/Contents.json b/StockMate/StockMate/resources/Assets.xcassets/uploadprogress.imageset/Contents.json
new file mode 100644
index 0000000..a1bff87
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/uploadprogress.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "uploadprogress.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/StockMate/StockMate/resources/Assets.xcassets/uploadprogress.imageset/uploadprogress.svg b/StockMate/StockMate/resources/Assets.xcassets/uploadprogress.imageset/uploadprogress.svg
new file mode 100644
index 0000000..3e65143
--- /dev/null
+++ b/StockMate/StockMate/resources/Assets.xcassets/uploadprogress.imageset/uploadprogress.svg
@@ -0,0 +1,8 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_10721_4760" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17">
+<rect width="17" height="17" transform="matrix(-1 0 0 1 17 0)" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_10721_4760)">
+<path d="M9.36691 17C10.4449 16.8858 11.4459 16.5877 12.3698 16.1057C13.2938 15.6237 14.1003 15.0019 14.7893 14.2402C15.4782 13.4785 16.0188 12.6064 16.4113 11.6239C16.8038 10.6413 17 9.60005 17 8.5C17 6.27906 16.2653 4.36191 14.796 2.74856C13.3269 1.13536 11.5143 0.219171 9.35839 0V1.36315C11.1419 1.59941 12.6373 2.38989 13.8445 3.7346C15.0518 5.07916 15.6554 6.66763 15.6554 8.5C15.6554 10.3324 15.0532 11.9208 13.8488 13.2654C12.6445 14.6101 11.1505 15.4006 9.36691 15.6369V17ZM7.57416 17V15.6369C6.92264 15.5562 6.30182 15.3928 5.71171 15.1466C5.1216 14.9003 4.57712 14.5795 4.07829 14.184L3.10281 15.1595C3.74625 15.6588 4.4455 16.065 5.20055 16.378C5.9556 16.6912 6.7468 16.8985 7.57416 17ZM4.07493 2.83333C4.57944 2.44356 5.12443 2.12125 5.70992 1.8664C6.2954 1.61155 6.91397 1.4438 7.56564 1.36315V0C6.73828 0.0957937 5.9485 0.301623 5.19629 0.617487C4.44408 0.933501 3.74625 1.34119 3.10281 1.84054L4.07493 2.83333ZM1.84788 13.8692L2.80633 12.9074C2.4179 12.407 2.09954 11.8607 1.85124 11.2686C1.60295 10.6764 1.43861 10.0534 1.35823 9.39947H0C0.0896376 10.2297 0.295581 11.0236 0.617828 11.7813C0.940225 12.5389 1.35024 13.2349 1.84788 13.8692ZM1.35823 7.60053C1.43861 6.94661 1.60295 6.32358 1.85124 5.73143C2.09954 5.13928 2.4179 4.593 2.80633 4.09259L1.83062 3.11352C1.34449 3.75934 0.943136 4.46108 0.626566 5.21873C0.309996 5.97639 0.101141 6.77032 0 7.60053H1.35823Z" fill="#1C1B1F"/>
+</g>
+</svg>
diff --git a/StockMate/StockMate/resources/Color.swift b/StockMate/StockMate/resources/Color.swift
index f927e60..94172ee 100644
--- a/StockMate/StockMate/resources/Color.swift
+++ b/StockMate/StockMate/resources/Color.swift
@@ -95,6 +95,8 @@ extension Color {
     static let Hstatus5Bg  = Color(hex: "#ECEEF0")
 
     
+    static let Grayline   = Color(hex: "#ECECED")
+    static let Grayline2   = Color(hex: "#DDDDDD")
     
     // 투명도 포함 예시
     static let boxBgWhite = Color(hex: "#40FFFFFF") // 투명도 포함