[Refactor] 작은폰에서 뷰가 깨지는 문제 해결 (#36)

* [chore] text가 버튼을 넘어가는 문제 해결 * [chore] ModeView 글씨 깨지는 현상 수정 * [chore] 작은폰에서 뷰가 잘려보이는 문제 해결
boostcampwm-2024 · Jan 23, 2025 · b5bea3c · b5bea3c
1 parent c9570c3
commit b5bea3c
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 39 deletions.
diff --git a/alsongDalsong/alsongDalsong/alsongDalsong/Localizable.xcstrings b/alsongDalsong/alsongDalsong/alsongDalsong/Localizable.xcstrings
@@ -482,35 +482,35 @@
         }
       }
     },
-    "사냥꾼" : {
+    "사부님" : {
       "extractionState" : "manual",
       "localizations" : {
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Hunter"
+            "value" : "Master"
           }
         }
       }
     },
-    "사부님" : {
+    "삶" : {
       "extractionState" : "manual",
       "localizations" : {
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Master"
+            "value" : "Life"
           }
         }
       }
     },
-    "삶" : {
+    "사냥꾼" : {
       "extractionState" : "manual",
       "localizations" : {
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Life"
+            "value" : "Hunter"
           }
         }
       }
@@ -520,7 +520,7 @@
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Complete"
+            "value" : "Done"
           }
         }
       }
@@ -602,7 +602,7 @@
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Complete"
+            "value" : "Done"
           }
         }
       }
@@ -666,7 +666,7 @@
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Re-record"
+            "value" : "Redo"
           }
         }
       }
@@ -686,7 +686,7 @@
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Choose the correct answer"
+            "value" : "Answer"
           }
         }
       }
@@ -696,7 +696,7 @@
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Submit correct answer"
+            "value" : "Submit"
           }
         }
       }
@@ -726,7 +726,7 @@
         "en" : {
           "stringUnit" : {
             "state" : "translated",
-            "value" : "Submission complete"
+            "value" : "Done"
           }
         }
       }

diff --git a/...ngDalsong/alsongDalsong/alsongDalsong/Sources/Components/SwiftUIComponents/ModeView.swift b/...ngDalsong/alsongDalsong/alsongDalsong/Sources/Components/SwiftUIComponents/ModeView.swift
@@ -15,17 +15,25 @@ struct ModeView: View {
                 Text(LocalizedStringResource(stringLiteral: modeInfo.title))
                     .font(.doHyeon(size: 32))
                     .padding(.top, 16)
-                Image(modeInfo.imageName)
-                    .resizable()
-                    .aspectRatio(contentMode: .fill)
-                    .frame(width: 300, height: 180)
-                    .clipShape(RoundedRectangle(cornerRadius: 8))
-                    .padding()
-                Text(LocalizedStringResource(stringLiteral: modeInfo.description))
-                    .font(.doHyeon(size: 20))
-                    .padding(.horizontal)
-                    .minimumScaleFactor(0.01)
-                Spacer()
+                    .layoutPriority(1)
+                GeometryReader { geometry in
+                    VStack {
+                        Image(modeInfo.imageName)
+                            .resizable()
+                            .aspectRatio(contentMode: .fit)
+                            .clipShape(RoundedRectangle(cornerRadius: 8))
+                            .padding(.horizontal)
+                            .frame(width: width, height: min(geometry.size.height * 0.6, 150))
+
+                        Text(LocalizedStringResource(stringLiteral: modeInfo.description))
+                            .font(.doHyeon(size: 20))
+                            .minimumScaleFactor(0.01)
+                            .lineLimit(nil)
+                            .padding(.top, 0)
+                            .padding(.horizontal)
+                            .frame(maxHeight: geometry.size.height * 0.3, alignment: .top)
+                    }
+                }
             }
 
         }

