[Feature] 콜밴 리스트 BottomSheet 및 FAB ui 구현

feature/callvan/src/main/java/in/koreatech/koin/feature/callvan/enums/ConfirmType.kt

@@ -0,0 +1,18 @@
+package `in`.koreatech.koin.feature.callvan.enums
+
+enum class ConfirmType {
+    JOIN,
+    CANCEL_JOIN,
+    CLOSE,
+    REOPEN;
+
+    companion object {
+        fun from(state: CallvanRouteState): ConfirmType? = when (state) {
+            CallvanRouteState.DEFAULT -> JOIN
+            CallvanRouteState.JOINED -> CANCEL_JOIN
+            CallvanRouteState.OWNER_ACTIVE -> CLOSE
+            CallvanRouteState.OWNER_CLOSED -> REOPEN
+            CallvanRouteState.CLOSED -> null
+        }
+    }
+}

feature/callvan/src/main/java/in/koreatech/koin/feature/callvan/ui/list/component/CallvanFAB.kt

@@ -0,0 +1,81 @@
+package `in`.koreatech.koin.feature.callvan.ui.list.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+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.vector.ImageVector
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import `in`.koreatech.koin.core.designsystem.noRippleClickable
+import `in`.koreatech.koin.core.designsystem.theme.KoinTheme
+import `in`.koreatech.koin.core.designsystem.theme.RebrandKoinTheme
+import `in`.koreatech.koin.feature.callvan.R
+import `in`.koreatech.koin.feature.callvan.ui.list.model.CallvanFABDefaults
+
+@Composable
+fun CallvanFAB(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    windowInsets: WindowInsets = CallvanFABDefaults.windowInsets
+) {
+    Box(
+        modifier = modifier
+            .windowInsetsPadding(windowInsets)
+            .wrapContentSize(Alignment.BottomEnd)
+    ) {
+        Box(
+            modifier = Modifier
+                .border(
+                    width = 1.dp,
+                    color = RebrandKoinTheme.colors.primary400,
+                    shape = RoundedCornerShape(50)
+                )
+                .background(
+                    color = KoinTheme.colors.neutral50,
+                    shape = RoundedCornerShape(50)
+                )
+                .noRippleClickable(onClick = onClick)
+                .padding(vertical = 8.dp, horizontal = 12.dp)
+        ) {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                Icon(
+                    imageVector = ImageVector.vectorResource(R.drawable.ic_write_fab),
+                    contentDescription = stringResource(R.string.callvan_fab_write_btn),
+                    tint = Color.Unspecified
+                )
+                Spacer(
+                    modifier = Modifier.width(4.dp)
+                )
+                Text(
+                    text = stringResource(R.string.callvan_fab_write_btn),
+                    style = KoinTheme.typography.medium16,
+                    color = RebrandKoinTheme.colors.primary600
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun CallvanFABPreview() {
+    KoinTheme {
+        CallvanFAB(onClick = {})
+    }
+}

feature/callvan/src/main/java/in/koreatech/koin/feature/callvan/ui/list/component/CompleteBottomSheet.kt

@@ -0,0 +1,31 @@
+package `in`.koreatech.koin.feature.callvan.ui.list.component
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import `in`.koreatech.koin.core.designsystem.theme.RebrandKoinTheme
+import `in`.koreatech.koin.feature.callvan.R
+import `in`.koreatech.koin.feature.callvan.ui.component.CallvanConfirmBottomSheet
+
+@Composable
+fun CompleteBottomSheet(
+    onConfirm: () -> Unit,
+    onDismiss: () -> Unit
+) {
+    CallvanConfirmBottomSheet(
+        title = stringResource(R.string.callvan_complete_title),
+        description = stringResource(R.string.callvan_complete_description),
+        confirmText = stringResource(R.string.callvan_confirm_positive),
+        cancelText = stringResource(R.string.callvan_confirm_negative),
+        onConfirm = onConfirm,
+        onDismiss = onDismiss
+    )
+}
+
+@Preview
+@Composable
+private fun CompleteBottomSheetPreview() {
+    RebrandKoinTheme {
+        CompleteBottomSheet(onConfirm = {}, onDismiss = {})
+    }
+}

feature/callvan/src/main/java/in/koreatech/koin/feature/callvan/ui/list/component/ConfirmBottomSheet.kt

@@ -0,0 +1,127 @@
+package `in`.koreatech.koin.feature.callvan.ui.list.component
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import `in`.koreatech.koin.core.designsystem.theme.KoinTheme
+import `in`.koreatech.koin.core.designsystem.theme.RebrandKoinTheme
+import `in`.koreatech.koin.feature.callvan.R
+import `in`.koreatech.koin.feature.callvan.enums.ConfirmType
+import `in`.koreatech.koin.feature.callvan.ui.component.CallvanBottomSheet
+
+@Composable
+fun ConfirmBottomSheet(
+    confirmType: ConfirmType,
+    onConfirm: () -> Unit,
+    onDismiss: () -> Unit,
+    title: String? = null
+) {
+    val resolvedTitle = title ?: when (confirmType) {
+        ConfirmType.JOIN -> stringResource(R.string.callvan_confirm_join_title)
+        ConfirmType.CANCEL_JOIN -> stringResource(R.string.callvan_confirm_cancel_title)
+        ConfirmType.CLOSE -> stringResource(R.string.callvan_confirm_close_title)
+        ConfirmType.REOPEN -> stringResource(R.string.callvan_confirm_reopen_title)
+    }
+    CallvanBottomSheet(
+        title = resolvedTitle,
+        onDismiss = onDismiss,
+        showCloseButton = false
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 32.dp, end = 32.dp, top = 16.dp, bottom = 12.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            Button(
+                onClick = onConfirm,
+                modifier = Modifier.fillMaxWidth(),
+                shape = KoinTheme.shapes.small,
+                contentPadding = PaddingValues(horizontal = 16.dp, vertical = 10.dp),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = RebrandKoinTheme.colors.primary500
+                )
+            ) {
+                Text(
+                    text = stringResource(R.string.callvan_confirm_positive),
+                    style = KoinTheme.typography.medium16
+                )
+            }
+            OutlinedButton(
+                onClick = onDismiss,
+                modifier = Modifier.fillMaxWidth(),
+                shape = KoinTheme.shapes.small,
+                contentPadding = PaddingValues(horizontal = 16.dp, vertical = 10.dp),
+                border = BorderStroke(1.dp, KoinTheme.colors.neutral300),
+                colors = ButtonDefaults.outlinedButtonColors(
+                    contentColor = KoinTheme.colors.neutral600
+                )
+            ) {
+                Text(
+                    text = stringResource(R.string.callvan_confirm_negative),
+                    style = KoinTheme.typography.medium16
+                )
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ConfirmBottomSheetJoinPreview() {
+    RebrandKoinTheme {
+        ConfirmBottomSheet(
+            confirmType = ConfirmType.JOIN,
+            onConfirm = {},
+            onDismiss = {}
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ConfirmBottomSheetCancelJoinPreview() {
+    RebrandKoinTheme {
+        ConfirmBottomSheet(
+            confirmType = ConfirmType.CANCEL_JOIN,
+            onConfirm = {},
+            onDismiss = {}
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ConfirmBottomSheetClosePreview() {
+    RebrandKoinTheme {
+        ConfirmBottomSheet(
+            confirmType = ConfirmType.CLOSE,
+            onConfirm = {},
+            onDismiss = {}
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ConfirmBottomSheetReopenPreview() {
+    RebrandKoinTheme {
+        ConfirmBottomSheet(
+            confirmType = ConfirmType.REOPEN,
+            onConfirm = {},
+            onDismiss = {}
+        )
+    }
+}

feature/callvan/src/main/java/in/koreatech/koin/feature/callvan/ui/list/component/LoginBottomSheet.kt

@@ -0,0 +1,79 @@
+package `in`.koreatech.koin.feature.callvan.ui.list.component
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import `in`.koreatech.koin.core.designsystem.theme.KoinTheme
+import `in`.koreatech.koin.core.designsystem.theme.RebrandKoinTheme
+import `in`.koreatech.koin.feature.callvan.R
+import `in`.koreatech.koin.feature.callvan.ui.component.CallvanBottomSheet
+
+@Composable
+fun LoginBottomSheet(
+    onLogin: () -> Unit,
+    onDismiss: () -> Unit
+) {
+    CallvanBottomSheet(
+        title = stringResource(R.string.callvan_login_title),
+        onDismiss = onDismiss,
+        showCloseButton = false
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(start = 32.dp, end = 32.dp, top = 16.dp, bottom = 12.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp)
+        ) {
+            Button(
+                onClick = onLogin,
+                modifier = Modifier.fillMaxWidth(),
+                shape = KoinTheme.shapes.small,
+                contentPadding = PaddingValues(horizontal = 16.dp, vertical = 10.dp),
+                colors = ButtonDefaults.buttonColors(
+                    containerColor = RebrandKoinTheme.colors.primary500
+                )
+            ) {
+                Text(
+                    text = stringResource(R.string.callvan_login_login),
+                    style = KoinTheme.typography.medium16
+                )
+            }
+            OutlinedButton(
+                onClick = onDismiss,
+                modifier = Modifier.fillMaxWidth(),
+                shape = KoinTheme.shapes.small,
+                contentPadding = PaddingValues(horizontal = 16.dp, vertical = 10.dp),
+                border = BorderStroke(1.dp, KoinTheme.colors.neutral300),
+                colors = ButtonDefaults.outlinedButtonColors(
+                    contentColor = KoinTheme.colors.neutral600
+                )
+            ) {
+                Text(
+                    text = stringResource(R.string.callvan_login_close),
+                    style = KoinTheme.typography.medium16
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun LoginBottomSheetPreview() {
+    LoginBottomSheet(
+        onLogin = {},
+        onDismiss = {}
+    )
+}

feature/callvan/src/main/java/in/koreatech/koin/feature/callvan/ui/list/model/CallvanFABDefaults.kt

@@ -0,0 +1,16 @@
+package `in`.koreatech.koin.feature.callvan.ui.list.model
+
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.WindowInsetsSides
+import androidx.compose.foundation.layout.only
+import androidx.compose.foundation.layout.systemBars
+import androidx.compose.runtime.Composable
+
+object CallvanFABDefaults {
+    val windowInsets: WindowInsets
+        @Composable
+        get() =
+            WindowInsets.systemBars.only(
+                WindowInsetsSides.Horizontal + WindowInsetsSides.Bottom
+            )
+}

feature/callvan/src/main/res/drawable/ic_write_fab.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:pathData="M5.553,5.658C5.802,5.16 6.185,4.741 6.659,4.448C7.133,4.155 7.679,4 8.236,4H15.764C16.321,4 16.867,4.155 17.341,4.448C17.815,4.741 18.198,5.16 18.447,5.658L19.833,8.429C20.077,8.329 20.317,8.221 20.553,8.105C20.79,7.986 21.065,7.967 21.317,8.051C21.569,8.135 21.776,8.316 21.895,8.553C22.014,8.79 22.033,9.065 21.949,9.317C21.865,9.568 21.684,9.776 21.447,9.895C21.207,10.002 20.965,10.106 20.722,10.207L21.683,12.13C21.892,12.547 22,13.007 22,13.473V16C22,16.422 21.911,16.839 21.739,17.225C21.566,17.61 21.315,17.955 21,18.236V19.5C21,19.898 20.842,20.279 20.561,20.561C20.279,20.842 19.898,21 19.5,21C19.102,21 18.721,20.842 18.439,20.561C18.158,20.279 18,19.898 18,19.5V19H6V19.5C6,19.898 5.842,20.279 5.561,20.561C5.279,20.842 4.898,21 4.5,21C4.102,21 3.721,20.842 3.439,20.561C3.158,20.279 3,19.898 3,19.5V18.236C2.386,17.686 2,16.888 2,16V13.472C2,13.006 2.109,12.547 2.317,12.131L3.27,10.223C3.029,10.122 2.79,10.013 2.555,9.896C2.319,9.776 2.139,9.568 2.055,9.317C1.971,9.065 1.989,8.791 2.105,8.553C2.164,8.435 2.245,8.331 2.344,8.244C2.443,8.158 2.559,8.092 2.683,8.051C2.808,8.009 2.939,7.993 3.07,8.002C3.202,8.011 3.329,8.046 3.447,8.105C3.684,8.222 3.924,8.33 4.167,8.429L5.553,5.658Z"
+        android:strokeAlpha="0.3"
+        android:fillColor="#B611F5"
+        android:fillType="evenOdd"
+        android:fillAlpha="0.3"/>
+    <path
+        android:pathData="M7.342,6.553C7.425,6.387 7.553,6.247 7.71,6.15C7.868,6.052 8.05,6 8.236,6H15.764C16.143,6 16.489,6.214 16.658,6.553L17.928,9.091C16.38,9.555 14.294,10 12,10C9.706,10 7.62,9.555 6.073,9.09L7.342,6.553ZM16.5,16C16.898,16 17.279,15.842 17.561,15.561C17.842,15.279 18,14.898 18,14.5C18,14.102 17.842,13.721 17.561,13.439C17.279,13.158 16.898,13 16.5,13C16.102,13 15.721,13.158 15.439,13.439C15.158,13.721 15,14.102 15,14.5C15,14.898 15.158,15.279 15.439,15.561C15.721,15.842 16.102,16 16.5,16ZM9,14.5C9,14.898 8.842,15.279 8.561,15.561C8.279,15.842 7.898,16 7.5,16C7.102,16 6.721,15.842 6.439,15.561C6.158,15.279 6,14.898 6,14.5C6,14.102 6.158,13.721 6.439,13.439C6.721,13.158 7.102,13 7.5,13C7.898,13 8.279,13.158 8.561,13.439C8.842,13.721 9,14.102 9,14.5Z"
+        android:fillColor="#B611F5"
+        android:fillType="evenOdd"/>
+</vector>

feature/callvan/src/main/res/values/strings.xml

@@ -95,5 +95,18 @@
     <string name="callvan_btn_complete">이용완료</string>
     <string name="ic_callvan_chat">채팅</string>
     <string name="ic_callvan_call">전화하기</string>
+
+    <string name="callvan_login_title">콜밴팟에 참여하려면 로그인이 필요해요.</string>
+    <string name="callvan_login_login">로그인하기</string>
+    <string name="callvan_login_close">닫기</string>
+    <string name="callvan_confirm_join_title">해당 콜밴팟에 참여할까요?</string>
+    <string name="callvan_confirm_cancel_title">해당 콜밴팟 참여를 취소할까요?</string>
+    <string name="callvan_confirm_close_title">해당 콜밴팟 모집을 마감할까요?</string>
+    <string name="callvan_confirm_reopen_title">해당 콜밴팟을 다시 모집할까요?</string>
+    <string name="callvan_confirm_positive">예</string>
+    <string name="callvan_confirm_negative">아니요</string>
+    <string name="callvan_complete_title">이용 완료 상태로 변경할까요?</string>
+    <string name="callvan_complete_description">• 콜밴 이용(탑승, 정산)이 모두 완료된 뒤 눌러야 합니다.\n• 완료 시 대화 내역이 삭제되며, 되돌릴 수 없습니다.</string>
+    <string name="callvan_fab_write_btn">모집하기</string>
     <string name="callvan_list_separator">|</string>
 </resources>