인증샷 수정 화면 UI 구현 및 API 연동

core/design-system/src/main/java/com/twix/designsystem/components/button/AppRoundButton.kt

@@ -26,9 +26,9 @@ import com.twix.domain.model.enums.AppTextStyle
 fun AppRoundButton(
     text: String,
     textColor: Color,
+    backgroundColor: Color,
     modifier: Modifier = Modifier,
     textStyle: AppTextStyle = AppTextStyle.T2,
-    backgroundColor: Color,
     borderColor: Color = GrayColor.C500,
     hasBorder: Boolean = true,
 ) {

core/design-system/src/main/java/com/twix/designsystem/components/comment/CommentAnchorFrame.kt

@@ -0,0 +1,105 @@
+package com.twix.designsystem.components.comment
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.ime
+import androidx.compose.foundation.layout.offset
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import com.twix.designsystem.components.comment.model.CommentUiModel
+import com.twix.designsystem.theme.DimmedColor
+import com.twix.ui.extension.noRippleClickable
+
+/**
+ * 특정 UI 요소(Anchor) 하단에 [CommentBox]를 배치하고, 키보드 활성화 상태에 따라 위치를 동적으로 조정하는 프레임 컴포저블
+ *
+ * 이 컴포저블은 평상시에는 [anchorBottom] 좌표를 기준으로 배치
+ * 키보드가 올라와 코맨트창이 가려질 경우 키보드 바로 위로 위치를 자동으로 이동
+ *
+ * @param uiModel 댓글창의 상태(텍스트, 포커스 상태)를 담고 있는 데이터 모델
+ * @param anchorBottom 댓글창 배치의 기준이 되는 상위 요소의 바닥(Bottom) Y 좌표 (px 단위)
+ * @param onCommentChanged 댓글 내용이 변경될 때 호출되는 콜백
+ * @param onFocusChanged 댓글창의 포커스 상태가 변경될 때 호출되는 콜백 (포커스 시 배경 딤 처리 등에 사용)
+ * @param modifier 레이아웃 수정을 위한 [Modifier]
+ */
+@Composable
+fun CommentAnchorFrame(
+    uiModel: CommentUiModel,
+    anchorBottom: Float,
+    onCommentChanged: (String) -> Unit,
+    onFocusChanged: (Boolean) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    if (anchorBottom == 0f) return
+
+    val density = LocalDensity.current
+    val focusManager = LocalFocusManager.current
+    val imeBottom = WindowInsets.ime.getBottom(density)
+    val paddingBottom = with(density) { 24.dp.toPx() }
+
+    var commentBoxHeight by remember { mutableFloatStateOf(0f) }
+    val defaultY = anchorBottom - commentBoxHeight - paddingBottom
+
+    BoxWithConstraints(modifier = modifier.fillMaxSize()) {
+        val screenHeight = constraints.maxHeight.toFloat()
+        val keyboardTop = screenHeight - imeBottom
+
+        AnimatedVisibility(
+            visible = uiModel.isFocused,
+            enter = fadeIn(),
+            exit = fadeOut(),
+        ) {
+            Box(
+                modifier =
+                    Modifier
+                        .fillMaxSize()
+                        .background(DimmedColor.D070)
+                        .noRippleClickable { focusManager.clearFocus() },
+            )
+        }
+        CommentBox(
+            uiModel = uiModel,
+            onCommentChanged = onCommentChanged,
+            onFocusChanged = onFocusChanged,
+            onHeightMeasured = { height ->
+                if (commentBoxHeight != height) commentBoxHeight = height
+            },
+            modifier =
+                Modifier
+                    .fillMaxWidth()
+                    .offset {
+                        /**
+                         * 키보드가 활성화되었고, 댓글창이 키보드 위치보다 아래에 있어 가려지는 경우
+                         * */
+                        val targetY =
+                            if (imeBottom > 0 && (defaultY + commentBoxHeight) > keyboardTop) {
+                                /**
+                                 * 화면 전체 높이 - 키보드 높이 - 코멘트 높이
+                                 * */
+                                (screenHeight - imeBottom - commentBoxHeight).toInt()
+                            } else {
+                                /**
+                                 * 키보드가 없거나, 댓글창이 키보드에 가려지지 않는 경우
+                                 * */
+                                defaultY.toInt()
+                            }
+                        IntOffset(x = 0, y = targetY)
+                    },
+        )
+    }
+}

core/design-system/src/main/java/com/twix/designsystem/components/comment/CommentBox.kt

@@ -3,10 +3,10 @@ package com.twix.designsystem.components.comment
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import com.twix.designsystem.R
@@ -20,11 +20,15 @@ fun CommentBox(
     uiModel: CommentUiModel,
     onCommentChanged: (String) -> Unit,
     onFocusChanged: (Boolean) -> Unit,
+    onHeightMeasured: (Float) -> Unit,
     modifier: Modifier = Modifier,
 ) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = modifier,
+        modifier =
+            modifier.onSizeChanged { size ->
+                onHeightMeasured(size.height.toFloat())
+            },
     ) {
         AppText(
             text = if (uiModel.isFocused) stringResource(R.string.comment_condition_guide) else "",
@@ -33,13 +37,11 @@ fun CommentBox(
         )
 
         Spacer(modifier = Modifier.height(8.dp))
+
         CommentTextField(
             uiModel = uiModel,
             onCommitComment = onCommentChanged,
             onFocusChanged = onFocusChanged,
-            modifier =
-                Modifier
-                    .padding(bottom = 20.dp),
         )
     }
 }

