[Feat] #553 - 피드 목록 및 마이페이지 피드 이미지 첨부 UI 구현 #557

Guryss · 2025-05-09T15:18:17Z

⭐️Issue

close [Feat] 피드 목록 및 마이페이지 내 피드 이미지 첨부 UI 구현 #553

🌟Motivation

피드 목록 및 마이페이지 피드에 이미지 첨부 UI 구현했습니다.

🌟Key Changes

테스트 레포지토리를 사용하여 UI 구현했습니다.
MypageRepository 는 안에 꽤나 많은 함수들이 있어서 일일히 추가하기 어려울 것 같아 일단 FeedRepository만 반영했습니다.
FeedViewController 에서 레포지토리만 바꿔 넣어주시면 됩니다.

private func setupPageViewController() {
        for pageIndex in 0..<categoryList.value.count {
            let category = categoryList.value[pageIndex]
            let viewController = FeedGenreViewController(
                viewModel: FeedGenreViewModel(
                    feedRepository: TestFeedRepository(),  // 여기 변경!
                    feedDetailRepository: DefaultFeedDetailRepository(
                        feedDetailService: DefaultFeedDetailService()
                    ),
                    category: category.rawValue
                )

썸네일 이미지 위에 이미지 개수를 나타내는 칩을 구현했습니다.
내부 마진을 설정하여 imageCountLabel이 해당 마진만큼 여백을 갖도록 했습니다.

imageCountBackgroundView.do {
    $0.backgroundColor = .wssGrayToast
    $0.clipsToBounds = true
    $0.layoutMargins = UIEdgeInsets(top: 4, left: 10, bottom: 4, right: 10)
}

숫자값에 따라 칩의 width, height이 변해서 아래처럼 height 레이아웃을 지정한 뒤 뷰를 강제 업데이트 한 뒤, cornerRadius를 height의 절반만큼 가져갈 수 있도록 설정했습니다. 해당 코드에서 개선할 부분이 있다면 피드백 부탁드립니다!

imageCountBackgroundView.snp.makeConstraints {
    $0.trailing.equalToSuperview().inset(12)
    $0.bottom.equalToSuperview().inset(10)
    $0.height.greaterThanOrEqualTo(25)
                
    imageCountLabel.snp.makeConstraints {
        $0.edges.equalToSuperview().inset(imageCountBackgroundView.layoutMargins)
    }
}
            
imageCountBackgroundView.layoutIfNeeded()
imageCountBackgroundView.layer.cornerRadius = imageCountBackgroundView.frame.height / 2

🌟Simulation

피드 목록	마이페이지 피드

🌟To Reviewer

테스트 레포지토리엔 데이터를 4개 넣어놨는데 무한 스크롤때문인지? 데이터가 계속 늘어나네요..?
이 부분은 다시 찾아봐야 할 것 같습니닷

🌟Reference

Naknakk

고생했습니다! Entity-DTO가 분리되어서 추후 서버 작업이 들어와도 Repository 단에서 서버 의존성이 해결되니 빠르게 작업 가능하겠네용!

이미지가 들어가니 이제 앱이 더 멋있어지는군용..

Naknakk · 2025-05-09T16:28:38Z

WSSiOS/WSSiOS/Source/Presentation/Base/FeedList/FeedListTableViewCell.swift

W1 to @ena-isme

이 부분 코드는 Entity 정리가 더 필요하다는 느낌이 드네용 . .
https://github.com/Team-WSS/WSS-iOS/pull/496/files/763124a055730c9857192de4ad1752729a16b536#diff-20960516213545e5b8765a72cbb7a46c8694dd91168b1bb4f017019d14efefbc

이 PR에서 더 자세히 봤어야 했는데 ㅜ 지금 다시 보니 연결된 웹소설 자체를 하나의 구조체로 뺀다음에, 연결된 소설이 있는지 여부를 판단하는 Bool 값이 있는게 더 좋을 것 같아요. 지금처럼 -1로 다 넘기면 의미를 알 수 없는 코드가 너무 늘어나는 느낌입니다. 추가로 Entity의 List 네이밍도 배열로 쓰이는 타입에 반대로 들어가있네요....
뒤늦은 리뷰지만 이 PR 이후 꼭 수정되면 좋을 것 같아요

Naknakk · 2025-05-09T16:35:20Z

WSSiOS/WSSiOS/Source/Presentation/Base/FeedList/FeedListImageView.swift

+                $0.height.greaterThanOrEqualTo(25)
+
+                imageCountLabel.snp.makeConstraints {
+                    $0.edges.equalToSuperview().inset(imageCountBackgroundView.layoutMargins)


W2

신기하네요...??? 이런게 되는군요!! 다만 가독성 측면에서 레이아웃 관련 코드가 setLayout에 모여있는게 저는 좀 더 편한 것 같아서 이렇게 작성하는게 더 장점이 있는지는 아직 고민입니다 .. !

그쵸 아무래도 .. 저도 그 점이 맘에 안들었긴 했습니다 ㅠㅠ

Naknakk · 2025-05-09T16:46:23Z

WSSiOS/WSSiOS/Source/Presentation/Base/FeedList/FeedListImageView.swift

+            imageCountBackgroundView.layoutIfNeeded()
+            imageCountBackgroundView.layer.cornerRadius = imageCountBackgroundView.frame.height / 2


W1

setLayout() 메서드는 뷰의 init 시기에 실행되기 때문에, Label의 숫자 값이 바뀌는 것에 따라 BackgroundView의 CornerRadius를 업데이트 하려는 의도대로 되지 않을 것 같다고 생각이 듭니다.. Label의 내용에 따라 cornerRadius를 바꿔주려면, bindData 쪽에서 레이아웃 처리를 다시 한 번 해줘야 할 것 같아요.

또는, 숫자가 바뀜에 따라 Label Height가 극적으로 바뀌지 않을 것이라 예상하는데, imageCountBackgroundView의 height를 25로 그냥 고정해두고 맞춰서 cornerRadius를 주는 것도 나쁘지 않을 것 같다고 생각합니다. 피드는 무한스크롤이 필요할 정도로 양이 많은 만큼 데이터 할당할 때마다 다시 레이아웃을 잡기 보다는.. 고정해두는게 성능적으로도 더 좋을 것 같구요.
imageCountLabel는 이제 centerY를 superview와 동일하게 해두면 디자인 상 크게 거슬리지 않을 것 같습니다!

오호 이해했습니다..
무조건 텍스트의 사이즈에 기반해서 뷰 크기를 잡아야한다는 생각에 layoutIfNeeded()를 호출했던 것 같아요.
해당 뷰가 그렇게 큰 중요성을 가지는 뷰도 아닌 것 같고 이 뷰를 위해 성능적 부담을 갖게 하는 건 과한 것 같네요!

말씀하신 것처럼 height = 25로 고정하고 좌우 여백을 할당하는 방향으로 변경해보겠습니다.
항상 좋은 리뷰 감사합니다 낙낙~~👍

Naknakk · 2025-05-09T16:47:34Z

WSSiOS/WSSiOS/Source/Data/Repository/FeedRepository.swift

    func putFeed(feedId: Int, relevantCategories: [String], feedContent: String, novelId: Int?, isSpoiler: Bool, isPublic: Bool) -> Observable<Void>
 }

+struct TestFeedRepository: FeedRepository {


W3
테스트 레포 활용 좋네요~! 근데 데이터가 너무 길게 들어가니, Entity 구조체에 DummyData Static 변수를 추가해서 사용하는 것도 좋을 것 같습니다! 데이터 셋을 여러개 만들어서 바꿔보기도 편하니까용!

오 이것도 좋은 방법인 것 같네요!
테스트 레포가 너무 길어져서 거슬리긴 했는데! 반영해볼게요 👍

ena-isme

현재 스포일러가 아닌 모든 피드에서 같은 이미지가 표시되고 있는데, 의도한걸까요 ?

Guryss · 2025-05-12T06:54:17Z

현재 스포일러가 아닌 모든 피드에서 같은 이미지가 표시되고 있는데, 의도한걸까요 ?

테스트용으로 이미지 넣어둔것이구요! 마이페이지는 레포지토리 만들기엔 내용이 넘 많아서 못만들었어요 ㅠ 어프룹 되면 이미지 없애놓을 예정입니닷

ena-isme · 2025-05-13T02:04:47Z

@Guryss

테스트용으로 이미지 넣어둔것이구요! 마이페이지는 레포지토리 만들기엔 내용이 넘 많아서 못만들었어요 ㅠ 어프룹 되면 이미지 없애놓을 예정입니닷

넵 마이페이지 내용은 PR에서 확인했습니다.
이미지없는 기본값은 어떻게 되는지에 대한 질문이었습니다, 지금은 전부 다 있어서요. 어떤 피드는 있고, 어떤 피드는없고 요 상황 확인이 가능할까해서 여쭤보았습니당

Guryss · 2025-05-13T02:49:49Z

넵 마이페이지 내용은 PR에서 확인했습니다.
이미지없는 기본값은 어떻게 되는지에 대한 질문이었습니다, 지금은 전부 다 있어서요. 어떤 피드는 있고, 어떤 피드는없고 요 상황 확인이 가능할까해서 여쭤보았습니당

이미지 없는 상황일때엔 피드 목록에서 확인하실 수 있습니다! @ena-isme

ena-isme · 2025-05-13T02:55:05Z

@Guryss
관련내용 카톡으로 말씀드렸숩니당 확인부탁드릴게요 🤓

ena-isme

수고하셨어요!

ena-isme · 2025-05-13T03:46:13Z

WSSiOS/WSSiOS/Source/Data/Entity/TotalFeedListEntity.swift

+            //TODO: DTO 수정
+            thumbnailImage: "",
+            hasImage: true,
+            imageCount: 20
        )


W3
아하 이부분때문에 그랬던 거군요! 코드 먼저 봤어야 했네요
분기처리 하고 다음 PR 때 사진유무에 따른 UI 확인 할게요!

Naknakk

고생하셨습니당~!~! 깔끔하네요!!

아주 사소하지만 $0.height.equalTo(25) 에서 만들어둔 변수 backgroundHeight 를 넣어주면 더 좋을 것 같아용!

Guryss requested review from Naknakk, ena-isme and hyowon612 as code owners May 9, 2025 15:18

Guryss self-assigned this May 9, 2025

Guryss added guryss reviewPlz labels May 9, 2025

Guryss added this to WSS-iOS May 9, 2025

Guryss moved this to In Progress in WSS-iOS May 9, 2025

Guryss added this to the 사진소소 🤳 milestone May 9, 2025

Naknakk reviewed May 9, 2025

View reviewed changes

ena-isme reviewed May 12, 2025

View reviewed changes

Guryss requested a review from Naknakk May 12, 2025 08:32

Guryss added 8 commits May 12, 2025 17:33

[Feat] #553 - FeedListImageView UI 구현

6517722

[Feat] #553 - TotalFeedEntity 내 필요한 변수 추가 및 첨부 이미지에 대한 바인딩 조건 반영

77d6c08

[Chore] #553 - imageCount 라벨 뒤 backgroundView 레이아웃 디자인 반영

1b1ba9d

[Feat] #553 - 마이페이지 피드 내 이미지 첨부 UI 구현 및 Entity 반영

37ed137

[Feat] #553 - Entity 내 thumbnailImage 변수 추가 및 Feed 테스트 레포지토리 추가

cf29bac

[Chore] #553 - 테스트용 이미지 추가

64c6585

[Fix] #553 - 나기 리뷰 반영 - height 고정값 반영 및 레이아웃 코드 수정

4063657

[Fix] #553 - 나기 리뷰 반영 - static 변수 더미데이터 생성 및 테스트 레포에 반영

67e7597

Guryss force-pushed the Feat/#553 branch from 5aad6b6 to 67e7597 Compare May 12, 2025 08:34

ena-isme approved these changes May 13, 2025

View reviewed changes

Naknakk approved these changes May 13, 2025

View reviewed changes

[Fix] #553 - 나기 리뷰 반영 - 하드코딩된 수치를 변수로 수정하여 반영

f8d08f9

Guryss merged commit 62bf239 into Develop May 13, 2025

github-project-automation bot moved this from In Progress to Done in WSS-iOS May 13, 2025

Guryss deleted the Feat/#553 branch May 13, 2025 06:10

Guryss mentioned this pull request May 21, 2025

[Feat] #562 - 마이페이지와 타유저페이지 일 때 파일 분리 #564

Merged

		imageCountBackgroundView.layoutIfNeeded()
		imageCountBackgroundView.layer.cornerRadius = imageCountBackgroundView.frame.height / 2

[Feat] #553 - 피드 목록 및 마이페이지 피드 이미지 첨부 UI 구현 #557

[Feat] #553 - 피드 목록 및 마이페이지 피드 이미지 첨부 UI 구현 #557

Uh oh!

Conversation

Guryss commented May 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⭐️Issue

🌟Motivation

🌟Key Changes

🌟Simulation

🌟To Reviewer

🌟Reference

Uh oh!

Naknakk 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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ena-isme left a comment

Choose a reason for hiding this comment

Uh oh!

Guryss commented May 12, 2025

Uh oh!

ena-isme commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Guryss commented May 13, 2025

Uh oh!

ena-isme commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ena-isme left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Naknakk left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Guryss commented May 9, 2025 •

edited

Loading

ena-isme commented May 13, 2025 •

edited

Loading

ena-isme commented May 13, 2025 •

edited

Loading

Naknakk left a comment •

edited

Loading