diff --git a/app/src/main/java/com/example/com_ma/ui/FairytaleListItem.kt b/app/src/main/java/com/example/com_ma/ui/FairytaleListItem.kt
new file mode 100644
index 0000000..39e62e2
--- /dev/null
+++ b/app/src/main/java/com/example/com_ma/ui/FairytaleListItem.kt
@@ -0,0 +1,4 @@
+package com.example.com_ma.ui
+
+fun FairytaleListItem() {
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/com_ma/ui/WordCardListItem.kt b/app/src/main/java/com/example/com_ma/ui/WordCardListItem.kt
new file mode 100644
index 0000000..c200e31
--- /dev/null
+++ b/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)
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/com_ma/ui/home/HomeFragment.kt b/app/src/main/java/com/example/com_ma/ui/home/HomeFragment.kt
index eda3c59..9c3684a 100644
--- a/app/src/main/java/com/example/com_ma/ui/home/HomeFragment.kt
+++ b/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,6 +36,17 @@ 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
@@ -35,6 +54,8 @@ class HomeFragment : Fragment() {
return root
}
+
+
override fun onDestroyView() {
super.onDestroyView()
_binding = null
diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml
index d67c58e..4cb2286 100644
--- a/app/src/main/res/layout/fragment_home.xml
+++ b/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"/>
+
@@ -84,23 +85,16 @@
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"/>
-
-
-
-
-
+ android:layout_height="wrap_content" />