From b8f08bbdf64e7e156b0f503465d1651bbad1b822 Mon Sep 17 00:00:00 2001 From: minjeoong Date: Thu, 16 Jan 2025 06:24:28 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20useMoreModal=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/hook/useMoreModal.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/shared/hook/useMoreModal.ts diff --git a/src/shared/hook/useMoreModal.ts b/src/shared/hook/useMoreModal.ts new file mode 100644 index 00000000..8048be16 --- /dev/null +++ b/src/shared/hook/useMoreModal.ts @@ -0,0 +1,13 @@ +import { useState } from "react"; + +const useMoreModal = () => { + const [isOpen, setIsOpen] = useState(false); + + const openModal = () => setIsOpen(true); + const closeModal = () => setIsOpen(false); + const toggleModal = () => setIsOpen((prev) => !prev); + + return { isOpen, openModal, closeModal, toggleModal }; +}; + +export default useMoreModal; From 7c228e1c99faa6396213eb0bbb24eb5056f8df35 Mon Sep 17 00:00:00 2001 From: minjeoong Date: Thu, 16 Jan 2025 06:39:07 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=AA=A8=EB=8B=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/BottomSheet/BottomSheet.tsx | 19 +++-- src/page/community/[postId]/Post.ts | 2 + src/page/community/[postId]/Post.tsx | 20 +++++- .../component/MoreModal/MoreModal.css.ts | 71 +++++++++++++++++++ src/shared/component/MoreModal/MoreModal.tsx | 40 +++++++++++ 5 files changed, 147 insertions(+), 5 deletions(-) create mode 100644 src/page/community/[postId]/Post.ts create mode 100644 src/shared/component/MoreModal/MoreModal.css.ts create mode 100644 src/shared/component/MoreModal/MoreModal.tsx diff --git a/src/common/component/BottomSheet/BottomSheet.tsx b/src/common/component/BottomSheet/BottomSheet.tsx index 292fb11d..ebf181eb 100644 --- a/src/common/component/BottomSheet/BottomSheet.tsx +++ b/src/common/component/BottomSheet/BottomSheet.tsx @@ -8,7 +8,11 @@ interface BottomSheetPropTypes { } //화면 전체를 차지하는 바텀시트 틀 (children 필요) -const BottomSheet = ({ isOpen, children, handleOpen }: BottomSheetPropTypes) => { +const BottomSheet = ({ + isOpen, + children, + handleOpen, +}: BottomSheetPropTypes) => { if (!isOpen) return; const handleClose = () => { @@ -20,12 +24,19 @@ const BottomSheet = ({ isOpen, children, handleOpen }: BottomSheetPropTypes) => }; return ( -
+
-
+
- {children}
diff --git a/src/page/community/[postId]/Post.ts b/src/page/community/[postId]/Post.ts new file mode 100644 index 00000000..11d9e549 --- /dev/null +++ b/src/page/community/[postId]/Post.ts @@ -0,0 +1,2 @@ +import { style } from "@vanilla-extract/css"; +import { color } from "@style/styles.css.ts"; diff --git a/src/page/community/[postId]/Post.tsx b/src/page/community/[postId]/Post.tsx index 20f5b177..41dafbc8 100644 --- a/src/page/community/[postId]/Post.tsx +++ b/src/page/community/[postId]/Post.tsx @@ -1,5 +1,23 @@ +import MoreModal from "@shared/component/MoreModal/MoreModal.tsx"; +import useMoreModal from "@shared/hook/useMoreModal"; + const PostDetail = () => { - return
Postid
; + const { isOpen, toggleModal } = useMoreModal(); + + const handleDelete = () => { + alert("삭제되었습니다!"); + toggleModal(); + }; + + return ( +
+ +
+ ); }; export default PostDetail; diff --git a/src/shared/component/MoreModal/MoreModal.css.ts b/src/shared/component/MoreModal/MoreModal.css.ts new file mode 100644 index 00000000..30ab9fba --- /dev/null +++ b/src/shared/component/MoreModal/MoreModal.css.ts @@ -0,0 +1,71 @@ +import { style } from "@vanilla-extract/css"; +import { recipe, RecipeVariants } from "@vanilla-extract/recipes"; +import { button } from "@common/component/Button/styles.css.ts"; +import { color, font } from "@style/styles.css.ts"; + +export const container = style({ + marginLeft: "20rem", + // margin: "20rem", + position: "relative", +}); + +export const moreIcon = recipe({ + base: { + width: "2.4rem", + height: "2.4rem", + }, + variants: { + iconSize: { + "24": { + width: "2.4rem", + height: "2.4rem", + }, + "20": { + width: "2.0rem", + height: "2.0rem", + }, + }, + }, +}); + +export type MoreIconProps = RecipeVariants; + +export const moreModal = style({ + position: "absolute", + top: "calc(100% + 0.8rem)", // 아이콘 아래에 0.8rem 간격 + // left: "", // 아이콘의 왼쪽 경계를 기준 + left: "-16rem", + // top: "3.2rem", + display: "flex", + flexDirection: "column", + gap: "0.1rem", + borderRadius: "1.2rem", + backgroundColor: "white", + boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.15)", + width: "18.4rem", + height: "5.6rem", + zIndex: 10, +}); + +export const moreModalCon = style({ + width: "18.4rem", + height: "100%", + boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.15)", +}); + +export const moreModalItem = style([ + font.body01, + { + position: "absolute", + background: "none", + border: "none", + borderRadius: "1.2rem", + textAlign: "left", + width: "100%", + padding: "1.8rem 3.2rem", + color: color.red.warning_red200, + ":active": { + backgroundColor: color.gray.gray200, + }, + }, +]); diff --git a/src/shared/component/MoreModal/MoreModal.tsx b/src/shared/component/MoreModal/MoreModal.tsx new file mode 100644 index 00000000..a627426a --- /dev/null +++ b/src/shared/component/MoreModal/MoreModal.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import { IcEllipses } from "@asset/svg"; +import { + container, + moreIcon, + MoreIconProps, + moreModal, + moreModalCon, + moreModalItem, +} from "@shared/component/MoreModal/MoreModal.css.ts"; + +interface MoreModalParams { + isOpen: boolean; + onToggleModal: () => void; + onDelete: () => void; +} + +type MoreModalProps = MoreModalParams & MoreIconProps; + +const MoreModal = ({ + isOpen, + onToggleModal, + onDelete, + iconSize, +}: MoreModalProps) => { + return ( +
+ + {isOpen && ( +
+ +
+ )} +
+ ); +}; + +export default MoreModal; From 263413b99727978d2372c3b1e77e6a0d33b0e350 Mon Sep 17 00:00:00 2001 From: minjeoong Date: Thu, 16 Jan 2025 06:39:16 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20gitkeep=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/constant/.gitkeep | 0 src/shared/hook/.gitkeep | 0 2 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/shared/constant/.gitkeep delete mode 100644 src/shared/hook/.gitkeep diff --git a/src/shared/constant/.gitkeep b/src/shared/constant/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/shared/hook/.gitkeep b/src/shared/hook/.gitkeep deleted file mode 100644 index e69de29b..00000000 From d85b6eb4e8e5ab93d195596eff608b3e48623cdf Mon Sep 17 00:00:00 2001 From: minjeoong Date: Thu, 16 Jan 2025 06:50:29 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=82=AC=EC=9D=B4=EC=A6=88=EC=97=90=20=EB=A7=9E?= =?UTF-8?q?=EA=B2=8C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/MoreModal/MoreModal.css.ts | 22 +++++++++++++++---- src/shared/component/MoreModal/MoreModal.tsx | 3 +-- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/shared/component/MoreModal/MoreModal.css.ts b/src/shared/component/MoreModal/MoreModal.css.ts index 30ab9fba..86cab31c 100644 --- a/src/shared/component/MoreModal/MoreModal.css.ts +++ b/src/shared/component/MoreModal/MoreModal.css.ts @@ -3,10 +3,24 @@ import { recipe, RecipeVariants } from "@vanilla-extract/recipes"; import { button } from "@common/component/Button/styles.css.ts"; import { color, font } from "@style/styles.css.ts"; -export const container = style({ - marginLeft: "20rem", - // margin: "20rem", - position: "relative", +export const container = recipe({ + base: { + margin: "20rem", + position: "relative", + width: "2.4rem", + }, + variants: { + iconSize: { + "24": { + width: "2.4rem", + height: "2.4rem", + }, + "20": { + width: "2.0rem", + height: "2.0rem", + }, + }, + }, }); export const moreIcon = recipe({ diff --git a/src/shared/component/MoreModal/MoreModal.tsx b/src/shared/component/MoreModal/MoreModal.tsx index a627426a..9e494741 100644 --- a/src/shared/component/MoreModal/MoreModal.tsx +++ b/src/shared/component/MoreModal/MoreModal.tsx @@ -5,7 +5,6 @@ import { moreIcon, MoreIconProps, moreModal, - moreModalCon, moreModalItem, } from "@shared/component/MoreModal/MoreModal.css.ts"; @@ -24,7 +23,7 @@ const MoreModal = ({ iconSize, }: MoreModalProps) => { return ( -
+
{isOpen && (
From 405a319426876645052f4c6be3e15ab6ea5722ff Mon Sep 17 00:00:00 2001 From: minjeoong Date: Thu, 16 Jan 2025 06:50:59 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/community/[postId]/Post.tsx | 6 ++++++ src/shared/component/MoreModal/MoreModal.css.ts | 4 +--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/page/community/[postId]/Post.tsx b/src/page/community/[postId]/Post.tsx index 41dafbc8..b8f06230 100644 --- a/src/page/community/[postId]/Post.tsx +++ b/src/page/community/[postId]/Post.tsx @@ -16,6 +16,12 @@ const PostDetail = () => { onToggleModal={toggleModal} onDelete={handleDelete} /> +
); }; diff --git a/src/shared/component/MoreModal/MoreModal.css.ts b/src/shared/component/MoreModal/MoreModal.css.ts index 86cab31c..fd50a7f0 100644 --- a/src/shared/component/MoreModal/MoreModal.css.ts +++ b/src/shared/component/MoreModal/MoreModal.css.ts @@ -46,10 +46,8 @@ export type MoreIconProps = RecipeVariants; export const moreModal = style({ position: "absolute", - top: "calc(100% + 0.8rem)", // 아이콘 아래에 0.8rem 간격 - // left: "", // 아이콘의 왼쪽 경계를 기준 + top: "calc(100% + 0.8rem)", left: "-16rem", - // top: "3.2rem", display: "flex", flexDirection: "column", gap: "0.1rem", From 87af6ce41b0b7787a56a294d73cbbfb96fe16d4b Mon Sep 17 00:00:00 2001 From: minjeoong Date: Thu, 16 Jan 2025 07:16:01 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=EC=88=98=EC=A0=95=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/community/[postId]/Post.tsx | 3 +- .../component/MoreModal/MoreModal.css.ts | 121 +++++++++++++----- src/shared/component/MoreModal/MoreModal.tsx | 25 +++- 3 files changed, 114 insertions(+), 35 deletions(-) diff --git a/src/page/community/[postId]/Post.tsx b/src/page/community/[postId]/Post.tsx index b8f06230..c4fa72b7 100644 --- a/src/page/community/[postId]/Post.tsx +++ b/src/page/community/[postId]/Post.tsx @@ -2,7 +2,7 @@ import MoreModal from "@shared/component/MoreModal/MoreModal.tsx"; import useMoreModal from "@shared/hook/useMoreModal"; const PostDetail = () => { - const { isOpen, toggleModal } = useMoreModal(); + const { isOpen, openModal, closeModal, toggleModal } = useMoreModal(); const handleDelete = () => { alert("삭제되었습니다!"); @@ -21,6 +21,7 @@ const PostDetail = () => { onToggleModal={toggleModal} onDelete={handleDelete} iconSize="20" + onEdit={() => alert("수정하기")} />
); diff --git a/src/shared/component/MoreModal/MoreModal.css.ts b/src/shared/component/MoreModal/MoreModal.css.ts index fd50a7f0..cd0f91d1 100644 --- a/src/shared/component/MoreModal/MoreModal.css.ts +++ b/src/shared/component/MoreModal/MoreModal.css.ts @@ -44,40 +44,97 @@ export const moreIcon = recipe({ export type MoreIconProps = RecipeVariants; -export const moreModal = style({ - position: "absolute", - top: "calc(100% + 0.8rem)", - left: "-16rem", - display: "flex", - flexDirection: "column", - gap: "0.1rem", - borderRadius: "1.2rem", - backgroundColor: "white", - boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.15)", - width: "18.4rem", - height: "5.6rem", - zIndex: 10, +export const moreModal = recipe({ + base: { + position: "absolute", + top: "calc(100% + 0.8rem)", + left: "-16rem", + display: "flex", + flexDirection: "column", + borderRadius: "1.2rem", + backgroundColor: "white", + boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.15)", + width: "18.4rem", + zIndex: 10, + }, + variants: { + onEdit: { + true: { + // 수정하기가 있을 때 + height: "11.2rem", + }, + false: { + // 수정하기가 없을 때 + height: "5.6rem", + }, + }, + }, + defaultVariants: { + onEdit: false, // 기본값 + }, }); -export const moreModalCon = style({ - width: "18.4rem", - height: "100%", - boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.15)", -}); +// export const moreModalItem = style([ +// font.body01, +// { +// background: "none", +// border: "none", +// borderRadius: "1.2rem", +// textAlign: "left", +// width: "100%", +// padding: "1.8rem 3.2rem", +// color: color.red.warning_red200, +// ":hover": { +// borderRadius: "unset", +// backgroundColor: color.gray.gray300, +// }, +// ":active": { +// backgroundColor: color.gray.gray300, +// }, +// }, +// ]); -export const moreModalItem = style([ - font.body01, - { - position: "absolute", - background: "none", - border: "none", - borderRadius: "1.2rem", - textAlign: "left", - width: "100%", - padding: "1.8rem 3.2rem", - color: color.red.warning_red200, - ":active": { - backgroundColor: color.gray.gray200, +export const moreModalItem = recipe({ + base: [ + font.body01, + { + background: "none", + border: "none", + textAlign: "left", + width: "100%", + padding: "1.8rem 3.2rem", + color: color.red.warning_red200, + ":hover": { + backgroundColor: color.gray.gray300, + }, + ":active": { + backgroundColor: color.gray.gray300, + }, + }, + ], + variants: { + position: { + first: { + // 수정하기가 들어간 경우의 삭제하기 border + borderRadius: "1.2rem 1.2rem 0 0", + }, + last: { + // 수정하기가 들어간 경우의 수정하기 border + borderRadius: "0 0 1.2rem 1.2rem", + }, + default: { + // 수정하기가 없는 경우의 border + borderRadius: "1.2rem", + }, }, }, -]); + defaultVariants: { + position: "default", + }, +}); + +export const moreModalDivider = style({ + height: "1px", + backgroundColor: color.gray.gray300, + margin: "0", +}); diff --git a/src/shared/component/MoreModal/MoreModal.tsx b/src/shared/component/MoreModal/MoreModal.tsx index 9e494741..d6e7d682 100644 --- a/src/shared/component/MoreModal/MoreModal.tsx +++ b/src/shared/component/MoreModal/MoreModal.tsx @@ -5,6 +5,7 @@ import { moreIcon, MoreIconProps, moreModal, + moreModalDivider, moreModalItem, } from "@shared/component/MoreModal/MoreModal.css.ts"; @@ -12,6 +13,7 @@ interface MoreModalParams { isOpen: boolean; onToggleModal: () => void; onDelete: () => void; + onEdit?: () => void; // 선택적 수정하기 동작 } type MoreModalProps = MoreModalParams & MoreIconProps; @@ -21,15 +23,34 @@ const MoreModal = ({ onToggleModal, onDelete, iconSize, + onEdit, }: MoreModalProps) => { return (
{isOpen && ( -
- + {onEdit && ( + <> +
+ + + )}
)}
From f3c216e47bd6d6ba240c7a2820874c43acca12b2 Mon Sep 17 00:00:00 2001 From: minjeoong Date: Fri, 17 Jan 2025 02:22:59 +0900 Subject: [PATCH 7/9] =?UTF-8?q?fix:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/MoreModal/MoreModal.css.ts | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/src/shared/component/MoreModal/MoreModal.css.ts b/src/shared/component/MoreModal/MoreModal.css.ts index cd0f91d1..e65a0cd9 100644 --- a/src/shared/component/MoreModal/MoreModal.css.ts +++ b/src/shared/component/MoreModal/MoreModal.css.ts @@ -74,26 +74,6 @@ export const moreModal = recipe({ }, }); -// export const moreModalItem = style([ -// font.body01, -// { -// background: "none", -// border: "none", -// borderRadius: "1.2rem", -// textAlign: "left", -// width: "100%", -// padding: "1.8rem 3.2rem", -// color: color.red.warning_red200, -// ":hover": { -// borderRadius: "unset", -// backgroundColor: color.gray.gray300, -// }, -// ":active": { -// backgroundColor: color.gray.gray300, -// }, -// }, -// ]); - export const moreModalItem = recipe({ base: [ font.body01, From 4bb9ca1add2b31542de82ddbf24b14397ca9bd2e Mon Sep 17 00:00:00 2001 From: minjeoong Date: Fri, 17 Jan 2025 02:26:59 +0900 Subject: [PATCH 8/9] =?UTF-8?q?refector:=20=EC=82=AD=EC=A0=9C=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20createVar=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/community/[postId]/Post.tsx | 27 +------------------ .../component/MoreModal/MoreModal.css.ts | 26 +++++------------- src/shared/component/MoreModal/MoreModal.tsx | 3 ++- 3 files changed, 10 insertions(+), 46 deletions(-) diff --git a/src/page/community/[postId]/Post.tsx b/src/page/community/[postId]/Post.tsx index c4fa72b7..d6d216a9 100644 --- a/src/page/community/[postId]/Post.tsx +++ b/src/page/community/[postId]/Post.tsx @@ -1,30 +1,5 @@ -import MoreModal from "@shared/component/MoreModal/MoreModal.tsx"; -import useMoreModal from "@shared/hook/useMoreModal"; - const PostDetail = () => { - const { isOpen, openModal, closeModal, toggleModal } = useMoreModal(); - - const handleDelete = () => { - alert("삭제되었습니다!"); - toggleModal(); - }; - - return ( -
- - alert("수정하기")} - /> -
- ); + return
; }; export default PostDetail; diff --git a/src/shared/component/MoreModal/MoreModal.css.ts b/src/shared/component/MoreModal/MoreModal.css.ts index e65a0cd9..d9488c86 100644 --- a/src/shared/component/MoreModal/MoreModal.css.ts +++ b/src/shared/component/MoreModal/MoreModal.css.ts @@ -1,26 +1,14 @@ -import { style } from "@vanilla-extract/css"; +import { createVar, style } from "@vanilla-extract/css"; import { recipe, RecipeVariants } from "@vanilla-extract/recipes"; import { button } from "@common/component/Button/styles.css.ts"; import { color, font } from "@style/styles.css.ts"; -export const container = recipe({ - base: { - margin: "20rem", - position: "relative", - width: "2.4rem", - }, - variants: { - iconSize: { - "24": { - width: "2.4rem", - height: "2.4rem", - }, - "20": { - width: "2.0rem", - height: "2.0rem", - }, - }, - }, +export const iconSizeVar = createVar(); + +export const container = style({ + position: "relative", + width: iconSizeVar, + height: iconSizeVar, }); export const moreIcon = recipe({ diff --git a/src/shared/component/MoreModal/MoreModal.tsx b/src/shared/component/MoreModal/MoreModal.tsx index d6e7d682..3f50ed7a 100644 --- a/src/shared/component/MoreModal/MoreModal.tsx +++ b/src/shared/component/MoreModal/MoreModal.tsx @@ -2,6 +2,7 @@ import React from "react"; import { IcEllipses } from "@asset/svg"; import { container, + iconSizeVar, moreIcon, MoreIconProps, moreModal, @@ -26,7 +27,7 @@ const MoreModal = ({ onEdit, }: MoreModalProps) => { return ( -
+
{isOpen && (
From 97831c67b0701300ade4780156c8ec6c788c284f Mon Sep 17 00:00:00 2001 From: minjeoong Date: Fri, 17 Jan 2025 02:49:33 +0900 Subject: [PATCH 9/9] =?UTF-8?q?refector:=20recipe=20=EC=97=90=EC=84=9C=20a?= =?UTF-8?q?ssignInlineVars=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EA=B2=83=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/community/[postId]/Post.tsx | 22 ++++++++++++++++++- .../component/MoreModal/MoreModal.css.ts | 22 +++---------------- src/shared/component/MoreModal/MoreModal.tsx | 20 +++++++++++------ 3 files changed, 37 insertions(+), 27 deletions(-) diff --git a/src/page/community/[postId]/Post.tsx b/src/page/community/[postId]/Post.tsx index d6d216a9..92167169 100644 --- a/src/page/community/[postId]/Post.tsx +++ b/src/page/community/[postId]/Post.tsx @@ -1,5 +1,25 @@ +import MoreModal from "@shared/component/MoreModal/MoreModal.tsx"; +import useMoreModal from "@shared/hook/useMoreModal"; + const PostDetail = () => { - return
; + const { isOpen, openModal, closeModal, toggleModal } = useMoreModal(); + + const handleDelete = () => { + alert("삭제되었습니다!"); + toggleModal(); + }; + + return ( +
+ alert("수정하기")} + /> +
+ ); }; export default PostDetail; diff --git a/src/shared/component/MoreModal/MoreModal.css.ts b/src/shared/component/MoreModal/MoreModal.css.ts index d9488c86..9ce500b1 100644 --- a/src/shared/component/MoreModal/MoreModal.css.ts +++ b/src/shared/component/MoreModal/MoreModal.css.ts @@ -11,27 +11,11 @@ export const container = style({ height: iconSizeVar, }); -export const moreIcon = recipe({ - base: { - width: "2.4rem", - height: "2.4rem", - }, - variants: { - iconSize: { - "24": { - width: "2.4rem", - height: "2.4rem", - }, - "20": { - width: "2.0rem", - height: "2.0rem", - }, - }, - }, +export const moreIcon = style({ + width: iconSizeVar, + height: iconSizeVar, }); -export type MoreIconProps = RecipeVariants; - export const moreModal = recipe({ base: { position: "absolute", diff --git a/src/shared/component/MoreModal/MoreModal.tsx b/src/shared/component/MoreModal/MoreModal.tsx index 3f50ed7a..8514cacf 100644 --- a/src/shared/component/MoreModal/MoreModal.tsx +++ b/src/shared/component/MoreModal/MoreModal.tsx @@ -4,31 +4,37 @@ import { container, iconSizeVar, moreIcon, - MoreIconProps, moreModal, moreModalDivider, moreModalItem, } from "@shared/component/MoreModal/MoreModal.css.ts"; +import { assignInlineVars } from "@vanilla-extract/dynamic"; interface MoreModalParams { isOpen: boolean; onToggleModal: () => void; onDelete: () => void; - onEdit?: () => void; // 선택적 수정하기 동작 + iconSize: number; + onEdit?: () => void; } -type MoreModalProps = MoreModalParams & MoreIconProps; - const MoreModal = ({ isOpen, onToggleModal, onDelete, iconSize, onEdit, -}: MoreModalProps) => { +}: MoreModalParams) => { return ( -
- +
+ {isOpen && (