core/design-system/src/main/java/com/twix/designsystem/components/comment/CommentTextField.kt

@@ -21,13 +21,12 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.graphics.drawscope.Stroke
-import androidx.compose.ui.layout.boundsInRoot
-import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -50,13 +49,30 @@ fun CommentTextField(
     enabled: Boolean = true,
     onCommitComment: (String) -> Unit = {},
     onFocusChanged: (Boolean) -> Unit = {},
-    onPositioned: (Rect) -> Unit = {},
 ) {
     val focusManager = LocalFocusManager.current
     val focusRequester = remember { FocusRequester() }
     val keyboardState by keyboardAsState()
 
-    var internalValue by rememberSaveable(uiModel.comment) { mutableStateOf(uiModel.comment) }
+    var internalValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
+        mutableStateOf(
+            TextFieldValue(
+                text = uiModel.value,
+                selection = TextRange(uiModel.value.length),
+            ),
+        )
+    }
+
+    LaunchedEffect(uiModel.value) {
+        if (uiModel.value != internalValue.text) {
+            internalValue =
+                TextFieldValue(
+                    text = uiModel.value,
+                    selection = TextRange(uiModel.value.length),
+                )
+        }
+    }
+
     var isInitialized by remember { mutableStateOf(false) }
 
     LaunchedEffect(keyboardState) {
@@ -66,31 +82,36 @@ fun CommentTextField(
             when (keyboardState) {
                 Keyboard.Opened -> Unit
                 Keyboard.Closed -> {
-                    onCommitComment(internalValue.trim())
+                    onCommitComment(internalValue.text.trim())
                     focusManager.clearFocus()
                 }
             }
         }
     }
 
     LaunchedEffect(uiModel.isFocused) {
+        /**
+         * 외부에서 포커스 상태를 제어하는 경우
+         * e.g 사진 촬영 & 사진 선택
+         * */
         if (uiModel.isFocused) focusRequester.requestFocus()
     }
 
     Box(
         modifier =
             modifier
-                .onGloballyPositioned { coordinates ->
-                    onPositioned(coordinates.boundsInRoot())
-                }.noRippleClickable {
+                .noRippleClickable {
                     focusRequester.requestFocus()
                 },
     ) {
         TextField(
             value = internalValue,
             onValueChange = { newValue ->
-                if (newValue.length <= CommentUiModel.COMMENT_COUNT) {
-                    internalValue = newValue
+                if (newValue.text.length <= CommentUiModel.COMMENT_COUNT) {
+                    internalValue =
+                        newValue.copy(
+                            selection = TextRange(newValue.text.length),
+                        )
                 }
             },
             enabled = enabled,
@@ -130,16 +151,16 @@ fun CommentTextField(
         ) {
             repeat(CommentUiModel.COMMENT_COUNT) { index ->
                 val char =
-                    if (uiModel.isFocused || internalValue.isNotEmpty()) {
-                        internalValue.getOrNull(index)?.toString()
+                    if (uiModel.isFocused || internalValue.text.isNotEmpty()) {
+                        internalValue.text.getOrNull(index)?.toString()
                     } else {
                         stringResource(R.string.comment_text_field_placeholder)[index].toString()
                     }.orEmpty()
 
                 CommentCircle(
                     text = char,
-                    showPlaceholder = !uiModel.isFocused && internalValue.isEmpty(),
-                    showCursor = uiModel.isFocused && index == internalValue.length,
+                    showPlaceholder = !uiModel.isFocused && internalValue.text.isEmpty(),
+                    showCursor = uiModel.isFocused && index == internalValue.text.length,
                     modifier =
                         Modifier.noRippleClickable {
                             focusRequester.requestFocus()
@@ -159,7 +180,6 @@ private fun CommentTextFieldPreview() {
         CommentTextField(
             uiModel = CommentUiModel(text, isFocused),
             onFocusChanged = { isFocused = it },
-            onPositioned = {},
         )
     }
 }

core/design-system/src/main/java/com/twix/designsystem/components/comment/model/CommentUiModel.kt

@@ -4,19 +4,19 @@ import androidx.compose.runtime.Immutable
 
 @Immutable
 data class CommentUiModel(
-    val comment: String = "",
+    val value: String = "",
     val isFocused: Boolean = false,
 ) {
     val hasMaxCommentLength: Boolean
-        get() = comment.length == COMMENT_COUNT
+        get() = value.length == COMMENT_COUNT
 
     val canUpload: Boolean
         get() =
-            comment.isEmpty() ||
-                comment.isNotEmpty() &&
+            value.isEmpty() ||
+                value.isNotEmpty() &&
                 hasMaxCommentLength
 
-    fun updateComment(newComment: String): CommentUiModel = copy(comment = newComment)
+    fun updateComment(newComment: String): CommentUiModel = copy(value = newComment)
 
     fun updateFocus(isFocused: Boolean) = copy(isFocused = isFocused)
 

feature/task-certification/src/main/java/com/twix/task_certification/detail/component/BackgroundCard.kt → core/design-system/src/main/java/com/twix/designsystem/components/photolog/BackgroundCard.kt

@@ -1,4 +1,4 @@
-package com.twix.task_certification.detail.component
+package com.twix.designsystem.components.photolog
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
@@ -16,15 +16,14 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.twix.designsystem.R
 import com.twix.designsystem.components.button.AppRoundButton
 import com.twix.designsystem.components.text.AppText
 import com.twix.designsystem.theme.CommonColor
 import com.twix.designsystem.theme.GrayColor
 import com.twix.designsystem.theme.TwixTheme
 import com.twix.domain.model.enums.AppTextStyle
-import com.twix.task_certification.R
 import com.twix.ui.extension.noRippleClickable
-import com.twix.designsystem.R as DesR
 
 @Composable
 fun BackgroundCard(
@@ -69,7 +68,7 @@ fun BackgroundCard(
                 }
 
                 Image(
-                    imageVector = ImageVector.vectorResource(DesR.drawable.ic_keepi_sting),
+                    imageVector = ImageVector.vectorResource(R.drawable.ic_keepi_sting),
                     contentDescription = null,
                     modifier =
                         Modifier
@@ -86,7 +85,7 @@ fun BackgroundCard(
 fun PreviewBackgroundCard() {
     TwixTheme {
         BackgroundCard(
-            buttonTitle = stringResource(R.string.task_certification_detail_partner_sting),
+            buttonTitle = stringResource(R.string.word_sting),
             uploadedAt = "2023.10.31 23:59",
             onClick = {},
             isCertificated = true,

feature/task-certification/src/main/java/com/twix/task_certification/detail/component/CertificatedCard.kt → core/design-system/src/main/java/com/twix/designsystem/components/photolog/CertificatedCard.kt

@@ -1,4 +1,4 @@
-package com.twix.task_certification.detail.component
+package com.twix.designsystem.components.photolog
 
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
@@ -18,7 +18,7 @@ import com.twix.designsystem.components.comment.model.CommentUiModel
 import com.twix.designsystem.theme.TwixTheme
 
 @Composable
-internal fun CertificatedCard(
+fun CertificatedCard(
     imageUrl: String?,
     comment: String?,
 ) {

feature/task-certification/src/main/java/com/twix/task_certification/detail/component/ForegroundCard.kt → core/design-system/src/main/java/com/twix/designsystem/components/photolog/ForegroundCard.kt

@@ -1,19 +1,18 @@
-package com.twix.task_certification.detail.component
+package com.twix.designsystem.components.photolog
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import com.twix.designsystem.R
 import com.twix.designsystem.components.text.AppText
 import com.twix.designsystem.theme.CommonColor
 import com.twix.designsystem.theme.GrayColor
 import com.twix.designsystem.theme.TwixTheme
 import com.twix.domain.model.enums.AppTextStyle
 import com.twix.domain.model.enums.BetweenUs
-import com.twix.task_certification.R
-import com.twix.designsystem.R as DesR
 
 @Composable
-internal fun ForegroundCard(
+fun ForegroundCard(
     isCertificated: Boolean,
     nickName: String,
     imageUrl: String?,
@@ -32,9 +31,11 @@ internal fun ForegroundCard(
             AppText(
                 text =
                     when (currentShow) {
-                        BetweenUs.ME -> stringResource(DesR.string.keep_it_up)
+                        BetweenUs.ME -> stringResource(R.string.keep_it_up)
                         BetweenUs.PARTNER ->
-                            stringResource(R.string.task_certification_detail_partner_not_task_certification).format(nickName)
+                            stringResource(R.string.partner_not_task_certification).format(
+                                nickName,
+                            )
                     },
                 style = AppTextStyle.H2,
                 color = GrayColor.C500,