[FEAT] Date Picker 제작 #76

wrryu09 · 2024-07-10T08:18:53Z

작업 내용 🧑‍💻

피그마의 modal_periodsetting_dashboard 를 만들었습니다!
modal_datetimesetting_correction 는 별개의 컴포넌트로 이후 제작 예정입니다
네비바 호버 되게 제작했습니다!

알게된 점 🚀

기록하며 개발하기!

	/* stylelint-disable selector-class-pattern */
	/* stylelint-enable selector-class-pattern */

를 통해 범위를 지정해 stylelint 적용 x 할 수 있다는 걸 알게 됐습니다

DatePicker 가 children은 하단으로만 받는 것 같아서 캘린더 상단에 영역 커스텀하기 위해

renderCustomHeader={(props) => (
				<CustomHeader
					{...props}
					...
				/>
			)}

속성을 찾아 사용했습니다 ,,

리뷰 요구사항 💬

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

중복 로직이나 조건별로 분기 잘 했는지, 잘 동작하는지 확인해주시면 감사하겠습니당

같은 날 막기 로직, 엣지케이스 막기, Placeholder 설정 관련해서는 디자인,기획파트 질문하고 답변 받으면 추가적으로 적용하겠습니다!

스크린샷 (선택)

seong-hui

datepicker 커스텀 쉽지 않으셨을텐데 너무 깔끔하게 잘 해주셨네요 라이브러리 커스텀 방식에서 많이 배워갑니다. util함수도 다른 곳에서 잘 사용할 거 같아요 조으네용 퍼블리싱 뿐만 아니라 날짜 선택 계산 까지 같이 해주셔서 정말 수고 많으셨습니다 🥇

seong-hui · 2024-07-10T08:41:06Z

src/components/common/datePicker/CustomHeader.tsx

이렇게 header만 따로 빼서 커스텀 하니 확실하게 커스텀도 가능하고 넘 보기도 좋네요!! 고생 많으셨습니다

seong-hui · 2024-07-10T08:43:42Z

src/components/common/datePicker/CustomHeader.tsx

+import styled from '@emotion/styled';
+
+import ArrangeBtn from '../arrangeBtn/ArrangeBtn';
+import TextboxInput from '../textbox/TextboxInput';


절대 경로를 사용해서 import해주시면 더욱 좋을 것 같습니당

냅두겠습니다 !

seong-hui · 2024-07-10T08:51:45Z

src/components/common/datePicker/DatePickerCustom.tsx

