Feat : Admin Page

[Coreight98]

[ 진행 작업 ]

• Header 생성
• sidebar 생성
• section 생성

[ 문제 사항 ]

• admin 페이지이에 기존의 컴포넌트를 재사용하고 싶었습니다.

const Container = styled.div`
  width: 100px;
  height: 100px;
  background-color: pink;
`;

const AdminContainer = styled(Container)`
  grid-area: header;
  width: 100%;
  height: 100%;
  padding: 1vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(172, 209, 251);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
`;

하지만 hearder style의 몸집이 커진다는 것을 알게 되었습니다.
추후 분리를 할지에 대한 논의가 필요할 거 같습니다.

• css 작업이 많은 시간을 잡아먹은거 같습니다.
  처음에는 사이드바에 애니메이션을 넣어서 구현하였지만, 버튼을 통한 메뉴 선택을 버리고, 한 눈에 볼 수 있게 변경하였습니다.
• 반응형으로 구현하고자, grid를 사용하였고, 폰트에도 media를 통한 제어보다는 vmin을 사용하여 적용해보았습니다.
• admin templete 안의 admin logo는 추후 분리해야 할거 같습니다.
• 페이지의 카테고리를 배열(ADMIN_CATEGORY)로 상수화 한 부분에 대한 다른 분들의 생각이 궁금합니다.
• section의 AdminInputProps도 추후 상수타입으로 처리해야 할거 같습니다.

추후 page number를 표기하는 부분을 추가할 생각입니다.

[ 해결 방법 ]

atomic 답게 templete을 잘 사용하는 방법이 아직 익숙하지 않은 거 같습니다. atomic을 잘 적용한 프로젝트를 찾아보니, templete에는 데이터만 제공하여 페이지에 그린다는 부분을 이해하여, 구현하고자 했는데, 로고와 검색 버튼의 사진을 temple단에서 넣는 부분이 효율적이지 않다고 생각하여, atom에서 컴포넌트화하여 구현하였습니다.

⚠️ templete의 사용은 https://github.com/sendbird/quickstart-calls-reactjs 를 참고하였습니다.

[jin-Pro]

우선 main pull 받아서 conflict 수정이랑 재사용할수있는거 해주세염

[jin-Pro]

이거를 기본 Header에서 수정해야할거같아요!

[jin-Pro]

아직 비즈니스로직 구현이 큰게 없어서 그런지는 모르겠으나, 전반적으로 좋은 것 같아요