Skip to content
Merged
Show file tree
Hide file tree
Changes from 12 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
@@ -0,0 +1,81 @@
package com.twix.designsystem.components.goal
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

디자인 시스템에 있는 컴포넌트들은 함께 사용하는 컴포넌트기도 하고
코드 리뷰를 할 때도 좀 더 편하게 할 수 있도록 프리뷰를 남겨두는건 어떨까 ?


import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
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.RoundedCornerShape
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.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import com.twix.designsystem.components.text.AppText
import com.twix.designsystem.extension.toRes
import com.twix.designsystem.theme.CommonColor
import com.twix.designsystem.theme.GrayColor
import com.twix.domain.model.enums.AppTextStyle
import com.twix.domain.model.enums.GoalIconType

@Composable
fun GoalCardFrame(
modifier: Modifier = Modifier,
goalName: String,
goalIcon: GoalIconType,
right: @Composable RowScope.() -> Unit,
content: @Composable ColumnScope.() -> Unit,
) {
val shape = RoundedCornerShape(16.dp)

Column(
modifier =
modifier
.fillMaxWidth()
.clip(shape)
.border(1.dp, GrayColor.C500, shape)
.background(CommonColor.White),
) {
// Header
Row(
modifier =
Modifier
.fillMaxWidth()
.padding(16.dp),
verticalAlignment = Alignment.CenterVertically,
) {
Image(
painter = painterResource(goalIcon.toRes()),
contentDescription = null,
modifier = Modifier.size(22.dp),
)

Spacer(Modifier.width(10.dp))

AppText(
text = goalName,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = AppTextStyle.T2,
color = GrayColor.C500,
modifier = Modifier.weight(1f),
)

Spacer(Modifier.width(10.dp))

// 헤더의 오른쪽 아이콘 홈이면 체크, 수정이면 점 세개
right()
}

content()
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
package com.twix.designsystem.components.goal

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.twix.designsystem.R
import com.twix.domain.model.enums.GoalCheckState
import com.twix.ui.extension.noRippleClickable

@Composable
fun GoalCheckIndicator(
state: GoalCheckState,
modifier: Modifier = Modifier,
onClick: () -> Unit,
) {
val meChecked = state == GoalCheckState.ONLY_ME || state == GoalCheckState.BOTH
val partnerChecked = state == GoalCheckState.ONLY_PARTNER || state == GoalCheckState.BOTH

Box(modifier = modifier) {
CheckDot(
checked = partnerChecked,
isPartner = true,
onClick = onClick,
)

CheckDot(
checked = meChecked,
isPartner = false,
modifier = Modifier.offset(x = (-17).dp),
onClick = onClick,
)
}
}

@Composable
private fun CheckDot(
modifier: Modifier = Modifier,
checked: Boolean,
isPartner: Boolean = false,
onClick: () -> Unit,
) {
val res =
if (isPartner) {
if (checked) R.drawable.ic_checked_you else R.drawable.ic_unchecked_you
} else {
if (checked) R.drawable.ic_checked_me else R.drawable.ic_unchecked_me
}

Image(
painter = painterResource(res),
contentDescription = null,
modifier =
modifier
.size(28.dp)
.noRippleClickable(onClick = onClick),
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
package com.twix.designsystem.components.goal

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import coil3.compose.AsyncImage
import coil3.request.ImageRequest
import coil3.request.crossfade
import com.twix.designsystem.extension.toRes
import com.twix.designsystem.theme.GrayColor
import com.twix.domain.model.goal.GoalVerification
import com.twix.ui.extension.noRippleClickable

@Composable
fun GoalVerificationCell(
modifier: Modifier = Modifier,
verification: GoalVerification?,
emptyContent: @Composable () -> Unit,
onClick: (() -> Unit)? = null,
) {
Box(
modifier =
modifier
.aspectRatio(174f / 136f)
.background(GrayColor.C050)
.let { if (onClick != null) it.noRippleClickable { onClick() } else it },
contentAlignment = Alignment.Center,
) {
if (verification == null) {
emptyContent()
} else {
AsyncImage(
model =
ImageRequest
.Builder(LocalContext.current)
.data(verification.imageUrl)
.crossfade(true)
.build(),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize(),
)

Box(
modifier =
Modifier
.fillMaxWidth()
.align(Alignment.BottomEnd)
.padding(6.dp),
contentAlignment = Alignment.BottomEnd,
) {
verification.reaction?.let {
Image(
painter = painterResource(it.toRes()),
contentDescription = null,
modifier = Modifier.size(32.dp),
)
}
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
package com.twix.designsystem.extension

import com.twix.designsystem.R
import com.twix.domain.model.enums.GoalReactionType

fun GoalReactionType.toRes(): Int =
when (this) {
GoalReactionType.HAPPY -> R.drawable.ic_happy
GoalReactionType.TROUBLE -> R.drawable.ic_trouble
GoalReactionType.LOVE -> R.drawable.ic_love
GoalReactionType.DOUBT -> R.drawable.ic_doubt
GoalReactionType.FUCK -> R.drawable.ic_fuck
}
33 changes: 21 additions & 12 deletions core/design-system/src/main/res/drawable/ic_checked_me.xml
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,25 @@
android:height="28dp"
android:viewportWidth="28"
android:viewportHeight="28">
<path
android:strokeWidth="1"
android:pathData="M14,14m-11.5,0a11.5,11.5 0,1 1,23 0a11.5,11.5 0,1 1,-23 0"
android:fillColor="#171717"
android:strokeColor="#171717"/>
<path
android:pathData="M9,12.947L13.167,18L19,10"
android:strokeLineJoin="round"
android:strokeWidth="1.2"
android:fillColor="#00000000"
android:strokeColor="#ffffff"
android:strokeLineCap="round"/>
<group>
<clip-path
android:pathData="M0,0h28v28h-28z"/>
<path
android:pathData="M14,14m-12.7,0a12.7,12.7 0,1 1,25.4 0a12.7,12.7 0,1 1,-25.4 0"
android:strokeWidth="1.4"
android:fillColor="#00000000"
android:strokeColor="#ffffff"/>
<path
android:strokeWidth="1"
android:pathData="M14,14m-11.5,0a11.5,11.5 0,1 1,23 0a11.5,11.5 0,1 1,-23 0"
android:fillColor="#171717"
android:strokeColor="#171717"/>
<path
android:pathData="M9,12.947L13.167,18L19,10"
android:strokeLineJoin="round"
android:strokeWidth="1.2"
android:fillColor="#00000000"
android:strokeColor="#ffffff"
android:strokeLineCap="round"/>
</group>
</vector>
33 changes: 12 additions & 21 deletions core/design-system/src/main/res/drawable/ic_checked_you.xml
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,16 @@
android:height="28dp"
android:viewportWidth="28"
android:viewportHeight="28">
<group>
<clip-path
android:pathData="M0,0h28v28h-28z"/>
<path
android:pathData="M14,14m-12.7,0a12.7,12.7 0,1 1,25.4 0a12.7,12.7 0,1 1,-25.4 0"
android:strokeWidth="1.4"
android:fillColor="#00000000"
android:strokeColor="#ffffff"/>
<path
android:strokeWidth="1"
android:pathData="M14,14m-11.5,0a11.5,11.5 0,1 1,23 0a11.5,11.5 0,1 1,-23 0"
android:fillColor="#171717"
android:strokeColor="#171717"/>
<path
android:pathData="M9,12.947L13.167,18L19,10"
android:strokeLineJoin="round"
android:strokeWidth="1.2"
android:fillColor="#00000000"
android:strokeColor="#ffffff"
android:strokeLineCap="round"/>
</group>
<path
android:strokeWidth="1"
android:pathData="M14,14m-11.5,0a11.5,11.5 0,1 1,23 0a11.5,11.5 0,1 1,-23 0"
android:fillColor="#171717"
android:strokeColor="#171717"/>
<path
android:pathData="M9,12.947L13.167,18L19,10"
android:strokeLineJoin="round"
android:strokeWidth="1.2"
android:fillColor="#00000000"
android:strokeColor="#ffffff"
android:strokeLineCap="round"/>
</vector>
Loading