Merge pull request #484 from TEAM-BEAT/refactor/#483/FloatingButton

[Refactor/#483] 플로팅 버튼 디자인 수정

src/assets/svgs/IconTicket.tsx

@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+const SvgIconTicket = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30" {...props}>
+    <g filter="url(#icon_ticket_svg__a)">
+      <path
+        fill="#fff"
+        fillOpacity={0.6}
+        fillRule="evenodd"
+        d="M9.219 17.09c.612.212.925.917.697 1.575-.113.329-.031.82.297.933l14.051 4.846a.77.77 0 0 0 .978-.476l3.423-9.925a.77.77 0 0 0-.477-.978L13.586 8.03h-.002c-.184.536-.668.876-1.172.87l-.004.003a.004.004 0 0 1-.006.003l-.015-.005-.006-.001a1.1 1.1 0 0 1-.317-.06c-.612-.21-.924-.916-.697-1.574l-.001-.002-4.48-1.545a.77.77 0 0 0-.978.476L2.485 16.12a.77.77 0 0 0 .477.979l3.928 1.354c.328.113.696-.223.809-.551.227-.659.907-1.021 1.52-.81m.385-.796a.24.24 0 0 1-.15-.306l.165-.478a.241.241 0 1 1 .456.158l-.164.477a.24.24 0 0 1-.307.15m.644-1.866a.24.24 0 0 1-.15-.307l.165-.477a.241.241 0 0 1 .456.157l-.165.477a.24.24 0 0 1-.306.15m.643-1.867a.24.24 0 0 1-.15-.306l.165-.477a.241.241 0 0 1 .456.157l-.164.477a.24.24 0 0 1-.307.15m.644-1.866a.24.24 0 0 1-.15-.306l.165-.478a.241.241 0 1 1 .456.158l-.165.477a.24.24 0 0 1-.306.15"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <filter
+        id="icon_ticket_svg__a"
+        width={26.266}
+        height={18.81}
+        x={2.441}
+        y={5.677}
+        colorInterpolationFilters="sRGB"
+        filterUnits="userSpaceOnUse"
+      >
+        <feFlood floodOpacity={0} result="BackgroundImageFix" />
+        <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feColorMatrix
+          in="SourceAlpha"
+          result="hardAlpha"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        />
+        <feOffset />
+        <feGaussianBlur stdDeviation={1.538} />
+        <feComposite in2="hardAlpha" k2={-1} k3={1} operator="arithmetic" />
+        <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
+        <feBlend in2="shape" result="effect1_innerShadow_8242_17346" />
+      </filter>
+    </defs>
+  </svg>
+);
+export default SvgIconTicket;

src/assets/svgs/index.ts

@@ -6,18 +6,21 @@ export { default as BtnModalDelete } from "./BtnModalDelete";
 export { default as ButtonDelete24 } from "./ButtonDelete24";
 export { default as CarouselPartInactive } from "./CarouselPartInactive";
 export { default as Empty } from "./Empty";
+export { default as IcDelete } from "./IcDelete";
+export { default as IcHamburgar } from "./IcHamburgar";
+export { default as IcNoti } from "./IcNoti";
 export { default as IcomCopy } from "./IcomCopy";
+export { default as IconArrowDown } from "./IconArrowDown";
 export { default as IconArrowLeft } from "./IconArrowLeft";
 export { default as IconArrowRight } from "./IconArrowRight";
-export { default as IconArrowDown } from "./IconArrowDown";
 export { default as IconArrowUp } from "./IconArrowUp";
 export { default as IconBnk } from "./IconBnk";
 export { default as IconCalendar } from "./IconCalendar";
 export { default as IconCamera } from "./IconCamera";
+export { default as IconCheck } from "./IconCheck";
 export { default as IconCheckboxDisabledOn } from "./IconCheckboxDisabledOn";
 export { default as IconCheckboxSelectedOn } from "./IconCheckboxSelectedOn";
 export { default as IconCheckboxUnselectedOn } from "./IconCheckboxUnselectedOn";
-export { default as IconCheck } from "./IconCheck";
 export { default as IconChecked } from "./IconChecked";
 export { default as IconChevronBack } from "./IconChevronBack";
 export { default as IconDownload } from "./IconDownload";
