Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: 여행일기 수정 시 날짜가 변경되는 오류 수정 & 뒤로가기 미동작 오류 수정 & 일기 글 내용 미표시 오류 수정 #54

Open
wants to merge 29 commits into
base: main
Choose a base branch
from

Conversation

HyunJinNo
Copy link
Member

☑️ 개발 유형

  • Front-end

✔️ PR 유형

  • 새로운 기능 추가
  • 버그 수정
  • CSS 등 사용자 UI 디자인 변경
  • 기존 기능에 영향을 주지 않는 변경사항 (Ex. 오타 수정, 탭 사이즈 변경, 변수명 변경, 코드 리팩토링 등)
  • 주석 관련 작업
  • 문서 관련 작업
  • 테스트 추가 혹은 테스트 리팩토링
  • 빌드 부분 혹은 패키지 매니저 수정
  • 파일 혹은 폴더명 수정
  • 파일 혹은 폴더 삭제

📝 작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요.

  • 여행일기 수정 시 날짜를 변경하지 않았음에도 불구하고 날짜가 하루씩 변경되는 오류 수정

    먼저 FE에서 BE로 전달하는 Date 객체는 2025-01-30T03:00:00.000Z와 같은 형식으로 전달됩니다. 하지만 서버에서 전달받은 날짜 데이터는 2025-01-30T03:00:00와 같은 문자열로 전달됩니다. 해당 문자열을 Date로 변환하기 위해 new Date(diary.startDatetime) 방식을 적용하였는데, 해당 방식을 적용한 결과 2025-01-29T18:00:00.000Z와 같이 날짜가 하루 뒤로 밀리는 문제가 발생하였습니다. 따라서 해당 문제를 해결하기 위해 명확한 시간대를 표시해야 하므로 다음과 같이 UTC 시간 기준임을 명시하여 문제를 해결하였습니다.

    new Date(`${diary.startDatetime}.0Z`)
  • BottomSheetModal이 리렌더링된 후 모바일 뒤로가기 버튼이 동작하지 않는 오류 수정

    기존에 구현한 useBackHandler 커스텀 훅은 다음과 같이 작성되어 있었습니다.

    import {BackHandler} from 'react-native';
    
    export const useBackHandler = (action: Function) => {
      const backAction = () => {
        action();
        return true;
      };
    
      const addBackPressEventListener = () => {
        BackHandler.addEventListener('hardwareBackPress', backAction);
      };
    
      const removeBackPressEventListener = () => {
        BackHandler.removeEventListener('hardwareBackPress', backAction);
      };
    
      return {addBackPressEventListener, removeBackPressEventListener};
    };

    위와 같이 구현한 결과 해당 커스텀 훅을 사용하는 컴포넌트가 리렌더링되는 경우 backAction, addBackPressEventListenter, removeBackPressEventListener 함수가 새롭게 정의되는 문제가 발생하여 모바일 뒤로가기 버튼이 정상적으로 동작하지 않는 문제가 발생하였습니다. 따라서 컴포넌트가 리렌더링되더라도 함수가 재정의되는 문제를 방지하기 위해 다음과 같이 useCallback 훅을 사용하였습니다.

    import {useCallback} from 'react';
    import {BackHandler} from 'react-native';
    
    export const useBackHandler = (action: Function) => {
      const backAction = useCallback(() => {
        action();
        return true;
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);
    
      const addBackPressEventListener = useCallback(() => {
        BackHandler.addEventListener('hardwareBackPress', backAction);
      }, [backAction]);
    
      const removeBackPressEventListener = useCallback(() => {
        BackHandler.removeEventListener('hardwareBackPress', backAction);
      }, [backAction]);
    
      return {addBackPressEventListener, removeBackPressEventListener};
    };
  • 여행일기 수정 화면으로 이동했을 때 일기 글 내용이 표시되지 않는 오류 수정

    여행일기 수정 화면으로 이동했을 때 일기 내용이 표시될 수도 있고 표시되지 않는 경우가 있었습니다. 해당 문제를 해결하기 위해 다음과 같이 editor가 준비되었을 때 editor의 content를 초기화하도록 구현하였습니다.

    useEffect(() => {
      if (editor.getEditorState().isReady && placeholderData?.content) {
        editor.setContent(placeholderData?.content);
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [editor.getEditorState().isReady, placeholderData?.content]);

#️⃣ Related Issue

해당 Pull Request과 관련된 Issue Link를 작성해 주세요

close #48
close #52
close #53

@HyunJinNo HyunJinNo added the Fix 버그를 고친 경우 label Jan 30, 2025
@HyunJinNo HyunJinNo added this to the Sprint 6 milestone Jan 30, 2025
@HyunJinNo HyunJinNo requested a review from ssssksss January 30, 2025 12:41
@HyunJinNo HyunJinNo self-assigned this Jan 30, 2025
@HyunJinNo HyunJinNo enabled auto-merge January 31, 2025 05:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fix 버그를 고친 경우
Projects
None yet
1 participant