Feat: 플로팅버튼 공통 컴포넌트로 분리, 스크롤 top 기능 구현

src/app/[userNickname]/collabolist/page.tsx

@@ -11,7 +11,9 @@ import { USER_DATA_ME } from '../mockData/user'; // 삭제 예정
 
 import Profile from '../_components/Profile';
 import Content from '../_components/Content';
-import FloatingButton from '../_components/FloatingButton';
+import FloatingContainer from '@/components/floatingButton/FloatingContainer';
+import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton';
+import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton';
 
 interface FeedPageProps {
   params: {
@@ -27,7 +29,10 @@ export default function CollaboListPage({ params, userId }: FeedPageProps) {
     <section>
       <Profile user={USER_DATA_ME} />
       <Content user={USER_DATA_ME} type="collabo" />
-      <FloatingButton />
+      <FloatingContainer>
+        <PlusOptionFloatingButton />
+        <ArrowUpFloatingButton />
+      </FloatingContainer>
     </section>
   );
 }

src/app/[userNickname]/mylist/page.tsx

@@ -11,7 +11,9 @@ import { USER_DATA_ME } from '../mockData/user'; // 삭제 예정
 
 import Profile from '../_components/Profile';
 import Content from '../_components/Content';
-import FloatingButton from '../_components/FloatingButton';
+import FloatingContainer from '@/components/floatingButton/FloatingContainer';
+import PlusButton from '@/components/floatingButton/PlusOptionFloatingButton';
+import ArrowUpButton from '@/components/floatingButton/ArrowUpFloatingButton';
 
 interface FeedPageProps {
   params: {
@@ -29,7 +31,10 @@ export default function MyListPage({ params, userId }: FeedPageProps) {
     <section>
       <Profile user={USER_DATA_ME} />
       <Content user={USER_DATA_ME} type="my" />
-      <FloatingButton />
+      <FloatingContainer>
+        <PlusButton />
+        <ArrowUpButton />
+      </FloatingContainer>
     </section>
   );
 }

src/components/floatingButton/ArrowUpFloatingButton.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+/**
+ TODO
+ - [x] 클릭 시 최상단으로 이동 구현
+ - [x] 스크롤에 따른 버튼 디자인 구현
+ - [x] 다른 페이지에서도 사용할 수 있도록 공통 컴포넌트화(리팩토링)
+ */
+
+import { useEffect, useState } from 'react';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import * as styles from './FloatingContainer.css';
+import ArrowUpIcon from '/public/icons/arrow_up.svg';
+
+export default function ArrowUpFloatingButton() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleScrollToTop = () => {
+    if (!isVisible) return;
+
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  const visibleButton = () => {
+    if (window.scrollY < 500) {
+      setIsVisible(false);
+    } else {
+      setIsVisible(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', visibleButton);
+
+    return () => {
+      window.removeEventListener('scroll', visibleButton);
+    };
+  }, []);
+
+  return (
+    <div
+      className={styles.arrowUpButton}
+      onClick={handleScrollToTop}
+      style={assignInlineVars({
+        [styles.opacitySize]: isVisible ? '1' : '0',
+        [styles.cursor]: isVisible ? 'pointer' : 'default',
+      })}
+    >
+      <ArrowUpIcon alt="상단으로 이동하기 버튼" className={styles.icon} />
+    </div>
+  );
+}

src/app/[userNickname]/_components/FloatingButton.css.ts → src/components/floatingButton/FloatingContainer.css.ts

@@ -1,4 +1,7 @@
-import { style } from '@vanilla-extract/css';
+import { style, createVar } from '@vanilla-extract/css';
+
+export const opacitySize = createVar();
+export const cursor = createVar();
 
 export const container = style({
   position: 'fixed',
@@ -21,10 +24,12 @@ export const addButton = style({
   cursor: 'pointer',
 });
 
-export const shareButton = style([
+export const arrowUpButton = style([
   addButton,
   {
-    opacity: '0.5',
+    opacity: opacitySize,
+    transition: 'opacity 500ms ease',
+    cursor: cursor,
   },
 ]);
 

src/components/floatingButton/FloatingContainer.tsx

@@ -0,0 +1,9 @@
+import * as styles from './FloatingContainer.css';
+
+interface FloatingButtonProps {
+  children: React.ReactNode;
+}
+
+export default function FloatingContainer({ children }: FloatingButtonProps) {
+  return <div className={styles.container}>{children}</div>;
+}

src/components/floatingButton/PlusOptionFloatingButton.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+/**
+ TODO
+ - [ ] 클릭 시 옵션 메뉴 구현
+ - [ ] 다른 페이지에서도 사용할 수 있도록 공통 컴포넌트화(리팩토링)
+ */
+
+import * as styles from './FloatingContainer.css';
+import PlusIcon from '/public/icons/plus.svg';
+
+export default function PlusOptionFloatingButton() {
+  return (
+    <div className={styles.addButton}>
+      <PlusIcon alt="옵션 보기 버튼" className={styles.icon} />
+    </div>
+  );
+}