Skip to content

Commit e9b6ca1

Browse files
mj010504mj010504
authored
Merge pull request #19 from YAPP-Github/design/NDGL-63
[NDGL-63] 장소 상세보기 화면 UI/UX 제작
2 parents 78cb8ef + 3720309 commit e9b6ca1

File tree

26 files changed

+2448
-93
lines changed

26 files changed

+2448
-93
lines changed

‎core/ui/build.gradle.kts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ android {
99
dependencies {
1010
implementation(libs.androidx.core.ktx)
1111
implementation(libs.kotlinx.coroutines.core)
12+
implementation(projects.core.util)
1213
}

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

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
package com.yapp.ndgl.core.ui.designsystem
2+
3+
import androidx.compose.foundation.layout.Arrangement
4+
import androidx.compose.foundation.layout.Box
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.Row
7+
import androidx.compose.foundation.layout.fillMaxSize
8+
import androidx.compose.foundation.layout.fillMaxWidth
9+
import androidx.compose.foundation.layout.heightIn
10+
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.foundation.layout.wrapContentHeight
12+
import androidx.compose.foundation.shape.RoundedCornerShape
13+
import androidx.compose.foundation.text.BasicTextField
14+
import androidx.compose.foundation.text.KeyboardOptions
15+
import androidx.compose.material3.Surface
16+
import androidx.compose.material3.Text
17+
import androidx.compose.runtime.Composable
18+
import androidx.compose.runtime.LaunchedEffect
19+
import androidx.compose.runtime.getValue
20+
import androidx.compose.runtime.mutableStateOf
21+
import androidx.compose.runtime.remember
22+
import androidx.compose.runtime.setValue
23+
import androidx.compose.ui.Alignment
24+
import androidx.compose.ui.Modifier
25+
import androidx.compose.ui.draw.clip
26+
import androidx.compose.ui.focus.FocusRequester
27+
import androidx.compose.ui.focus.focusRequester
28+
import androidx.compose.ui.text.TextRange
29+
import androidx.compose.ui.text.TextStyle
30+
import androidx.compose.ui.text.input.ImeAction
31+
import androidx.compose.ui.text.input.KeyboardType
32+
import androidx.compose.ui.text.input.TextFieldValue
33+
import androidx.compose.ui.text.style.TextAlign
34+
import androidx.compose.ui.tooling.preview.Preview
35+
import androidx.compose.ui.unit.Dp
36+
import androidx.compose.ui.unit.dp
37+
import androidx.compose.ui.window.Dialog
38+
import com.yapp.ndgl.core.ui.theme.NDGLTheme
39+
40+
@Composable
41+
fun NDGLInputModal(
42+
modifier: Modifier = Modifier,
43+
onDismissRequest: () -> Unit,
44+
title: String,
45+
value: String,
46+
onValueChange: (String) -> Unit,
47+
placeholder: String,
48+
keyboardOptions: KeyboardOptions,
49+
positiveButtonText: String,
50+
onPositiveButtonClick: () -> Unit,
51+
negativeButtonText: String,
52+
onNegativeButtonClick: (() -> Unit) = {},
53+
minHeight: Dp = 56.dp,
54+
maxLines: Int = Int.MAX_VALUE,
55+
textStyle: TextStyle,
56+
placeholderStyle: TextStyle,
57+
textAlign: TextAlign = TextAlign.Start,
58+
) {
59+
val focusRequester = remember { FocusRequester() }
60+
var textFieldValue by remember(value) {
61+
mutableStateOf(TextFieldValue(value, selection = TextRange(value.length)))
62+
}
63+
64+
LaunchedEffect(Unit) {
65+
focusRequester.requestFocus()
66+
}
67+
68+
// value가 변경되면 textFieldValue 업데이트
69+
LaunchedEffect(value) {
70+
if (textFieldValue.text != value) {
71+
textFieldValue = TextFieldValue(
72+
text = value,
73+
selection = TextRange(value.length),
74+
)
75+
}
76+
}
77+
78+
Dialog(onDismissRequest = onDismissRequest) {
79+
Surface(
80+
modifier = modifier.wrapContentHeight(),
81+
shape = RoundedCornerShape(8.dp),
82+
color = NDGLTheme.colors.white,
83+
shadowElevation = 16.dp,
84+
) {
85+
Column(
86+
modifier = Modifier
87+
.padding(horizontal = 28.dp)
88+
.padding(top = 28.dp, bottom = 24.dp),
89+
verticalArrangement = Arrangement.spacedBy(28.dp),
90+
horizontalAlignment = Alignment.CenterHorizontally,
91+
) {
92+
Text(
93+
text = title,
94+
modifier = Modifier.fillMaxWidth(),
95+
color = NDGLTheme.colors.black900,
96+
textAlign = TextAlign.Center,
97+
style = NDGLTheme.typography.subtitleLgSemiBold,
98+
)
99+
100+
BasicTextField(
101+
value = textFieldValue,
102+
onValueChange = { newValue ->
103+
textFieldValue = newValue
104+
onValueChange(newValue.text)
105+
},
106+
modifier = Modifier
107+
.fillMaxWidth()
108+
.heightIn(min = minHeight)
109+
.clip(RoundedCornerShape(8.dp))
110+
.padding(horizontal = 16.dp, vertical = 16.dp)
111+
.focusRequester(focusRequester),
112+
textStyle = textStyle.copy(
113+
color = NDGLTheme.colors.black500,
114+
textAlign = textAlign,
115+
),
116+
keyboardOptions = keyboardOptions,
117+
maxLines = maxLines,
118+
decorationBox = { innerTextField ->
119+
Box(
120+
modifier = Modifier.fillMaxWidth(),
121+
contentAlignment = when (textAlign) {
122+
TextAlign.Center -> Alignment.Center
123+
else -> Alignment.TopStart
124+
},
125+
) {
126+
if (textFieldValue.text.isEmpty()) {
127+
Text(
128+
text = placeholder,
129+
style = placeholderStyle,
130+
color = NDGLTheme.colors.black300,
131+
)
132+
}
133+
innerTextField()
134+
}
135+
},
136+
)
137+
138+
Row(
139+
modifier = Modifier.fillMaxWidth(),
140+
horizontalArrangement = Arrangement.spacedBy(16.dp),
141+
) {
142+
NDGLCTAButton(
143+
modifier = Modifier.weight(1f),
144+
type = NDGLCTAButtonAttr.Type.SECONDARY,
145+
size = NDGLCTAButtonAttr.Size.MEDIUM,
146+
status = NDGLCTAButtonAttr.Status.ACTIVE,
147+
label = negativeButtonText,
148+
onClick = {
149+
onNegativeButtonClick()
150+
onDismissRequest()
151+
},
152+
)
153+
NDGLCTAButton(
154+
modifier = Modifier.weight(1f),
155+
type = NDGLCTAButtonAttr.Type.PRIMARY,
156+
size = NDGLCTAButtonAttr.Size.MEDIUM,
157+
status = if (value.isNotEmpty()) {
158+
NDGLCTAButtonAttr.Status.ACTIVE
159+
} else {
160+
NDGLCTAButtonAttr.Status.DISABLED
161+
},
162+
label = positiveButtonText,
163+
onClick = {
164+
if (value.isNotEmpty()) {
165+
onPositiveButtonClick()
166+
onDismissRequest()
167+
}
168+
},
169+
)
170+
}
171+
}
172+
}
173+
}
174+
}
175+
176+
@Preview(showBackground = true)
177+
@Composable
178+
private fun NDGLInputModalCostPreview() {
179+
var value by remember { mutableStateOf("10000") }
180+
181+
NDGLTheme {
182+
Box(Modifier.fillMaxSize()) {
183+
NDGLInputModal(
184+
onDismissRequest = {},
185+
title = "비용 추가",
186+
value = value,
187+
onValueChange = { newValue ->
188+
if (newValue.isEmpty() || newValue.all { it.isDigit() }) {
189+
value = newValue
190+
}
191+
},
192+
placeholder = "비용을 추가해 보세요",
193+
keyboardOptions = KeyboardOptions(
194+
keyboardType = KeyboardType.Number,
195+
imeAction = ImeAction.Done,
196+
),
197+
positiveButtonText = "확인",
198+
onPositiveButtonClick = {},
199+
negativeButtonText = "취소",
200+
textAlign = TextAlign.Center,
201+
placeholderStyle = NDGLTheme.typography.subtitleLgSemiBold,
202+
textStyle = NDGLTheme.typography.subtitleLgSemiBold,
203+
)
204+
}
205+
}
206+
}
207+
208+
@Preview(showBackground = true)
209+
@Composable
210+
private fun NDGLInputModalMemoPreview() {
211+
var value by remember { mutableStateOf("") }
212+
213+
NDGLTheme {
214+
Box(Modifier.fillMaxSize()) {
215+
NDGLInputModal(
216+
onDismissRequest = {},
217+
title = "메모 추가",
218+
value = value,
219+
onValueChange = { value = it },
220+
placeholder = "정보들을 메모해 보세요",
221+
keyboardOptions = KeyboardOptions(
222+
keyboardType = KeyboardType.Text,
223+
imeAction = ImeAction.Default,
224+
),
225+
positiveButtonText = "확인",
226+
onPositiveButtonClick = {},
227+
negativeButtonText = "취소",
228+
minHeight = 120.dp,
229+
placeholderStyle = NDGLTheme.typography.bodyLgMedium,
230+
textStyle = NDGLTheme.typography.bodyLgRegular,
231+
)
232+
}
233+
}
234+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.yapp.ndgl.core.ui.util
2+
3+
import androidx.compose.foundation.clickable
4+
import androidx.compose.foundation.interaction.MutableInteractionSource
5+
import androidx.compose.runtime.remember
6+
import androidx.compose.ui.Modifier
7+
import androidx.compose.ui.composed
8+
9+
fun Modifier.noRippleClickable(onClick: () -> Unit): Modifier = composed {
10+
clickable(
11+
indication = null,
12+
interactionSource = remember { MutableInteractionSource() },
13+
onClick = onClick,
14+
)
15+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
package com.yapp.ndgl.core.ui.util
2+
3+
import android.content.Context
4+
import android.content.Intent
5+
import androidx.core.net.toUri
6+
import timber.log.Timber
7+
8+
fun Context.launchBrowser(url: String) {
9+
try {
10+
val intent = Intent(Intent.ACTION_VIEW, url.toUri())
11+
startActivity(intent)
12+
} catch (e: Exception) {
13+
Timber.e("Failed to launch browser: $url, exception: $e")
14+
}
15+
}

‎core/ui/src/main/res/drawable-xxxhdpi/bg_place_tip_card.webp‎

44.5 KB
Loading

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="20dp"
3+
android:height="20dp"
4+
android:viewportWidth="20"
5+
android:viewportHeight="20">
6+
<path
7+
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"
8+
android:fillColor="#383838"
9+
android:fillType="evenOdd"/>
10+
</vector>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="20dp"
3+
android:height="20dp"
4+
android:viewportWidth="20"
5+
android:viewportHeight="20">
6+
<path
7+
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"
8+
android:fillColor="#383838"
9+
android:fillType="evenOdd"/>
10+
<path
11+
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"
12+
android:fillColor="#383838"/>
13+
</vector>

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

Lines changed: 47 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
<?xml version="1.0" encoding="utf-8"?>
22
<resources>
3+
<!-- Common -->
34
<string name="budget_bar_format">%d일차 여행 예산: %s</string>
45
<string name="content_card_info_format">%s • %s • %d박%d일</string>
56
<string name="content_card_budget_format">1인 기준 여행 예산 : %s</string>
67
<string name="content_card_video_summary">영상 요약</string>
78
<string name="day_format">%d일차</string>
89
<string name="estimated_duration_format">%s 체류 예상</string>
10+
<string name="opening_hours_format">영업시간 %s</string>
11+
<string name="find_route">길찾기</string>
12+
<string name="add_cost">비용 추가</string>
13+
<string name="add_time">시간 추가</string>
14+
<string name="add_memo">메모 추가</string>
915

1016
<!-- Transport Segment -->
1117
<string name="transport_segment_format">약 %1$s • %2$s</string>
@@ -39,7 +45,7 @@
3945
<string name="date_picker_error_insufficient">* 선택한 여행 기간이 따라가기 일정보다 짧아요.\n 기간을 넘는 일정은 지정되지 않습니다.</string>
4046

4147
<!-- Travel Detail -->
42-
<string name="timeline_auto_setting">타임라인 자동생성</string>
48+
<string name="start_time_setting">여행 시작 시간 설정</string>
4349
<string name="edit_travel">편집하기</string>
4450
<string name="edit_done">편집 완료</string>
4551
<string name="add_schedule">일정 추가하기</string>
@@ -59,13 +65,44 @@
5965
<string name="delete_place_dialog_cancel">취소</string>
6066
<string name="delete_place_dialog_confirm">삭제하기</string>
6167

62-
<!-- Timeline Auto Setting -->
63-
<string name="timeline_auto_setting_title">타임라인 자동생성</string>
64-
<string name="timeline_start_time">일정 시작 시간</string>
65-
<string name="timeline_end_time">일정 마무리 시간</string>
66-
<string name="timeline_auto_calculated">자동 계산됨</string>
67-
<string name="timeline_set_time">시간 설정하기</string>
68-
<string name="timeline_save_time">시간 저장하기</string>
69-
<string name="timeline_time_exceeds_warning">* 일정 마무리 시간은 24:00를 넘깁니다\n소요시간, 대중교통 수정을 권장합니다.</string>
70-
<string name="close">닫기</string>
68+
<!-- schedule Setting -->
69+
<string name="schedule_setting_title">여행 시작 시간 설정</string>
70+
<string name="schedule_start_time">여행 시작 시간</string>
71+
<string name="schedule_end_time">여행 마무리 시간</string>
72+
<string name="schedule_set_time">시간 설정하기</string>
73+
<string name="schedule_save_time">시간 저장하기</string>
74+
<string name="schedule_time_exceeds_warning">* 일정 마무리 시간은 24:00를 넘깁니다\n소요시간, 대중교통 수정을 권장합니다.</string>
75+
<string name="schedule_start">일정 시작</string>
76+
77+
<!-- Duration Picker -->
78+
<string name="duration_picker_title">체류 시간</string>
79+
<string name="duration_picker_save">체류 시간 저장</string>
80+
81+
<!-- Cost Modal -->
82+
<string name="cost_modal_title">비용 추가</string>
83+
<string name="cost_modal_placeholder">비용을 추가해 보세요</string>
84+
<string name="cost_modal_confirm">확인</string>
85+
<string name="cost_modal_cancel">취소</string>
86+
87+
<!-- Memo Modal -->
88+
<string name="memo_modal_title">메모 추가</string>
89+
<string name="memo_modal_placeholder">정보들을 메모해 보세요</string>
90+
<string name="memo_modal_confirm">확인</string>
91+
<string name="memo_modal_cancel">취소</string>
92+
93+
<!-- Place Detail -->
94+
<string name="place_detail_tab_info">정보</string>
95+
<string name="place_detail_tab_photo">사진</string>
96+
<string name="place_detail_add_schedule">일정 추가하기</string>
97+
<string name="place_detail_website">웹사이트 보기</string>
98+
<string name="place_detail_menu">메뉴</string>
99+
<string name="place_detail_plan_b_message">아래에서 플랜 B를 알아봐요!</string>
100+
<string name="place_detail_content_tip">콘텐츠 속 꿀팁</string>
101+
<string name="place_detail_creator_tip_format">%s의 한마디</string>
102+
<string name="place_detail_change_place">장소 변경하기</string>
103+
<string name="place_detail_modal_change_title">장소 변경</string>
104+
<string name="place_detail_modal_change_body">장소를 다음과 같이 변경할까요?</string>
105+
<string name="place_detail_modal_change_description">%s -> %s</string>
106+
<string name="place_detail_modal_change_confirm">변경하기</string>
107+
<string name="place_detail_modal_change_cancel">아니요</string>
71108
</resources>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,19 @@ fun Duration.toTimeString(): String {
1818
val minutes = (this.inWholeMinutes % 60).toInt()
1919
return String.format(getDefault(), "%02d:%02d", hours, minutes)
2020
}
21+
22+
fun Duration.toAmPmTimeString(): String {
23+
val hours = this.inWholeHours.toInt()
24+
val minutes = (this.inWholeMinutes % 60).toInt()
25+
val amPm = if (hours < 12) "오전" else "오후"
26+
val displayHour = when {
27+
hours == 0 -> 12
28+
hours > 12 -> hours - 12
29+
else -> hours
30+
}
31+
return if (minutes == 0) {
32+
"$amPm $displayHour:00"
33+
} else {
34+
"$amPm $displayHour:${String.format(getDefault(), "%02d", minutes)}"
35+
}
36+
}

0 commit comments

Comments
 (0)