[Feat/#5] 탭바 UI 생성 #7

cinnamonfor6214 · 2025-01-20T06:42:35Z

🛠 변경 사항 Changes

탭바 UI 구현해봤습니다!
(추가) 기존과 다르게 custom 탭바 구현해서 뷰로 따로 할당해줬어요!

💬 기타 참고 사항

원래는 Tab 사용해서 구현하려고 했는데 해당 기능이 iOS18 부터 적용되는 것 같아서 TabItem으로 구현했습니다.
iOS15 부터는 탭바 관련된 설정을 init할 때 appearance = UITabBarAppearance() 사용해서 해야된다고 해서... 해당 부분은 제가 지피티 도움을 좀 받았습니다... 우선 공유부터 하고 더 공부해서 제가 코드를 수정하겠습니다!
구분선을 구현하고 싶었는데 UITabBarAppearnace로 구현함에 어려움을 느껴서 일단 rectangle로 구현했습니다... 이부분도 더 공부해서 수정하겠습니다!
(추가) 위 내용들은 탭바 구성을 새로 바꾸면서 수정했습니다!

🔗 관련 이슈 Related issues

closes #5

📸 스크린샷 (선택 사항)

agseou · 2025-01-20T12:55:43Z

아이쿠 이미지가 깨져요..ㅜㅜ Readme 줄바꿈 해주세요!
작성하면서 Preview 탭을 누르면 마크다운이 어떻게 보일지 미리 확인해볼 수 있어요!

agseou

PR 제목도 규칙에 맞춰서 바꿔주세요~

cinnamonfor6214 · 2025-01-21T02:58:14Z

수정 했습니다! 확인 부탁드려요!
@agseou @neaimt

agseou · 2025-01-21T07:30:52Z

수정 했습니다! 확인 부탁드려요! @agseou @neaimt

규칙에서 PR 제목에 붙는 번호는, PR 번호가 아닌 이슈번호예요!
작성한 이슈 번호니까 [Feat/#5] 로 적으면 됩니당~

cinnamonfor6214 · 2025-01-21T09:01:02Z

수정 했습니다! 확인 부탁드려요! @agseou @neaimt

규칙에서 PR 제목에 붙는 번호는, PR 번호가 아닌 이슈번호예요! 작성한 이슈 번호니까 [Feat/#5] 로 적으면 됩니당~

헉 수정했습니다! 다음엔 실수 없도록 하겠습니다...!!

dorundorun/dorundorun/App/TabbarView.swift

agseou

음 저라면
TabView의 tabItem을 써서 구현하지 않고
따로 뷰를 만들 것 같아요!

피그마에 새롭게 디자인 업데이트 되었는데,
그거 반영해서 다시 작업 부탁드려요~

그리고 main에 디자인시스템 올라갔어요
풀 받고 리소스 이용해서 구현해주세요!

agseou

전체적으로 피그마랑 탭바의 높이, 간격 등 레이아웃, 폰트 사이즈 등이 많이 다른데
피그마 보면서 작업 부탁드려요!

dorundorun/dorundorun/App/TabbarView.swift

이걸 커밋을 안 하고 있었어서 커밋합니다...!

피드백 반영하여 custom 탭바 UI로 만들었습니다!

탭 높이, 간격, 폰트 사이즈 등 수정했습니다

색상 등 수정했습니다

중복된 코드 때문에 충돌이 일어나서 수정했습니다

Assets 파일에서 계속 오류가 나서 기존 파일 삭제 후 다시 복사, 붙여넣기로 해결했습니다

agseou

작업하면서 빌드 오류가 발생하지 않았나요?

Tab 뒤에 스페이스랑
Rectangle()에 foregroundStyle 모디파이어 색상,
불필요한 ZStack
등등...
아직 수정이 안되었는데 확인해주세요!

dorundorun/dorundorun/Assets.xcassets/AppIcon.appiconset/Contents.json

dorundorun/dorundorun/App/TabbarView.swift

경로 변경 용도

띄어쓰기, 줄바꿈 등 수정하고 모디파이어로 색상 수정했습니다! Presentation 디렉토리로 경로도 옮겼습니다.

agseou

여전히 빌드 오류 있습니다
다시 한번 코멘트 확인해주세요 !

DesignSystem 파일 아래로 이동했습니다!

TabbarView에서 ButtonView, CustomTabView 분할했습니다

cinnamonfor6214 · 2025-01-25T16:03:53Z

여전히 빌드 오류 있습니다 다시 한번 코멘트 확인해주세요 !

알려주신대로 Assets 파일 DesignSystem롤 이동했습니다!

dorundorun/dorundorun/DesignSystem/Fonts/Assets.xcassets/Contents.json

agseou · 2025-01-25T16:28:47Z

dorundorun/dorundorun/Presentaion/ButtonView.swift

+        .font(.custom("SUIT", size: 10))
+        .foregroundStyle(isSelected ? Color.primary200 : Color.neutral600)
+    }
+    .offset(y: -15)


여기에 offset을 둔 이유가 있을까요?

눈으로 봤을 때 아이콘들이 너무 아래로 치우쳐진 것 같아서 넣어뒀었는데 코드 수정하다보니 전처럼 아예 아래로 치우치는 느낌이 없어져서 삭제했습니다!

다시 보니까 프로토타입에 비해서는 확실히 아래로 치우치는 느낌이 있어서 padding을 넣었습니다
re-request 요청 보낼테니 한 번만 확인 부탁드려요...!!

offset은 화면에 렌더링할 때만 이동시키는 역할을 해줘요
즉, 뷰의 원래 프레임은 변하지 않고, 화면에 보이는 위치만 이동하거등요!!

특히 버튼과 같은 아이들.. 상호작용이 있는 것들의
실제 뷰 레이아웃 위치를 변경하려면 offset보다는
padding, frame 등을 사용하는게 좋다고 생각합니다 !

agseou · 2025-01-25T16:33:57Z

dorundorun/dorundorun/Presentaion/ButtonView.swift

+      Image(imageName)
+        .renderingMode(.template)
+        .foregroundStyle(isSelected ? Color.primary200 : Color.neutral500)
+        .padding(.vertical, 7)


사소한 부분이지만, 여기 역시 피그마랑 레이아웃이 좀 달라요!
아이콘이랑 글자 사이 간격이 있잖아요 !

여기 패딩을 주고 싶다면....
아래에 패딩이 필요하니까...
저라면 .padding(.bottom, 9)로 둘 거 같아요 !
참고만 해주세요~

이거 확인하면서 피그마에 있는 디자인이 살짝 대칭이 안맞는거 발견해서...
디자이너님께 요청해서 수정했어요!

패딩 확인하시면서 다시 한번 봐주세요!

@agseou 최대한 피그마 확인하면서 padding 넣고 수치 맞춰봤습니다...
번거로우시겠지만 re-request 요청 보낼테니 한 번만 확인 부탁드려요!
늘 감사합니다!

dorundorun/dorundorun/Presentaion/ButtonView.swift

Assets파일을 Fonts에서 빼오는 과정에서 Assets2파일이 생겨서 해당 부분 수정했습니다!

적용이 안 되어 있어서 재적용합니다...

dorundorun/dorundorun/App/TabbarView.swift

dorundorun/dorundorun/Assets.xcassets/AppIcon.appiconset/Contents.json

dorundorun/dorundorun/App/TabbarView.swift

cinnamonfor6214 · 2025-01-25T17:42:15Z

dorundorun/dorundorun/Presentaion/ButtonView.swift

+        .font(.custom("SUIT", size: 10))
+        .foregroundStyle(isSelected ? Color.primary200 : Color.neutral600)
+    }
+    .offset(y: -15)


눈으로 봤을 때 아이콘들이 너무 아래로 치우쳐진 것 같아서 넣어뒀었는데 코드 수정하다보니 전처럼 아예 아래로 치우치는 느낌이 없어져서 삭제했습니다!

dorundorun/dorundorun/Presentaion/ButtonView.swift

cinnamonfor6214 · 2025-01-26T04:44:22Z

dorundorun/dorundorun/Presentaion/ButtonView.swift

+        .font(.custom("SUIT", size: 10))
+        .foregroundStyle(isSelected ? Color.primary200 : Color.neutral600)
+    }
+    .offset(y: -15)


