diff --git a/app/src/main/java/org/sopt/dateroad/presentation/type/MyPageMenuType.kt b/app/src/main/java/org/sopt/dateroad/presentation/type/MyPageMenuType.kt new file mode 100644 index 00000000..b09715c9 --- /dev/null +++ b/app/src/main/java/org/sopt/dateroad/presentation/type/MyPageMenuType.kt @@ -0,0 +1,23 @@ +package org.sopt.dateroad.presentation.type + +import androidx.annotation.DrawableRes +import androidx.annotation.StringRes +import org.sopt.dateroad.R + +enum class MyPageMenuType( + @StringRes val titleRes: Int, + @DrawableRes val iconRes: Int = R.drawable.ic_my_page_arrow +) { + FIRST( + titleRes = R.string.my_page_menu_my_enroll_course + ), + SECOND( + titleRes = R.string.my_page_menu_point_guide + ), + THIRD( + titleRes = R.string.my_page_menu_question + ), + FOURTH( + titleRes = R.string.my_page_menu_logout + ) +} diff --git a/app/src/main/java/org/sopt/dateroad/presentation/type/MyPagePointInfoType.kt b/app/src/main/java/org/sopt/dateroad/presentation/type/MyPagePointInfoType.kt new file mode 100644 index 00000000..9df191a0 --- /dev/null +++ b/app/src/main/java/org/sopt/dateroad/presentation/type/MyPagePointInfoType.kt @@ -0,0 +1,29 @@ +package org.sopt.dateroad.presentation.type + +import androidx.annotation.DrawableRes +import androidx.annotation.StringRes +import org.sopt.dateroad.R + +enum class MyPagePointInfoType( + @StringRes val titleRes: Int, + @StringRes val descriptionRes: Int, + @DrawableRes val imageRes: Int = R.drawable.img_my_page_point_info + +) { + FIRST( + titleRes = R.string.point_system_first_title, + descriptionRes = R.string.point_system_first_description + ), + SECOND( + titleRes = R.string.point_system_second_title, + descriptionRes = R.string.point_system_second_description + ), + THIRD( + titleRes = R.string.point_system_third_title, + descriptionRes = R.string.point_system_third_description + ), + FOURTH( + titleRes = R.string.point_system_fourth_title, + descriptionRes = R.string.point_system_fourth_description + ) +} diff --git a/app/src/main/java/org/sopt/dateroad/presentation/ui/component/mypage/DateRoadMyPageButton.kt b/app/src/main/java/org/sopt/dateroad/presentation/ui/component/mypage/DateRoadMyPageButton.kt new file mode 100644 index 00000000..293e3124 --- /dev/null +++ b/app/src/main/java/org/sopt/dateroad/presentation/ui/component/mypage/DateRoadMyPageButton.kt @@ -0,0 +1,58 @@ +package org.sopt.dateroad.presentation.ui.component.mypage + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +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.platform.LocalContext +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import org.sopt.dateroad.presentation.type.MyPageMenuType +import org.sopt.dateroad.ui.theme.DateRoadTheme + +@Composable +fun DateRoadMyPageButton(myPageMenuType: MyPageMenuType, onClick: () -> Unit = {}) { + Row( + modifier = Modifier + .padding(top = 19.dp, bottom = 20.dp) + .fillMaxWidth() + .clickable(onClick = onClick), + verticalAlignment = Alignment.CenterVertically + ) { + Text(text = stringResource(id = myPageMenuType.titleRes), style = DateRoadTheme.typography.bodySemi15, color = DateRoadTheme.colors.black, modifier = Modifier.weight(1f)) + Spacer(modifier = Modifier.width(20.dp)) + Icon(painter = painterResource(id = myPageMenuType.iconRes), contentDescription = null) + } +} + +@Preview +@Composable +fun DateRoadMyPageButtonPreview() { + val context = LocalContext.current + Column( + modifier = Modifier + .fillMaxSize() + .background(DateRoadTheme.colors.white) + ) { + DateRoadMyPageButton(MyPageMenuType.FIRST, onClick = { + }) + DateRoadMyPageButton(MyPageMenuType.SECOND, onClick = { + }) + DateRoadMyPageButton(MyPageMenuType.THIRD, onClick = { + }) + DateRoadMyPageButton(MyPageMenuType.FOURTH, onClick = { + }) + } +} diff --git a/app/src/main/java/org/sopt/dateroad/presentation/ui/component/mypage/DateRoadMyPagePointInfo.kt b/app/src/main/java/org/sopt/dateroad/presentation/ui/component/mypage/DateRoadMyPagePointInfo.kt new file mode 100644 index 00000000..3f854d4e --- /dev/null +++ b/app/src/main/java/org/sopt/dateroad/presentation/ui/component/mypage/DateRoadMyPagePointInfo.kt @@ -0,0 +1,72 @@ +package org.sopt.dateroad.presentation.ui.component.mypage + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import org.sopt.dateroad.presentation.type.MyPagePointInfoType +import org.sopt.dateroad.ui.theme.DateRoadTheme + +@Composable +fun DateRoadMyPagePointInfo(myPagePointInfoType: MyPagePointInfoType) { + Row( + modifier = Modifier + .fillMaxWidth() + .clip(RoundedCornerShape(14.dp)) + .background(DateRoadTheme.colors.gray100) + .padding(14.dp), + verticalAlignment = Alignment.CenterVertically // Aligns items vertically centered + ) { + Image(painter = painterResource(id = myPagePointInfoType.imageRes), contentDescription = null) + Spacer(modifier = Modifier.width(10.dp)) + Column { + Text( + text = stringResource(id = myPagePointInfoType.titleRes), + style = DateRoadTheme.typography.bodyBold15, + modifier = Modifier.fillMaxWidth() + ) + Spacer(modifier = Modifier.height(10.dp)) + Text( + text = stringResource(id = myPagePointInfoType.descriptionRes), + color = DateRoadTheme.colors.gray500, + style = DateRoadTheme.typography.bodyMed13, + modifier = Modifier.fillMaxWidth() + ) + } + } +} + +@Preview +@Composable +fun DateRoadMyPagePointInfoPreview() { + Column( + modifier = Modifier + .fillMaxSize() + .background(DateRoadTheme.colors.white) + .padding(horizontal = 16.dp) + ) { + DateRoadMyPagePointInfo(myPagePointInfoType = MyPagePointInfoType.FIRST) + Spacer(modifier = Modifier.height(16.dp)) + DateRoadMyPagePointInfo(myPagePointInfoType = MyPagePointInfoType.SECOND) + Spacer(modifier = Modifier.height(16.dp)) + DateRoadMyPagePointInfo(myPagePointInfoType = MyPagePointInfoType.THIRD) + Spacer(modifier = Modifier.height(16.dp)) + DateRoadMyPagePointInfo(myPagePointInfoType = MyPagePointInfoType.FOURTH) + } +} diff --git a/app/src/main/res/drawable/img_my_page_point_info.xml b/app/src/main/res/drawable/img_my_page_point_info.xml new file mode 100644 index 00000000..cfa1faf0 --- /dev/null +++ b/app/src/main/res/drawable/img_my_page_point_info.xml @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index e3586e29..a0efefb4 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -67,6 +67,16 @@ 5만원 이하 3만원 이하 + + 데이트 코스를 등록하면\n 포인트를 얻을 수 있어요 + 내 데이트를 자랑하고 포인트를 받아보세요 + 처음 3번 무료로\n데이트 코스를 열람할 수 있어요 + 무료 찬스로 데이트를 열람하세요 + 쌓인 포인트로\n다양한 데이트 코스를 둘러보세요 + 다른 커플의 데이트, 궁금하지 않으세요? + 모인 포인트는 데이트 장소를\n예약할 때 현금처럼 사용 가능해요 + 추후 만들어질 기능을 기대해주세요 + 데이트로드는 포인트로\n데이트 코스를 열람할 수 있어요. 최초 3회 찬스로 다른 사람의 데이트 코스를 구경해 보세요 @@ -157,5 +167,12 @@ 지역을 선택해주세요 적용하기 + + + 내가 등록한 코스 + 포인트 제도 소개 + 문의하기 + 로그아웃 + \ No newline at end of file