#258 refactor: 캘린더 리팩토링

[yezzan9]

1. 무슨 이유로 코드를 변경했나요?

캘린더 페이지 리팩토링을 진행했습니다

2. 어떤 위험이나 장애를 발견했나요?

3. 관련 스크린샷을 첨부해주세요.

기존 DatePicker

변경된 DatePicker

4. 완료 사항

• 캘린더 페이지에 대해 리팩토링을 진행했습니다
• 일정 생성/수정 페이지에서 새로고침 시 userData를 받아오지 못하던 오류를 해결했습니다
• DatePicker 컴포넌트 단위를 수정했습니다
• ToggleButton 중복코드를 제거했습니다
• CURRENT_YEAR CURRENT_MONTH MONTH WEEK_DAYS를 상수화하였습니다
• 그 외 변수/컴포넌트명을 수정하였습니다 (Styled&& -> &&Wrapper)
• ModalMonthContent CalendarHeader의 경우 추후 삭제될 파일이기 때문에 리팩토링을 진행하지 않았습니다

5. 추가 사항

EventEditor파일은 저게 최선일까요..?ㅠ

[JIN921]

확인했습니다! 근데 DatePicker 시간 뜨는 거 00시로 바꾸는 건 안 되나요? 0 : 0 보다 00 : 00이 더 좋을 거 같아서요!

pr 제목 변경 부탁 드려요:3

[JIN921]

토글 핸들러 함수를 여기서 선언하지 않고 props로 넘겨 받는 이유가 있나요? 그냥 궁금해서 물어봅니다!

[yezzan9]

토글버튼의 값에 따라 변경되는 값이(isMonth) 부모 컴포넌트에서 관리되고 있어서 onToggle 내용 역시 부모컴포넌트에서 관리하는 편이 보기 편한 것 같아 props로 전달하도록 구현했습니다🤓

[JIN921]

근데 우리가 유저 정보를 로컬 스토리지에 저장하지 않고 페이지마다 UserAPI를 불러와서 쓰는 이유가 있었던가요?? 갑자기 궁금해졋어요

[yezzan9]

최적화할 생각을 못했기 때문,, 인듯합니다 ㅎ,,,,

[JIN921]

이거 반복 되는 부분은 반복문 사용해서 줄여도 좋을 것 같아요

         // 배열 변환
          const parseDate = (dateString: string) => {
            const parts = [0, 4, 5, 7, 8, 10, 11, 13, 14, 16];
            const result: number[] = [];
            for (let i = 0; i < parts.length - 1; i += 2) {
              result.push(Number(dateString.slice(parts[i], parts[i + 1])));
            }
            return result;
          };

          // 날짜 배열 설정
          setStartArr(parseDate(data.start));
          setEndArr(parseDate(data.end));

이런식으로요!

[yezzan9]

너무나도 좋은 방법,,, 반영했습니다👍🏻

[yezzan9]

확인했습니다! 근데 DatePicker 시간 뜨는 거 00시로 바꾸는 건 안 되나요? 0 : 0 보다 00 : 00이 더 좋을 거 같아서요!

@JIN921
0이 아닌 00으로 뜨게 하려면 해당 값을 string으로 처리해야하는데,, 숫자로만 이루어진 값이라 초기에 number 타입으로 구현했습니당 그리고 그게 여전히 남아있는 것,,

근ㄷㅔ 어차피 입력값이 숫자로 제한되는 거라면 string타입으로 유효성 검사를 진행해도 괜찮지 않나? 라는 생각이 갑자기 드네요..
다만 입력받는 값이 number로 들어와서 매번 변환을 해주어야한다는 단점이🥹

[JIN921]

많은 충돌이 생겻는데 수신 잘 부탁드립니다,,