[UI/#359] 탐색, 공고 뷰 / 로딩 이미지 추가 #370

arinming · 2025-03-27T15:13:10Z

closed [UI] 탐색 뷰 / 로딩 이미지 추가 #359

⛳️ Work Description

공고 상세 뷰 로딩 이미지 추가
배너 로딩 로띠 추가
추천 공고 로딩 이미지 추가

📸 Screenshot

359.webm

📢 To Reviewers

아니 오랜만에 코드 뜯어보는데 고칠 부분 왜이리 많조.? 공고 뷰 로딩 처리가 맘에 안듦.. ㅜㅜ ,,,,
저도 빠른 데이터라 느데로 확인하면 보이긴 할테넫... 잘 눈여겨 보면 보일 거예요..
올려 두고 공유하기 마저 하겠습니당 .!

boiledeggg

깔쌈한데요? 고생 많으셨습니당~

boiledeggg · 2025-03-27T18:40:48Z

feature/intern/src/main/java/com/terning/feature/intern/InternRoute.kt

+        else -> InternInfo(
+            dDay = "",
+            title = "",
+            viewCount = 0,
+            company = "",
+            companyCategory = "",
+            companyImage = "",
+            deadline = "",
+            workingPeriod = "",
+            startYearMonth = "",
+            qualification = "",
+            jobType = "",
+            url = "",
+            detail = "",
+            isScrapped = false,
+            scrapCount = 0
+        )


InternInfo의 companion object에 빈 InternInfo를 반환해주는 함수나 변수를 만들어주면 UI 코드가 더 깔끔해질 것 같아요!

와 줄 수 들어든 거 보고 행복하네요 ㅠ

boiledeggg · 2025-03-27T18:46:07Z

feature/intern/src/main/java/com/terning/feature/intern/component/InternCompanyInfo.kt

+    val image = if (companyImage == "") {
+        ic_terning_intern_item_image_loading_128
+    } else {
+        companyImage
+    }


Suggested change

val image = if (companyImage == "") {

ic_terning_intern_item_image_loading_128

} else {

companyImage

}

val image = companyImage.ifBlank {

ic_terning_intern_item_image_loading_128

}

ifBlank라는걸 사용해서 빈 문자열인 경우 다른 값을 반환할 수 있어요! 사용하면 좋을 것 같네요!

가독성의 신. ifBlank 메모했습니다

Hyobeen-Park

느데 출동!! 공고 이미지는 잘 적용되었는데 배너는 한 번 더 확인이 필요할 것 같아요😭 녹화영상도 함께 첨부할게요!!

Screen_Recording_20250329_164835.mp4

Hyobeen-Park

수고하셨습니다~~!! 배너쪽 로딩뷰만 한 번 더 확인 부탁드려요!!

Hyobeen-Park · 2025-03-29T07:54:00Z

feature/search/src/main/java/com/terning/feature/search/search/component/BannerSlider.kt

+        } else {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                TerningLottieAnimation(
+                    jsonFile = terning_banner_loading,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(112.dp),
+                    iterations = LottieConstants.IterateForever
+                )
+            }


서버통신이 느린 경우도 있지만 통신 이후 이미지 로딩이 오래걸리는 경우도 있어서 두 가지 상황을 모두 고려해야 할 것 같습니다! 후자의 경우 searchBanners에 데이터가 존재하기 때문에 이 로딩 로띠가 보이지 않을 것 같네요..!

로딩뷰에 로띠를 넣는 경우는 제가 저번에 언급했던 SubcomposeAsyncImage를 활용해도 좋을 것 같아요!

아니 이런 천재 개발자들!!!!!!!!1 왜 그 생각을 못했지 감사합니다.

Hyobeen-Park · 2025-03-29T08:03:00Z

feature/intern/src/main/java/com/terning/feature/intern/InternRoute.kt

