[Feat/#9] 장소 상세 페이지 navigation 및 UI 구현 #56

Roel4990 · 2025-01-16T20:30:52Z

Related issue 🛠

closed [FEAT] 장소 상세 UI 구현 #9

Work Description ✏️

장소 상세 페이지 navigation 및 UI 구현

Screenshot 📸

placeDetail.mp4

To Reviewers 📢

더미 데이터 어떤식으로 넣을까 고민하다가 네비게이션 구현한 후 Screen 따로 빼서 네비 구현했습니다. 그래서 조금 더 길어진거 같아요,,

chattymin

고생하셨습니다! 확인 후 수정 부탁드려요

chattymin · 2025-01-17T13:04:41Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+        is UiState.Success -> {
+            PlaceDetailScreen(
+                navigateToMap = {},
+                menuItems = state.menuItems,
+                textTitle = state.textTitle,
+                textContent = state.textContent,
+                profileUrl = state.profileUrl,
+                profileName = state.profileName,
+                profileLocation = state.profileLocation,
+                dropdownMenuList = state.dropdownMenuList,
+                imageList = state.imageList,
+                tag = IconTagEntity(
+                    name = (state.iconTag as UiState.Success<IconTagEntity>).data.name,
+                    backgroundColorHex = (state.iconTag as UiState.Success<IconTagEntity>).data.backgroundColorHex,
+                    textColorHex = (state.iconTag as UiState.Success<IconTagEntity>).data.textColorHex,
+                    iconUrl = (state.iconTag as UiState.Success<IconTagEntity>).data.iconUrl
+                ),
+                dateString = state.dateString,
+                locationAddress = state.locationAddress,
+                locationName = state.locationName,
+                locationPinCount = state.locationPinCount,
+                mySpoonCount = state.mySpoonCount
+            )
+        }


p1) 매번 검사하기 보다는 이렇게 한번에 처리하는게 좋을 것 같습니다.
p2) Entity라는 변수명이 presentaion layer에 맞지 않는 네이밍이라 생각돼요. item, model 등 다른 네이밍으로 수정하는게 좋을 것 같습니다.

Suggested change

is UiState.Success -> {

PlaceDetailScreen(

navigateToMap = {},

menuItems = state.menuItems,

textTitle = state.textTitle,

textContent = state.textContent,

profileUrl = state.profileUrl,

profileName = state.profileName,

profileLocation = state.profileLocation,

dropdownMenuList = state.dropdownMenuList,

imageList = state.imageList,

tag = IconTagEntity(

name = (state.iconTag as UiState.Success<IconTagEntity>).data.name,

backgroundColorHex = (state.iconTag as UiState.Success<IconTagEntity>).data.backgroundColorHex,

textColorHex = (state.iconTag as UiState.Success<IconTagEntity>).data.textColorHex,

iconUrl = (state.iconTag as UiState.Success<IconTagEntity>).data.iconUrl

),

dateString = state.dateString,

locationAddress = state.locationAddress,

locationName = state.locationName,

locationPinCount = state.locationPinCount,

mySpoonCount = state.mySpoonCount

)

}

is UiState.Success -> {

val temp = state.iconTag as UiState.Success<IconTagEntity>

PlaceDetailScreen(

navigateToMap = {},

menuItems = state.menuItems,

textTitle = state.textTitle,

textContent = state.textContent,

profileUrl = state.profileUrl,

profileName = state.profileName,

profileLocation = state.profileLocation,

dropdownMenuList = state.dropdownMenuList,

imageList = state.imageList,

tag = IconTagEntity(

name = temp.data.name,

backgroundColorHex = temp.data.backgroundColorHex,

textColorHex = temp.data.textColorHex,

iconUrl = temp.data.iconUrl

),

dateString = state.dateString,

locationAddress = state.locationAddress,

locationName = state.locationName,

locationPinCount = state.locationPinCount,

mySpoonCount = state.mySpoonCount

)

}

수정했습니다 감사합니다!

