[Design] 태그뷰 디자인하기 #470

Dorii0513 · 2025-02-10T13:51:45Z

변경 사항

태그 뷰 만들기

스크린샷 or 영상 링크

2025-03-08.7.59.02.mov

팀원에게 전달할 사항(Optional)

일단... 제가 디벨롭 머지하면서 혹여나 빼먹은 부분이 있을 수 있어요 ㅜ

각자 본인 코드 잘 있나 확인해주시면 좋을 것 같습니다
이번에 무니가 DynamicCell을 만들어주신 덕분에 매우 잘 활용하였습니닷
그러다보니 추가된 코드들이 꽤 생겼어요! -> 확인해 주시고 이상한 부분이 있다면 꼭 말씀해주세요 !!
(아래 코드에 코멘트 달아두었으니 참고해주시면 됩니다)
뷰가 잘 동작하는지 한번씩 테스트해주심 감사하겠습니다

close #465

…perAcademy-POSTECH/2024-MacC-A05-Chillin into Design/#465-designTagView # Conflicts: # Presentation/Home/TagView.swift # Reazy.xcodeproj/project.pbxproj

…/2024-MacC-A05-Chillin into Design/#465-designTagView # Conflicts: # Presentation/Home/HomeSearch/Cell/HomePDFCell.swift # Presentation/Home/HomeSearch/Cell/PDFTagCell.swift # Presentation/Home/HomeView.swift

…perAcademy-POSTECH/2024-MacC-A05-Chillin into Design/#465-designTagView # Conflicts: # DesignSystem/Views/DynamicCellLayout.swift # Domain/Entities/Tag.swift # Presentation/Home/HomeSearch/Cell/HomePDFCell.swift # Presentation/Home/HomeSearch/Cell/PDFTagCell.swift # Presentation/Home/HomeSearch/HomeSearchView.swift # Presentation/Home/HomeView.swift # Presentation/Home/TagSearch/TagView.swift # Presentation/Home/TagSearch/TagViewModel.swift # Reazy.xcodeproj/project.pbxproj

Dorii0513 · 2025-02-26T03:47:33Z

DesignSystem/Views/DynamicCellLayout.swift

