gaesup-world 0.9.58 → 0.9.60

package/README.md

@@ -731,17 +731,17 @@ The **Passive** component defines objects that do not require interaction, such
 
 ---
 
-#### JumpPortal
+#### teleport
 
 - **Description**: Represents a clickable portal that allows users to teleport to a specified location within the 3D world. Ideal for creating interactive teleportation points in your application.
 
 - **Props**:
 
-  | Prop Name         | Type          | Required | Description                                                 | Default Value |
-  | ----------------- | ------------- | -------- | ----------------------------------------------------------- | ------------- |
-  | `text`            | string        | Optional | The text to display on the portal.                          | `undefined`   |
-  | `position`        | THREE.Vector3 | Required | The target position to teleport to using a `THREE.Vector3`. | None          |
-  | `jumpPortalStyle` | CSSProperties | Optional | CSS styles for customizing the appearance of the portal.    | `undefined`   |
+  | Prop Name       | Type          | Required | Description                                                 | Default Value |
+  | --------------- | ------------- | -------- | ----------------------------------------------------------- | ------------- |
+  | `text`          | string        | Optional | The text to display on the portal.                          | `undefined`   |
+  | `position`      | THREE.Vector3 | Required | The target position to teleport to using a `THREE.Vector3`. | None          |
+  | `teleportStyle` | CSSProperties | Optional | CSS styles for customizing the appearance of the portal.    | `undefined`   |
 
 - **Usage Example**:
 
@@ -749,7 +749,7 @@ The **Passive** component defines objects that do not require interaction, such
   import React from 'react';
   import { Canvas } from '@react-three/fiber';
   import { Physics } from '@react-three/rapier';
