scrollToTop 버튼 구현

src/app/page.tsx

@@ -4,7 +4,8 @@ import PurpleButton from "@/components/PurpleButton";
 import WhiteButton from "@/components/WhiteButton";
 import WhiteButtonTitle from "@/components/WhiteButtonTitle";
 import MiniStar from "@/components/MiniStar";
-import Ask from '@/components/Ask'
+import Ask from '@/components/Ask';
+import ScrollToTop from '@/components/ScrollToTop';
 
 export default function Home() {
  return (
@@ -148,6 +149,12 @@ export default function Home() {
  <p>Contact Us</p>
  <p>[email protected]</p>
  </div>
+
+ <div className="scroll">
+ <ScrollToTop
+ link={"#main"}
+ />
+ </div>
  </main>
  );
 }

src/components/ScrollToTop.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const ScrollToTop = (props: {link: string}) => {
+ return (
+ <Link href={props.link}>
+ <Image
+ src="/images/top.svg"
+ alt="scrollToTop"
+ width={0}
+ height={0}
+ style={
+ {
+ width: "50px",
+ height: "auto",
+ position: "fixed",
+ bottom: "150px",
+ right: "25px"
+ }
+ }
+ />
+ </Link>
+ )
+}
+
+export default ScrollToTop;