[Design] 편지 등록 및 쓰기, 새 행성 추가 반응형 UI

[yyypearl]

연관 이슈

close #98

개요

편지 등록 및 쓰기, 새 행성 추가 반응형 UI

✅ 작업 내용

• 편지 등록 관련 페이지 반응형
• 편지 쓰기 관련 페이지 반응형
• 새 행성 추가하기 페이지 반응형

🖥 구현 결과

• 편지 등록 반응형

20241202_131950.mp4

• 편지 쓰기 반응형

20241202_132113.mp4

• 임시 저장 BottomSheet 반응형

20241202_133218.mp4

• 새 행성 추가하기 반응형

20241202_140009.mp4

📝 기타 사항

• max-height 735px, 650px, 570px을 기준으로 작업했습니다! 그리고 추가로 조정해야할 부분의 경우 이 외에 높이 설정으로 조절하기도 했어요! (한 군데 정도?)

• Letter.tsx 컴포넌트의 반응형이 조금 어렵습니다.. 기존에는 width와 height를 부모로부터 내려서 보여줬는데, 이제 각 타입별로 반응형이 필요해서 컴포넌트 내부에서 각 타입별 (크기별)로 max-height 범위에 따라 크기를 지정해주어야 할 것 같아요! 기존 showType에서도 좀 더 추가되어야 해서 (기존 showType은 크기가 아닌, 컴포넌트 배치를 기준으로 정한 것이어서요!) 복잡해질 것 같아 우선 showType 기준으로만 설정해주었어요.

• theme.ts에 반응형 작업 시 필요한 폰트 사이즈 작업하면서 추가해뒀습니다! 디자인 시스템에는 정리되어있지 않아, 작업을 우선 하면서 필요한 타입이 생길 경우마다 추가한 후 나중에 싹 크기에 맞추어 순서대로 정리하면 될 거 같아요!

[github-actions]

🎉 Deploy Preview

https://lettering-4uyd5b5ky-yyypearls-projects.vercel.app
여기에서 배포 결과 확인하기

[github-actions]

🎉 Deploy Preview

https://lettering-ma03w9vw0-yyypearls-projects.vercel.app
여기에서 배포 결과 확인하기