chattymin · 2025-01-17T13:06:30Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+            modifier = Modifier
+                .fillMaxSize()
+                .padding(top = 64.dp)
+                .verticalScroll(rememberScrollState())


p3) 추후 scrollState를 활용할 수도 있고, 가독성을 위해서라도 분리해서 변수화해서 넣어주는게 좋을 것 같습니다.

수정했습니다 감사합니다!

chattymin · 2025-01-17T13:13:31Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(top = 64.dp)


p1) Box로 굳이 묶은 후 padding top을 64로 준 이유가 있나요?
TagTopAppBar의 높이 변화를 고려하지 않은 것 같습니다.

수정했습니다!

chattymin · 2025-01-17T13:14:54Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+            IconTag(
+                text = tag.name,
+                backgroundColorHex = tag.backgroundColorHex,
+                textColorHex = tag.textColorHex,
+                iconUrl = tag.iconUrl,
+                modifier = Modifier.padding(horizontal = 20.dp)
+            )


p1) 아래 있는 대부분의 요소들이 horizontal 20으로 되어있는데 따로따로 선언한 이유가 없는 것 같아요. 묶어서 한번에 관리해주세요

Column 으로 묶었습니다 감사합니다!

chattymin · 2025-01-17T13:15:06Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+                locationSubTitle = locationName,
+                location = locationAddress
+            )
+            Spacer(modifier = Modifier.height(103.dp))


p1) 이렇게 큰 Spacer가 들어간 이유가 있나요?

구조 변경했습니다! 수정했어요!

chattymin · 2025-01-17T13:18:31Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailViewModel.kt

+    var state: MutableStateFlow<PlaceDetailState> =
+        MutableStateFlow(PlaceDetailState())
+        private set


p3) 이 부분에 대한 논의를 해보면 좋을 것 같습니다.
지금처럼 하게 된다면 뷰에서 MutableStateFlow로 캐스팅하여 수정이 가능하다는 단점이 있어요.
반면, MutableStateFlow와 StateFlow를 이용한 backingProperty를 사용한다면 수정을 원천적으로 막을 수 있습니다.

보일러 플레이트가 발생한다는 단점이 있지만, 조금 더 안전하다는 장점이 있어요.
저희팀에서 사용할 방법을 논의해보아요~ @Hyobeen-Park @angryPodo @Roel4990

수정했습니다!

angryPodo · 2025-01-20T08:30:02Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+    val spoonAmount = when (state.spoonAmountEntity) {
+        is UiState.Success -> (state.spoonAmountEntity as UiState.Success<Int>).data
+        else -> 0
+    }
+
+    val userProfile = when (state.userEntity) {
+        is UiState.Success -> (state.userEntity as UiState.Success<UserEntity>).data
+        else -> UserEntity(
+            userProfileUrl = "",
+            userName = "",
+            userRegion = ""
+        )
+    }


p5: state.spoonAmountEntity와 state.userEntity를 처리할 때 UiState를 확인하고 데이터를 추출하는 로직이 중복적으로 사용되는데. 추후에 헬퍼함수로도 추출 해볼수 있을것 같네요~

의견 감사합니다~ 추후에 수정할게요!

chattymin

고생하셨습니다! 수정하고 머지해주세요 :)

chattymin · 2025-01-20T09:01:16Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+            .navigationBarsPadding()
+            .statusBarsPadding()


p1) Scaffold로부터 paddingValue를 받아오는 방법으로 해주세요 :)

수정했습니다!

chattymin · 2025-01-20T09:04:04Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+            Spacer(modifier = Modifier.height(27.dp))
+        }
+        PlaceDetailBottomBar(
+            modifier = Modifier,


p1) 기본값으로 설정해서 매개변수를 넣어주지 않게 해주세요 :)

수정했습니다!

angryPodo

수고하셨습니다~

Hyobeen-Park

수고하셨습니다~~! 코리 확인하시고 수정 부탁드릴게요😊

Hyobeen-Park · 2025-01-20T14:24:37Z

app/src/main/java/com/spoony/spoony/domain/entity/IconTagEntity.kt

