[REFACTOR] 디자인 변경사항 적용 및 Moment 페이지 리팩토링

[gayeooon]

#️⃣연관된 이슈

PR과 연관된 이슈 번호를 작성해주세요. ex) #이슈 번호, #이슈 번호

• close: [REFACTOR] 모멘트 페이지 리팩토링 #131

🪄작업 내용

해당 이슈 그리고 이번 PR에서 작업한 내용들을 작성해주세요.
뷰 작업 내용이 포함되었을 경우 사진 혹은 동영상 파일 첨부를 부탁드립니다!

• IcGaugeBar, IcTitleBox 아이콘 추가
• ContainerLayout 픽셀아트 모서리 디자인 변경
• ProgressBar를 아이콘 기반 게이지로 변경
• CheckList 아이템 정렬 로직 추가
• 임시 에러 처리 로직 제거

💖리뷰 요청사항

특별히 봐주셨으면 하는 부분, 나 좀 잘했다 하는 부분! 기타 당부의 말씀 등 자유롭게 작성해주세요.

• 모멘트 생성 로직이 리팩토링 되었기 때문에 모멘트 페이지에 작성되었던 임시 에러처리 코드는 삭제하였습니다.

• 폴더 구조는 따로 이슈 생성하여 정리하도록 하겠습니다!

[P1su]

리뷰가 늦어져 죄송합니다..!
컨테이너마다 간격이 전부 다르던데 하나 하나 맞추느라 고생하셨습니다.
버킷리스트 정렬하는 방식도 좋은 것 같아요!

[P1su]

나머지 모서리 부분들도 기본적인 틀은 동일하고 box-shadow 부분만 코드가 다른데

const PixelBoxBase = styled.div`
  position: absolute;
  width: 2.2rem;
  height: 0.6rem;
  background-color: ${({ theme }) => theme.colors.black};
`;

위와 같이 base 스타일을 설정해주고

export const TopRightPixel = styled(PixelBoxBase)`
  top: 0;
  right: 0;
  box-shadow:
    0.5rem 0.5rem 0 0 ${({ theme }) => theme.colors.black},
    1.1rem 1.1rem 0 0 ${({ theme }) => theme.colors.black},
    1.6rem 1.6rem 0 0 ${({ theme }) => theme.colors.black};
`;

모서리 부분들은 position 값과 box-shadow값만 설정해주면 추후에 수정할 때 훨씬 간편할 것 같아요 !

[P1su]

사소한 부분이긴 한데 floor를 통해서 버림으로 표현하는 것은 어떨까요?
예를 들어 현재 달성률이 33%인 경우 4칸으로 표시되는데, 아직 40%에 도달하지 않았으므로 3칸으로 표현하는 것이 조금 더 자연스러울 것 같습니다.