[#574] FloatingButton 버그 수정 (#577)

* setting: tailwind.config에 커스텀 breakpoint(Desktop 430px) 추가

* refactor: FloatingButton 수정

- fixed 적용
- 위치값을 사용부에서 string형식으로 props를 받을 수 있도록 수정

* fix: FloatingButton 버그 수정

src/app/group/page.tsx

@@ -44,6 +44,9 @@ const GroupPage = () => {
     return;
   };
 
+  const FLOATING_BUTTON_POSITION =
+    'bottom-[8.3rem] right-[1.7rem] desktop:right-1/2 desktop:translate-x-[19.8rem]';
+
   return (
     <>
       <TopHeader text="Group" />
@@ -56,7 +59,7 @@ const GroupPage = () => {
       </div>
       <FloatingButton
         onClick={handleCreateGroupClick}
-        position="bottom-right"
+        position={FLOATING_BUTTON_POSITION}
       />
     </>
   );

src/v1/base/FloatingButton.tsx

@@ -5,38 +5,19 @@ import { IconPlus } from '@public/icons';
 import Portal from './Portal';
 
 interface FloatingButtonProps extends ComponentPropsWithoutRef<'button'> {
-  position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+  position?: string;
   onClick?: () => void;
 }
 
-const getPositionClasses = (position: string) => {
-  switch (position) {
-    case 'top-left': {
-      return 'top-[1.3rem] left-[1.7rem]';
-    }
-    case 'top-right': {
-      return 'top-[1.3rem] right-[1.7rem]';
-    }
-    case 'bottom-left': {
-      return 'bottom-[8.3rem] left-[1.7rem]';
-    }
-    case 'bottom-right': {
-      return 'bottom-[8.3rem] right-[1.7rem]';
-    }
-  }
-};
-
 const FloatingButton = ({
   position,
   onClick,
   ...props
 }: FloatingButtonProps) => {
-  const positionClasses = getPositionClasses(position);
-
   return (
-    <Portal id="floating-button-portal">
+    <Portal id="floating-button-root">
       <button
-        className={`${positionClasses} absolute flex h-[5.1rem] w-[5.1rem] items-center justify-center rounded-full bg-main-900 shadow-floating-button`}
+        className={`fixed ${position} flex h-[5.1rem] w-[5.1rem] items-center justify-center rounded-full bg-main-900 shadow-floating-button`}
         onClick={onClick}
         {...props}
       >

tailwind.config.js

@@ -12,6 +12,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      screens: {
+        desktop: '430px',
+      },
       fontSize: {
         '2xs': '1.0rem',
         xs: '1.2rem',