Merge pull request TEAM-BEAT#141 from TEAM-BEAT/feat/TEAM-BEAT#139/Fl…

…oatingBtn

[Feat/TEAM-BEAT#139] 메인 화면 플로팅 버튼 추가

src/assets/svgs/BtnFloating.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgBtnFloating = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" {...props}>
+    <g clipPath="url(#btn_floating_svg__a)">
+      <circle cx={32} cy={32} r={32} fill="#FF006B" />
+      <path
+        fill="url(#btn_floating_svg__b)"
+        d="m41.11 32.916-4.173-13.185L34.891 13l-1.995 6.826-4.443 17.693-3.444-9.15-2.087-6.674-2.703 6.583-2.198 4.638H14v3.722h7.127l1.748-3.311L26.78 45.3 29.161 52l1.649-6.838 4.351-17.334 2.787 8.81H50v-3.722z"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        id="btn_floating_svg__b"
+        x1={30.845}
+        x2={29.865}
+        y1={13}
+        y2={58.68}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset={0.258} stopColor="#fff" />
+        <stop offset={1} stopColor="#fff" stopOpacity={0.16} />
+      </linearGradient>
+      <clipPath id="btn_floating_svg__a">
+        <path fill="#fff" d="M0 0h64v64H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgBtnFloating;

src/assets/svgs/Union.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgUnion = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 103 30" {...props}>
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M2 0a2 2 0 0 0-2 2v21a2 2 0 0 0 2 2h94.75l6.25 5V2a2 2 0 0 0-2-2z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgUnion;

src/assets/svgs/index.tsx

@@ -1,4 +1,5 @@
 export { default as BannerBasic } from "./BannerBasic";
+export { default as BtnFloating } from "./BtnFloating";
 export { default as ButtonDelete24 } from "./ButtonDelete24";
 export { default as Empty } from "./Empty";
 export { default as IcHamburgar } from "./IcHamburgar";
@@ -54,3 +55,4 @@ export { default as IconWoori } from "./IconWoori";
 export { default as IconXButton } from "./IconXButton";
 export { default as IcOutlinePlace } from "./IcOutlinePlace";
 export { default as Subtract } from "./Subtract";
+export { default as Union } from "./Union";

src/pages/main/Main.tsx

@@ -4,6 +4,7 @@ import * as S from "./Main.styled";
 import MainNavigation from "./components/mainNavigation/MainNavigation";
 import Carousel from "./components/carousel/Carousel";
 import Chips from "./components/chips/Chips";
+import Floating from "./components/floating/Floating";
 import Performance from "./components/performance/Performance";
 import Footer from "./components/footer/Footer";
 
@@ -21,6 +22,7 @@ const Main = () => {
       <MainNavigation />
       <Carousel promotionList={dummyData.promotionList} />
       <Chips handleGenre={handleGenre} />
+      <Floating />
       <Performance genre={genre} performanceList={dummyData.performanceList} />
       <Footer />
     </S.MainWrapper>

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

@@ -0,0 +1,62 @@
+import styled, { keyframes } from "styled-components";
+import { Union, BtnFloating } from "@assets/svgs";
+
+const float = keyframes`
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
+
+export const FloatingWrapper = styled.section`
+  position: fixed;
+  right: 0.3rem;
+  bottom: 12rem;
+  z-index: 25;
+  display: flex;
+  flex-direction: column;
+
+  animation: ${float} 2s ease-in-out infinite;
+`;
+
+export const FloatingContainer = styled.section`
+  position: absolute;
+  right: 2.4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+`;
+
+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;
+`;

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

@@ -0,0 +1,24 @@
+import * as S from "./Floating.styled";
+import { useNavigate } from "react-router-dom";
+
+const Floating = () => {
+  const navigate = useNavigate();
+
+  return (
+    <S.FloatingWrapper>
+      <S.FloatingContainer>
+        <S.UnionIcon></S.UnionIcon>
+        <S.UnionText>공연을 등록해보세요!</S.UnionText>
+        <S.FloatingBtnWrapper
+          onClick={() => {
+            navigate("/register");
+          }}
+        >
+          <S.FloatingBtn />
+        </S.FloatingBtnWrapper>
+      </S.FloatingContainer>
+    </S.FloatingWrapper>
+  );
+};
+
+export default Floating;

src/pages/main/components/performance/Performance.Cardstyled.ts

@@ -13,7 +13,7 @@ export const PerformanceImg = styled.image`
   width: 15.7rem;
   height: 22.4rem;
 
-  background-color: white;
+  background-color: black;
   border-radius: 0.6rem;
 `;