[Feat/#35] Bottom Sheet 공통 컴포넌트 추가

sinji2102 commented 1 week ago

📌 관련 이슈번호

Closes #35

🎟️ PR 유형

어떤 변경 사항이 있나요?

[x] 새 기능 추가
[ ] 버그 수정
[ ] CSS 등 사용자 UI 디자인 변경
[ ] 리팩토링

✅ Key Changes

[x] View 바텀 시트 생성
[x] Action 바텀 시트 생성
[ ] check 바텀 시트 생성

back는 공통 컴포넌트가 아니라고 판단하여 작업하지 않았습니다!
일단 PR 먼저 올려야 할 것 같아서... 그리고 check가 쓰이는 곳이 별로 없길래 일단 작업하지 않고 PR 올립니다....

📢 To Reviewers

먼저 사과의 말씀 전합니다. . . 바텀시트가 뭔가 생긴 게 자꾸만 재사용 될 것 같은데 다음에 재사용될 때는 저 형식이 아닌 것 같아 잘게 컴포넌트를 쪼개다 보니까 요상한 코드가 되었어요... 엉엉... 아기개발자가 컴포넌트 분리 욕심을 내면 어떻게 되는지를 보고 계십니다...

사용법

ContextBox 안에 넣고 싶은 아이들은 그냥 ViewBottomSheet 혹은 ActionBottomSheet 안에 바로 넣어주면 되고, ContextBox 밖에 넣고 싶은 아이들(ex. 버튼 등)은 OuterLayout 안에 넣어주면 됩니다!!
바텀 시트 사용할 때 열고 닫기 위해서는 useState로 열고 닫는 상태를 만들어주고, ViewBottomSheet(ActionBottomSheet)에 onClickOutside={닫기} 넣어주면 됩니다! 자세한 예제는 아래 예제에 나와있습니다! 일반적으로 모달이나 바텀시트 열고닫는 것과 똑같은데, onClickOutside props 하나만 더 넘겨준다고 생각하면 됩니다!!

전체적인 폴더 구조

📦components ┗ 📂commons ┃ ┣ 📂bottomSheet ┃ ┃ ┣ 📂actionsBottomSheet ┃ ┃ ┃ ┣ 📂phoneNumber ┃ ┃ ┃ ┃ ┣ 📜PhoneNumber.tsx ┃ ┃ ┃ ┃ ┃ : 휴대폰 번호 및 복사 기능 컴포넌트( action 바텀 시트가 전화번호가 아닌 정보 전달이 있을 수 있어 생성)
┃ ┃ ┃ ┃ ┗ 📜PhoneNumberStyle.tsx ┃ ┃ ┃ ┣ 📜ActionBottomSheet.tsx ┃ ┃ ┃ : Action 바텀 시트. 큰 제목과 sub title 포함 ┃ ┃ ┃ ┗ 📜ActionBottomSheetStyle.tsx ┃ ┃ ┣ 📂viewBottomSheet ┃ ┃ ┃ ┣ 📜ViewBottomSheet.tsx ┃ ┃ ┃ : View 바텀 시트. 큰 제목 및 작은 제목 포함. ContextBox이 포함되어 있고 children으로 Context를 받아야 함 ┃ ┃ ┃ ┗ 📜ViewBottomSheetStyle.tsx ┃ ┃ ┣ 📜BottomSheet.tsx ┃ ┃ : 가장 틀이 되는 (가장 큰) 바텀 시트. 타이틀만 포함되며 ViewBottomSheet와 AcionBottomSheet에서 제목을 받음 ┃ ┃ ┗ 📜BottomSheetStyle.tsx ┃ ┗ 📂contextBox ┃ ┃ ┣ 📜Context.tsx ┃ ┃ : Context가 쓰이는 개수가 바텀 시트마다 달라서 따로 제작. ┃ ┃ ┣ 📜ContextBox.tsx ┃ ┃ : ContextBox마다 들어가는 내용도 다르고 크기도 달라 커스텀 할 수 있도록 제작. ┃ ┃ ┣ 📜ContextBoxStyle.tsx ┃ ┃ ┗ 📜ContextStyle.tsx

너무,, 복잡해서 간략하게 설명해 두었습니다,,,

View Bottom Sheet

바텀 시트 내에 몇 개의 항목이 들어갈지 몰라 내용이 들어가는 부분을 Context로 분리해두었습니다!
때문에 사용할 때 ViewBottomSheet 안에 Context를 Children으로 넣어줘야 합니다.
날짜의 경우 양식이 조금 달라 Context에 isDate=true 및 subTitle, date, time을 props로 넘겨줘야 합니다!

위 캡처본과 같은 사용 예제


import styled from "styled-components";
import ViewBottomSheet from "@components/commons/bottomSheet/viewBottomSheet/ViewBottomSheet";
import Context from "@components/commons/contextBox/Context";
import Button from "@components/commons/button/Button";
import OuterLayout from "@components/commons/bottomSheet/OuterLayout";
import { useState } from "react";

const ViewBottomSheetTest = () => { const [isOpen, setIsOpen] = useState(false);

const handleSheetOpen = () => { setIsOpen(true); };

const handleSheetClose = () => { setIsOpen(false); };

return (

{isOpen && ( )}

); };

export default ViewBottomSheetTest;

const Test = styled.div` width: 37.5rem; height: 660.7rem;

background-color: white; `;


### Acton Bottom Sheet
![image](https://github.com/TEAM-BEAT/BEAT-Client/assets/66528589/038b5709-25e5-41bd-832d-3e5855c4dfa1)
- ActionBottomSheet도 전화번호가 아닌 다른 정보가 들어올 가능성이 있어 보여 컴포넌트를 분리해 두었습니다.
- viewBottomSheeet와 동일하게 ActionBottomSheet에 children으로 원하는 값을 넣어주면 됩니다! 이때 title과 subTitle이 들어갑니다
- 추후 혹은 코드리뷰 반영 시 title과 subTitle이 필수적으로 들어갈 필요 없도록 수정하겠습니다.
- viewBottomSheet와 ActionBottomSheet가 같은 ContextBox를사용하나 정렬이 달라 props로 원하는 정렬을 맞추도록 해두었습니다. 기본값은 flex-start입니다.

-  사용 예제

import styled from "styled-components"; import { useState } from "react"; import ActionBottomSheet from "@components/commons/bottomSheet/actionsBottomSheet/ActionBottomSheet"; import PhoneNumber from "@components/commons/bottomSheet/actionsBottomSheet/phoneNumber/PhoneNumber"; import Button from "@components/commons/button/Button"; import OuterLayout from "@components/commons/bottomSheet/OuterLayout";

const ActionBottomSheetTest = () => { const [isOpen, setIsOpen] = useState(false);