[NDGL-63] 장소 상세보기 화면 UI/UX 제작

core/ui/build.gradle.kts

@@ -9,4 +9,5 @@ android {
 dependencies {
     implementation(libs.androidx.core.ktx)
     implementation(libs.kotlinx.coroutines.core)
+    implementation(projects.core.util)
 }

core/ui/src/main/java/com/yapp/ndgl/core/ui/designsystem/NDGLInputModal.kt

@@ -0,0 +1,234 @@
+package com.yapp.ndgl.core.ui.designsystem
+
+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
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Dialog
+import com.yapp.ndgl.core.ui.theme.NDGLTheme
+
+@Composable
+fun NDGLInputModal(
+    modifier: Modifier = Modifier,
+    onDismissRequest: () -> Unit,
+    title: String,
+    value: String,
+    onValueChange: (String) -> Unit,
+    placeholder: String,
+    keyboardOptions: KeyboardOptions,
+    positiveButtonText: String,
+    onPositiveButtonClick: () -> Unit,
+    negativeButtonText: String,
+    onNegativeButtonClick: (() -> Unit) = {},
+    minHeight: Dp = 56.dp,
+    maxLines: Int = Int.MAX_VALUE,
+    textStyle: TextStyle,
+    placeholderStyle: TextStyle,
+    textAlign: TextAlign = TextAlign.Start,
+) {
+    val focusRequester = remember { FocusRequester() }
+    var textFieldValue by remember(value) {
+        mutableStateOf(TextFieldValue(value, selection = TextRange(value.length)))
+    }
+
+    LaunchedEffect(Unit) {
+        focusRequester.requestFocus()
+    }
+
+    // value가 변경되면 textFieldValue 업데이트
+    LaunchedEffect(value) {
+        if (textFieldValue.text != value) {
+            textFieldValue = TextFieldValue(
+                text = value,
+                selection = TextRange(value.length),
+            )
+        }
+    }
+
+    Dialog(onDismissRequest = onDismissRequest) {
+        Surface(
+            modifier = modifier.wrapContentHeight(),
+            shape = RoundedCornerShape(8.dp),
+            color = NDGLTheme.colors.white,
+            shadowElevation = 16.dp,
+        ) {
+            Column(
+                modifier = Modifier
+                    .padding(horizontal = 28.dp)
+                    .padding(top = 28.dp, bottom = 24.dp),
+                verticalArrangement = Arrangement.spacedBy(28.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+            ) {
+                Text(
+                    text = title,
+                    modifier = Modifier.fillMaxWidth(),
+                    color = NDGLTheme.colors.black900,
+                    textAlign = TextAlign.Center,
+                    style = NDGLTheme.typography.subtitleLgSemiBold,
+                )
+
+                BasicTextField(
+                    value = textFieldValue,
+                    onValueChange = { newValue ->
+                        textFieldValue = newValue
+                        onValueChange(newValue.text)
+                    },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .heightIn(min = minHeight)
+                        .clip(RoundedCornerShape(8.dp))
+                        .padding(horizontal = 16.dp, vertical = 16.dp)
+                        .focusRequester(focusRequester),
+                    textStyle = textStyle.copy(
+                        color = NDGLTheme.colors.black500,
+                        textAlign = textAlign,
+                    ),
+                    keyboardOptions = keyboardOptions,
+                    maxLines = maxLines,
+                    decorationBox = { innerTextField ->
+                        Box(
+                            modifier = Modifier.fillMaxWidth(),
+                            contentAlignment = when (textAlign) {
+                                TextAlign.Center -> Alignment.Center
+                                else -> Alignment.TopStart
+                            },
+                        ) {
+                            if (textFieldValue.text.isEmpty()) {
+                                Text(
+                                    text = placeholder,
+                                    style = placeholderStyle,
+                                    color = NDGLTheme.colors.black300,
+                                )
+                            }
+                            innerTextField()
+                        }
+                    },
+                )
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(16.dp),
+                ) {
+                    NDGLCTAButton(
+                        modifier = Modifier.weight(1f),
+                        type = NDGLCTAButtonAttr.Type.SECONDARY,
+                        size = NDGLCTAButtonAttr.Size.MEDIUM,
+                        status = NDGLCTAButtonAttr.Status.ACTIVE,
+                        label = negativeButtonText,
+                        onClick = {
+                            onNegativeButtonClick()
+                            onDismissRequest()
+                        },
+                    )
+                    NDGLCTAButton(
+                        modifier = Modifier.weight(1f),
+                        type = NDGLCTAButtonAttr.Type.PRIMARY,
+                        size = NDGLCTAButtonAttr.Size.MEDIUM,
+                        status = if (value.isNotEmpty()) {
+                            NDGLCTAButtonAttr.Status.ACTIVE
+                        } else {
+                            NDGLCTAButtonAttr.Status.DISABLED
+                        },
+                        label = positiveButtonText,
+                        onClick = {
+                            if (value.isNotEmpty()) {
+                                onPositiveButtonClick()
+                                onDismissRequest()
+                            }
+                        },
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun NDGLInputModalCostPreview() {
+    var value by remember { mutableStateOf("10000") }
+
+    NDGLTheme {
+        Box(Modifier.fillMaxSize()) {
+            NDGLInputModal(
+                onDismissRequest = {},
+                title = "비용 추가",
+                value = value,
+                onValueChange = { newValue ->
+                    if (newValue.isEmpty() || newValue.all { it.isDigit() }) {
+                        value = newValue
+                    }
+                },
+                placeholder = "비용을 추가해 보세요",
+                keyboardOptions = KeyboardOptions(
+                    keyboardType = KeyboardType.Number,
+                    imeAction = ImeAction.Done,
+                ),
+                positiveButtonText = "확인",
+                onPositiveButtonClick = {},
+                negativeButtonText = "취소",
+                textAlign = TextAlign.Center,
+                placeholderStyle = NDGLTheme.typography.subtitleLgSemiBold,
+                textStyle = NDGLTheme.typography.subtitleLgSemiBold,
+            )
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+private fun NDGLInputModalMemoPreview() {
+    var value by remember { mutableStateOf("") }
+
+    NDGLTheme {
+        Box(Modifier.fillMaxSize()) {
+            NDGLInputModal(
+                onDismissRequest = {},
+                title = "메모 추가",
+                value = value,
+                onValueChange = { value = it },
+                placeholder = "정보들을 메모해 보세요",
+                keyboardOptions = KeyboardOptions(
+                    keyboardType = KeyboardType.Text,
+                    imeAction = ImeAction.Default,
+                ),
+                positiveButtonText = "확인",
+                onPositiveButtonClick = {},
+                negativeButtonText = "취소",
+                minHeight = 120.dp,
+                placeholderStyle = NDGLTheme.typography.bodyLgMedium,
+                textStyle = NDGLTheme.typography.bodyLgRegular,
+            )
+        }
+    }
+}

core/ui/src/main/java/com/yapp/ndgl/core/ui/util/ModifierUtil.kt

@@ -0,0 +1,15 @@
+package com.yapp.ndgl.core.ui.util
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+
+fun Modifier.noRippleClickable(onClick: () -> Unit): Modifier = composed {
+    clickable(
+        indication = null,
+        interactionSource = remember { MutableInteractionSource() },
+        onClick = onClick,
+    )
+}

core/ui/src/main/java/com/yapp/ndgl/core/ui/util/WebUtil.kt

@@ -0,0 +1,15 @@
+package com.yapp.ndgl.core.ui.util
+
+import android.content.Context
+import android.content.Intent
+import androidx.core.net.toUri
+import timber.log.Timber
+
+fun Context.launchBrowser(url: String) {
+    try {
+        val intent = Intent(Intent.ACTION_VIEW, url.toUri())
+        startActivity(intent)
+    } catch (e: Exception) {
+        Timber.e("Failed to launch browser: $url, exception: $e")
+    }
+}

core/ui/src/main/res/drawable/ic_20_clipboard.xml

@@ -0,0 +1,10 @@
+<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="M6.597,3.819V3.75C6.597,3.021 7.188,2.431 7.917,2.431H12.083C12.812,2.431 13.403,3.021 13.403,3.75V3.819H14.167C14.701,3.819 15.213,4.031 15.591,4.409C15.968,4.787 16.18,5.299 16.18,5.833V15.555C16.18,16.089 15.968,16.601 15.591,16.979C15.213,17.357 14.701,17.569 14.167,17.569H5.833C5.299,17.569 4.787,17.357 4.409,16.979C4.032,16.601 3.819,16.089 3.819,15.555V5.833C3.819,5.299 4.032,4.787 4.409,4.409C4.787,4.031 5.299,3.819 5.833,3.819H6.597ZM7.847,3.75C7.847,3.712 7.878,3.681 7.917,3.681H12.083C12.122,3.681 12.153,3.712 12.153,3.75V4.437C12.153,4.44 12.153,4.442 12.153,4.444C12.153,4.446 12.153,4.448 12.153,4.451V5.139C12.153,5.177 12.122,5.208 12.083,5.208H7.917C7.878,5.208 7.847,5.177 7.847,5.139V3.75ZM13.403,5.069V5.139C13.403,5.868 12.812,6.458 12.083,6.458H7.917C7.188,6.458 6.597,5.868 6.597,5.139V5.069H5.833C5.631,5.069 5.436,5.149 5.293,5.293C5.15,5.436 5.069,5.63 5.069,5.833V15.555C5.069,15.758 5.15,15.952 5.293,16.095C5.436,16.239 5.631,16.319 5.833,16.319H14.167C14.369,16.319 14.563,16.239 14.707,16.095C14.85,15.952 14.93,15.758 14.93,15.555V5.833C14.93,5.63 14.85,5.436 14.707,5.293C14.563,5.149 14.369,5.069 14.167,5.069H13.403Z"
+      android:fillColor="#383838"
+      android:fillType="evenOdd"/>
+</vector>

core/ui/src/main/res/drawable/ic_20_pen.xml

@@ -0,0 +1,13 @@
+<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="M14.167,3.041C13.61,3.041 13.077,3.262 12.683,3.656L4.003,12.336C3.922,12.416 3.866,12.517 3.838,12.627L3.144,15.404C3.09,15.617 3.153,15.842 3.308,15.998C3.463,16.153 3.689,16.215 3.902,16.162L6.679,15.468C6.789,15.44 6.89,15.383 6.97,15.303L15.65,6.623C15.845,6.428 16,6.197 16.105,5.942C16.211,5.688 16.265,5.415 16.265,5.139C16.265,4.864 16.211,4.591 16.105,4.336C16,4.082 15.845,3.85 15.65,3.656C15.455,3.461 15.224,3.306 14.97,3.201C14.715,3.095 14.442,3.041 14.167,3.041ZM13.567,4.539C13.726,4.38 13.942,4.291 14.167,4.291C14.278,4.291 14.388,4.313 14.491,4.356C14.594,4.398 14.688,4.461 14.766,4.539C14.845,4.618 14.908,4.712 14.95,4.815C14.993,4.917 15.015,5.028 15.015,5.139C15.015,5.251 14.993,5.361 14.95,5.464C14.908,5.567 14.845,5.66 14.766,5.739L6.208,14.297L4.609,14.697L5.009,13.098L13.567,4.539Z"
+      android:fillColor="#383838"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M10,14.932C9.655,14.932 9.375,15.212 9.375,15.557C9.375,15.902 9.655,16.182 10,16.182H16.25C16.595,16.182 16.875,15.902 16.875,15.557C16.875,15.212 16.595,14.932 16.25,14.932H10Z"
+      android:fillColor="#383838"/>
+</vector>

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

@@ -1,11 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+    <!-- Common -->
     <string name="budget_bar_format">%d일차 여행 예산: %s</string>
     <string name="content_card_info_format">%s • %s • %d박%d일</string>
     <string name="content_card_budget_format">1인 기준 여행 예산 : %s</string>
     <string name="content_card_video_summary">영상 요약</string>
     <string name="day_format">%d일차</string>
     <string name="estimated_duration_format">%s 체류 예상</string>
+    <string name="opening_hours_format">영업시간 %s</string>
+    <string name="find_route">길찾기</string>
+    <string name="add_cost">비용 추가</string>
+    <string name="add_time">시간 추가</string>
+    <string name="add_memo">메모 추가</string>
 
     <!-- Transport Segment -->
     <string name="transport_segment_format">약 %1$s • %2$s</string>
@@ -39,7 +45,7 @@
     <string name="date_picker_error_insufficient">* 선택한 여행 기간이 따라가기 일정보다 짧아요.\n 기간을 넘는 일정은 지정되지 않습니다.</string>
 
     <!-- Travel Detail -->
-    <string name="timeline_auto_setting">타임라인 자동생성</string>
+    <string name="start_time_setting">여행 시작 시간 설정</string>
     <string name="edit_travel">편집하기</string>
     <string name="edit_done">편집 완료</string>
     <string name="add_schedule">일정 추가하기</string>
@@ -59,13 +65,44 @@
     <string name="delete_place_dialog_cancel">취소</string>
     <string name="delete_place_dialog_confirm">삭제하기</string>
 
-    <!-- Timeline Auto Setting -->
-    <string name="timeline_auto_setting_title">타임라인 자동생성</string>
-    <string name="timeline_start_time">일정 시작 시간</string>
-    <string name="timeline_end_time">일정 마무리 시간</string>
-    <string name="timeline_auto_calculated">자동 계산됨</string>
-    <string name="timeline_set_time">시간 설정하기</string>
-    <string name="timeline_save_time">시간 저장하기</string>
-    <string name="timeline_time_exceeds_warning">* 일정 마무리 시간은 24:00를 넘깁니다\n소요시간, 대중교통 수정을 권장합니다.</string>
-    <string name="close">닫기</string>
+    <!-- schedule Setting -->
+    <string name="schedule_setting_title">여행 시작 시간 설정</string>
+    <string name="schedule_start_time">여행 시작 시간</string>
+    <string name="schedule_end_time">여행 마무리 시간</string>
+    <string name="schedule_set_time">시간 설정하기</string>
+    <string name="schedule_save_time">시간 저장하기</string>
+    <string name="schedule_time_exceeds_warning">* 일정 마무리 시간은 24:00를 넘깁니다\n소요시간, 대중교통 수정을 권장합니다.</string>
+    <string name="schedule_start">일정 시작</string>
+
+    <!-- Duration Picker -->
+    <string name="duration_picker_title">체류 시간</string>
+    <string name="duration_picker_save">체류 시간 저장</string>
+
+    <!-- Cost Modal -->
+    <string name="cost_modal_title">비용 추가</string>
+    <string name="cost_modal_placeholder">비용을 추가해 보세요</string>
+    <string name="cost_modal_confirm">확인</string>
+    <string name="cost_modal_cancel">취소</string>
+
+    <!-- Memo Modal -->
+    <string name="memo_modal_title">메모 추가</string>
+    <string name="memo_modal_placeholder">정보들을 메모해 보세요</string>
+    <string name="memo_modal_confirm">확인</string>
+    <string name="memo_modal_cancel">취소</string>
+
+    <!-- Place Detail -->
+    <string name="place_detail_tab_info">정보</string>
+    <string name="place_detail_tab_photo">사진</string>
+    <string name="place_detail_add_schedule">일정 추가하기</string>
+    <string name="place_detail_website">웹사이트 보기</string>
+    <string name="place_detail_menu">메뉴</string>
+    <string name="place_detail_plan_b_message">아래에서 플랜 B를 알아봐요!</string>
+    <string name="place_detail_content_tip">콘텐츠 속 꿀팁</string>
+    <string name="place_detail_creator_tip_format">%s의 한마디</string>
+    <string name="place_detail_change_place">장소 변경하기</string>
+    <string name="place_detail_modal_change_title">장소 변경</string>
+    <string name="place_detail_modal_change_body">장소를 다음과 같이 변경할까요?</string>
+    <string name="place_detail_modal_change_description">%s -> %s</string>
+    <string name="place_detail_modal_change_confirm">변경하기</string>
+    <string name="place_detail_modal_change_cancel">아니요</string>
 </resources>

core/util/src/main/java/com/yapp/ndgl/core/util/DurationUtil.kt

@@ -18,3 +18,19 @@ fun Duration.toTimeString(): String {
     val minutes = (this.inWholeMinutes % 60).toInt()
     return String.format(getDefault(), "%02d:%02d", hours, minutes)
 }
+
+fun Duration.toAmPmTimeString(): String {
+    val hours = this.inWholeHours.toInt()
+    val minutes = (this.inWholeMinutes % 60).toInt()
+    val amPm = if (hours < 12) "오전" else "오후"
+    val displayHour = when {
+        hours == 0 -> 12
+        hours > 12 -> hours - 12
+        else -> hours
+    }
+    return if (minutes == 0) {
+        "$amPm $displayHour:00"
+    } else {
+        "$amPm $displayHour:${String.format(getDefault(), "%02d", minutes)}"
+    }
+}