Skip to content

[UI] view appbar header modal 컴포넌트 구현 #21

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.

Sign up for GitHub

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

Merged
JJUYAAA merged 27 commits into from
Jun 23, 2025
Merged

[UI] view appbar header modal 컴포넌트 구현 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
2089349
Merge pull request #12 from THIP-TextHip/develop
Nico1eKim May 14, 2025
d52c6ef
[ui]: view 컴포넌트 생성(#19)
JJUYAAA May 24, 2025
8a019d2
[ui]: modal/tooltip 컴포넌트 생성(#19)
JJUYAAA May 24, 2025
62ba3c9
[ui]: modal/snackbar 컴포넌트 생성(#19)
JJUYAAA May 25, 2025
ee54e24
[ui]: modal/tooltip 컴포넌트 색상 수정(#19)
JJUYAAA May 25, 2025
3d5c7fb
[ui]: modal/InfoPopup,ScrollbarUtil 컴포넌트 생성(#19)
JJUYAAA May 25, 2025
84f4d16
[ui]: modal/SnackBar 폰트 수정(#19)
JJUYAAA May 25, 2025
23a6ef3
[ui]: modal/ToolTip, view/CountingBar 폰트 수정(#19)
JJUYAAA May 25, 2025
3b0c5db
[ui]: modal/DialogPopup 컴포넌트 생성(#19)
JJUYAAA May 25, 2025
9a1f311
[ui]: appbar/BottomNavigation 컴포넌트 생성(#19)
JJUYAAA May 25, 2025
eb59fe6
[ui]: modal/DialogPopup color 수정(#19)
JJUYAAA May 25, 2025
0ae1f13
[ui]: header/ProfileBar_1,2,3컴포넌트 생성(#19)
JJUYAAA May 25, 2025
e23fae0
[ui]: header/AuthorHeader컴포넌트 생성(#19)
JJUYAAA May 31, 2025
da02294
[refacor]: header, modal 패키지 컴포넌트 color, style 수정(#19)
JJUYAAA May 31, 2025
bbc94c4
[refacor]: 패키지 이름 변경 modals -> modal (#19)
JJUYAAA May 31, 2025
b6dd6f2
[refacor]: view 패키지 컴포넌트 color, style 변경 (#19)
JJUYAAA May 31, 2025
59a4b9e
[ui]: Mainscreen 생성 (#19)
JJUYAAA May 31, 2025
b008dc8
[refactor]: 실수로 생성한 colors, strings 값 삭제(#19)
JJUYAAA May 31, 2025
762faff
[refactor]: string 추출 및 적용(#19)
JJUYAAA May 31, 2025
4bcd204
[ui]: bottomnavigation 아이콘 추가 및 ui수정(#19)
JJUYAAA May 31, 2025
7679dea
[refactor]: BottomNavigation height 수정(#19)
JJUYAAA May 31, 2025
b8a06fb
[refactor]: 인자 순서, color, import 수정(#19)
JJUYAAA Jun 3, 2025
ced67ef
[refactor]: ProfileBar 오른쪽 컨텐츠 showSubscriberInfo 변수로 구분(#19)
JJUYAAA Jun 3, 2025
ab596f4
[refactor]: ProfileBar 파라미터로 카운트, 시간 변수 추가(#19)
JJUYAAA Jun 23, 2025
cb68f34
[fix]: strings.xml 충돌 해결
JJUYAAA Jun 23, 2025
53061b2
[refactor]: Dialog 버튼 공용 컴포넌트로 변경(#19)
JJUYAAA Jun 23, 2025
c653ce7
[refactor]: AuthorHeader 이미지 크기 다른 거 수정(#19)
JJUYAAA Jun 23, 2025
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
1 change: 1 addition & 0 deletions .idea/.name
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 1 addition & 3 deletions .idea/compiler.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 22 additions & 0 deletions .idea/deploymentTargetSelector.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion .idea/misc.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions app/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ dependencies {
implementation(libs.androidx.ui.graphics)
implementation(libs.androidx.ui.tooling.preview)
implementation(libs.androidx.material3)
implementation(libs.androidx.navigation.compose)
testImplementation(libs.junit)
androidTestImplementation(libs.androidx.junit)
androidTestImplementation(libs.androidx.espresso.core)
Expand Down
8 changes: 3 additions & 5 deletions app/src/main/java/com/texthip/thip/MainActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,6 @@ import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
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
Expand All @@ -22,12 +19,13 @@ class MainActivity : ComponentActivity() {
enableEdgeToEdge()
setContent {
ThipTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
/*Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Greeting(
name = "Android",
modifier = Modifier.padding(innerPadding)
)
}
}*/
MainScreen()
}
}
}
Expand Down
31 changes: 31 additions & 0 deletions app/src/main/java/com/texthip/thip/MainScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
package com.texthip.thip

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
import com.texthip.thip.ui.navigator.BottomNavigationBar
import com.texthip.thip.ui.navigator.MainNavHost
import com.texthip.thip.ui.navigator.NavBarItems

@Composable
fun MainScreen() {
val navController = rememberNavController()
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
val showBottomBar = currentRoute in NavBarItems.BarItems.map { it.route }

Scaffold(
bottomBar = {
if (showBottomBar) BottomNavigationBar(navController)
}
) { innerPadding ->
Box(modifier = Modifier.padding(innerPadding)) {
MainNavHost (navController)
}
}
}
19 changes: 19 additions & 0 deletions app/src/main/java/com/texthip/thip/ui/bookSearch/screen/BookSearchScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
package com.texthip.thip.ui.bookSearch.screen

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.navigation.NavController

@Composable
fun BookSearchScreen(navController: NavController) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Text(text = "Book Search Screen")
}
}
109 changes: 109 additions & 0 deletions app/src/main/java/com/texthip/thip/ui/common/header/AuthorHeader.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
package com.texthip.thip.ui.common.header

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
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.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.texthip.thip.ui.theme.ThipTheme
import com.texthip.thip.ui.theme.ThipTheme.colors
import com.texthip.thip.ui.theme.ThipTheme.typography
import com.texthip.thip.R
import com.texthip.thip.ui.theme.Grey02

@Composable
fun AuthorHeader(
modifier: Modifier = Modifier,
profileImage: Painter?,
nickname: String,
badgeText: String,
onSubscribeClick: () -> Unit
) {
Row(
modifier = modifier
.fillMaxWidth()
.padding(horizontal = 20.dp),
verticalAlignment = Alignment.CenterVertically
) {
if (profileImage != null) {
Image(
painter = profileImage,
contentDescription = "작성자 장르이미지",
modifier = Modifier
.size(48.dp)
.clip(CircleShape)
)
} else {
Box(
modifier = Modifier
.size(48.dp)
.clip(CircleShape)
.background(colors.Grey)
)
}
Spacer(modifier = Modifier.width(8.dp))
Column(
modifier = Modifier.weight(1f)
) {
Text(
text = nickname,
style = typography.smalltitle_sb600_s18_h24,
color = colors.White,
maxLines = 1
)
Text(
text = badgeText,
style = typography.feedcopy_r400_s14_h20,
color = colors.NeonGreen,
maxLines = 1
)
}

Box(
modifier = Modifier
.clip(RoundedCornerShape(20.dp))
.border(1.dp, Grey02, RoundedCornerShape(20.dp))
.background(Color.Transparent)
.clickable { onSubscribeClick() }
.padding(horizontal = 12.dp, vertical = 8.dp)
) {
Text(
text = stringResource(R.string.subscribe),
style = typography.menu_m500_s14_h24,
color = colors.White
)
}
}
}

@Preview(showBackground = true)
@Composable
fun PreviewAuthorHeader() {
ThipTheme {
AuthorHeader(
profileImage = null,
nickname = "열자자제한열열자제한",
badgeText = "칭호칭호칭호",
onSubscribeClick = { println("구독") }
)
}
}
127 changes: 127 additions & 0 deletions app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
package com.texthip.thip.ui.common.header

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.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
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.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.painter.Painter
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 com.texthip.thip.R
import com.texthip.thip.ui.theme.Grey
import com.texthip.thip.ui.theme.ThipTheme
import com.texthip.thip.ui.theme.ThipTheme.colors
import com.texthip.thip.ui.theme.ThipTheme.typography

@Composable
fun ProfileBar(
modifier: Modifier = Modifier,
profileImage: Painter?,
topText: String,
bottomText: String,
showSubscriberInfo: Boolean,
subscriberCount: Int = 0,
hoursAgo: Int = 0
) {
Row(
modifier = modifier
.fillMaxWidth()
.padding(horizontal = 16.dp, vertical = 12.dp),
verticalAlignment = Alignment.CenterVertically
) {
if (profileImage != null) {
Image(
painter = profileImage,
contentDescription = "프로필 이미지",
modifier = Modifier
.size(36.dp)
.clip(CircleShape)
)
} else {
Box(
modifier = Modifier
.size(36.dp)
.clip(CircleShape)
.background(Grey)
Copy link

@coderabbitai coderabbitai bot Jun 23, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

테마 색상 일관성 유지

플레이스홀더 배경색으로 Grey를 사용하고 있지만, 다른 부분에서는 colors.Grey01을 사용하고 있습니다. 테마 일관성을 위해 theme colors를 사용하는 것이 좋습니다.

-                    .background(Grey)
+                    .background(colors.Grey01)
🤖 Prompt for AI Agents 
In app/src/main/java/com/texthip/thip/ui/common/header/ProfileBar.kt at line 62,
the background color is set to Grey directly, but elsewhere theme colors like
colors.Grey01 are used for consistency. Replace the hardcoded Grey with the
appropriate theme color reference, such as colors.Grey01, to maintain consistent
theming across the app.

)
}
Spacer(modifier = Modifier.width(8.dp))
Column(modifier = Modifier.weight(1f)) {
Text(
text = topText,
style = typography.view_m500_s14,
color = colors.White
)
Text(
text = bottomText,
style = typography.info_r400_s12,
color = colors.NeonGreen
)
}
if (showSubscriberInfo) {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = stringResource(R.string.subscriber_num,subscriberCount),
style = typography.timedate_r400_s11,
color = colors.Grey01
)
Spacer(modifier = Modifier.width(4.dp))
Icon(
painter = painterResource(id = R.drawable.ic_chevron_right),
contentDescription = "화살표",
modifier = Modifier.size(16.dp),
tint = Color.Unspecified
)
}
} else {
Text(
text = stringResource(R.string.hours_ago,hoursAgo),
style = typography.timedate_r400_s11,
color = colors.Grey01
)
}
}
}

@Composable
@Preview(showBackground = true)
fun PreviewProfileBar() {
ThipTheme {
Column {
ProfileBar(
profileImage = null,
topText = "user.01",
bottomText = stringResource(R.string.influencer),
showSubscriberInfo = true,
subscriberCount = 77
)
ProfileBar(
profileImage = null,
topText = "user.04",
bottomText = stringResource(R.string.influencer),
showSubscriberInfo = false,
hoursAgo = 7
)
}
}
}

Loading