Merge pull request #135 from Podo-Store/dev

Dev

Author: game240

src/assets/image/button/floatingBlack.svg

@@ -1,5 +1,5 @@
 import React from "react";
-import "./Box.css";
+import "./Box.scss";
 
 const Box = ({ children }) => {
   return (

src/assets/image/button/floatingWhite.svg

@@ -0,0 +1,26 @@
+@use "./../../styles/_responsive.scss" as r;
+
+.Box {
+  display: flex;
+  justify-content: center;
+
+  position: relative;
+}
+
+.Box .Box-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: 500px;
+  @include r.media-mobile {
+    width: calc(100vw - 30px);
+  }
+  & {
+    flex-shrink: 0;
+
+    border-radius: 30px;
+    border: 3px solid var(--Main, #6a39c0);
+    box-sizing: border-box;
+  }
+}

src/components/auth/Box.css

@@ -0,0 +1,29 @@
+.__floating-btn__ {
+  position: fixed;
+  bottom: 50px;
+  right: 50px;
+
+  padding: 0;
+
+  width: 40px;
+  height: 40px;
+
+  background-color: #fff;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
+
+  cursor: pointer;
+
+  z-index: 10;
+
+  transition: background-color 0.125s ease;
+}
+
+.__floating-btn__:active {
+  background-color: var(--purple-purple-4-main, #6a39c0);
+}
+
+.__floating-btn__ img {
+  transform: translateY(1px);
+}

src/components/auth/Box.jsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+
+import floatingBlack from "../../assets/image/button/floatingBlack.svg";
+import floatingWhite from "../../assets/image/button/floatingWhite.svg";
+
+import "./FloatingBtn.css";
+
+const FloatingBtn = ({ ...props }) => {
+  const [active, setActive] = useState(false);
+
+  return (
+    <button
+      className="__floating-btn__ f-center"
+      onClick={() =>
+        window.scrollTo({
+          top: 0,
+          left: 0,
+          behavior: "smooth",
+        })
+      }
+      onMouseDown={() => setActive(true)}
+      onMouseUp={() => setActive(false)}
+      onMouseLeave={() => setActive(false)}
+      {...props}
+    >
+      <img src={!active ? floatingBlack : floatingWhite} alt="^" />
+    </button>
+  );
+};
+
+export default FloatingBtn;

src/components/auth/Box.scss

@@ -1,6 +1,7 @@
 import PartialLoading from "../loading/PartialLoading";
 
 import sparkles from "../../assets/image/post/list/sparkles.svg";
+import FloatingBtn from "../button/FloatingBtn";
 
 /**
  * 더보기 클릭 시 무한 스크롤로 노출되는 작품 리스트
@@ -12,6 +13,8 @@ import sparkles from "../../assets/image/post/list/sparkles.svg";
 const AllListContent = ({ playType, plays, renderListThumbnail, isLoading, observerTarget }) => {
   return (
     <div className="work-list">
+      <FloatingBtn />
+
       <div className="j-content-between work-list-title">
         <div className="a-items-center" id="title">
           <img src={sparkles} alt="sparkles"></img>

src/components/button/FloatingBtn.css

@@ -1,6 +1,7 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 
+import FloatingBtn from "@/components/button/FloatingBtn";
 import ImageBtn from "../components/button/ImageBtn";
 import Page4Button from "../components/button/landing/Page4Button";
 import Page3 from "@/components/landing/Page3";
@@ -27,6 +28,8 @@ const MainVer2 = () => {
 
   return (
     <div className="main-ver2">
+      <FloatingBtn />
+
       <div>
         <div className="page1 f-dir-column j-content-between">
           <div className="title-wrap f-dir-column p-relative">

src/components/button/FloatingBtn.tsx

@@ -9,7 +9,7 @@ import { SignUp1, SignUp2, SignUp3, SignUp4 } from "../../components/auth/signUp
 
 import { SERVER_URL } from "../../constants/ServerURL";
 
-import "./SignUpDefault.css";
+import "./SignUpDefault.scss";
 import "../../components/auth/signUp/ErrorMessages/AuthErrorMessages.css";
 import "../../styles/text.css";
 import "../../styles/utilities.css";