Skip to content

Commit

Permalink
Merge pull request #88 from Team-Walkie/compose/calendar_ui_fix
Browse files Browse the repository at this point in the history 
마이페이지, 게시글 업로드 화면 캘린더 UI 변경
  • Loading branch information
@yonghanJu
yonghanJu authored Oct 7, 2024
2 parents d4ee59a + c5517b7 commit 91450de
Show file tree
Hide file tree
Showing 5 changed files with 189 additions and 73 deletions.
7 changes: 2 additions & 5 deletions app/src/main/java/com/whyranoid/walkie/walkiedialog/NetworkInterceptor.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,8 @@ class NetworkInterceptor(
}
response
} catch (e: Exception) {
// 예외가 발생한 경우 (타임아웃 포함)
if (e is java.net.SocketTimeoutException) {
onResponse(false)
}
throw e // 예외를 다시 던져서 호출자에게 알림
onResponse(false)
throw e
}
}
}
12 changes: 10 additions & 2 deletions presentation/src/main/java/com/whyranoid/presentation/screens/mypage/MyPageScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,9 @@ import kotlinx.coroutines.flow.first
import kotlinx.coroutines.launch
import org.koin.androidx.compose.koinViewModel
import org.orbitmvi.orbit.compose.collectAsState
import java.time.Instant
import java.time.LocalDate
import java.time.ZoneId

