[Fix] 연도가 다른 타임 블록 배치 #210

namdaeun · 2024-08-03T17:34:36Z

해당 이슈 번호

closed #205

체크리스트

🔀 PR 제목의 형식을 잘 작성했나요? e.g. [feat] PR을 등록한다.
💯 테스트는 잘 통과했나요?
🏗️ 빌드는 성공했나요?
🧹 불필요한 코드는 제거했나요?
✅ 컨벤션을 지켰나요?
💭 이슈는 등록했나요?
🏷️ 라벨은 등록했나요?
💻 git rebase를 사용했나요?
🙇‍♂️ 리뷰어를 지정했나요?

📌 내가 알게 된 부분

다른 연도에 타임블록이 걸쳐있는 경우

  if (blockStartDate.getFullYear() === currentYear && blockEndDate.getFullYear() === currentYear) {
... 생략
  } else {  // 추가
    if (startMonth <= selectedMonth || selectedMonth <= endMonth) {
      blockStartDate =
        startMonth === selectedMonth && blockStartDate.getFullYear() === currentYear ? blockStartDate : firstDay;
      blockEndDate = endMonth === selectedMonth && blockEndDate.getFullYear() === currentYear ? blockEndDate : lastDay;
    }
  }

기존 코드에서는 같은 연도일 때 (상단의 if문)만 고려를 해놔서 else문을 추가해주었습니다.
블록의 시작 달과 선택한 달이 같은 경우, 즉 selectedMonth === startMonth의 경우 블록이 시작하는 연도도 고려해서 연도까지 동일한 경우가 블록이 시작하는 날짜이기 때문에 blockStartDate로 설정해주었습니다.
blockEndDate를 할당하는 방식도 동일합니다.

daySectionRef.current?.scrollTo(0, 0);

연도와 달이 바뀔 때 왼쪽부터 볼 수 있도록 스크롤 위치를 설정해줬습니다 !
기존에 선언되어 있던 block_area 식별자를 가져와서 달과 연도가 바뀔 때 핸들러에 다음 코드를 추가해줬습니다.
-> 변경된 코드처럼 ref를 가져와서 바꿔주는 방향으로 수정했습니다!
그리고 연도가 바뀔 때 달이 1월로 초기화되지 않길래 해당 코드도 setState 있던 거 넘겨줘서 1월로 설정해줬습니다!

📌 질문할 부분

영상 찍다보니 무진장 깜박거리네요 나중에 LazyComponent 설정해서 타임라인도 스켈레톤 설정해주면 UX에 좋을 듯 함니다

📌스크린샷 (선택)

2024-08-04.2.32.50.mov

wuzoo

굳굳이네요 ! 고생하셧습니다 !

wuzoo · 2024-08-04T08:54:13Z

src/page/archiving/index/hook/common/useDate.ts

