[TnT-85] 1차 컴포넌트 구현 #14

SeonJeongk · 2025-01-11T08:46:57Z

📝 작업 내용

Closes [TNT-85] 디자인 시스템 1차 컴포넌트 구현 #12

1차로 확정된 컴포넌트들을 구현했습니다.

Button,TextField, Dialog, TopBar
Button은 ButtonUtils의 getButtonConfig를 통해 Size(XLarge, Large, Medium, ...) 와 Type(Primary, Gray, GrayOutline, RedOutline), enabled에 맞는 설정을 넘겨받습니다.
TopBar는 뒤로가기만, 뒤로가기 + 제목, 뒤로가기 + 제목 + component의 3가지 옵션이 있습니다.
TextField는 입력란과 right component, 에러문구를 보여주는 TnTTextField와 제목과 counter까지 보여주는 TnTLabeledTextField로 구현했습니다.
추가로 기존 Typo와 Color를 추가 및 수정했습니다.

📸 실행 화면

🙆🏻 리뷰 요청 사항

없습니다

👀 레퍼런스

버튼 최소 크기 수정
TextField 커스텀

- TextButton, IconButton, BottomButton - ButtonUtils에서 버튼 설정 관리

hoyahozz

디자인 시스템 구현하시느라 너무 고생하셨어요 :->

코멘트 남겨놓았으니 한 번 확인해주세요 ~!

hoyahozz · 2025-01-12T02:54:22Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/util/ButtonUtils.kt

+enum class ButtonSize {
+    XLarge,
+    Large,
+    Medium,
+    Small,
+    XSmall,
+}


요기 있는 클래스들 모두 패키징이 필요해보입니다!

component > button > model 로 패키징하는거 어떨까요?

넵 수정해두겠습니다!

hoyahozz · 2025-01-12T02:56:01Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/util/ButtonUtils.kt

