Merge pull request #23 from Nexters/feature/camera-ui

[FEAT] [#7] 사진 가이드 화면 UI 구현

app/src/main/AndroidManifest.xml

@@ -12,6 +12,7 @@
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
+        android:screenOrientation="portrait"
         android:supportsRtl="true"
         android:theme="@style/Theme.Ilab"
         tools:targetApi="31">

build-logic/src/main/kotlin/com/nexters/ilab/android/Compose.kt

@@ -19,6 +19,7 @@ internal fun Project.configureCompose(extension: CommonExtension<*, *, *, *, *>)
         dependencies {
             implementation(libs.androidx.compose.bom)
             androidTestImplementation(libs.androidx.compose.bom)
+            implementation(libs.androidx.compose.material.iconsExtended)
             implementation(libs.androidx.compose.material3)
             implementation(libs.androidx.compose.ui)
             implementation(libs.androidx.compose.ui.tooling.preview)

core/designsystem/src/main/kotlin/com/nexters/ilab/android/core/designsystem/theme/Color.kt

@@ -9,3 +9,36 @@ val Pink80 = Color(0xFFEFB8C8)
 val Purple40 = Color(0xFF6650a4)
 val PurpleGrey40 = Color(0xFF625b71)
 val Pink40 = Color(0xFF7D5260)
+
+val PurpleBlue100 = Color(0xFFF1F5FF)
+val PurpleBlue200 = Color(0xFFDCE6FE)
+val PurpleBlue300 = Color(0xFFB9CEFD)
+val PurpleBlue400 = Color(0xFF97B5FD)
+val PurpleBlue500 = Color(0xFF749DFC)
+val PurpleBlue600 = Color(0xFF5A8BFF)
+val PurpleBlue700 = Color(0xFF346AE9)
+val PurpleBlue800 = Color(0xFF2248AC)
+val PurpleBlue900 = Color(0xFF0B235C)
+
+val Blue100 = Color(0xFFEEFAFF)
+val Blue200 = Color(0xFFDAF4FF)
+val Blue300 = Color(0xFFA0E2FF)
+val Blue400 = Color(0xFF61CCF6)
+val Blue500 = Color(0xFF0AB7FF)
+val Blue600 = Color(0xFF0791E0)
+val Blue700 = Color(0xFF0079C9)
+val Blue800 = Color(0xFF0066AF)
+val Blue900 = Color(0xFF043A6F)
+
+val Gray100 = Color(0xFFF2F3F6)
+val Gray200 = Color(0xFFE3E5E9)
+val Gray300 = Color(0xFFD7D8DA)
+val Gray400 = Color(0xFFBDBEC0)
+val Gray500 = Color(0xFF747479)
+val Gray600 = Color(0xFF424243)
+val Gray700 = Color(0xFF2B2B2B)
+val Gray800 = Color(0xFF1C1C1C)
+val Gray900 = Color(0xFF121212)
+
+val SystemGreen = Color(0xFF4FCF6B)
+val SystemRed = Color(0xFFFF584E)

core/designsystem/src/main/kotlin/com/nexters/ilab/android/core/designsystem/theme/Font.kt

@@ -0,0 +1,65 @@
+package com.nexters.ilab.android.core.designsystem.theme
+
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.Font
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+import com.nexters.ilab.android.core.designsystem.R
+
+val pretendardFamily = FontFamily(
+    Font(R.font.pretendard_bold, FontWeight.Bold, FontStyle.Normal),
+    Font(R.font.pretendard_semi_bold, FontWeight.SemiBold, FontStyle.Normal),
+    Font(R.font.pretendard_medium, FontWeight.Medium, FontStyle.Normal),
+    Font(R.font.pretendard_regular, FontWeight.Normal, FontStyle.Normal),
+)
+
+val Title1 = TextStyle(
+    fontFamily = pretendardFamily,
+    fontWeight = FontWeight.Bold,
+    fontSize = 28.sp,
+    lineHeight = 39.sp,
+)
+
+val Title2 = TextStyle(
+    fontFamily = pretendardFamily,
+    fontWeight = FontWeight.SemiBold,
+    fontSize = 20.sp,
+    lineHeight = 28.sp,
+)
+
+val Subtitle1 = TextStyle(
+    fontFamily = pretendardFamily,
+    fontWeight = FontWeight.SemiBold,
+    fontSize = 18.sp,
+    lineHeight = 25.sp,
+)
+
+val Subtitle2 = TextStyle(
+    fontFamily = pretendardFamily,
+    fontWeight = FontWeight.SemiBold,
+    fontSize = 16.sp,
+    lineHeight = 22.sp,
+)
+
+val Contents1 = TextStyle(
+    fontFamily = pretendardFamily,
+    fontWeight = FontWeight.Medium,
+    fontSize = 16.sp,
+    lineHeight = 24.sp,
+)
+
+val Contents2 = TextStyle(
+    fontFamily = pretendardFamily,
+    fontWeight = FontWeight.Normal,
+    fontSize = 14.sp,
+    lineHeight = 22.sp,
+)
+
+val Contents3 = TextStyle(
+    fontFamily = pretendardFamily,
+    fontWeight = FontWeight.Normal,
+    fontSize = 12.sp,
+    lineHeight = 18.sp,
+)

core/designsystem/src/main/kotlin/com/nexters/ilab/android/core/designsystem/theme/Theme.kt

@@ -10,6 +10,7 @@ import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
@@ -53,11 +54,24 @@ fun ILabTheme(
         else -> LightColorScheme
     }
     val view = LocalView.current
+
     if (!view.isInEditMode) {
         SideEffect {
             val window = (view.context as Activity).window
-            window.statusBarColor = colorScheme.primary.toArgb()
-            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
+
+            window.statusBarColor = if (darkTheme) Color.Black.toArgb() else Color.White.toArgb()
+            window.navigationBarColor = if (darkTheme) Color.Black.toArgb() else Color.White.toArgb()
+
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+                // remove unnecessary black screen from bars
+                window.isNavigationBarContrastEnforced = false
+            }
+
+            val windowsInsetsController = WindowCompat.getInsetsController(window, view)
+
+            // status bar's icon always visible
+            windowsInsetsController.isAppearanceLightStatusBars = !darkTheme
+            windowsInsetsController.isAppearanceLightNavigationBars = !darkTheme
         }
     }
 

core/designsystem/src/main/res/drawable/ic_arrow_back.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="11dp"
+    android:height="19dp"
+    android:viewportWidth="11"
+    android:viewportHeight="19">
+  <group>
+    <clip-path
+        android:pathData="M0,0h10.5v18.5h-10.5z"/>
+    <path
+        android:pathData="M9.55,17.75L0.75,9.26L9.75,0.75"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.5"
+        android:fillColor="#00000000"
+        android:strokeColor="#121212"/>
+  </group>
+</vector>

core/designsystem/src/main/res/drawable/ic_close.xml

@@ -0,0 +1,22 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <group>
+    <clip-path
+        android:pathData="M0,0h24v24h-24z"/>
+    <path
+        android:pathData="M4.29,4.29C6.56,6.68 19.71,19.71 19.71,19.71"
+        android:strokeWidth="1.5"
+        android:fillColor="#00000000"
+        android:strokeColor="#121212"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M19.71,4.29C17.33,6.57 4.29,19.71 4.29,19.71"
+        android:strokeWidth="1.5"
+        android:fillColor="#00000000"
+        android:strokeColor="#121212"
+        android:strokeLineCap="round"/>
+  </group>
+</vector>

core/designsystem/src/main/res/drawable/ic_guide_error.xml

@@ -0,0 +1,21 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+  <path
+      android:pathData="M10,10m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"
+      android:fillColor="#FF584E"/>
+  <path
+      android:pathData="M6.364,6.363C7.434,7.491 13.636,13.636 13.636,13.636"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+  <path
+      android:pathData="M13.636,6.363C12.514,7.439 6.364,13.636 6.364,13.636"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#ffffff"
+      android:strokeLineCap="round"/>
+</vector>

core/designsystem/src/main/res/drawable/ic_guide_right.xml

@@ -0,0 +1,14 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="20dp"
+    android:height="20dp"
+    android:viewportWidth="20"
+    android:viewportHeight="20">
+    <path
+        android:fillColor="#4FCF6B"
+        android:pathData="M10,10m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M10,10m-4.855,0a4.855,4.855 0,1 1,9.709 0a4.855,4.855 0,1 1,-9.709 0"
+        android:strokeWidth="1.2"
+        android:strokeColor="#ffffff" />
+</vector>

core/designsystem/src/main/res/values/strings.xml

@@ -5,4 +5,25 @@
     <string name="my_page">마이페이지</string>
     <string name="error_message_network">네트워크 연결이 원활하지 않습니다.</string>
     <string name="error_message_unknown">알 수 없는 오류가 발생하였습니다.</string>
+
+    <!--    camera-->
+    <string name="upload_top_title">사진 가이드</string>
+    <string name="upload_check_top_title">가이드 확인</string>
+    <string name="take_photo">사진 찍기</string>
+    <string name="photo_library">사진 보관함</string>
+    <string name="change_photo">사진 바꾸기</string>
+    <string name="check">확인</string>
+    <string name="good">GOOD</string>
+    <string name="good_example">&#160;좋은 예시</string>
+    <string name="good_example_description">- 밝고 선명한 얼굴, 카메라를 보고 있는 사진\n- 내가 제일 잘나왔다고 생각하는 사진</string>
+    <string name="normal">NORMAL</string>
+    <string name="bad">BAD</string>
+    <string name="bad_example">&#160;좋지 않은 예시</string>
+    <string name="bad_example_description">- 어둡거나 흐린 얼굴\n- 얼굴을 가린 사진(안경, 마스크, 모자 등)</string>
+    <string name="check_guide_twice">다시 한번\n확인해주세요!</string>
+    <string name="check_needed_for_accurate_result">정확한 결과를 위해 확인이 필요합니다.</string>
+    <string name="choice_good_example_first">밝고 선명한 얼굴, 카메라 보고 있는 사진을 선택해주세요.</string>
+    <string name="choice_good_example_second">내가 제일 잘나왔다고 생각하는 사진을 선택해주세요.</string>
+    <string name="avoid_bad_example_first">어둡거나 흐린 사진은 피해주세요.</string>
+    <string name="avoid_bad_example_second">안경이나 마스크, 모자 등 얼굴을 가린 사진은 피해주세요.</string>
 </resources>

core/ui/src/main/kotlin/com/nexters/ilab/core/ui/component/Button.kt

@@ -0,0 +1,135 @@
+package com.nexters.ilab.core.ui.component
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.sizeIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.nexters.ilab.android.core.designsystem.theme.Gray300
+import com.nexters.ilab.android.core.designsystem.theme.PurpleBlue600
+import com.nexters.ilab.core.ui.ComponentPreview
+
+// leadingIcon for login button
+@Composable
+fun ILabButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    containerColor: Color = PurpleBlue600,
+    contentColor: Color = Color.White,
+    disabledContainerColor: Color = Gray300,
+    disabledContentColor: Color = Color.White,
+    text: @Composable () -> Unit,
+    leadingIcon: @Composable (() -> Unit)? = null,
+) {
+    ILabButton(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled,
+        containerColor = containerColor,
+        contentColor = contentColor,
+        disabledContainerColor = disabledContainerColor,
+        disabledContentColor = disabledContentColor,
+        contentPadding = if (leadingIcon != null) {
+            ButtonDefaults.ButtonWithIconContentPadding
+        } else {
+            ButtonDefaults.ContentPadding
+        },
+    ) {
+        ILabButtonContent(
+            text = text,
+            leadingIcon = leadingIcon,
+        )
+    }
+}
+
+@Composable
+fun ILabButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    containerColor: Color = PurpleBlue600,
+    contentColor: Color = Color.White,
+    disabledContainerColor: Color = Gray300,
+    disabledContentColor: Color = Color.White,
+    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
+    content: @Composable RowScope.() -> Unit,
+) {
+    Button(
+        onClick = onClick,
+        modifier = modifier,
+        enabled = enabled,
+        shape = RoundedCornerShape(12.dp),
+        colors = ButtonDefaults.buttonColors(
+            containerColor = containerColor,
+            contentColor = contentColor,
+            disabledContainerColor = disabledContainerColor,
+            disabledContentColor = disabledContentColor,
+        ),
+        contentPadding = contentPadding,
+        content = content,
+    )
+}
+
+@Composable
+private fun ILabButtonContent(
+    text: @Composable () -> Unit,
+    leadingIcon: @Composable (() -> Unit)? = null,
+) {
+    if (leadingIcon != null) {
+        Box(Modifier.sizeIn(maxHeight = ButtonDefaults.IconSize)) {
+            leadingIcon()
+        }
+    }
+    Box(
+        Modifier.padding(
+            start = if (leadingIcon != null) {
+                ButtonDefaults.IconSpacing
+            } else {
+                0.dp
+            },
+        ),
+    ) {
+        text()
+    }
+}
+
+@ComponentPreview
+@Composable
+fun ILabButtonPreview() {
+    ILabButton(
+        onClick = {},
+        text = {
+            Text("Button")
+        },
+    )
+}
+
+@ComponentPreview
+@Composable
+fun ILabButtonWithLeadingIconPreview() {
+    ILabButton(
+        onClick = {},
+        text = {
+            Text("Button")
+        },
+        leadingIcon = {
+            Icon(
+                imageVector = Icons.Filled.Check,
+                contentDescription = "Navigation icon",
+                tint = Color.White,
+            )
+        },
+    )
+}