[Feat] date picker 구현 #96

minjeong9919 · 2024-06-19T18:03:57Z

🚀 작업 내용

date picker를 구현하였습니다.
추가적인 기능으로 마감 날짜 선택 시에 시작 날짜보다 전으로 갈 수 없도록 비활성화 시켜놓았습니다.

📝 참고 사항

pr을 작성하다보니 월 선택 버튼이 hover 시에만 색깔이 바뀌네요,, 이 부분 수정하겠습니다.
day 를 선택할 때 선택된 day의 background 외에 hover 시에도 background-color를 약하게 줌으로써 커서가 어디 위치하는지 보기 쉽도록 구현해보았습니다.
만약 별로면 바로 제거하겠습니다! 단호하게 말씀해주세요!
참고자료
반환 값은 시작 날짜와 마감 날짜를 date 형식으로 내보냅니다.
캘린더의 월 선택 부분은 드롭다운의 수정이 모두 완료되면 재수정하겠습니다.
반응형은 고려하지 못했습니다.

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

close [Feat] date picker 구현 #90

✅ 체크리스트

Code Review 요청
Label 설정
PR 제목 규칙에 맞는지 확인

minjeong9919 · 2024-06-19T18:05:34Z

src/components/DatePicker/DatePicker.tsx

+  const formatDateToString = (date: Date) => {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    const dateString = `${year}.${month}.${day}`;
+    return dateString;
+  };


이 부분은 머지 예정인 저의 다른 브랜치에 유틸함수로 분리되어있어서 해당 브랜치에서는 유틸함수로 따로 분리하진 않았습니다.

그 브랜치가 머지되면 이 부분 유틸함수 사용하는 것으로 수정할게요!

bokeeeey

LGTM !

bokeeeey · 2024-06-20T04:19:37Z

public/index.ts

+export { default as CaretLeftIcon } from './svgs/caretLeft.svg';
+export { default as CaretRightIcon } from './svgs/caretRight.svg';


하나로 돌려써보기...? try..?

오 저저거 안씀니다,, 쓰려고 추가하고서는 chevron으로 바꿧네요! 아마 저거 다른 파일에서 사용중일 거예요우

bokeeeey · 2024-06-20T05:13:57Z

src/components/DatePicker/Calendar.tsx

+            options={['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']}
+            sizeVariant='xs'
+            value={`${currentDate.getMonth() + 1}월`}
+            onChange={(val) => handleMonthSelect(val)}


Suggested change

onChange={(val) => handleMonthSelect(val)}

onChange={(month) => handleMonthSelect(month)}

알규먼트 이름은 작성하신 함수랑 맞춰주시는게 좋을거같아요

오호,, 체크했슴다

Young2un

불이나케 달려왔지만 완벽한 코드였다,, 고생했어용!!!

armd482

수고하셨습니다. 개인적으로 renderDays는 따로 분리하는 게 더 좋을 것 같아요!

armd482 · 2024-06-20T06:56:18Z

src/components/DatePicker/Calendar.tsx

