[FE][Feat] #13 #14 : bottomsheet와 bottomsheet 내부 content

[juwon5272]

📝 PR 개요

• bottomsheet 컴포넌트 제작
• bottomsheet 내부 content 제작

🔍 변경 사항

• bottomsheet의 최소 높이와 최대 높이을 매개변수로 받아 bottomsheet의 높이를 조절할 수 있게 하였습니다

---

✅ 체크리스트 (Checklist)

• 코드가 빌드 오류 없이 잘 작동하는지 확인
• 테스트가 통과하는지 확인
• 스타일 가이드와 일관성을 유지했는지 확인
• 관련 문서가 업데이트되었는지 확인 (선택 사항)
• 리뷰어가 이해할 수 있도록 주석이나 설명을 추가했는지 확인

🔄 관련 이슈 (Linked Issues)

• dropdown 버튼과 메뉴과 구현이 되는대로 수정하기, 삭제하기 버튼을 추가할 예정입니다

---

📷 스크린샷 및 동영상

• 모바일 화면 (터치)

2024-11-13.3.49.14.mov

• 웹화면 (클릭)

2024-11-13.3.50.03.mov

---

🧪 테스트 방법

• �메인 페이지에 아래와 같이 입력 후 확인합니다

import React, { Fragment } from 'react';
import { BottomSheet } from '@/component/bottomsheet/BottomSheet';
import { Content } from '@/component/content/Content';

const contentData = [
  {
    id: '1',
    title: '아들네 집으로',
    time: '0시간 30분',
    person: 2,
    link: '/test',
  },
  {
    id: '2',
    title: '아들네 집으로',
    time: '0시간 30분',
    person: 2,
    link: '/test',
  },
  {
    id: '3',
    title: '아들네 집으로',
    time: '0시간 30분',
    person: 2,
    link: '/test',
  },
];

const MIN_HEIGHT = 0.5;
const MAX_HEIGHT = 0.8;

export const Main = () => {
  return (
    <div className="flex h-screen flex-col bg-blue-100">
      <div className="flex h-screen flex-col items-center justify-center">
        <BottomSheet minHeight={MIN_HEIGHT} maxHeight={MAX_HEIGHT}>
          {contentData.map(item => (
            <Fragment key={item.id}>
              <Content title={item.title} time={item.time} person={item.person} link={item.link} />
              <hr />
            </Fragment>
          ))}
        </BottomSheet>
      </div>
    </div>
  );
};

[effozen]

그냥 이대로 올려도 될 거 같아서 Approve하긴 했는데 시맨틱 태그 부분은 조금 마음에 걸립니다.(접근성 측면, 나중에 생각하기로 했지만 시맨틱 태그 등은 개발단계에서 고려해야 비용이 제일 적다고 생각해서..) 한번 확인해주실 수 있을까요?

[juwon5272]

시맨틱 태그를 추가하였고 bottomsheet의 framer-motion을 제거하였습니다. 일부 inline-css로 작성된 코드를 tailwind로 변경하였습니다