Feat(client): 캘린더 컴포넌트 구현 #118
Conversation
|
🏴☠️ Storybook 확인: 🔗 https://677bd6bc4909f2f48f4e0f42-pluaauagzn.chromatic.com/ |
| const dateItems = weekDays.map((day, id) => ({ | ||
| ...day, | ||
| ...checkFestivalDateStatus(festivalDateMap, id, selectedDayNumeId), | ||
| })); |
There was a problem hiding this comment.
dateItems 배열은 기존의 날짜 정보(date, dayKo)에 **선택 여부(isSelected)**와 축제일 여부(hasFestivalDate) 같은 추가적인 정보를 포함하는 객체인데
네이밍 뭐가 적절할까요..?
| isClicked: { | ||
| true: { | ||
| border: '2.5px solid transparent', | ||
| backgroundImage: ` | ||
| radial-gradient(circle at bottom, #ffffff 100%, rgba(255, 255, 255, 0) 100%), | ||
| linear-gradient(to top,rgb(234, 255, 175) 30%,rgb(174, 225, 32) 100%) | ||
| `, | ||
| backgroundOrigin: 'border-box', | ||
| backgroundClip: 'content-box, border-box', | ||
| transition: 'background-image 0.4s ease, border-color 0.4s ease', | ||
| }, |
There was a problem hiding this comment.
InfoButton의 border 그라데이션 스타일을 위한 코드입니다 border 토큰화 해야할까요??
| ERR_MESSAGE: '', | ||
| }; | ||
|
|
||
| const weekData = WEEKDAYS; |
There was a problem hiding this comment.
이거 @bongtta 랑 완전히 겹치는 상수 데이터를 쓰고있어서 shared 로 옮기고, 채은님이 사용하시던 페이지에서도 제가 수정완료 했습니다!
| if (!year || !month) { | ||
| return `${YEAR_MESSAGE.ERR_MESSAGE}`; | ||
| } |
There was a problem hiding this comment.
에러 메시지 필요할까요?? 궁금합니다. 인포버튼 클릭했을 때 밑에 텍스트가 렌더링 되는 부분에서 혹시 몰라서 우선 대체로 에러 메시지를 띄울 수 있도록 설정해두어야 하나? 하는데 굳이 필요없을 것 같기도해요
There was a problem hiding this comment.
에러 메세지에 대한 기준이 아직 명확하지 않으니 우선은 ' '로 구현해주신대로 유지합시다!
앱잼기간동안 에러는 ErrorBoundary로 공통으로 처리해요 !
There was a problem hiding this comment.
이건 채은이랑 마음 잘맞음 이슈 때문에 기존 파일 새롭게 그냥 추가해서 올린겁니다~ 기존 develop 에도 존재하는 파일을 그냥 복붙해서 올린거에요~
| const dateItems = weekDays.map((day, id) => ({ | ||
| ...day, | ||
| ...checkFestivalDateStatus(festivalDateMap, id, selectedDayNumeId), | ||
| })); |
| isClicked: { | ||
| true: { | ||
| border: '2.5px solid transparent', | ||
| backgroundImage: ` | ||
| radial-gradient(circle at bottom, #ffffff 100%, rgba(255, 255, 255, 0) 100%), | ||
| linear-gradient(to top,rgb(234, 255, 175) 30%,rgb(174, 225, 32) 100%) | ||
| `, | ||
| backgroundOrigin: 'border-box', | ||
| backgroundClip: 'content-box, border-box', | ||
| transition: 'background-image 0.4s ease, border-color 0.4s ease', | ||
| }, |
| if (!year || !month) { | ||
| return `${YEAR_MESSAGE.ERR_MESSAGE}`; | ||
| } |
There was a problem hiding this comment.
에러 메세지에 대한 기준이 아직 명확하지 않으니 우선은 ' '로 구현해주신대로 유지합시다!
앱잼기간동안 에러는 ErrorBoundary로 공통으로 처리해요 !
| }; | ||
| // isSelected 처리 함수 | ||
| export const checkFestivalDateStatus = ( |
There was a problem hiding this comment.
| }; | |
| // isSelected 처리 함수 | |
| export const checkFestivalDateStatus = ( | |
| }; | |
| // isSelected 처리 함수 | |
| export const checkFestivalDateStatus = ( |
📌 Summary
📚 Tasks
👀 To Reviewer
border 에 그라데이션 효과를 넣을 수 없어,
backgroundImage속성을 이용하여 세부 조정하였습니다.자세한 내용은 코드리뷰로 남길게요 정말 고민 많이하긴 했는데, 불필요한 로직은 없는지 한번 검토해주시면 감사하겠습니다.
📸 Screenshot