From 47bfc439148f92e784a043d3b4a71cbec2cc21df Mon Sep 17 00:00:00 2001
From: Sinji <sinzi031012@naver.com>
Date: Mon, 15 Jul 2024 05:39:24 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/svgs/Union.svg                         |  3 +
 public/svgs/btn_floating.svg                  | 15 +++++
 src/assets/svgs/BtnFloating.tsx               | 30 +++++++++
 src/assets/svgs/Union.tsx                     | 13 ++++
 src/assets/svgs/index.tsx                     |  4 +-
 src/pages/main/Main.tsx                       |  2 +
 .../components/floating/Floating.styled.ts    | 61 +++++++++++++++++++
 .../main/components/floating/Floating.tsx     | 24 ++++++++
 .../performance/Performance.Cardstyled.ts     |  2 +-
 9 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 public/svgs/Union.svg
 create mode 100644 public/svgs/btn_floating.svg
 create mode 100644 src/assets/svgs/BtnFloating.tsx
 create mode 100644 src/assets/svgs/Union.tsx
 create mode 100644 src/pages/main/components/floating/Floating.styled.ts
 create mode 100644 src/pages/main/components/floating/Floating.tsx

diff --git a/public/svgs/Union.svg b/public/svgs/Union.svg
new file mode 100644
index 00000000..71d00557
--- /dev/null
+++ b/public/svgs/Union.svg
@@ -0,0 +1,3 @@
+<svg width="103" height="30" viewBox="0 0 103 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M2 0C0.895431 0 0 0.89543 0 2V23C0 24.1046 0.895429 25 2 25H96.75L103 30V25V22V2C103 0.895431 102.105 0 101 0H2Z" fill="white"/>
+</svg>
diff --git a/public/svgs/btn_floating.svg b/public/svgs/btn_floating.svg
new file mode 100644
index 00000000..27379549
--- /dev/null
+++ b/public/svgs/btn_floating.svg
@@ -0,0 +1,15 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="btn_floating" clip-path="url(#clip0_1396_5351)">
+<circle id="Ellipse 866" cx="32" cy="32" r="32" fill="#FF006B"/>
+<path id="Vector" d="M41.1095 32.9164L36.937 19.7305L34.8905 13L32.8958 19.8261L28.4526 37.519L25.0086 28.3697L22.9224 21.695L20.219 28.278L18.0212 32.9164H14V36.6383H21.1268L22.8746 33.3269L26.7804 45.3014L29.1613 52L30.8096 45.1619L35.1613 27.8277L37.9482 36.6383H50V32.9164H41.1095Z" fill="url(#paint0_linear_1396_5351)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_1396_5351" x1="30.8447" y1="13" x2="29.8647" y2="58.6799" gradientUnits="userSpaceOnUse">
+<stop offset="0.257954" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.16"/>
+</linearGradient>
+<clipPath id="clip0_1396_5351">
+<rect width="64" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/svgs/BtnFloating.tsx b/src/assets/svgs/BtnFloating.tsx
new file mode 100644
index 00000000..6f84c492
--- /dev/null
+++ b/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;
diff --git a/src/assets/svgs/Union.tsx b/src/assets/svgs/Union.tsx
new file mode 100644
index 00000000..b37c9949
--- /dev/null
+++ b/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;
diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx
index eba8b84f..40807549 100644
--- a/src/assets/svgs/index.tsx
+++ b/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";
@@ -39,4 +40,5 @@ 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 Subtract } from "./Subtract";
\ No newline at end of file
+export { default as Subtract } from "./Subtract";
+export { default as Union } from "./Union";
\ No newline at end of file
diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx
index 9da212af..c32a2815 100644
--- a/src/pages/main/Main.tsx
+++ b/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>
diff --git a/src/pages/main/components/floating/Floating.styled.ts b/src/pages/main/components/floating/Floating.styled.ts
new file mode 100644
index 00000000..33796159
--- /dev/null
+++ b/src/pages/main/components/floating/Floating.styled.ts
@@ -0,0 +1,61 @@
+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: relative;
+  top: 13.9rem;
+  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;
+`;
diff --git a/src/pages/main/components/floating/Floating.tsx b/src/pages/main/components/floating/Floating.tsx
new file mode 100644
index 00000000..4a866b63
--- /dev/null
+++ b/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;
diff --git a/src/pages/main/components/performance/Performance.Cardstyled.ts b/src/pages/main/components/performance/Performance.Cardstyled.ts
index aa82b5d1..44ee5b81 100644
--- a/src/pages/main/components/performance/Performance.Cardstyled.ts
+++ b/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;
 `;
 

From 8aa1c4fcb933f08651b4ea21f2259d14368fae9c Mon Sep 17 00:00:00 2001
From: Sinji <sinzi031012@naver.com>
Date: Mon, 15 Jul 2024 06:51:00 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=ED=94=8C=EB=A1=9C=ED=8C=85=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=96=A0=EB=8B=A4=EB=8B=90=20=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/floating/Floating.styled.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/main/components/floating/Floating.styled.ts b/src/pages/main/components/floating/Floating.styled.ts
index 33796159..fd430949 100644
--- a/src/pages/main/components/floating/Floating.styled.ts
+++ b/src/pages/main/components/floating/Floating.styled.ts
@@ -14,8 +14,9 @@ const float = keyframes`
 `;
 
 export const FloatingWrapper = styled.section`
-  position: relative;
-  top: 13.9rem;
+  position: fixed;
+  right: 0.3rem;
+  bottom: 12rem;
   z-index: 25;
   display: flex;
   flex-direction: column;