refector: recipe 에서 assignInlineVars 사용하는 것으로 변경

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 <div></div>;
+  const { isOpen, openModal, closeModal, toggleModal } = useMoreModal();
+
+  const handleDelete = () => {
+    alert("삭제되었습니다!");
+    toggleModal();
+  };
+
+  return (
+    <div>
+      <MoreModal
+        isOpen={isOpen}
+        onToggleModal={toggleModal}
+        onDelete={handleDelete}
+        iconSize={2}
+        onEdit={() => alert("수정하기")}
+      />
+    </div>
+  );
 };
 
 export default PostDetail;

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<typeof moreIcon>;
-
 export const moreModal = recipe({
   base: {
     position: "absolute",

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 (
-    <div className={container} style={{ [iconSizeVar]: `${iconSize}rem` }}>
-      <IcEllipses className={moreIcon({ iconSize })} onClick={onToggleModal} />
+    <div
+      className={container}
+      style={assignInlineVars({ [iconSizeVar]: `${iconSize}rem` })}
+    >
+      <IcEllipses
+        className={moreIcon}
+        style={assignInlineVars({ [iconSizeVar]: `${iconSize}rem` })}
+        onClick={onToggleModal}
+      />
       {isOpen && (
         <div className={moreModal({ onEdit: !!onEdit })}>
           <button