Merge pull request #25 from YAPP-Github/feature/TNT-113

[TNT-113] 트레이니 회원 정보 입력 화면 구현
YAPP-Github · Jan 21, 2025 · 6c8e8e9 · 6c8e8e9
2 parents af4b74d + 184074d
commit 6c8e8e9
Show file tree

Hide file tree

Showing 12 changed files with 979 additions and 52 deletions.
diff --git a/core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TextField.kt b/core/designsystem/src/main/java/co/kr/tnt/designsystem/component/TextField.kt
@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -25,6 +26,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import co.kr.tnt.core.designsystem.R
@@ -41,6 +43,7 @@ fun TnTTextField(
     isSingleLine: Boolean = false,
     showWarning: Boolean = false,
     warningMessage: String? = null,
+    keyboardType: KeyboardType = KeyboardType.Text,
     trailingComponent: @Composable BoxScope.() -> Unit = {},
 ) {
     var isFocused by remember { mutableStateOf(false) }
@@ -82,6 +85,9 @@ fun TnTTextField(
                     }
                     innerTextField()
                 },
+                keyboardOptions = KeyboardOptions(
+                    keyboardType = keyboardType,
+                ),
             )
 
             Box(
@@ -119,8 +125,10 @@ fun TnTLabeledTextField(
     maxLength: Int = 15,
     isSingleLine: Boolean = false,
     showWarning: Boolean = false,
+    showCounter: Boolean = true,
     isRequired: Boolean = false,
     warningMessage: String? = null,
+    keyboardType: KeyboardType = KeyboardType.Text,
     trailingComponent: @Composable BoxScope.() -> Unit = {},
 ) {
     val counterColor = when (showWarning) {
@@ -150,11 +158,13 @@ fun TnTLabeledTextField(
             }
             Spacer(Modifier.weight(1f))
 
-            Text(
-                text = stringResource(R.string.text_counter, value.length, maxLength),
-                style = TnTTheme.typography.label1Medium,
-                color = counterColor,
-            )
+            if (showCounter) {
+                Text(
+                    text = stringResource(R.string.text_counter, value.length, maxLength),
+                    style = TnTTheme.typography.label1Medium,
+                    color = counterColor,
+                )
+            }
         }
 
         TnTTextField(
@@ -164,6 +174,7 @@ fun TnTLabeledTextField(
             isSingleLine = isSingleLine,
             showWarning = showWarning,
             warningMessage = warningMessage,
+            keyboardType = keyboardType,
             trailingComponent = trailingComponent,
             modifier = Modifier.fillMaxWidth(),
         )
@@ -178,6 +189,7 @@ fun TnTOutlinedTextField(
     placeholder: String? = null,
     maxLength: Int = 15,
     isError: Boolean = false,
+    keyboardType: KeyboardType = KeyboardType.Text,
 ) {
     var isFocused by remember { mutableStateOf(false) }
 
@@ -229,6 +241,9 @@ fun TnTOutlinedTextField(
                     innerTextField()
                 }
             },
+            keyboardOptions = KeyboardOptions(
+                keyboardType = keyboardType,
+            ),
         )
         Text(
             text = "${value.length}/$maxLength",

diff --git a/core/designsystem/src/main/res/drawable/img_default_profile_trainee.xml b/core/designsystem/src/main/res/drawable/img_default_profile_trainee.xml
@@ -0,0 +1,116 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="133dp"
+    android:height="133dp"
+    android:viewportWidth="133"
+    android:viewportHeight="133">
+  <group>
+    <clip-path
+        android:pathData="M66.4,0.2L66.4,0.2A66,66 0,0 1,132.4 66.2L132.4,66.2A66,66 0,0 1,66.4 132.2L66.4,132.2A66,66 0,0 1,0.4 66.2L0.4,66.2A66,66 0,0 1,66.4 0.2z"/>
+    <path
+        android:pathData="M66.4,0.2L66.4,0.2A66,66 0,0 1,132.4 66.2L132.4,66.2A66,66 0,0 1,66.4 132.2L66.4,132.2A66,66 0,0 1,0.4 66.2L0.4,66.2A66,66 0,0 1,66.4 0.2z"
+        android:fillColor="#FFF0F0"/>
+    <path
+        android:pathData="M52.12,85.81C40.28,86.51 27.86,104.94 23.13,114.07C27.67,121.52 43.09,136.4 68.4,136.4C93.71,136.4 126.42,122.99 117,102.81C105.33,86.75 87.3,83.37 78.9,84.23V88.78C78.9,90.48 73.89,98.18 64.36,98.18C56.73,98.18 53.49,93.3 52.83,90.87L52.12,85.81Z"
+        android:fillColor="#FCA5A5"/>
+    <path
+        android:pathData="M56.51,55.92C56.51,55.92 54.43,60.88 55.52,64.72"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M52.72,67.1C52.72,67.1 54.18,69.6 58.17,69.44"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M53.51,48.62C53.51,48.62 51.3,46.11 47.31,47.33"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M60.09,59.2C60.56,59.21 61.02,58.83 61.03,58.25L61.04,55.67C61.05,55.19 60.68,54.71 60.13,54.7C59.66,54.7 59.2,55.08 59.19,55.65L59.17,58.24C59.17,58.81 59.54,59.2 60.09,59.2Z"
+        android:fillColor="#FCA5A5"/>
+    <path
+        android:pathData="M51.76,59.14C52.22,59.14 52.69,58.76 52.69,58.19L52.71,55.6C52.72,55.13 52.35,54.64 51.79,54.64C51.33,54.64 50.87,55.02 50.86,55.59L50.84,58.18C50.84,58.75 51.3,59.14 51.76,59.14Z"
+        android:fillColor="#FCA5A5"/>
+    <path
+        android:pathData="M41.55,50.92C41.55,50.92 35.45,49.06 35.2,57.68C35.05,66.3 43.11,65.4 43.11,65.4"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M42.24,57.15L38.08,57.12"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M82.37,51.03C82.71,55.73 81.48,59.36 81.48,59.36C81.48,59.36 83.88,59.09 90.52,51.09C99.58,40.24 88.36,30.29 88.36,30.29C83.06,20.58 73.68,24.82 73.68,24.82C73.68,24.82 51.01,11.35 41.45,27.28C41.45,27.28 26.03,37.23 37.7,48.76"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M80.6,52.84C80.6,52.84 70.13,53.82 65.37,46.69"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M66.65,48.43L68.93,52.85C68.93,52.85 50.6,53.48 47.68,47.43"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M47.66,50.78C47.66,50.78 43.76,51.8 41.65,48.91C41.56,48.72 41.29,48.81 41.28,49.1C41.64,51.21 42.43,56.49 42.4,60.6C42.36,65.87 46.35,77.97 60.87,78.84C74.75,79.62 80.49,71.27 81.56,63.81C81.66,63.14 82.13,62.66 82.78,62.67L86.76,62.31"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M49.07,75.65L49.25,89.29C49.35,90.7 49.97,91.96 51.05,92.94C54.57,96.26 63.86,102.72 76.44,93.3C78,92.13 78.93,90.1 78.8,88.08L78.78,71.72V71.72C78.78,71.72 86.6,73.2 89.12,70.39C91.16,68.1 92.04,64.75 91.25,60.25C89.27,54.1 86.6,55.84 86.6,55.84"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M78.58,76.19L48.78,88.73L47.94,73C47.94,73 59.15,80.74 65.6,78.86C75.17,76.07 78.78,71.05 78.58,71.79C78.45,72.65 78.58,76.19 78.58,76.19Z"
+        android:fillColor="#FCA5A5"/>
+    <path
+        android:pathData="M82.64,93.8C82.64,93.8 80.09,103.33 64.61,104.93C49.14,106.54 42.12,90.88 42.12,90.88"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M50.77,81.47C50.77,81.47 29.97,87.24 20.3,107.91"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M79.01,80.92C79.01,80.92 119.38,90.07 120.12,114.01"
+        android:strokeLineJoin="round"
+        android:strokeWidth="1.66785"
+        android:fillColor="#00000000"
+        android:strokeColor="#FCA5A5"
+        android:strokeLineCap="round"/>
+  </group>
+</vector>
diff --git a/core/designsystem/src/main/res/values/strings.xml b/core/designsystem/src/main/res/values/strings.xml
@@ -2,6 +2,7 @@
 <resources>
     <!--  TextField  -->
     <string name="text_counter">%1$d/%2$d자</string>
+    <string name="placeholder_content_input">내용을 입력해주세요</string>
 
     <!--  Sign Up  -->
     <string name="name">이름</string>
@@ -10,6 +11,12 @@
     <string name="trainer">트레이너</string>
     <string name="trainee">트레이니</string>
 
+    <string name="birthday_label">생년월일</string>
+    <string name="height_label">키</string>
+    <string name="weight_label">체중</string>
+    <string name="height_unit">cm</string>
+    <string name="weight_unit">kg</string>
+
     <string name="signup_warning_text_length">자 이하로 입력해주세요</string>
 
     <string name="signup_select_role_title">안녕하세요!\n어떤 회원으로 이용하시겠어요?</string>
@@ -18,7 +25,26 @@
     <string name="signup_set_name_title">이름이 어떻게 되세요?</string>
     <string name="signup_set_name_placeholder">이름을 입력해주세요</string>
 
+    <string name="signup_set_basic_info_title">회원님의 기본 정보를\n입력해주세요</string>
+    <string name="signup_set_basic_info_subtitle">PT에 참고할 기본 정보예요!</string>
+    <string name="signup_birthday_placeholder">2001/01/01</string>
+
+    <string name="signup_pt_purpose_title">PT를 받는 목적에 대해\n알려주세요!</string>
+    <string name="signup_pt_purpose_subtitle">다중 선택이 가능해요.</string>
+    <string name="signup_pt_purpose_loss_weight">체중 감량</string>
+    <string name="signup_pt_purpose_strength">근력 향상</string>
+    <string name="signup_pt_purpose_health_care">건강 관리</string>
+    <string name="signup_pt_purpose_flexibility">유연성 향상</string>
+    <string name="signup_pt_purpose_body_profile">바디프로필</string>
+    <string name="signup_pt_purpose_posture_correction">자세 교정</string>
+
+    <string name="signup_pt_precaution_title">트레이너가 꼭 알아야 할\n주의사항이 있나요?</string>
+    <string name="signup_pt_precaution_subtitle">트레이너에게 알려드릴게요.</string>
+
     <string name="signup_complete_trainer_title">만나서 반가워요\n%s 트레이너님!</string>
     <string name="signup_complete_trainer_subtitle">트레이니와 함께\n케미를 터뜨려보세요! 🧨</string>
 
+    <string name="signup_complete_trainee_title">만나서 반가워요\n%s 트레이니님!</string>
+    <string name="signup_complete_trainee_subtitle">트레이너와 함께\n케미를 터뜨려보세요! 🧨</string>
+
 </resources>
diff --git a/feature/signup/src/main/java/co/kr/tnt/signup/common/component/ProfileImageSection.kt b/feature/signup/src/main/java/co/kr/tnt/signup/common/component/ProfileImageSection.kt
@@ -0,0 +1,73 @@
+package co.kr.tnt.signup.common.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+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.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import co.kr.tnt.core.designsystem.R
+import co.kr.tnt.designsystem.theme.TnTTheme
+
+@Composable
+fun ProfileImageSection(
+    defaultImage: Int,
+    modifier: Modifier = Modifier,
+    @Suppress("UnusedParameter")
+    onImageSelected: () -> Unit,
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .wrapContentSize()
+            .padding(vertical = 12.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        // TODO 프로필 이미지 가져오기
+        Image(
+            painter = painterResource(defaultImage),
+            contentDescription = null,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier
+                .size(131.dp)
+                .clip(CircleShape),
+        )
+        // TODO 버튼 클릭 시 권한 확인 후 사진 선택
+        IconButton(
+            onClick = { },
+            modifier = Modifier
+                .size(28.dp)
+                .align(Alignment.BottomEnd),
+        ) {
+            Icon(
+                painter = painterResource(id = R.drawable.ic_edit),
+                contentDescription = null,
+                tint = Color.Unspecified,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun ProfileImageSectionPreview() {
+    TnTTheme {
+        ProfileImageSection(
+            defaultImage = R.drawable.img_default_profile_trainer,
+            modifier = Modifier.fillMaxWidth(),
+            onImageSelected = {},
+        )
+    }
+}