>;
+
+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: ,
+ text: '완료하기',
+ onClick: handleToggleButton,
+ });
+ }
+
+ if (isEditMode) {
+ return renderActionButton({
+ variant: 'close',
+ icon: ,
+ text: null,
+ onClick: handleToggleButton,
+ });
+ }
+
+ return renderActionButton({
+ variant: 'edit',
+ icon: ,
+ text: '편집하기',
+ onClick: handleToggleButton,
+ });
+ };
+
+ const renderActionButton = ({
+ variant,
+ icon,
+ text,
+ onClick,
+ }: RenderActionButtonProps) => (
+
+ );
+
+ const renderActionButtons = () => {
+ if (isEditMode && !isEditTimeTableMode && !isFestivalDeleteMode) {
+ return (
+
+
+
+
+ );
+ }
+ return null;
+ };
+
+ return (
+ <>
+
+ {renderActionButtons()}
+ {renderButton()}
+
+ );
+};
+
+export default EditFloatingButton;
From b6df7f32220af12970bd30d469cab128d9f999cb Mon Sep 17 00:00:00 2001
From: Minha Kang <118591632+m2na7@users.noreply.github.com>
Date: Thu, 16 Jan 2025 02:55:49 +0900
Subject: [PATCH 5/7] =?UTF-8?q?style:=20=EB=B0=B1=EA=B7=B8=EB=9D=BC?=
=?UTF-8?q?=EC=9A=B4=EB=93=9C=20css=EA=B4=80=EB=A0=A8=20=EC=A3=BC=EC=84=9D?=
=?UTF-8?q?=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../time-table/components/edit-floating-button.css.ts | 11 -----------
1 file changed, 11 deletions(-)
diff --git a/apps/client/src/pages/time-table/components/edit-floating-button.css.ts b/apps/client/src/pages/time-table/components/edit-floating-button.css.ts
index 75951eb..775b045 100644
--- a/apps/client/src/pages/time-table/components/edit-floating-button.css.ts
+++ b/apps/client/src/pages/time-table/components/edit-floating-button.css.ts
@@ -110,17 +110,6 @@ export const background = style({
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,
From 9da7e70b069d0f128c05868799d239a303d23a7e Mon Sep 17 00:00:00 2001
From: Minha Kang <118591632+m2na7@users.noreply.github.com>
Date: Thu, 16 Jan 2025 03:09:19 +0900
Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
=?UTF-8?q?=ED=86=A0=ED=81=B0=20=EC=82=AC=EC=9A=A9=20=EB=B0=8F=20css?=
=?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=84=A0=EC=96=B8=20=EC=88=9C=EC=84=9C=20?=
=?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/edit-floating-button.css.ts | 22 +++++++++----------
1 file changed, 10 insertions(+), 12 deletions(-)
diff --git a/apps/client/src/pages/time-table/components/edit-floating-button.css.ts b/apps/client/src/pages/time-table/components/edit-floating-button.css.ts
index 775b045..791d8b1 100644
--- a/apps/client/src/pages/time-table/components/edit-floating-button.css.ts
+++ b/apps/client/src/pages/time-table/components/edit-floating-button.css.ts
@@ -18,22 +18,21 @@ const fadeOutText = keyframes({
});
export const box = style({
+ ...themeVars.display.flexCenter,
+ flexDirection: 'column',
+ alignItems: 'flex-start',
padding: '1rem 5.3rem 0.9rem 1.6rem',
+
+ position: 'absolute',
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,
+ zIndex: themeVars.zIndex.floatingButton.content,
+ transition: 'width 0.3s ease-in-out',
animation: `${fadeInBox} 0.3s ease-out`,
});
@@ -45,12 +44,11 @@ export const boxButton = style({
export const buttonVariants = recipe({
base: {
+ ...themeVars.display.flexCenter,
height: '5rem',
position: 'absolute',
right: '2rem',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
+
borderRadius: '3rem',
backgroundColor: themeVars.color.gray800,
zIndex: themeVars.zIndex.floatingButton.content,
@@ -102,11 +100,11 @@ 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)',
+ transform: 'translateX(-50%)',
transition: 'background-color 0.3s ease-in-out',
});
From 664231538df50126d7682a4d2fb76d0f42ea5312 Mon Sep 17 00:00:00 2001
From: Minha Kang <118591632+m2na7@users.noreply.github.com>
Date: Thu, 16 Jan 2025 18:09:11 +0900
Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=ED=8E=B8=EC=A7=91=20=EB=B2=84?=
=?UTF-8?q?=ED=8A=BC=20=EB=B0=8F=20=EB=B0=95=EC=8A=A4=20=ED=85=8D=EC=8A=A4?=
=?UTF-8?q?=ED=8A=B8=20=EC=83=81=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../pages/time-table/components/edit-floating-button.tsx | 9 +++++----
.../src/pages/time-table/constants/edit-floating-text.ts | 9 +++++++++
2 files changed, 14 insertions(+), 4 deletions(-)
create mode 100644 apps/client/src/pages/time-table/constants/edit-floating-text.ts
diff --git a/apps/client/src/pages/time-table/components/edit-floating-button.tsx b/apps/client/src/pages/time-table/components/edit-floating-button.tsx
index de63796..1bc0b9a 100644
--- a/apps/client/src/pages/time-table/components/edit-floating-button.tsx
+++ b/apps/client/src/pages/time-table/components/edit-floating-button.tsx
@@ -8,6 +8,7 @@ import {
IcTimetableFloatFinish,
} from '@confeti/design-system/icons';
import * as styles from './edit-floating-button.css';
+import { EDIT_BOX, EDIT_BUTTON } from '../constants/edit-floating-text';
type ModeSetter = React.Dispatch>;
@@ -52,7 +53,7 @@ const EditFloatingButton = () => {
return renderActionButton({
variant: 'complete',
icon: ,
- text: '완료하기',
+ text: EDIT_BUTTON.COMPLETE,
onClick: handleToggleButton,
});
}
@@ -69,7 +70,7 @@ const EditFloatingButton = () => {
return renderActionButton({
variant: 'edit',
icon: ,
- text: '편집하기',
+ text: EDIT_BUTTON.EDIT,
onClick: handleToggleButton,
});
};
@@ -101,14 +102,14 @@ const EditFloatingButton = () => {
className={styles.boxButton}
>
- 타임테이블 편집
+ {EDIT_BOX.EDIT_TIMETABLE}
);
diff --git a/apps/client/src/pages/time-table/constants/edit-floating-text.ts b/apps/client/src/pages/time-table/constants/edit-floating-text.ts
new file mode 100644
index 0000000..2017b93
--- /dev/null
+++ b/apps/client/src/pages/time-table/constants/edit-floating-text.ts
@@ -0,0 +1,9 @@
+export const EDIT_BUTTON = {
+ COMPLETE: '완료하기',
+ EDIT: '편집하기',
+};
+
+export const EDIT_BOX = {
+ EDIT_TIMETABLE: '타임테이블 편집',
+ DELETE_FESTIVAL: '페스티벌 삭제',
+};