[Feature] - 플로팅 버튼에 여행 계획 작성 추가 (#368)

* refactor(FloatingButton): 여행 계획 작성 추가 및 UI 수정

* refactor(FloatingButton): 작성 페이지 반대로 가게끔 되어있는 것 수정

* refactor(zIndex): 수정

* refactor(FloatingButton): subButtonContainer gap 및 padding 수정

frontend/src/components/common/FloatingButton/FloatingButton.styled.ts

@@ -1,20 +1,60 @@
 import { css } from "@emotion/react";
+import styled from "@emotion/styled";
 
-import theme from "@styles/theme";
+import { PRIMITIVE_COLORS } from "@styles/tokens";
 
-export const registerButtonStyle = css`
+export const FloatingButtonContainer = styled.div`
   display: flex;
-  justify-content: center;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-end;
   position: fixed;
-  right: max(2rem, calc(50% - 48rem / 2 + 2rem));
+  right: max(0vw + 2rem, calc(50vw - 22rem));
   bottom: 2rem;
-  z-index: ${theme.zIndex.floatingButton};
+  z-index: ${({ theme }) => theme.zIndex.floatingButton};
+
+  gap: ${({ theme }) => theme.spacing.s};
+`;
+
+export const SubButtonContainer = styled.div<{ $isOpen: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  width: 15rem;
+  padding: ${({ theme }) => theme.spacing.l} ${({ theme }) => theme.spacing.m};
+  border-radius: ${({ theme }) => theme.spacing.s};
+
+  background-color: ${PRIMITIVE_COLORS.gray[700]};
+  gap: ${({ theme }) => theme.spacing.l};
+
+  transition: all 0.3s ease-out;
+
+  ${({ $isOpen }) => css`
+    opacity: ${$isOpen ? 1 : 0};
+    transform: translateY(${$isOpen ? 0 : 2}rem);
+    pointer-events: ${$isOpen ? "auto" : "none"};
+  `}
+`;
+
+export const MainButtonWrapper = styled.div<{ $isOpen: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   width: 6rem;
   height: 6rem;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
 
-  background-color: ${theme.colors.primary};
+  background-color: ${({ $isOpen, theme }) =>
+    $isOpen ? PRIMITIVE_COLORS.gray[700] : theme.colors.primary};
+
+  transition: transform 0.3s ease-out;
+  transform: ${({ $isOpen }) => ($isOpen ? "rotate(45deg)" : "rotate(0)")};
+
+  cursor: pointer;
+`;
+
+export const subButtonTextStyle = css`
+  color: ${PRIMITIVE_COLORS.white};
 `;

frontend/src/components/common/FloatingButton/FloatingButton.tsx

@@ -1,26 +1,51 @@
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
 import { PRIMITIVE_COLORS } from "@styles/tokens";
 
 import IconButton from "../IconButton/IconButton";
+import Modal from "../Modal/Modal";
+import Text from "../Text/Text";
 import * as S from "./FloatingButton.styled";
 
 const FloatingButton = () => {
+  const [isOpen, setIsOpen] = useState(false);
   const navigate = useNavigate();
 
-  const handleClickRegisterButton = () => {
+  const handleToggleButton = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const handleClickTravelogueRegister = () => {
     navigate(ROUTE_PATHS_MAP.travelogueRegister);
   };
 
+  const handleClickTravelPlanRegister = () => {
+    navigate(ROUTE_PATHS_MAP.travelPlanRegister);
+  };
+
   return (
-    <IconButton
-      iconType="edit"
-      color={PRIMITIVE_COLORS.white}
-      onClick={handleClickRegisterButton}
-      css={S.registerButtonStyle}
-    />
+    <S.FloatingButtonContainer>
+      {isOpen && <Modal isOpen={isOpen} onCloseModal={handleToggleButton} />}
+      <S.SubButtonContainer $isOpen={isOpen}>
+        <button onClick={handleClickTravelPlanRegister}>
+          <Text textType="body" css={S.subButtonTextStyle}>
+            ✈️ 여행 계획 작성
+          </Text>
+        </button>
+        <button onClick={handleClickTravelogueRegister}>
+          <Text textType="body" css={S.subButtonTextStyle}>
+            📝 여행기 작성
+          </Text>
+        </button>
+      </S.SubButtonContainer>
+
+      <S.MainButtonWrapper onClick={handleToggleButton} $isOpen={isOpen}>
+        <IconButton iconType="plus" color={PRIMITIVE_COLORS.white} size="20" />
+      </S.MainButtonWrapper>
+    </S.FloatingButtonContainer>
   );
 };
 

frontend/src/styles/tokens/zIndex.ts

@@ -1,11 +1,11 @@
 export const Z_INDEX = {
   toast: 1200,
-  drawer: 1100,
-  drawerOverlay: 1050,
+  drawer: 1150,
+  drawerOverlay: 1100,
   modal: 1000,
   bottomSheet: 1000,
   overlay: 900,
-  floatingButton: 850,
+  floatingButton: 1050,
   dropdown: 800,
   header: 700,
   footer: 600,