st) 컴포넌트 배치 / Flex, Box 컴포넌트 개선?

TO DO

• UploadImage 구현은 마무리했기 때문에 디자인 나온대로 스타일링
  -> 이미지 감싸는 박스 position은 relative, 버튼 position은 absolute로 줬는데 계속 짤려보여서 이 부분은 수정해야함!

• App.tsx에 바로 올리는 것이 아니라 UploadMtn.tsx 파일을 만들어서 여기서 컴포넌트 레이아웃 배치하고, 입력받은 데이터를 서버에 요청할 수 있도록 할 예정

• 위 컴포넌트는 Icon 컴포넌트와 아래 Typo 컴포넌트를 세로로 정렬하고싶기 때문에 Flex 컴포넌트로 감쌌다.
  Flex 컴포넌트와 Box 컴포넌트는 둘 다 div 엘리먼트로 만들어졌지만, flex 속성만 가진 것이 Flex 컴포넌트이고 그 외 속성을 가진 것이 Box 컴포넌트이다. 하지만 Flex 컴포넌트가 width, height를 가지고 있지 않기 때문에 Icon 컴포넌트, Typo 컴포넌트까지만 구역으로 인식하기 때문에 정중앙에 배치하는 것이 어려웠다. 그래서 임시로 css 속성으로 처리를 해서 중앙으로 배치했다.
  멘토님이 Flex 컴포넌트와 Box 컴포넌트의 역할 분담에 대해 개선 방향으로 고민해보라고 말씀하셔서 chakra, material UI를 참고해서 고민했는데, chakra UI처럼 div 엘리먼트가 기본적으로 가지는 속성을 props를 정의해서 Flex 컴포넌트에서 상속받아 flex 속성을 추가로 정의할 것이 아니라면! 지금 만들어져있는 Box 컴포넌트의 props를 상속받아 Flex 컴포넌트를 개선하면 어떨까? 싶어서 말씀드렸다. ㅎㅎ