Revert "[#530] FloatingButton 컴포넌트 적용 (#536)"

This reverts commit 3671624.

src/app/group/page.tsx

@@ -1,49 +1,31 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 import SSRSafeSuspense from '@/components/SSRSafeSuspense';
-import useEntireGroupsQuery from '@/queries/group/useEntireGroupsQuery';
-import useMyGroupsQuery from '@/queries/group/useMyGroupQuery';
-import { useMyProfileId } from '@/queries/user/useMyProfileQuery';
-
-import useMounted from '@/hooks/useMounted';
-import { checkAuthentication } from '@/utils/helpers';
-import useToast from '@/v1/base/Toast/useToast';
-
-import FloatingButton from '@/v1/base/FloatingButton';
-import Loading from '@/v1/base/Loading';
 import TopHeader from '@/v1/base/TopHeader';
-import DetailBookGroupCard, {
-  DetailBookGroupCardSkeleton,
-} from '@/v1/bookGroup/DetailBookGroupCard';
 import SearchGroupInput from '@/v1/bookGroup/SearchGroup';
 import SimpleBookGroupCard, {
   SimpleBookGroupCardSkeleton,
 } from '@/v1/bookGroup/SimpleBookGroupCard';
+import DetailBookGroupCard, {
+  DetailBookGroupCardSkeleton,
+} from '@/v1/bookGroup/DetailBookGroupCard';
 
-const GroupPage = () => {
-  const router = useRouter();
-  const { show: showToast } = useToast();
+import useEntireGroupsQuery from '@/queries/group/useEntireGroupsQuery';
+import useMyGroupsQuery from '@/queries/group/useMyGroupQuery';
+import { useMyProfileId } from '@/queries/user/useMyProfileQuery';
+import { checkAuthentication } from '@/utils/helpers';
+import useMounted from '@/hooks/useMounted';
+import Loading from '@/v1/base/Loading';
 
+const GroupPage = () => {
   const isAuthenticated = checkAuthentication();
-
   const handleSearchInputClick = () => {
     alert('아직 준비 중인 기능이에요.');
   };
 
-  const handleCreateGroupClick = () => {
-    if (isAuthenticated) {
-      router.push('/group/create');
-    } else {
-      showToast({ message: '로그인 후에 이용할 수 있어요!', type: 'normal' });
-    }
-
-    return;
-  };
-
   return (
     <>
       <TopHeader text="Group" />
@@ -54,10 +36,9 @@ const GroupPage = () => {
           <EntireBookGroupList />
         </SSRSafeSuspense>
       </div>
-      <FloatingButton
-        onClick={handleCreateGroupClick}
-        position="bottom-right"
-      />
+      {/* <Link href={'/group/create'}>
+        <FloatingButton position="bottom-right" />
+      </Link> */}
     </>
   );
 };

src/v1/base/FloatingButton.tsx

@@ -1,48 +1,39 @@
-import { ComponentPropsWithoutRef } from 'react';
-
 import { IconPlus } from '@public/icons';
-
-import Portal from './Portal';
+import { ComponentPropsWithoutRef } from 'react';
+import { createPortal } from 'react-dom';
 
 interface FloatingButtonProps extends ComponentPropsWithoutRef<'button'> {
   position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-  onClick?: () => void;
 }
 
 const getPositionClasses = (position: string) => {
   switch (position) {
     case 'top-left': {
-      return 'top-[1.3rem] left-[1.7rem]';
+      return 'top-[6.4rem] left-[1.2rem]';
     }
     case 'top-right': {
-      return 'top-[1.3rem] right-[1.7rem]';
+      return 'top-[6.4rem] right-[1.2rem]';
     }
     case 'bottom-left': {
-      return 'bottom-[8.3rem] left-[1.7rem]';
+      return 'bottom-[7.2rem] left-[1.2rem]';
     }
     case 'bottom-right': {
-      return 'bottom-[8.3rem] right-[1.7rem]';
+      return 'bottom-[7.2rem] right-[1.2rem]';
     }
   }
 };
 
-const FloatingButton = ({
-  position,
-  onClick,
-  ...props
-}: FloatingButtonProps) => {
+const FloatingButton = ({ position, ...props }: FloatingButtonProps) => {
   const positionClasses = getPositionClasses(position);
 
-  return (
-    <Portal id="floating-button-portal">
-      <button
-        className={`${positionClasses} absolute flex h-[5.1rem] w-[5.1rem] items-center justify-center rounded-full bg-main-900 shadow-floating-button`}
-        onClick={onClick}
-        {...props}
-      >
-        <IconPlus className="fill-white" />
-      </button>
-    </Portal>
+  return createPortal(
+    <button
+      className={`${positionClasses} fixed left-[50%] top-[50%] flex h-[5.1rem] w-[5.1rem] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-main-900`}
+      {...props}
+    >
+      <IconPlus />
+    </button>,
+    document.body
   );
 };
 

src/v1/bookGroup/SearchGroup.tsx

@@ -8,7 +8,7 @@ const SearchGroup = ({ onClick }: SearchGroup) => {
   return (
     <div className="flex">
       <div className="rounded-bl-[0.4rem] rounded-tl-[0.4rem] border-[0.1rem] border-r-[0rem] border-solid border-black-100 bg-[#fffff] pl-[1rem] pt-[0.8rem]">
-        <IconSearch className="fill-placeholder" />
+        <IconSearch fill="#AFAFAF" />
       </div>
       <input
         id="groupSearching"

tailwind.config.js

@@ -79,8 +79,6 @@ module.exports = {
         bookcard: '0px 0px 7px 0px rgba(207, 207, 207, 0.5)',
         searchResultItem: '0px 0px 6px 1px rgba(114, 114, 114, 0.10);',
         bottomNav: 'rgba(0, 0, 0, 0.05) 0px 0px 10px 1px',
-        'floating-button':
-          '0px 0px 2px rgba(0, 0, 0, 0.2), 2px 2px 6px rgba(0, 0, 0, 0.1)',
       },
       keyframes: {
         'page-transition': {