[FE]: 날짜를 선택할 수 있는 캘린더 UI 구현 #68

hwinkr · 2024-07-24T10:23:48Z

작업 내용

달력 UI를 통해 약속 날짜들을 선택할 수 있도록 한다.
2024.07 부터 > 버튼을 클릭해서 다음 달로 이동할 수 있다, <를 클릭해서 이전 달로 돌아갈 수 있다.
스토리북으로 달력 UI를 테스트한다.

특이 사항

컴포넌트 사용법

export default function MeetingTimePickPage() {
  const [selectedDates, setSelectedDates] = useState<string[]>([]);

  const hasDate = (date: string) => selectedDates.includes(date);

  const handleDateClick = (date: string) => {
    setSelectedDates((prevDates) =>
      hasDate(date) ? prevDates.filter((d) => d !== date) : [...prevDates, date],
    );
  };

  return (
    <div>
      <Calendar hasDate={hasDate} onDateClick={handleDateClick} />
    </div>
  );
}

아래 props들을 주입한다.

selectedDates: 선택된 날짜들의 배열 (string[], ['2024-07-12']
hasDate: 해당 날짜가 selectedDates에 포함됐는지 확인하는 함수
=> useCalendar 과 같은 훅으로 분리할 수 있다.

2차 스프린트가 끝난 후 개선해야 하는 사항들

오늘 기준 지난 날은 선택할 수 없도록 한다 (현재는 지난 달을 선택할 수 없도록 했음.)
실제 공휴일도 표시할 것 인지 결정
- 자바스크립트 Date 객체로는 한국의 공휴일을 판단할 수 없음.
- 한국 공휴일을 찾아주는 라이브러리가 있다고 함.
- 참고 : https://github.com/hyunbinseo/holidays-kr
isToday 변수로 확인할 수 있듯, ‘오늘’을 어떻게 표시할 것인지 의견 나누기
props 구조 수정
- accentColor를 외부에서 주입받을 수 있도록 하기
웹 접근성 높이기 위한 aria-label 적극 활용
스토리북 mdx 사용해서 캘린더 UI 설명하기

리뷰 요구사항 (선택)

- year, month를 상태로 관리하여 값이 변경될 때마다 날짜 정보를 계산해서 반환 - 달(Month)를 이동할 수 있는 함수 구현 - 12월에서 다음을 클릭할 경우 해(Year)가 변경되도록 구현

- 오늘의 경우 어떻게 보여줘야할 것인지 스타일 논의 필요 - 일요일이 아닌, 월요일부터 테이블을 채울 수 있도록 구현

- theme. global 스타일이 적용되도록 설정

github-actions · 2024-07-24T10:24:36Z

Test Results

0 tests 0 ✅ 0s ⏱️
0 suites 0 💤
0 files 0 ❌

Results for commit 16308cc.

♻️ This comment has been updated with latest results.

Largopie

단기간에 굉장히 짜임새 있게 잘 구현하셨네요..
역시 해리 👍 잘 읽었고, 리뷰 몇 가지 남겼는데 확인 부탁드리겠습니다 :)

++ 현재 7월 24일인데 7월 1일~7월 23일이 선택되지 않게끔 설정해야할 것 같습니다! 이 점도 참고 부탁드려용!

Largopie · 2024-07-24T12:44:38Z

frontend/src/hooks/useCalendarInfo/useCalendarInfo.utils.ts

