[ADD/#27] BottomSheet / 컴포넌트 구현

core/build.gradle.kts

@@ -44,8 +44,9 @@ dependencies {
     // Kotlin
     implementation(libs.kotlin)
 
-    // Lifecycle Ktx
+    // AndroidXDependencies
     implementation(libs.androidx.lifecycle.runtime.ktx)
+    implementation(libs.androidx.compose.saveable)
 
     // Hilt
     implementation(libs.hilt.android)

core/src/main/java/com/terning/core/designsystem/component/bottomsheet/TerningBasicBottomSheet.kt

@@ -0,0 +1,28 @@
+package com.terning.core.designsystem.component.bottomsheet
+
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TerningBasicBottomSheet(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+    onDismissRequest: () -> Unit
+) {
+    val sheetState = rememberModalBottomSheetState()
+
+    ModalBottomSheet(
+        onDismissRequest = {
+            onDismissRequest()
+        },
+        sheetState = sheetState,
+        modifier = modifier.navigationBarsPadding()
+    ) {
+        content()
+    }
+}

core/src/main/java/com/terning/core/designsystem/component/button/TerningBasicButton.kt

@@ -3,6 +3,7 @@ package com.terning.core.designsystem.component.button
 import androidx.annotation.StringRes
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.ripple.LocalRippleTheme
@@ -46,6 +47,7 @@ fun TerningBasicButton(
 
     CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
         Button(
+            contentPadding = PaddingValues(paddingVertical),
             modifier = modifier.fillMaxWidth(),
             interactionSource = interactionSource,
             enabled = isEnabled,
@@ -61,7 +63,6 @@ fun TerningBasicButton(
             Text(
                 text = stringResource(id = text),
                 style = style,
-                modifier = modifier.padding(vertical = paddingVertical)
             )
         }
     }

core/src/main/java/com/terning/core/designsystem/theme/Theme.kt

@@ -9,7 +9,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
 
 private val LightColorScheme = lightColorScheme(
-    primary = TerningMain,
+    primary = White,
 )
 
 private val LocalTerningTypography = staticCompositionLocalOf<TerningTypography> {

data/src/main/java/com/terning/data/dto/BaseResponse.kt

@@ -7,10 +7,8 @@ import kotlinx.serialization.Serializable
 data class BaseResponse<T>(
     @SerialName("status")
     val status: Int,
-    @SerialName("code")
-    val code: String,
     @SerialName("message")
     val message: String,
-    @SerialName("data")
-    val data: T,
+    @SerialName("result")
+    val result: T,
 )

feature/build.gradle.kts

@@ -69,6 +69,7 @@ dependencies {
     implementation(libs.androidx.workManager)
     implementation(libs.hilt.compiler)
     implementation(libs.androidx.lifecycle.runtime.compose.android)
+    implementation(libs.androidx.compose.saveable)
 
     // KspDependencies
     ksp(libs.hilt.android.compiler)

feature/src/main/java/com/terning/feature/onboarding/signin/SignInRoute.kt

@@ -56,6 +56,7 @@ fun SignInScreen(
     modifier: Modifier = Modifier,
     onSignInClick: () -> Unit = {},
 ) {
+
     Column(
         modifier = modifier
             .wrapContentHeight()
@@ -70,7 +71,9 @@ fun SignInScreen(
         )
         KakaoButton(
             title = stringResource(id = R.string.sign_in_kakao_button),
-            onSignInClick = { onSignInClick() },
+            onSignInClick = {
+                onSignInClick()
+            },
             modifier = modifier.padding(horizontal = 20.dp)
         )
     }

feature/src/main/java/com/terning/feature/onboarding/signup/SignUpViewModel.kt

@@ -0,0 +1,10 @@
+package com.terning.feature.onboarding.signup
+
+import androidx.lifecycle.ViewModel
+import dagger.hilt.android.lifecycle.HiltViewModel
+import javax.inject.Inject
+
+@HiltViewModel
+class SignUpViewModel @Inject constructor() : ViewModel(){
+
+}

feature/src/main/java/com/terning/feature/onboarding/signup/component/SignUpBottomSheet.kt

@@ -0,0 +1,100 @@
+package com.terning.feature.onboarding.signup.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.terning.core.designsystem.component.bottomsheet.TerningBasicBottomSheet
+import com.terning.core.designsystem.component.button.RoundButton
+import com.terning.core.designsystem.theme.TerningTheme
+import com.terning.core.extension.noRippleClickable
+import com.terning.feature.R
+
+@Composable
+fun SignUpBottomSheet(
+    modifier: Modifier = Modifier,
+    onDismiss: () -> Unit,
+    onStartDialog: () -> Unit
+) {
+    TerningBasicBottomSheet(
+        content = {
+            Column {
+                Text(
+                    text = stringResource(id = R.string.sign_up_bottom_sheet_title),
+                    style = TerningTheme.typography.title2,
+                    modifier = modifier
+                        .padding(
+                            start = 28.dp,
+                            bottom = 25.dp
+                        ),
+                )
+                RadioButtonGroup()
+                Spacer(modifier = modifier.padding(bottom = 24.dp))
+                RoundButton(
+                    style = TerningTheme.typography.button0,
+                    paddingVertical = 19.dp,
+                    cornerRadius = 10.dp,
+                    text = R.string.sign_up_dialog_start,
+                    onButtonClick = { onStartDialog() },
+                    modifier = modifier.padding(horizontal = 24.dp)
+                )
+                Spacer(modifier = modifier.padding(bottom = 15.dp))
+            }
+        },
+        onDismissRequest = { onDismiss() }
+    )
+}
+
+@Composable
+fun RadioButtonGroup(
+    modifier: Modifier = Modifier
+) {
+    val options = listOf(
+        R.drawable.ic_character1,
+        R.drawable.ic_character2,
+        R.drawable.ic_character3,
+        R.drawable.ic_character4,
+        R.drawable.ic_character5,
+        R.drawable.ic_character6
+    )
+
+    var selectedOption by rememberSaveable { mutableIntStateOf(options[0]) }
+
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(3),
+        verticalArrangement = Arrangement.spacedBy(20.dp),
+        horizontalArrangement = Arrangement.spacedBy(24.dp),
+        modifier = modifier
+            .padding(horizontal = 42.dp)
+    ) {
+        items(options) { option ->
+            Image(
+                painter = painterResource(
+                    id = if (option == selectedOption) R.drawable.ic_selected_character
+                    else option
+                ),
+                contentDescription = stringResource(id = R.string.sign_up_bottom_sheet_description),
+                modifier = modifier
+                    .aspectRatio(1f)
+                    .noRippleClickable {
+                        selectedOption = option
+                    }
+            )
+        }
+    }
+}

feature/src/main/res/drawable/ic_character1.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="76dp"
+    android:height="76dp"
+    android:viewportWidth="76"
+    android:viewportHeight="76">
+  <path
+      android:pathData="M38,38m-38,0a38,38 0,1 1,76 0a38,38 0,1 1,-76 0"
+      android:fillColor="#DDDDDD"/>
+</vector>

feature/src/main/res/drawable/ic_character2.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="76dp"
+    android:height="76dp"
+    android:viewportWidth="76"
+    android:viewportHeight="76">
+  <path
+      android:pathData="M38,38m-38,0a38,38 0,1 1,76 0a38,38 0,1 1,-76 0"
+      android:fillColor="#DDDDDD"/>
+</vector>

feature/src/main/res/drawable/ic_character3.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="76dp"
+    android:height="76dp"
+    android:viewportWidth="76"
+    android:viewportHeight="76">
+  <path
+      android:pathData="M38,38m-38,0a38,38 0,1 1,76 0a38,38 0,1 1,-76 0"
+      android:fillColor="#DDDDDD"/>
+</vector>

feature/src/main/res/drawable/ic_character4.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="76dp"
+    android:height="76dp"
+    android:viewportWidth="76"
+    android:viewportHeight="76">
+  <path
+      android:pathData="M38,38m-38,0a38,38 0,1 1,76 0a38,38 0,1 1,-76 0"
+      android:fillColor="#DDDDDD"/>
+</vector>

feature/src/main/res/drawable/ic_character5.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="76dp"
+    android:height="76dp"
+    android:viewportWidth="76"
+    android:viewportHeight="76">
+  <path
+      android:pathData="M38,38m-38,0a38,38 0,1 1,76 0a38,38 0,1 1,-76 0"
+      android:fillColor="#DDDDDD"/>
+</vector>

feature/src/main/res/drawable/ic_character6.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="76dp"
+    android:height="76dp"
+    android:viewportWidth="76"
+    android:viewportHeight="76">
+  <path
+      android:pathData="M38,38m-38,0a38,38 0,1 1,76 0a38,38 0,1 1,-76 0"
+      android:fillColor="#DDDDDD"/>
+</vector>

feature/src/main/res/drawable/ic_selected_character.xml

@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="86dp"
+    android:height="86dp"
+    android:viewportWidth="86"
+    android:viewportHeight="86">
+  <path
+      android:pathData="M43,43m-38,0a38,38 0,1 1,76 0a38,38 0,1 1,-76 0"
+      android:fillColor="#DDDDDD"/>
+  <path
+      android:pathData="M42.998,43m-41.533,0a41.533,41.533 0,1 1,83.067 0a41.533,41.533 0,1 1,-83.067 0"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#1EAC61"/>
+</vector>

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

@@ -5,6 +5,7 @@
     <string name="server_success">서버통신 성공</string>
     <string name="server_failure">서버통신 실패</string>
 
+    <!--bottom_navigation-->
     <string name="bottom_nav_home">홈</string>
     <string name="bottom_nav_calendar">캘린더</string>
     <string name="bottom_nav_search">탐색</string>
@@ -15,16 +16,22 @@
     <string name="sign_in_kakao_login_fail">카카오톡 로그인에 실패했습니다</string>
     <string name="sign_in_kakao_cancel">로그인을 취소하였습니다</string>
 
-    <!--    Profile-->
+    <!--sign_up-->
+    <string name="sign_up_bottom_sheet_title">프로필 이미지 선택</string>
+    <string name="sign_up_bottom_sheet_description">회원가입 바텀시트</string>
+    <string name="sign_up_dialog_start">저장하기</string>
+
+    <!--Profile-->
     <string name="profile_text_field_hint">이름을 입력해주세요</string>
     <string name="profile_text_field_helper">12자리 이내, 문자/숫자 가능, 특수문자/기호 입력불가</string>
     <string name="profile_text_field_warning">이름에 특수문자는 입력할 수 없어요</string>
     <string name="profile_text_field_check">이용 가능한 이름이에요</string>
 
-    <!--    Search-->
+    <!--Search-->
     <string name="search_text_field_hint">관심있는 인턴 공고 키워드를 검색해보세요</string>
 
 
+    <!--calendar-->
     <string name="calendar_text_sunday">일</string>
     <string name="calendar_text_monday">월</string>
     <string name="calendar_text_tuesday">화</string>

gradle/libs.versions.toml

@@ -26,6 +26,8 @@ androidxComposeBom = "2024.04.01"
 androidxComposeCompiler = "1.5.14"
 androidxComposeMaterial3 = "1.2.1"
 composeNavigation = "2.8.0-beta04"
+composeSavable = "1.4.3"
+composeFlowRow = "0.30.0"
 
 ## Hilt
 hilt = "2.48.1"
@@ -100,6 +102,7 @@ androidx-compose-ui-test = { group = "androidx.compose.ui", name = "ui-test-juni
 androidx-compose-ui-testManifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
 androidx-compose-navigation = { group = "androidx.navigation", name = "navigation-compose", version.ref = "composeNavigation" }
 androidx-compose-navigation-test = { group = "androidx.navigation", name = "navigation-testing", version.ref = "composeNavigation" }
+androidx-compose-saveable = {group = "androidx.compose.runtime", name = "runtime-saveable", version.ref =  "composeSavable"}
 compose-compiler-gradle-plugin = { module = "org.jetbrains.kotlin:compose-compiler-gradle-plugin", version.ref = "kotlin" }
 
 androidx-ui = { group = "androidx.compose.ui", name = "ui" }