다시 보니까 프로토타입에 비해서는 확실히 아래로 치우치는 느낌이 있어서 padding을 넣었습니다
re-request 요청 보낼테니 한 번만 확인 부탁드려요...!!

cinnamonfor6214 · 2025-01-26T04:45:05Z

dorundorun/dorundorun/Presentaion/ButtonView.swift

+      Image(imageName)
+        .renderingMode(.template)
+        .foregroundStyle(isSelected ? Color.primary200 : Color.neutral500)
+        .padding(.vertical, 7)


@agseou 최대한 피그마 확인하면서 padding 넣고 수치 맞춰봤습니다...
번거로우시겠지만 re-request 요청 보낼테니 한 번만 확인 부탁드려요!
늘 감사합니다!

dorundorun/dorundorun/Presentaion/TabbarView.swift

agseou · 2025-01-26T06:04:38Z

dorundorun/dorundorun/Presentaion/CustomTabView.swift

+#Preview {
+  CustomTabView(selectedTab: .constant(.home))
+}


지금 이 파일에서 @Binding 을 쓰고 있잖아요!
혹시 @Binding 이 필요한 이유에 대해 공유해주실 수 있나요?

dorundorun/dorundorun/Presentaion/ButtonView.swift

cinnamonfor6214 · 2025-01-26T06:37:48Z

