💄 [#225] SMSPageControl / ...을 progressBar로 수정

GSM-MSG · Aug 23, 2023 · d0f754a · d0f754a
1 parent 7e496b5
commit d0f754a
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 54 deletions.
diff --git a/Projects/Core/DesignSystem/Demo/Sources/DemoView.swift b/Projects/Core/DesignSystem/Demo/Sources/DemoView.swift
@@ -6,10 +6,7 @@ public struct DemoView: View {
 
     public var body: some View {
         VStack {
-            CTAButton(text: "테스트", style: .error)
-            CTAButton(text: "테스트", style: .error)
-            CTAButton(text: "테스트", style: .error)
-                .disabled(true)
+            SMSPageControl(pageCount: 8, selectedPage: 2)
         }
         .padding(.horizontal, 20)
     }

diff --git a/Projects/Core/DesignSystem/Sources/PageControl/SMSPageControl.swift b/Projects/Core/DesignSystem/Sources/PageControl/SMSPageControl.swift
@@ -10,12 +10,22 @@ public struct SMSPageControl: View {
     }
 
     public var body: some View {
-        HStack(spacing: 8) {
-            ForEach(0..<pageCount, id: \.self) { page in
-                Circle()
-                    .fill(selectedPage == page ? Color.sms(.primary(.p2)) : .sms(.neutral(.n20)))
-                    .frame(width: 8, height: 8)
+        ZStack(alignment: .leading) {
+            HStack(spacing: 40) {
+                ForEach(0..<pageCount, id: \.self) { _ in
+                    Circle()
+                        .fill(Color.sms(.neutral(.n20)))
+                        .frame(width: 8, height: 8)
+                }
+                .frame(height: 12)
             }
+
+            RoundedRectangle(cornerRadius: 100, style: .circular)
+                .fill(Color.sms(.primary(.p2)))
+                .frame(width: CGFloat(12 + 48 * selectedPage), height: 12)
         }
+        .padding(2)
+        .background(Color.sms(.neutral(.n10)))
+        .cornerRadius(20)
     }
 }
diff --git a/Projects/Feature/InputCertificateInfoFeature/Sources/Scene/InputCertificateInfoView.swift b/Projects/Feature/InputCertificateInfoFeature/Sources/Scene/InputCertificateInfoView.swift
@@ -14,16 +14,14 @@ struct InputCertificateInfoView: View {
         GeometryReader { proxy in
             SMSNavigationTitleView(title: "정보입력") {
                 ScrollView(showsIndicators: false) {
-                    SMSSeparator()
+                    InputInformationPageTitleView(
+                        title: "자격증",
+                        isRequired: false,
+                        pageCount: 8,
+                        selectedPage: 4
+                    )
 
                     VStack(spacing: 32) {
-                        InputInformationPageTitleView(
-                            title: "자격증",
-                            isRequired: false,
-                            pageCount: 8,
-                            selectedPage: 4
-                        )
-
                         VStack(spacing: 8) {
                             certificateListView()
                                 .titleWrapper("자격증")

diff --git a/Projects/Feature/InputInformationBaseFeature/Sources/InputInformationPageTitleView.swift b/Projects/Feature/InputInformationBaseFeature/Sources/InputInformationPageTitleView.swift
@@ -20,18 +20,24 @@ public struct InputInformationPageTitleView: View {
     }
 
     public var body: some View {
-        HStack(spacing: 4) {
-            Text(title)
-                .foregroundColor(.sms(.system(.black)))
+        VStack(spacing: 16) {
+            SMSPageControl(pageCount: pageCount, selectedPage: selectedPage)
 
-            Text("*")
-                .foregroundColor(.sms(.sub(.s2)))
-                .conditional(isRequired)
+            SMSSeparator()
 
-            Spacer()
+            HStack(spacing: 4) {
 
-            SMSPageControl(pageCount: pageCount, selectedPage: selectedPage)
+                Text(title)
+                    .foregroundColor(.sms(.system(.black)))
+
+                Text("*")
+                    .foregroundColor(.sms(.sub(.s2)))
+                    .conditional(isRequired)
+
+                Spacer()
+            }
+            .smsFont(.title1)
+            .padding(.horizontal, 20)
         }
-        .smsFont(.title1)
     }
 }
diff --git a/Projects/Feature/InputLanguageInfoFeature/Sources/Scene/InputLanguageInfoView.swift b/Projects/Feature/InputLanguageInfoFeature/Sources/Scene/InputLanguageInfoView.swift
@@ -14,16 +14,14 @@ struct InputLanguageInfoView: View {
         GeometryReader { proxy in
             SMSNavigationTitleView(title: "정보입력") {
                 ScrollView(showsIndicators: false) {
-                    SMSSeparator()
+                    InputInformationPageTitleView(
+                        title: "외국어",
+                        isRequired: false,
+                        pageCount: 8,
+                        selectedPage: 5
+                    )
 
                     VStack(spacing: 32) {
-                        InputInformationPageTitleView(
-                            title: "외국어",
-                            isRequired: false,
-                            pageCount: 8,
-                            selectedPage: 5
-                        )
-
                         languageListView(proxy: proxy)
                     }
                     .padding([.top, .horizontal], 20)

diff --git a/Projects/Feature/InputMilitaryInfoFeature/Sources/Scene/InputMilitaryInfoView.swift b/Projects/Feature/InputMilitaryInfoFeature/Sources/Scene/InputMilitaryInfoView.swift
@@ -12,11 +12,9 @@ struct InputMilitaryInfoView: View {
     var body: some View {
         GeometryReader { proxy in
             SMSNavigationTitleView(title: "정보입력") {
-                SMSSeparator()
+                InputInformationPageTitleView(title: "병역", pageCount: 8, selectedPage: 3)
 
                 VStack(spacing: 32) {
-                    InputInformationPageTitleView(title: "병역", pageCount: 8, selectedPage: 3)
-
                     VStack(spacing: 24) {
                         SMSTextField(
                             "병특 희망",

diff --git a/Projects/Feature/InputPrizeInfoFeature/Sources/Scene/InputPrizeInfoView.swift b/Projects/Feature/InputPrizeInfoFeature/Sources/Scene/InputPrizeInfoView.swift
@@ -12,14 +12,12 @@ struct InputPrizeInfoView: View {
     var state: any InputPrizeInfoStateProtocol { container.model }
 
     var body: some View {
-        SMSNavigationTitleView(title: "수상") {
+        SMSNavigationTitleView(title: "정보입력") {
             GeometryReader { geometry in
                 ScrollView(showsIndicators: true) {
-                    SMSSeparator()
+                    InputInformationPageTitleView(title: "수상", isRequired: false, pageCount: 8, selectedPage: 7)
 
                     VStack(spacing: 32) {
-                        InputInformationPageTitleView(title: "수상", isRequired: false, pageCount: 8, selectedPage: 7)
-
                         VStack(spacing: 24) {
                             ForEach(state.prizeList.indices, id: \.self) { index in
                                 prizeListRowView(index: index, geometry: geometry)

diff --git a/Projects/Feature/InputProfileInfoFeature/Sources/Scene/InputProfileInfoView.swift b/Projects/Feature/InputProfileInfoFeature/Sources/Scene/InputProfileInfoView.swift
@@ -31,11 +31,9 @@ struct InputProfileInfoView: View {
         SMSNavigationTitleView(title: "정보입력") {
             GeometryReader { geometry in
                 ScrollView(showsIndicators: false) {
-                    SMSSeparator()
+                    InputInformationPageTitleView(title: "프로필", pageCount: 8, selectedPage: 0)
 
                     VStack(spacing: 32) {
-                        InputInformationPageTitleView(title: "프로필", pageCount: 8, selectedPage: 0)
-
                         VStack(alignment: .leading, spacing: 24) {
                             VStack(alignment: .leading, spacing: 8) {
                                 ZStack(alignment: .bottomTrailing) {

diff --git a/Projects/Feature/InputProjectInfoFeature/Sources/Scene/InputProjectInfoView.swift b/Projects/Feature/InputProjectInfoFeature/Sources/Scene/InputProjectInfoView.swift
@@ -23,14 +23,12 @@ struct InputProjectInfoView: View {
     }
 
     var body: some View {
-        SMSNavigationTitleView(title: "프로젝트") {
+        SMSNavigationTitleView(title: "정보입력") {
             GeometryReader { geometry in
                 ScrollView(showsIndicators: true) {
-                    SMSSeparator()
+                    InputInformationPageTitleView(title: "프로젝트", isRequired: false, pageCount: 8, selectedPage: 6)
 
                     VStack(spacing: 32) {
-                        InputInformationPageTitleView(title: "프로젝트", isRequired: false, pageCount: 8, selectedPage: 6)
-
                         VStack(spacing: 24) {
                             ForEach(state.projectList.indices, id: \.self) { index in
                                 projectListRowView(index: index, geometry: geometry)

diff --git a/Projects/Feature/InputSchoolLifeInfoFeature/Sources/Scene/InputSchoolLifeInfoView.swift b/Projects/Feature/InputSchoolLifeInfoFeature/Sources/Scene/InputSchoolLifeInfoView.swift
@@ -12,11 +12,9 @@ struct InputSchoolLifeInfoView: View {
     var body: some View {
         GeometryReader { proxy in
             SMSNavigationTitleView(title: "정보입력") {
-                SMSSeparator()
+                InputInformationPageTitleView(title: "학교 생활", pageCount: 8, selectedPage: 1)
 
                 VStack(spacing: 32) {
-                    InputInformationPageTitleView(title: "학교 생활", pageCount: 8, selectedPage: 1)
-
                     VStack(spacing: 24) {
                         SMSTextField(
                             "인증제 점수 입력",

diff --git a/Projects/Feature/InputWorkInfoFeature/Sources/Scene/InputWorkInfoView.swift b/Projects/Feature/InputWorkInfoFeature/Sources/Scene/InputWorkInfoView.swift
@@ -15,11 +15,9 @@ struct InputWorkInfoView: View {
         GeometryReader { proxy in
             SMSNavigationTitleView(title: "정보입력") {
                 ScrollView(showsIndicators: false) {
-                    SMSSeparator()
+                    InputInformationPageTitleView(title: "근무 조건", pageCount: 8, selectedPage: 2)
 
                     VStack(spacing: 32) {
-                        InputInformationPageTitleView(title: "근무 조건", pageCount: 8, selectedPage: 2)
-
                         VStack(spacing: 24) {
                             SMSTextField(
                                 "정규직",