-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feat] 캘린더 한 달 뷰 #11
[Feat] 캘린더 한 달 뷰 #11
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
짱짱👍
export const WeekContainer = styled.ul` | ||
display: grid; | ||
grid-template-columns: repeat(7, 1fr); | ||
width: 100%; | ||
padding: 0; | ||
list-style: none; // Todo: global style로 빼기 | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
grid 활용 좋습니다!
const overDay = 32; | ||
const targetDay = 1; | ||
const today = new Date(); | ||
const year = today.getFullYear(); | ||
const month = today.getMonth(); | ||
const lastDay = overDay - new Date(year, month, overDay).getDate(); | ||
const originDay = new Date(year, month, targetDay).getDay(); | ||
const computedDay = originDay - 1; | ||
const sunday = 6; | ||
const isDaySunday = computedDay < 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
전반적인 변수명에 대해서 같이 얘기해보면 좋을 것 같아요. 지금 봤을 땐 명확히 이해가지 않는 부분이 있어요! 예를 들어, year, month
가 오늘 날짜에 해당하는 년,월 같은데 변수명만 봤을 땐 의미가 부족하다고 느껴졌습니다.
그리고 computedDay, overDay
도 어떤 의미인지 파악하지 못했습니다ㅠㅠ
<> | ||
<S.CalendarTitle>{`${months[month]} ${year}`}</S.CalendarTitle> | ||
<S.WeekContainer> | ||
{daysOfWeek.map(day => ( | ||
<S.DayItem key={`day-${day}`}>{day}</S.DayItem> | ||
))} | ||
</S.WeekContainer> | ||
<S.WeekContainer> | ||
{days.map((day, index) => | ||
index < firstDayOfWeek ? ( | ||
<S.DayItem key={`day-${index}`}></S.DayItem> | ||
) : ( | ||
<S.DayItem key={`day-${index}`}>{day}</S.DayItem> | ||
), | ||
)} | ||
</S.WeekContainer> | ||
</> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저는 jsx 부분에서 js로직(삼항연사자)를 최대한 덜어내는게 가독성이 더 좋다고 생각하는데 이든은 어떻게 생각하시나요?
* [Feat] 모달 구현 (#8) * docs: 템플릿 수정(리뷰반영) * refactor: config폴더내의 파일을 루트로 이동(리뷰반영) * build: react-refresh 추가 * feat: 모달 구현 * refactor: config폴더내의 파일을 루트로 이동(리뷰반영) * build: react-refresh 추가 * build: 빌드 수정 * build: webpack styled options 수정 * [feat] 캘린더 한 달 뷰 (#11) * feat: 현재 달의 calendar를 모달에 출력 * fix: calendar날짜가 마지막 일까지 출력되도록 수정 * refactor: 캘린더 뷰에 사용하는 상수를 파일로 분리 * [feat] 차트 레이아웃 시도 (svg, canvas) (#12) * Feat: svg 그래프 * Feat: canvas 레이아웃 - 선 그리는 로직 미완 * Chore: svgChart에서 plots 좌표값 관련 주석 작성 Co-authored-by: HongJungKim(이든) <58525009+HongJungKim-dev@users.noreply.github.com> Co-authored-by: khj <hongjung.kim.dev@gmail.com>
* [Feat] 모달 구현 (#8) * docs: 템플릿 수정(리뷰반영) * refactor: config폴더내의 파일을 루트로 이동(리뷰반영) * build: react-refresh 추가 * feat: 모달 구현 * refactor: config폴더내의 파일을 루트로 이동(리뷰반영) * build: react-refresh 추가 * build: 빌드 수정 * build: webpack styled options 수정 * [feat] 캘린더 한 달 뷰 (#11) * feat: 현재 달의 calendar를 모달에 출력 * fix: calendar날짜가 마지막 일까지 출력되도록 수정 * refactor: 캘린더 뷰에 사용하는 상수를 파일로 분리 * [feat] 차트 레이아웃 시도 (svg, canvas) (#12) * Feat: svg 그래프 * Feat: canvas 레이아웃 - 선 그리는 로직 미완 * Chore: svgChart에서 plots 좌표값 관련 주석 작성 * build: react-refresh 추가 * [PR] 1주차 두번째 PR 리뷰 반영 (#14) * refactor: 관심사 분리를 고려하여 모달 리팩토링 응집성을 위하여 html에서 모달 태그 삭제, Portal 컴포넌트에서 해당 element 생성 * refactor: interface 네이밍 수정 컴포넌트 이름 + Props (ex.ComponentProps) * build: liveReload 기능 false처리 * [Feat] 캘린더 렌더링 로직 구현 (#17) * Feat: 캘린더 렌더링 * Chore: 캘린더 관련 주석 작성 * [Feat] 차트 그래프 기본 구현 (#18) * feat: 가격 범위 차트 그래프 렌더링 * refactor: 중복 스타일 mixin으로 분리 중복된 캔버스 컨테이너 스타일 분리 Co-authored-by: HongJungKim(이든) <58525009+HongJungKim-dev@users.noreply.github.com> Co-authored-by: khj <hongjung.kim.dev@gmail.com>
About
ex) 캘린더 한 달 뷰
Description
Result
Ref
#9