Jetpack Compose에서 BottomSheet 사용 방법 ...

### Jetpack Compose에서 BottomSheet 사용 방법

한복이 이쁘네....feat AI

**Jetpack Compose**는 Android UI를 쉽게 구성할 수 있는 라이브러리입니다. 이 포스트에서는 Jetpack Compose에서 BottomSheet를 구현하는 방법을 알아보겠습니다.

#### BottomSheetScaffold를 사용한 BottomSheet 구현

`BottomSheetScaffold`는 BottomSheet를 하단에 고정하여 사용할 수 있도록 도와줍니다. 아래는 `BottomSheetScaffold`를 사용하여 BottomSheet를 구현하는 예제입니다.

```kotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(color = MaterialTheme.colors.background) {
                    BottomSheetExample()
                }
            }
        }
    }
}

@Composable
fun BottomSheetExample() {
    val scaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = rememberBottomSheetState(BottomSheetValue.Collapsed)
    )
    val coroutineScope = rememberCoroutineScope()

    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        sheetContent = {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "This is a bottom sheet", fontSize = 24.sp)
            }
        },
        sheetPeekHeight = 0.dp
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                coroutineScope.launch {
                    if (scaffoldState.bottomSheetState.isCollapsed) {
                        scaffoldState.bottomSheetState.expand()
                    } else {
                        scaffoldState.bottomSheetState.collapse()
                    }
                }
            }) {
                Text(text = "Toggle Bottom Sheet")
            }
        }
    }
}
```

이 예제에서는 버튼을 클릭하여 BottomSheet를 펼치거나 접을 수 있습니다.

#### ModalBottomSheetLayout을 사용한 Modal Bottom Sheet 구현

`ModalBottomSheetLayout`을 사용하여 Modal Bottom Sheet를 구현할 수도 있습니다. Modal Bottom Sheet는 특정 이벤트에 반응하여 표시되는 시트입니다.

```kotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(color = MaterialTheme.colors.background) {
                    ModalBottomSheetExample()
                }
            }
        }
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ModalBottomSheetExample() {
    val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "This is a modal bottom sheet", fontSize = 24.sp)
                Spacer(modifier = Modifier.height(20.dp))
                Button(onClick = {
                    scope.launch {
                        sheetState.hide()
                    }
                }) {
                    Text("Close Sheet")
                }
            }
        }
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                scope.launch {
                    sheetState.show()
                }
            }) {
                Text("Show Modal Bottom Sheet")
            }
        }
    }
}
```

이 예제에서는 버튼을 클릭하여 모달 시트를 표시하고, 모달 시트 내의 버튼을 클릭하여 시트를 닫을 수 있습니다.

### Windows 11에서 ARM CPU 버전의 AVD 실행

Windows 11에서는 ARM CPU 버전의 Android Virtual Device(AVD)를 구동할 수 있습니다. 이를 위해서는 Windows Subsystem for Android(WSA)를 사용합니다.

#### 필요한 단계

1. **Windows Subsystem for Android (WSA)** 활성화
2. **Android Studio** 설치
3. **ARM 이미지 설치**: Android Studio의 SDK Manager에서 ARM 이미지를 다운로드
4. **AVD 설정**: AVD Manager에서 ARM 이미지를 사용하는 가상 장치 생성
5. **WSA 설정**: Windows 설정에서 Windows Subsystem for Android 활성화
6. **AVD 실행**: Android Studio의 AVD Manager에서 생성한 AVD 실행

이 과정을 통해 Windows 11에서 ARM CPU 버전의 AVD를 구동할 수 있습니다.

---

위 내용은 Jetpack Compose에서 BottomSheet를 구현하는 방법과 Windows 11에서 ARM CPU 버전의 AVD를 실행하는 방법에 대해 다루었습니다. 필요에 따라 각 단계에서 발생할 수 있는 문제를 해결하기 위해 관련 공식 문서를 참조하는 것이 좋습니다.