[feat/#76] 출석하기 UI

Mnseo · Feb 1, 2024 · c31914d · c31914d
1 parent 6b64c38
commit c31914d
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 0 deletions.
diff --git a/presentation/src/main/java/com/kusitms/presentation/ui/home/attend/AttendScreen.kt b/presentation/src/main/java/com/kusitms/presentation/ui/home/attend/AttendScreen.kt
@@ -0,0 +1,127 @@
+package com.kusitms.presentation.ui.home.attend
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role.Companion.Image
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.kusitms.presentation.common.ui.KusitmsMarginVerticalSpacer
+import com.kusitms.presentation.common.ui.theme.KusitmsColorPalette
+import com.kusitms.presentation.R
+import com.kusitms.presentation.common.ui.KusitmsMarginHorizontalSpacer
+import com.kusitms.presentation.common.ui.theme.KusitmsTypo
+
+@Preview
+@Composable
+fun AttendScreen() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(color = KusitmsColorPalette.current.Grey900)
+            .padding(horizontal = 16.dp),
+        horizontalAlignment = Alignment.Start,
+        verticalArrangement = Arrangement.Top
+    ) {
+        KusitmsMarginVerticalSpacer(size = 8)
+        AttendPreColumn()
+        KusitmsMarginVerticalSpacer(size = 24)
+        AttendRecordColumn()
+
+    }
+}
+
+@Composable
+fun AttendPreColumn() {
+    Box(modifier = Modifier
+        .fillMaxWidth()
+        .height(108.dp)
+        .background(color = KusitmsColorPalette.current.Grey800, shape = RoundedCornerShape(24.dp))
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(20.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Column(
+                modifier = Modifier
+                    .width(188.dp)
+                    .height(56.dp)
+            ) {
+                Text(text = stringResource(R.string.attend_box1_title), style = KusitmsTypo.current.Caption1, color = KusitmsColorPalette.current.Main500)
+                Text(text = stringResource(R.string.attend_box1_subTitle), style = KusitmsTypo.current.SubTitle1_Semibold, color = KusitmsColorPalette.current.White)
+            }
+            Button(
+                modifier = Modifier
+                    .wrapContentWidth()
+                    .height(64.dp) ,
+                colors = ButtonDefaults.buttonColors(containerColor = KusitmsColorPalette.current.Main600) ,
+                shape = RoundedCornerShape(size = 12.dp),
+                onClick = { /*TODO*/ }
+            ) {
+                Text(text = stringResource(R.string.attend_btn_attend), style = KusitmsTypo.current.Text_Semibold, color = KusitmsColorPalette.current.White, maxLines = 1)
+            }
+        }
+    }
+}
+
+@Composable
+fun AttendRecordColumn() {
+    Box(modifier = Modifier
+        .fillMaxWidth()
+        .height(266.dp)
+        .background(color = KusitmsColorPalette.current.Grey800, shape = RoundedCornerShape(24.dp))){
+
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(20.dp),
+            horizontalAlignment = Alignment.Start,
+            verticalArrangement = Arrangement.Top
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .wrapContentHeight(),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(text = stringResource(R.string.attend_box2_title), style = KusitmsTypo.current.Text_Semibold, color = KusitmsColorPalette.current.Grey100)
+                Box(modifier = Modifier
+                    .width(123.dp)
+                    .height(36.dp)
+                    .background(
+                        color = KusitmsColorPalette.current.Grey600,
+                        shape = RoundedCornerShape(8.dp)
+                    )
+                ){
+                    Text(text = stringResource(R.string.attend_btn2_attend), style = KusitmsTypo.current.Caption1, color = KusitmsColorPalette.current.Grey400, modifier = Modifier.align(Alignment.Center))
+                }
+            }
+            KusitmsMarginVerticalSpacer(size = 24)
+            Text(text = stringResource(R.string.attend_box3_title), style = KusitmsTypo.current.Header2, color = KusitmsColorPalette.current.Grey100)
+            KusitmsMarginVerticalSpacer(size = 6)
+            Row(modifier = Modifier
+                .fillMaxWidth()
+                .wrapContentHeight(), horizontalArrangement = Arrangement.Start, verticalAlignment = Alignment.CenterVertically) {
+                Text(text = stringResource(R.string.attend_box3_subTitle_ok), style = KusitmsTypo.current.Text_Semibold, color = KusitmsColorPalette.current.Sub1)
+                KusitmsMarginHorizontalSpacer(size = 6)
+                Icon(painter = painterResource(id = R.drawable.ic_thumb), contentDescription = null, tint = Color.Unspecified)
+            }
+            KusitmsMarginVerticalSpacer(size = 24)
+
+        }
+    }
+}
diff --git a/presentation/src/main/res/drawable/ic_thumb.xml b/presentation/src/main/res/drawable/ic_thumb.xml
@@ -0,0 +1,6 @@
+<vector android:alpha="0.9" android:height="20dp"
+    android:viewportHeight="20" android:viewportWidth="20"
+    android:width="20dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#F6DDCD" android:pathData="M16.245,11.564C16.304,11.368 16.313,11.171 16.285,10.981C16.274,9.142 13.797,8.526 10.351,7.393C9.775,7.204 10.315,6.619 10.974,5.177C11.402,4.239 11.226,2.546 10.166,2.225C8.419,1.696 9.682,3.583 7.105,6.525C5.727,8.097 4.19,6.517 3.636,8.347L2.375,12.512C2.159,13.225 2.022,13.931 2.989,14.347C3.927,14.75 3.499,15.376 4.9,15.8L11.912,17.924C12.626,18.14 13.383,17.734 13.6,17.02C13.689,16.724 13.667,16.423 13.566,16.154C14.029,16.052 14.428,15.715 14.575,15.23C14.665,14.934 14.643,14.633 14.542,14.365C15.007,14.264 15.406,13.927 15.554,13.441C15.661,13.087 15.615,12.724 15.455,12.42C15.821,12.271 16.122,11.97 16.245,11.564Z"/>
+    <path android:fillColor="#DFA994" android:pathData="M11.215,11.455L14.558,12.467C15.013,12.605 15.513,12.491 15.864,12.17C16.009,12.038 16.018,11.813 15.886,11.668C15.754,11.523 15.529,11.514 15.384,11.646C15.217,11.799 14.979,11.852 14.764,11.787L11.34,10.75C11.001,10.648 10.809,10.288 10.911,9.949C11.014,9.61 11.374,9.417 11.713,9.52L14,10.213C14.188,10.27 14.387,10.163 14.443,9.976C14.5,9.788 14.394,9.59 14.206,9.533L11.918,8.84C11.204,8.624 10.447,9.029 10.231,9.743C10.11,10.141 10.188,10.55 10.4,10.873C10.09,11.036 9.842,11.317 9.733,11.678C9.612,12.078 9.691,12.487 9.904,12.811C9.595,12.974 9.35,13.255 9.241,13.615C9.109,14.05 9.21,14.499 9.469,14.835C9.196,15.002 8.978,15.261 8.878,15.591C8.662,16.305 9.067,17.062 9.781,17.278L11.912,17.924C12.367,18.061 12.868,17.948 13.219,17.627C13.363,17.494 13.373,17.27 13.241,17.125C13.108,16.981 12.884,16.97 12.739,17.102C12.572,17.255 12.334,17.309 12.118,17.243L9.987,16.598C9.648,16.495 9.456,16.136 9.558,15.797C9.661,15.457 10.021,15.265 10.36,15.368L12.888,16.133C13.343,16.271 13.844,16.157 14.194,15.836C14.339,15.704 14.349,15.479 14.217,15.334C14.084,15.188 13.859,15.179 13.715,15.312C13.545,15.467 13.313,15.52 13.094,15.453L10.349,14.622C10.01,14.519 9.818,14.16 9.921,13.82C10.023,13.481 10.383,13.289 10.722,13.392L13.866,14.344C14.321,14.481 14.821,14.368 15.172,14.047C15.317,13.915 15.327,13.69 15.195,13.545C15.062,13.4 14.837,13.39 14.693,13.523C14.524,13.677 14.291,13.73 14.072,13.664L10.842,12.686C10.503,12.583 10.311,12.223 10.413,11.884C10.516,11.545 10.875,11.352 11.215,11.455Z"/>
+</vector>
diff --git a/presentation/src/main/res/values/strings.xml b/presentation/src/main/res/values/strings.xml
@@ -163,6 +163,23 @@
     <string name="logout_dialog_title">로그아웃</string>
     <string name="logout_dialog_content">로그아웃을 진행할까요?</string>
 
+    <string name="attend_topbar">출석</string>
+    <string name="attend_box1_title">다가오는 커리큘럼</string>
+    <string name="attend_box1_subTitle">%s</string>
+    <string name="attend_btn_attend">출석하기</string>
+
+    <string name="attend_box2_title">출석현황</string>
+    <string name="attend_btn2_attend">출석변경 요청하기</string>
+
+    <string name="attend_box3_title">벌점 %d점</string>
+    <string name="attend_box3_subTitle_ok">수료 가능한 점수예요</string>
+    <string name="attend_box3_subTitle_fail">벌점 6점부터 수료가 어려워요</string>
+
+    <string name="attend_box4_attend">출석</string>
+    <string name="attend_box4_non_attend">결석</string>
+    <string name="attend_box4_non_late">지각</string>
+
+
     <string name="notice_report_content_commercial">타 서비스, 앱, 사이트 등 게시판 외부로 회원을\n유도하거나 공동구매, 할인 쿠폰, 홍보성 이벤트 등\n허가되지 않은 광고/홍보 게시물</string>
     <string name="notice_report_content_abuse">비아냥, 비속어 등 예의범절에 벗어나거나,\n특정인이나 단체, 지역을 비방하는 등 논란 및 분란을\n일으킬 수 있는 게시물</string>
     <string name="notice_report_content_fraud">게시물 무단 유출, 타인의 개인정보 유출, 관리자 사칭 등 타인의 권리를 침해하거나 관련법에 위배되는 게시물</string>