Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[REFACTOR/#188] 컴포넌트 문서화 및 추가 리팩토링 #189

Merged
merged 12 commits into from
Aug 21, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,15 @@ import com.terning.core.designsystem.component.button.RoundButton
import com.terning.core.designsystem.theme.TerningTheme
import kotlinx.coroutines.launch

/**
* 로그아웃을 할 수 있는 바텀시트입니다.
*
* 로그아웃 버튼과, 취소 버튼으로 이루어져있습니다.
*
* @param modifier 바텀시트에 적용할 Modifier입니다.
* @param onDismiss 취소 버튼 클릭 시, 바텀시트가 닫히면서 호출되는 함수입니다.
* @param onLogoutClick 로그아웃 버튼 클릭 시, 호출되는 콜백 함수입니다.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyPageLogoutBottomSheet(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,15 @@ import com.terning.core.designsystem.component.button.RoundButton
import com.terning.core.designsystem.theme.TerningTheme
import kotlinx.coroutines.launch

/**
* 회원탈퇴를 할 수 있는 바텀시트입니다.
*
* 회원탈퇴 버튼과, 취소 버튼으로 이루어져있습니다.
*
* @param modifier 바텀시트에 적용할 Modifier입니다.
* @param onDismiss 취소 버튼 클릭 시, 바텀시트가 닫히면서 호출되는 함수입니다.
* @param onQuitClick 회원탈퇴 버튼 클릭 시, 호출되는 콜백 함수입니다.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyPageQuitBottomSheet(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ import com.terning.core.designsystem.theme.TerningTheme
import com.terning.core.extension.noRippleClickable
import kotlinx.coroutines.launch

/**
* 회원가입을 할 때 프로필 이미지를 선택할 수 있는 바텀시트입니다.
*
* @param modifier 바텀시트에 적용할 Modifier입니다.
* @param onDismiss 바텀시트가 닫힐 때 호출되는 콜백 함수입니다.
* @param onSaveClick 저장하기 버튼 클릭 시, 호출되는 콜백 함수입니다.
* @param initialSelectedOption 초기에 선택된 이미지를 나타내는 인덱스 값입니다.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SignUpBottomSheet(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@ import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import com.terning.core.designsystem.theme.White

/**
* 기본 바텀시트 함수입니다.
*
* @param content 바텀시트에 표시할 내용을 담은 Composable 함수입니다.
* @param onDismissRequest 바텀시트가 닫히는 요청 시 호출되는 콜백 함수입니다.
* @param sheetState 바텀시트의 상태를 관리하는 SheetState 객체입니다.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TerningBasicBottomSheet(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,26 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.terning.core.R
import com.terning.core.designsystem.theme.Grey400
import com.terning.core.designsystem.theme.TerningPointTheme
import com.terning.core.designsystem.theme.White
import com.terning.core.util.NoRippleTheme

/**
* 취소 기능을 하는 버튼입니다.
*
* @param style 버튼의 텍스트에 적용할 텍스트 스타일입니다.
* @param paddingVertical 버튼 내부 콘텐츠의 수직 패딩 값입니다.
* @param text 버튼에 표시될 문자열의 리소스 ID입니다.
* @param onButtonClick 버튼 클릭 시 호출될 콜백 함수입니다.
* @param modifier 버튼에 적용할 Modifier입니다.
* @param isEnabled 버튼 활성화 여부를 설정할 수 있습니다.
* @param cornerRadius 버튼의 모서리 반경을 설정하는 Dp 값입니다.
*/
@Composable
fun DeleteRoundButton(
style: TextStyle,
Expand Down Expand Up @@ -54,4 +68,18 @@ fun DeleteRoundButton(
)
}
}
}

