Merge pull request #133 from YAPP-Github/feature/PRODUCT-244

feat: 플로팅 버튼 컴포넌트 생성 (#132)

Author: wkdtnqls0506

src/app/(home)/_shared/RegisterFloatingButton/RegisterFloatingButton.css.ts

@@ -0,0 +1,7 @@
+import { style } from "@vanilla-extract/css";
+
+import { semantic } from "@/styles";
+
+export const plusIcon = style({
+  color: semantic.icon.white,
+});

src/app/(home)/_shared/RegisterFloatingButton/RegisterFloatingButton.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import PlusIcon from "@/assets/plus.svg";
+import { FloatingButton } from "@/components/ui/FloatingButton";
+import { HStack } from "@/components/ui/Stack";
+import { Text } from "@/components/ui/Text";
+import { useScrollThreshold } from "@/hooks";
+
+import * as styles from "./RegisterFloatingButton.css";
+
+export const RegisterFloatingButton = () => {
+  const router = useRouter();
+  const { isScrolled } = useScrollThreshold(200);
+
+  const handleClick = () => {
+    router.push("/stores/register");
+  };
+
+  return (
+    <FloatingButton
+      variant={isScrolled ? "scrolled" : "initial"}
+      aria-label='응원 등록 페이지로 이동'
+      onClick={handleClick}
+    >
+      {isScrolled ? (
+        <PlusIcon width={24} height={24} className={styles.plusIcon} />
+      ) : (
+        <HStack align='center' gap={4}>
+          <PlusIcon width={16} height={16} className={styles.plusIcon} />
+          <Text typo='body2Sb' color='text.white'>
+            응원 등록
+          </Text>
+        </HStack>
+      )}
+    </FloatingButton>
+  );
+};

src/app/(home)/_shared/RegisterFloatingButton/index.ts

@@ -0,0 +1 @@
+export * from "./RegisterFloatingButton";

src/app/(home)/page.tsx

@@ -6,6 +6,7 @@ import { VStack } from "@/components/ui/Stack";
 
 import { RecentCheers, RegisterPopup, Story } from "./_components";
 import { ServiceIntroBottomSheet } from "./_components/ServiceIntroBottomSheet";
+import { RegisterFloatingButton } from "./_shared/RegisterFloatingButton";
 
 export default function HomePage() {
   return (
@@ -19,6 +20,7 @@ export default function HomePage() {
       <VStack gap={40}>
         <RecentCheers />
       </VStack>
+      <RegisterFloatingButton />
       <ServiceIntroBottomSheet />
       <RegisterPopup />
     </>

src/app/(store)/stores/(list)/page.tsx

@@ -2,6 +2,7 @@
 
 import { Suspense } from "@suspensive/react";
 
+import { RegisterFloatingButton } from "@/app/(home)/_shared/RegisterFloatingButton";
 import { Bleed } from "@/components/ui/Bleed";
 import { VStack } from "@/components/ui/Stack";
 
@@ -27,6 +28,7 @@ export default function StoreListPage() {
       <Suspense>
         <StoreList category={selectedCategory.name} />
       </Suspense>
+      <RegisterFloatingButton />
     </VStack>
   );
 }

src/assets/plus.svg

@@ -0,0 +1,40 @@
+import { recipe, type RecipeVariants } from "@vanilla-extract/recipes";
+
+import { semantic } from "@/styles";
+
+export const floatingButton = recipe({
+  base: {
+    position: "fixed",
+    right: "calc((100vw - min(100vw, 480px)) / 2 + 1rem)",
+    bottom: "2rem",
+    borderRadius: "4rem",
+    zIndex: 1000,
+    boxShadow: "0 0 24px 0 rgba(79, 79, 79, 0.24)",
+    backgroundColor: semantic.button.primaryNormalSolid,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    whiteSpace: "nowrap",
+    transition: "all 0.3s ease",
+
+    selectors: {
+      "&:hover": { transform: "scale(1.05)" },
+      "&:active": { transform: "scale(0.9)" },
+    },
+  },
+  variants: {
+    variant: {
+      initial: {
+        padding: "1.1rem 1.6rem",
+      },
+      scrolled: {
+        padding: "1.4rem",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "initial",
+  },
+});
+
+export type FloatingButtonVariants = RecipeVariants<typeof floatingButton>;

src/components/ui/FloatingButton/FloatingButton.css.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { type ComponentProps, type ReactNode } from "react";
+
+import {
+  floatingButton,
+  type FloatingButtonVariants,
+} from "./FloatingButton.css";
+
+export type FloatingButtonProps = {
+  children: ReactNode;
+  className?: string;
+} & ComponentProps<"button"> &
+  FloatingButtonVariants;
+
+/**
+ * 플로팅 버튼 컴포넌트
+ * @description 플로팅 버튼 컴포넌트는 화면에 고정되어 표시되는 액션 버튼입니다. 스크롤 상태에 따라 크기와 내용이 변경됩니다.'
+ * @example
+ * ```tsx
+ * <FloatingButton variant="initial">
+ *   <HStack align="center" gap={4}>
+ *     <PlusIcon width={16} height={16} />
+ *     <Text typo="body2Sb" color="text.white">
+ *       응원 등록
+ *     </Text>
+ *   </HStack>
+ * </FloatingButton>
+ *
+ * <FloatingButton variant="scrolled">
+ *   <PlusIcon width={24} height={24} />
+ * </FloatingButton>
+ * ```
+ */
+export const FloatingButton = ({
+  children,
+  className,
+  variant,
+  ...props
+}: FloatingButtonProps) => {
+  const floatingButtonStyle = floatingButton({ variant });
+
+  return (
+    <button
+      type='button'
+      className={`${floatingButtonStyle} ${className || ""}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

src/components/ui/FloatingButton/FloatingButton.tsx

@@ -0,0 +1 @@
+export { FloatingButton } from "./FloatingButton";

src/components/ui/FloatingButton/index.ts

@@ -0,0 +1 @@
+export * from "./useScrollThreshold";