MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CoupangExTheme {
                CoupangEx()

            }
        }
    }
}

@Composable
fun CoupangEx(){

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {

        Column() {
            TopLogoArea()
            TopSearchBarArea()
        }

    }
}

@Composable
fun TopLogoArea(){

    Box {

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp),
            contentAlignment = Alignment.Center
        ) {

            Row() {
                Text(text = "C", fontSize = 30.sp, color = Color(0xFF964b00))
                Text(text = "O", fontSize = 30.sp, color = Color(0xFF964b00))
                Text(text = "U", fontSize = 30.sp, color = Color(0xFF964b00))
                Text(text = "P", fontSize = 30.sp, color = Color.Red)
                Text(text = "A", fontSize = 30.sp, color = Color.Yellow)
                Text(text = "N", fontSize = 30.sp, color = Color.Green)
                Text(text = "G", fontSize = 30.sp, color = Color.Blue)
            }

            Icon(
                imageVector = Icons.Default.ShoppingCart,
                contentDescription = null,
                modifier = Modifier
                    .align(Alignment.CenterEnd)
                    .padding(end = 20.dp)
            )

        }

    }

}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopSearchBarArea(){

    var inputText by remember {
        mutableStateOf("")
    }

    Box(modifier = Modifier
        .fillMaxWidth()
        .padding(start = 20.dp, end = 20.dp)
        .border(1.dp, Color.Gray, shape = RoundedCornerShape(10.dp))
    ) {
        TextField(
            value = inputText,
            onValueChange = {
                inputText = it
            },
            leadingIcon = { Icon(imageVector = Icons.Default.Search, contentDescription = null)},
            placeholder = { Text(text = "쿠팡에서 검색하세요")},
            modifier = Modifier.fillMaxWidth(),
            colors = TextFieldDefaults.textFieldColors(
                containerColor = Color.White,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent
            )
        )
    }

}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    CoupangExTheme {
        CoupangEx()
    }
}