[Motion] feat: transform origin, scale 값 추가

Author: hyeongjun3

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint-ts": "tsc --noEmit"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.32.0",

src/components/layout/CheatLayout.tsx

@@ -150,12 +150,14 @@ function SettingArea<T extends MotionJsonKeyType>({
         step={0.01}
         {...register(`${keyName}.delay`)}
       />
+      <SettingInput label="originX" {...register(`${keyName}.originX`)} />
+      <SettingInput label="originY" {...register(`${keyName}.originY`)} />
       <div className="border-sky-100 border-solid flex flex-col gap-2">
         {fields.map((item, idx) => {
           return (
             <div key={item.id} className="flex flex-row gap-2">
               <div className="flex flex-col">
-                {["x", "y", "rotate", "opacity", "ease"].map((key) => {
+                {["x", "y", "rotate", "opacity", "ease", "scale"].map((key) => {
                   const formName = `${keyName}.to[${idx}].${key}` as const;
                   return (
                     <SettingInput

src/hooks/useMotion.tsx

@@ -3,7 +3,9 @@ import { ObjectFilter, hasOwn } from "@Utils/objectExtension";
 import {
   MotionJsonValue,
   Options,
+  Styles,
   To,
+  ToOptions,
   getMotionJson,
 } from "@Utils/motionManager";
 
@@ -16,7 +18,6 @@ export default function useMotion({ id }: UseMotionProps) {
     const motionJson = getMotionJson();
 
     if (!hasOwn(motionJson, id)) return null;
-    // @ts-ignore
     return convert(motionJson[id]);
   });
 
@@ -28,27 +29,39 @@ export default function useMotion({ id }: UseMotionProps) {
 }
 
 function convert(info: MotionJsonValue) {
-  const to: To = { x: [], y: [], rotate: [], opacity: [] };
+  const to: To = { x: [], y: [], rotate: [], opacity: [], scale: [] };
   const options: Options = {
     delay: 0,
     duration: 0,
     ease: [],
   };
 
+  const styles: Styles = {
+    originX: "50%",
+    originY: "50%",
+  };
+
+  // mapping to
   info.to.forEach((item) => {
     Object.entries(item).forEach(([key, value]) => {
-      if (key === "ease") {
+      const newKey = key as keyof ToOptions;
+
+      if (newKey === "ease") {
         options.ease.push(value);
       } else {
-        // @ts-ignore
-        to[key].push(value);
+        to[newKey].push(value);
       }
     });
   });
 
+  // mapping options
   options.duration = info.duration;
   options.delay = info.delay;
 
+  // mapping sytles
+  styles.originX = info.originX;
+  styles.originY = info.originX;
+
   const filteredTo = ObjectFilter(
     to,
     ({ value }) => !(value instanceof Array && value.length === 0)
@@ -59,5 +72,10 @@ function convert(info: MotionJsonValue) {
     ({ value }) => !(value instanceof Array && value.length === 0)
   );
 
-  return { to: filteredTo, options: filteredOptions };
+  const filteredStyles = ObjectFilter(
+    styles,
+    ({ value }) => !(value instanceof Array && value.length === 0)
+  );
+
+  return { to: filteredTo, options: filteredOptions, styles: filteredStyles };
 }

src/pages/choose/Choose.page.tsx

@@ -18,6 +18,7 @@ export default function ChoosePage() {
       initial={{ y: "100%" }}
       animate={motionContent.to}
       transition={motionContent.options}
+      style={motionContent.styles}
     >
       <Top />
       <div className="flex flex-col px-[24px] overflow-y-auto gap-[32px]">

src/pages/landing/Landing.page.tsx

@@ -35,6 +35,7 @@ export default function LandingPage() {
         className="flex flex-col h-full overflow-hidden absolute w-full"
         exit={motionContent.to}
         transition={motionContent.options}
+        style={motionContent.styles}
       >
         <div className="h-full relative px-[16px] flex w-full justify-between gap-[9px]">
           <MovieSide />
@@ -45,6 +46,7 @@ export default function LandingPage() {
       <motion.div
         exit={motionButton.to}
         transition={motionButton.options}
+        style={motionButton.styles}
         className="absolute flex w-full bottom-[32px] left-0 right-0 m-auto justify-center"
       >
         <Button
@@ -58,6 +60,7 @@ export default function LandingPage() {
       <div
         className="absolute w-[100px] left-0 right-0 m-auto bottom-0 translate-y-full"
         ref={scope}
+        style={motionCathand.styles}
       >
         <CatHand />
       </div>

src/utils/motionManager.ts

@@ -10,19 +10,23 @@ export interface ToOptions {
   rotate?: number | string;
   opacity?: number;
   ease?: Easing;
+  scale?: number;
 }
 
 export interface MotionJsonValue {
   to: ToOptions[];
   delay: number;
   duration: number;
+  originX: number | string;
+  originY: number | string;
 }
 
 export interface To {
   x: (number | string)[];
   y: (number | string)[];
   rotate: (number | string)[];
   opacity: number[];
+  scale: number[];
 }
 
 export interface Options {
@@ -31,6 +35,11 @@ export interface Options {
   ease: Easing[];
 }
 
+export interface Styles {
+  originX: number | string;
+  originY: number | string;
+}
+
 export type MotionJsonKeyType = keyof typeof MotionJson;
 export type MotionJsonType = Record<MotionJsonKeyType, MotionJsonValue>;