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" />