diff --git a/alsongDalsong/alsongDalsong/alsongDalsong/Sources/Views/Humming/HummingView.swift b/alsongDalsong/alsongDalsong/alsongDalsong/Sources/Views/Humming/HummingView.swift
@@ -2,6 +2,7 @@ import UIKit
 
 final class HummingViewController: UIViewController {
     private var progressBar = ProgressBar()
+    private let scrollView = UIScrollView()
     private var musicPanel = MusicPanel()
     private var hummingPanel = RecordingPanel(.asYellow)
     private var recordButton = ASButton()
@@ -47,10 +48,11 @@ final class HummingViewController: UIViewController {
         buttonStack.spacing = 16
         buttonStack.addArrangedSubview(recordButton)
         buttonStack.addArrangedSubview(submitButton)
+        scrollView.addSubview(musicPanel)
+        scrollView.addSubview(hummingPanel)
         view.backgroundColor = .asLightGray
         view.addSubview(progressBar)
-        view.addSubview(musicPanel)
-        view.addSubview(hummingPanel)
+        view.addSubview(scrollView)
         view.addSubview(buttonStack)
         view.addSubview(submissionStatus)
     }
@@ -77,14 +79,21 @@ final class HummingViewController: UIViewController {
         hummingPanel.translatesAutoresizingMaskIntoConstraints = false
         submissionStatus.translatesAutoresizingMaskIntoConstraints = false
         buttonStack.translatesAutoresizingMaskIntoConstraints = false
-
+        scrollView.translatesAutoresizingMaskIntoConstraints = false
+
         NSLayoutConstraint.activate([
             progressBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
             progressBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
             progressBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
             progressBar.heightAnchor.constraint(equalToConstant: 16),
-
-            musicPanel.topAnchor.constraint(equalTo: progressBar.bottomAnchor, constant: 32),
+
+            scrollView.topAnchor.constraint(equalTo: progressBar.bottomAnchor),
+            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
+            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
+            scrollView.bottomAnchor.constraint(equalTo: buttonStack.topAnchor),
+            scrollView.contentLayoutGuide.bottomAnchor.constraint(equalTo: hummingPanel.bottomAnchor, constant: 16),
+
+            musicPanel.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor, constant: 32),
             musicPanel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 32),
             musicPanel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -32),
 
@@ -99,7 +108,7 @@ final class HummingViewController: UIViewController {
             buttonStack.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 24),
             buttonStack.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -24),
             buttonStack.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -16),
-            buttonStack.heightAnchor.constraint(equalToConstant: 64),
+            buttonStack.heightAnchor.constraint(greaterThanOrEqualToConstant: 64),
         ])
     }
 

diff --git a/alsongDalsong/alsongDalsong/alsongDalsong/Sources/Views/Rehumming/RehummingView.swift b/alsongDalsong/alsongDalsong/alsongDalsong/Sources/Views/Rehumming/RehummingView.swift
@@ -2,6 +2,7 @@ import UIKit
 
 final class RehummingViewController: UIViewController {
     private var progressBar = ProgressBar()
+    private let scrollView = UIScrollView()
     private var musicPanel = MusicPanel()
     private var hummingPanel = RecordingPanel(.asMint)
     private var recordButton = ASButton()
@@ -51,10 +52,11 @@ final class RehummingViewController: UIViewController {
         buttonStack.spacing = 16
         buttonStack.addArrangedSubview(recordButton)
         buttonStack.addArrangedSubview(submitButton)
+        scrollView.addSubview(musicPanel)
+        scrollView.addSubview(hummingPanel)
         view.backgroundColor = .asLightGray
         view.addSubview(progressBar)
-        view.addSubview(musicPanel)
-        view.addSubview(hummingPanel)
+        view.addSubview(scrollView)
         view.addSubview(buttonStack)
         view.addSubview(submissionStatus)
     }
@@ -81,14 +83,21 @@ final class RehummingViewController: UIViewController {
         hummingPanel.translatesAutoresizingMaskIntoConstraints = false
         submissionStatus.translatesAutoresizingMaskIntoConstraints = false
         buttonStack.translatesAutoresizingMaskIntoConstraints = false
+        scrollView.translatesAutoresizingMaskIntoConstraints = false
 
         NSLayoutConstraint.activate([
             progressBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
             progressBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
             progressBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
             progressBar.heightAnchor.constraint(equalToConstant: 16),
-
-            musicPanel.topAnchor.constraint(equalTo: progressBar.bottomAnchor, constant: 32),
+
+            scrollView.topAnchor.constraint(equalTo: progressBar.bottomAnchor),
+            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
+            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
+            scrollView.bottomAnchor.constraint(equalTo: buttonStack.topAnchor),
+            scrollView.contentLayoutGuide.bottomAnchor.constraint(equalTo: hummingPanel.bottomAnchor, constant: 16),
+
+            musicPanel.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 32),
             musicPanel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 32),
             musicPanel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -32),
 
@@ -103,7 +112,7 @@ final class RehummingViewController: UIViewController {
             buttonStack.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 24),
             buttonStack.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -24),
             buttonStack.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