+            let itemWidth = item.itemWidth(isEditMode: isEditMode ?? false)
+            if currentWidth + itemWidth + 10 >= screenWidth {


편집 모드일 때는 아이템 너비가 더 넓어져야 함.
따라서 isEditMode인지 Bool 값으로 판단 후 길이 계산

Dorii0513 · 2025-03-08T11:05:49Z

DesignSystem/Views/CustomAlert.swift

커스텀한 Alert 뷰 재사용할 수 있도록 만들어 두었습니다

Dorii0513 · 2025-03-08T11:07:18Z

DesignSystem/Views/EllipsisView.swift

무니가 만든 뷰인데, 이것도 재사용하면 좋을 것 같아서 전에 이야기 나눴던 것처럼 분리해두었습니다!

Dorii0513 · 2025-03-08T11:09:45Z

Domain/Interfaces/DynamicCell.swift

+
+extension DynamicCell {
+    func itemWidth(isEditMode: Bool) -> CGFloat {
+        let padding: CGFloat = isEditMode ? 35 : 16


DynamicCellLayout에서 셀의 너비를 계산하는 과정에서 셀 안의 패딩 값 계산이 빠져있더라구요.
-> 그러다보니 셀이 줄바꿈하는 과정에서 오차가 발생해서 해당 코드로 추가해두었습니다
( 셀을 삭제하는 x 버튼이 있냐 없냐에 따라 패딩 값이 달라져서 isEditMode에 따라 바뀌도록 설정합니다 )

mooninbeom · 2025-03-08T11:59:26Z

Presentation/Home/HomeView.swift

+            // 태그 생성
+            if tagViewModel.createTag {
+                CreateTagView()
+                    .environmentObject(tagViewModel)
+            }
+            if tagViewModel.showDeleteAlert {
+                CustomAlert(mainText: "\"\(tagViewModel.getTagName())\"\n태그를 삭제하시겠습니까?",
+                            message: "해당 태그가 달린 모든 논문에서도 삭제됩니다.",
+                            cancleAction: { tagViewModel.showDeleteAlert = false },
+                            confirmAction: tagViewModel.deleteTag)
+            }


이건 제 개인적인 생각인데 해당 뷰가 상시 나오는게 아닌 필요할 때 한번식 나오는 뷰인 만큼 안에 넣는거 보단 overlay에 넣어놓는 것이 뭔가 분리되는 느낌이 들어 해당 뷰가 어떤 뷰인지 더욱 직관적으로 확인할 수 있다고 생각합니다!
쿠로는 어떻게 생각하시나용

오 좋은 거 같아요! 분리해서 적용해보겠습니당

mooninbeom · 2025-03-08T12:01:02Z

Presentation/Home/TagSearch/TagView.swift

+}
+
+// MARK: - 태그를 선택하지 않음
+struct TagLEmptyView: View {


오타 있습니다!

Suggested change

struct TagLEmptyView: View {

struct TagEmptyView: View {

mooninbeom · 2025-03-08T12:06:55Z

Presentation/Home/TagSearch/TagView.swift

+                        VStack(alignment: .center, spacing: 0) {
+                            VStack {
+                                if tagViewModel.isTagExist {
+                                    TagListView(selectedTags: $tagViewModel.selectedTags, toggleTag: tagViewModel.tagTapped)


Environment로 하위 뷰(TagListView)에서 뷰모델에 접근할 수 있는데 바인딩으로 연결해서 따로 빼신 이유가 있으신 건가요??

엇 그러네요 ?? 왜 바인딩으로 했는지 기억이 잘...안납니다 ㅎㅎㅜ 수정해둘게요 !!

Dorii0513 · 2025-03-10T14:43:34Z

Presentation/Home/TagSearch/TagViewModel.swift

+        guard let index = tags.firstIndex(where: { $0.name == tagName }) else { return }
+            tags[index].isSeleted.toggle()
+
+            if tags[index].isSeleted {
+                selectedTags.append(tags[index])
+            } else {
+                selectedTags.removeAll { $0.id == tags[index].id }
+            }


tags에서 isSeleted된 애들만 filter로 넣어주려 했는데
그렇게 하니까 순서가 tags에 저장된 대로 들어가더라구요
그래서 그냥 append, remove하는 방식으로 만들었습니다!

mooninbeom

LGTM!
고생 많으셨습니다!!

mooninbeom · 2025-03-11T08:09:23Z

Presentation/Home/TagSearch/TagViewModel.swift

+    private func setBindings() {
+        $tags
+            .map { !$0.isEmpty }
+            .assign(to: \.isTagExist, on: self)
+            .store(in: &cancellables)
+    }


뷰 모델 사라질 때 구독 취소가 될 수 있게 deinit 추가해주세요!!

[#465] 프로젝트 파일 세팅

c8c935b

Dorii0513 added Design 디자인 작업이 필요할 때 PR-InProgress 현재 작업이 진행중인 PR labels Feb 10, 2025

Dorii0513 added this to the ✏️ v4.0 milestone Feb 10, 2025

Dorii0513 self-assigned this Feb 10, 2025

Dorii0513 added 24 commits February 17, 2025 20:18

[#465] 프로젝트 파일 세팅

a55bcb5

[#465] tagEmpty 상태의 뷰 그리기

f2950c1

[#465] isTagExist 뷰 구현

2b93b4b

[#465] 태그 선택, 선택해제 구현

db66410

[#465] 선택한 태그 정렬

69226ff

[#465] 태그뷰 메뉴 디자인 구현

bb2f3ab

[#465] 태그편집 기능 구현

b7275de

[#465] 태그추가 기능 구현

b44aee7

[#465] 태그중복 alert

43668d7

Merge branch 'Design/#465-designTagView' of https://github.com/Develo…

080f551

…perAcademy-POSTECH/2024-MacC-A05-Chillin into Design/#465-designTagView # Conflicts: # Presentation/Home/TagView.swift # Reazy.xcodeproj/project.pbxproj

[#465] 프로젝트 파일 세팅

2b4bdc0

[#465] tagEmpty 상태의 뷰 그리기

68c65cf

[#465] isTagExist 뷰 구현

ed6c433

[#465] 태그 선택, 선택해제 구현

bdfa55c

[#465] 선택한 태그 정렬

df81395

[#465] 태그뷰 메뉴 디자인 구현

01b678b

[#465] 태그편집 기능 구현

833e753

[#465] 태그추가 기능 구현

58d7941

[#465] 태그중복 alert

091334b

[#465] server 및 googleService 추가, 에러 해결

523f8f0

[#465] 불필요한 tagViewModel 주입 삭제

7622f06

Merge branch 'develop' of https://github.com/DeveloperAcademy-POSTECH…

258df59

…/2024-MacC-A05-Chillin into Design/#465-designTagView # Conflicts: # Presentation/Home/HomeSearch/Cell/HomePDFCell.swift # Presentation/Home/HomeSearch/Cell/PDFTagCell.swift # Presentation/Home/HomeView.swift

[#465] conflict 수정

21d2912

Dorii0513 commented Feb 26, 2025

View reviewed changes

Dorii0513 force-pushed the Design/#465-designTagView branch 5 times, most recently from 4ab9e2c to ee052d8 Compare February 28, 2025 14:16

Dorii0513 added 5 commits February 28, 2025 23:16

[#465] 서버 구글 파일 지움

83bfc20

[#465] 커스텀얼럿 적용 및 뷰 세부사항 수정

e639169

[#465] 태그 셀 너비 조정 및 아이콘 에셋 추가

928b920

[#465] useCase분리

5645648

[#465] print문 삭제

0a43815

Dorii0513 commented Mar 8, 2025

View reviewed changes

Dorii0513 added PR-NeedReview 작업이 완료되고 리뷰가 필요한 PR and removed PR-InProgress 현재 작업이 진행중인 PR labels Mar 8, 2025

mooninbeom reviewed Mar 8, 2025

View reviewed changes

[#465] 리뷰 반영

c61ca50

Dorii0513 requested review from JeEonPark, minjung0067, mooninbeom, wltnryu and Bluecho97 March 8, 2025 17:20

Dorii0513 added 2 commits March 9, 2025 15:20

[#465] 리뷰 반영2

63d187a

[#465] tag구조체 isSeleted 추가

7cbfd78

Dorii0513 commented Mar 10, 2025

View reviewed changes

mooninbeom approved these changes Mar 11, 2025

View reviewed changes

mooninbeom reviewed Mar 11, 2025

View reviewed changes

[#465] deinit 추가

97d31ed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Design] 태그뷰 디자인하기 #470

[Design] 태그뷰 디자인하기 #470

Dorii0513 commented Feb 10, 2025 •

edited

Loading

Dorii0513 Feb 26, 2025

Dorii0513 Mar 8, 2025 •

edited

Loading

Dorii0513 Mar 8, 2025

Dorii0513 Mar 8, 2025 •

edited

Loading

mooninbeom Mar 8, 2025

Dorii0513 Mar 8, 2025

mooninbeom Mar 8, 2025

mooninbeom Mar 8, 2025

Dorii0513 Mar 8, 2025

Dorii0513 Mar 10, 2025

mooninbeom left a comment

mooninbeom Mar 11, 2025

		let itemWidth = item.itemWidth(isEditMode: isEditMode ?? false)
		if currentWidth + itemWidth + 10 >= screenWidth {

[Design] 태그뷰 디자인하기 #470

Are you sure you want to change the base?

[Design] 태그뷰 디자인하기 #470

Conversation

Dorii0513 commented Feb 10, 2025 • edited Loading

변경 사항

스크린샷 or 영상 링크

팀원에게 전달할 사항(Optional)

Choose a reason for hiding this comment

Dorii0513 Mar 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dorii0513 Mar 8, 2025 • edited Loading

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

mooninbeom left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dorii0513 commented Feb 10, 2025 •

edited

Loading

Dorii0513 Mar 8, 2025 •

edited

Loading

Dorii0513 Mar 8, 2025 •

edited

Loading