fix : QR 스캔 페이지 UI 변경

Nexters · Dec 29, 2024 · 7ec1ca2 · 7ec1ca2
1 parent 4fd32ca
commit 7ec1ca2
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 9 deletions.
diff --git a/presentation/src/main/java/com/nexters/boolti/presentation/screen/qr/QrScanScreen.kt b/presentation/src/main/java/com/nexters/boolti/presentation/screen/qr/QrScanScreen.kt
@@ -3,7 +3,7 @@ package com.nexters.boolti.presentation.screen.qr
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -38,10 +38,12 @@ import com.nexters.boolti.presentation.QrScanEvent
 import com.nexters.boolti.presentation.QrScanViewModel
 import com.nexters.boolti.presentation.R
 import com.nexters.boolti.presentation.component.BTDialog
-import com.nexters.boolti.presentation.component.BtCloseableAppBar
+import com.nexters.boolti.presentation.component.BtAppBar
+import com.nexters.boolti.presentation.component.BtAppBarDefaults
 import com.nexters.boolti.presentation.component.CircleBgIcon
 import com.nexters.boolti.presentation.component.ToastSnackbarHost
 import com.nexters.boolti.presentation.theme.Error
+import com.nexters.boolti.presentation.theme.Grey30
 import com.nexters.boolti.presentation.theme.Grey50
 import com.nexters.boolti.presentation.theme.Success
 import com.nexters.boolti.presentation.theme.Warning
@@ -91,9 +93,20 @@ fun QrScanScreen(
 
     Scaffold(
         topBar = {
-            BtCloseableAppBar(
+            BtAppBar(
                 title = uiState.showName,
-                onClickClose = onClickClose,
+                navigateButtons = {
+                    BtAppBarDefaults.AppBarIconButton(
+                        onClick = onClickClose,
+                        iconRes = R.drawable.ic_arrow_back,
+                    )
+                },
+                actionButtons = {
+                    BtAppBarDefaults.AppBarIconButton(
+                        onClick = {},
+                        iconRes = R.drawable.ic_camera_flip,
+                    )
+                }
             )
         },
         bottomBar = {
@@ -136,12 +149,20 @@ fun QrScanScreen(
 
 @Composable
 private fun QrScanBottombar(onClick: () -> Unit) {
-    Box(
+    Column(
         modifier = Modifier
             .fillMaxWidth()
             .background(MaterialTheme.colorScheme.background),
-        contentAlignment = Alignment.Center,
+        horizontalAlignment = Alignment.CenterHorizontally,
     ) {
+        Text(
+            modifier = Modifier.padding(top = 20.dp),
+            text = stringResource(R.string.entry_code_notice),
+            textAlign = TextAlign.Center,
+            style = MaterialTheme.typography.bodySmall.copy(
+                color = Grey50,
+            ),
+        )
         Row(
             modifier = Modifier
                 .clickable(onClick = onClick)
@@ -154,13 +175,13 @@ private fun QrScanBottombar(onClick: () -> Unit) {
                     .size(20.dp)
                     .padding(end = 4.dp),
                 painter = painterResource(id = R.drawable.ic_book),
-                tint = Grey50,
+                tint = Grey30,
                 contentDescription = stringResource(R.string.show_entry_code),
             )
             Text(
                 text = stringResource(id = R.string.show_entry_code),
                 style = MaterialTheme.typography.bodySmall,
-                color = Grey50,
+                color = Grey30,
             )
         }
     }

diff --git a/presentation/src/main/res/drawable/ic_camera_flip.xml b/presentation/src/main/res/drawable/ic_camera_flip.xml
@@ -0,0 +1,41 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,16C14.209,16 16,14.209 16,12C16,9.791 14.209,8 12,8C9.791,8 8,9.791 8,12C8,14.209 9.791,16 12,16Z"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#E7EAF2"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M3,10L3,4.778C3,4.306 3.271,3.854 3.753,3.521C4.235,3.187 4.889,3 5.571,3L18.429,3C19.111,3 19.765,3.187 20.247,3.521C20.729,3.854 21,4.306 21,4.778L21,10"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#E7EAF2"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M21,14L21,19.222C21,19.694 20.729,20.146 20.247,20.479C19.765,20.813 19.111,21 18.429,21L5.571,21C4.889,21 4.235,20.813 3.753,20.479C3.271,20.146 3,19.694 3,19.222L3,14"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#E7EAF2"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M1,16L3,14"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#E7EAF2"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M23,8L21,10"
+      android:strokeLineJoin="round"
+      android:strokeWidth="2"
+      android:fillColor="#00000000"
+      android:strokeColor="#E7EAF2"
+      android:strokeLineCap="round"/>
+</vector>
diff --git a/presentation/src/main/res/values/strings.xml b/presentation/src/main/res/values/strings.xml
@@ -241,7 +241,8 @@
     <string name="enter_code_dialog_desc">입장 코드는 주최자 계정의 마이 > QR 스캔 > 해당 공연 스캐너에서 확인 가능해요.</string>
     <string name="enter_code_dialog_placeholder">입장 코드를 입력해 주세요</string>
     <string name="enter_code_dialog_error_mismatch">올바른 입장 코드를 입력해 주세요</string>
-    <string name="show_entry_code">입장코드 보기</string>
+    <string name="show_entry_code">입장 코드 보기</string>
+    <string name="entry_code_notice">QR 코드가 인식되지 않을 경우 티켓 화면 하단의\n\'입장 코드 입력하기\'에 아래 입장 코드를 입력해 주세요.</string>
     <string name="copy_code_label">코드 복사</string>
     <string name="code_copy_success_message">식별 코드를 복사했어요</string>