Feature/fe-078 : 생성 페이지 1.0v 업데이트 적용

[naro-Kim]

체크 리스트

• 적절한 제목으로 수정했나요?
• 관련된 이슈와 연결 시켰나요?
• Target Branch를 올바르게 설정했나요?
• Label을 알맞게 설정했나요?

작업 내역

• 생성 페이지 모바일 컴포넌트 업데이트

  • 이전 다음 버튼 추가
  • 시간 인풋 분리
  • 모달 팝업으로 변경
  • 미디어 쿼리 적용

• 생성 페이지 api v2 업데이트

  • mutation query로 글 작성시 board list 업데이트

문제 상황과 해결

• 현재 수정 페이지에서 react-query로 불러온 데이터롤 zustand store 초기화 시 SSR 에러가 발생해 조치를 취하는 중에 있습니다.
• 생성 페이지와 수정 페이지 컴포넌트를 공동으로 사용하고 있어서, 해당 작업 중에 생성 페이지 컴포넌트 추가 수정이 이루어질 예정입니다.
• 위 수정이 끝난 후, 애니메이션 추가 예정입니다.

비고

[sxungchxn]

생성 페이지 기능 구현 고생하셨습니다! 수정이 필요한 사항들만 반영하면 될 것 같아요

추가적으로 Dropdown.BottomSheet 가 있는 모바일 페이지(ex - 작성페이지 stepOne)의 경우 높이가 작은 화면 상에서 스크롤이 안되고 있는 상황이 발생하고 있는데 제가 만들었던 컴포넌트의 문제여서 아래의 수정사항 적용해주시면 해결될 것 같습니다!

// src/components/BottomSheet/BottomSheetView.tsx

useLockScroll(isOpen); // 인자값에 `isOpen`을 추가해주세요

// src/hooks/useLockScroll.ts
// 훅을 아래의 내용으로 바꿔주세요

const useLockScroll = (isOpen = true) => {
  useLayoutEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }

    return () => {
      document.body.style.overflow = 'unset';
    };
  }, [isOpen]);
};

[sxungchxn]

Dropdown.BottomSheet 내부에 있는 아이템에 padding 주는 것이 필요해 보여요!

[sxungchxn]

추가적으로 시간 선택처럼 목록 내용이 엄청 많은 경우 스크롤이 되도록하는 className을 추가해 Dropdown.BottomSheet 의 인자로 넘겨주어야 할듯 합니다

  overflow: 'scroll',
  selectors: {
    '&::-webkit-scrollbar': {
      display: 'none',
    },
  },

[sxungchxn]

주석은 제거해주시는게 좋을 것 같아요!

[sxungchxn]

추가적으로 쓰기 페이지를 벗어날때는 전역상태를 초기화 해주는 작업을 해주는 게 좋을 듯 합니다! 안그러면 계속 기존에 입력한 값들이 살아있는 것으로 보입니다

const reset = useFormStore((state) => state.reset);

useEffect(() => {
   return () => {
       reset();
   }
}, []);

[sxungchxn]

전체적으로 지금 구현된 화면이 디자인 시안에서 나와있는 css 간격이 다른 것 같습니다! 왼쪽이 현재 화면이 왼쪽, 디자인 시안이 오른쪽 입니다

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

No Coverage information
0.0% Duplication

[jieunpark247]

👍🏼