-  import { GaesupWorld, JumpPortal } from '../../../src';
+  import { GaesupWorld, teleport } from '../../../src';
   import * as THREE from 'three';
 
   export default function App() {
@@ -764,10 +764,10 @@ The **Passive** component defines objects that do not require interaction, such
       >
         <Canvas>
           <Physics>
-            <JumpPortal
+            <teleport
               text="Teleport"
               position={new THREE.Vector3(10, 0, 5)}
-              jumpPortalStyle={{ backgroundColor: "blue", color: "white" }}
+              teleportStyle={{ backgroundColor: "blue", color: "white" }}
             />
             {/* Other components */}
           </Physics>
@@ -779,7 +779,7 @@ The **Passive** component defines objects that do not require interaction, such
 
 - **Key Features**:
   - **Teleport Functionality**: Moves the camera and character to the specified position upon clicking the portal.
-  - **Custom Styling**: Customize the portal's appearance using `jumpPortalStyle`.
+  - **Custom Styling**: Customize the portal's appearance using `teleportStyle`.
   - **Text Display**: Displays text on the portal to guide users.
 
 ---
@@ -1543,17 +1543,17 @@ export default function App() {
 
 ---
 
-#### JumpPortal
+#### teleport
 
 - **설명**: 클릭 가능한 포탈을 통해 사용자를 지정된 위치로 텔레포트할 수 있는 컴포넌트입니다. 인터랙티브한 텔레포테이션 포인트를 생성하는 데 사용됩니다.
   
 - **Props**:
 
-  | Prop Name         | Type          | Required | Description                                    | Default Value |
-  | ----------------- | ------------- | -------- | ---------------------------------------------- | ------------- |
-  | `text`            | string        | Optional | 포탈에 표시할 텍스트                           | `undefined`   |
-  | `position`        | THREE.Vector3 | Required | 텔레포트할 목표 위치                           | None          |
-  | `jumpPortalStyle` | CSSProperties | Optional | 포탈의 외관을 커스터마이징하기 위한 CSS 스타일 | `undefined`   |
+  | Prop Name       | Type          | Required | Description                                    | Default Value |
+  | --------------- | ------------- | -------- | ---------------------------------------------- | ------------- |
+  | `text`          | string        | Optional | 포탈에 표시할 텍스트                           | `undefined`   |
+  | `position`      | THREE.Vector3 | Required | 텔레포트할 목표 위치                           | None          |
+  | `teleportStyle` | CSSProperties | Optional | 포탈의 외관을 커스터마이징하기 위한 CSS 스타일 | `undefined`   |
 
 - **사용 예제**:
 
@@ -1561,7 +1561,7 @@ export default function App() {
   import React from 'react';
   import { Canvas } from '@react-three/fiber';
   import { Physics } from '@react-three/rapier';
-  import { GaesupWorld, JumpPortal } from '../../../src';
+  import { GaesupWorld, teleport } from '../../../src';
   import * as THREE from 'three';
 
   export default function App() {
@@ -1576,10 +1576,10 @@ export default function App() {
       >
         <Canvas>
           <Physics>
-            <JumpPortal
+            <teleport
               text="Teleport"
               position={new THREE.Vector3(10, 0, 5)}
-              jumpPortalStyle={{ backgroundColor: "blue", color: "white" }}
+              teleportStyle={{ backgroundColor: "blue", color: "white" }}
             />
             {/* 다른 컴포넌트 */}
           </Physics>
@@ -1591,7 +1591,7 @@ export default function App() {
 
 - **주요 기능**:
   - **텔레포트 기능**: 버튼 클릭 시 카메라와 캐릭터를 지정된 위치로 이동시킵니다.
-  - **커스터마이징**: `jumpPortalStyle`을 통해 포탈의 외관을 자유롭게 커스터마이징할 수 있습니다.
+  - **커스터마이징**: `teleportStyle`을 통해 포탈의 외관을 자유롭게 커스터마이징할 수 있습니다.
   - **텍스트 표시**: 포탈에 표시할 텍스트를 통해 사용자에게 명확한 안내를 제공합니다.
 
 ---

package/dist/gaesup/animation/actions.ts

@@ -1,52 +1,12 @@
 import { useFrame } from "@react-three/fiber";
-import { Ref, useContext, useEffect } from "react";
-import * as THREE from "three";
-import {
-  AnimationAction,
-  AnimationClip,
-  AnimationMixer,
-  Object3D,
-  Object3DEventMap,
-} from "three";
-import { animationTagType, groundRayType } from "../controller/type";
+import { useContext, useEffect } from "react";
+import { animationTagType } from "../controller/type";
 import { useGaesupAnimation } from "../hooks/useGaesupAnimation";
 import {
   GaesupWorldContext,
   GaesupWorldDispatchContext,
 } from "../world/context";
-
-export type Api<T extends AnimationClip> = {
-  ref: React.MutableRefObject<Object3D | undefined | null>;
-  clips: AnimationClip[];
-  mixer: AnimationMixer;
-  names: T["name"][];
-  actions: {
-    [key in T["name"]]: AnimationAction | null;
-  };
-};
-
-export type playActionsType = {
-  type: "character" | "vehicle" | "airplane";
-  currentAnimation?: string;
-  actions: actionsType;
-  animationRef: Ref<Object3D<Object3DEventMap>>;
-  isActive: boolean;
-};
-
-export type subscribeActionsType = {
-  type: "character" | "vehicle" | "airplane";
-  groundRay: groundRayType;
-  animations: AnimationClip[];
-};
-
-export type actionsType = {
-  [x: string]: THREE.AnimationAction | null;
-};
-
-export type playResultType = {
-  actions: actionsType;
-  ref: Ref<Object3D<Object3DEventMap>>;
-};
+import { playActionsType, subscribeActionsType } from "./type";
 
 export function subscribeActions({ type }: subscribeActionsType) {
   const { states } = useContext(GaesupWorldContext);

package/dist/gaesup/animation/type.ts

@@ -0,0 +1,43 @@
+import { Ref } from "react";
+import * as THREE from "three";
+import {
+  AnimationAction,
+  AnimationClip,
+  AnimationMixer,
+  Object3D,
+  Object3DEventMap,
+} from "three";
+import { groundRayType } from "../controller/type";
+
+export type Api<T extends AnimationClip> = {
+  ref: React.MutableRefObject<Object3D | undefined | null>;
+  clips: AnimationClip[];
+  mixer: AnimationMixer;
+  names: T["name"][];
+  actions: {
+    [key in T["name"]]: AnimationAction | null;
+  };
+};
+
+export type playActionsType = {
+  type: "character" | "vehicle" | "airplane";
+  currentAnimation?: string;
+  actions: actionsType;
+  animationRef: Ref<Object3D<Object3DEventMap>>;
+  isActive: boolean;
+};
+
+export type subscribeActionsType = {
+  type: "character" | "vehicle" | "airplane";
+  groundRay: groundRayType;
+  animations: AnimationClip[];
+};
+
+export type actionsType = {
+  [x: string]: THREE.AnimationAction | null;
+};
+
+export type playResultType = {
+  actions: actionsType;
+  ref: Ref<Object3D<Object3DEventMap>>;
+};

package/dist/gaesup/component/inner/common/RigidbodyRef.tsx

@@ -6,7 +6,13 @@ import {
   RigidBody,
   euler,
 } from "@react-three/rapier";
-import { MutableRefObject, forwardRef, useContext, useMemo } from "react";
+import {
+  MutableRefObject,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react";
 import * as THREE from "three";
 import { SkeletonUtils } from "three-stdlib";
 import playActions, { subscribeActions } from "../../../animation/actions";
@@ -27,13 +33,15 @@ export const RigidBodyRef = forwardRef(
   (props: rigidBodyRefType, ref: MutableRefObject<RapierRigidBody>) => {
     const { size } = useGltfAndSize({ url: props.url });
     const setGroundRay = useSetGroundRay();
-
-    props.groundRay &&
-      setGroundRay({
-        groundRay: props.groundRay,
-        length: 0.5,
-        colliderRef: props.colliderRef,
-      });
+    useEffect(() => {
+      if (props.groundRay && props.colliderRef) {
+        setGroundRay({
+          groundRay: props.groundRay,
+          length: 0.5,
+          colliderRef: props.colliderRef,
+        });
+      }
+    }, [props.groundRay, props.colliderRef, setGroundRay]);
     const { scene, animations } = useGLTF(props.url);
     const { actions, ref: animationRef } = useAnimations(animations);
     const worldContext = useContext(GaesupWorldContext);

package/dist/gaesup/component/inner/common/setGroundRay.ts

@@ -1,12 +1,11 @@
 // useSetGroundRay.ts
 import { useRapier } from "@react-three/rapier";
-import { groundRayType } from "../../../controller/type";
-import { getRayHit } from "../../../utils";
+import { useRayHit } from "../../../hooks/useRayHit";
 import { setGroundRayType } from "./type";
 
 export function useSetGroundRay() {
   const { rapier } = useRapier();
-
+  const getRayHit = useRayHit();
   const setGroundRay = ({
     groundRay,
     length,
@@ -14,7 +13,7 @@ export function useSetGroundRay() {
   }: setGroundRayType) => {
     groundRay.length = length;
     groundRay.rayCast = new rapier.Ray(groundRay.origin, groundRay.dir);
-    groundRay.hit = getRayHit<groundRayType>({
+    groundRay.hit = getRayHit({
       ray: groundRay,
       ref: colliderRef,
     });

package/dist/gaesup/hooks/useRayHit/index.ts

@@ -0,0 +1,25 @@
+import { Collider } from "@dimforge/rapier3d-compat";
+import { useRapier } from "@react-three/rapier";
+import { RefObject, useCallback } from "react";
+import { groundRayType } from "../../controller/type";
+
+export function useRayHit() {
+  const rapier = useRapier();
+
+  const getRayHit = useCallback(
+    ({ ray, ref }: { ray: groundRayType; ref: RefObject<Collider> }) => {
+      return rapier.world.castRay(
+        ray.rayCast,
+        ray.length,
+        true,
+        undefined,
+        undefined,
+        ref.current as any,
+        undefined
+      );
+    },
+    [rapier]
+  );
+
+  return getRayHit;
+}

package/dist/gaesup/hooks/useTeleport/index.tsx

@@ -1,16 +1,18 @@
+import { useContext } from "react";
 import * as THREE from "three";
+import { GaesupWorldContext } from "../../world/context";
 
 export function useTeleport() {
-  // const worldContext = useContext(GaesupWorldContext);
+  const worldContext = useContext(GaesupWorldContext);
 
   const Teleport = (position: THREE.Vector3) => {
-    // if (
-    //   worldContext &&
-    //   worldContext?.refs &&
-    //   worldContext?.refs?.rigidBodyRef &&
-    //   worldContext?.refs?.rigidBodyRef?.current
-    // )
-    //   worldContext.refs.rigidBodyRef.current.setTranslation(position, true);
+    if (
+      worldContext &&
+      worldContext?.refs &&
+      worldContext?.refs?.rigidBodyRef &&
+      worldContext?.refs?.rigidBodyRef?.current
+    )
+      worldContext.refs.rigidBodyRef.current.setTranslation(position, true);
   };
 
   return {

package/dist/gaesup/tools/gamepad/style.css.ts

@@ -1,5 +1,5 @@
-// style.css.ts
 import { globalStyle, style } from "@vanilla-extract/css";
+import { commonButton } from "../shared.css";
 
 export const gamePad = style({
   display: "grid",
@@ -9,36 +9,26 @@ export const gamePad = style({
   gridTemplateRows: "repeat(3, 1fr)",
 });
 
-export const padButton = style({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  position: "relative",
-  width: "5rem",
-  height: "5rem",
-  borderRadius: "50%",
-  fontSize: "1rem",
-  backgroundColor: "rgba(0, 0, 0, 0.5)",
-  color: "white",
-  boxShadow: "0 0 0.5rem rgba(0, 0, 0, 0.5)",
-  cursor: "pointer",
-  transition: "all 0.3s ease-in",
-  margin: "0.5rem",
-  selectors: {
-    "&:hover": {
-      boxShadow: "0 0 1rem rgba(0, 0, 0, 0.5)",
-    },
-    "&::after": {
-      content: '""',
-      position: "absolute",
-      width: "4rem",
-      height: "4rem",
-      borderRadius: "50%",
-      background: "rgba(0, 0, 0, 0.2)",
-      zIndex: 100000,
+export const padButton = style([
+  commonButton,
+  {
+    position: "relative",
+    fontSize: "1rem",
+    margin: "0.5rem",
+    borderRadius: "50%",
+    selectors: {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        width: "4rem",
+        height: "4rem",
+        borderRadius: "50%",
+        background: "rgba(0, 0, 0, 0.2)",
+        zIndex: 100000,
+      },
     },
   },
-});
+]);
 
 export const isClicked = style({
   background:
@@ -46,6 +36,7 @@ export const isClicked = style({
   boxShadow: "0 0 1rem rgba(245, 177, 97, 1)",
   color: "black",
   transition: "all 0.3s ease-in",
+  borderRadius: "50%",
   selectors: {
     "&:hover": {
       boxShadow: "0 0 2rem rgba(245, 177, 97, 1)",

package/dist/gaesup/tools/minimap/index.tsx

@@ -1,6 +1,4 @@
-// MiniMap.tsx
 import { useCallback, useContext, useState } from "react";
-
 import { GaesupWorldContext } from "../../world/context";
 import * as S from "./style.css";
 

package/dist/gaesup/tools/minimap/style.css.ts

@@ -1,12 +1,5 @@
-// style.css.ts
-import { globalFontFace, keyframes, style } from "@vanilla-extract/css";
-
-// @font-face 정의
-globalFontFace("Open Sans", {
-  src: 'url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap")',
-  fontWeight: "300",
-  fontStyle: "normal",
-});
+import { keyframes, style } from "@vanilla-extract/css";
+import { flexCenter, minimapSize } from "../shared.css";
 
 // 키프레임 정의
 const pulseWhite = keyframes({
@@ -25,123 +18,111 @@ const pulseWhite = keyframes({
 });
 
 // 스타일 정의
-export const minimap = style({
-  margin: "1rem",
-  borderRadius: "50%",
-  background: "rgba(0, 0, 0, 0.6)",
-  boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
-  backdropFilter: "blur(1rem)",
-  WebkitBackdropFilter: "blur(1rem)",
-  width: "18rem",
-  height: "18rem",
-  border: "4px solid rgba(0, 0, 0, 0.5)",
-  overflow: "hidden",
-  "@media": {
-    "screen and (max-width: 1024px)": {
-      width: "17rem",
-      height: "17rem",
-    },
-    "screen and (max-width: 768px)": {
-      width: "16rem",
-      height: "16rem",
-    },
+export const minimap = style([
+  {
+    margin: "1rem",
+    borderRadius: "50%",
+    background: "rgba(0, 0, 0, 0.6)",
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+    backdropFilter: "blur(1rem)",
+    WebkitBackdropFilter: "blur(1rem)",
+    border: "4px solid rgba(0, 0, 0, 0.5)",
+    overflow: "hidden",
   },
-});
+  minimapSize,
+]);
 
-export const minimapOuter = style({
-  position: "absolute",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  textAlign: "center",
-  width: "18rem",
-  height: "18rem",
-  overflow: "hidden",
-});
+export const minimapOuter = style([
+  flexCenter,
+  {
+    position: "absolute",
+    textAlign: "center",
+    overflow: "hidden",
+  },
+  minimapSize,
+]);
 
-export const minimapInner = style({
-  position: "relative",
-  display: "flex",
-  top: "50%",
-  left: "50%",
-  width: "18rem",
-  height: "18rem",
-  transformOrigin: "50% 50%",
-  borderRadius: "50%",
-  overflow: "hidden",
-  "@media": {
-    "screen and (max-width: 1024px)": {
-      width: "17rem",
-      height: "17rem",
-    },
-    "screen and (max-width: 768px)": {
-      width: "16rem",
-      height: "16rem",
-    },
+export const minimapInner = style([
+  {
+    position: "relative",
+    display: "flex",
+    top: "50%",
+    left: "50%",
+    transformOrigin: "50% 50%",
+    borderRadius: "50%",
+    overflow: "hidden",
   },
-});
+  minimapSize,
+]);
 
-export const avatar = style({
-  position: "absolute",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  textAlign: "center",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: "2rem",
-  height: "2rem",
-  borderRadius: "50%",
-  background: "rgba(5, 222, 250, 1)",
-  boxShadow: "0 0 10px rgba(5, 222, 250, 1)",
-  border: "2px solid transparent",
-  objectFit: "cover",
-  zIndex: 100,
-  animation: `${pulseWhite} 2s infinite`,
-});
+export const avatar = style([
+  {
+    position: "absolute",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: "2rem",
+    height: "2rem",
+    borderRadius: "50%",
+    background: "rgba(5, 222, 250, 1)",
+    boxShadow: "0 0 10px rgba(5, 222, 250, 1)",
+    border: "2px solid transparent",
+    objectFit: "cover",
+    zIndex: 100,
+    animation: `${pulseWhite} 2s infinite`,
+  },
+]);
 
-export const plusMinus = style({
-  position: "relative",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: "2rem",
-  height: "2rem",
-  borderRadius: "50%",
-  background: "rgba(0, 0, 0, 0.5)",
-  boxShadow: "0 0 5px rgba(0, 0, 0, 0.5)",
-  transition: "all 0.5s ease-in",
-  cursor: "pointer",
-  border: "2px solid transparent",
-  ":hover": {
-    boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+export const plusMinus = style([
+  {
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "2rem",
+    height: "2rem",
+    borderRadius: "50%",
+    background: "rgba(0, 0, 0, 0.5)",
+    boxShadow: "0 0 5px rgba(0, 0, 0, 0.5)",
+    transition: "all 0.5s ease-in",
+    cursor: "pointer",
+    border: "2px solid transparent",
+    selectors: {
+      "&:hover": {
+        boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+      },
+    },
   },
-});
+]);
 
-export const scale = style({
-  position: "absolute",
-  width: "13rem",
-  bottom: "-5rem",
-  left: "50%",
-  transform: "translateX(-50%)",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  textAlign: "center",
-  fontSize: "1.2rem",
-  color: "white",
-  textShadow: "0 0 10px black",
-  padding: "0.5rem",
-  borderRadius: "0.5rem",
-  boxShadow: "0 0 10px black",
-  background: "rgba(0, 0, 0, 0.5)",
-  zIndex: 3,
-  WebkitBackdropFilter: "blur(2rem)",
-  backdropFilter: "blur(2rem)",
-  fontFamily: '"Open Sans", sans-serif',
-  fontWeight: 300,
-});
+export const scale = style([
+  {
+    position: "absolute",
+    width: "13rem",
+    bottom: "-5rem",
+    left: "50%",
+    transform: "translateX(-50%)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    fontSize: "1.2rem",
+    color: "white",
+    textShadow: "0 0 10px black",
+    padding: "0.5rem",
+    borderRadius: "0.5rem",
+    boxShadow: "0 0 10px black",
+    background: "rgba(0, 0, 0, 0.5)",
+    zIndex: 3,
+    WebkitBackdropFilter: "blur(2rem)",
+    backdropFilter: "blur(2rem)",
+    fontFamily: '"Open Sans", sans-serif',
+    fontWeight: 300,
+  },
+]);
 
 export const text = style({
   position: "relative",

package/dist/gaesup/tools/shared.css.ts

@@ -0,0 +1,44 @@
+import { style } from "@vanilla-extract/css";
+
+// 공통 Flex 중앙 정렬 스타일
+export const flexCenter = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  textAlign: "center",
+});
+
+// 공통 버튼 스타일
+export const commonButton = style([
+  flexCenter,
+  {
+    width: "5rem",
+    height: "5rem",
+    cursor: "pointer",
+    transition: "all 0.3s ease-in",
+    boxShadow: "0 0 0.5rem rgba(0, 0, 0, 0.5)",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    color: "white",
+    selectors: {
+      "&:hover": {
+        boxShadow: "0 0 1rem rgba(0, 0, 0, 0.5)",
+      },
+    },
+  },
+]);
+
+// 미니맵 공통 사이즈 및 미디어 쿼리
+export const minimapSize = {
+  width: "18rem",
+  height: "18rem",
+  "@media": {
+    "screen and (max-width: 1024px)": {
+      width: "17rem",
+      height: "17rem",
+    },
+    "screen and (max-width: 768px)": {
+      width: "16rem",
+      height: "16rem",
+    },
+  },
+};

package/dist/gaesup/tools/{jumpPortal → teleport}/index.tsx

@@ -1,22 +1,18 @@
-// JumpPortal.tsx
+// teleport.tsx
 import { useTeleport } from "../../hooks/useTeleport";
 import * as S from "./style.css";
-import { JumpPortalType } from "./type.ts";
+import { teleportType } from "./type.ts";
 
-export function JumpPortal({
-  text,
-  position,
-  jumpPortalStyle,
-}: JumpPortalType) {
+export function teleport({ text, position, teleportStyle }: teleportType) {
   const { Teleport } = useTeleport();
 
   return (
     <div
-      className={S.jumpPortal}
+      className={S.teleport}
       onClick={() => {
         Teleport(position);
       }}
-      style={jumpPortalStyle}
+      style={teleportStyle}
     >
       {text}
     </div>

package/dist/gaesup/tools/teleport/style.css.ts

@@ -0,0 +1,14 @@
+import { style } from "@vanilla-extract/css";
+import { commonButton } from "../shared.css";
+
+export const teleport = style([
+  commonButton,
+  {
+    margin: "1rem",
+    fontSize: "0.8rem",
+    background: "rgba(0, 0, 0, 0.6)",
+    boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.6)",
+    transition: "all 0.2s ease-in",
+    borderRadius: "50%",
+  },
+]);

package/dist/gaesup/tools/{jumpPortal → teleport}/type.ts

@@ -1,8 +1,8 @@
 import { CSSProperties } from "react";
 import * as THREE from "three";
 
-export type JumpPortalType = {
+export type teleportType = {
   text?: string;
   position: THREE.Vector3;
-  jumpPortalStyle?: CSSProperties;
+  teleportStyle?: CSSProperties;
 };

package/dist/gaesup/utils/ray.ts

@@ -1,16 +1,16 @@
+import { Collider } from "@dimforge/rapier3d-compat";
 import { useRapier } from "@react-three/rapier";
-import { MutableRefObject } from "react";
-import { rayType } from "../controller/type";
+import { RefObject } from "react";
+import { groundRayType } from "../controller/type";
 
-// @ts-ignore
-export const getRayHit = <T extends rayType>({
+export const getRayHit = ({
   ray,
   ref,
 }: {
-  ray: any;
-  ref: MutableRefObject<any>;
+  ray: groundRayType;
+  ref: RefObject<Collider>;
 }) => {
-  const { world } = useRapier() as any;
+  const { world } = useRapier();
   return world.castRay(
     ray.rayCast,
     ray.length,

package/dist/gaesup/world/context/type.ts

@@ -40,7 +40,7 @@ export type keyControlType = {
 export type portalType = {
   text?: string;
   position: THREE.Vector3;
-  jumpPortalStlye?: CSSProperties;
+  teleportStlye?: CSSProperties;
 };
 
 export type portalsType = portalType[];

package/dist/index.ts

@@ -7,9 +7,9 @@ export { GaesupController } from "./gaesup/controller";
 export { GaeSupProps } from "./gaesup/gaesupProps";
 export { Clicker } from "./gaesup/tools/clicker";
 export { GamePad } from "./gaesup/tools/gamepad";
-export { JumpPortal } from "./gaesup/tools/jumpPortal";
 export { MiniMap } from "./gaesup/tools/minimap";
 export { Rideable } from "./gaesup/tools/rideable";
+export { teleport } from "./gaesup/tools/teleport";
 export { InnerHtml } from "./gaesup/utils/innerHtml";
 export { Elr, Qt, V3, V30, V31 } from "./gaesup/utils/vector";
 export { GaesupWorld } from "./gaesup/world";

package/index.ts

@@ -5,9 +5,6 @@ export {
   GaesupController,
   GaesupWorld,
   GamePad,
-  JoyStick,
-  JumpPortal,
-  KeyBoardToolTip,
   MiniMap,
   PassiveAirplane,
   PassiveCharacter,
@@ -17,6 +14,7 @@ export {
   V3,
   V30,
   V31,
+  teleport,
   useClicker,
   useGaesupAnimation,
   useGaesupController,

package/output.md

@@ -0,0 +1,327 @@
+# 코드 추출 결과
+
+## CSS TypeScript Files (.css.ts)
+
+### gaesup/tools/gamepad/style.css.ts
+
+```typescript
+// style.css.ts
+import { globalStyle, style } from "@vanilla-extract/css";
+
+export const gamePad = style({
+  display: "grid",
+  alignItems: "center",
+  justifyContent: "center",
+  gridTemplateColumns: "repeat(3, 1fr)",
+  gridTemplateRows: "repeat(3, 1fr)",
+});
+
+export const padButton = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  position: "relative",
+  width: "5rem",
+  height: "5rem",
+  borderRadius: "50%",
+  fontSize: "1rem",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  color: "white",
+  boxShadow: "0 0 0.5rem rgba(0, 0, 0, 0.5)",
+  cursor: "pointer",
+  transition: "all 0.3s ease-in",
+  margin: "0.5rem",
+  selectors: {
+    "&:hover": {
+      boxShadow: "0 0 1rem rgba(0, 0, 0, 0.5)",
+    },
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      width: "4rem",
+      height: "4rem",
+      borderRadius: "50%",
+      background: "rgba(0, 0, 0, 0.2)",
+      zIndex: 100000,
+    },
+  },
+});
+
+export const isClicked = style({
+  background:
+    "radial-gradient(circle at center, rgba(245, 177, 97, 1) 0.4%, rgba(236, 54, 110, 1) 100.2%)",
+  boxShadow: "0 0 1rem rgba(245, 177, 97, 1)",
+  color: "black",
+  transition: "all 0.3s ease-in",
+  selectors: {
+    "&:hover": {
+      boxShadow: "0 0 2rem rgba(245, 177, 97, 1)",
+    },
+  },
+});
+
+// 사용자 선택 방지 글로벌 스타일
+globalStyle(`${gamePad} *`, {
+  WebkitTouchCallout: "none",
+  WebkitUserSelect: "none",
+  MozUserSelect: "none",
+  msUserSelect: "none",
+  userSelect: "none",
+});
+
+```
+
+### gaesup/tools/teleport/style.css.ts
+
+```typescript
+import { style } from "@vanilla-extract/css";
+
+export const teleport = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  textAlign: "center",
+  margin: "1rem",
+  fontSize: "0.8rem",
+  borderRadius: "50%",
+  width: "5rem",
+  height: "5rem",
+  color: "white",
+  background: "rgba(0, 0, 0, 0.6)",
+  boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.6)",
+  transition: "all 0.2s ease-in",
+  cursor: "pointer",
+});
+
+```
+
+### gaesup/tools/minimap/style.css.ts
+
+```typescript
+// style.css.ts
+import { globalFontFace, keyframes, style } from "@vanilla-extract/css";
+
+// @font-face 정의
+globalFontFace("Open Sans", {
+  src: 'url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap")',
+  fontWeight: "300",
+  fontStyle: "normal",
+});
+
+// 키프레임 정의
+const pulseWhite = keyframes({
+  "0%": {
+    boxShadow: "0 0 0 0 rgba(255, 255, 255, 0.7)",
+    opacity: 1,
+  },
+  "70%": {
+    boxShadow: "0 0 0 10px rgba(255, 255, 255, 0)",
+    opacity: 0.7,
+  },
+  "100%": {
+    boxShadow: "0 0 0 0 rgba(255, 255, 255, 0)",
+    opacity: 1,
+  },
+});
+
+// 스타일 정의
+export const minimap = style({
+  margin: "1rem",
+  borderRadius: "50%",
+  background: "rgba(0, 0, 0, 0.6)",
+  boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+  backdropFilter: "blur(1rem)",
+  WebkitBackdropFilter: "blur(1rem)",
+  width: "18rem",
+  height: "18rem",
+  border: "4px solid rgba(0, 0, 0, 0.5)",
+  overflow: "hidden",
+  "@media": {
+    "screen and (max-width: 1024px)": {
+      width: "17rem",
+      height: "17rem",
+    },
+    "screen and (max-width: 768px)": {
+      width: "16rem",
+      height: "16rem",
+    },
+  },
+});
+
+export const minimapOuter = style({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  width: "18rem",
+  height: "18rem",
+  overflow: "hidden",
+});
+
+export const minimapInner = style({
+  position: "relative",
+  display: "flex",
+  top: "50%",
+  left: "50%",
+  width: "18rem",
+  height: "18rem",
+  transformOrigin: "50% 50%",
+  borderRadius: "50%",
+  overflow: "hidden",
+  "@media": {
+    "screen and (max-width: 1024px)": {
+      width: "17rem",
+      height: "17rem",
+    },
+    "screen and (max-width: 768px)": {
+      width: "16rem",
+      height: "16rem",
+    },
+  },
+});
+
+export const avatar = style({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "2rem",
+  height: "2rem",
+  borderRadius: "50%",
+  background: "rgba(5, 222, 250, 1)",
+  boxShadow: "0 0 10px rgba(5, 222, 250, 1)",
+  border: "2px solid transparent",
+  objectFit: "cover",
+  zIndex: 100,
+  animation: `${pulseWhite} 2s infinite`,
+});
+
+export const plusMinus = style({
+  position: "relative",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "2rem",
+  height: "2rem",
+  borderRadius: "50%",
+  background: "rgba(0, 0, 0, 0.5)",
+  boxShadow: "0 0 5px rgba(0, 0, 0, 0.5)",
+  transition: "all 0.5s ease-in",
+  cursor: "pointer",
+  border: "2px solid transparent",
+  ":hover": {
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.5)",
+  },
+});
+
+export const scale = style({
+  position: "absolute",
+  width: "13rem",
+  bottom: "-5rem",
+  left: "50%",
+  transform: "translateX(-50%)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  textAlign: "center",
+  fontSize: "1.2rem",
+  color: "white",
+  textShadow: "0 0 10px black",
+  padding: "0.5rem",
+  borderRadius: "0.5rem",
+  boxShadow: "0 0 10px black",
+  background: "rgba(0, 0, 0, 0.5)",
+  zIndex: 3,
+  WebkitBackdropFilter: "blur(2rem)",
+  backdropFilter: "blur(2rem)",
+  fontFamily: '"Open Sans", sans-serif',
+  fontWeight: 300,
+});
+
+export const text = style({
+  position: "relative",
+  fontSize: "1rem",
+  color: "black",
+  padding: "0.5rem",
+  borderRadius: "0.5rem",
+  background: "rgba(255, 255, 255, 0.5)",
+  boxShadow: "0 0 10px rgba(255, 255, 255, 0.5)",
+  zIndex: 3,
+});
+
+export const minimapObject = style({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  borderRadius: "2px",
+  background: "rgba(0, 0, 0, 0.3)",
+});
+
+export const imageObject = style({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  background: `
+    linear-gradient(to bottom, transparent 95%, rgba(0, 0, 0, 0.2) 20%) 0 0 / 100% 40px repeat-y,
+    linear-gradient(to right, transparent 38px, rgba(0, 0, 0, 0.2) 38px) 0 0 / 40px 100% repeat-x transparent
+  `,
+});
+
+export const textObject = style({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+});
+
+const directionBase = style({
+  position: "absolute",
+  color: "white",
+  fontSize: "1.5rem",
+  zIndex: 2000,
+});
+
+export const east = style([
+  directionBase,
+  {
+    top: "50%",
+    right: 0,
+  },
+]);
+
+export const west = style([
+  directionBase,
+  {
+    top: "50%",
+    left: 0,
+  },
+]);
+
+export const south = style([
+  directionBase,
+  {
+    top: 0,
+    left: "50%",
+  },
+]);
+
+export const north = style([
+  directionBase,
+  {
+    bottom: 0,
+    left: "50%",
+  },
+]);
+
+```
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gaesup-world",
-  "version": "0.9.58",
+  "version": "0.9.60",
   "type": "module",
   "main": "dist/index.ts",
   "types": "dist/index.d.ts",
@@ -15,7 +15,8 @@
     "prepare": "yarn clean && tsc -p tsconfig.build.json && yarn copy-files",
     "predeploy": "yarn build",
     "deploy": "gh-pages -d dist",
-    "test": "jest"
+    "test": "jest",
+    "publish": "yarn prepare && yarn npm publish --access public"
   },
   "dependencies": {
     "@dimforge/rapier3d": "^0.14.0",

package/yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: pnp

package/dist/gaesup/tools/jumpPortal/style.css.ts

@@ -1,18 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const jumpPortal = style({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  textAlign: "center",
-  margin: "1rem",
-  fontSize: "0.8rem",
-  borderRadius: "50%",
-  width: "5rem",
-  height: "5rem",
-  color: "white",
-  background: "rgba(0, 0, 0, 0.6)",
-  boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.6)",
-  transition: "all 0.2s ease-in",
-  cursor: "pointer",
-});