@Composable
fun MyPageScreen(
Expand Down Expand Up @@ -165,7 +167,7 @@ fun UserPageContent(
nickname: String? = null, // 상대방 페이지인 경우에 존재, 마이페이지일 경우 null
state: UserPageState,
onTotalBadgePageClicked: () -> Unit = {},
onPostPreviewClicked: (uid: Long, postId: Long) -> Unit = { _, _ ->},
onPostPreviewClicked: (uid: Long, postId: Long) -> Unit = { _, _ -> },
onPostCreateClicked: () -> Unit = {},
onProfileEditClicked: () -> Unit = {},
onSettingsClicked: () -> Unit = {},
Expand Down Expand Up @@ -406,7 +408,13 @@ fun UserPageContent(
Column(
modifier = Modifier.verticalScroll(rememberScrollState())
) {
HistoryPage(onDayClicked = onDateClicked)
HistoryPage(
runningHistories = state.userPostPreviewsState.getDataOrNull()
?.map {
Instant.ofEpochMilli(it.date).atZone(ZoneId.systemDefault())
.toLocalDate()
}, onDayClicked = onDateClicked
)
state.calendarPreviewsState.getDataOrNull()
?.let { postPreviews ->
postPreviews.forEach { postPreview ->
Expand Down
198 changes: 135 additions & 63 deletions ...on/src/main/java/com/whyranoid/presentation/screens/mypage/addpost/SelectHistoryScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,20 @@ 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.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.rememberLazyGridState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowLeft
import androidx.compose.material.icons.filled.KeyboardArrowRight
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults.buttonColors
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
Expand Down Expand Up @@ -61,6 +66,7 @@ fun SelectHistoryScreen(
val viewModel = koinViewModel<SelectHistoryViewModel>()
val historyListState = viewModel.historyList.collectAsStateWithLifecycle()
val selectedState = viewModel.selectedHistory.collectAsStateWithLifecycle()
val allRunningHistory = viewModel.allRunningHistory.collectAsStateWithLifecycle()

val calendarState = rememberSelectableCalendarState(
initialMonth = YearMonth.now(),
Expand All @@ -71,6 +77,7 @@ fun SelectHistoryScreen(
LaunchedEffect(calendarState.selectionState.selection.first()) {
val date = calendarState.selectionState.selection.first()
viewModel.getHistoryList(date.year, date.month.value, date.dayOfMonth)
viewModel.getAllRunningHistory()
}

Column(
Expand All @@ -83,77 +90,115 @@ fun SelectHistoryScreen(
Text(
style = WalkieTypography.Title,
text = "러닝 기록",
modifier = Modifier.align(Alignment.Center).padding(bottom = 24.dp),
modifier = Modifier
.align(Alignment.Center)
.padding(bottom = 24.dp),
)
}
SelectableCalendar(
calendarState = calendarState,
horizontalSwipeEnabled = true,
monthHeader = { monthState ->
Row(
modifier = Modifier
.padding(bottom = 12.dp)
.fillMaxWidth()
.height(40.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
) {
val context = LocalContext.current
Box(
Column {
Row(
modifier = Modifier
.weight(1f)
.fillMaxHeight()
.clip(RoundedCornerShape(12.dp))
.border(
width = 1.dp,
color = WalkieColor.GrayDefault,
shape = RoundedCornerShape(12.dp),
)
.background(color = WalkieColor.GrayDefault)
.clickable {
datePicker(
context,
monthState.currentMonth.year,
monthState.currentMonth.month.value - 1,
calendarState.selectionState.selection[0].dayOfMonth,
) { year, month, _ ->
monthState.currentMonth.withMonth(month)
calendarState.monthState.currentMonth =
YearMonth.of(year, month + 1)
}
},
contentAlignment = Alignment.Center,
.padding(bottom = 12.dp)
.fillMaxWidth()
.height(40.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text = "${monthState.currentMonth.year}년 ${monthState.currentMonth.month.value}월",
style = WalkieTypography.Body1_ExtraBold,
)
}
val context = LocalContext.current
Box(
modifier = Modifier
.weight(1f)
.fillMaxHeight()
.clip(RoundedCornerShape(12.dp))
.border(
width = 1.dp,
color = WalkieColor.GrayDefault,
shape = RoundedCornerShape(12.dp),
)
.background(color = WalkieColor.GrayDefault)
.clickable {
datePicker(
context,
monthState.currentMonth.year,
monthState.currentMonth.month.value - 1,
calendarState.selectionState.selection[0].dayOfMonth,
) { year, month, _ ->
monthState.currentMonth.withMonth(month)
calendarState.monthState.currentMonth =
YearMonth.of(year, month + 1)
}
},
contentAlignment = Alignment.Center,
) {
Text(
text = "${monthState.currentMonth.year}년 ${monthState.currentMonth.month.value}월",
style = WalkieTypography.Body1_ExtraBold,
)
}

Spacer(modifier = Modifier.width(12.dp))
Spacer(modifier = Modifier.width(12.dp))

Box(
modifier = Modifier
.weight(1f)
.fillMaxHeight()
.clip(RoundedCornerShape(12.dp))
.border(
width = 1.dp,
color = WalkieColor.GrayDefault,
shape = RoundedCornerShape(12.dp),
Box(
modifier = Modifier
.weight(1f)
.fillMaxHeight()
.clip(RoundedCornerShape(12.dp))
.border(
width = 1.dp,
color = WalkieColor.GrayDefault,
shape = RoundedCornerShape(12.dp),
)
.background(color = if (selectedState.value == null) Color.White else WalkieColor.GrayDefault),
contentAlignment = Alignment.Center,
) {
Text(
text = if (selectedState.value == null) {
"달린시간"
} else {
SimpleDateFormat("HH:mm").format(
requireNotNull(selectedState.value).finishedAt,
)
},
style = WalkieTypography.Body1_ExtraBold,
)
.background(color = if (selectedState.value == null) Color.White else WalkieColor.GrayDefault),
contentAlignment = Alignment.Center,
}
}
Row(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = 12.dp),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
) {
Icon(
imageVector = Icons.Default.KeyboardArrowLeft,
contentDescription = "이전 달",
modifier = Modifier
.size(32.dp)
.clickable {
calendarState.monthState.currentMonth =
calendarState.monthState.currentMonth.minusMonths(1)
},
)
Spacer(Modifier.width(8.dp))
Text(
text = if (selectedState.value == null) {
"달린시간"
} else {
SimpleDateFormat("HH:mm").format(
requireNotNull(selectedState.value).finishedAt,
)
},
style = WalkieTypography.Body1_ExtraBold,
text = "${monthState.currentMonth.year}년 ${monthState.currentMonth.month.value}월",
style = WalkieTypography.Title,
)
Spacer(Modifier.width(8.dp))
Icon(
imageVector = Icons.Default.KeyboardArrowRight,
contentDescription = "다음 달",
modifier = Modifier
.size(32.dp)
.clickable {
calendarState.monthState.currentMonth =
calendarState.monthState.currentMonth.plusMonths(1)
},
)
}
}
Expand Down Expand Up @@ -195,12 +240,16 @@ fun SelectHistoryScreen(
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.padding(2.dp)
.padding(4.dp)
.fillMaxWidth()
.aspectRatio(1.2f)
.aspectRatio(ratio = 1f, matchHeightConstraintsFirst = true)
.clip(CircleShape)
.background(if (isSelected) WalkieColor.Primary else Color.Transparent)
.background(
if (isSelected) WalkieColor.Primary
else if (viewModel.curDay.dayOfYear == dateState.date.dayOfYear) WalkieColor.GrayDefault
else Color.Transparent
)
.clickable {
calendarState.selectionState.selection = listOf(dateState.date)
},
Expand All @@ -211,6 +260,19 @@ fun SelectHistoryScreen(
style = WalkieTypography.Body1,
color = color,
)
val hasHistory = allRunningHistory.value.any { localDate ->
localDate.year == dateState.date.year && localDate.dayOfYear == dateState.date.dayOfYear
}
if (isSelected.not() && hasHistory) {
Box(
modifier = Modifier
.padding(bottom = 2.dp)
.align(Alignment.BottomCenter)
.size(6.dp)
.clip(CircleShape)
.background(WalkieColor.GrayDefault)
)
}
}
},
monthContainer = { container ->
Expand Down Expand Up @@ -246,7 +308,10 @@ fun SelectHistoryScreen(
val history = historyListState.value[index]
HistoryWithTime(
isSelected = selectedState.value == history,
modifier = Modifier.fillMaxWidth().height(40.dp).clip(RoundedCornerShape(12.dp))
modifier = Modifier
.fillMaxWidth()
.height(40.dp)
.clip(RoundedCornerShape(12.dp))
.clickable {
viewModel.selectHistory(history)
},
Expand All @@ -257,11 +322,18 @@ fun SelectHistoryScreen(
}

selectedState.value.let { runningHistory ->
Box(modifier = Modifier.fillMaxSize().padding(20.dp)) {
Box(
modifier = Modifier
.fillMaxSize()
.padding(20.dp)
) {
Button(
enabled = runningHistory != null,
shape = RoundedCornerShape(12.dp),
modifier = Modifier.fillMaxWidth().height(48.dp).align(Alignment.BottomCenter),
modifier = Modifier
.fillMaxWidth()
.height(48.dp)
.align(Alignment.BottomCenter),
onClick = { onHistorySelected(requireNotNull(runningHistory)) },
colors = buttonColors(containerColor = WalkieColor.Primary),
) {
Expand Down
26 changes: 23 additions & 3 deletions presentation/src/main/java/com/whyranoid/presentation/screens/mypage/tabs/HistoryPage.kt
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package com.whyranoid.presentation.screens.mypage.tabs

import android.util.Log
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
Expand Down Expand Up @@ -39,12 +40,17 @@ import java.time.format.TextStyle
import java.util.*

@Composable
fun HistoryPage(modifier: Modifier = Modifier, onDayClicked: (LocalDate) -> Unit) {
fun HistoryPage(
modifier: Modifier = Modifier,
runningHistories: List<LocalDate>?,
onDayClicked: (LocalDate) -> Unit
) {
val calendarState = rememberSelectableCalendarState(
initialMonth = YearMonth.now(),
initialSelection = listOf(LocalDate.now()),
initialSelectionMode = SelectionMode.Single,
)
val curDay = LocalDate.now()
onDayClicked(calendarState.selectionState.selection[0])

Column(
Expand Down Expand Up @@ -131,12 +137,12 @@ fun HistoryPage(modifier: Modifier = Modifier, onDayClicked: (LocalDate) -> Unit
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.padding(2.dp)
.padding(4.dp)
.fillMaxWidth()
.aspectRatio(1.2f)
.aspectRatio(ratio = 1f, matchHeightConstraintsFirst = true)
.clip(CircleShape)
.background(if (isSelected) WalkieColor.Primary else Color.Transparent)
.background(if (isSelected) WalkieColor.Primary else if (curDay.dayOfYear == dateState.date.dayOfYear) WalkieColor.GrayDefault else Color.Transparent)
.clickable {
onDayClicked(dateState.date)
calendarState.selectionState.selection = listOf(dateState.date)
Expand All @@ -148,6 +154,20 @@ fun HistoryPage(modifier: Modifier = Modifier, onDayClicked: (LocalDate) -> Unit
style = WalkieTypography.Body1,
color = color,
)
val hasHistory = runningHistories?.any { localDate ->
localDate.year == dateState.date.year && localDate.dayOfYear == dateState.date.dayOfYear
} ?: false

if (isSelected.not() && hasHistory) {
Box(
modifier = Modifier
.padding(bottom = 2.dp)
.align(Alignment.BottomCenter)
.size(6.dp)
.clip(CircleShape)
.background(WalkieColor.GrayDefault)
)
}
}
},
monthContainer = { container ->
Expand Down
Loading

0 comments on commit 91450de

Please sign in to comment.