Presentation component 개발

[suzy0928]

🚀 관련 이슈

• close ✨ [Feature] Presentation component UI #247

🔑 작업 내용

presentation 컴포넌트 개발 완료

📷 스크린샷

Bottom Banner

Popup

Bottom sheet

2026-02-27.12.40.23.1.mov

🌐 공유 사항 to 리뷰어

주석을 달아놓긴 했는데 바텀 시트의 경우 너무너무 공유사항이 길어서 따로 정리해둔 것을 올려두겠습니다!
-> 관리하는 문서를 따로 만드는 게 나을지 이런 부분 다음주 월요일 회의에서 논의하면 좋을 거 같습니다

BottomSheet 컴포넌트 사용 가이드

1) 이 컴포넌트가 해주는 것

• 화면 하단에 고정된 바텀시트를 띄워줌
• 시트는 3영역으로 구성됨
  1. Header(옵션): 타이틀 + 우측 닫기(✕) 아이콘
  2. Body(필수): 원하는 내용을 children으로 직접 구성
  3. Footer(옵션): 버튼 1개/2개를 스펙에 맞게 렌더
• 시트 스타일은 디자인 스펙 고정
  • w=375, padding=16/16/32/16, rounded-top=16, bg=gray-15
• overlay 클릭 시 닫기 기본 지원 (closeOnOverlayClick=true)
• 우측 닫기 아이콘은 고정(close.svg)이고 누르면 onClose() 호출

---

2) Header on/off

• title을 넘기면 Header가 켜짐
• title을 안 넘기면 Header가 꺼짐

// Header ON
<BottomSheetopen={open}title="타이틀"onClose={...}>...</BottomSheet>

// Header OFF
<BottomSheetopen={open}onClose={...}>...</BottomSheet>

---

3) Body(내용) 넣는 법

Body는 컴포넌트가 만들지 않고, 사용하는 화면에서 자유롭게 구성함.

<BottomSheetopen={open}title="설명"onClose={...}>
<divclassName="w-full flex flex-col gap-3">
<pclassName="text-gray-90">원하는 내용</p>
<inputclassName="..."/>
</div>
</BottomSheet>

---

4) Footer on/off + 버튼 스펙

Footer는 footer prop을 넘기면 켜짐, 안 넘기면 꺼짐.

(A) 단일 버튼 (layout: "single")

단일 버튼은 4가지 variant가 있음

• mint : 기본 확인 버튼(민트, 남색 글씨)
• primaryAlert : 빨간 배경 / 빨간 글씨
• primaryDisabled : 비활성(남색 배경 / 회색 글씨, 클릭 불가)
• primarySecondaryText : 남색 배경 / 더 밝은 회색 글씨

footer={{
  layout:"single",
  variant:"mint",
  label:"확인",
  onClick: () => ...
}}

---

(B) 2버튼 (layout: "double")

2버튼은 아래를 선택함

• leftVariant
  • "secondary" (기본 남색 버튼, 오른쪽 민트 버튼)
  • "alert" (왼쪽만 경고 버튼, 오른쪽 민트 버튼)
• sizeMode
  • "equal" : 5:5 동일 너비
  • "split" : 왼쪽 80px 고정 / 오른쪽 나머지 채움

footer={{
  layout:"double",
  sizeMode:"split",
  leftVariant:"secondary",
  leftLabel:"취소",
  rightLabel:"확인",
  onLeftClick: () => ...,
  onRightClick: () => ...,
}}

버튼 높이는 모두 48px 고정이고, 버튼 사이 간격은 8px(gap-2) 고정임.

🚨 이슈 사항

[netlify]

✅ Deploy Preview for readingnook ready!

Name	Link
🔨 Latest commit	e2107ec
🔍 Latest deploy log	https://app.netlify.com/projects/readingnook/deploys/69a06b9bcbb155000814c541
😎 Deploy Preview	https://deploy-preview-252--readingnook.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 project configuration.

[Eunjin03]

아예 컴포넌트 사용 방법 md 파일을 만드는 것도 좋을 것 같습니다
고생 많으셨씁니다!!!

[seoyeon0103]

수고하셧숩더