Skip to content

Commit

Permalink
[MERGE] #11 -> develop
Browse files Browse the repository at this point in the history
[UI/#11] ํƒ์ƒ‰ ๋ทฐ / ํƒ์ƒ‰ ๊ธฐ๋ณธ ํ™”๋ฉด ๊ตฌํ˜„
  • Loading branch information
arinming authored Jul 10, 2024
2 parents 8ad328a + 872c4a9 commit a42f59d
Show file tree
Hide file tree
Showing 12 changed files with 307 additions and 59 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.SolidColor
import com.terning.core.designsystem.theme.Grey300
import com.terning.core.designsystem.theme.Grey400
import com.terning.core.designsystem.theme.TerningMain
import com.terning.core.designsystem.theme.TerningTheme

@Composable
Expand All @@ -12,18 +13,20 @@ fun SearchTextField(
onValueChange: (String) -> Unit,
hint: String,
leftIcon: Int,
readOnly: Boolean = false,
) {
TerningBasicTextField(
value = text,
onValueChange = onValueChange,
textStyle = TerningTheme.typography.button3,
textColor = Grey400,
cursorBrush = SolidColor(Grey300),
drawLineColor = Grey300,
drawLineColor = TerningMain,
strokeWidth = 2f,
hint = hint,
hintColor = Grey300,
leftIcon = leftIcon,
leftIconColor = Grey400,
leftIconColor = TerningMain,
readOnly = readOnly,
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ import com.terning.core.designsystem.theme.White
fun TerningBasicTextField(
value: String,
onValueChange: (String) -> Unit,
readOnly: Boolean = false,
textStyle: TextStyle,
textColor: Color,
hintColor: Color,
Expand All @@ -52,6 +51,7 @@ fun TerningBasicTextField(
helperMessage: String = "",
helperIcon: Int? = null,
helperColor: Color = TerningMain,
readOnly: Boolean = false,
) {
val keyboardController = LocalSoftwareKeyboardController.current
val focusManager = LocalFocusManager.current
Expand All @@ -62,7 +62,6 @@ fun TerningBasicTextField(
onValueChange = onValueChange,
singleLine = true,
maxLines = 1,
readOnly = readOnly,
keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
keyboardActions = KeyboardActions(
onDone = {
Expand Down Expand Up @@ -124,7 +123,9 @@ fun TerningBasicTextField(
)
}
}
})
},
readOnly = readOnly,
)

Row(
verticalAlignment = Alignment.CenterVertically,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
package com.terning.core.designsystem.component.topappbar

import androidx.compose.foundation.layout.padding
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.terning.core.R
import com.terning.core.designsystem.theme.TerningTheme
import com.terning.core.designsystem.theme.White
Expand Down Expand Up @@ -51,6 +54,7 @@ fun TerningBasicTopAppBar(
action()
}
},
colors = TopAppBarDefaults.topAppBarColors(White)
colors = TopAppBarDefaults.topAppBarColors(White),
modifier = Modifier.padding(horizontal = 16.dp)
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import com.terning.feature.calendar.navigation.navigateCalendar
import com.terning.feature.home.navigation.navigateHome
import com.terning.feature.mypage.navigation.navigateMyPage
import com.terning.feature.onboarding.signin.navigation.SignIn
import com.terning.feature.search.navigation.Search
import com.terning.feature.search.navigation.navigateSearch

class MainNavigator(
Expand Down
104 changes: 52 additions & 52 deletions feature/src/main/java/com/terning/feature/search/SearchRoute.kt
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
package com.terning.feature.search

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
Expand All @@ -11,12 +15,14 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.terning.core.designsystem.component.textfield.NameTextField
import com.terning.core.designsystem.component.textfield.SearchTextField
import com.terning.core.designsystem.theme.Grey400
import com.terning.core.designsystem.theme.TerningMain
import com.terning.core.designsystem.theme.WarningRed
import com.terning.core.designsystem.theme.Black
import com.terning.core.designsystem.theme.Grey100
import com.terning.core.designsystem.theme.TerningTheme
import com.terning.feature.R
import com.terning.feature.search.component.ImageSlider
import com.terning.feature.search.component.InternListType
import com.terning.feature.search.component.SearchInternList

@Composable
fun SearchRoute() {
Expand All @@ -26,61 +32,55 @@ fun SearchRoute() {
@Composable
fun SearchScreen() {
var text by remember { mutableStateOf("") }

// TODO ํ”„๋กœํ•„ ์Šคํฌ๋ฆฐ TextField๋กœ, ์‚ญ์ œ๋  ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค
var helperMessage by remember { mutableStateOf(R.string.profile_text_field_helper) }
var helperIcon by remember { mutableStateOf<Int?>(null) }
var helperColor by remember { mutableStateOf(Grey400) }
val specialCharacterPattern = Regex("[!@#\$%^&*(),.?\":{}|<>\\[\\]\\\\/]")

// TODO ํ”„๋กœํ•„ ์Šคํฌ๋ฆฐ TextField๋กœ, ์‚ญ์ œ๋  ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค
fun updateHelper(text: String) {
helperMessage = when {
text.isEmpty() -> R.string.profile_text_field_helper
specialCharacterPattern.containsMatchIn(text) -> R.string.profile_text_field_warning
text.length <= 12 -> R.string.profile_text_field_check
else -> R.string.profile_text_field_helper
}
helperIcon = when {
text.isEmpty() -> null
specialCharacterPattern.containsMatchIn(text) -> R.drawable.ic_warning
text.length <= 12 -> R.drawable.ic_check
else -> null
}
helperColor = when {
text.isEmpty() -> Grey400
specialCharacterPattern.containsMatchIn(text) -> WarningRed
text.length <= 12 -> TerningMain
else -> Grey400
}
}
val images = listOf(
R.drawable.ic_nav_search,
R.drawable.ic_check,
R.drawable.ic_nav_my_page,
)

Column(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 16.dp)
) {
Box(
modifier = Modifier.padding(
horizontal = 24.dp,
vertical = 16.dp
)
) {
SearchTextField(
text = text,
onValueChange = { newText ->
text = newText
},
hint = stringResource(R.string.search_text_field_hint),
leftIcon = R.drawable.ic_nav_search,
readOnly = true,
)
}

SearchTextField(
text = text,
onValueChange = { newText ->
text = newText
},
hint = stringResource(R.string.search_text_field_hint),
leftIcon = R.drawable.ic_nav_search
ImageSlider(
images = images
)

// TODO ํ”„๋กœํ•„ ์Šคํฌ๋ฆฐ TextField๋กœ, ์‚ญ์ œ๋  ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค
NameTextField(
text = text,
onValueChange = { newText ->
text = newText
updateHelper(newText)
},
hint = stringResource(R.string.profile_text_field_hint),
helperMessage = stringResource(helperMessage),
helperIcon = helperIcon,
helperColor = helperColor
Spacer(modifier = Modifier.padding(8.dp))

Text(
text = stringResource(id = R.string.search_today_popular),
modifier = Modifier.padding(
horizontal = 24.dp,
vertical = 4.dp
),
style = TerningTheme.typography.title1,
color = Black
)

SearchInternList(type = InternListType.VIEW)
HorizontalDivider(
thickness = 4.dp,
modifier = Modifier.padding(vertical = 8.dp),
color = Grey100,
)
SearchInternList(type = InternListType.SCRAP)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
package com.terning.feature.search.component

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun DotsIndicator(
modifier: Modifier = Modifier,
pageCount: Int,
currentPage: Int,
) {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(8.dp)
) {
repeat(pageCount) { index ->
IndicatorDots(
isSelected = index == currentPage,
modifier = modifier
)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
package com.terning.feature.search.component

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Card
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.terning.core.designsystem.theme.Grey200
import kotlinx.coroutines.delay

@Composable
fun ImageSlider(
modifier: Modifier = Modifier,
images: List<Int>,
) {
val pagerState = rememberPagerState(pageCount = { images.size })

LaunchedEffect(Unit) {
while (true) {
delay(3000)
val nextPage = (pagerState.currentPage + 1) % pagerState.pageCount
pagerState.scrollToPage(nextPage)
}
}
Column(
modifier
.fillMaxWidth()
.background(Grey200),
horizontalAlignment = Alignment.CenterHorizontally
) {
Box(
modifier = modifier
.wrapContentSize(),
contentAlignment = Alignment.BottomCenter
) {
HorizontalPager(
state = pagerState,
modifier = modifier.wrapContentSize()
) { currentPage ->
Card(
modifier
.wrapContentSize()
) {
Image(
painter = painterResource(id = images[currentPage]),
contentDescription = null,
modifier = modifier
.fillMaxWidth()
.height(112.dp)
.padding(16.dp)
)
}
}
DotsIndicator(
pageCount = images.size,
currentPage = pagerState.currentPage
)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
package com.terning.feature.search.component

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import com.terning.core.designsystem.theme.TerningMain
import com.terning.core.designsystem.theme.White

@Composable
fun IndicatorDots(
isSelected: Boolean, modifier: Modifier,
) {
Box(
modifier = modifier
.padding(2.dp)
.clip(CircleShape)
.size(6.dp)
.background(if (isSelected) TerningMain else White)
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
package com.terning.feature.search.component

enum class InternListType(val type: String) {
VIEW("view"),
SCRAP("scrap");
}
Loading

0 comments on commit a42f59d

Please sign in to comment.