[#530] FloatingButton 컴포넌트 적용

src/app/group/page.tsx

@@ -1,31 +1,47 @@
 'use client';
 
+import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 
 import SSRSafeSuspense from '@/components/SSRSafeSuspense';
-import TopHeader from '@/v1/base/TopHeader';
-import SearchGroupInput from '@/v1/bookGroup/SearchGroup';
-import SimpleBookGroupCard, {
-  SimpleBookGroupCardSkeleton,
-} from '@/v1/bookGroup/SimpleBookGroupCard';
-import DetailBookGroupCard, {
-  DetailBookGroupCardSkeleton,
-} from '@/v1/bookGroup/DetailBookGroupCard';
-
 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 { 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';
 
 const GroupPage = () => {
+  const router = useRouter();
+  const { show: showToast } = useToast();
+
   const isAuthenticated = checkAuthentication();
+
   const handleSearchInputClick = () => {
     alert('아직 준비 중인 기능이에요.');
   };
 
+  const handleCreateGroupClick = () => {
+    isAuthenticated
+      ? router.push('/group/create')
+      : showToast({ message: '로그인 후에 이용할 수 있어요!', type: 'normal' });
+
+    return;
+  };
+
   return (
     <>
       <TopHeader text="Group" />
@@ -36,9 +52,10 @@ const GroupPage = () => {
           <EntireBookGroupList />
         </SSRSafeSuspense>
       </div>
-      {/* <Link href={'/group/create'}>
-        <FloatingButton position="bottom-right" />
-      </Link> */}
+      <FloatingButton
+        onClick={handleCreateGroupClick}
+        position="bottom-right"
+      />
     </>
   );
 };

src/v1/base/FloatingButton.tsx

@@ -1,39 +1,48 @@
-import { IconPlus } from '@public/icons';
 import { ComponentPropsWithoutRef } from 'react';
-import { createPortal } from 'react-dom';
+
+import { IconPlus } from '@public/icons';
+
+import Portal from './Portal';
 
 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-[6.4rem] left-[1.2rem]';
+      return 'top-[1.3rem] left-[1.7rem]';
     }
     case 'top-right': {
-      return 'top-[6.4rem] right-[1.2rem]';
+      return 'top-[1.3rem] right-[1.7rem]';
     }
     case 'bottom-left': {
-      return 'bottom-[7.2rem] left-[1.2rem]';
+      return 'bottom-[8.3rem] left-[1.7rem]';
     }
     case 'bottom-right': {
-      return 'bottom-[7.2rem] right-[1.2rem]';
+      return 'bottom-[8.3rem] right-[1.7rem]';
     }
   }
 };
 
-const FloatingButton = ({ position, ...props }: FloatingButtonProps) => {
+const FloatingButton = ({
+  position,
+  onClick,
+  ...props
+}: FloatingButtonProps) => {
   const positionClasses = getPositionClasses(position);
 
-  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
+  return (
+    <Portal id="createBookGroupButton">
+      <button
+        className={`${positionClasses} absolute flex h-[5.1rem] w-[5.1rem] items-center justify-center rounded-full bg-main-900`}
+        onClick={onClick}
+        {...props}
+      >
+        <IconPlus className="fill-white" />
+      </button>
+    </Portal>
   );
 };
 

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 fill="#AFAFAF" />
+        <IconSearch className="fill-placeholder" />
       </div>
       <input
         id="groupSearching"