feat: 상점 아이템 목록 구현

app/src/main/java/com/example/egobook_frontent/MainActivity.kt

@@ -40,7 +40,8 @@ class MainActivity : AppCompatActivity(), BlurController {
             when (destination.id) {
                 R.id.onboardingContainerFragment, // 온보딩 화면
                 R.id.diaryWriteFragment,        // 일기 작성 화면
-                R.id.candlerFragment            // 달력 화면
+                R.id.candlerFragment, // 달력 화면
+                R.id.storeFragment,
                     -> {
                     binding.bottomNavigation.visibility = View.GONE
                 }

app/src/main/java/com/example/egobook_frontent/ui/shop/CustomItem.kt

@@ -0,0 +1,3 @@
+package com.example.egobook_frontent.ui.shop
+
+data class CustomItem(val id: String, val type: ItemType, val price: Price, val itemStatus: ItemStatus)

app/src/main/java/com/example/egobook_frontent/ui/shop/ItemAdapter.kt

@@ -0,0 +1,62 @@
+package com.example.egobook_frontent.ui.shop
+
+import android.R.attr.left
+import android.view.LayoutInflater
+import android.view.View
+import android.view.View.GONE
+import android.view.View.VISIBLE
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+import androidx.core.view.updatePadding
+import androidx.recyclerview.widget.RecyclerView
+import com.example.egobook_frontent.R
+
+class ItemAdapter(private val items: List<CustomItem>) :
+    RecyclerView.Adapter<ItemAdapter.ItemViewHolder>() {
+    override fun onCreateViewHolder(
+        parent: ViewGroup,
+        viewType: Int
+    ): ItemViewHolder {
+        val view = LayoutInflater.from(parent.context)
+            .inflate(R.layout.view_holder_store_item, parent, false)
+
+        return ItemViewHolder(view)
+    }
+
+    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
+        holder.binding(items[position])
+    }
+
+    override fun getItemCount() = items.size
+
+    class ItemViewHolder(view: View) : RecyclerView.ViewHolder(view) {
+        val itemStatus: TextView = view.findViewById(R.id.tv_item_status)
+        val itemPriceIcon: ImageView = view.findViewById(R.id.iv_store_item_ink)
+        val itemInfoLayout: LinearLayout = view.findViewById(R.id.ll_item_info)
+        val root: View = view.rootView
+
+        fun binding(item: CustomItem) {
+            when (item.itemStatus) {
+                ItemStatus.PURCHASED -> {
+                    itemStatus.text = "보유중"
+                    itemInfoLayout.setPadding(24,6,24,6)
+                    itemPriceIcon.visibility = GONE
+                }
+                ItemStatus.SUBSCRIBE_ONLY -> {
+                    itemStatus.text = "구독전용"
+                    itemInfoLayout.setPadding(24,6,24,6)
+                    itemPriceIcon.visibility = GONE
+                    root.background = null
+                }
+                ItemStatus.PURCHASABLE -> {
+                    itemStatus.text = item.price.toString()
+                    itemInfoLayout.updatePadding(left=12, right=16)
+                    itemPriceIcon.visibility = VISIBLE
+                    root.background = null
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/example/egobook_frontent/ui/shop/ItemStatus.kt

@@ -0,0 +1,7 @@
+package com.example.egobook_frontent.ui.shop
+
+enum class ItemStatus {
+    PURCHASABLE,
+    PURCHASED,
+    SUBSCRIBE_ONLY
+}

app/src/main/java/com/example/egobook_frontent/ui/shop/Price.kt

@@ -0,0 +1,9 @@
+package com.example.egobook_frontent.ui.shop
+
+@JvmInline
+value class Price(val value: Int) {
+    init {
+        require(value >= 0) { "가격은 음수일 수 없습니다" }
+    }
+    override fun toString() = value.toString()
+}

app/src/main/java/com/example/egobook_frontent/ui/shop/StoreCollectionFragment.kt

@@ -6,7 +6,10 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.core.os.BundleCompat
 import androidx.fragment.app.Fragment
+import androidx.fragment.app.viewModels
+import androidx.recyclerview.widget.GridLayoutManager
 import com.example.egobook_frontent.databinding.FragmentStoreCollectionBinding
+import kotlin.getValue
 
 class StoreCollectionFragment(): Fragment() {
     private var _binding: FragmentStoreCollectionBinding? = null
@@ -22,11 +25,16 @@ class StoreCollectionFragment(): Fragment() {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
+        val viewModel: StoreViewModel by viewModels()
         val targetBundle = checkNotNull(arguments) { "구현 오류: 올바른 탭을 표시하기 위해 번들은 필수입니다"}
         val tabItem = checkNotNull(BundleCompat.getParcelable(targetBundle, ItemTab.BUNDLE_KEY, ItemTab::class.java)) {
             "구현 오류: 올바른 탭을 표시하기 위해 tabItem을 번들을 통해 넘겨야 합니다."
         }
-        binding.test.text = tabItem.text
+
+        binding.rvItems.apply {
+            adapter = ItemAdapter(viewModel.loadItems(tabItem.type))
+            layoutManager = GridLayoutManager(context, 3)
+        }
     }
 
     override fun onDestroyView() {

app/src/main/java/com/example/egobook_frontent/ui/shop/StoreFragment.kt

@@ -4,7 +4,10 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
 import androidx.fragment.app.Fragment
+import androidx.fragment.app.viewModels
 import androidx.navigation.fragment.findNavController
 import androidx.viewpager2.widget.ViewPager2
 import com.example.egobook_frontent.R
@@ -27,6 +30,12 @@ class StoreFragment: Fragment() {
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
+        ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->
+            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
+            v.setPadding(0, 0, 0, systemBars.bottom)
+            insets
+        }
+
         viewPager = binding.vp2StoreCollectionContainer
         viewPager.adapter = StoreCollectionAdapter(this)
         val tabLayout = binding.tlTabs
@@ -37,6 +46,7 @@ class StoreFragment: Fragment() {
         binding.ivBack.setOnClickListener {
             findNavController().navigate(R.id.action_storeFragment_to_homeFragment)
         }
+
     }
 
     override fun onDestroyView() {

app/src/main/java/com/example/egobook_frontent/ui/shop/StoreViewModel.kt

@@ -0,0 +1,27 @@
+package com.example.egobook_frontent.ui.shop
+
+import androidx.lifecycle.ViewModel
+
+class StoreViewModel: ViewModel() {
+    val temporalData = listOf(
+        CustomItem("1", ItemType.BACK, Price(100), ItemStatus.PURCHASABLE),
+        CustomItem("2", ItemType.BACK, Price(50), ItemStatus.PURCHASED),
+        CustomItem("3", ItemType.BACK, Price(40), ItemStatus.PURCHASABLE),
+        CustomItem("4", ItemType.BACK, Price(150), ItemStatus.SUBSCRIBE_ONLY),
+        CustomItem("5", ItemType.BACK, Price(30), ItemStatus.PURCHASABLE),
+        CustomItem("6", ItemType.BACK, Price(10), ItemStatus.PURCHASED),
+        CustomItem("7", ItemType.BACK, Price(190), ItemStatus.SUBSCRIBE_ONLY),
+        CustomItem("8", ItemType.BACK, Price(200), ItemStatus.PURCHASED),
+        CustomItem("9", ItemType.BACK, Price(300), ItemStatus.SUBSCRIBE_ONLY),
+        CustomItem("10", ItemType.DECO_1, Price(590), ItemStatus.SUBSCRIBE_ONLY),
+        CustomItem("11", ItemType.DECO_2, Price(600), ItemStatus.PURCHASED),
+        CustomItem("12", ItemType.SKIN, Price(700), ItemStatus.SUBSCRIBE_ONLY),
+        CustomItem("13", ItemType.BACKGROUND, Price(222), ItemStatus.PURCHASABLE),
+        CustomItem("14", ItemType.BACKGROUND, Price(444), ItemStatus.PURCHASABLE),
+    )
+    fun loadItems(type: ItemType): List<CustomItem> {
+        return temporalData.filter { customItem ->
+            customItem.type == type
+        }
+    }
+}

app/src/main/res/drawable/reset_icon.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <group>
+    <clip-path
+        android:pathData="M0,0h24v24h-24z"/>
+    <path
+        android:pathData="M20.612,11.949C20.613,14.052 19.785,16.071 18.307,17.568C16.83,19.066 14.823,19.921 12.719,19.949H12.612C10.569,19.954 8.602,19.172 7.12,17.766C7.056,17.705 7.005,17.633 6.969,17.553C6.933,17.473 6.914,17.387 6.911,17.3C6.909,17.212 6.924,17.125 6.955,17.043C6.986,16.961 7.033,16.886 7.094,16.823C7.154,16.759 7.226,16.708 7.306,16.672C7.386,16.636 7.472,16.617 7.56,16.614C7.647,16.612 7.734,16.627 7.816,16.658C7.898,16.689 7.973,16.736 8.037,16.796C8.99,17.695 10.187,18.294 11.478,18.516C12.769,18.739 14.097,18.576 15.297,18.048C16.496,17.521 17.513,16.651 18.221,15.548C18.929,14.446 19.296,13.159 19.277,11.849C19.258,10.539 18.854,9.263 18.114,8.182C17.374,7.101 16.332,6.261 15.118,5.768C13.904,5.276 12.571,5.151 11.287,5.412C10.003,5.672 8.824,6.304 7.897,7.231C7.891,7.238 7.883,7.245 7.876,7.252L6.997,8.056L8.414,9.473C8.509,9.565 8.573,9.684 8.6,9.814C8.627,9.944 8.614,10.079 8.564,10.202C8.513,10.324 8.428,10.429 8.317,10.503C8.207,10.576 8.077,10.616 7.945,10.615H3.945C3.768,10.615 3.598,10.545 3.473,10.42C3.348,10.295 3.278,10.125 3.278,9.948V5.948C3.277,5.816 3.316,5.686 3.389,5.576C3.462,5.466 3.566,5.38 3.688,5.329C3.81,5.278 3.944,5.265 4.074,5.29C4.204,5.316 4.323,5.38 4.416,5.473L6.054,7.115L6.966,6.282C8.086,5.166 9.511,4.407 11.062,4.101C12.613,3.795 14.22,3.955 15.68,4.561C17.14,5.167 18.388,6.193 19.266,7.507C20.144,8.822 20.612,10.368 20.612,11.949Z"
+        android:fillColor="#191818"/>
+  </group>
+</vector>

app/src/main/res/drawable/store_item_selection_border.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/transparent" />
+    <stroke android:color="@color/brand" android:width="2dp" />
+    <corners android:radius="12dp" />
+</shape>

app/src/main/res/drawable/store_item_status_border.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <stroke android:color="@color/neutral_stroke" android:width="1dp" />
+    <corners android:radius="@dimen/circle_radius" />
+</shape>

app/src/main/res/drawable/store_purchase_button.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <solid android:color="@color/neutral" />
+    <corners android:radius="4dp" />
+</shape>

app/src/main/res/layout/fragment_store.xml

@@ -3,7 +3,17 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:background="@drawable/default_background">
+    android:background="@color/layer_white">
+
+    <ImageView
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        android:scaleType="fitXY"
+        app:layout_constraintEnd_toEndOf="parent"
+        android:src="@drawable/default_background"
+        app:layout_constraintBottom_toBottomOf="@id/vp2_store_collection_container" />
 
     <ImageView
         android:id="@+id/iv_back"
@@ -99,7 +109,33 @@
         android:id="@+id/vp2_store_collection_container"
         android:layout_width="match_parent"
         android:layout_height="220dp"
+        app:layout_constraintBottom_toTopOf="@id/ll_collection_controller"
+        app:layout_constraintStart_toStartOf="parent" />
+
+    <androidx.constraintlayout.helper.widget.Flow
+        android:id="@+id/ll_collection_controller"
+        android:layout_width="match_parent"
+        android:layout_height="56dp"
+        app:constraint_referenced_ids="iv_reset, tv_purchase"
+        android:background="@color/layer_white"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent" />
+
+    <ImageView
+        android:id="@+id/iv_reset"
+        android:layout_width="24dp"
+        android:layout_height="24dp"
+        android:src="@drawable/reset_icon" />
+
+    <TextView
+        android:id="@+id/tv_purchase"
+        android:layout_width="260dp"
+        android:layout_height="34dp"
+        android:gravity="center"
+        android:textAlignment="center"
+        android:background="@drawable/store_purchase_button"
+        android:textColor="@color/neutral_contrast"
+        android:fontFamily="@font/arita_semibold"
+        android:text="구매하기" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/fragment_store_collection.xml

@@ -4,14 +4,16 @@
     android:layout_height="match_parent"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:background="@color/white">
-
-    <TextView
-        android:id="@+id/test"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
+    
+    <androidx.recyclerview.widget.RecyclerView
+        android:id="@+id/rv_items"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent" />
+        app:layout_constraintEnd_toEndOf="parent"
+        android:layout_marginStart="12dp"
+        android:layout_marginEnd="12dp"/>
 
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/layout/view_holder_store_item.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/ll_store_item"
+    android:layout_width="match_parent"
+    android:layout_height="142dp"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:background="@drawable/store_item_selection_border"
+    android:layout_marginHorizontal="4dp"
+    android:layout_marginBottom="16dp"
+    android:orientation="vertical">
+
+
+    <ImageView
+        android:id="@+id/iv_item"
+        android:layout_width="80dp"
+        android:layout_height="80dp"
+        android:src="@color/neutral_subtle"
+        android:layout_marginTop="12dp"
+        android:layout_gravity="center" />
+
+    <LinearLayout
+        android:id="@+id/ll_item_info"
+        android:layout_width="78dp"
+        android:layout_height="30dp"
+        android:layout_gravity="center"
+        android:paddingHorizontal="12dp"
+        android:paddingVertical="6dp"
+        android:layout_marginTop="8dp"
+        android:gravity="center"
+        android:background="@drawable/store_item_status_border">
+
+        <ImageView
+            android:id="@+id/iv_store_item_ink"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_marginEnd="4dp"
+            android:src="@drawable/ink_icon" />
+
+        <TextView
+            android:id="@+id/tv_item_status"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:fontFamily="@font/arita_semibold"
+            android:textSize="12dp"
+            android:textColor="@color/neutral"
+            android:textAlignment="center"
+            android:text="300"
+            android:layout_gravity="center"/>
+
+    </LinearLayout>
+
+
+
+
+</LinearLayout>

app/src/test/java/com/example/egobook_frontent/StoreTest.kt

@@ -0,0 +1,13 @@
+package com.example.egobook_frontent
+
+import com.example.egobook_frontent.ui.shop.Price
+import org.assertj.core.api.Assertions.assertThatThrownBy
+import org.junit.jupiter.api.Test
+
+class StoreTest {
+    @Test
+    fun `아이템 가격은 음수가 될 수 없다`() {
+        assertThatThrownBy { Price(-1) }
+            .isInstanceOf(IllegalArgumentException::class.java)
+    }
+}