레이아웃 믹스인

[hyerindev]

🔎 What is this PR?

✨ 설명

• 공통 레이아웃을 글로벌 스타일로 지정했습니다.
• NoDataTextLayout, BottomButtonLayout 믹스인을 추가했습니다.
• 디자인 토큰 gap 16px=1rem 단위를 추가했습니다.
• 현재 설계한 레이아웃 믹스인을 토대로 페이지 컴포넌트의 태그 구조를 수정했습니다. 거의 모든 페이지가 헤더/컨테이너로 나뉘는 구조라 main 태그로 대체하는 것이 수정이 가장 적었습니다. 하여 BottomButtonLayout 관련하여 main 태그 안에서 스크롤 영역과 버튼을 렌더링하는 1안으로 작업했습니다.

📷 스크린샷 (선택)

☑️ 테스트 체크리스트

💡 집중 리뷰 요청

각 코드 담당자께서는 공통 레이아웃 및 바텀 버튼 페이지/리스트 페이지에 따라 믹스인이 적용된 레이아웃 스타일을 고려하여 페이지 스타일 코드를 수정해 주시기 바랍니다.

[rwaeng]

👍 확인했습니다~! 태그를 페이지마다 다 추가해주셨네요 감사합니다!!
💬 이거 머지하면 제가 이번에 작업한 pr 올릴 때 충돌이 좀 날 거 같은데 되돌리려면 귀찮으시겠죠,,,

[hyerindev]

💬 이거 머지하면 제가 이번에 작업한 pr 올릴 때 충돌이 좀 날 거 같은데 되돌리려면 귀찮으시겠죠,,,
@rwaeng

PR 올리실 때 리뷰어로 걸어주세요 충돌 제가 해결하겠습니다!

[hyerindev]

@yyeonzu 편하실 때 PR 확인하시고 머지하시고 아울렛 작업해 주세요!

[yyeonzu]

❗️ 공통 레이아웃을 global에서 처리하면, 공통 레이아웃에도 해당하지 않는 컴포넌트를 처리할 방법이 어려워 질 것 같습니다 ~ 서재 홈페이지에서는 좌우 패딩이 필요가 없어서요!

💊 이외의 디스코드에서 여쭤봤던 문제는 새로 올린 Outlet PR에서 확인 후 코멘트 달아주시면 감사하겠습니다.

[hyerindev]

❗️ 공통 레이아웃을 global에서 처리하면, 공통 레이아웃에도 해당하지 않는 컴포넌트를 처리할 방법이 어려워 질 것 같습니다 ~ 서재 홈페이지에서는 좌우 패딩이 필요가 없어서요!
@yyeonzu

PaddingLayout으로 분리했습니다.