+    val internInfo = when (internState.loadState) {
+        is UiState.Success -> (internState.loadState as UiState.Success<InternInfo>).data
+        else -> InternInfo(
+            dDay = "",
+            title = "",
+            viewCount = 0,
+            company = "",
+            companyCategory = "",
+            companyImage = "",
+            deadline = "",
+            workingPeriod = "",
+            startYearMonth = "",
+            qualification = "",
+            jobType = "",
+            url = "",
+            detail = "",
+            isScrapped = false,
+            scrapCount = 0
+        )


Suggested change

val internInfo = when (internState.loadState) {

is UiState.Success -> (internState.loadState as UiState.Success<InternInfo>).data

else -> InternInfo(

dDay = "",

title = "",

viewCount = 0,

company = "",

companyCategory = "",

companyImage = "",

deadline = "",

workingPeriod = "",

startYearMonth = "",

qualification = "",

jobType = "",

url = "",

detail = "",

isScrapped = false,

scrapCount = 0

)

val internInfo = (internState.loadState as? UiState.Success<InternInfo>)?.data ?: InternInfo()

석준오빠가 리뷰 단 것처럼 빈 InternInfo 반환할 수 있도록 만들면 이렇게 구현하는 것도 깔끔하고 좋을 것 같아요!

쏘스윗!!!!

leeeyubin

수고하셨숩니당~~!!!!🚀

leeeyubin · 2025-03-29T09:25:27Z

core/designsystem/src/main/res/drawable/ic_terning_intern_item_image_loading_128.xml

파일 이름 마지막에 128은 무엇을 의미하나용?

로딩 이미지 크기입니당~~!

leeeyubin · 2025-03-29T09:56:18Z

feature/intern/src/main/java/com/terning/feature/intern/component/InternCompanyInfo.kt

            AsyncImage(
                model = ImageRequest.Builder(LocalContext.current)
                    .crossfade(true)
-                    .data(companyImage)
+                    .data(image)
                    .build(),
                contentDescription = stringResource(id = R.string.search_image),
                contentScale = ContentScale.Fit,
-                modifier = Modifier
-                    .fillMaxWidth()
+                modifier = Modifier.fillMaxWidth(),
            )
        }


효빈언니가 말해준 경우처럼 여기두 서버통신은 하더라도 기업 이미지 자체 url이 바뀌거나 해서 에러인 상황도 있었더라구요
그런 경우까지 고려한다면 로딩뷰를 placeholder랑 error에 넣어주는 건 어떤가요??

(그러면 홈 뷰에 있는 인턴공고도 error에 넣어줘야되긴 할 것 같네용,,)

아항!!! 추가해두면 확실히 사용자 입장에서 구별하기 좋을 것 같네용 🥹
근데 에러 이미지가 따로 없는 지금 당장은 에러 이미지인지 로딩 이미지인지가 구별이 안될 것 같은 issue..

leeeyubin · 2025-03-29T09:56:30Z

feature/search/src/main/java/com/terning/feature/search/search/component/BannerSlider.kt

+        } else {
+            Box(
+                modifier = Modifier
+                    .fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                TerningLottieAnimation(
+                    jsonFile = terning_banner_loading,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(112.dp),
+                    iterations = LottieConstants.IterateForever
+                )
+            }


로딩뷰에 로띠를 넣는 경우는 제가 저번에 언급했던 SubcomposeAsyncImage를 활용해도 좋을 것 같아요!

Hyobeen-Park

어머낭 어푸 안한거 이제 알았네요ㅠ LGTM~~!!🚀🚀

leeeyubin

확인했습니다!! 수고 많았어용🚀

arinming added 7 commits March 27, 2025 21:16

[ADD/#359] 공고 상세 뷰 placeholder 추가

b7c6269

[FIX/#359] 공고 상세 뷰 placeholder 이미지 수정

330d8f0

[ADD/#359] 배너 로딩 로띠, 추천 공고 로딩 이미지 추가

ea7078c

[ADD/#359] 배너 로딩 로띠 추가

b02ce6c

[ADD/#359] 추천 공고 로딩 이미지 추가

b87b303

[ADD/#359] 공고 상세 뷰 로딩 이미지 추가

b37992b

[DELETE/#359] 쓰지 않는 임포트 삭제

2b21b53

arinming added UI 💐 UI 작업 아린💛 아린 labels Mar 27, 2025

arinming added this to the 4차 스프린트 작업 milestone Mar 27, 2025

arinming requested review from Hyobeen-Park, boiledeggg and leeeyubin March 27, 2025 15:13

arinming self-assigned this Mar 27, 2025

arinming linked an issue Mar 27, 2025 that may be closed by this pull request

[UI] 탐색 뷰 / 로딩 이미지 추가 #359

Closed

3 tasks

arinming added this to Terning-Android Mar 27, 2025

boiledeggg approved these changes Mar 27, 2025

View reviewed changes

Hyobeen-Park reviewed Mar 29, 2025

View reviewed changes

leeeyubin approved these changes Mar 29, 2025

View reviewed changes

[REFACTOR/#359] 배너 로딩 조건 추가, 공고 Empty 오브젝트 추가

6664afd

Hyobeen-Park approved these changes Apr 2, 2025

View reviewed changes

arinming requested review from boiledeggg and leeeyubin April 3, 2025 00:04

leeeyubin approved these changes Apr 3, 2025

View reviewed changes

arinming merged commit c731c98 into develop Apr 3, 2025
1 check passed

github-project-automation bot moved this to Done in Terning-Android Apr 3, 2025

[UI/#359] 탐색, 공고 뷰 / 로딩 이미지 추가 #370

[UI/#359] 탐색, 공고 뷰 / 로딩 이미지 추가 #370

Uh oh!

Conversation

arinming commented Mar 27, 2025

⛳️ Work Description

📸 Screenshot

📢 To Reviewers

Uh oh!

boiledeggg left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hyobeen-Park left a comment

Choose a reason for hiding this comment

Uh oh!

Hyobeen-Park left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

leeeyubin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hyobeen-Park left a comment

Choose a reason for hiding this comment

Uh oh!

leeeyubin left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants