style: #45 고정값 비율로 수정

SOPT-all · Jan 15, 2025 · 4b0c974 · 4b0c974
1 parent b0febae
commit 4b0c974
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 59 deletions.
diff --git a/Spoony-iOS/Spoony-iOS/Source/Feature/Home/Components/PlaceHolderCardView/PlaceCard.swift b/Spoony-iOS/Spoony-iOS/Source/Feature/Home/Components/PlaceHolderCardView/PlaceCard.swift
@@ -17,63 +17,59 @@ struct PlaceCard: View {
     let description: String
 
     var body: some View {
-        GeometryReader { geometry in
-            let containerHeight = geometry.size.height
+        VStack(spacing: 0) {
+            PlaceImagesLayout(images: images)
 
-            VStack(spacing: 0) {
-                PlaceImagesLayout(images: images, containerHeight: containerHeight)
-
-                VStack(alignment: .leading) {
-                    HStack(spacing: 6) {
-                        Text(placeName)
-                            .font(.body1b)
-
-                        // TODO: chip으로 대체
-                        HStack(spacing: 4) {
-                            Image(systemName: "mug.fill")
-                                .font(.system(size: containerHeight * 0.032))
-                            Text("카페")
-                                .font(.system(size: containerHeight * 0.038))
-                        }
-                        .foregroundColor(.pink400)
-                        .padding(.horizontal, 12)
-                        .padding(.vertical, 4)
-                        .background(Color.pink400.opacity(0.1))
-                        .cornerRadius(16)
-
-                        Spacer()
-                        HStack(spacing: 4) {
-                            Image(.icAddmapGray400)
-                            Text(visitorCount)
-                                .font(.caption2b)
-                        }
+            VStack(alignment: .leading) {
+                HStack(spacing: 6) {
+
+                    Text(placeName)
+                        .font(.body1b)
+
+                    // TODO: 칩으로 대체
+                    HStack(spacing: 4) {
+                        Image(systemName: "mug.fill")
+                            .font(.system(size: 12))
+                        Text("카페")
+                            .font(.system(size: 14.5))
                     }
-                }
-                .padding(containerHeight * 0.04)
-
-                VStack(alignment: .leading, spacing: containerHeight * 0.016) {
-                    HStack {
-                        Text(title)
-                            .font(.body2b)
-                        Text(subTitle)
-                            .font(.caption1m)
-                            .foregroundColor(.gray600)
+                    .foregroundColor(.pink400)
+                    .padding(.horizontal, 12)
+                    .padding(.vertical, 4)
+                    .background(Color.pink400.opacity(0.1))
+                    .cornerRadius(16)
+
+                    Spacer()
+                    HStack(spacing: 4) {
+                        Image(.icAddmapGray400)
+                        Text(visitorCount)
+                            .font(.caption2b)
                     }
-                    Text(description)
+                }
+            }
+            .padding(15)
+
+            VStack(alignment: .leading, spacing: 6) {
+                HStack {
+                    Text(title)
+                        .font(.body2b)
+                    Text(subTitle)
                         .font(.caption1m)
-                        .foregroundColor(.spoonBlack)
+                        .foregroundColor(.gray600)
+
                 }
-                .padding(containerHeight * 0.04)
-                .frame(maxWidth: .infinity, alignment: .leading)
-                .background(Color.gray0)
-                .cornerRadius(10)
-                .padding(.horizontal, containerHeight * 0.04)
-                .padding(.bottom, containerHeight * 0.04)
-
-                Spacer()
+                Text(description)
+                    .font(.caption1m)
+                    .foregroundColor(.spoonBlack)
             }
-            .background(Color.white)
-            .cornerRadius(16)
+            .padding(15)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .background(Color.gray0)
+            .cornerRadius(10)
+            .padding(.horizontal, 15)
+            .padding(.bottom, 15)
         }
+        .background(Color.white)
+        .cornerRadius(16)
     }
 }
diff --git a/...S/Spoony-iOS/Source/Feature/Home/Components/PlaceHolderCardView/PlaceCardsContainer.swift b/...S/Spoony-iOS/Source/Feature/Home/Components/PlaceHolderCardView/PlaceCardsContainer.swift
@@ -12,7 +12,7 @@ struct PlaceCardsContainer: View {
     @State private var currentPage = 0
 
     var body: some View {
-        VStack(spacing: 4) {
+        VStack(spacing: 0) {
             TabView(selection: $currentPage) {
                 ForEach(Array(places.enumerated()), id: \.element.id) { index, place in
                     PlaceCard(
@@ -24,14 +24,14 @@ struct PlaceCardsContainer: View {
                         subTitle: place.subTitle,
                         description: place.description
                     )
-                    .padding(.horizontal, 26)
+                    .padding(.horizontal, 16)
                     .tag(index)
                 }
             }
-            .frame(height: UIScreen.main.bounds.height * (240/812))
+            .frame(minHeight: 350)
             .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
 
-            // 인디케이터
+
             HStack(spacing: 8) {
                 ForEach(0..<places.count, id: \.self) { index in
                     Circle()

diff --git a/...iOS/Spoony-iOS/Source/Feature/Home/Components/PlaceHolderCardView/PlaceImagesLayout.swift b/...iOS/Spoony-iOS/Source/Feature/Home/Components/PlaceHolderCardView/PlaceImagesLayout.swift
@@ -9,7 +9,6 @@ import SwiftUI
 
 struct PlaceImagesLayout: View {
     let images: [String]
-    let containerHeight: CGFloat
 
     var body: some View {
         HStack(spacing: 1) {
@@ -19,7 +18,7 @@ struct PlaceImagesLayout: View {
                     .resizable()
                     .scaledToFill()
                     .frame(maxWidth: .infinity)
-                    .frame(height: containerHeight * 0.35) //비율이라 adjust X
+                    .frame(height: 132)
                     .clipShape(RoundedCorner(radius: 12, corners: [.topLeft, .topRight]))
 
             case 2:
@@ -28,7 +27,7 @@ struct PlaceImagesLayout: View {
                         .resizable()
                         .scaledToFill()
                         .frame(maxWidth: .infinity)
-                        .frame(height: containerHeight * 0.35)
+                        .frame(height: 132)
                         .clipShape(
                             RoundedCorner(
                                 radius: 12,
@@ -43,7 +42,7 @@ struct PlaceImagesLayout: View {
                         .resizable()
                         .scaledToFill()
                         .frame(maxWidth: .infinity)
-                        .frame(height: containerHeight * 0.35)
+                        .frame(height: 132)
                         .clipShape(
                             RoundedCorner(
                                 radius: 12,
@@ -59,3 +58,34 @@ struct PlaceImagesLayout: View {
     }
 }
 
+#Preview {
+    PlaceCardsContainer(places: [
+        CardPlace(
+            name: "스타벅스",
+            visitorCount: "45",
+            address: "서울특별시 마포구 어울마당로",
+            images: ["testImage1", "testImage2", "testImage3"],
+            title: "클레오가트라",
+            subTitle: "성동구 수제",
+            description: "포켓몬 중 하나의 이름을 가졌지만 카페에요"
+        ),
+        CardPlace(
+            name: "스타벅스",
+            visitorCount: "45",
+            address: "서울특별시 마포구 어울마당로",
+            images: ["testImage1", "testImage2", "testImage3"],
+            title: "클레오가트라",
+            subTitle: "성동구 수제",
+            description: "포켓몬 중 하나의 이름을 가졌지만 카페에요"
+        ),
+        CardPlace(
+            name: "스타벅스",
+            visitorCount: "45",
+            address: "서울특별시 마포구 어울마당로",
+            images: ["testImage1", "testImage2", "testImage3"],
+            title: "클레오가트라",
+            subTitle: "성동구 수제",
+            description: "포켓몬 중 하나의 이름을 가졌지만 카페에요"
+        )
+    ])
+}