-            buttonStack.heightAnchor.constraint(equalToConstant: 64),
+            buttonStack.heightAnchor.constraint(greaterThanOrEqualToConstant: 64),
         ])
     }
 

diff --git a/...g/alsongDalsong/alsongDalsong/Sources/Views/SubmitAnswer/SubmitAnswerViewController.swift b/...g/alsongDalsong/alsongDalsong/Sources/Views/SubmitAnswer/SubmitAnswerViewController.swift
@@ -3,6 +3,7 @@ import SwiftUI
 
 final class SubmitAnswerViewController: UIViewController {
     private var progressBar = ProgressBar()
+    private let scrollView = UIScrollView()
     private var musicPanel = MusicPanel()
     private var selectedMusicPanel = MusicPanel(.compact)
     private var selectAnswerButton = ASButton()
@@ -56,24 +57,32 @@ final class SubmitAnswerViewController: UIViewController {
 
     private func setupLayout() {
         view.addSubview(progressBar)
-        view.addSubview(musicPanel)
-        view.addSubview(selectedMusicPanel)
+        view.addSubview(scrollView)
         view.addSubview(buttonStack)
         view.addSubview(submissionStatus)
+        scrollView.addSubview(musicPanel)
+        scrollView.addSubview(selectedMusicPanel)
 
         progressBar.translatesAutoresizingMaskIntoConstraints = false
         musicPanel.translatesAutoresizingMaskIntoConstraints = false
         selectedMusicPanel.translatesAutoresizingMaskIntoConstraints = false
         submissionStatus.translatesAutoresizingMaskIntoConstraints = false
         buttonStack.translatesAutoresizingMaskIntoConstraints = false
+        scrollView.translatesAutoresizingMaskIntoConstraints = false
 
         NSLayoutConstraint.activate([
             progressBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
             progressBar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
             progressBar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
             progressBar.heightAnchor.constraint(equalToConstant: 16),
-
-            musicPanel.topAnchor.constraint(equalTo: progressBar.bottomAnchor, constant: 32),
+
+            scrollView.topAnchor.constraint(equalTo: progressBar.bottomAnchor),
+            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
+            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
+            scrollView.bottomAnchor.constraint(equalTo: buttonStack.topAnchor),
+            scrollView.contentLayoutGuide.bottomAnchor.constraint(equalTo: selectedMusicPanel.bottomAnchor, constant: 16),
+
+            musicPanel.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 32),
             musicPanel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 32),
             musicPanel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -32),
 
@@ -88,7 +97,7 @@ final class SubmitAnswerViewController: UIViewController {
             buttonStack.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 24),
             buttonStack.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -24),
             buttonStack.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
-            buttonStack.heightAnchor.constraint(equalToConstant: 64),
+            buttonStack.heightAnchor.constraint(greaterThanOrEqualToConstant: 64),
         ])
     }