오늘의 질문 UI 업데이트

Qapple/Qapple/Resource/Constant/Constant.swift

@@ -17,5 +17,6 @@ enum Constant {
 
 extension Constant {
     static let isSignIn = "isSignIn"
+    static let recentQuestionID = "recentQuestionID"
     static let userRandomID = "userRandomID"
 }

Qapple/Qapple/SourceCode/Entity/QuestionState.swift

@@ -40,9 +40,9 @@ enum QuestionState: Codable {
     /// 질문 및 답변 여부에 따라 변화하는 버튼 문자열
     func buttonTitle(isAnswerd: Bool) -> String {
         switch self {
-        case .creating: isAnswerd ? "다른 답변 둘러보기" : "이전 질문 답변하기"
-        case .ready: "질문에 답변하기"
-        case .complete: "다른 답변 둘러보기"
+        case .creating: isAnswerd ? "둘러보기" : "답변하기"
+        case .ready: "답변하기"
+        case .complete: "둘러보기"
         }
     }
 }

Qapple/Qapple/SourceCode/Feature/2.QuestionTab/2-2.TodayQuestion/TodayQuestionFeature.swift

@@ -19,8 +19,10 @@ struct TodayQuestionFeature {
         var timeRemainingForQuestion: TimeInterval = 0
         var isLoading = true
         var isFirstLaunch = true
+        var isNewQuestion = false
         @Presents var sheet: Sheet.State?
         @Presents var alert: AlertState<Action.Alert>?
+        @Shared(.appStorage(Constant.recentQuestionID)) var recentQuestionID = 0
     }
 
     enum Action {
@@ -79,6 +81,14 @@ struct TodayQuestionFeature {
             case let .mainQuestionResponse(mainQuestion):
                 state.isFirstLaunch = false
                 state.todayQuestion = mainQuestion
+
+                if mainQuestion.id != state.recentQuestionID {
+                    state.isNewQuestion = true
+                    state.$recentQuestionID.withLock { $0 = mainQuestion.id }
+                } else {
+                    state.isNewQuestion = false
+                }
+
                 if isQuestionLiveTime {
                     state.questionState = mainQuestion.isAnswered ? .complete : .ready
                     return .none

Qapple/Qapple/SourceCode/Feature/2.QuestionTab/2-2.TodayQuestion/TodayQuestionView.swift

@@ -13,18 +13,19 @@ struct TodayQuestionView: View {
     @Bindable var store: StoreOf<TodayQuestionFeature>
 
     var body: some View {
-        ZStack {
-            Color.second.ignoresSafeArea()
-
-            ScrollView {
-                VStack(spacing: 0) {
-                    HeaderView(store: store)
-                    QuestionButton(store: store)
-                    AnswerPreviewList(store: store)
+        ScrollView {
+            VStack(spacing: 0) {
+                if store.isNewQuestion {
+                    LargeHeaderView(store: store)
+                    LargeQuestionButton(store: store)
+                } else {
+                    SmallHeaderView(store: store)
                 }
+                AnswerPreviewList(store: store)
             }
-            .scrollIndicators(.hidden)
         }
+        .background(.second)
+        .scrollIndicators(.hidden)
         .onAppear {
             store.send(.onAppear)
         }
@@ -36,20 +37,98 @@ struct TodayQuestionView: View {
         }
         .loadingIndicator(isLoading: store.isLoading)
         .alert($store.scope(state: \.alert, action: \.alert))
-        .sheet(item: $store.scope(
-            state: \.sheet,
-            action: \.sheet)
-        ) { store in
+        .sheet(item: $store.scope(state: \.sheet, action: \.sheet)) { store in
             switch store.case {
             case let .seeMore(store): SeeMoreSheet(store: store)
             }
         }
     }
 }
 
-// MARK: - HeaderView
+// MARK: - SmallHeaderView
+
+private struct SmallHeaderView: View {
+
+    let store: StoreOf<TodayQuestionFeature>
+
+    var body: some View {
+        ZStack {
+            Color.first.ignoresSafeArea()
+
+            HStack(spacing: 8) {
+                Image(store.questionState.graphicImage)
+                    .resizable()
+                    .scaledToFill()
+                    .frame(width: 40, height: 40)
+
+                Text(store.questionState.mainTitle)
+                    .font(.pretendard(.semiBold, size: 18))
+                    .foregroundStyle(.wh)
+                    .tracking(-1)
+
+                Spacer()
+
+                if store.questionState == .creating {
+                    QuestionTimer()
+                } else {
+                    AnsweringButton()
+                }
+            }
+            .padding(.horizontal, 24)
+            .frame(maxWidth: .infinity)
+            .frame(height: 90)
+            .background(.second)
+            .cornerRadius(32, corners: [.bottomLeft, .bottomRight])
+        }
+    }
+
+    /// 질문 타이머
+    private func QuestionTimer() -> some View {
+        Text(store.timeRemainingForQuestion.timerFormat)
+            .font(.pretendard(.bold, size: 22))
+            .foregroundStyle(LinearGradient.timer)
+            .monospacedDigit()
+            .kerning(-2)
+    }
+
+    /// 답변하기 버튼
+    private func AnsweringButton() -> some View {
+        Button {
+            store.send(.questionButtonTapped(store.todayQuestion))
+        } label: {
+            Text(title)
+                .font(.pretendard(.semiBold, size: 15))
+                .frame(width: 84)
+                .padding(.vertical, 10)
+                .foregroundStyle(.main)
+                .background(backgroundColor)
+                .clipShape(RoundedRectangle(cornerRadius: 20))
+        }
+        .opacity(store.isLoading ? 0 : 1)
+        .buttonStyle(ScalableButtonStyle())
+    }
+
+    /// 버튼 제목
+    private var title: String {
+        store.questionState.buttonTitle(
+            isAnswerd: store.todayQuestion.isAnswered
+        )
+    }
+
+    /// 버튼 배경 색상
+    private var backgroundColor: Color {
+        switch store.questionState {
+        case .creating:
+            store.todayQuestion.isAnswered ? .secondaryButton : .button
+        case .ready: .button
+        case .complete: .secondaryButton
+        }
+    }
+}
+
+// MARK: - LargeHeaderView
 
-private struct HeaderView: View {
+private struct LargeHeaderView: View {
 
     @State private var offsetY: CGFloat = 0
 
@@ -93,9 +172,9 @@ private struct HeaderView: View {
     }
 }
 
-// MARK: - QuestionButton
+// MARK: - LargeQuestionButton
 
-private struct QuestionButton: View {
+private struct LargeQuestionButton: View {
 
     let store: StoreOf<TodayQuestionFeature>
 
@@ -141,7 +220,6 @@ private struct QuestionButton: View {
         }
     }
 }
-
 // MARK: - AnswerPreviewList
 
 private struct AnswerPreviewList: View {
@@ -165,7 +243,7 @@ private struct AnswerPreviewList: View {
                 if store.answerPreviewList.isEmpty {
                     Spacer()
 
-                    Text("아직 답변이 달리지않았어요\n첫 답변을 달아보세요!")
+                    Text("첫 답변을 달아보세요!")
                         .font(.pretendard(.semiBold, size: 14))
                         .foregroundStyle(.sub4)
                         .multilineTextAlignment(.center)
@@ -221,6 +299,12 @@ private struct AnswerPreviewList: View {
                     state: .normal,
                     seeMoreAction: {
                         store.send(.seeMoreAnswerButtonTapped(answer))
+                    },
+                    likeAction: {
+
+                    },
+                    commentAction: {
+
                     }
                 )
             }

Qapple/Qapple/SourceCode/Feature/2.QuestionTab/2-6.AnswerList/AnswerListView.swift

@@ -139,6 +139,12 @@ private struct AnswerList: View {
                         state: .normal,
                         seeMoreAction: {
                             store.send(.seeMoreAction(answer))
+                        },
+                        likeAction: {
+
+                        },
+                        commentAction: {
+
                         }
                     )
                     .configurePagination(

Qapple/Qapple/SourceCode/Feature/5.Profile/5-3.MyAnswerList/MyAnswerListView.swift

@@ -70,6 +70,12 @@ private struct MyAnswerList: View {
                             state: .written,
                             seeMoreAction:{
                                 store.send(.seeMoreAction(answer))
+                            },
+                            likeAction: {
+
+                            },
+                            commentAction: {
+
                             }
                         )
                         .configurePagination(