[UI]#5 Home 단어 카드 리스트 구현 (Compose)

app/src/main/java/com/example/com_ma/ui/FairytaleListItem.kt

@@ -0,0 +1,4 @@
+package com.example.com_ma.ui
+
+fun FairytaleListItem() {
+}

app/src/main/java/com/example/com_ma/ui/WordCardListItem.kt

@@ -0,0 +1,68 @@
+package com.example.com_ma.ui
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.com_ma.ui.theme.Lavender200
+import com.example.com_ma.ui.theme.Typography
+import com.example.com_ma.ui.theme.pretendard
+
+@Composable
+fun WordCardListItem(img: Painter, modifier: Modifier = Modifier){
+    Surface(
+        modifier = modifier
+            .width(162.dp)
+            .height(195.dp)
+            .padding(10.dp),
+        color = Color.White,
+        shape = RoundedCornerShape(12.dp),
+        shadowElevation = 4.dp
+    ) {
+        Column(
+            modifier = modifier.fillMaxSize(),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.Center
+        ){
+            Image(modifier = modifier.height(77.dp), painter = img, contentDescription = "단어 이미지")
+            Text(modifier = modifier.padding(0.dp, 6.dp), text = "호랑이", style = Typography.labelLarge)
+            Surface(
+                modifier = Modifier
+                    .width(80.dp)
+                    .height(27.dp)
+                    .clickable(onClick = {}),
+                shape = RoundedCornerShape(8.dp),
+                color = Lavender200
+            ) {
+                Text(
+                    modifier = Modifier.wrapContentHeight(align = Alignment.CenterVertically),
+                    text = "뒤집기",
+                    style = TextStyle(
+                        fontFamily = pretendard,
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 14.sp,
+                        color = Color.White
+                    ),
+                    textAlign = TextAlign.Center)
+            }
+        }
+    }
+}

app/src/main/java/com/example/com_ma/ui/home/HomeFragment.kt

@@ -5,9 +5,17 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.ViewCompositionStrategy
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.ViewModelProvider
+import com.example.com_ma.R
 import com.example.com_ma.databinding.FragmentHomeBinding
+import com.example.com_ma.ui.WordCardListItem
 
 class HomeFragment : Fragment() {
 
@@ -28,13 +36,26 @@ class HomeFragment : Fragment() {
         _binding = FragmentHomeBinding.inflate(inflater, container, false)
         val root: View = binding.root
 
+        binding.composeViewWordCard.apply {
+            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
+            setContent {
+                LazyRow(modifier = Modifier.padding(start = 20.dp)){
+                    items(10) {index ->
+                        WordCardListItem(painterResource(id = R.drawable.ic_bottom_nav_camera))
+                    }
+                }
+            }
+        }
+
         val textView: TextView = binding.textHome
         userViewModel.text.observe(viewLifecycleOwner) {
             textView.text = it
         }
         return root
     }
 
+
+
     override fun onDestroyView() {
         super.onDestroyView()
         _binding = null

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

@@ -56,7 +56,7 @@
                         android:fontFamily="@font/pretendard_semibold"
                         android:text="@string/home_tv_word_card"
                         android:textColor="@color/gray_900"
-                        android:textSize="22dp"/>
+                        android:textSize="22sp"/>
 
                     <LinearLayout
                         android:layout_width="wrap_content"
@@ -77,30 +77,24 @@
                             android:layout_height="wrap_content"
                             android:layout_gravity="center"
                             android:src="@drawable/ic_arrow_right"/>
+
                     </LinearLayout>
 
                 </LinearLayout>
                 <TextView
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:paddingHorizontal="@dimen/horizontal_padding"
+                    android:paddingVertical="10dp"
                     android:fontFamily="@font/pretendard_medium"
                     android:text="@string/home_tv_word_card_description"
                     android:textColor="@color/gray_700"
-                    android:textSize="16dp"/>
+                    android:textSize="16sp"/>
 
-                <ScrollView
+                <androidx.compose.ui.platform.ComposeView
+                    android:id="@+id/compose_view_word_card"
                     android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:paddingLeft="@dimen/horizontal_padding"
-                    android:layout_marginVertical="14dp">
-                    <LinearLayout
-                        android:layout_width="match_parent"
-                        android:layout_height="wrap_content"
-                        android:orientation="horizontal">
-
-                    </LinearLayout>
-                </ScrollView>
+                    android:layout_height="wrap_content" />
             </LinearLayout>
         </LinearLayout>
     </androidx.core.widget.NestedScrollView>