wip

Author: tonymfer

app/providers.tsx

@@ -2,23 +2,28 @@
 
 import MotionConfig from "@/components/MotionConfig";
 import { farcasterFrame } from "@farcaster/miniapp-wagmi-connector";
-import { type ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { type ReactNode, useState } from "react";
 import { createConfig, http, WagmiProvider } from "wagmi";
-import { base, mainnet } from "wagmi/chains";
+import { base, mainnet, baseSepolia } from "wagmi/chains";
 
 const config = createConfig({
-  chains: [base, mainnet],
+  chains: [base, baseSepolia, mainnet],
   connectors: [farcasterFrame() as unknown as any],
   transports: {
     [base.id]: http(),
+    [baseSepolia.id]: http(),
     [mainnet.id]: http(),
   },
 });
 
 export function Providers(props: { children: ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
   return (
-    <WagmiProvider config={config}>
-      <MotionConfig>{props.children}</MotionConfig>
-    </WagmiProvider>
+    <QueryClientProvider client={queryClient}>
+      <WagmiProvider config={config}>
+        <MotionConfig>{props.children}</MotionConfig>
+      </WagmiProvider>
+    </QueryClientProvider>
   );
 }

components/CreatePostModal.tsx

@@ -16,7 +16,7 @@ import { mintclub } from "mint.club-v2-sdk";
 import { motion } from "motion/react";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { useAccount, useSwitchChain, useWalletClient } from "wagmi";
+import { useAccount, useSwitchChain } from "wagmi";
 
 export default function CreatePostModal({
   userToken,
@@ -31,10 +31,10 @@ export default function CreatePostModal({
   const { address, chain } = useAccount();
   const { switchChain } = useSwitchChain();
 
-  const { data: walletClient } = useWalletClient({
-    account: address,
-    chainId: Number(NETWORK.BASE_SEPOLIA),
-  });
+  // const { data: walletClient } = useWalletClient({
+  //   account: address,
+  //   chainId: Number(NETWORK.BASE_SEPOLIA),
+  // });
 
   /**
    * 체인 확인 및 전환
@@ -405,15 +405,15 @@ export default function CreatePostModal({
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.3, duration: timing.normal }}
         >
-          <label className="block text-sm font-medium text-gray-700 mb-2 text-instagram-body">
+          <label className="block text-sm font-medium text-white mb-2 text-instagram-body">
             포스트 이름
           </label>
           <motion.input
             type="text"
             value={postName}
             onChange={(e) => setPostName(e.target.value)}
             placeholder="포스트 이름을 입력하세요"
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-ewha-600 text-instagram-body"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-ewha-600 text-black"
             whileFocus={{ scale: 1.02 }}
             transition={{ ...spring.smooth }}
           />

components/Orb.tsx

@@ -6,13 +6,15 @@ interface OrbProps {
   hoverIntensity?: number;
   rotateOnHover?: boolean;
   forceHoverState?: boolean;
+  isHover?: boolean;
 }
 
 export default function Orb({
   hue = 0,
   hoverIntensity = 0.2,
   rotateOnHover = true,
   forceHoverState = false,
+  isHover = false,
 }: OrbProps) {
   const ctnDom = useRef<HTMLDivElement>(null);
 
@@ -162,8 +164,10 @@ export default function Orb({
       float c = cos(angle);
       uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
       
-      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
-      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+      // hover 상태를 반전시켜서 적용
+      float invertedHover = 1.0 - hover;
+      uv.x += invertedHover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += invertedHover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
       
       return draw(uv);
     }
@@ -263,11 +267,13 @@ export default function Orb({
       program.uniforms.hue.value = hue;
       program.uniforms.hoverIntensity.value = hoverIntensity;
 
-      const effectiveHover = forceHoverState ? 1 : targetHover;
+      // isHover prop이 true이면 hover 상태로, forceHoverState나 targetHover도 고려
+      const effectiveHover = forceHoverState || isHover ? 1 : targetHover;
       program.uniforms.hover.value +=
         (effectiveHover - program.uniforms.hover.value) * 0.1;
 
-      if (rotateOnHover && effectiveHover > 0.5) {
+      // rotateOnHover 로직도 반전 - hover 상태가 아닐 때 회전
+      if (rotateOnHover && effectiveHover < 0.5) {
         currentRot += dt * rotationSpeed;
       }
       program.uniforms.rot.value = currentRot;
@@ -284,7 +290,7 @@ export default function Orb({
       container.removeChild(gl.canvas);
       gl.getExtension("WEBGL_lose_context")?.loseContext();
     };
-  }, [hue, hoverIntensity, rotateOnHover, forceHoverState]);
+  }, [hue, hoverIntensity, rotateOnHover, forceHoverState, isHover]);
 
   return <div ref={ctnDom} className="w-full h-full" />;
 }

constants/index.ts

@@ -62,4 +62,4 @@ export const TOAST_MESSAGES = {
 
 // 유틸리티 함수들
 export const createTokenSymbol = (username: string): string =>
-  `BASE${username.toUpperCase()}`;
+  `AWHA${username.toUpperCase()}`;

hooks/useUserToken.ts

@@ -30,7 +30,7 @@ export const useUserToken = () => {
       // TODO: 토큰 심볼 생성 - `EWHA${username.toUpperCase()}`
       // const tokenSymbol = `EWHATEST`;
 
-      const tokenSymbol = `EWHA${username.toUpperCase()}`;
+      const tokenSymbol = createTokenSymbol(username);
       // TODO: mint.club SDK로 토큰 존재 여부 확인
       // mintclub.network(NETWORK.BASE_SEPOLIA).token(tokenSymbol).exists()
       const exists = await mintclub