Feat: mark up trip space page

[JSH99]

개요

여행 스페이스 페이지 마크업
close #10

스크린샷

주요 내용

• 편집 Bottom Slide 구현
• 여행 스페이스 페이지 마크업
• 알림 페이지, 사이드 바 연결

⭐️ 공통 Bottom Slide 컴포넌트 생성

공통적으로 사용되는 bottom slide 생성해두었습니다. 피그마 기준 bottom sheet인데, chakra에서 제공하는 이름이 slide여서 bottom slide로 생성했습니다. 사용 방법 아래에 작성해두겠습니다.

const {
    isOpen: isBottomSlideOpen,
    onOpen: onBottomSlideOpen,
    onClose: onBottomSlideClose,
  } = useDisclosure();

<button onClick={onBottomSlideOpen}>
  편집
</button>
...
<BottomSlide
    isOpen={isBottomSlideOpen}
    onClose={onBottomSlideClose}
    children={<EditBottomSlideContent />}
/>

사용하고자 하는 페이지/컴포넌트에서 위처럼 작성해서 사용하시면 되고, chidren에 slide에 들어갈 내용에 해당되는 컴포넌트 넣어주시면 됩니다. 전체 코드는 Trip.tsx, BottomSlide.tsx, EditBottomSlideContent.tsx 파일 확인해주시면 됩니다!

고민한 점, 질문거리

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
trip-vote	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 7, 2024 9:29am

[HOOOO98]

고생하셨습니다~

[HOOOO98]

감사합니다!ㅎㅎ
이거만 기다리고 있었어요!🙇🏻

[JSH99]

얼른 올리려 했는데 수정사항이 있어서 조금 늦었습니다..😂

[SKY-PEY]

감사히 잘 쓰겠습니다~~!! 😘