TemplateModal을 구현한다

[JengYoung]

💌 설명

TemplateModal을 구현했다. 가장 바깥쪽은 추상적으로 공통되는 인터페이스로 설계하여 언제든지 안의 Inner에 따라 유동적으로 바뀔 수 있도록 설정했다.

또한 공통되는 상태 관리를 위해 useModal이라는 커스텀 훅 역시 추가했다. 이를 통해 더이상 복잡하게 일일이 모달의 상태를 적지 않아도 된다.

마지막으로 이러한 모달의 경우 화면 위에 떠있기 때문에 많은 양의 정보가 주어진다면 클 수록 좋다고 판단했다. 이유는, 사용자가 큰 화면임에도 불구하고 모달이 작아버리면, 일일이 찾는데 피로도가 증가하기 때문이다.

따라서 직접 width를 설정하지 않는 이상, 약 60vw의 크기에서 템플릿이 모니터 크기만큼 보일 수 있도록 했다. 아래는 예시이다.

위와 같이 보이는 레이아웃은 일관성이 있지만, 사용자의 모니터 크기에 따라 유동적으로 레이아웃은 조정된다. max-width는 아직 고민이어서 걸지는 않았지만, 결과적으로 좀 더 유연하게 UX를 개선했다고 생각한다!

📎 관련 이슈

closes #46

💡 논의해볼 사항

📝 참고자료

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

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

[JengYoung]

• 추가 변경사항

이 커밋 외적으로, 의존성 있는 패키지들이 @ui의 방식으로 import하고 있다. 이는 이미 설치했음에도 따로 경로를 부르는 것이므로 잘못되었다고 판단해서 리팩토링했다.