+    setSelectedMonth('1월');
+    document.getElementById('block_area')?.scrollTo(0, 0);
  };

  const handleNextYear = () => {
    setCurrentYear((prevYear) => prevYear + 1);
+    setSelectedMonth('1월');
+    document.getElementById('block_area')?.scrollTo(0, 0);


이렇게 쓸거라면 block_area의 div요소에 ref를 하나 처리해주는 것은 어떨까요 ? 렌더링에 관련 없이 해당 요소의 참조를 기억하고 싶은 거니까요 !

넵 좋습니다 ! id 중복 방지하는 측면에서도 id를 가져와서 사용하는 것보다 ref를 전달해주는 게 좋겠네요👍

rtttr1

LGTM! 고생하셨어유!!

Bowoon1216

점점 알고리즘의 신이 되어가고 있는 다은님 수고하셨습니다 👍

wuzoo · 2024-08-05T04:34:34Z

src/page/archiving/index/hook/common/useDate.ts

@@ -4,7 +4,7 @@ import { endOfMonth } from 'date-fns';

 import { useState } from 'react';

-export const useDate = () => {
+export const useDate = (ref: React.RefObject<HTMLDivElement>) => {


ref를 인자로 받게 한다면, useDate 커스텀 훅의 재사용성이 조금 낮아질 것 같다는 생각인데, 다른 대안은 없을까요 ?

재사용성이 낮아진다는 의견에 동의해요!
옵셔널로 받아서 아무런 값을 인자로 받지 않아도 가능하게끔 수정했습니다!

wuzoo · 2024-08-05T04:35:21Z

src/page/archiving/index/ArchivingPage.tsx

@@ -73,6 +76,11 @@ const ArchivingPage = () => {
    setCurrentContent(<UploadModal onClose={closeModal} teamId={+teamId} type={type} blockData={blockData} />);
  };

+  const handleMonthClick = (month: MonthType) => {
+    setSelectedMonth(month);
+    daySectionRef.current?.scrollTo(0, 0);


요고는 의도가 무엇이죠 ???

달이 바뀔 때 스크롤 됐던 부분을 좌측으로 스크롤해주고자 작성해주었습니다 !

wuzoo · 2024-08-05T06:35:10Z

src/page/archiving/index/ArchivingPage.tsx

+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    setSelectedMonth(`${currentDate.getMonth() + 1}월` as MonthType);
+  }, [teamId]);


return이 아닌, current 값을 true로 바꾸고 조건문 안에서 setter를 실행해야 올바른 동작인 것 같습니다 ! 마운트되었다면 실행이 안돼야 하니까요 !

마운트까지 고려하셔서 useEffect를 적용하신거 너무 보기 좋네요 :)

넵 수정하겠습니다 !! 감사합니당

cindy-chaewon

점점 타임블록이 완벽 해지는 거 같아서 좋습니당!! 스크롤 통해서 사용자 경험 도 개선하는 코드도 짜고..!! 최고입니다!!

namdaeun added 4 commits August 4, 2024 01:57

#205 fix: 연도 걸치는 타임 블록 배치 완료

b649cbc

#205 chore: 필요 없는 코드 제거

e78b1e9

#205 feat: 연도 바꾸면 1월부터 보이게 구현

f74d84f

#205 feat: 연도/월 바뀔 때마다 스크롤 시작 위치 왼쪽으로 초기화

15d720e

namdaeun added 💫다은 🐛Bug labels Aug 3, 2024

namdaeun requested review from rtttr1, cindy-chaewon, Bowoon1216 and wuzoo August 3, 2024 17:34

namdaeun self-assigned this Aug 3, 2024

#205 fix: date-fns devDependency만 남기기

df4baf4

wuzoo reviewed Aug 4, 2024

View reviewed changes

namdaeun added 4 commits August 4, 2024 19:36

#205 fix: ref 사용해서 스크롤 처리

8447d7b

#205 chore: 사용하지 않는 dependency 제거

e0abd1f

#205 chore: cd 해결

8dfecce

#205 chore: date-fns dev로 재설치

05fd288

rtttr1 approved these changes Aug 4, 2024

View reviewed changes

Bowoon1216 approved these changes Aug 4, 2024

View reviewed changes

#205 refactor: 커스텀 훅과 상태관리 코드 모아놓기

a1546f1

wuzoo reviewed Aug 5, 2024

View reviewed changes

namdaeun added 3 commits August 5, 2024 13:47

#205 chore: 필요없는 코드 제거

8ab9f90

#205 style: Flex 컴포넌트 tag 추가

1f5f4df

#205 feat: 컴포넌트 초기 렌더링 시, teamId 바뀔 때만 달 헤더 현재 달로 초기화

9f87289

wuzoo reviewed Aug 5, 2024

View reviewed changes

namdaeun added 4 commits August 5, 2024 18:15

#205 fix: set함수 if문 안에 배치

e9fea31

#205 feat: 커스텀 훅 인자 옵셔널로 수정

cae3003

#205 fix: 마운트 됐을 때 set함수 실행

89f24fa

#205 fix: teamId가 바뀔 때마다 set함수 초기화

acdd4c9

cindy-chaewon approved these changes Aug 6, 2024

View reviewed changes

namdaeun and others added 4 commits August 7, 2024 19:41

#205 docs: merge develop

0984121

#205 chore: lint에러 해결 & 핸들러 함수 분리

7a59d81

#205 refactor: 코드 순서 변경

b009245

Merge branch 'develop' into fix/archiving/#205-fix-timeblock-period

2b7a79c

namdaeun merged commit 759c740 into develop Aug 7, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fix] 연도가 다른 타임 블록 배치 #210

[Fix] 연도가 다른 타임 블록 배치 #210

namdaeun commented Aug 3, 2024 •

edited

Loading

wuzoo left a comment

wuzoo Aug 4, 2024

namdaeun Aug 4, 2024

rtttr1 left a comment

Bowoon1216 left a comment

wuzoo Aug 5, 2024

namdaeun Aug 7, 2024 •

edited

Loading

wuzoo Aug 5, 2024

namdaeun Aug 5, 2024 •

edited

Loading

wuzoo Aug 5, 2024

namdaeun Aug 5, 2024

cindy-chaewon left a comment

[Fix] 연도가 다른 타임 블록 배치 #210

[Fix] 연도가 다른 타임 블록 배치 #210

Conversation

namdaeun commented Aug 3, 2024 • edited Loading

해당 이슈 번호

체크리스트

📌 내가 알게 된 부분

다른 연도에 타임블록이 걸쳐있는 경우

📌 질문할 부분

📌스크린샷 (선택)

wuzoo left a comment

Choose a reason for hiding this comment

wuzoo Aug 4, 2024

Choose a reason for hiding this comment

namdaeun Aug 4, 2024

Choose a reason for hiding this comment

rtttr1 left a comment

Choose a reason for hiding this comment

Bowoon1216 left a comment

Choose a reason for hiding this comment

wuzoo Aug 5, 2024

Choose a reason for hiding this comment

namdaeun Aug 7, 2024 • edited Loading

Choose a reason for hiding this comment

wuzoo Aug 5, 2024

Choose a reason for hiding this comment

namdaeun Aug 5, 2024 • edited Loading

Choose a reason for hiding this comment

wuzoo Aug 5, 2024

Choose a reason for hiding this comment

namdaeun Aug 5, 2024

Choose a reason for hiding this comment

cindy-chaewon left a comment

Choose a reason for hiding this comment

namdaeun commented Aug 3, 2024 •

edited

Loading

namdaeun Aug 7, 2024 •

edited

Loading

namdaeun Aug 5, 2024 •

edited

Loading