feat: FloatButton 컴포넌트 구현

[1223v]

1️⃣ 어떤 작업을 했나요? (Summary)

FloatButton 컴포넌트 구현을 했습니다.

• resolved feat: FloatButton 컴포넌트 구현 #16

2️⃣ 알아두시면 좋아요!

버튼의 추가 속성 => size, color, position, shape, children, icon, text

interface FloatButtonOwnProps {
  size?: "small" | "medium" | "large"; // 버튼 크기
  color?: string; // 버튼 배경색
  position?: "left" | "right" | "center"; // 버튼 위치
  shape?: "circle" | "rounded"; // 버튼 모양
  children?: React.ReactNode;
  icon?: React.ReactNode;
  text?: string;
}

export type FloatButtonProps = FloatButtonOwnProps &
  ButtonHTMLAttributes<HTMLButtonElement>;

size

버튼의 size 속성으로 small, medium, large 총 3가지로 만들었습니다.

children

버튼의 콘텐트가 담기는 children입니다.

{...rest}

• 컴포넌트가 정의된 명시적인 속성 외에도, 사용자가 전달하는 모든 추가 속성을 손쉽게 수용할 수 있도록 유연한 속성 전달을 해주었습니다. 예를 들어, disabled, aria-label, data-* 속성 등 다양한 HTML 속성을 추가로 전달할 수 있습니다.
• ButtonHTMLAttributes를 확장하여, 기본 HTML 버튼 속성에 대한 타입 검사가 자동으로 이루어져 안전성을 유지하도록 했습니다.

<button
      className={buttonClasses}
      style={color ? { backgroundColor: color, ...style } : style}
      {...rest}
    >
      {icon && <span className={styles.icon}>{icon}</span>}
      {text && <span className={styles.text}>{text}</span>}
      {children}
    </button>

3️⃣ 추후 작업

• 사이즈 개수 통일이 필요해 보입니다.

4️⃣ 체크리스트 (Checklist)

• dev 브랜치의 최신 코드를 pull 받았나요?

[mjgwon24]

확인했습니다 수고하셨습니다~ ㅎㅎ

[seocylucky]

수고하셨습니다!!! 현식님 dev에 있는거 풀 받아주시고 충돌 나는거...... 확인해주시고 해결 부탁드려요!

코멘트 달아놨습니다.

코멘트 외에 추가적으로 생각해야할 게 버튼의 width와 height 값이 고정적으로 박혀있는데 이런경우, 안에 icon이랑 text가 버튼 박스를 넘어서는 탈출현상이 발생합니다.

overflow: hidden;을 줘서 글자 탈출 현상을 막는 것이 저는 좋다고 생각하는데 다른 좋은 의견 있으시면 말해주세요!

overflow 시 탈출 현상	overflow:hidden 처리 시

[seocylucky]

module.css 에 있는 주석들 다 제거하면 좋을 거 같아요!

[seocylucky]

여기도 주석제거!

[seocylucky]

이거 tsconfig 떙기면 없어져도 되는 코드인데 dev 브랜치 pull 땡기시고 warning이랑 error나는 부분 고쳐주세요!

[seocylucky]

이거 rest가 아니라 props로 저희 통일하는거 어떨까요?!

[seocylucky]

forwardref로 감싸줘서 부모에서 직접 플로팅버튼 dom 요소에 접근해서 제어할 수 있게 해주면 유연성과 확장성 면에서 더 좋을 거 같아요!!
플로팅 버튼을 state 값에 따라 모달이나 팝업을 띄워도 되겠지만 fab를 통한 애니메이션, 및 인터렉션 작용을 사용처에서 원한다면 이에 대해 직접 접근해서 더 좋은 ux를 만들어줄 수 있도록 forwardref로 열어주는게 좋아보여서요!!!

[seocylucky]

여기도 주석제거해주세요ㅎㅎ

[seocylucky]

음 저희 글자 컬러색이 현재 검은색으로 자동 박혀있는데 저희 디폴트 컬러값이 파란색이니까 하얀색으로 일단 넣어주는거 어떨까요?
그럼 배경색이 너무 밝을때 안보이지 않을까? 하실 수 있지만 지금 현식님은 배경색 디폴트 파란색 색상 외에 자유롭게 설정할 수 있도록 하셨는데 추후 디자이너 분과 함께이면 배경색을 아예 열어둘지, 어느정도 테마 색상을 갖고가서 이 안에서 설정할 수 있도록 할지 등 논의에 따라 배경색 관련 코드를 수정할 수도 있기에 일단 디폴트 색상에 맞춰서 글씨 색을 하얀색으로 박고 가는게 나을거 같다는 생각입니다!

[seocylucky]

음 궁금한게 text랑 icon을 저렇게 다 넣어둔 상황이라면 저는 children은 빼도 된다고 생각합니다.

여기서 논의해보고 싶은게 icon과 text를 저렇게 따로 두셨는데 저런 경우 사용처에서 icon과 text를 모두 입력할 시, 순서가 icon, text로 고정적으로 박히게 되는데(물론 두 개 다 사용할까? 라는 의문이 있지만) 저는 차라리 저렇게 따로 두는 것보다 children 하나로 그냥 넣어서 icon이든 text든 사용처에서 알아서 넣도록 하는게 맞아보여요.

추가적으로 icon과 text 따로 둔다면, 각각 className을 지정하셨는데 해당 스타일 코드가 따로 없는걸로 보아 icon과 text className 관련 코드도 정리하는게 나을 거 같습니다!!

[seocylucky]

안녕하세요... 제가 또 왔습니다.
현식님이 하신거 다른 프로젝트에 적용시켜봤는데 14버전 이하여도 import가 정상적으로 작동이 안돼서 확인해보니 타입 선언 파일을 리액트랑 nextJS가 찾지 못하는 현상이 발생하더라구요.

근데 react에서는 import 자동이 잘 되긴 하지만, nextJS에서는 ssr 구조라 그런지 타입 선언 파일이 없어서 모듈 자체를 불러오지 못해 자동 import 또한 제대로 동작하지 않는 것 같습니다.

그렇기 때문에 vite-plugin-dts 설치하시고 다음 코드를 vite.config.ts에 추가하면 package.json에 types를 자동으로 추가해줄 수 있다고 하는데 어떻게 생각하시나요

    dts({
      insertTypesEntry: true, 
    }),