+data class IconTagEntity(
+    val name: String,
+    val backgroundColorHex: String,
+    val textColorHex: String,
+    val iconUrl: String
+)


P1: 탐색뷰에서 제작한 CategoryEnttity와 동일한 엔티티인 것 같아서 저희 둘이 하나로 합치면 될 것 같아요!! 그리고 서버 명세서 확인해보시면 categoryId가 필요해서 이건 추가 부탁드려요!!

CategoryEnttity 로 수정했습니다!

Hyobeen-Park · 2025-01-20T14:26:47Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+                text = "떠먹기",
+                style = ButtonStyle.Secondary,
+                size = ButtonSize.Medium,
+                onClick = { onScoopButtonClick() },


Suggested change

onClick = { onScoopButtonClick() },

onClick = onScoopButtonClick,

P2: 짜잔~!

수정했습니다!

Hyobeen-Park · 2025-01-20T14:27:45Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailState.kt

+    val userEntity: UiState<UserEntity> = UiState.Loading,
+    val spoonAmountEntity: UiState<Int> = UiState.Loading,
+    val scoopDialogVisibility: Boolean = false,
+    val dropDownMenuList: ImmutableList<String> = immutableListOf("신고하기")


P3: immutableListOf()가 deprecate된 것으로 알고 있는데 한번 더 확인 부탁드릴게요..!!

수정했습니다! 정보 알려주셔서 감사합니다!

Hyobeen-Park

인자만 얼른 후딱 수정합시다!!!

Hyobeen-Park · 2025-01-20T19:19:51Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+    placeName: String,
+    spoonAmount: Int,
+    addMapCount: Int,
+    isScooped: Boolean = false,


P1: 옵셔널한건 아래로!!

수정했습니다!

Hyobeen-Park · 2025-01-20T19:24:46Z

app/src/main/java/com/spoony/spoony/presentation/placeDetail/PlaceDetailRoute.kt

