Feat(client): 타임테이블 플로팅 컴포넌트 제작

apps/client/package.json

@@ -13,6 +13,7 @@
     "@tanstack/react-query": "^5.62.16",
     "@tanstack/react-query-devtools": "^5.62.16",
     "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/recipes": "^0.5.5",
     "axios": "^1.7.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

apps/client/src/pages/home/page/home.tsx

@@ -1,5 +1,6 @@
 import { Footer, Navigation } from '@confeti/design-system';
 import { TAB_MENU } from '../constants/menu';
+import EditFloatingButton from '@pages/time-table/components/edit-floating-button';
 
 const Home = () => {
   return (
@@ -16,6 +17,8 @@ const Home = () => {
         </Navigation.Panels>
       </Navigation.Root>
       <Footer />
+
+      <EditFloatingButton />
     </>
   );
 };

apps/client/src/pages/time-table/components/edit-floating-button.css.ts

@@ -0,0 +1,127 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { keyframes, style } from '@vanilla-extract/css';
+import { themeVars } from '@confeti/design-system/styles';
+
+const fadeInBox = keyframes({
+  from: { opacity: 0, transform: 'translateY(80%)' },
+  to: { opacity: 1, transform: 'translateY(0)' },
+});
+
+const fadeInText = keyframes({
+  from: { opacity: 0, transform: 'translateY(20%)' },
+  to: { opacity: 1, transform: 'translateY(0)' },
+});
+
+const fadeOutText = keyframes({
+  from: { opacity: 1, transform: 'translateY(0)' },
+  to: { opacity: 0, transform: 'translateY(20%)' },
+});
+
+export const box = style({
+  padding: '1rem 5.3rem 0.9rem 1.6rem',
+  bottom: '17rem',
+  right: '2rem',
+
+  ...themeVars.display.flexCenter,
+
+  position: 'absolute',
+  zIndex: themeVars.zIndex.floatingButton.content,
+  transition: 'width 0.3s ease-in-out',
+  ...themeVars.fontStyles.subtitle4_b_14,
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+
+  borderRadius: '0.5rem',
+  backgroundColor: themeVars.color.white,
+
+  animation: `${fadeInBox} 0.3s ease-out`,
+});
+
+export const boxButton = style({
+  ...themeVars.display.flexCenter,
+  padding: '0.8rem 0',
+  cursor: 'pointer',
+});
+
+export const buttonVariants = recipe({
+  base: {
+    height: '5rem',
+    position: 'absolute',
+    right: '2rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '3rem',
+    backgroundColor: themeVars.color.gray800,
+    zIndex: themeVars.zIndex.floatingButton.content,
+    transition: 'width 0.3s ease-in-out',
+    cursor: 'pointer',
+  },
+  variants: {
+    variant: {
+      close: {
+        bottom: '11rem',
+        padding: '1.3rem',
+        width: '5rem',
+      },
+      edit: {
+        bottom: '11rem',
+        padding: '0.5rem',
+        width: '11rem',
+      },
+      complete: {
+        bottom: '2rem',
+        padding: '0.5rem',
+        width: '11rem',
+        gap: '0.2rem',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'edit',
+  },
+});
+
+export const text = style({
+  ...themeVars.fontStyles.subtitle4_b_14,
+  color: themeVars.color.confeti_lime2,
+  whiteSpace: 'nowrap',
+  transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
+});
+
+export const textVisible = style({
+  animation: `${fadeInText} 0.3s ease-out`,
+});
+
+export const textHidden = style({
+  animation: `${fadeOutText} 0.3s ease-in`,
+  opacity: 0,
+});
+
+export const background = style({
+  position: 'fixed',
+  top: 0,
+  left: '50%',
+  transform: 'translateX(-50%)',
+  width: '100%',
+  height: 'var(--height)',
+  maxWidth: 'var(--max-width)',
+  minWidth: 'var(--min-width)',
+  transition: 'background-color 0.3s ease-in-out',
+});
+
+// 전체 뷰포트
+// export const background = style({
+//   position: 'fixed',
+//   top: 0,
+//   left: 0,
+//   width: '100vw',
+//   height: '100vh',
+//   zIndex: themeVars.zIndex.floatingButton.content,
+//   transition: 'background-color 0.3s ease-in-out',
+// });
+
+export const backgroundVisible = style({
+  backgroundColor: themeVars.color.black_op,
+  zIndex: themeVars.zIndex.floatingButton.content,
+});

apps/client/src/pages/time-table/components/edit-floating-button.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react';
+
+import {
+  IcTimetableFloatClose,
+  IcFloatEditLime24,
+  IcFloatEdit24,
+  IcFloatDelete24,
+  IcTimetableFloatFinish,
+} from '@confeti/design-system/icons';
+import * as styles from './edit-floating-button.css';
+
+type ModeSetter = React.Dispatch<React.SetStateAction<boolean>>;
+
+interface RenderActionButtonProps {
+  variant: 'close' | 'edit' | 'complete';
+  icon: JSX.Element;
+  text: string | null;
+  onClick: () => void;
+}
+
+const EditFloatingButton = () => {
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [isEditTimeTableMode, setIsEditTimeTableMode] = useState(false);
+  const [isFestivalDeleteMode, setIsFestivalDeleteMode] = useState(false);
+  const [isTextVisible, setIsTextVisible] = useState(true);
+
+  const resetModes = () => {
+    setIsEditTimeTableMode(false);
+    setIsFestivalDeleteMode(false);
+  };
+
+  const handleToggleButton = () => {
+    setIsEditMode((prev) => !prev);
+    setIsTextVisible(true);
+    if (isEditTimeTableMode || isFestivalDeleteMode) resetModes();
+  };
+
+  const handleModeToggle = (modeSetter: ModeSetter): void => {
+    modeSetter((prev: boolean) => !prev);
+  };
+
+  const getBackgroundClassName = () => {
+    return `${styles.background} ${
+      isEditMode && !isEditTimeTableMode && !isFestivalDeleteMode
+        ? styles.backgroundVisible
+        : ''
+    }`;
+  };
+
+  const renderButton = () => {
+    if (isEditMode && (isEditTimeTableMode || isFestivalDeleteMode)) {
+      return renderActionButton({
+        variant: 'complete',
+        icon: <IcTimetableFloatFinish width="2.4rem" height="2.4rem" />,
+        text: '완료하기',
+        onClick: handleToggleButton,
+      });
+    }
+
+    if (isEditMode) {
+      return renderActionButton({
+        variant: 'close',
+        icon: <IcTimetableFloatClose width="2.4rem" height="2.4rem" />,
+        text: null,
+        onClick: handleToggleButton,
+      });
+    }
+
+    return renderActionButton({
+      variant: 'edit',
+      icon: <IcFloatEditLime24 width="2.4rem" height="2.4rem" />,
+      text: '편집하기',
+      onClick: handleToggleButton,
+    });
+  };
+
+  const renderActionButton = ({
+    variant,
+    icon,
+    text,
+    onClick,
+  }: RenderActionButtonProps) => (
+    <button className={styles.buttonVariants({ variant })} onClick={onClick}>
+      {icon}
+      {text && (
+        <span
+          className={`${styles.text} ${isTextVisible ? styles.textVisible : styles.textHidden}`}
+        >
+          {text}
+        </span>
+      )}
+    </button>
+  );
+
+  const renderActionButtons = () => {
+    if (isEditMode && !isEditTimeTableMode && !isFestivalDeleteMode) {
+      return (
+        <div className={styles.box}>
+          <button
+            onClick={() => handleModeToggle(setIsEditTimeTableMode)}
+            className={styles.boxButton}
+          >
+            <IcFloatEdit24 width="2.4rem" height="2.4rem" />
+            <span>타임테이블 편집</span>
+          </button>
+          <button
+            onClick={() => handleModeToggle(setIsFestivalDeleteMode)}
+            className={styles.boxButton}
+          >
+            <IcFloatDelete24 width="2.4rem" height="2.4rem" />
+            <span>페스티벌 삭제</span>
+          </button>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <>
+      <div className={getBackgroundClassName()} />
+      {renderActionButtons()}
+      {renderButton()}
+    </>
+  );
+};
+
+export default EditFloatingButton;

packages/design-system/src/components/navigation/navigation.css.ts

@@ -15,6 +15,7 @@ export const container = style([
     height: '4.4rem',
     padding: '0rem 2rem',
     gap: '1.8rem',
+    zIndex: themeVars.zIndex.navigation.content,
   },
 ]);
 

packages/design-system/src/icons/src/IcFloatDelete24.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const SvgIcFloatDelete24 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#121212"
+      d="M8.333 11.667c0 .366.3.666.667.666h5.333c.367 0 .667-.3.667-.666S14.7 11 14.333 11H9c-.367 0-.667.3-.667.667M11.667 5A6.67 6.67 0 0 0 5 11.667a6.67 6.67 0 0 0 6.667 6.666 6.67 6.67 0 0 0 6.666-6.666A6.67 6.67 0 0 0 11.667 5m0 12a5.34 5.34 0 0 1-5.334-5.333 5.34 5.34 0 0 1 5.334-5.334A5.34 5.34 0 0 1 17 11.667 5.34 5.34 0 0 1 11.667 17"
+    />
+  </svg>
+);
+export default SvgIcFloatDelete24;

packages/design-system/src/icons/src/IcFloatEdit24.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const SvgIcFloatEdit24 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 25 24"
+    {...props}
+  >
+    <path
+      fill="#121212"
+      d="M6.5 15.64v2.027a.33.33 0 0 0 .333.333H8.86a.31.31 0 0 0 .233-.1l7.279-7.272-2.5-2.5L6.6 15.4a.33.33 0 0 0-.1.24m11.805-6.945c.26-.26.26-.68 0-.94l-1.56-1.56a.664.664 0 0 0-.94 0l-1.22 1.22 2.5 2.5z"
+    />
+  </svg>
+);
+export default SvgIcFloatEdit24;

packages/design-system/src/icons/src/IcFloatEditLime24.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const SvgIcFloatEditLime24 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#E9FFAC"
+      d="M6 15.64v2.027a.33.33 0 0 0 .333.333H8.36a.31.31 0 0 0 .233-.1l7.279-7.272-2.5-2.5L6.1 15.4a.33.33 0 0 0-.1.24m11.805-6.945c.26-.26.26-.68 0-.94l-1.56-1.56a.664.664 0 0 0-.94 0l-1.22 1.22 2.5 2.5z"
+    />
+  </svg>
+);
+export default SvgIcFloatEditLime24;

packages/design-system/src/icons/src/IcTimetableFloatClose.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const SvgIcTimetableFloatClose = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#E9FFAC"
+      d="m12 13.803-3.803 3.804q-.36.36-.918.36t-.918-.36Q6 17.247 6 16.689q0-.558.36-.918l3.804-3.804-3.803-3.77Q6 7.837 6 7.279q0-.558.36-.918Q6.722 6 7.28 6q.556 0 .918.36L12 10.165l3.77-3.803Q16.13 6 16.69 6q.556 0 .918.36.393.394.393.935 0 .54-.393.902l-3.804 3.77 3.804 3.803q.36.36.36.919 0 .556-.36.918a1.28 1.28 0 0 1-.935.393q-.54 0-.902-.393z"
+    />
+  </svg>
+);
+export default SvgIcTimetableFloatClose;