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

[UI/#31] 탐색 뷰 / 검색 텍스트 필드 클릭 뷰 구현 #40

Merged
merged 15 commits into from
Jul 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package com.terning.core.designsystem.component.textfield

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import com.terning.core.designsystem.theme.Black
Expand All @@ -22,6 +23,7 @@ fun NameTextField(
TerningBasicTextField(
value = text,
onValueChange = onValueChange,
modifier = Modifier,
textStyle = TerningTheme.typography.detail1,
textColor = Black,
drawLineColor = Grey500,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package com.terning.core.designsystem.component.textfield

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.SolidColor
import com.terning.core.designsystem.theme.Grey300
import com.terning.core.designsystem.theme.Grey400
Expand All @@ -9,15 +10,19 @@ import com.terning.core.designsystem.theme.TerningTheme

@Composable
fun SearchTextField(
text: String,
onValueChange: (String) -> Unit,
text: String = "",
Copy link
Member

Choose a reason for hiding this comment

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

요거 String 기본값 추가하신 이유가 궁금해요!!

Copy link
Contributor Author

@arinming arinming Jul 11, 2024

Choose a reason for hiding this comment

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

BasicTextField 기본 속성이라서 삭제하면 에러가 납니당..!

onValueChange: (String) -> Unit = {},
modifier: Modifier,
hint: String,
leftIcon: Int,
enabled: Boolean = true,
readOnly: Boolean = false,
onDoneAction: (() -> Unit)? = null,
) {
TerningBasicTextField(
value = text,
onValueChange = onValueChange,
modifier = modifier,
textStyle = TerningTheme.typography.button3,
textColor = Grey400,
cursorBrush = SolidColor(Grey300),
Expand All @@ -27,6 +32,8 @@ fun SearchTextField(
hintColor = Grey300,
leftIcon = leftIcon,
leftIconColor = TerningMain,
enabled = enabled,
readOnly = readOnly,
onDoneAction = onDoneAction
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,9 @@ import com.terning.core.designsystem.theme.White

@Composable
fun TerningBasicTextField(
value: String,
onValueChange: (String) -> Unit,
value: String = "",
onValueChange: (String) -> Unit = {},
modifier: Modifier,
textStyle: TextStyle,
textColor: Color,
hintColor: Color,
Expand All @@ -51,7 +52,9 @@ fun TerningBasicTextField(
helperMessage: String = "",
helperIcon: Int? = null,
helperColor: Color = TerningMain,
enabled: Boolean = true,
readOnly: Boolean = false,
onDoneAction: (() -> Unit)? = null,
) {
val keyboardController = LocalSoftwareKeyboardController.current
val focusManager = LocalFocusManager.current
Expand All @@ -67,10 +70,11 @@ fun TerningBasicTextField(
onDone = {
keyboardController?.hide()
focusManager.clearFocus()
onDoneAction?.invoke()
}
),

modifier = Modifier
modifier = modifier
.fillMaxWidth()
.background(White)
.drawWithContent {
Expand Down Expand Up @@ -124,6 +128,8 @@ fun TerningBasicTextField(
}
}
},

enabled = enabled,
readOnly = readOnly,
)

Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
package com.terning.core.designsystem.component.topappbar

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun BackButtonTopAppBar(
title: String, onBackButtonClick: (() -> Unit),
title: String,
modifier: Modifier,
onBackButtonClick: (() -> Unit),
) {
TerningBasicTopAppBar(
title = title,
showBackButton = true,
modifier = modifier,
onBackButtonClick = { onBackButtonClick.invoke() },
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,23 @@ package com.terning.core.designsystem.component.topappbar

import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import com.terning.core.R

@Composable
fun LogoTopAppBar() {
fun LogoTopAppBar(
modifier: Modifier = Modifier
) {
TerningBasicTopAppBar(
showBackButton = false,
actions = listOf {
Icon(
painter = painterResource(id = R.drawable.ic_logo),
contentDescription = stringResource(id = R.string.ic_logo),
)
}
},
modifier = modifier
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,17 @@ import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
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 com.terning.core.R
import com.terning.core.designsystem.theme.TerningTheme

@Composable
fun MyPageTopAppBar() {
fun MyPageTopAppBar(
modifier: Modifier = Modifier,
) {
TerningBasicTopAppBar(
showBackButton = false,
actions = listOf(
Expand All @@ -36,6 +39,7 @@ fun MyPageTopAppBar() {
}
}
}
)
),
modifier = modifier,
)
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package com.terning.core.designsystem.component.topappbar

import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
Expand All @@ -21,6 +22,7 @@ import com.terning.core.designsystem.theme.White
@Composable
fun TerningBasicTopAppBar(
title: String = "",
modifier: Modifier,
showBackButton: Boolean = false,
actions: List<@Composable () -> Unit> = emptyList(),
onBackButtonClick: () -> Unit = {},
Expand All @@ -35,14 +37,17 @@ fun TerningBasicTopAppBar(
)

},
modifier = modifier,
navigationIcon = {
if (showBackButton) {
IconButton(onClick = {
onBackButtonClick.invoke()
}) {
IconButton(
onClick = {
onBackButtonClick.invoke()
Copy link
Member

Choose a reason for hiding this comment

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

invoke()를 호출하는 이유가 뭔가요??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

빠른 삭제했읍니다.

}) {
Icon(
painter = painterResource(id = R.drawable.ic_back),
contentDescription = stringResource(id = R.string.ic_back)
contentDescription = stringResource(id = R.string.ic_back),
modifier = Modifier.padding(start = 8.dp)
)
}
} else {
Expand All @@ -55,6 +60,11 @@ fun TerningBasicTopAppBar(
}
},
colors = TopAppBarDefaults.topAppBarColors(White),
modifier = Modifier.padding(horizontal = 16.dp)
windowInsets = WindowInsets(
left = 0,
top = 0,
right = 0,
bottom = 0
),
)
}
18 changes: 16 additions & 2 deletions feature/src/main/java/com/terning/feature/home/HomeRoute.kt
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,12 @@ package com.terning.feature.home

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.terning.core.designsystem.component.topappbar.LogoTopAppBar

@Composable
fun HomeRoute() {
Expand All @@ -13,7 +16,18 @@ fun HomeRoute() {

@Composable
fun HomeScreen() {
Column(modifier = Modifier.fillMaxSize()) {
Text(text = "홈 스크린")
Scaffold(
modifier = Modifier,
topBar = {
LogoTopAppBar()
}
) { paddingValues ->
Column(
modifier = Modifier
.fillMaxSize()
Comment on lines +25 to +27
Copy link
Member

Choose a reason for hiding this comment

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

위에서 만든 modifier 변수 가져와도 될 것 같아요..!!

Copy link
Contributor Author

@arinming arinming Jul 11, 2024

Choose a reason for hiding this comment

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

이게 사실 효빈님 뷰라서 탑바만 적용한거라 효빈님이 바꿔주신다고합니당ㅎㅎ

.padding(paddingValues)
) {
Text(text = "홈 스크린")
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@ import androidx.navigation.navOptions
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
import com.terning.feature.search.search.navigation.Search
import com.terning.feature.search.search.navigation.navigateSearch

class MainNavigator(
val navController: NavHostController,
Expand All @@ -23,7 +22,7 @@ class MainNavigator(
@Composable get() = navController
.currentBackStackEntryAsState().value?.destination

val startDestination = SignIn
val startDestination = Search

val currentTab: MainTab?
@Composable get() = MainTab.find { tab ->
Expand Down
32 changes: 4 additions & 28 deletions feature/src/main/java/com/terning/feature/main/MainScreen.kt
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.compose.NavHost
import com.terning.core.designsystem.component.topappbar.LogoTopAppBar
import com.terning.core.designsystem.component.topappbar.MyPageTopAppBar
import com.terning.core.designsystem.component.topappbar.TerningBasicTopAppBar
import com.terning.core.designsystem.theme.Grey300
import com.terning.core.designsystem.theme.TerningMain
import com.terning.core.designsystem.theme.White
Expand All @@ -28,22 +25,14 @@ import com.terning.feature.home.navigation.homeNavGraph
import com.terning.feature.mypage.navigation.myPageNavGraph
import com.terning.feature.onboarding.signin.navigation.signInNavGraph
import com.terning.feature.onboarding.signup.navigation.signUpNavGraph
import com.terning.feature.search.navigation.searchNavGraph
import com.terning.feature.search.search.navigation.searchNavGraph
import com.terning.feature.search.searchprocess.navigation.searchProcessNavGraph

@Composable
fun MainScreen(
navigator: MainNavigator = rememberMainNavigator(),
) {
Scaffold(
topBar = {
when (navigator.currentTab) {
MainTab.HOME -> LogoTopAppBar()
MainTab.CALENDAR -> TerningBasicTopAppBar()
MainTab.SEARCH -> LogoTopAppBar()
MainTab.MY_PAGE -> MyPageTopAppBar()
null -> TerningBasicTopAppBar()
}
},
bottomBar = {
MainBottomBar(
isVisible = navigator.showBottomBar(),
Expand All @@ -64,29 +53,16 @@ fun MainScreen(
) {
homeNavGraph()
calendarNavGraph()
searchNavGraph()
searchNavGraph(navHostController = navigator.navController)
myPageNavGraph()
signInNavGraph(navHostController = navigator.navController)
signUpNavGraph()
searchProcessNavGraph(navHostController = navigator.navController)
}
}
}
}


@Composable
private fun MainTopBar(
isVisible: Boolean,
tabs: List<MainTab>,
currentTab: MainTab?,
onTabSelected: (MainTab) -> Unit,
) {
AnimatedVisibility(
visible = isVisible,
) {
}
}

@Composable
private fun MainBottomBar(
isVisible: Boolean,
Expand Down
2 changes: 1 addition & 1 deletion feature/src/main/java/com/terning/feature/main/MainTab.kt
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import com.terning.feature.R
import com.terning.feature.calendar.navigation.Calendar
import com.terning.feature.home.navigation.Home
import com.terning.feature.mypage.navigation.MyPage
import com.terning.feature.search.navigation.Search
import com.terning.feature.search.search.navigation.Search

enum class MainTab(
@DrawableRes val icon: Int,
Expand Down
Loading
Loading