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 @@
+
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 @@
+
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) => (
+
+);
+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) => (
+
+);
+export default SvgUnion;
diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx
index 37bf1bd1..3e49c74a 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";
@@ -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";
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 = () => {
+
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..fd430949
--- /dev/null
+++ b/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;
+`;
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 (
+
+
+
+ 공연을 등록해보세요!
+ {
+ navigate("/register");
+ }}
+ >
+
+
+
+
+ );
+};
+
+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;
`;