+)
+
+@Composable
+fun getButtonConfig(size: ButtonSize, variant: ButtonType, enabled: Boolean): ButtonConfig {


ButtonConfig 를 따로 분리하신 이유가 있으실까요?

제 생각에 height, contentPadding 과 같은 필드들은 ButtonSize 에서,

color, stroke 와 같은 필드들은 ButtonType 내의 프로퍼티 혹은 메소드로 분리할 수 있을 것처럼 보여요!

모든 정보를 한 곳에서 처리하려고 하다보니 ButtonConfig로 분리했습니다
각 클래스에 관련된 속성들을 분리하여 관리하는게 더 좋아보이네요! 수정해보겠습니다👍

hoyahozz · 2025-01-12T03:16:47Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/Button.kt

+    size: ButtonSize = ButtonSize.Medium,
+    type: ButtonType = ButtonType.Primary,
+    text: String,
+    enabled: Boolean = true,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,


컴포즈에서는 권장되는 파라미터 순서가 있어요!

일반적으로 필수 파라미터 (text)는 가장 최상위에, 옵셔널한 파라미터는 그 하위에 작성하도록 권장하고 있습니다!

그 중에서도, modifier 는 옵셔널한 파라미터 중 최상단에 위치하기를 권장하고 있어요!

Since the modifier is recommended for any component and is used often, placing it first ensures that it can be set without a named parameter and provides a consistent place for this parameter in any component.

안 그래도 구현하면서 순서에 대해 고민했습니다.. ;-;
첨부 링크 참고해서 수정해보겠습니다!

hoyahozz · 2025-01-12T05:38:05Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/Button.kt

+        Column(
+            modifier = Modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.Top,
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Text(
+                text = text,
+                style = TnTTheme.typography.h4,
+            )
+        }


Suggested change

Column(

modifier = Modifier.fillMaxSize(),

verticalArrangement = Arrangement.Top,

horizontalAlignment = Alignment.CenterHorizontally,

) {

Text(

text = text,

style = TnTTheme.typography.h4,

)

}

Text(

text = text,

style = TnTTheme.typography.h4,

modifier = Modifier.align(Alignment.Top)

)

Column 안감싸고 Text 로만 하위 컴포저블 구현 가능할 것 같아요 !_!

오매 수정했습니다 감사합니다!

hoyahozz · 2025-01-12T05:42:55Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TextField.kt

+    isSingleLine: Boolean = false,
+    showWarning: Boolean = false,
+    warningMessage: String? = null,
+    rightComponent: @Composable () -> Unit = {},


우리 버튼 포지션에서 Trailing, Leading 이라는 표현을 썼으니까 요기서도 적용해봐요!

hoyahozz · 2025-01-12T05:52:31Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/Button.kt

+        enabled = enabled,
+        colors = config.colors,
+        shape = RoundedCornerShape(config.cornerRadius),
+        border = BorderStroke(width = config.stroke, color = config.borderColor),


Suggested change

border = BorderStroke(width = config.stroke, color = config.borderColor),

border = BorderStroke(

width = config.stroke,

color = config.borderColor,

),

취향차이긴 한데 파라미터 두 개이상인 경우 개행해주는거 어떨까요 ?.?

옹 코드가 길어지는 것 때문에 개행하지 않고 구현했습니다
개행하는거 좋아요~! 수정해두겠습니다

hoyahozz · 2025-01-12T05:55:27Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TextField.kt

+
+@Preview(showBackground = true, heightDp = 100)
+@Composable
+fun TnTTextFieldPreview() {


모든 프리뷰 컴포저블 함수는 private 하게 선언해주세요!

hoyahozz · 2025-01-12T05:57:47Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TextField.kt

+@Composable
+fun TnTTextField(
+    value: String,
+    placeholder: String,


placeHolder 도 nullable 한 타입으로 선언해주는건 어떨까요?

필요하지 않은 경우도 있을 것 같아서요!

hoyahozz · 2025-01-12T06:04:18Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TextField.kt

+                    .padding(end = 8.dp),
+            ) {
+                if (value.isEmpty()) {
+                    Text(


오호 이렇게 구현하는 것도 괜찮기는 한데, BasicTextField 내 decorationBox 활용하면, PlaceHolder 구현 가능해요!

참고 : https://reco-dy.tistory.com/16

옹 넵 참고해서 수정했습니다!!

hoyahozz · 2025-01-12T06:06:24Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TopBar.kt

+// back button
+@Preview(showBackground = true)
+@Composable
+fun TnTTopBarPreview1() {


1, 2, 3 숫자 대신 좀 더 의미있는 함수명을 작성해봅시당!

TnTTopBarOnlyBackButtonPreview 와 같은 이름은 어때요? ㅎㅎ

TnTTopBarOnlyBackButtonPreview, TnTTopBarBackButtonWithTitlePreview, TnTTopBarWithAllComponentsPreview로 수정했습니다!

- 파라미터 2개 이상인 경우 개행 추가 - BuildConfig의 역할을 각 클래스 내 메소드로 분리 - [size] height, contentPadding, cornerRadius, textStyle - [type] stoke, borderColor, button colors

- TopBar Preview 함수명 변경

- textField 갭 8.dp로 수정

- 입력란 padding 8.dp로 수정 - 아래 라인 색상 Neutral200으로 변경

SeonJeongk · 2025-01-13T12:15:51Z

리뷰 남겨주신 부분 모두 반영했습니다! 확인 한 번 부탁드립니다👍 @hoyahozz
추가로 회원가입 화면에 쓰이는 아래 두 컴포넌트 TnTOutlinedTextField와 TnTSingleButtonPopupDialog도 추가로 구현했습니다 'o'

hoyahozz

디스코드로 얘기 나눴던 내용 적어둡니다 ~

hoyahozz · 2025-01-13T16:34:52Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/button/Button.kt

+        contentPadding = size.contentPadding,
+        modifier = modifier
+            .height(size.height)
+            .defaultMinSize(minWidth = 1.dp, minHeight = 1.dp),


Suggested change

.defaultMinSize(minWidth = 1.dp, minHeight = 1.dp),

.defaultMinSize(minWidth = Dp.Hairline),

hoyahozz · 2025-01-13T16:35:21Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TextField.kt

+    maxLength: Int = 15,
+    isSingleLine: Boolean = false,
+    showWarning: Boolean = false,
+    optional: Boolean = false,


Suggested change

optional: Boolean = false,

isRequired: Boolean = false,

hoyahozz · 2025-01-13T16:37:02Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TopBar.kt

+    title: String = "",
+    onBackClick: () -> Unit = {},
+    modifier: Modifier = Modifier,
+    trailingComponent: @Composable () -> Unit = {},


Suggested change

trailingComponent: @Composable () -> Unit = {},

trailingComponent: @Composable RowScope.() -> Unit = {},

hoyahozz · 2025-01-13T16:37:37Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/button/model/ButtonType.kt

+import androidx.compose.ui.unit.dp
+import co.kr.tnt.designsystem.theme.TnTTheme
+
+enum class ButtonType(


Recomposition 카운트 지속적으로 모니터링하기

hoyahozz · 2025-01-13T16:39:08Z

core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TopBar.kt

+    Box(
+        contentAlignment = Alignment.Center,
+        modifier = modifier
+            .fillMaxWidth()
+            .height(60.dp)
+            .padding(start = 16.dp, top = 20.dp, end = 16.dp, bottom = 12.dp),
+    ) {
+        IconButton(
+            onClick = onBackClick,
+            modifier = Modifier
+                .size(32.dp)
+                .align(Alignment.CenterStart),
+        ) {
+            Icon(
+                painter = painterResource(R.drawable.ic_arrow_left),
+                contentDescription = "Go back",
+            )
+        }
+
+        Text(
+            text = title,
+            style = TnTTheme.typography.h4,
+            color = TnTTheme.colors.neutralColors.Neutral900,
+            textAlign = TextAlign.Center,
+            maxLines = 1,
+            overflow = TextOverflow.Ellipsis,
+        )
+
+        Row(
+            modifier = Modifier.align(Alignment.CenterEnd),
+        ) {
+            trailingComponent()
+        }
+    }


Suggested change

Box(

contentAlignment = Alignment.Center,

modifier = modifier

.fillMaxWidth()

.height(60.dp)

.padding(start = 16.dp, top = 20.dp, end = 16.dp, bottom = 12.dp),

) {

IconButton(

onClick = onBackClick,

modifier = Modifier

.size(32.dp)

.align(Alignment.CenterStart),

) {

Icon(

painter = painterResource(R.drawable.ic_arrow_left),

contentDescription = "Go back",

)

}

Text(

text = title,

style = TnTTheme.typography.h4,

color = TnTTheme.colors.neutralColors.Neutral900,

textAlign = TextAlign.Center,

maxLines = 1,

overflow = TextOverflow.Ellipsis,

)

Row(

modifier = Modifier.align(Alignment.CenterEnd),

) {

trailingComponent()

}

}

CenterAlignedTopAppBar(

modifier = modifier,

title = {

Text(

text = title,

style = TnTTheme.typography.h4,

color = TnTTheme.colors.neutralColors.Neutral900,

textAlign = TextAlign.Center,

maxLines = 1,

overflow = TextOverflow.Ellipsis,

)

},

actions = trailingComponent,

navigationIcon = {

IconButton(

onClick = onBackClick,

modifier = Modifier.size(32.dp)

) {

Icon(

painter = painterResource(R.drawable.ic_arrow_left),

contentDescription = "Go back",

)

}

}

)

- trailingComponent에 BoxScope 적용 - optional isRequired로 변경 - if-else문 true 기준으로 작성 - OutlinedTextField 디자인 수정사항 반영

SeonJeongk added 9 commits January 8, 2025 14:56

[TNT-85] design: Typography 수정

975f14d

[TNT-85] design: 색상 추가 및 Theme 수정

58369fd

[TNT-85] design: TopBar 컴포넌트 구현

44814b6

[TNT-85] design: Red_50 색상 추가

0312037

[TNT-85] fix: 미사용 코드 삭제 (darkTheme)

a178f41

[TNT-85] design: Button 컴포넌트 구현

72b1b45

- TextButton, IconButton, BottomButton - ButtonUtils에서 버튼 설정 관리

[TNT-85] design: TextField 컴포넌트 구현

438b8d1

[TNT-85] design: PopupDialog 컴포넌트 구현

b2a60df

[TNT-85] design: LabeledTextField optional 추가

de10e05

SeonJeongk added 🎨 Design UI 및 디자인 작업 🌻 선정 김씨 집안 막내 김선정 labels Jan 11, 2025

SeonJeongk self-assigned this Jan 11, 2025

hoyahozz self-requested a review January 12, 2025 03:25

hoyahozz requested changes Jan 12, 2025

View reviewed changes

SeonJeongk added 11 commits January 13, 2025 15:03

[TNT-85] move: button 패키지 생성, Button 이동

b7ed7b9

[TNT-85] refactor: Button class 패키징 및 BuildConfig 삭제

2dfb498

- 파라미터 2개 이상인 경우 개행 추가 - BuildConfig의 역할을 각 클래스 내 메소드로 분리 - [size] height, contentPadding, cornerRadius, textStyle - [type] stoke, borderColor, button colors

[TNT-85] refactor: 권장 사항에 맞춰 파라미터 순서 수정

595dd2b

[TNT-85] refactor: TnTBottomButton 레이아웃 수정

6e51487

[TNT-85] refactor: Preview private으로 수정

904ab57

- TopBar Preview 함수명 변경

[TNT-85] refactor: 변수명 trailingComponent로 수정

f5775e9

- textField 갭 8.dp로 수정

[TNT-85] refactor: placeholder 위치 수정 및 nullable로 변경

17d8862

[TNT-85] refactor: TextField 디자인 변경 반영, Spacer 추가

188ae9e

- 입력란 padding 8.dp로 수정 - 아래 라인 색상 Neutral200으로 변경

[TNT-85] feat: single button popup dialog 구현

88e7b0d

[TNT-85] fix: 트레일링 콤마 추가

8b07581

[TNT-85] feat: OutlinedTextField 추가

7b51608

[TNT-85] fix: 트레일링 콤마 추가

5f7351e

SeonJeongk requested a review from hoyahozz January 13, 2025 12:24

hoyahozz approved these changes Jan 13, 2025

View reviewed changes

hoyahozz reviewed Jan 13, 2025

View reviewed changes

SeonJeongk added 3 commits January 14, 2025 02:13

[TNT-85] refactor: CenterAlignedTopAppBar로 수정

3fd35a5

[TNT-85] refactor: Button minWidth 설정 수정

4e3cd58

[TNT-85] refactor: TextField 수정

72d1664

- trailingComponent에 BoxScope 적용 - optional isRequired로 변경 - if-else문 true 기준으로 작성 - OutlinedTextField 디자인 수정사항 반영

SeonJeongk merged commit 8bf75d2 into develop Jan 13, 2025
1 check passed

SeonJeongk deleted the design/TNT-85 branch January 13, 2025 18:00

	.defaultMinSize(minWidth = 1.dp, minHeight = 1.dp),
	.defaultMinSize(minWidth = Dp.Hairline),

	trailingComponent: @Composable () -> Unit = {},
	trailingComponent: @Composable RowScope.() -> Unit = {},

[TnT-85] 1차 컴포넌트 구현 #14

[TnT-85] 1차 컴포넌트 구현 #14

Uh oh!

Conversation

SeonJeongk commented Jan 11, 2025

📝 작업 내용

📸 실행 화면

🙆🏻 리뷰 요청 사항

👀 레퍼런스

Uh oh!

hoyahozz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SeonJeongk commented Jan 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hoyahozz left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

SeonJeongk commented Jan 13, 2025 •

edited

Loading

hoyahozz left a comment •

edited

Loading