dorundorun/dorundorun/Presentaion/TabbarView.swift

@@ -31,7 +31,7 @@ struct TabbarView: View {
        myPageView()
      }
      CustomTabView(selectedTab: $seletedTab)
-        .frame(width: 393, height: 92)
+        .frame(maxWidth: .infinity)


이부분에서 height: 92 로 맞췄을 때 Extra argument 'height' in call 오류가 발생해서 CustomTabView에서 높이 맞춰줬습니다!

cinnamonfor6214 · 2025-01-26T06:38:19Z

dorundorun/dorundorun/Presentaion/CustomTabView.swift

@@ -56,6 +56,7 @@ struct CustomTabView: View {
      .frame(width: 300, height: 55)
      .padding(.vertical, 15)
    }
+    .frame(height: 92)


이 부분에 height를 추가해서 높이를 맞추고 TabbarView에서 maxWidth를 .infinity로 설정했습니다!

agseou

고생하셨습니다!

cinnamonfor6214 · 2025-01-26T06:57:19Z

고생하셨습니다!

피드백 열심히 해주시고 리뷰 열심히 봐주셔서 정말 감사합니다...!!!

cinnamonfor6214 added the Feat 새로운 기능 또는 요청 label Jan 20, 2025

cinnamonfor6214 requested review from neaimt and agseou January 20, 2025 06:42

cinnamonfor6214 self-assigned this Jan 20, 2025

cinnamonfor6214 linked an issue Jan 20, 2025 that may be closed by this pull request

[FEAT] 탭바 UI 구현 #5

Closed

5 tasks

agseou requested changes Jan 20, 2025

View reviewed changes

