diff --git a/public/svgs/icon_ticket.svg b/public/svgs/icon_ticket.svg
new file mode 100644
index 00000000..85b51296
--- /dev/null
+++ b/public/svgs/icon_ticket.svg
@@ -0,0 +1,21 @@
+
diff --git a/src/assets/svgs/IconTicket.tsx b/src/assets/svgs/IconTicket.tsx
new file mode 100644
index 00000000..628f8493
--- /dev/null
+++ b/src/assets/svgs/IconTicket.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+const SvgIconTicket = (props: SVGProps) => (
+
+);
+export default SvgIconTicket;
diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts
index 1e7c75bb..d6733b33 100644
--- a/src/assets/svgs/index.ts
+++ b/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,6 +56,7 @@ 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";
@@ -60,9 +64,6 @@ 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";
+
diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx
index 088d7f6d..2e6b905f 100644
--- a/src/assets/svgs/index.tsx
+++ b/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,6 +60,7 @@ 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";
@@ -63,10 +68,6 @@ 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";
diff --git a/src/pages/gig/components/makerIntroduce/MakerIntroduce.tsx b/src/pages/gig/components/makerIntroduce/MakerIntroduce.tsx
index a33e019e..a64e5084 100644
--- a/src/pages/gig/components/makerIntroduce/MakerIntroduce.tsx
+++ b/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;
diff --git a/src/pages/main/components/floating/Floating.styled.ts b/src/pages/main/components/floating/Floating.styled.ts
index c2d59595..0089d7b7 100644
--- a/src/pages/main/components/floating/Floating.styled.ts
+++ b/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;
`;
diff --git a/src/pages/main/components/floating/Floating.tsx b/src/pages/main/components/floating/Floating.tsx
index 538b3ce5..c2480a62 100644
--- a/src/pages/main/components/floating/Floating.tsx
+++ b/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 (
-
-
-
- 공연을 등록해보세요!
-
-
-
-
-
+
+
+ 공연 등록
+
);
};