@@ -53,16 +56,14 @@ export { default as IconSmallEtc } from "./IconSmallEtc";
 export { default as IconSmallMusical } from "./IconSmallMusical";
 export { default as IconSoohyup } from "./IconSoohyup";
 export { default as IconTextfiedlDelete } from "./IconTextfiedlDelete";
+export { default as IconTicket } from "./IconTicket";
 export { default as IconTime } from "./IconTime";
 export { default as IconToggleOff } from "./IconToggleOff";
 export { default as IconToggleOn } from "./IconToggleOn";
 export { default as IconToss } from "./IconToss";
 export { default as IconWoochaegook } from "./IconWoochaegook";
 export { default as IconWoori } from "./IconWoori";
 export { default as IconXButton } from "./IconXButton";
-export { default as IcDelete } from "./IcDelete";
-export { default as IcHamburgar } from "./IcHamburgar";
-export { default as IcNoti } from "./IcNoti";
 export { default as IcOutlinePlace } from "./IcOutlinePlace";
 export { default as IcRadioSelected } from "./IcRadioSelected";
 export { default as IcRadioUnselected } from "./IcRadioUnselected";
@@ -72,3 +73,4 @@ export { default as NotFoundAsset } from "./NotFoundAsset";
 export { default as Subtract } from "./Subtract";
 export { default as Switch } from "./Switch";
 export { default as Union } from "./Union";
+

src/assets/svgs/index.tsx

@@ -9,6 +9,10 @@ export { default as Empty } from "./Empty";
 export { default as IcDelete } from "./IcDelete";
 export { default as IcHamburgar } from "./IcHamburgar";
 export { default as IcNoti } from "./IcNoti";
+export { default as IcOutlinePlace } from "./IcOutlinePlace";
+export { default as IcRadioSelected } from "./IcRadioSelected";
+export { default as IcRadioUnselected } from "./IcRadioUnselected";
+export { default as IcRefresh } from "./IcRefresh";
 export { default as IcomCopy } from "./IcomCopy";
 export { default as IconArrowDown } from "./IconArrowDown";
 export { default as IconArrowLeft } from "./IconArrowLeft";
@@ -56,17 +60,14 @@ export { default as IconSmallEtc } from "./IconSmallEtc";
 export { default as IconSmallMusical } from "./IconSmallMusical";
 export { default as IconSoohyup } from "./IconSoohyup";
 export { default as IconTextfiedlDelete } from "./IconTextfiedlDelete";
+export { default as IconTicket } from "./IconTicket";
 export { default as IconTime } from "./IconTime";
 export { default as IconToggleOff } from "./IconToggleOff";
 export { default as IconToggleOn } from "./IconToggleOn";
 export { default as IconToss } from "./IconToss";
 export { default as IconWoochaegook } from "./IconWoochaegook";
 export { default as IconWoori } from "./IconWoori";
 export { default as IconXButton } from "./IconXButton";
-export { default as IcOutlinePlace } from "./IcOutlinePlace";
-export { default as IcRadioSelected } from "./IcRadioSelected";
-export { default as IcRadioUnselected } from "./IcRadioUnselected";
-export { default as IcRefresh } from "./IcRefresh";
 export { default as KakaoMapArrow } from "./KakaoMapArrow";
 export { default as NotFoundAsset } from "./NotFoundAsset";
 export { default as SelectionControlCheckboxSelectedOff } from "./SelectionControlCheckboxSelectedOff";

src/pages/gig/components/makerIntroduce/MakerIntroduce.tsx

@@ -1,7 +1,7 @@
+import defaultImg from "@assets/images/img_staff_medium.png";
 import { CastListType, StaffListType } from "../content/Content";
 import PeopleCard from "../peopleCard/PeopleCard";
 import * as S from "./MakerIntroduce.styled";