cinnamonfor6214 changed the title ~~Feat: 탭바 UI 생성~~ [Feat/#7] 탭바 UI 생성 Jan 21, 2025

cinnamonfor6214 changed the title ~~[Feat/#7] 탭바 UI 생성~~ [Feat/#5] 탭바 UI 생성 Jan 21, 2025

neaimt previously approved these changes Jan 21, 2025

View reviewed changes

dorundorun/dorundorun/App/TabbarView.swift Outdated Show resolved Hide resolved

agseou requested changes Jan 21, 2025

View reviewed changes

cinnamonfor6214 dismissed neaimt’s stale review via e63e467 January 24, 2025 06:58

cinnamonfor6214 requested review from agseou and neaimt January 24, 2025 09:45

agseou requested changes Jan 24, 2025

View reviewed changes

cinnamonfor6214 added 5 commits January 24, 2025 22:39

Feat: 탭바 UI 생성

ee6ef99

Feat: xcodeproj 파일 생성

03d035e

이걸 커밋을 안 하고 있었어서 커밋합니다...!

Fix : 탭바 UI 뷰로 할당

e794227

피드백 반영하여 custom 탭바 UI로 만들었습니다!

Fix: 줄바꿈 및 불필요한 요소 제거

8ea9aef

Fix: 레이아웃 수정

2e28031

탭 높이, 간격, 폰트 사이즈 등 수정했습니다

cinnamonfor6214 force-pushed the feat/#5-create-tabbar-UI branch from 24cf0c2 to 2e28031 Compare January 24, 2025 13:53

cinnamonfor6214 added 3 commits January 24, 2025 23:20

Fix: pull origin 받아와서 수정

95a0863

색상 등 수정했습니다

Fix: 충돌 수정

1ed4123

중복된 코드 때문에 충돌이 일어나서 수정했습니다

Fix: Assets 파일 수정

541acd4

Assets 파일에서 계속 오류가 나서 기존 파일 삭제 후 다시 복사, 붙여넣기로 해결했습니다

cinnamonfor6214 requested a review from agseou January 24, 2025 14:23

agseou requested changes Jan 24, 2025

View reviewed changes

Fix: App 디렉토리 하위에서 제거

bd0d07f

경로 변경 용도

cinnamonfor6214 added 4 commits January 25, 2025 12:01

Fix: 코드 수정 및 Presentation으로 이동

5170559

띄어쓰기, 줄바꿈 등 수정하고 모디파이어로 색상 수정했습니다! Presentation 디렉토리로 경로도 옮겼습니다.

Fix: Assets 파일 경로 수정

47dcbcf

Fix: project.pbxproj 업데이트

5bf2158

Chore: 띄어쓰기 수정

095b8ea

cinnamonfor6214 requested a review from agseou January 25, 2025 03:06

agseou requested changes Jan 25, 2025

View reviewed changes

cinnamonfor6214 added 2 commits January 26, 2025 01:01

Fix: Assets 파일 이동

463bb0f

DesignSystem 파일 아래로 이동했습니다!

Fix: 파일 분리

a22738b

TabbarView에서 ButtonView, CustomTabView 분할했습니다

cinnamonfor6214 requested a review from agseou January 25, 2025 16:07

agseou requested changes Jan 25, 2025

View reviewed changes

cinnamonfor6214 added 3 commits January 26, 2025 13:33

Fix: Assets, Assets2 파일 문제 해결

66a1de7

Assets파일을 Fonts에서 빼오는 과정에서 Assets2파일이 생겨서 해당 부분 수정했습니다!

Fix: frame, padding값 수정

89933e9

Fix: Text 밑에 padding 추가

434eaf5

cinnamonfor6214 requested a review from agseou January 26, 2025 04:45

Fix: 띄어쓰기 적용

ae1f2d5

적용이 안 되어 있어서 재적용합니다...

cinnamonfor6214 commented Jan 26, 2025

View reviewed changes

agseou requested changes Jan 26, 2025

View reviewed changes

cinnamonfor6214 added 2 commits January 26, 2025 15:36

Fix: ButtonView 줄바꿈

bf43333

FIx: width, height 수정

631cee7

cinnamonfor6214 commented Jan 26, 2025

View reviewed changes

cinnamonfor6214 requested a review from agseou January 26, 2025 06:39

agseou approved these changes Jan 26, 2025

View reviewed changes

cinnamonfor6214 merged commit 76b34fb into main Jan 26, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat/#5] 탭바 UI 생성 #7

[Feat/#5] 탭바 UI 생성 #7

cinnamonfor6214 commented Jan 20, 2025 •

edited

Loading

agseou commented Jan 20, 2025

agseou left a comment

cinnamonfor6214 commented Jan 21, 2025

agseou commented Jan 21, 2025 •

edited

Loading

cinnamonfor6214 commented Jan 21, 2025

agseou left a comment •

edited

Loading

agseou left a comment

agseou left a comment •

edited

Loading

agseou left a comment

cinnamonfor6214 commented Jan 25, 2025

agseou Jan 25, 2025

cinnamonfor6214 Jan 25, 2025

cinnamonfor6214 Jan 26, 2025

agseou Jan 26, 2025 •

edited

Loading

agseou Jan 25, 2025 •

edited

Loading

agseou Jan 25, 2025

cinnamonfor6214 Jan 26, 2025

cinnamonfor6214 Jan 25, 2025

cinnamonfor6214 Jan 26, 2025

cinnamonfor6214 Jan 26, 2025

agseou Jan 26, 2025

cinnamonfor6214 Jan 26, 2025

cinnamonfor6214 Jan 26, 2025

agseou left a comment

cinnamonfor6214 commented Jan 26, 2025

[Feat/#5] 탭바 UI 생성 #7

[Feat/#5] 탭바 UI 생성 #7

Conversation

cinnamonfor6214 commented Jan 20, 2025 • edited Loading

🛠 변경 사항 Changes

💬 기타 참고 사항

🔗 관련 이슈 Related issues

📸 스크린샷 (선택 사항)

agseou commented Jan 20, 2025

agseou left a comment

Choose a reason for hiding this comment

cinnamonfor6214 commented Jan 21, 2025

agseou commented Jan 21, 2025 • edited Loading

cinnamonfor6214 commented Jan 21, 2025

agseou left a comment • edited Loading

Choose a reason for hiding this comment

agseou left a comment

Choose a reason for hiding this comment

agseou left a comment • edited Loading

Choose a reason for hiding this comment

agseou left a comment

Choose a reason for hiding this comment

cinnamonfor6214 commented Jan 25, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agseou Jan 26, 2025 • edited Loading

Choose a reason for hiding this comment

agseou Jan 25, 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agseou left a comment

Choose a reason for hiding this comment

cinnamonfor6214 commented Jan 26, 2025

cinnamonfor6214 commented Jan 20, 2025 •

edited

Loading

agseou commented Jan 21, 2025 •

edited

Loading

agseou left a comment •

edited

Loading

agseou left a comment •

edited

Loading

agseou Jan 26, 2025 •

edited

Loading

agseou Jan 25, 2025 •

edited

Loading