Merge pull request #43 from SOPT-all/feat/bottom-sheet/#40

[feat/#40] 바텀시트 구현

Author: jstar000

src/shared/components/bottom-sheet/bottom-sheet.css.ts

@@ -0,0 +1,59 @@
+import { style, keyframes } from "@vanilla-extract/css";
+import { color } from "@/shared/styles/tokens/color.css";
+
+// overlay 애니메이션 정의
+const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+// sheet 애니메이션 정의
+const slideUp = keyframes({
+  from: { transform: "translateY(100%)" },
+  to: { transform: "translateY(0)" },
+});
+
+// overlay: 전체 바텀 시트의 레이아웃 컨테이너
+// backdrop과 sheet의 부모 컨테이너, flex-end로 sheet를 화면 하단에 배치
+export const overlay = style({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 1000, // TODO: zIndex 토큰화
+  display: "flex",
+  alignItems: "flex-end", // bottom sheet는 화면 아래에서 올라와야 하므로, overlay의 bottom에 위치시켜야 함
+  justifyContent: "center",
+  animation: `${fadeIn} 0.2s ease-out`,
+});
+
+// 반투명 검은 배경, 사용자 클릭 시 바텀시트 닫는 용도
+export const backdrop = style({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.35)",
+});
+
+// 실제 바텀시트(흰색 박스))
+export const sheet = style({
+  position: "relative", // overlay 기준으로 상대적인 위치 설정
+  width: "37.5rem",
+  maxHeight: "90dvh", //
+  backgroundColor: color.white[100],
+  borderTopLeftRadius: "16px",
+  borderTopRightRadius: "16px",
+  display: "flex",
+  flexDirection: "column",
+  zIndex: 1001, // TODO: zIndex 토큰화
+  animation: `${slideUp} 0.3s ease-out`,
+});
+
+export const content = style({
+  padding: "0 1.6rem 1.6rem 1.6rem",
+  overflowY: "auto",
+  flex: 1, // sheet가 column이므로 content가 sheet의 모든 공간을 차지하도록 설정
+});

src/shared/components/bottom-sheet/bottom-sheet.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import * as styles from "./bottom-sheet.css";
+import { useBottomSheetDrag } from "./hooks/use-bottom-sheet-drag";
+import DragHandler from "@/shared/components/drag-handler/drag-handler";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const BottomSheet = ({ isOpen, onClose, children }: Props) => {
+  const {
+    sheetRef,
+    contentRef,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    handleDragHandlerMove,
+  } = useBottomSheetDrag({ onClose });
+
+  // 바텀시트가 열렸을 때 뒷배경 스크롤 방지
+  useEffect(() => {
+    if (isOpen) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+
+      return () => {
+        // isOpen이 변경되거나 컴포넌트가 언마운트될 때 실행, body의 overflow를 원래 값으로 복구
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return createPortal(
+    // TODO: 접근성 고려
+    <div className={styles.overlay}>
+      <div className={styles.backdrop} onClick={onClose} />
+      <div ref={sheetRef} className={styles.sheet}>
+        <DragHandler
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleDragHandlerMove}
+          onTouchEnd={handleTouchEnd}
+        />
+        <div
+          ref={contentRef}
+          className={styles.content}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}>
+          {children}
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default BottomSheet;

src/shared/components/bottom-sheet/hooks/use-bottom-sheet-drag.ts

@@ -0,0 +1,104 @@
+import React, { useRef, useState } from "react";
+
+interface UseBottomSheetDragProps {
+  onClose: () => void;
+}
+
+// 상수 정의
+const CLOSE_THRESHOLD = 200; // sheet을 닫기 위한 최소 드래그 거리 (px)
+const CLOSE_TRANSITION_DURATION = 200; // sheet 닫힐 때 transition 시간 (ms)
+const RETURN_TRANSITION_DURATION = 300; // sheet 원위치 복귀 시 transition 시간 (ms)
+
+export const useBottomSheetDrag = ({ onClose }: UseBottomSheetDragProps) => {
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [touchStartY, setTouchStartY] = useState(0); // 방향 판단용
+  const [sheetStartY, setSheetStartY] = useState<number | null>(null); // sheet transform 기준점
+  const dragDistanceRef = useRef(0); // sheet이 내려간 거리
+  const isDraggingRef = useRef(false); // 드래그 중인지 여부
+
+  // 드래그 시작
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchStartY(e.touches[0].clientY);
+    isDraggingRef.current = true;
+  };
+
+  // sheet을 드래그하는 로직
+  const moveSheet = (currentY: number) => {
+    if (sheetStartY === null) {
+      setSheetStartY(currentY);
+    }
+
+    const sheetDeltaY = currentY - (sheetStartY ?? currentY);
+    dragDistanceRef.current = sheetDeltaY;
+
+    if (sheetRef.current) {
+      sheetRef.current.style.transition = "none"; // handleTouchEnd에서 추가된 transition 제거 -> sheet가 드래그에 즉각 반응
+      sheetRef.current.style.transform = `translateY(${sheetDeltaY}px)`;
+    }
+  };
+
+  // content 영역 드래그
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (!isDraggingRef.current) return;
+
+    const currentY = e.touches[0].clientY; // 현재 드래그 y좌표
+    const deltaY = currentY - touchStartY; // 드래그 이동 거리
+
+    // 드래그가 위에서 아래로 진행될 때 if문 진입(content를 위로 스크롤하거나, 바텀시트를 닫기 위한 드래그 액션)
+    if (deltaY > 0) {
+      // content의 최상단에 도달했을때 if문 진입 및 sheet 드래그
+      if (contentRef.current && contentRef.current.scrollTop === 0) {
+        moveSheet(currentY);
+      }
+    }
+  };
+
+  // drag handler 영역 드래그
+  const handleDragHandlerMove = (e: React.TouchEvent) => {
+    if (!isDraggingRef.current) return;
+
+    const currentY = e.touches[0].clientY;
+    const deltaY = currentY - touchStartY;
+
+    if (deltaY > 0) {
+      // drag handler 조작 시 scrollTop 체크 없이 바로 sheet 드래그
+      moveSheet(currentY);
+    }
+  };
+
+  // 드래그 종료
+  const handleTouchEnd = () => {
+    isDraggingRef.current = false;
+
+    if (sheetRef.current) {
+      // CLOSE_THRESHOLD 이상 드래그하면 닫기
+      if (dragDistanceRef.current > CLOSE_THRESHOLD) {
+        // 부드럽게 아래로 내려가며 닫기
+        sheetRef.current.style.transition = `transform ${CLOSE_TRANSITION_DURATION}ms ease-in`;
+        sheetRef.current.style.transform = "translateY(100%)";
+
+        // transition 완료 후 onClose 호출
+        setTimeout(() => {
+          onClose();
+        }, CLOSE_TRANSITION_DURATION);
+      } else {
+        // sheet 원위치로 복귀
+        sheetRef.current.style.transition = `transform ${RETURN_TRANSITION_DURATION}ms ease-out`;
+        sheetRef.current.style.transform = "translateY(0)";
+      }
+    }
+
+    dragDistanceRef.current = 0;
+    setSheetStartY(null);
+  };
+
+  return {
+    sheetRef,
+    contentRef,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    handleDragHandlerMove,
+  };
+};

src/shared/components/bottom-sheet/test/bottom-sheet-test.css.ts

@@ -0,0 +1,64 @@
+// 바텀시트 테스트용
+// 추후 삭제 예정
+
+import { style } from "@vanilla-extract/css";
+import { typographyVars } from "@/shared/styles/typography.css";
+import { color } from "@/shared/styles/tokens/color.css";
+
+export const container = style({
+  padding: "2rem",
+  minHeight: "100vh",
+});
+
+export const title = style({
+  ...typographyVars.heading1,
+  marginBottom: "2rem",
+  color: color.black[200],
+});
+
+export const openButton = style({
+  padding: "1.2rem 2.4rem",
+  backgroundColor: color.black[200],
+  color: color.white[100],
+  border: "none",
+  borderRadius: "8px",
+  ...typographyVars.body2,
+  marginBottom: "2rem",
+});
+
+export const scrollContent = style({
+  marginTop: "2rem",
+});
+
+export const paragraph = style({
+  ...typographyVars.body3,
+  color: color.gray[100],
+  marginBottom: "1rem",
+});
+
+export const sheetTitle = style({
+  ...typographyVars.caption1,
+  color: color.black[200],
+  marginBottom: "1rem",
+});
+
+export const sheetDescription = style({
+  ...typographyVars.body3,
+  color: color.gray[100],
+  marginBottom: "2rem",
+});
+
+export const sheetContent = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1rem",
+});
+
+export const sheetItem = style({
+  padding: "1.6rem",
+  backgroundColor: color.white[200],
+  borderRadius: "8px",
+  ...typographyVars.body3,
+  color: color.black[200],
+  border: `1px solid ${color.gray[300]}`,
+});

