[S1] 공통 BottomSheet 적용

[lydiacho]

🔥 Related Issues

• resolved [S1] 모든 BottomSheet 데스크탑뷰 너비 제한  #608

💜 작업 내용

• react-modal-sheet을 사용하는 BottomSheet을 공통 컴포넌트로 제작
• 사용하고 있는 곳에 적용

✅ PR Point

공통 컴포넌트가 필요했던 이유?

• 라이브러리 내 컴포넌트를 조합 및 사용하고 있는 구조와 스타일링이 90% 동일 -> 6곳에서 반복
• react-modal-sheet를 사용한 모든 곳에서 발생하는 styled-components warning들을 한번에 제거하고 싶었음
  • warning을 어떻게 제거했는지는 제 예전 PR을 참고해주세용

▶️ 기존에 react-modal-sheet을 사용하고 있던 컴포넌트

• SelectCustomPolicyBottom.tsx
• PainBottomSheet.tsx
• PublicBottomSheet.tsx
• DetailBottom.tsx
• FilterSheet.tsx
• RefundBottom.tsx
  이 6개의 컴포넌트에서 모두 반복되는 컴포넌트 구조와 스타일링이 사용되고 있었습니다

따라서 common > BottomSheet.tsx에 공통컴포넌트를 제작했습니다

▶️ 합성컴포넌트

합성컴포넌트 패턴을 사용해보았습니다.
저희가 현재 사용하고 있는 react-modal-sheet 라이브러리가 제공하는
메인컴포넌트-서브컴포넌트 구조를 최대한 그대로 가져갈 수 있게 만들고 싶었습니다.
쉽게 말해, 6개의 컴포넌트에 라이브러리 사용을 빼고 공통컴포넌트를 적용해줌으로써 수정해야 하는 사항이
중복되는 스타일링 코드를 모두 제거하는 것 빼고는 없었으면 좋겠다!고 생각했어요.

따라서 라이브러리의 구조와 프로퍼티를 그대로 유지하여
Header, Content, Container, Scroller, Backdrop 5가지 서브 컴포넌트와
BottomSheet라는 하나의 메인 컴포넌트를 만들었습니다.
이를 CustomSheet라는 이름의 객체로 export 해주어
사용부에서는 기존에 사용했던 라이브러리 컴포넌트명인 Sheet를 제가 만든 컴포넌트명인 CustomSheet로만 바꾸면 모든게 그대로 작동하도록! 만들었습니다

코드를 보시면 이해될 것 같아요!

const Header = ({ disableDrag, children }: { disableDrag: boolean; children?: ReactNode }) => {
  return <Sheet.Header disableDrag={disableDrag}>{children}</Sheet.Header>;
};
const Content = ({ children }: { children: ReactNode }) => {
  return <Sheet.Content>{children}</Sheet.Content>;
};
const Container = ({ children, className }: { children: ReactNode; className?: string }) => {
  return <Sheet.Container className={className}>{children}</Sheet.Container>;
};
const Scroller = ({ children }: { children: ReactNode }) => {
  return <Sheet.Scroller>{children}</Sheet.Scroller>;
};
const Backdrop = ({ onTap }: { onTap: () => void }) => {
  return <Sheet.Backdrop onTap={onTap} />;
};
const BottomSheet = ({ isOpen, onClose, detent, disableDrag, children }: BottomSheetProps) => {
  return (
    <Sheet
      className='react-modal-sheet-wrapper'
      isOpen={isOpen}
      onClose={onClose}
      detent={detent}
      disableDrag={disableDrag}
    >
      <St.SheetWrapper>{children}</St.SheetWrapper>
    </Sheet>
  );
};

export const CustomSheet = Object.assign(BottomSheet, {
  Header,
  Content,
  Container,
  Backdrop,
  Scroller,
});

const St = { ... } // 라이브러리 스타일링 커스텀 

사용부에서는 이렇게 이름만 쇽샥 바꿔주면 됩니다

▶️ 추가적인 스타일링은 className으로

여섯개의 컴포넌트가 모두 완전히 동일한 스타일링을 사용하진 않았는데요,
container와 header의 추가적인 스타일링이 필요한 케이스가 두가지 있었습니다

1. 상세페이지에서 사용되는 DetailBottom -> detail-bottom-sheet
2. 정책 설명을 위한 바텀시트 : SelectCustomPolicyBottom, PublicBottomSheet, RefundBottom -> text-bottom-sheet

이 두가지 케이스에 대한 추가적인 스타일링은 className으로 처리하였습니다.

const St = {
  SheetWrapper: styled.div`
    .react-modal-sheet-backdrop {
      ...
    }
    .react-modal-sheet-container {
      ...
    }
    .text-bottom-sheet {
      // 추가 스타일링 
      & > div:first-child {
        // 추가 스타일링 
      }
    }
    .detail-bottom-sheet {
      // 추가 스타일링 
      & > div:first-child {
        // 추가 스타일링 
      }
    }
    .react-modal-sheet-header {
      ...
    }
    .react-modal-sheet-scroller {
      ...
    }
    .react-modal-sheet-drag-indicator {
      ...
    }
  `,
};

// 사용 (className 추가) 
<CustomSheet.Container className='text-bottom-sheet'>

▶️ 최상위 Wrapper 컴포넌트 스타일링

라이브러리의 메인컴포넌트, 즉 최상위의 컴포넌트 스타일을 커스텀해줘야 했는데,
라이브러리 내 컴포넌트 위치가 root DOM트리를 벗어나서 바깥쪽에 있더라구요
그래서 코드 내 어느곳에서도 해당 컴포넌트 (.react-modal-sheet-wrapper)에 접근할 수 없어서
전역 스타일을 설정해주는 GlobalStyle.ts에 추가해주었습니다

// react-modal-sheet 라이브러리 Sheet 컴포넌트 최상위 스타일 
.react-modal-sheet-wrapper {
  inset : 0px auto !important;
  width: 100% !important;
  overflow: visible !important;
}
`;

[netlify]

✅ Deploy Preview for tattour ready!

Name	Link
🔨 Latest commit	7162566
🔍 Latest deploy log	https://app.netlify.com/sites/tattour/deploys/65d9d68c6e64fb00083075ef
😎 Deploy Preview	https://deploy-preview-617--tattour.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Arooming]

왕 야무진 공통 컴포!
저는 바텀시트를 구현하지 않아서 몰랐는데 항상 뜨던 그 워닝이 바텀시트 관련 워닝이였군용 !!
넘 수고 많으셨습니당 ~~

[Arooming]

요기랑(1)

[Arooming]

요기(2)는 이제 custonSheet 컴포넌트로 빼줘서 이 컴포넌트에서 더이상 사용하지 않아도 되는 부분이라 주석처리 해둔 것으로 이해했는데요..!
제가 이해한 부분이 맞다면 요 코드는 더이상 사용하지 않는 코드이니 삭제해주시면 좋을 것 같슴당 ~
(지우려다 까묵은 것 같움 크크)

[lydiacho]

헉 !! 맞아요 누락됐네요 ㅠㅠㅠ 감사합니다!!