#3 주문 상태 UI

[kichul7493]

3 주문 상태 UI입니다.

구현된 사항에 대한 내용과 테스트 하는 방법은 이슈를 참고해주세요. 아래 내용은 작성한 코드의 의도를 알기 쉽도록 설명한 내용입니다. 한번 읽어보시고 코드를 보시면 더 이해하기 쉬우실 거 같습니다.

컴포넌트 구조

nextjs에서 라우팅을 위해 기본적으로 만들어야 하는 page 파일을 만들고, 해당 page의 내용은 pages 폴더에 Screen 컴포넌트로 따로 빼두었습니다. 이렇게 해둔 이유는 이전에 컨벤션 회의 때 이렇게 하기로 했던걸로 기억 합니다. 제가 잘 못 기억하고 있다면 알려주세요. 수정하도록 하겠습니다.

컴포넌트 폴더에 각 페이지 이름의 폴더에는 페이지에서만 사용되는(공통으로 사용될 여지가 없는) 컴포넌트를 위치 시켰습니다. 추후에 공통으로 사용되는 컴포넌트는 shared 폴더를 만들어서 이동시키면 좋을거 같습니다. 글씨 크기에 따라 반복되는 같은 스타일의 p태그가 있는데, 공통된 부분을 정의하기엔 아직 이른거 같아서 일단은 분리하지 않고 그대로 두었습니다. 차후에 기준이 마련되면 글자 컴포넌트를 만들어서 프로젝트 전체에서 통일된 글자 양식을 사용하면 좋겠습니다.

컴포넌트는 되도록 UI를 그리는데 집중할 수 있도록 구성했습니다. 데이터는 Screen 컴포넌트 (혹은 Page컴포넌트)에서 관리하고 UI 컴포넌트에 필요한 데이터만 주입하는 방식이 유지보수에도 쉽고 테스트도 쉽다고 생각했습니다.

PR 확인하시고 이상 없으면 승인 및 머지 해주시면 감사하겠습니다.

[jun0811]

지금 기술하신건 데이터를 호출및 가공하는걸 Screen 컴포넌트에서 다 하자고 하실건 같은데 이해한바가 맞을까요?

[kichul7493]

지금 기술하신건 데이터를 호출및 가공하는걸 Screen 컴포넌트에서 다 하자고 하실건 같은데 이해한바가 맞을까요?

@jun0811

네 맞습니다. 데이터는 Screen 컴포넌트에서 관리하는걸로 생각하고 있습니다.