src/shared/components/bottom-sheet/test/bottom-sheet-test.tsx

@@ -0,0 +1,46 @@
+// 바텀시트 테스트용
+// 추후 삭제 예정
+
+import { useState } from "react";
+import BottomSheet from "../bottom-sheet";
+import * as styles from "./bottom-sheet-test.css";
+
+const BottomSheetTest = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>BottomSheet Test Page</h1>
+      <button className={styles.openButton} onClick={handleOpen}>
+        바텀시트 열기
+      </button>
+
+      <div className={styles.scrollContent}>
+        {Array.from({ length: 50 }, (_, i) => (
+          <p key={i} className={styles.paragraph}>
+            뒷배경 스크롤 테스트 {i + 1}
+          </p>
+        ))}
+      </div>
+
+      <BottomSheet isOpen={isOpen} onClose={handleClose}>
+        <h2 className={styles.sheetTitle}>바텀시트 제목</h2>
+        <p className={styles.sheetDescription}>
+          아래로 드래그하거나 뒷배경을 탭하면 닫힘
+        </p>
+        <div className={styles.sheetContent}>
+          {Array.from({ length: 30 }, (_, i) => (
+            <div key={i} className={styles.sheetItem}>
+              {i + 1}
+            </div>
+          ))}
+        </div>
+      </BottomSheet>
+    </div>
+  );
+};
+
+export default BottomSheetTest;

src/shared/components/drag-handler/drag-handler.css.ts

@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css";
+import { color } from "@/shared/styles/tokens/color.css";
+
+export const container = style({
+  width: "100%",
+  display: "flex",
+  padding: "1.6rem 0 1.2rem",
+  justifyContent: "center",
+});
+
+export const dragHandler = style({
+  width: "6.4rem",
+  height: "0.5rem",
+  borderRadius: "5px",
+  backgroundColor: color.gray[200],
+});

src/shared/components/drag-handler/drag-handler.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import * as styles from "./drag-handler.css";
+
+interface Props {
+  onTouchStart?: (e: React.TouchEvent) => void;
+  onTouchMove?: (e: React.TouchEvent) => void;
+  onTouchEnd?: (e: React.TouchEvent) => void;
+}
+
+const DragHandler = ({ onTouchStart, onTouchMove, onTouchEnd }: Props) => {
+  return (
+    <div
+      className={styles.container}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}>
+      <div className={styles.dragHandler}></div>
+    </div>
+  );
+};
+
+export default DragHandler;