+
+interface CalendarProps {
+  selectedDate: Date;
+  setSelectedDate: Dispatch<SetStateAction<Date>>;


setState를 그대로 props로 넘기는 게 좋은 건지 고민해볼 필요가 있을 것 같습니다!

그럼 혹시 이 부분 어떻게 해야할지 의견 주실 수 있으신가요,,? 저도 하면서 긴가민가,,

부모에서 handler로 한 번 감싸서 핸들러를 보내는게 낫지 않을까 싶습니다?!

오오옹오 네ㅔ넹!!! 열어분 덕에 많이 배워갑니다,,,

ggjiny

캘린더를 직접 구현하는 여자.. 넘 멋쟈요👏👏

ggjiny · 2024-06-20T08:40:05Z

src/app/(test)/mj/test/DatePickerTest.tsx

+
+import { useState } from 'react';
+import DatePicker from '@/components/DatePicker/DatePicker';
+import type { DataPickerChangeProps } from '@/types/DatePickerTypes';


오타났어용 ㅎㅎㅎ😉

어머 진짜 눈썰미 대박 저 뭐가 틀린걸까,, 하구 5초 봤어여 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 감사합니동 🤭

ggjiny · 2024-06-20T08:42:15Z

src/components/DatePicker/Calendar.module.scss

+@mixin day-wrapper-circle($background, $fontColor) {
+  width: 3.3rem;
+  height: 3.3rem;
+  margin: auto;
+  border-radius: 100%;
+  background-color: $background;
+  color: $fontColor;
+}


멋쪄용👍

ggjiny · 2024-06-20T08:44:47Z

src/components/DatePicker/DatePicker.tsx

+import { useState } from 'react';
+
+import { CalendarIcon } from '@/public/index';
+import Button from '../Buttons/Button/Button';


이거 배럴 있을텐데용?.?

ggjiny · 2024-06-20T08:47:15Z

src/components/DatePicker/DatePicker.tsx

+  onDateChane: (startDate: { startDate: Date; endDate: Date }) => void;
+}
+
+function DatePicker({ onDateChane }: DatePickerProps) {


onDateChange일까요?!

증말,, 미스테이크가 많네요,, 예진님 덕분에 머지전에 든든합니다,,

ggjiny · 2024-06-20T08:50:49Z

src/components/DatePicker/DatePicker.tsx

+    const selectedEnd = new Date(currentDate);
+    setSelectedMonthOption(month);
+
+    selectedStart.setMonth(currentDate.getMonth() - month);


와옹 setMonth 처음 봐요!!👍👍

ggjiny · 2024-06-20T08:54:45Z

src/components/DatePicker/Calendar.tsx

+
+interface CalendarProps {
+  selectedDate: Date;
+  setSelectedDate: Dispatch<SetStateAction<Date>>;


부모에서 handler로 한 번 감싸서 핸들러를 보내는게 낫지 않을까 싶습니다?!

ggjiny · 2024-06-20T08:57:50Z

src/components/DatePicker/Calendar.tsx

+  const handlePrevMonth = () => {
+    const prevMonth = new Date(currentDate.setMonth(currentDate.getMonth() - 1));
+    setCurrentDate(new Date(prevMonth));
+  };
+
+  const handleNextMonth = () => {
+    const nextMonth = new Date(currentDate.setMonth(currentDate.getMonth() + 1));
+    setCurrentDate(new Date(nextMonth));
+  };


혹시 1월 이전이나 12월 이후는 클릭이 막혀있는지 궁금합니당!

옷 아니용!! 안막혀있슴당 작년 재작년 내년 내후년 낸내내후년 모두 볼 수 있어용

minjeong9919 added 8 commits June 18, 2024 12:01

Feat: date 컴포넌트 틀 구성

3ef1d3c

Feat: 드롭다운 제외 기본 프레임 구현 완성

345d175

Refactor: 드롭다운을 통해 달 선택

24a2b44

Style: 전체적인 디자인 수정 및 애니메이션 추가

05e4d58

Feat: 시작 날짜보다 전으로 가면 비활성화

5ea9b6d

Feat: 월 선택 옵션 버튼 기능 추가

d887b08

Style: 전체적인 css 수정

e13f61a

Refactor: import 경로 수정

180549b

minjeong9919 added the ✨ Component 기능 개발 label Jun 19, 2024

minjeong9919 requested review from devToram, ggjiny, armd482, Young2un and bokeeeey June 19, 2024 18:03

minjeong9919 self-assigned this Jun 19, 2024

minjeong9919 commented Jun 19, 2024

View reviewed changes

minjeong9919 added 2 commits June 20, 2024 11:12

Refactor: 'develop' 브랜치 pull

5ad794c

Style: 월 선택 버튼 클릭 시 디자인 추가

dbc34cc

bokeeeey approved these changes Jun 20, 2024

View reviewed changes

Young2un approved these changes Jun 20, 2024

View reviewed changes

armd482 approved these changes Jun 20, 2024

View reviewed changes

ggjiny approved these changes Jun 20, 2024

View reviewed changes

minjeong9919 added 4 commits June 20, 2024 18:32

Refactor: 피드백 반영

3500045

Refactor: 'develop' 브랜치 pull 및 충돌 해결

94669ce

Fix: index 제거된 부분 다시 추가

286a7c2

Refactor: 'develop' 브랜치 pull

915ae14

minjeong9919 merged commit a85e0aa into develop Jun 21, 2024

minjeong9919 deleted the 90-feat-date-picker-구현 branch June 24, 2024 14:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] date picker 구현 #96

[Feat] date picker 구현 #96

minjeong9919 commented Jun 19, 2024

minjeong9919 Jun 19, 2024

bokeeeey left a comment

bokeeeey Jun 20, 2024

minjeong9919 Jun 20, 2024

bokeeeey Jun 20, 2024

minjeong9919 Jun 20, 2024

Young2un left a comment

armd482 left a comment

armd482 Jun 20, 2024

minjeong9919 Jun 20, 2024

ggjiny Jun 20, 2024

minjeong9919 Jun 20, 2024

ggjiny left a comment

ggjiny Jun 20, 2024

minjeong9919 Jun 20, 2024

ggjiny Jun 20, 2024

ggjiny Jun 20, 2024

ggjiny Jun 20, 2024

minjeong9919 Jun 20, 2024

ggjiny Jun 20, 2024

ggjiny Jun 20, 2024

ggjiny Jun 20, 2024

minjeong9919 Jun 20, 2024

		export { default as CaretLeftIcon } from './svgs/caretLeft.svg';
		export { default as CaretRightIcon } from './svgs/caretRight.svg';

	onChange={(val) => handleMonthSelect(val)}
	onChange={(month) => handleMonthSelect(month)}

[Feat] date picker 구현 #96

[Feat] date picker 구현 #96

Conversation

minjeong9919 commented Jun 19, 2024

🚀 작업 내용

📝 참고 사항

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

✅ 체크리스트

Choose a reason for hiding this comment

bokeeeey left a 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

Young2un left a comment

Choose a reason for hiding this comment

armd482 left a 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

ggjiny left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment