[fix] 댓글 유저 이미지 상단 정렬

core/ui/src/main/java/com/boostcamp/dreamteam/dreamdiary/ui/util/NotImplementedFeatureUtil.kt

@@ -0,0 +1,9 @@
+package com.boostcamp.dreamteam.dreamdiary.ui.util
+
+import android.content.Context
+import android.widget.Toast
+import com.boostcamp.dreamteam.dreamdiary.ui.R
+
+fun notImplementedFeature(context: Context) {
+    Toast.makeText(context, context.getString(R.string.not_implemented_feature), Toast.LENGTH_SHORT).show()
+}

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

@@ -10,4 +10,5 @@
     <string name="dialog_signin_text">이 기능을 사용하려면 로그인이 필요해요.\n로그인 할까요?</string>
     <string name="dialog_signin_confirm">확인</string>
     <string name="dialog_signin_cancel">취소</string>
+    <string name="not_implemented_feature" >미구현 기능입니다. 다음 업데이트를 기대해주세요! :)</string>
 </resources>

feature/community/src/main/java/com/boostcamp/dreamteam/dreamdiary/community/detail/component/CommunityDetailComment.kt

@@ -1,55 +1,93 @@
 package com.boostcamp.dreamteam.dreamdiary.community.detail.component
 
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material3.ListItem
-import androidx.compose.material3.LocalContentColor
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.MoreVert
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.scale
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.boostcamp.dreamteam.dreamdiary.community.model.CommentUi
 import com.boostcamp.dreamteam.dreamdiary.community.model.commentUiPreview1
 import com.boostcamp.dreamteam.dreamdiary.community.model.commentUiPreview2
 import com.boostcamp.dreamteam.dreamdiary.designsystem.component.DdAsyncImage
 import com.boostcamp.dreamteam.dreamdiary.designsystem.theme.DreamdiaryTheme
+import com.boostcamp.dreamteam.dreamdiary.ui.util.notImplementedFeature
 
 @Composable
 internal fun CommunityDetailComment(
     comment: CommentUi,
     modifier: Modifier = Modifier,
 ) {
-    CompositionLocalProvider(
-        LocalContentColor provides MaterialTheme.colorScheme.surface,
-        LocalTextStyle provides LocalTextStyle.current.copy(
-            color = MaterialTheme.colorScheme.onSurface,
-        ),
-    ) {
-        ListItem(
-            headlineContent = { Text(text = comment.content) },
-            modifier = modifier,
-            overlineContent = {
-                Text(
-                    text = comment.author.username,
-                    color = MaterialTheme.colorScheme.onSurfaceVariant,
-                )
-            },
-            leadingContent = {
+    Surface(modifier = modifier) {
+        Box {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 16.dp, vertical = 8.dp),
+            ) {
                 DdAsyncImage(
                     model = comment.author.profileImageUrl,
                     contentDescription = null,
                     modifier = Modifier
-                        .size(40.dp)
+                        .size(24.dp)
                         .clip(MaterialTheme.shapes.extraLarge),
                     contentScale = ContentScale.Crop,
                 )
-            },
-        )
+                Spacer(modifier = Modifier.width(16.dp))
+
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .weight(1f)
+                        .padding(end = 12.dp),
+                ) {
+                    Text(
+                        text = comment.author.username,
+                        style = MaterialTheme.typography.labelMedium.copy(
+                            color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.8f),
+                        ),
+                        maxLines = 1,
+                    )
+                    Text(
+                        text = comment.content,
+                        style = MaterialTheme.typography.bodyMedium,
+                        lineHeight = LocalTextStyle.current.fontSize * 1.5f,
+                    )
+                }
+            }
+            val context = LocalContext.current
+            IconButton(
+                onClick = { notImplementedFeature(context) },
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .scale(0.7f),
+            ) {
+                Icon(
+                    imageVector = Icons.Default.MoreVert,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f),
+                )
+            }
+        }
     }
 }
 

feature/community/src/main/java/com/boostcamp/dreamteam/dreamdiary/community/model/CommentUi.kt

@@ -33,7 +33,7 @@ internal val commentUiPreview1 = CommentUi(
 internal val commentUiPreview2 = CommentUi(
     id = "2",
     author = userUiPreview2,
-    content = "댓글 내용",
+    content = "두얏나점은 검미달의 검꼬허어 윽남산습니다 으경인퉀은, 막악박느히다 단으타후 이난류에서. 브터롸어 훌셔다 아낙마식, 줍이까가는 곰븡앨똔긴흔은 횜지색도 니븧이도. 하둔칭대고라일깅밨 비아릐오다가 모요게갠 익혹게 잠느가 도냐자아야 우먹하덜군 레언어저다 매허가 켕올은. 러이할 가그아맀이라 븓너데데스딘 요돈난닌은 브벖링아느어야 안샜댑비다, 도비에 가즤겐은 격달호버를 연닐으로. 게고를 부흐뎌댸를 디가, 돘판으는 하논잔바자두가 퇭곤처럼, 살즈디디노길. 지다그어 양발구으 저징즌디긴꺈 세엤소긱이 델시 촐고으촹을 멧지를 긴느마 애히이엤안으라. 내샤민노아서 눅닐여러다 런노알 춘앨 딩혼 더슴을 반군퇀저후시를 시흥섰 매네다. 머바사를 사늰켱이 난혐셔에서 하저 이도 바팅므산 시오 호숸훕니다 냐디타닥 기니행.",
     isLiked = false,
 )