+
+            Column(
+                modifier = Modifier
+                    .width(56.dp)


P3: 오잉? 여기는 왜 고정dp로 되어있나요..?? 특별한 이유가 있나요?!??

minWidth 로 수정했습니다.

Hyobeen-Park

어푸푸~~!!

Hyobeen-Park

어푸가 안돼서,,, 다시 합니다ㅜㅜ

Roel4990 added 10 commits January 16, 2025 17:42

[Feat/#9] 장소 상세 페이지 TopAppbar, Profile, Tag, Text 적용

5d5c8a6

Merge branch 'develop' into feat/#9-place-detail

b648ddc

[Feat/#9] PlaceDetailScreen StoreInfo 추가

610b812

Merge branch 'develop' into feat/#9-place-detail

61bc271

Merge branch 'develop' into feat/#9-place-detail

1e703e4

[Feat/#9] 장소 상세 페이지 PlaceDetailBottomBar 및 PlaceDetailImageLazyRow 추가

855d556

Merge branch 'develop' into feat/#9-place-detail

60e5f4e

[FEAT/#9] add map icon 수정

49b48a9

Merge branch 'refs/heads/develop' into feat/#9-place-detail

fa8eaca

[FEAT/#9] 장소 상세 navigation 구현

e81f332

Roel4990 added 🧡세홍🧡 🧡세홍🧡 FEAT✨ 새로운 기능 구현 labels Jan 16, 2025

Roel4990 requested review from chattymin, Hyobeen-Park and angryPodo January 16, 2025 20:30

Roel4990 self-assigned this Jan 16, 2025

Roel4990 requested a review from a team as a code owner January 16, 2025 20:30

Roel4990 linked an issue Jan 16, 2025 that may be closed by this pull request

[FEAT] 장소 상세 UI 구현 #9

Closed

2 tasks

Roel4990 added 3 commits January 17, 2025 05:42

[FEAT/#9] 더미데이터 Preview 로 이동

6793b12

Merge branch 'develop' into feat/#9-place-detail

f715978

[FEAT/#9] PlaceDetail 페이지 ViewModel, State 추가 및 IconTagEntity 추가

58e8b3f

chattymin requested changes Jan 17, 2025

View reviewed changes

Roel4990 added 8 commits January 17, 2025 22:21

[FEAT/#9] ktLintFormat 처리

53e9c3e

[FEAT/#9] IconTagEntity => IconTagItem 변경 및 state.iconTag 검증 처리 코드 수정

a3232cf

[FEAT/#9] rememberScrollState() 변수화

88617c1

[FEAT/#9] MutableStateFlow 형태 변경

0870948

[FEAT/#9] MainTabRoute -> Route 로 수정

87f4aac

[FEAT/#9] MainTabRoute -> Route 로 수정

2aa239c

[FEAT/#9] Column 사용 후 padding 값 제거

c8049f6

[FEAT/#9] Column 으로 묶어서 공통 패딩 적용하기

bff3c13

Roel4990 added 3 commits January 20, 2025 04:49

[FEAT/#9] IconTagEntity 기본값 제거

3ba3653

[FEAT/#9] 수정 사항 코드 수정

cbb6f57

[FEAT/#9] ktLintFormat 처리

e38c436

Roel4990 requested a review from Hyobeen-Park January 19, 2025 20:19

Merge remote-tracking branch 'origin/develop' into feat/#9-place-detail

8fd06f7

angryPodo reviewed Jan 20, 2025

View reviewed changes

chattymin approved these changes Jan 20, 2025

View reviewed changes

angryPodo requested review from angryPodo and chattymin January 20, 2025 13:05

angryPodo approved these changes Jan 20, 2025

View reviewed changes

Hyobeen-Park requested changes Jan 20, 2025

View reviewed changes

Roel4990 added 6 commits January 21, 2025 00:50

[FEAT/#9] PlaceDetailBottomBar Modifier 값 제거

305377b

[FEAT/#9] Scaffold 에서 paddingValues 받아오기

4b8be80

Merge remote-tracking branch 'origin/develop' into feat/#9-place-detail

d62244b

[FEAT/#9] IconTagEntity -> CategoryEntity 로 수정 및 toValidHexColor 함수 추가

4332446

[FEAT/#9] onScoopButtonClick 람다 -> 함수 참조로 수정

5d663d3

[FEAT/#9] persistentListOf -> immutableListOf 로 수정

83aa944

Roel4990 requested a review from Hyobeen-Park January 20, 2025 17:19

Merge remote-tracking branch 'origin/develop' into feat/#9-place-detail

7a7be58

chattymin approved these changes Jan 20, 2025

View reviewed changes

Hyobeen-Park reviewed Jan 20, 2025

View reviewed changes

Roel4990 added 4 commits January 21, 2025 04:28

[FEAT/#9] isScooped default 값 삭제

632f6ef

Merge remote-tracking branch 'origin/develop' into feat/#9-place-detail

0523a45

[FEAT/#9] 코드리뷰 사항 수정

a4e8d49

Merge remote-tracking branch 'origin/develop' into feat/#9-place-detail

bb8ab0c

Roel4990 requested a review from Hyobeen-Park January 20, 2025 19:45

Hyobeen-Park approved these changes Jan 20, 2025

View reviewed changes

Merge remote-tracking branch 'origin/develop' into feat/#9-place-detail

6c2d69d

Roel4990 merged commit 5a4bd2a into develop Jan 20, 2025
1 check passed

	onClick = { onScoopButtonClick() },
	onClick = onScoopButtonClick,

[Feat/#9] 장소 상세 페이지 navigation 및 UI 구현 #56

[Feat/#9] 장소 상세 페이지 navigation 및 UI 구현 #56

Conversation

Roel4990 commented Jan 16, 2025

Related issue 🛠

Work Description ✏️

Screenshot 📸

To Reviewers 📢

chattymin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angryPodo Jan 20, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chattymin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

angryPodo left a comment

Choose a reason for hiding this comment

Hyobeen-Park left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hyobeen-Park left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hyobeen-Park left a comment

Choose a reason for hiding this comment

Hyobeen-Park left a comment

Choose a reason for hiding this comment

angryPodo Jan 20, 2025 •

edited

Loading