✨ 피드 메인 페이지 UI

[BangDori]

작업 이유

• 피드 메인 페이지 UI
• iPhone SE로 기기를 맞추어 UI 확인해주시면 감사하겠습니다~

작업 사항

1️⃣ 피드 메인 페이지 UI 추가

• 피드 메인 페이지의 경우 상단에 있는 헤더 영역과 아래 피드 리스트 영역을 나누어 구현하였습니다.
• 이미지의 경우 이미지 슬라이더를 따로 구현하는게 나을 것 같아서 다른 브런치를 생성하여 구현하겠습니다.

2️⃣ FNB 컴포넌트 제거

• 임시 컴포넌트로 생각하여 제거하였습니다.

리뷰어가 중점적으로 확인해야 하는 부분

의찬님이 확인해주셨으면 하는 부분

코드에 부족한 부분이나 궁금한 부분이 있으시다면 많은 질문 부탁 드리겠습니다.

• 현재 Icon이 public api 가 적용되어있지 않고, 여러모로 불편한 사용법을 가지고 있는데 추후 SVG Sprite 기법을 적용할 예정입니다.
• 새롭게 디자인 된 피드 메인 페이지를 살펴보면, title이 없는 것을 확인할 수 있습니다. 이에 대해 추후 Feed의 타입이 수정될 수 있습니다. (제가 하겠습니다.)
• Figma에 나온 UI와 동일한가요?

재서님이 확인해주셨으면 하는 부분

• Figma에 나온 UI와 동일한가요?

발견한 이슈

• 없음

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-20.d37mn03xh3qyyz.amplifyapp.com

[Legitgoons]

수고 많으셨습니다. 저도 svg icon의 경우 어떻게 처리야할지 고민했었는데, SVG Sprite기법은 상당히 적절해보이네요. 병합하셔도 좋습니다. 👍

[psychology50]

14 Pro 사이즈로 보면 아이콘 간격이 눈에 띌 정도로 벌어지는데, 디자인 팀하고 이야기해볼 필요가 있을 것 같아요.
아이패드 Pro 규격에선 오히려 거슬릴 정도로 간격이 벌어지지 않네요..? ㅋㅋ
14 Pro는 일단 대응이 필요해보입니다.

iPhone SE 사이즈에서 프로필이 타원에 가깝게 나타나는 문제가 있어요.

마찬가지로 14 Pro 규격에서 나타나는 문제.
프로필 이미지와 {이름, 날짜}와의 간격이 너무 가깝고, 이름이 볼드 처리되지 않고 있어요.

[BangDori]

@psychology50 리뷰 감사합니다 !

1. 프로필 이미지가 타원으로 표시되는 문제는 해결하였습니다.
2. 프로필 이미지 간격에 있어서, Figma에 나온 설정과 다른 부분이 있어 수정하였습니다. (5px -> 8px)
3. 우선 SVG 아이콘의 경우 사이즈를 따로 지정해주지 않아서, 아이폰 크기에 맞춰 변경되지 않는 문제가 있는데 이번 주 내에 SVG Sprite 적용하면서 처리할 예정입니다!
4. 볼드 처리 되지 않는 문제는 현재 폰트에 대한 전역 스타일 설정에 문제가 발생한 부분이라, 🐛 fonts 동작 오류 #18 에 이슈 등록해두었습니다!

[psychology50]

변경 사항 확인했습니다.
확인하다가 두 가지 의문이 더 생겨 질문드립니다.

1. 상단의 패딩값은 모바일 환경을 고려하신 듯 한데, 이걸 웹뷰에서 고려할 필요가 있는 건가요? iOS에서 Webview를 호출할 때 사이즈를 지정하는 방식이라면 패딩값이 불필요하지 않나요?
2. 아이콘의 크기가 맞지 않는 것 같아 사이즈 확인 부탁드립니다!

[BangDori]

@psychology50

1. 상단 패딩 값이 필요한지 불필요한지 아직 확인이 안되서, 추후에 iOS에서 WebView 로드할 때 확인할 예정이라 임의로 추가해두었습니다.
2. 아이콘 크기 확인해보았는데, Figma에서는 99 * 17.32 웹뷰에서는 99 * 18로 동일하였습니다.

[psychology50]

폰트 이슈였네요. ㅎ
의찬님이 고생하셔야 하는 부분이므로 승인하겠습니다~