Feat : 스크롤 내렸을때 맨 위로 버튼 추가 / Chore : 모달 이름 prop 삭제

Feat : 스크롤 내렸을때 맨 위로 버튼 추가 / Chore : 모달 이름 prop 삭제

Author: hongggyelim

components/Layout/Container.tsx

@@ -1,13 +1,32 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import ToTopBtn from "@/components/toTopBtn/ToTopBtn";
 
 interface ContainerProps {
   children: React.ReactNode;
 }
 
 const Container = ({ children }: ContainerProps) => {
+  const [showBtn, setShowBtn] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 300) {
+        setShowBtn(true);
+      } else {
+        setShowBtn(false);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
     <div className="w-full max-w-[1125px] mx-auto p-[10px] md:p-10 lg:p-10 px-[32.5px]">
       {children}
+      {showBtn && <ToTopBtn />}
     </div>
   );
 };

components/modal/AddFolderModal.tsx

@@ -37,7 +37,7 @@ const AddFolderModal = ({ folderName }: { folderName: string }) => {
   return (
     <ModalContainer title="폴더 추가">
       <ModalInput
-        placeholder="내용 입력"
+        placeholder="이름을 입력해주세요"
         name={folderName}
         value={value}
         onChange={handleChange}

components/modal/SNSModal.tsx

@@ -1,9 +1,9 @@
 import ModalContainer from "./modalComponents/ModalContainer";
 import ModalShare from "./modalComponents/ModalShare";
 
-const SNSModal = ({ folderName }: { folderName: string }) => {
+const SNSModal = () => {
   return (
-    <ModalContainer title="폴더 공유" subtitle={folderName}>
+    <ModalContainer title="폴더 공유">
       <ModalShare />
     </ModalContainer>
   );

components/modal/modalManager/ModalManager.tsx

@@ -52,7 +52,11 @@ export const Modal = () => {
         />
       );
     case "SNSModal":
-      return <SNSModal folderName={props.folderName || "폴더이름"} />;
+      return (
+        <SNSModal
+        // folderName={props.folderName || "폴더이름"}
+        />
+      );
     case "EditLink":
       return (
         <EditLink

components/toTopBtn/ToTopBtn.tsx

@@ -0,0 +1,20 @@
+import { FaAngleUp } from "react-icons/fa6";
+
+const ToTopBtn = () => {
+  const handleClickToTop = () => {
+    window.scrollTo({ top: 0 });
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={handleClickToTop}
+        className="fixed bottom-10 right-10 rounded-full border bg-white opacity-70 border-purple100 size-[40px] flex items-center justify-center"
+      >
+        <FaAngleUp fill="purple100" />
+      </button>
+    </>
+  );
+};
+export default ToTopBtn;

pages/link/index.tsx

@@ -69,7 +69,7 @@ const LinkPage = ({
       <div className="bg-gray100 w-full h-[219px] flex justify-center items-center">
         <AddLinkInput folderList={folderList} />
       </div>
-      <main className="mt-[40px]">
+      <main className="mt-[40px] relative">
         <Container>
           <SearchInput />
           {search && <SearchResultMessage message={search} />}