-import defaultImg from "@assets/images/img_staff_medium.png";
 
 interface MakerIntroduceProps {
   teamName: string;

src/pages/main/components/floating/Floating.styled.ts

@@ -1,64 +1,56 @@
-import { BtnFloating, Union } from "@assets/svgs";
-import styled, { keyframes } from "styled-components";
-
-const float = keyframes`
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-  100% {
-    transform: translateY(0);
-  }
-`;
+import { IconTicket } from "@assets/svgs";
+import styled, { css } from "styled-components";
 
 export const Layer = styled.section<{ $width: number }>`
   position: fixed;
-  bottom: 15rem;
-  left: ${({ $width }) => `${$width / 2 + 50}px`};
+  bottom: 12rem;
+  left: ${({ $width }) => `${$width / 2 + Math.min(375 / 2, $width / 2) - 24}px`};
   z-index: 25;
 `;
 
-export const FloatingWrapper = styled.section`
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-
-  animation: ${float} 2s ease-in-out infinite;
-`;
-
-export const FloatingContainer = styled.section`
+export const FloatingBtnWrapper = styled.button<{ $showText: boolean }>`
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 0.8rem;
-`;
+  background-color: ${({ theme }) => theme.colors.pink_400};
+  padding: 1rem;
+  border-radius: 50px;
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow: 0px 0px 26px 0px rgba(251, 36, 127, 0.6);
+  transition: all 0.3s ease-in-out;
 
-export const UnionIcon = styled(Union)`
-  width: 10.3rem;
-  height: 3rem;
-  margin-right: 2rem;
-`;
-
-export const UnionText = styled.div`
   position: absolute;
-  top: 0.55rem;
-  left: 0.6rem;
-  z-index: 30;
-  display: flex;
-
-  color: ${({ theme }) => theme.colors.pink_400};
-  ${({ theme }) => theme.fonts["caption2-semi"]};
-`;
-
-export const FloatingBtnWrapper = styled.button`
-  display: flex;
-  width: 6.4rem;
-  height: 6.4rem;
-  margin-left: 5.4rem;
-`;
-
-export const FloatingBtn = styled(BtnFloating)`
-  width: 6.4rem;
-  height: 6.4rem;
+  right: 0;
+
+  width: ${({ $showText }) => ($showText ? "12.7rem" : "5.2rem")};
+`;
+
+export const FloatingText = styled.p<{ $showText: boolean }>`
+  ${({ theme }) => theme.fonts["body1-normal-semi"]};
+  color: ${({ theme }) => theme.colors.white};
+  white-space: nowrap;
+
+  ${({ $showText }) =>
+    $showText
+      ? css`
+          transform: translateX(0);
+          transition:
+            transform 0.3s ease-in-out,
+            opacity 0.3s ease-in-out;
+          opacity: 1;
+        `
+      : css`
+          transform: translateX(50%);
+          transition:
+            transform 0.3s ease-in-out,
+            opacity 0.3s ease-in-out;
+          opacity: 0;
+        `}
+`;
+
+export const TicketIcon = styled(IconTicket)`
+  width: 3rem;
+  height: 3rem;
+  flex-shrink: 0;
 `;

src/pages/main/components/floating/Floating.tsx

@@ -1,6 +1,6 @@
 import { useLogin, useModal } from "@hooks";
 import { requestKakaoLogin } from "@utils/kakaoLogin";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import * as S from "./Floating.styled";
 
@@ -24,29 +24,34 @@ const Floating = () => {
   };
 
   const [width, setWidth] = useState(window.innerWidth);
+  const [showText, setShowText] = useState(true);
+  const lastScrollY = useRef(0);
 
-  useEffect(() => {
-    const handleResize = () => {
-      setWidth(window.innerWidth);
-    };
+  const handleResize = () => {
+    setWidth(window.innerWidth);
+  };
 
+  const handleScroll = () => {
+    const currentScrollY = window.scrollY;
+    setShowText(currentScrollY < lastScrollY.current);
+    lastScrollY.current = currentScrollY;
+  };
+
+  useEffect(() => {
     window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleScroll);
     return () => {
       window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll);
     };
   }, []);
 
   return (
     <S.Layer $width={width}>
-      <S.FloatingWrapper>
-        <S.FloatingContainer>
-          <S.UnionIcon></S.UnionIcon>
-          <S.UnionText>공연을 등록해보세요!</S.UnionText>
-          <S.FloatingBtnWrapper onClick={handleRegister}>
-            <S.FloatingBtn />
-          </S.FloatingBtnWrapper>
-        </S.FloatingContainer>
-      </S.FloatingWrapper>
+      <S.FloatingBtnWrapper $showText={showText} onClick={handleRegister}>
+        <S.TicketIcon />
+        <S.FloatingText $showText={showText}>공연 등록</S.FloatingText>
+      </S.FloatingBtnWrapper>
     </S.Layer>
   );
 };