+			calendarContainer={CalendarStyle}
+			renderCustomHeader={(props) => (
+				<CustomHeader
+					{...props}


라이브러리에서 제공하는 props를 {...props}로 커스텀 컴포넌트에 전달할 수 있군요! 저도 라이브러리 커스텀때 참고하도록 하겠습니당 많이 배워갑니다 히히

직접 안받는 부분이 라이브러리에서 제공해주는 props들인건가요?? 신기하다.. 👍 👍 이래서 라이브러리 쓰는구낭

신기하다,,, 너무 유익하네요!! 오늘도 머리에 새로운 지식 +1

Kjiw0n

스타일이 피그마랑 다른 부분들 코멘트 드렸습니다! 반영되기 전의 수정사항이라면 말씀해주세요 ㅎㅎ

진짜 복잡한건데 진짜 간단하게 짰네요 최고다진짜

Kjiw0n · 2024-07-10T11:15:40Z

src/components/common/datePicker/DatePickerStyle.tsx

+	.react-datepicker__day--in-selecting-range {
+		color: ${({ theme }) => theme.palette.Grey.Grey7};
+
+		background-color: ${({ theme }) => theme.palette.Blue.Blue2};
+	}
+
+	.react-datepicker__day--in-range {
+		color: ${({ theme }) => theme.palette.Grey.Grey7};
+
+		background-color: ${({ theme }) => theme.palette.Blue.Blue2};
+	}


기간 표시 중 끝에 radius 적용하는 부분은 안하기로 결정난걸까요??!

이 부분입니다!

저 파란 부분이 하나로 이어져있는 게 아니라 한칸한칸 영역을 넓혀 백그라운드에 색상이 들어가게 해둔 거라.. 끝부분을 따로 잡아올 수 있는 방법이 없더라구요 ㅜ.ㅜ
디자이너분께 함 여쭤볼게요!

제가 여쭤보았는데 이미 합의된 부분이라고 합니다! 안둥글리기로 했대요 굳굳 ㅋㅋ

우하하 넵!

Kjiw0n · 2024-07-10T11:16:04Z

src/components/common/datePicker/DatePickerCustom.tsx

+			calendarContainer={CalendarStyle}
+			renderCustomHeader={(props) => (
+				<CustomHeader
+					{...props}


직접 안받는 부분이 라이브러리에서 제공해주는 props들인건가요?? 신기하다.. 👍 👍 이래서 라이브러리 쓰는구낭

Kjiw0n · 2024-07-10T11:22:56Z

src/components/common/datePicker/DatePickerCustom.tsx

+	const onChange = (dates: [Date | null, Date | null]) => {
+		const [start, end] = dates;
+		setStartDate(start);
+		blurRef(startDateTextRef);
+		if (startDateTextRef.current) {
+			startDateTextRef.current.value = formatDatetoString(start);
+		}
+
+		setEndDate(end);
+		blurRef(endDateTextRef);
+		if (endDateTextRef.current) {
+			endDateTextRef.current.value = formatDatetoString(end);
+		}
+	};
+	const onDateChange = (date: Date, mode: 'start' | 'end') => {
+		if (mode === 'start') {
+			blurRef(startDateTextRef);
+			setStartDate(date);
+		} else {
+			blurRef(endDateTextRef);
+			setEndDate(date);
+		}
+	};


날짜를 입력하는 부분인 것 같은데, 해당 부분에서 input 창 클릭 시 border 색을 primary로 변경하는 부분은 삭제된걸까요?!

인풋 클릭하면 보더색 잘 바뀝니다!!
텍스트 인풋 컴포넌트 갖다 써서 그쪽 파일 확인해보시면 될 것 같아요!!

처음 입력 시에는 적용이 되는데, 입력 후 다시 수정하고자 할 때는 적용이 안되고 있는 것 같아요! 확인 부탁드립니닷

수정했다!

jeeminyi

으앙 우리 승연이 본인 테스크도 아닌데 너무너무 커스텀 잘 해주었네요,, 덜덜 고생 너무 많았습니다!! 코드도 작업 속도도 그저 미쳤다 우리 리드

jeeminyi · 2024-07-10T12:37:01Z

src/components/common/datePicker/DatePickerCustom.tsx

+	const [startDate, setStartDate] = useState<Date | null>(new Date());
+	const [endDate, setEndDate] = useState<Date | null>(null);
+	const startDateTextRef = useRef<HTMLInputElement>(null);
+	const endDateTextRef = useRef<HTMLInputElement>(null);


레전드 타입 선언이네요,, 저도 캘린더 커승텀할 때 여기서 타입에 null 넣어주면 다른데서 타입 에러 뜨고 굉장히 애먹었던 경험이 있는데 잘 잡아주셨군요! 짱짱

ref 타입이 좀 어렵더라구요 .......이거 하면서 배워갑니당

jeeminyi · 2024-07-10T12:47:55Z

src/components/common/datePicker/DatePickerCustom.tsx

+			startDate={startDate as Date | undefined}
+			endDate={endDate as Date | undefined}


승연이의 눈물이 담긴 코드네요,,, 라이브러리 안에서 지정된 타입으로 선언해야 한다니,, 정말 라이브러리 커스텀은 어렵군뇨,,, 수고 많으셨습니다!!

jeeminyi · 2024-07-10T12:48:13Z

src/components/common/datePicker/DatePickerCustom.tsx

+			calendarContainer={CalendarStyle}
+			renderCustomHeader={(props) => (
+				<CustomHeader
+					{...props}


신기하다,,, 너무 유익하네요!! 오늘도 머리에 새로운 지식 +1

wrryu09 added 23 commits July 10, 2024 10:02

chore: add react-datepicker

cf6dd3b

chore: datepicker css import

0e45402

chore: css 파일 삭제

2054d0f

chore: 필요한 패키지 추가

af82b44

feat: DatePicker 커스텀 중

c87975f

style: 스타일링 진행

8ce2dff

style: theme 수정

fd2d75b

fix: arrangeBtnType 속성 추가

a137cb7

feat: TextboxInputProps date 받도록 추가

65a8665

feat: DayDiffText 제작

422f0ed

fix: ArrangeBtn onClick 추가

2e13b6c

feat: datepicker 커스텀

322ccc1

chore: datepicker 표시

19332ec

fix: change dateValue props to optional

3dbbbec

fix: 날짜 선택 에러 수정

5cf198e

feat: 네비바 호버

0feec97

chore: alert 경고 끄기

eead145

feat: dotFormatDate 유틸함수 추가

4e8488e

feat: input으로 날짜 받아서 등록하기

5557293

feat: formatDatetoString 추가

30bc153

feat: ref 경고, 경고해제 추가

af049b6

feat: 에러처리, 타입오류수정

af8269c

fix: 같은날짜 선택 안되게 수정

66fb56a

wrryu09 added 😻 승연 🖼️ 뷰 퍼블리싱 ⭐️ 기능 추가 labels Jul 10, 2024

wrryu09 requested review from seong-hui, Kjiw0n and jeeminyi July 10, 2024 08:18

wrryu09 self-assigned this Jul 10, 2024

wrryu09 linked an issue Jul 10, 2024 that may be closed by this pull request

[FEAT] Date Picker 퍼블리싱 #49

Closed

1 task

wrryu09 added 2 commits July 10, 2024 17:43

chore: lint 수정, 같은 날 선택시 1일로 수정

f9ac29a

fix: Obejct.assign() 매개변수 객체 수정방식 변경

84edb4b

seong-hui approved these changes Jul 10, 2024

View reviewed changes

Kjiw0n approved these changes Jul 10, 2024

View reviewed changes

jeeminyi approved these changes Jul 10, 2024

View reviewed changes

wrryu09 and others added 3 commits July 10, 2024 21:51

style: 스타일 수정

80ef60e

Merge branch 'develop' into feat/#49/datepicker-view

f90dc8d

fix: ArrangeBtnType onClick optional 처리

701e7d3

wrryu09 merged commit 278e05b into develop Jul 10, 2024
2 checks passed

wrryu09 deleted the feat/#49/datepicker-view branch July 10, 2024 13:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEAT] Date Picker 제작 #76

[FEAT] Date Picker 제작 #76

wrryu09 commented Jul 10, 2024

seong-hui left a comment

seong-hui Jul 10, 2024

seong-hui Jul 10, 2024

wrryu09 Jul 10, 2024

seong-hui Jul 10, 2024

Kjiw0n Jul 10, 2024

jeeminyi Jul 10, 2024

Kjiw0n left a comment

Kjiw0n Jul 10, 2024

wrryu09 Jul 10, 2024

Kjiw0n Jul 10, 2024

wrryu09 Jul 10, 2024

Kjiw0n Jul 10, 2024

Kjiw0n Jul 10, 2024

wrryu09 Jul 10, 2024

Kjiw0n Jul 10, 2024

wrryu09 Jul 10, 2024

jeeminyi left a comment

jeeminyi Jul 10, 2024

wrryu09 Jul 10, 2024

jeeminyi Jul 10, 2024

jeeminyi Jul 10, 2024

		startDate={startDate as Date \| undefined}
		endDate={endDate as Date \| undefined}

[FEAT] Date Picker 제작 #76

[FEAT] Date Picker 제작 #76

Conversation

wrryu09 commented Jul 10, 2024

작업 내용 🧑‍💻

알게된 점 🚀

리뷰 요구사항 💬

관련 이슈

스크린샷 (선택)

seong-hui 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

Kjiw0n 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

jeeminyi 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