feat: 검색 화면 구현

Projects/Core/PPACModels/Sources/Search/HotKeyword.swift

@@ -0,0 +1,48 @@
+//
+//  HotKeyword.swift
+//  PPACModels
+//
+//  Created by 리나 on 2024/06/29.
+//
+
+import Foundation
+
+public struct HotKeyword: Hashable {
+
+  // MARK: - Properties
+
+  public let title: String
+  public let imageUrlString: String
+
+  // MARK: - Initializers
+
+  public init(
+    title: String,
+    imageUrlString: String
+  ) {
+    self.title = title
+    self.imageUrlString = imageUrlString
+  }
+}
+
+public extension HotKeyword {
+  static let mock1 = HotKeyword(
+    title: "띠용오오우어어우어엉?",
+    imageUrlString: "https://www.blockmedia.co.kr/wp-content/uploads/2024/05/%EB%8F%84%EC%A7%80%EC%BD%94%EC%9D%B8Doge-%EC%B9%B4%EB%B6%80%EC%88%98.png"
+  )
+
+  static let mock2 = HotKeyword(
+    title: "짜란다짜란다",
+    imageUrlString: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_xO_sgszdvyVBp8xz4B82kHmyyO0SNZO-4A&s"
+  )
+
+  static let mock3 = HotKeyword(
+    title: "후회",
+    imageUrlString: "https://s3.ap-northeast-2.amazonaws.com/univ-careet/FileData/Picture/202310/3e7e0445-3812-4c06-bc75-a1bed40a3332_770x426.png"
+  )
+
+  static let mock4 = HotKeyword(
+    title: "무한도전",
+    imageUrlString: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBnKb96Uc-894Fhgt_5xLsCvY0pSkCl0B4TA&s"
+  )
+}

Projects/Core/PPACModels/Sources/Search/MimCategory.swift

@@ -0,0 +1,33 @@
+//
+//  MimCategory.swift
+//  PPACModels
+//
+//  Created by 리나 on 2024/06/29.
+//
+
+import Foundation
+
+public struct MimCategory: Hashable {
+  public let title: String
+  public let categories: [String]
+
+  public init(title: String, categories: [String]) {
+    self.title = title
+    self.categories = categories
+  }
+}
+
+public extension MimCategory {
+  static let mock1 = MimCategory(
+    title: "감정",
+    categories: ["행복", "슬픈", "무념무상", "분노", "웃긴", "피곤", "절망", "현타", "당황"]
+  )
+  static let mock2 = MimCategory(
+    title: "상황",
+    categories: ["회사", "대학", "공부", "연애", "긁", "다이어트", "주식", "고민", "축하", "칭찬"]
+  )
+  static let mock3 = MimCategory(
+    title: "컨텐츠",
+    categories: ["동물", "무한도전", "캐릭터", "짱구", "문상훈", "검정고무신", "그 외"]
+  )
+}

Projects/Features/Search/Project.swift

@@ -18,7 +18,11 @@ let project = Project(
             sources: "Sources/**",
             resources: "Resources/**",
             dependencies: [
-
+              .ResourceKit,
+              .Core.DesignSystem,
+              .Core.PPACModels,
+              .ThirdParty.Dependency,
+              .ThirdParty.Kingfisher,
             ]
         )
     ]

Projects/Features/Search/Sources/View/FakeSearchBar.swift

@@ -0,0 +1,40 @@
+//
+//  FakeSearchBar.swift
+//  DesignSystem
+//
+//  Created by 리나 on 2024/06/29.
+//
+
+import SwiftUI
+import ResourceKit
+
+struct FakeSearchBar: View {
+  let placeHolder: String
+
+  init(placeHolder: String) {
+    self.placeHolder = placeHolder
+  }
+
+  var body: some View {
+    fakeTextField
+      .frame(maxWidth: .infinity)
+      .frame(height: 44)
+      .background(Color.Background.assistive)
+      .clipShape(RoundedRectangle(cornerRadius: 10))
+      .padding(.horizontal, 20)
+      .padding(.vertical, 16)
+  }
+
+  private var fakeTextField: some View {
+    HStack(spacing: 12) {
+      ResourceKitAsset.Icon.search.swiftUIImage
+
+      Text(placeHolder)
+        .font(Font.Body.Large.medium)
+        .foregroundColor(Color.Text.tertiary)
+
+      Spacer()
+    }
+    .padding(.horizontal, 16)
+  }
+}

Projects/Features/Search/Sources/View/HotKeywordImageView.swift

@@ -0,0 +1,57 @@
+//
+//  HotKeywordImageView.swift
+//  Search
+//
+//  Created by 리나 on 2024/06/30.
+//
+
+import SwiftUI
+import Kingfisher
+import PPACModels
+import DesignSystem
+import ResourceKit
+
+struct HotKeywordImageView: View, HorizontalMimItemViewProtocol {
+  typealias Item = HotKeyword
+
+  let hotKeyword: HotKeyword
+
+  init(item hotKeyword: HotKeyword) {
+    self.hotKeyword = hotKeyword
+  }
+
+  var body: some View {
+    ZStack {
+      imageView
+
+      Color.black.opacity(0.4)
+
+      keywordView
+    }
+    .overlay(
+      RoundedRectangle(cornerRadius: 10)
+        .inset(by: 1)
+        .stroke(Color.Border.primary, lineWidth: 2)
+    )
+    .clipShape(RoundedRectangle(cornerRadius: 10))
+  }
+
+  private var imageView: some View {
+    KFImage(URL(string: hotKeyword.imageUrlString))
+      .resizable()
+      .loadDiskFileSynchronously()
+      .cacheMemoryOnly()
+      .frame(width: 90, height: 90)
+      .aspectRatio(contentMode: .fit)
+  }
+
+  private var keywordView: some View {
+    Text(hotKeyword.title)
+      .font(Font.Body.Large.semiBold)
+      .foregroundColor(Color.Text.inverse)
+      .lineLimit(2)
+      .multilineTextAlignment(.center)
+      .padding(.horizontal, 16)
+      .frame(width: 90, height: 90)
+  }
+}

Projects/Features/Search/Sources/View/SearchPreparingAlert.swift

@@ -0,0 +1,67 @@
+//
+//  SearchPreparingAlert.swift
+//  Search
+//
+//  Created by 리나 on 2024/06/30.
+//
+
+import SwiftUI
+import ResourceKit
+
+struct SearchPreparingAlert: View {
+  private var dismiss: (() -> Void)
+
+  init(dismiss: @escaping (() -> Void)) {
+    self.dismiss = dismiss
+  }
+
+  var body: some View {
+    VStack(spacing: 0) {
+      title
+
+      description
+        .padding(.top, 8)
+
+      confirmButton
+        .padding(.top, 14)
+    }
+    .padding(.horizontal, 30)
+    .padding(.vertical, 20)
+    .background(Color.Background.white)
+    .cornerRadius(20)
+  }
+
+
+  private var title: some View {
+    HStack {
+      Text("조금만 기다려주세요!")
+        .font(Font.Heading.Medium.semiBold)
+        .foregroundColor(Color.Text.primary)
+        .foregroundColor(.black)
+      Spacer()
+    }
+  }
+
+  private var description: some View {
+    HStack {
+      Text("검색은 준비 중이에요.")
+        .font(Font.Body.Large.medium)
+        .foregroundColor(Color.Text.secondary)
+        .multilineTextAlignment(.leading)
+      Spacer()
+    }
+  }
+
+  private var confirmButton: some View {
+    HStack{
+      Spacer()
+      Button {
+        dismiss()
+      } label: {
+        Text("확인")
+          .font(Font.Body.Large.medium)
+          .foregroundColor(Color.Text.brand)
+      }
+    }
+  }
+}