@Preview(showBackground = true)
@Composable
fun DeleteRoundButtonPreview() {
TerningPointTheme {
DeleteRoundButton(
style = TextStyle(),
paddingVertical = 15.dp,
text = R.string.button_preview,
onButtonClick = {},
cornerRadius = 10.dp
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import androidx.annotation.StringRes
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
Expand All @@ -18,10 +19,13 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.terning.core.R
import com.terning.core.designsystem.theme.Grey400
import com.terning.core.designsystem.theme.TerningMain
import com.terning.core.designsystem.theme.TerningPointTheme
import com.terning.core.designsystem.theme.TerningSub1
import com.terning.core.designsystem.theme.TerningSub3
import com.terning.core.designsystem.theme.TerningSub4
Expand All @@ -30,6 +34,19 @@ import com.terning.core.designsystem.theme.TerningTheme
import com.terning.core.designsystem.theme.White
import com.terning.core.util.NoRippleTheme

/**
* 온보딩 과정에서 필터링을 설정할 때 사용되는 버튼입니다.
*
* 버튼 클릭을 클릭했을 때, 버튼의 배경 색과 텍스트 색상이 바뀝니다.
*
* @param isSelected 버튼이 선택됐는지 여부를 나타냅니다.
* @param text 버튼에 표시될 문자열의 리소스 ID입니다.
* @param cornerRadius 버튼의 모서리 반경을 설정하는 Dp 값입니다.
* @param paddingVertical 버튼 내부 콘텐츠의 수직 패딩 값입니다.
* @param onButtonClick 버튼 클릭 시 호출될 콜백 함수입니다.
* @param isEnabled 버튼 활성화 여부를 설정할 수 있습니다.
* @param modifier 버튼에 적용할 Modifier입니다.
*/
@Composable
fun FilteringButton(
isSelected: Boolean,
Expand Down Expand Up @@ -80,3 +97,26 @@ fun FilteringButton(
}
}
}

@Preview(showBackground = true)
@Composable
fun FilteringButtonPreview() {
TerningPointTheme {
Column {
FilteringButton(
isSelected = true,
text = R.string.button_preview,
cornerRadius = 15.dp,
paddingVertical = 10.dp,
onButtonClick = {}
)
FilteringButton(
isSelected = false,
text = R.string.button_preview,
cornerRadius = 15.dp,
paddingVertical = 10.dp,
onButtonClick = {}
)
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,16 @@ import com.terning.core.R
import com.terning.core.designsystem.theme.TerningPointTheme
import com.terning.core.designsystem.theme.TerningTheme

/**
* 모서리의 둥근 부분이 없는 직사각형 버튼입니다.
*
* @param style 버튼의 텍스트에 적용할 텍스트 스타일입니다.
* @param paddingVertical 버튼 내부 콘텐츠의 수직 패딩 값입니다.
* @param text 버튼에 표시될 문자열의 리소스 ID입니다.
* @param onButtonClick 버튼 클릭 시 호출될 콜백 함수입니다.
* @param modifier 버튼에 적용할 Modifier입니다.
* @param isEnabled 버튼 활성화 여부를 설정할 수 있습니다.
*/
@Composable
fun RectangleButton(
style: TextStyle,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,17 @@ import com.terning.core.R
import com.terning.core.designsystem.theme.TerningPointTheme
import com.terning.core.designsystem.theme.TerningTheme

/**
* 모서리의 둥근 부분을 설정할 수 있는 버튼입니다.
*
* @param style 버튼의 텍스트에 적용할 텍스트 스타일입니다.
* @param paddingVertical 버튼 내부 콘텐츠의 수직 패딩 값입니다.
* @param cornerRadius 버튼의 모서리 반경을 설정하는 Dp 값입니다.
* @param text 버튼에 표시될 문자열의 리소스 ID입니다.
* @param onButtonClick 버튼 클릭 시 호출될 콜백 함수입니다.
* @param modifier 버튼에 적용할 Modifier입니다.
* @param isEnabled 버튼 활성화 여부를 설정할 수 있습니다.
*/
@Composable
fun RoundButton(
style: TextStyle,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,16 @@ private val years =
private val monthsNumber =
(listOf("") + (START_MONTH..END_MONTH).map { it.toString() } + listOf("") + listOf("")).toImmutableList()

/**
* 데이트 피커를 나타냅니다.
*
* 사용자가 원하는 연도와 월을 설정할 수 있습니다.
*
* @param chosenYear 선택된 연도를 나타내는 값입니다.
* @param chosenMonth 선택된 월을 나타내는 값입니다.
* @param onYearChosen 연도가 선택되었을 때 호출되는 콜백 함수입니다.
* @param onMonthChosen 월이 선택되었을 때 호출되는 콜백 함수입니다.
*/
@Composable
fun DatePickerUI(
chosenYear: Int,
Expand All @@ -60,6 +70,14 @@ fun DatePickerUI(
}
}

/**
* 연도와 월을 선택할 수 있는 두 개의 피커를 제공합니다.
*
* @param chosenYear 선택된 연도를 나타내는 값입니다.
* @param chosenMonth 선택된 월을 나타내는 값입니다.
* @param onYearChosen 연도가 선택되었을 때 호출되는 콜백 함수입니다.
* @param onMonthChosen 월이 선택되었을 때 호출되는 콜백 함수입니다.
*/
@Composable
fun DateSelectionSection(
chosenYear: Int,
Expand Down Expand Up @@ -87,6 +105,15 @@ fun DateSelectionSection(
}
}

/**
* 사용자가 스크롤을 통해 연도 또는 월을 선택할 수 있는 피커입니다.
*
* @param items 선택 가능한 항목들의 리스트입니다. (연도 또는 월)
* @param firstIndex 초기 선택된 항목의 인덱스입니다. (연도 또는 월)
* @param onItemSelected 항목이 선택되었을 때 호출되는 콜백 함수입니다.
* @param modifier 레이아웃, 동작 등을 수정할 수 있는 Modifier 옵션입니다.
* @param isYear 이 피커가 연도를 선택하는 것인지에 대한 여부입니다.
*/
@Composable
fun DateItemsPicker(
items: List<String>,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import androidx.compose.ui.tooling.preview.Preview
import com.terning.core.R
import com.terning.core.designsystem.theme.TerningPointTheme

/**
* contentDescription을 사용하지 않고 Image를 편리하게 사용할 수 있는 함수입니다.
*
* @param painter 이미지 리소스 ID입니다.
* @param modifier Image의 Modifier입니다.
*/
@Composable
fun TerningImage(
Comment on lines +12 to 19
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

contentDescription� 없이 작성하기 좋겠당..!

painter: Int,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ 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 androidx.navigation.NavController
import com.terning.core.designsystem.component.button.RectangleButton
import com.terning.core.designsystem.component.image.TerningImage
import com.terning.core.designsystem.component.topappbar.BackButtonTopAppBar
Expand All @@ -24,14 +23,12 @@ import com.terning.core.designsystem.theme.TerningPointTheme
import com.terning.core.designsystem.theme.TerningTheme
import com.terning.feature.R
import com.terning.feature.filtering.filtering.component.StatusOneRadioGroup
import com.terning.feature.filtering.filtering.navigation.navigateFilteringTwo
import com.terning.feature.main.MainNavigator
import com.terning.feature.main.rememberMainNavigator

@Composable
fun FilteringOneScreen(
name: String,
navController: NavController,
onNextClick: (Int) -> Unit,
navigateUp: () -> Unit,
modifier: Modifier = Modifier,
onButtonClick: (Int) -> Unit = {},
) {
Expand All @@ -43,7 +40,7 @@ fun FilteringOneScreen(
modifier = modifier
) {
BackButtonTopAppBar(
onBackButtonClick = { navController.navigateUp() }
onBackButtonClick = { navigateUp() }
)
Column(
modifier = Modifier.fillMaxSize()
Expand Down Expand Up @@ -99,7 +96,7 @@ fun FilteringOneScreen(
style = TerningTheme.typography.button0,
paddingVertical = 20.dp,
text = R.string.filtering_button,
onButtonClick = { navController.navigateFilteringTwo(grade) },
onButtonClick = { onNextClick(grade) },
modifier = modifier.padding(bottom = 12.dp),
isEnabled = isButtonValid.value
)
Expand All @@ -110,12 +107,12 @@ fun FilteringOneScreen(
@Preview(showBackground = true)
@Composable
fun FilteringOneScreenPreview() {
val navigator: MainNavigator = rememberMainNavigator()
TerningPointTheme {
FilteringOneScreen(
name = "터닝이",
navController = navigator.navController,
onButtonClick = {}
onButtonClick = {},
onNextClick = {},
navigateUp = {}
)
}
}
Loading
Loading