Web의 기본 레이아웃을 구현한다

[JengYoung]

💌 설명

웹의 기본 레이아웃을 구현하고, 다음 체크리스트를 만족하였다.

✅ 체크 리스트

• [x] 기본 레이아웃은 Web의 index페이지에서 보여질 수 있다.
• [x] 기본 레이아웃은 Header, Main, Footer로 구성되어 있다.
• [x] Main의 크기는 아무리 작아도 100%를 보장해야 한다. 이유는 Footer가 나와버리면 시선이 분산되어 고객이 원래 페이지에서 달성하고자 하던 UX를 깨뜨릴 수 있다고 생각하기 때문이다.
• [x] Footer에서는 아직은 페이지 생성을 완료하지 않았으므로 후에 편하게 작성 가능하도록 큰 틀만 잡는다.
• [x] 기본 레이아웃은 Storybook에서 결과물을 확인할 수 있다.
• [x] 공통 스타일(Inner의 양 옆 패딩 등)은 별도로 common을 빼내어 사용할 수 있도록 한다.

📎 관련 이슈

closes #7

💡 논의해볼 사항

📝 참고자료

@emotion Theme Error

@emotion 11버전과 스토리북이 호환되지 않아 발생한 문제였다. 나는 11버전이라 생각했는데, 알고 보니 스토리북은 10버전과 호환되기 때문에, 실험적 기능들이 탑재되지 않았다고 한다. 따라서, 이를 해결하기 위해서는 @emotion의 alias들을 node_modules에서 직접 연결해주어야 한다. 이를 위한 스토리북의 지원 기능은 features이다. 이를 설정해준 결과, 정상 동작한다.

해당 코드가 주석처리한 현재 스토리북에서 호환되지 않는 @chakra-ui/storybook-addon에 있어 허무하게 4시간을 삽질했다. 😖

⚠️ 잠깐! 한 번 체크해주세요.

• [x] 베이스가 제대로 적용되었나요?
• [x] 코드의 변경사항은 원하는 대로 잘 되었는지 다시 한 번 살펴봐요!