Projects/Features/Search/Sources/View/SearchView.swift

@@ -6,17 +6,106 @@
 //
 
 import SwiftUI
+import PPACModels
+import ResourceKit
+import DesignSystem
 
 public struct SearchView: View {
-  public init() { }
+  @State public var hotKeywords: [HotKeyword]
+  @State public var mimCategories: [MimCategory]
+  @State private var isPresenting: Bool = false
+
+  public init(hotKeywords: [HotKeyword] = [], mimCategories: [MimCategory] = []) {
+    self.hotKeywords = hotKeywords
+    self.mimCategories = mimCategories
+  }
 
   public var body: some View {
-    Text("검색 화면")
-      .frame(maxWidth: .infinity, maxHeight: .infinity)
-      .background(.pink)
+    VStack(spacing: 0) {
+      fakeSearchBar
+
+      ScrollView {
+        VStack(spacing: 0) {
+          currentHotKeywords
+          mimCategoriesViews
+        }
+      }
+      .scrollIndicators(.hidden)
+    }
+    .padding(.bottom, 40)
+    .basicModal(
+      isPresented: $isPresenting,
+      opacity: 0.5,
+      content: {
+        SearchPreparingAlert(dismiss: { isPresenting = false })
+      }
+    )
+  }
+
+  private var fakeSearchBar: some View {
+    Button {
+      isPresenting = true
+    } label: {
+      FakeSearchBar(placeHolder: "🚧 검색은 오픈 준비 중!")
+    }
+    .buttonStyle(PlainButtonStyle())
+  }
+
+  private var currentHotKeywords: some View {
+    VStack(alignment: .leading, spacing: 0) {
+      HStack(spacing: 8) {
+        ResourceKitAsset.Icon.special.swiftUIImage
+          .resizable()
+          .aspectRatio(contentMode: .fit)
+          .frame(width: 20, height: 20)
+
+        Text("두둥! 요즘 핫한 #키워드")
+          .font(Font.Heading.Small.semiBold)
+          .foregroundColor(Color.Text.primary)
+      }
+      .padding(.horizontal, 20)
+      .padding(.vertical, 18)
+
+      HorizontalMimScrollView<HotKeyword, HotKeywordImageView>(items: $hotKeywords)
+    }
+    .padding(.bottom, 40)
+  }
+
+  private var mimCategoriesViews: some View {
+    VStack(alignment: .leading, spacing: 0) {
+      HStack(spacing: 8) {
+        ResourceKitAsset.Icon.category.swiftUIImage
+          .resizable()
+          .aspectRatio(contentMode: .fit)
+          .frame(width: 20, height: 20)
+
+        Text("무슨 밈 찾아?")
+          .font(Font.Heading.Small.semiBold)
+          .foregroundColor(Color.Text.primary)
+      }
+      .padding(.horizontal, 20)
+      .padding(.vertical, 18)
+
+      ForEach(mimCategories, id: \.self) { mimCategory in
+        MimCategoryView(title: mimCategory.title, categories: mimCategory.categories)
+      }
+    }
   }
 }
 
+extension HotKeyword: HorizontalMimItemProtocol {}
+
 #Preview {
-  SearchView()
+  SearchView(
+    hotKeywords: [
+      .mock1,
+      .mock2,
+      .mock3,
+      .mock4
+    ], mimCategories: [
+      .mock1,
+      .mock2,
+      .mock3
+    ]
+  )
 }

Projects/ResourceKit/Resources/Icon.xcassets/Search.imageset/Contents.json

@@ -1,19 +1,8 @@
 {
   "images" : [
     {
-      "filename" : "Search.png",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "filename" : "[email protected]",
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "filename" : "[email protected]",
-      "idiom" : "universal",
-      "scale" : "3x"
+      "filename" : "Search.svg",
+      "idiom" : "universal"
     }
   ],
   "info" : {