+export function getDayInfo(
+  year: number,
+  month: number,
+  firstDayIndex: number,
+  index: number,
+  currentDate: Date,
+) {


[P3]

getDayInfo가 받는 인자가 꽤 많긴 하네요..! 혹시 의도된 부분일까요..?

아니라면 추후에 더 원활히 사용할 수 있도록 객체형태로 받아도 좋을 것 같아요!

한 날짜와 관련된 정보들이 꽤 많았는데,

공휴일인지

선택된 날짜인지

index를 사용하는 것에서 실제 날짜로 표시해야 하거나

날짜인지 아닌지 즉, 빈칸으로 표시해야하는 것인지 아닌지

오늘인지 아닌지
등등,,,

여러개의 함수로 분리해서 한 날짜와 관련된 정보를 구할 수 있겠지만, 날짜와 관련된 정보라는 하나의 관심사로 보고 함수의 역할이 조금 많은 것 같더라도 한 함수에서 날짜와 관련된 정보를 구하도록 했습니다~ 그래서 인자도 자연스럽게 많아진 것 같아요. 인자가 많은 경우, 객체를 사용하지 않으면 인자 전달 순서를 모두 기억하고 있어야 하니 낙타 말 처럼, 객체 형태로 바꾸는 것이 좋을 것 같네요!

Largopie · 2024-07-24T12:46:18Z

frontend/src/hooks/useCalendarInfo/useCalendarInfo.utils.ts

+  /* 
+   로직 설명(@해리)
+   - 월요일을 index 0으로 변경하기 위해서 나머지 연산자를 활용한다.
+   - 자바스크립트 데이트 객체는 기본적으로 일요일이 인덱스가 0인데, 모모 달력은 월요일을 인덱스를 0으로 만들어줘야 한다.
+   - 따라서, 특정 달의 시작 날짜에 대한 인덱스에 6을 더해주고 7로 나눈 나머지를 사용하는 것으로 구현했다.
+  */


로직 주석으로 설명을 해두니 이해하기 굉장히 편하네요..! 👍

Largopie · 2024-07-24T12:47:39Z

frontend/src/components/_common/Calendar/Calendar.styles.ts

+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;


[P2]

여기 군데군데 px로 구현하신 부분이 보이는 것 같습니다..! rem으로 통일하는 것이 좋아보여서 리뷰 남깁니다 👍

rem으로 통일하기로 했는데 완전히 잊고 있었네요..수정할게요!!

Largopie · 2024-07-24T13:02:15Z

frontend/src/components/_common/Calendar/index.tsx

+  const { year, month, daySlotCount } = yearMonthInfo;
+
+  return (
+    <div css={s_calendarContainer} aria-label={`${year}년 ${month}월 달력`}>


aria-label 명시.. 👍 대 해 리

Largopie · 2024-07-24T13:25:22Z

frontend/src/components/_common/Calendar/index.tsx

+            <button key={dateString} onClick={() => onDateClick(dateString)} css={s_daySlotButton}>
+              <span css={[s_daySlot(isHoliday), s_selectedDaySlot(isSelectedDate)]}>
+                {isDate ? date : ''}
+              </span>
+            </button>


[P3]
날짜 선택을 할 수 없는 첫 줄의 빈 공간에도 button이 삽입되는데, 웹 표준에 맞게 구현하기 위해서는 버튼이 없도록 만들어야 할 것 같아요! 급한 것은 아니니 추후에 수정해도 괜찮구요!

oh...모든 요소들을 다 버튼으로 하니 날짜가 아닌 경우에도 cursor : pointer 속성이 적용되고 있었네요...! 이 부분은 접근성을 위해서라도 빠르게 수정할게요!!

- cursor : pointer 속성이 적용되지 않기 위함

Yoonkyoungme

해리리해 빠른 시간 내에 완성도 높은 캘린더를 구현해 주셨네요🍀
감탄하고 갑니다~!!!
간단한 코멘트 남겨두었어요 :)

++ 다크모드일 때 버튼 배경 색상이 아래 사진처럼 보이네요ㅜㅜ

Yoonkyoungme · 2024-07-24T14:18:02Z

frontend/src/components/_common/Calendar/Calendar.styles.ts

+  border: none;
+`;
+
+// TODO : 공휴일 색 변경 논의 필요(@해리)


오👍👍 TODO 코멘트에 작업자 멘션한 부분 좋네요!!
멘션할 때 Giuhub id로 하는 방법도 있는 것 같아요! 자동 완성 할 수 장점이 있습니다 ㅎㅎ

오...좋은데요?

익스텐션 뭐죵!?

@hwinkr 혹시 자동완성 익스텐션이 있어야 가능한가요? 지금 해리는 안 되나요?

안돼요...ㅋㅋㅋ

Yoonkyoungme · 2024-07-24T14:45:17Z

frontend/src/hooks/useCalendarInfo/useCalendarInfo.utils.ts

+  const endDate = new Date(year, month, 0);
+  const lastDate = endDate.getDate();


[P2]

endDate와 lastDate 변수명은 의미가 유사하여 쉽게 파악하기 어려운 것 같습니다.

const lastDayOfMonthDate = new Date(year, month, 0); // 해당 월의 마지막 날짜 객체 const lastDayNumber = lastDayOfMonthDate.getDate(); // 마지막 날짜의 일(day) 값

이런 느낌으로 좀 더 네이밍을 명확하게 바꿔보면 어떨까요?

다시 보니까, 이해하기 힘든 것 같긴 하군요...빙봉 추천대로 수정할게요~

hwinkr · 2024-07-24T16:55:57Z

해리리해 빠른 시간 내에 완성도 높은 캘린더를 구현해 주셨네요🍀 감탄하고 갑니다~!!! 간단한 코멘트 남겨두었어요 :)

++ 다크모드일 때 버튼 배경 색상이 아래 사진처럼 보이네요ㅜㅜ

스토리북에서도 전역 스타일을 적용할 수 있도록 했었는데 (abf8706) 다크모드가 적용된 것이 아니라, 눈 고통 이슈로 모모 앱 배경 색을 어두운 회색으로 했었는데, 해당 배경색이 적용된 것 같아요..ㅎㅋㅋ

Largopie

사항 반영 야무지게 해주셨네요 감사합니다

👍👍👍 💯💯💯 🐫🐫🐫

Largopie · 2024-07-25T02:21:09Z

frontend/src/components/_common/Calendar/Calendar.styles.ts

@@ -8,7 +8,7 @@ export const s_calendarContainer = css`

 export const s_calendarContent = css`
  display: grid;
-  grid-auto-rows: 40px;
+  grid-auto-rows: 4rem;


👍👍👍 💯💯💯

Largopie · 2024-07-25T04:19:43Z

frontend/src/components/_common/Calendar/index.tsx

            </button>
+          ) : (
+            <div key={dateString} css={s_daySlotButton}></div>


👍👍👍 💯💯💯

hwinkr added 6 commits July 24, 2024 16:49

chore: global button color 스타일 삭제

323e276

feat(Calendar): 달력 컴포넌트 구현

bb5f018

- 오늘의 경우 어떻게 보여줘야할 것인지 스타일 논의 필요 - 일요일이 아닌, 월요일부터 테이블을 채울 수 있도록 구현

chore: 스토리북 preview 설정 수정

abf8706

- theme. global 스타일이 적용되도록 설정

test(Calendar): 달력 컴포넌트 UI 테스트 구현

a556f84

chore(useTimePick): 함수 시그니쳐를 표현식으로 통일

2658bb7

hwinkr added 🐈 프론트엔드 프론트엔드 관련 이슈에요 :) 🚀 기능 기능을 개발해요 :) 🎨 디자인 디자인을 해요 :) labels Jul 24, 2024

hwinkr added this to the 2차 데모데이 milestone Jul 24, 2024

hwinkr self-assigned this Jul 24, 2024

hwinkr requested review from Yoonkyoungme and Largopie as code owners July 24, 2024 10:23

Largopie requested changes Jul 24, 2024

View reviewed changes

hwinkr added 4 commits July 24, 2024 23:07

Merge branch 'develop' into feat/60-create-calendar

5a8159f

chore: px단위를 rem단위로 수정

9a0c5fa

refactor: 빈 칸으로 표시되어야 하는 날짜인 경우, div 태그로 감싸도록 수정

e7e3d9f

- cursor : pointer 속성이 적용되지 않기 위함

refactor: getDayInfo 함수의 인자를 객체 형태로 변경

b29ca25

Yoonkyoungme requested changes Jul 24, 2024

View reviewed changes

chore(useCalendarInfo): 의미있는 변수명을 사용하도록 수정

f95069b

Yoonkyoungme approved these changes Jul 24, 2024

View reviewed changes

Largopie approved these changes Jul 25, 2024

View reviewed changes

Merge branch 'develop' into feat/60-create-calendar

16308cc

hwinkr merged commit bd59576 into develop Jul 25, 2024
5 checks passed

ikjo39 deleted the feat/60-create-calendar branch July 31, 2024 01:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE]: 날짜를 선택할 수 있는 캘린더 UI 구현 #68

[FE]: 날짜를 선택할 수 있는 캘린더 UI 구현 #68

hwinkr commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

Largopie left a comment •

edited

Loading

Largopie Jul 24, 2024

hwinkr Jul 24, 2024

Largopie Jul 24, 2024

Largopie Jul 24, 2024

hwinkr Jul 24, 2024

Largopie Jul 24, 2024

Largopie Jul 24, 2024

hwinkr Jul 24, 2024

Yoonkyoungme left a comment •

edited

Loading

Yoonkyoungme Jul 24, 2024

hwinkr Jul 24, 2024

hwinkr Jul 24, 2024

Yoonkyoungme Jul 24, 2024

hwinkr Jul 24, 2024

Yoonkyoungme Jul 24, 2024

hwinkr Jul 24, 2024

hwinkr commented Jul 24, 2024

Largopie left a comment

Largopie Jul 25, 2024

Largopie Jul 25, 2024

		const endDate = new Date(year, month, 0);
		const lastDate = endDate.getDate();

[FE]: 날짜를 선택할 수 있는 캘린더 UI 구현 #68

[FE]: 날짜를 선택할 수 있는 캘린더 UI 구현 #68

Conversation

hwinkr commented Jul 24, 2024 • edited Loading

관련 이슈

작업 내용

특이 사항

컴포넌트 사용법

2차 스프린트가 끝난 후 개선해야 하는 사항들

리뷰 요구사항 (선택)

github-actions bot commented Jul 24, 2024 • edited Loading

Test Results

Largopie left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Yoonkyoungme left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hwinkr commented Jul 24, 2024

Largopie left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hwinkr commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

Largopie left a comment •

edited

Loading

Yoonkyoungme left a comment •

edited

Loading